/* The arcade's own stylesheet.
 *
 * Deliberately a separate file rather than more of webui/style.css: the arcade is a hundred
 * games and it would double the length of the app's stylesheet for something most people are
 * not looking at. It is loaded by index.html alongside the main one.
 *
 * Everything here reads from the app's own custom properties (--accent, --card, --ink and the
 * rest), so the arcade follows the light and dark themes without a second palette to keep in
 * step. The only new variables are the game-specific ones in brand.js.
 */

.arcade {
  --ag-touch: 44px;
  --ag-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent);
  display: flex; flex-direction: column; gap: 18px;
  height: 100%; overflow: auto; padding: 22px 26px 40px;
  color: var(--ink); font-family: var(--sans);
  scrollbar-gutter: stable;
}
.arcade, .arcade * { box-sizing: border-box; }
.ag-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; }
.arcade :where(button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: var(--ag-focus);
}
.arcade :where(button, summary) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ag-loading { color: var(--dim); padding: 40px; text-align: center; }

/* ── the front ───────────────────────────────────────────────────────────────── */
.ag-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; }
.ag-head h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.ag-head p { margin: 4px 0 0; color: var(--dim); font-size: 13.5px; }
.ag-head-do { display: flex; gap: 8px; align-items: center; }
.ag-search { width: 240px; min-height: var(--ag-touch); padding: 9px 12px; border-radius: 10px; font: inherit;
  border: 1px solid var(--stroke-2); background: var(--pane); color: var(--ink); }
.ag-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.ag-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.ag-chip { min-height: var(--ag-touch); padding: 6px 13px; border-radius: 999px; font: inherit; font-size: 13px;
  border: 1px solid var(--stroke-2); background: var(--pane); color: var(--body);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.ag-chip:hover { border-color: var(--accent); }
.ag-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.ag-settings { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; background: var(--pane);
  border: 1px solid var(--stroke); font-size: 13.5px; }
.ag-settings select { font: inherit; padding: 5px 8px; border-radius: 8px;
  min-height: var(--ag-touch); border: 1px solid var(--stroke-2); background: var(--card); color: var(--ink); }
.ag-lvl-blurb { color: var(--dim); font-size: 12.5px; flex: 1 1 220px; }
.ag-sound { display: flex; align-items: center; gap: 8px; min-height: var(--ag-touch); }
.ag-sound input { width: 20px; height: 20px; accent-color: var(--accent); }
.ag-vol { width: 110px; accent-color: var(--accent); }

.ag-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); }
.ag-tile { display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 15px 15px 13px; border-radius: 14px; cursor: pointer; font: inherit;
  background: var(--card); border: 1px solid var(--stroke);
  box-shadow: var(--shadow-card); transition: transform .13s ease, box-shadow .13s ease,
    border-color .13s ease; }
.ag-tile:hover { transform: translateY(-2px); border-color: var(--accent);
  box-shadow: var(--shadow-lift); }
