/* Neon Arena — arcade platform chrome: the game-switcher tab-bar (still used by
   the dashboard) + the per-game lobby, drawn to the Claude Design console's
   «isGame» screen. Loaded after components.css; builds on .panel/.chip-sq/
   .avatar-tile/.segmented rather than re-declaring them.

   EVERY NUMBER BELOW IS THE MOCK'S, copied from console.html rather than
   eyeballed. The hero is `min-height:210px` (250 at the medium size class),
   `border-radius:18px`, a `1px solid <accent>55` edge and the 90° scrim
   `rgba(8,6,15,.94) 24% → rgba(8,6,15,.32) 72% → rgba(8,6,15,.7)`; the body is
   `padding:22px 26px; gap:10px; max-width:660px`; the title is Unbounded 34/800
   at -.01em; the blurb 13px/1.5 at .68 alpha capped to 430px; the plates sit at
   `right:20px; top:18px` with `padding:8px 13px; radius:11px`, a 17px mono
   value and a 9px .1em uppercase caption. The grid is three equal columns at
   `gap:12px` under a 14px gap from the hero, inside `padding:16px 18px`.

   THE BREAKPOINT IS THE SCENE, NOT THE WINDOW. At a 1280px window the console
   leaves the scene ~858px, so a `@media (max-width: 860px)` here fires on a
   desktop and never fires on an 900px window whose scene is 527px. 620 scene
   pixels is the two-column budget stated in shell.css; three columns need 900.
   The one deliberate window query is the 44px touch floor, which is a property
   of the input device rather than of the layout. */

/* === game tabs (dashboard switcher) === */
.game-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--panel-soft);
  border: 1px solid var(--stroke);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.game-tabs::-webkit-scrollbar { display: none; }
.gt-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-med) var(--spring),
    box-shadow var(--dur-med), opacity var(--dur-fast);
}
@media (hover: hover) {
  .gt-tab:hover:not(:disabled):not(.active) { color: var(--text); background: var(--stroke); transform: translateY(-1px); }
}
.gt-tab.active {
  background: var(--gold-grad);
  color: #201503;
  box-shadow: 0 4px 14px rgba(224, 162, 58, 0.4);
}
.gt-icon { font-size: 15px; line-height: 1; }
.gt-tab.gt-soon { opacity: 0.5; cursor: default; }
.gt-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border: 1px dashed var(--stroke-strong);
  color: var(--text-faint);
}

/* ==========================================================================
   THE SIX ARCADE BOARDS — what they share with the chess board
   ==========================================================================
   Each of the six is `.view.view-game.view-XX`, so game.css owns the frame:
   a `minmax(0,1fr) 340px` grid whose height is the SCENE's, written by
   `fitMatchColumn()` into `--match-h`, with the opponent bar pinned to the
   top of the board column, the board taking what is left and the player's own
   bar and the action row at the bottom. Before tonight every one of them
   re-declared that frame as a scrolling `align-items:start` stack and every
   one of them ran past the fold: 743px of column in a 660px scene for
   checkers, 811 for durak, 946 for battleship, 1099 for arcomage.

   The one thing they need that chess does not: chess lifts its game buttons
   INTO the player's bar once the column is 560px wide, and at the console's
   own 1280px window the column is 468. Two boxes of buttons at 471px in a
   468px row wrapped to a second 39px line and took it out of the board. They
   shrink instead. */
