/* P11-W12 pre-brand polish — accessibility, readability and interaction consistency. */

:root {
  --p11-focus: #ffe47a;
  --p11-focus-ring: rgba(255, 228, 122, 0.34);
}

/* Keyboard focus must be obvious without changing the normal pointer presentation. */
#ui button:focus-visible,
#ui a:focus-visible {
  outline: 3px solid var(--p11-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--p11-focus-ring);
}

/* Commercial mobile-game target sizes: no primary interactive surface below 44 px. */
.p11-icon-button,
.p11-product-close,
.p11-sheet-close,
.p11-setting-action,
.p11-daily-btn,
.p11-nav-btn,
.p11-equip-btn,
.p11-flow-core-card button,
.p11-season-chip,
.p08-primary,
.p08-secondary,
.p08-choice,
.p08-mini-btn,
#pauseBtn,
#audioBtn {
  min-height: 44px;
}

.p11-nav-btn {
  font-size: max(10px, 0.66rem);
}

.p11-season-chip span {
  font-size: max(9px, 0.6rem);
}

.p11-season-chip strong {
  font-size: max(11px, 0.7rem);
}

.p11-product-panel,
.p11-event-panel,
.p11-settings-panel,
.p08-panel,
.p11-gameover-panel {
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/* Raise low-priority copy out of the web-dashboard micro-text range. */
.p11-product-head p,
.p11-card-copy p,
.p11-progress-copy p,
.p11-progress-copy small,
.p11-flow-section-head p,
.p11-flow-core-card p,
.p11-flow-core-card small,
.p11-event-card small,
.p11-setting-copy span,
#ftueCopy {
  font-size: max(11px, 0.72rem);
  line-height: 1.35;
}

.p11-card-state,
.p11-result-kicker,
.p11-event-kicker,
.p11-event-card span,
.p11-flow-core-card span,
#flowLabel {
  font-size: max(9px, 0.62rem);
}

.p11-card-copy small {
  font-size: max(10px, 0.66rem);
}

/* Keep important progress information scannable on small screens. */
@media (max-width: 520px) {
  .p11-product-head p,
  .p11-card-copy p,
  .p11-progress-copy p,
  .p11-progress-copy small,
  .p11-event-card small,
  .p11-setting-copy span,
  #ftueCopy {
    font-size: 12px;
  }

  .p11-progress-heading strong,
  .p11-event-card strong,
  .p11-card-copy h3 {
    font-size: 14px;
  }

  .p11-nav-btn {
    font-size: 10.5px;
    letter-spacing: 0.55px;
  }

  .p11-season-chip span {
    font-size: 9px;
  }

  .p11-season-chip strong {
    font-size: 10.5px;
  }

  .p11-flow-core-card {
    grid-template-columns: 48px 1fr;
  }

  .p11-flow-core-card button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .p11-product-panel,
  .p11-event-panel,
  .p11-settings-panel {
    border-radius: 22px;
  }
}

/* On touch devices, avoid desktop hover states that can remain latched after a tap. */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .p11-nav-btn:hover,
  .p11-product-close:hover,
  .p11-equip-btn:hover,
  .p11-season-chip:hover,
  .p08-choice:hover {
    transform: none;
  }
}

/* Respect higher-contrast OS preferences without changing the art direction. */
@media (prefers-contrast: more) {
  .p11-product-panel,
  .p11-event-panel,
  .p11-settings-panel,
  .p11-collection-card,
  .p11-progress-card,
  .p11-achievement-card,
  .p11-event-card,
  #flowHud,
  .p11-season-chip {
    border-color: rgba(255, 255, 255, 0.36);
  }

  .p11-product-head p,
  .p11-card-copy p,
  .p11-progress-copy p,
  .p11-progress-copy small,
  .p11-setting-copy span,
  .p11-event-card small {
    color: rgba(255, 255, 255, 0.82);
  }
}

/* Reduced motion is a product-wide rule, not a screen-by-screen exception. */
@media (prefers-reduced-motion: reduce) {
  #ui *,
  #ui *::before,
  #ui *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* Utility for future semantic labels without visual clutter. */
.p11-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}