.ag-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ag-tile-ic { font-size: 21px; line-height: 1; }
.ag-tile b { font-size: 15px; letter-spacing: -0.01em; }
.ag-tile-blurb { color: var(--dim); font-size: 12.5px; line-height: 1.45; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ag-tile-tags { display: flex; gap: 6px; margin-top: 3px; }
.ag-tile-tags em { font-style: normal; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 6px; color: var(--dim);
  background: rgba(127,127,127,.10); }
.ag-none { color: var(--dim); padding: 30px 0; }

/* A game that would not load is SAID, not hidden. See the note in arcade.js. */
.ag-failed { margin-top: 8px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(201,51,58,.35); background: rgba(201,51,58,.07); font-size: 13px; }
.ag-failed p { margin: 4px 0 0; color: var(--dim); }

/* ── a game in progress ──────────────────────────────────────────────────────── */
.ag-board { display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.ag-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; }
.ag-tools { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

.ag-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: var(--ag-touch); min-height: var(--ag-touch); padding: 8px 14px;
  border-radius: 10px; font: inherit; font-size: 13.5px; cursor: pointer;
  background: var(--pane); color: var(--ink); border: 1px solid var(--stroke-2);
  transition: border-color .12s, background .12s, transform .08s; }
.ag-btn:hover:not(:disabled) { border-color: var(--accent); }
.ag-btn:active:not(:disabled) { transform: translateY(1px); }
.ag-btn:disabled { opacity: .42; cursor: default; }
.ag-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ag-btn kbd { font: 11px/1 var(--mono); padding: 3px 5px; border-radius: 5px;
  background: rgba(127,127,127,.16); color: var(--dim); }
.ag-btn.primary kbd { background: rgba(255,255,255,.22); color: #fff; }

/* The seats. YOU are always the app's copper, URSY is always the bear's cool blue, in every
   one of the 54 games, so you never have to work out which side you are. */
.ag-seats { display: flex; gap: 10px; }
.ag-seat { display: flex; align-items: center; gap: 9px; padding: 6px 13px 6px 6px;
  border-radius: 999px; background: var(--pane); border: 1px solid var(--stroke);
  transition: border-color .15s, box-shadow .15s; }
.ag-seat.on { border-color: currentColor; box-shadow: 0 0 0 3px rgba(180,104,42,.10); }
.ag-seat.you { color: var(--g-you, #B4682A); }
.ag-seat.ursy { color: var(--g-ursy, #6fd6ff); }
.ag-seat.ursy.on { box-shadow: 0 0 0 3px rgba(111,214,255,.14); }
.ag-face { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: currentColor; font-size: 16px; }
.ag-you { color: #fff; font-weight: 700; font-size: 13px; }
.ag-who { display: flex; flex-direction: column; line-height: 1.15; }
.ag-who b { font-size: 13px; color: var(--ink); }
.ag-who em { font-style: normal; font-size: 11px; color: var(--dim); }
.ag-turn { width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: ag-pulse 1.4s ease-in-out infinite; }
@keyframes ag-pulse { 0%,100% { opacity: .35; transform: scale(.8); }
                      50% { opacity: 1; transform: scale(1.15); } }

.ag-thinking { display: flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--g-ursy, #6fd6ff); }
.ag-thinking span { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: ag-dot 1.1s ease-in-out infinite; }
.ag-thinking span:nth-child(2) { animation-delay: .16s; }
.ag-thinking span:nth-child(3) { animation-delay: .32s; }
@keyframes ag-dot { 0%,100% { opacity: .25; transform: translateY(0); }
                    50% { opacity: 1; transform: translateY(-3px); } }
.ag-say { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 13px;
  background: rgba(111,214,255,.10); border: 1px solid rgba(111,214,255,.28); }

.ag-stage { position: relative; display: grid; place-items: center; flex: 1; min-width: 0;
  align-items: safe center; justify-items: safe center;
  min-height: 320px; border-radius: 16px; isolation: isolate; }
.ag-play-surface { display: grid; place-items: center; justify-items: safe center; width: 100%;
  min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: visible;
  overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--stroke-2) transparent; }
.ag-play-surface > * { min-width: 0; }
.ag-stage.paused .ag-play-surface { filter: blur(3px) saturate(.6); pointer-events: none;
  user-select: none; }
.ag-stage canvas { max-width: 100%; touch-action: none; }
/* Compact action rows are shared by otherwise unrelated rooms. Their original 28–41px
   controls were mouse-sized; this raises only actions and direction pads, never dense board
   cells whose geometry carries game meaning. */
.arcade .ag-stage :where(.t48-key, .an-btn, .bsh-btn, .bj-btn, .mmd-go, .cb-btn,
  .ttr-key, .pk-btn, .yz-btn, .gr-btn, .hm-key, .ht-btn, .lot-btn, .flp-go, .snk-key,
  .sp-deal, .sdk-btn, .sdk-key, .hno-btn, .udk-btn, .tac-b) { min-height: var(--ag-touch); }
.arcade .ag-stage :where(.ttr-key, .hm-key, .sdk-btn) { min-width: var(--ag-touch); }
.arcade .ag-stage .mjg-bar button { min-height: var(--ag-touch); }
.arcade .ag-stage .mmd-peg.btn { width: var(--ag-touch); height: var(--ag-touch); }

/* Four in a Row is the one first-party module that predates exported module CSS. Keeping its
   room skin here preserves the module API while giving all 42 column targets a real board and
   touch-sized hit area. */
.g4 { width: min(100%, 460px); display: grid; place-items: center; }
.g4-grid { width: min(100%, 440px); display: flex; flex-direction: column; gap: 4px;
  padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--g-ursy) 58%, #132238);
  border: 1px solid color-mix(in srgb, var(--g-ursy) 48%, transparent);
  box-shadow: inset 0 0 34px rgba(0,0,0,.25), 0 16px 34px rgba(0,0,0,.18); }
.g4-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.g4-cell { width: 100%; aspect-ratio: 1; min-height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16); cursor: pointer;
  background: radial-gradient(circle at 40% 34%, var(--pane) 0 52%, var(--card) 54% 100%);
  box-shadow: inset 0 3px 7px rgba(0,0,0,.35); transition: transform .12s, filter .12s; }
.g4-cell:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.14); }
.g4-cell.p0 { background: radial-gradient(circle at 38% 32%, #eea168 0 48%, var(--g-you) 52% 100%); }
.g4-cell.p1 { background: radial-gradient(circle at 38% 32%, #b9edff 0 48%, var(--g-ursy) 52% 100%); }
.g4-cell.just { box-shadow: inset 0 0 0 3px var(--g-gold), inset 0 3px 7px rgba(0,0,0,.32); }
.g4-cell:disabled { cursor: default; }
.ag-pause, .ag-settings-dialog { position: absolute; inset: 0; z-index: 5; margin: auto;
  color: #fff; background: color-mix(in srgb, #0c0b12 84%, transparent);
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 72px rgba(0,0,0,.42);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ag-pause { display: grid; place-items: center; gap: 10px; align-content: center;
  width: min(390px, calc(100% - 24px)); height: fit-content; min-height: 250px;
  padding: 28px; border-radius: 18px; text-align: center; }
.ag-pause-mark { display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; background: color-mix(in srgb, var(--accent) 82%, #fff 18%);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 18%, transparent);
  font: 800 19px/1 var(--sans); letter-spacing: 3px; }
.ag-pause b { font-size: 22px; letter-spacing: -.02em; }
.ag-pause p { margin: -3px 0 5px; color: rgba(255,255,255,.72); }
.ag-pause > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.ag-settings-dialog { width: min(520px, calc(100% - 24px)); height: fit-content;
  padding: 22px; border-radius: 18px; color: var(--ink); background: var(--card); }
.ag-settings-dialog header { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 18px; }
.ag-settings-dialog header p { margin: 0 0 3px; color: var(--accent); font-size: 11px;
  font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ag-settings-dialog h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.ag-setting-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(160px, 1.25fr);
  gap: 16px; align-items: center; min-height: 54px; padding: 6px 0; font-weight: 650; }
.ag-setting-row select { width: 100%; min-height: var(--ag-touch); padding: 8px 11px;
  border-radius: 10px; border: 1px solid var(--stroke-2); background: var(--pane); color: var(--ink);
  font: inherit; }
.ag-setting-row .ag-vol { width: 100%; }
.ag-setting-note { margin: -2px 0 8px; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.ag-setting-check { display: flex; align-items: center; gap: 10px; min-height: 52px;
  border-block: 1px solid var(--stroke); font-weight: 650; }
.ag-setting-check input { width: 22px; height: 22px; accent-color: var(--accent); }

.ag-help { margin-top: 4px; font-size: 13px; color: var(--dim); }
.ag-help summary { display: inline-flex; align-items: center; min-height: var(--ag-touch);
  padding: 0 4px; cursor: pointer; }
.ag-keys { display: grid; gap: 6px; margin: 10px 0 0; }
.ag-keys > div { display: flex; gap: 10px; align-items: baseline; }
.ag-keys dt { min-width: 120px; display: flex; gap: 4px; }
.ag-keys dd { margin: 0; color: var(--body); }
.ag-keys kbd, .ag-nocontrols kbd { font: 11px/1 var(--mono); padding: 3px 6px;
  border-radius: 5px; background: rgba(127,127,127,.16); }
.ag-nocontrols { color: var(--dim); font-style: italic; }

/* ── the result ──────────────────────────────────────────────────────────────── */
.ag-result { position: fixed; inset: 0; margin: auto; width: min(440px, 90vw);
  height: fit-content; max-height: min(90dvh, 720px); overflow: auto;
  padding: 26px 26px 22px; border-radius: 18px; text-align: center;
  background: var(--card); border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-lift), 0 0 0 100vmax rgba(8,7,12,.66); z-index: 60;
  animation: ag-pop .28s cubic-bezier(.2,.9,.3,1.2); }
@keyframes ag-pop { from { transform: scale(.9) translateY(10px); opacity: 0; } }
.ag-result h2 { margin: 10px 0 4px; font-size: 24px; letter-spacing: -0.02em; }
.ag-result.won h2 { color: var(--g-win, #12A46F); }
.ag-result.lost h2 { color: var(--g-lose, #C9333A); }
.ag-result-bear { font-size: 42px; line-height: 1; }
.ag-because { margin: 0 0 14px; color: var(--dim); font-size: 13.5px; }
.ag-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 16px; }
.ag-stats > div { padding: 9px 4px; border-radius: 10px; background: rgba(127,127,127,.07); }
.ag-stats dt { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dim-2); }
.ag-stats dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; }
.ag-best { margin: 0 0 12px; font-weight: 600; color: var(--g-gold, #ee8b3d); }
.ag-note { margin: 0 0 12px; font-size: 12.5px; color: var(--dim); }
.ag-result-do { display: flex; gap: 8px; justify-content: center; }

@media (max-width: 700px) {
  .arcade { gap: 14px; padding: 14px 14px 26px; scrollbar-gutter: auto; }
  .ag-board { gap: 10px; }
  .ag-bar { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
  .ag-seats { min-width: 0; justify-content: flex-end; flex-wrap: wrap; }
  .ag-seat { padding-right: 10px; }
  .ag-tools { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%; gap: 6px; }
  .ag-tools .ag-btn { min-width: 0; padding-inline: 7px; font-size: 12px; }
  .ag-tools .ag-btn kbd { display: none; }
  .ag-stage { min-height: 340px; }
  .ag-stage { align-items: start; }
  .ag-settings-dialog { padding: 18px; }
  .ag-setting-row { grid-template-columns: 1fr; gap: 6px; }
  .ag-stats { grid-template-columns: repeat(2, 1fr); }
  .ag-keys > div { align-items: flex-start; }
  .ag-keys dt { min-width: 88px; flex-wrap: wrap; }
  .ag-play-surface :where(.bg-board, .mjg-board, .mc-board, .sdk-grid, .sdk-pad, .hno-board) {
    max-width: 100%;
  }
  .ag-play-surface :where(.ttr, .ttr-pad) { max-width: 100%; min-width: 0; }
  .hm-krow { flex-wrap: wrap; justify-content: center; }
  .g4-grid { padding: 6px; gap: 2px; }
  .g4-row { gap: 2px; }
}

@media (max-width: 430px) {
  .arcade { padding-inline: 10px; }
  .ag-bar { grid-template-columns: minmax(80px, auto) minmax(0, 1fr); }
  .ag-seat { gap: 6px; }
  .ag-face { width: 28px; height: 28px; }
  .ag-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ag-tools .ag-btn:last-child { grid-column: auto; }
  .ag-pause { min-height: 230px; padding: 22px 16px; }
  .ag-result { width: calc(100vw - 24px); padding: 22px 18px 18px; }
  .ag-result-do { flex-direction: column; }
}

/* Somebody who has asked for less movement gets a still arcade. Nothing here depends on an
   animation having run, so this is a safe blanket rule rather than a per-rule audit. */
@media (prefers-reduced-motion: reduce) {
  .arcade *, .arcade *::before, .arcade *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .arcade { scroll-behavior: auto; }
  .ag-stage.paused .ag-play-surface { filter: saturate(.55); }
}

@media (forced-colors: active) {
  .ag-seat.on, .ag-btn, .ag-chip, .ag-settings-dialog, .ag-pause, .ag-result {
    border: 2px solid CanvasText;
  }
  .ag-turn { forced-color-adjust: none; background: Highlight; }
  .ag-stage.paused .ag-play-surface { filter: none; opacity: .45; }
}