@container scene (min-width: 620px) {
  .view-ck .g-actions-row,
  .view-nd .g-actions-row,
  .view-dk .g-actions-row,
  .view-bs .g-actions-row,
  .view-tc .g-actions-row,
  .view-tr .g-actions-row { flex-wrap: nowrap; }
  .view-ck .g-actions-row > .g-controls:first-child,
  .view-nd .g-actions-row > .g-controls:first-child,
  .view-dk .g-actions-row > .g-controls:first-child,
  .view-bs .g-actions-row > .g-controls:first-child,
  .view-tc .g-actions-row > .g-controls:first-child,
  .view-tr .g-actions-row > .g-controls:first-child { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
  .view-ck .g-actions-row .btn,
  .view-nd .g-actions-row .btn,
  .view-dk .g-actions-row .btn,
  .view-bs .g-actions-row .btn,
  .view-tc .g-actions-row .btn,
  .view-tr .g-actions-row .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* ==========================================================================
   PER-GAME LOBBY
   ========================================================================== */

/* The mock's outer frame: `height:100%; grid-template-rows:auto minmax(0,1fr);
   gap:14px; padding:16px 18px; overflow:hidden`. `--al-h` is the scene height
   the shell measured; without it (no ResizeObserver) the screen falls back to
   the scrolling stack it had before rather than collapsing to nothing. */
/* Five children in this order: hero, the phone action row, the hero's retry
   strip, the panel grid, the footer. Only the grid gives — everything else is
   its own height, and a row count that did not match the child count left the
   panels short of the fold by exactly the footer's height. */
.al {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 14px;
  height: var(--al-h, auto);
  min-height: 0;
  padding: 2px 0 0;
  overflow: hidden;
}

/* --- hero ---------------------------------------------------------------- */
.al-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 210px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent, #f1c152) 34%, transparent);
  isolation: isolate;
}
/* Both art layers (raster capsule, procedural fallback) sit under the scrim. */
.al-hero-art { z-index: 0; opacity: 1; }
.al-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(8, 6, 15, 0.94) 24%, rgba(8, 6, 15, 0.32) 72%, rgba(8, 6, 15, 0.7));
}
.al-hero-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  max-width: 660px;
  padding: 22px 26px;
}
.al-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, var(--gold));
}
.al-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.al-blurb {
  margin: 0;
  max-width: 430px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--t-mute), 0.68);
  text-wrap: pretty;
}

/* --- hero actions -------------------------------------------------------- */
.al-acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.al-cta-slot { display: contents; }
/* «⚡ В БОЙ» — the mock's gold pill: 11px 22px, r11, Unbounded 13/800. */
.al-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--r-md);
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(var(--t-gold), 0.3);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s;
}
.al-cta:disabled { opacity: 0.55; }
/* «▶ К доске» — outlined gold, because the board already exists and the loud
   button on this screen is the one that starts something. */
.al-resume {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--t-gold), 0.5);
  background: rgba(var(--t-gold), 0.12);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 0.18s, transform 0.18s var(--ease-out);
}
.al-lock {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--r-md);
  border: 1px dashed rgba(var(--t-violet), 0.28);
  background: rgba(16, 11, 30, 0.5);
  font-size: 11px;
  font-weight: 700;
  color: rgba(var(--t-mute), 0.44);
}
.al-seek {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--t-violet), 0.4);
  background: rgba(124, 58, 237, 0.14);
  font-size: 12px;
  font-weight: 800;
  color: var(--violet-300);
}
.al-seek-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--t-violet), 0) 40%, var(--violet));
  animation: ac-spin 1.4s linear infinite;
}
.al-seek-time { font-size: 12px; }
.al-cancel {
  padding: 11px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--t-danger), 0.34);
  background: rgba(var(--t-danger), 0.07);
  font-size: 12px;
  font-weight: 700;
  color: var(--danger-soft);
  white-space: nowrap;
  transition: border-color 0.18s;
}
.al-act {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--t-violet), 0.3);
  background: rgba(20, 13, 38, 0.62);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
  transition: border-color 0.18s, transform 0.18s var(--ease-out);
}
.al-act:disabled { opacity: 0.45; }
@media (hover: hover) {
  .al-cta:hover:not(:disabled) { transform: translateY(-2px); }
  .al-resume:hover { background: rgba(var(--t-gold), 0.22); transform: translateY(-2px); }
  .al-cancel:hover { border-color: rgba(var(--t-danger), 0.7); }
  .al-act:hover:not(:disabled) { border-color: rgba(var(--t-violet), 0.6); }
}

/* --- hero plates --------------------------------------------------------- */
.al-plates {
  position: absolute;
  z-index: 2;
  right: 20px;
  top: 18px;
  display: flex;
  gap: 8px;
}
.al-plate {
  padding: 8px 13px;
  border-radius: var(--r-md);
  background: rgba(10, 7, 20, 0.72);
  border: 1px solid rgba(var(--t-violet), 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
}
.al-plate-val {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}
.al-plate.is-gold .al-plate-val { color: var(--gold); }
/* In flight: the plate keeps its size and says nothing. A number here would be
   a claim about the player that no request has answered. */
.al-plate-val.is-waiting {
  color: transparent;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.al-plate-cap {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--t-mute), 0.44);
}

/* --- the hero's one retry ------------------------------------------------ */
.al-fail { margin: 0; }
.al-fail:empty { display: none; }

/* --- three panels -------------------------------------------------------- */
.al-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
/* deadends-map C3: quiz/poker drop the table panel (no arcade leaderboard),
   so their grid is two real columns, not three with an empty third. Scoped to
   the wide reading only — the 839/619 breakpoints below already collapse
   everyone to 2/1 columns and must keep winning. */
@container scene (min-width: 840px) {
  .al-grid.is-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* rules panel */
.al-setup { padding-bottom: 0; }
.al-chips {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
}
/* A rule in force, not an option. No hover, no press, no gold — the row states
   how the server plays and there is nothing here to choose. */
.chip-sq.is-fixed {
  border-style: dashed;
  border-color: rgba(var(--t-violet), 0.24);
  background: rgba(20, 13, 38, 0.5);
  color: rgba(var(--t-mute), 0.6);
  cursor: default;
}
@media (hover: hover) {
  .chip-sq.is-fixed:hover { border-color: rgba(var(--t-violet), 0.24); color: rgba(var(--t-mute), 0.6); }
}
.al-bullets {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 14px 12px;
}
.al-bullet {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(var(--t-mute), 0.6);
}
.al-bullet-mark { color: var(--gold); font-size: 11px; line-height: 1.5; }
.al-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: auto 14px 14px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: rgba(var(--t-ok), 0.08);
  border: 1px solid rgba(var(--t-ok), 0.24);
  font-size: 11px;
  line-height: 1.4;
  color: rgba(var(--t-mute), 0.72);
  text-wrap: pretty;
}
.al-note-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: ac-pulse 1.6s infinite;
}

/* live panel */
.al-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
  animation: ac-pulse 1.4s infinite;
}
.al-live-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.al-live-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(30, 20, 54, 0.5);
  border: 1px solid transparent;
  text-align: left;
  transition: border-color 0.16s, background 0.16s;
}
@media (hover: hover) {
  .al-live-row:hover { border-color: rgba(var(--t-violet), 0.36); background: rgba(40, 26, 70, 0.6); }
}
.al-live-row:active { background: rgba(40, 26, 70, 0.6); }
.al-live-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-live-pair {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-live-meta { font-size: 9px; color: rgba(var(--t-mute), 0.4); }
.al-live-watch { font-size: 10px; color: rgba(var(--t-mute), 0.5); white-space: nowrap; }

/* table panel */
.al-switch { padding: 2px; }
.al-switch button { padding: 4px 9px; font-size: 10px; }
.al-top-list { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; }
.al-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  text-align: left;
}
.al-top-row.is-me {
  background: rgba(var(--t-gold), 0.12);
  border-color: rgba(var(--t-gold), 0.3);
}
.al-top-row.is-prov { opacity: 0.72; }
.al-top-rank {
  width: 26px;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  color: rgba(var(--t-mute), 0.3);
}
.al-top-row:nth-child(-n + 3) .al-top-rank { color: var(--gold); }
.al-recent-row .al-top-rank { color: rgba(var(--t-mute), 0.5); }
.al-top-name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-top-wl { font-size: 9px; color: rgba(var(--t-mute), 0.36); white-space: nowrap; }
.al-top-rating { font-size: 11px; font-weight: 700; color: var(--gold); }
.al-top-foot {
  padding: 0 9px 9px;
  font-size: 9px;
  color: rgba(var(--t-mute), 0.36);
}
@media (hover: hover) {
  .al-recent-row:hover { border-color: rgba(var(--t-violet), 0.3); }
}

/* --- shared list furniture ---------------------------------------------- */
.al-more {
  margin: 4px 2px 0;
  padding: 8px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--t-violet), 0.2);
  background: rgba(20, 13, 38, 0.5);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-soft);
}
/* Answered, and the answer was «nobody». Deliberately not the load-fail block:
   this one is a fact about the game, that one is a fact about the request. */
.al-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 20px 16px;
  text-align: center;
}
.al-empty-icon { font-size: 26px; opacity: 0.5; }
.al-empty-title { font-size: 12px; font-weight: 800; }
.al-empty-sub {
  font-size: 10px;
  line-height: 1.45;
  color: rgba(var(--t-mute), 0.44);
  text-wrap: pretty;
}
.al-empty-line {
  padding: 14px 9px;
  font-size: 11px;
  color: rgba(var(--t-mute), 0.44);
}
/* Not an empty state and not a failure: the table exists, this browser is
   simply not allowed to ask for it. */
.al-guest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 9px;
}
/* Skeletons at the FINAL geometry: a live row is 44px tall and a table row 30,
   so the panel does not resize when the data lands. */
.al-sk-live { height: 44px; border-radius: 10px; margin: 0; }
.al-sk-row { height: 30px; border-radius: var(--r-sm); margin: 0; }

.al-foot { display: none; }
.al-foot:has(.al-foot-btn) {
  display: flex;
  justify-content: center;
  padding: 2px 0 0;
}
.al-foot-btn { font-size: 11px; color: var(--text-faint); }

/* === below 840 scene px: two columns, and the frame scrolls ===
   840, not shell.css's generic 900. Measured rather than assumed: at the
   console's flagship 1280px window the scene is 858px and the mock draws all
   three panels there — its own laptop class has a 902px scene and three
   columns of ~292. Three of ours at 858 come out 278 wide, which is wider than
   the narrowest panel the mock ever draws (252, the medium context column).
   Below 840 the third column would go under 272 and the leaderboard's four
   fields start colliding, so it drops to two and the third panel spans.

   The mock's `layScroll` rule applies from here down: collapsed columns mean
   the content is taller than the frame, so the container must scroll or the
   panels get crushed below their own height. */
@container scene (max-width: 839px) {
  .al { height: auto; overflow: visible; }
  .al-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: min-content;
    height: auto;
    overflow: visible;
  }
  .al-live, .al-top { min-height: 296px; }
  .al-top { grid-column: 1 / -1; }
  .al-hero { min-height: 250px; }
}

/* === compact: the mock's phone screen ===
   132px art with a 180° scrim and the name at its foot, the two plates as a
   full-width pair under it, then the blurb, the buttons and the panels. */
@container scene (max-width: 619px) {
  .al { gap: 11px; }
  .al-grid { grid-template-columns: minmax(0, 1fr); }
  .al-top { grid-column: auto; }
  .al-live, .al-top { min-height: 0; }
  .al-hero {
    flex-direction: column;
    justify-content: flex-end;
    min-height: 132px;
    border-radius: var(--r-lg);
  }
  .al-hero-scrim {
    background: linear-gradient(180deg, rgba(8, 6, 15, 0.1) 30%, rgba(8, 6, 15, 0.94));
  }
  .al-hero-body {
    max-width: none;
    justify-content: flex-end;
    gap: 3px;
    padding: 11px 13px;
  }
  .al-name { font-size: 19px; }
  .al-blurb { display: none; }
  .al-acts { display: none; }
  /* On the phone the plates are a row of their own under the art, not an
     overlay: at 390px they would sit on top of the title. */
  .al-plates {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .al-plate {
    padding: 9px 11px;
    border-radius: 12px;
    text-align: left;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .al-plate.is-gold {
    background: rgba(var(--t-gold), 0.09);
    border-color: rgba(var(--t-gold), 0.28);
  }
  .al-plate:not(.is-gold) {
    background: rgba(var(--t-violet), 0.08);
    border-color: rgba(var(--t-violet), 0.18);
  }
  .al-plate:not(.is-gold) .al-plate-val { color: var(--violet-300); }
  .al-plate-cap { font-size: 8px; }
  /* The hero's buttons move below it, full width and thumb-sized. */
  .al-phone-acts {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .al-phone-acts .al-acts { display: flex; margin: 0; }
  .al-phone-acts .al-cta,
  .al-phone-acts .al-resume {
    flex: 1 1 100%;
    justify-content: center;
    padding: 14px;
    border-radius: 13px;
    font-size: 14px;
  }
  .al-phone-acts .al-act,
  .al-phone-acts .al-cancel {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    padding: 12px;
    border-radius: 12px;
    font-size: 11px;
  }
  .al-phone-acts .al-seek { flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .al-phone-acts .al-lock { flex: 1 1 100%; font-size: 10px; line-height: 1.4; }
}

/* The 44px touch floor is a property of the pointer, not of the layout, so it
   is the one deliberate window query in this file. */
@media (pointer: coarse) {
  .al-cta, .al-resume, .al-act, .al-cancel { min-height: 44px; }
  .al-live-row { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .al-seek-dot, .al-note-dot, .al-live-dot { animation: none; }
  .al-plate-val.is-waiting { animation: none; }
}

/* The hero's promo slot: the searching state's bot-warm-up suggestion and
   the push pill stack under the action row without touching its geometry. */
.al-promo-slot { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-width: 430px; }
.al-promo-slot:empty { display: none; }