/* © 2026 William C. Chesher. All Rights Reserved.
   gamecenter - Featured, the Class shelf, and a game's own page (/gamecenter/g/<id>). Worn over
   /pages.css; every colour is a token from /tokens.css. */

.gc-head .lockup { flex: none; }
.gc-tabs { flex: none; }

/* ---- the spotlight, on the field ---- */
.spot { border-bottom: 1px solid var(--line); }
.spot-in { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(16px, 3vw, 40px) 56px;
  min-height: 360px; display: flex; align-items: flex-end; }
.spot-copy { max-width: 640px; min-width: 0; animation: spawn-in var(--step) both; }
.spot h1 { margin: 0; font: 800 clamp(44px, 6vw, 84px)/.92 var(--display); letter-spacing: -.055em; text-wrap: balance; overflow-wrap: anywhere; }
.spot-why { margin: 16px 0 0; font-size: 18px; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.spot-meta { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.spot-meta .mono { font-size: 13px; }
.spot-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
/* THE PORTAL ON A NARROW SCREEN (portal.js, top: 150): it takes a band of its own above the words, and the shade that
   keeps the words readable runs down the hero rather than across it */
@media (max-width: 899px) {
  .spot-in { padding-top: 300px; }
  .spot.field-hero > .sweep { background: linear-gradient(180deg, transparent 0, transparent 250px, color-mix(in srgb, var(--surface) 80%, transparent) 320px, var(--surface) 100%); }
}
.spot-when { font: 400 13px/1.4 var(--mono); color: var(--ink-2); max-width: 34ch; }

/* ---- a shelf section ---- */
.shelf-sec { max-width: 1280px; margin: 0 auto; padding: 48px clamp(16px, 3vw, 40px) 24px; }
.shelf-sec + .shelf-sec { padding-top: 24px; padding-bottom: 80px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 18px; }
.sec-head h2 { margin: 0; font: 700 28px/1.05 var(--display); letter-spacing: -.03em; }
.sec-head span { font-size: 14px; color: var(--muted); }
.empty { margin: 0; padding: 22px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--muted); font-size: 15px; }

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.card { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; min-width: 0; animation: spawn-in var(--step) both;
  transition: border-color var(--fast) var(--ease); }
a.card:hover, .card:has(.card-tile:hover) { border-color: var(--muted); color: var(--ink); }
a.card:active { transform: scale(.985); }
.card-tile { display: block; width: 100%; aspect-ratio: 1; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; overflow: hidden; text-decoration: none; }
.card-tile .tile { width: 100%; height: 100%; }
.card-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; min-width: 0; }
.card-name { font: 600 17px/1.3 var(--display); letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-by { font-size: 14px; color: var(--muted); }
.card-meta { margin-top: 8px; font: 400 12px var(--mono); color: var(--muted); }
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.card-verdict { font: 600 11.5px var(--mono); flex: none; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.card-foot .card-meta { margin: 0; }

/* the compact rows of "Newest picks" */
.row-card { flex-direction: row; align-items: center; gap: 14px; padding: 12px; }
.row-card .tile { flex: none; width: 64px; height: 64px; border-radius: 8px; }
.row-card .tile .sprite { width: 40%; }
.row-card .card-body { padding: 0; }
.row-card .card-name { font-size: 16px; }
.row-card .card-by { font-size: 13.5px; }
.row-card .card-meta { margin-top: 0; }

/* ---- the class shelf ---- */
.class-sec { max-width: 1280px; margin: 0 auto; padding: 48px clamp(16px, 3vw, 40px) 80px; }
.lock-card { max-width: 520px; margin: 40px auto; padding: 28px; display: flex; flex-direction: column; gap: 14px; animation: spawn-in var(--step) both; }
.lock-card h1 { margin: 0; font: 700 30px/1.05 var(--display); letter-spacing: -.03em; }
.lock-card .say { margin: 0; font-size: 15px; color: var(--muted); }
.lock-card .eyebrow { margin: 0; }
.lock-row { display: flex; gap: 8px; }
.hint { margin: 0; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.hint.warn { color: var(--caution); }
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 24px; animation: spawn-in var(--step) both; }
.shelf-head .eyebrow { margin: 0 0 10px; }
.shelf-head h1 { margin: 0; font: 700 40px/1.05 var(--display); letter-spacing: -.035em; }
.shelf-head .note { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.shelf-head .purpose { margin: 10px 0 0; max-width: 46ch; font: 500 18px/1.45 var(--display); color: var(--ink-2); text-wrap: pretty; }

/* ---- the lobby's tools: find, the view, the kind, the sort. They stay in reach on a long lobby. */
.lobby-tools { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0 calc(-1 * clamp(16px, 3vw, 40px)) 18px; padding: 12px clamp(16px, 3vw, 40px);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.find { position: relative; flex: 1 1 180px; max-width: 300px; display: flex; }
.find .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.find .field { width: 100%; min-height: 40px; padding: 8px 12px 8px 36px; font-size: 14.5px; }
.views { display: flex; flex-wrap: wrap; gap: 6px; }
.views .view { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); font: 600 13px var(--body); white-space: nowrap;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.views .view:hover { border-color: var(--muted); color: var(--ink); }
.views .view b { font: 600 11.5px var(--mono); color: var(--muted); }
.views .view[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.views .view[aria-pressed="true"] b { color: var(--accent); }
.views .view:focus-visible, .kind:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tools-end { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.kind { min-height: 36px; padding: 0 10px; background: var(--well); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); font: 400 13.5px var(--body); }
.showing { margin: 0 0 14px; font: 400 12.5px var(--mono); color: var(--muted); }
#class-none { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- the lobby's cards: dense, a short tile with the game's player large on it, and its notes said on every card */
.lobby-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.lobby-cards .card-tile { aspect-ratio: 4 / 3; }
.lobby-cards .tile .sprite { width: 26%; bottom: 14%; }
.lobby-cards .tile .box { width: 22%; bottom: 14%; }
.lobby-cards .tile .floor { height: 10%; }
.lobby-cards .card-body { padding: 10px 12px 12px; gap: 1px; }
.lobby-cards .card-name { font-size: 15.5px; }
.lobby-cards .card-by { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-cards .card-meta { margin-top: 4px; font-size: 11.5px; }
.lobby-cards .card-foot { margin-top: 8px; }
.card-notes { font: 600 12px var(--mono); color: var(--ink-2); }
.card-notes.none { color: var(--muted); }   /* an absence is quiet: lime is for what a player does */
.lobby-cards .tile .badge { font-size: 9px; }
@media (max-width: 520px) {
  /* a phone: two games across, not one a screen */
  .lobby-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lobby-cards .card-body { padding: 8px 10px 10px; }
  .lobby-cards .card-name { font-size: 14.5px; }
  .lobby-cards .card-verdict { display: none; }
  .lobby-cards .card-by { white-space: normal; font-size: 12.5px; }   /* the maker and the kind on two lines, not cut */
  .lobby-cards .tile .badge.fixed { display: none; }
  .find { max-width: none; flex: 1 1 0; }
  /* the views in one row that scrolls, its edge fading so the row says there is more */
  .views { order: 3; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .views::-webkit-scrollbar { display: none; }
  .tools-end { display: contents; }
  .kind { flex: 0 0 auto; max-width: 40%; min-height: 40px; }
  #sorts { order: 4; }
  .lobby-tools { position: static; }
  .shelf-head h1 { font-size: 34px; }
  .shelf-head .purpose { font-size: 16px; }
}

/* ---- a game's own page ---- */
.game-sec { max-width: 1280px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 40px) 80px; animation: spawn-in var(--step) both; }
.game-sec.filled { max-width: 1312px; }   /* room for 1200 pixel for pixel, plus its brackets */
.back-pill { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; margin: 0 0 20px; font: 600 13.5px var(--body); color: var(--ink-2);
  text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 12px 7px 8px; transition: border-color var(--fast) var(--ease); }
.back-pill:hover { border-color: var(--muted); color: var(--ink); }
.back-pill[hidden] { display: none; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; align-items: start; }
.game-grid.fill { grid-template-columns: minmax(0, 1fr); }
.game-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.game-box { position: relative; padding: 16px; width: 100%; max-width: min(100%, calc(100vh - 200px), 632px); min-width: 260px; align-self: center; }
.game-grid.fill .game-box { max-width: min(100%, calc(100vh - 160px), 1232px); }
.under { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.under .note { font: 400 12.5px var(--mono); color: var(--muted); }
.under .row { display: flex; flex-wrap: wrap; gap: 8px; }
.fill-on { border-color: var(--accent); color: var(--accent); }
.fill-on:hover { border-color: var(--accent-hover); color: var(--accent-hover); }
.side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.side h1 { margin: 0; font: 800 clamp(36px, 4.5vw, 56px)/.95 var(--display); letter-spacing: -.05em; text-wrap: balance; overflow-wrap: anywhere; }
.side .by { margin: 10px 0 0; font-size: 16px; color: var(--muted); }
.side .by .mono { font-size: 13.5px; }
.side .eyebrow { margin: 0 0 10px; }
.gc-hero { padding: clamp(18px, 3vw, 26px); }
/* the name, lit from player one into player two; plain ink where the system sets its own colours */
.side h1 { background: var(--genesis); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
@media (forced-colors: active) { .side h1 { background: none; color: CanvasText; } }
.side .tagline { margin: 12px 0 0; font: 500 var(--type-lead)/1.4 var(--display); color: var(--ink-2); text-wrap: pretty; }
/* the mission brief: the maker's you, win and lose as one paragraph, each behind a small lit tag */
.brief { margin: 0; font: 500 18px/1.65 var(--display); color: var(--ink-2); letter-spacing: -.005em; text-wrap: pretty; overflow-wrap: anywhere; }
.brief .part { color: var(--ink); }
.brief .lead { white-space: nowrap; }
.brief .tg { display: inline-block; margin-right: 6px; padding: 4px 6px 3px; border-radius: 4px; vertical-align: 2px;
  font: 400 10px/1 var(--pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.brief .tg.you { background: var(--ink-2); }   /* "you" is the player, never player two's royal */
.brief .tg.win { background: var(--accent); }
.brief .tg.lose { background: var(--bad); }
/* the page's tools in one row, the one lime action at its end */
.tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tools .grow { flex: 1 1 0; }
/* each share, a pill: the one playing is lit, with a dot that blinks like a game waiting on player one */
.versions { display: flex; flex-wrap: wrap; gap: 8px; }
.version { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--panel); color: var(--ink-2); font: 600 12.5px var(--mono); white-space: nowrap; }
button.version { cursor: pointer; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
button.version:hover { border-color: var(--muted); color: var(--ink); }
button.version:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.version .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.version.on { border-color: var(--ink-2); color: var(--ink); background: var(--panel-2); }   /* a state, not the main action: lime is Play's */
@media (prefers-reduced-motion: no-preference) {
  .version.on .dot { animation: blink 1.1s steps(1, end) infinite; }
}
.side > .foot-note { margin: -8px 0 0; font: 400 12.5px/1.5 var(--mono); color: var(--faint); }
.takedown { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.takedown .say { margin: 0; font-size: 13.5px; color: var(--muted); }
.notes { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); }
/* a classmate's note: the maker's question, the note in words, and what happens to it */
.note-ask { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.note-ask .say { margin: 0; font-size: 13.5px; color: var(--muted); }
.maker-asks { margin: 0; font: 500 17px/1.4 var(--display); color: var(--ink); text-wrap: pretty; }
/* a wide screen: the game stays in view while the side is read and its knobs are turned */
@media (min-width: 900px) {
  .game-grid:not(.fill) > .game-col { position: sticky; top: 16px; }
}
.notes .say { margin: 0; font-size: 13.5px; color: var(--muted); }
/* a note: its words, then who and when, under a quiet rule on the left */
.note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-height: 360px; overflow-y: auto; }
.note-list li { padding: 0 0 0 12px; border-left: 2px solid var(--line-2, var(--line)); }
.note-list .note-text { margin: 0; font-size: 14.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-list .note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.note-list .note-fix[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
/* a favorite (pages.js, favorites): the star is lit */
#favorite[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.note-list li.fixed { border-left-color: var(--accent); }
.fixed-line { color: var(--accent); font-weight: 600; }
.ask-form { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ask-form .label { margin: 0; }
.ask-row { display: flex; gap: 8px; }
.ask-row .field { flex: 1; min-width: 0; }
.ask-form .say { margin: 0; }
.note-list .note-by { margin: 3px 0 0; font: 400 12px var(--mono); color: var(--muted); }

/* ---- on a touch screen: the pad and the space button (touch-controls.js) sit under the game, never
   over it, sized for a thumb. A double tap on the page's buttons does not zoom; a touch on the game
   is the game's (the runtime turns panning and zoom off inside it). */
.gc-game { touch-action: manipulation; }
.game-box { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "screen screen"; }
.game-box .screen { grid-area: screen; }
.touch-slot { display: none; }
.game-box.touching { grid-template-areas: "screen screen" "pad space"; row-gap: 14px; align-items: center;
  max-width: min(100%, calc(100dvh - 380px), 632px); }
.game-box.touching .touch-slot { display: block; }
.touch-pad { grid-area: pad; justify-self: start; width: 156px; height: 156px; }
.touch-space { grid-area: space; justify-self: end; width: 112px; height: 112px; margin-right: 8px; }
.touch-slot > * { width: 100%; height: 100%; }
.screen { touch-action: none; }
.touch-only #fill { display: none; }

/* ---- full screen: the game and its controls on black, and nothing else. The same view stands in
   where the Fullscreen API is missing, so it is the page's own fixed layer, not the API's alone. */
html.playing-full, html.playing-full body { overflow: hidden; overscroll-behavior: none; }
#stage.full { position: fixed; inset: 0; z-index: 100; max-width: none; min-width: 0; margin: 0; background: var(--screen);
  padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
  grid-template-columns: auto auto; align-content: center; justify-content: center; column-gap: 24px; }
#stage.full::before { display: none; }
#stage.full .screen { width: min(calc(100vw - 24px), calc(100dvh - 24px)); }
#stage.full.touching .screen { width: min(calc(100vw - 24px), calc(100dvh - 194px)); }
@media (orientation: landscape) {
  /* sideways: the pad left of the game, the button right of it, the game as tall as the screen */
  #stage.full.touching { grid-template-columns: auto auto auto; grid-template-areas: "pad screen space"; align-items: center; }
  #stage.full.touching .screen { width: min(calc(100dvh - 24px), calc(100vw - 24px - 348px)); }
  #stage.full.touching .touch-space { margin-right: 0; }
}
.full-exit { position: absolute; z-index: 3; top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right));
  background: color-mix(in srgb, var(--surface) 80%, transparent); }

/* ---- make my own copy */
.remix { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.remix .say { font-size: 13.5px; color: var(--muted); flex: 1 1 200px; }

/* ---- share: the QR code of the link, and the link, opened from the tools row */
.share { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
  animation: spawn-in var(--step) both; }
/* THE SPAWN POINT CARD (wchesher, 2026-10-27: "i wanted the game qr codes branded" / "not just slightly themed"). The code
   is qr-face.js's (the mark in its middle, the blocks); around its white tile, the mark's own brackets in lime with
   player two's royal at the foot, on a void card with the wordmark over it and the game's name under it. All of it
   OUTSIDE the white tile, so none of it touches a module a camera reads. */
.qr-card { flex: none; width: 236px; padding: 14px 16px 12px; border-radius: var(--radius); background: var(--surface);
  box-shadow: 0 0 0 1px var(--line-2), 0 0 32px rgba(91, 127, 255, .28), 0 14px 36px rgba(0, 0, 0, .55); }
.qr-card-top, .qr-card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.qr-card-top { margin-bottom: 8px; }
.qr-card-foot { margin-top: 8px; }
.qr-wordmark { font: 800 24px/1 var(--display); letter-spacing: -.055em; color: var(--ink); }
.qr-wordmark::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 2px; background: var(--accent); }
.qr-card-tag, .qr-card-scan { font: 400 var(--type-label) var(--pixel); white-space: nowrap; }
.qr-card-tag { color: var(--p2); }
.qr-card-scan { color: var(--accent); }
.qr-card-name { font: 700 15px/1.2 var(--display); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-brackets { --arm: 20px; --bar: 4px; padding: 9px;
  background:
    linear-gradient(var(--accent) 0 0) top left / var(--arm) var(--bar) no-repeat, linear-gradient(var(--accent) 0 0) top left / var(--bar) var(--arm) no-repeat,
    linear-gradient(var(--accent) 0 0) top right / var(--arm) var(--bar) no-repeat, linear-gradient(var(--accent) 0 0) top right / var(--bar) var(--arm) no-repeat,
    linear-gradient(var(--accent) 0 0) bottom right / var(--arm) var(--bar) no-repeat, linear-gradient(var(--accent) 0 0) bottom right / var(--bar) var(--arm) no-repeat,
    linear-gradient(var(--p2) 0 0) bottom left / var(--arm) var(--bar) no-repeat, linear-gradient(var(--p2) 0 0) bottom left / var(--bar) var(--arm) no-repeat; }
.qr { width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; }
.qr svg { display: block; width: 100%; height: 100%; }
.share-say { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.share-say .say { margin: 0; font-size: 14.5px; color: var(--ink-2); max-width: 28ch; }
.share-say code { font: 400 13px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 420px) { .share { flex-direction: column; align-items: flex-start; } }

/* the page when a link leads nowhere: unknown, or taken down */
.gone { max-width: 560px; width: calc(100% - 32px); box-sizing: border-box; margin: 56px auto; padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; animation: spawn-in var(--step) both; }
.gone h1 { margin: 0; font: 700 34px/1.05 var(--display); letter-spacing: -.03em; }
.gone p { margin: 0; color: var(--muted); font-size: 15.5px; }
.gone .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* padding, not margin: a margin collapsed through <main> and moved the whole page when the game replaced this line */
.loading { margin: 0 auto; padding: 56px 0; text-align: center; font: 400 12px var(--pixel); color: var(--muted); }
/* NOTHING JUMPS WHEN THE PAGE FILLS IN (2026-11-03 review: layout shift 0.42 at 1440, 0.51 at 1024 on a game's page,
   0.09-0.13 on Spawn Point): the page is at least a screen tall from its first paint, so the footer starts below the
   fold and the sections that arrive with the data push nothing a player can see */
main { min-height: 100vh; min-height: 100dvh; }

/* the game's name above the stage, on a phone only (game.html #phone-title) */
.phone-title { display: none; }
@media (max-width: 700px) {
  .phone-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin: 0 0 12px; font: 700 17px/1.25 var(--display); color: var(--ink); }
  .phone-title b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
  .phone-title .by { flex: none; font: 500 13.5px var(--body); color: var(--muted); white-space: nowrap; }
  .phone-title .pill { flex: none; margin-left: auto; }
  .game-sec .back-pill { display: none; }
  /* SAID ONCE (2026-11-03 second review): the line over the stage already names the game, its maker and the Hall of
     Fame, so the card below keeps the goal and the rest. The h1 stays for screen readers (the line over the stage is
     aria-hidden), out of sight */
  .gc-hero #title, .gc-hero #by { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; margin: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .gc-hero #featured-pill { display: none; }
}

@media (max-width: 520px) {
  .game-box { min-width: 0; padding: 10px; }
  .lock-row { flex-direction: column; }
}
/* the playtest loop: "Fixed from your note" sits bottom left of the tile, clear of a Hall of Fame badge */
.tile .badge.fixed { top: auto; bottom: 5%; right: auto; left: 5%; }
/* pinned to the top of the lobby: top left, clear of both */
.tile .badge.pinned { right: auto; left: 5%; }

/* ---- tune it: the maker's sliders for players, in the side column ---- */
.tune { display: flex; flex-direction: column; gap: 12px; }
.tune .label { margin: 0; }
.tune .say { margin: 0; font-size: 13.5px; color: var(--muted); }
.tune-list { display: grid; gap: 14px; }
.tune-group { margin: 6px 0 0; font: 400 11px/1.4 var(--pixel); color: var(--accent); }
.tune-knob { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: baseline; }
.tune-knob label { color: var(--ink); font-size: 15px; }
.tune-knob output { font: 600 13px var(--mono); color: var(--accent); }
/* the block meter, the studio's slider look (spawn.css): blocks light lime up to the value, a slim ink block rides on them */
.tune-knob input[type=range] { grid-column: 1 / -1; width: 100%; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.tune-knob input[type=range]::-webkit-slider-runnable-track { height: 8px; background: var(--meter-lit) 0 0 / var(--fill, 50%) 100% no-repeat, var(--meter-dark); }
.tune-knob input[type=range]::-moz-range-track { height: 8px; background: var(--meter-dark); }
.tune-knob input[type=range]::-moz-range-progress { height: 8px; background: var(--meter-lit); }
.tune-knob input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 20px; margin-top: -6px; background: var(--ink); border: 0; border-radius: 0; box-shadow: 0 0 0 3px var(--surface); }
.tune-knob input[type=range]::-moz-range-thumb { width: 12px; height: 20px; background: var(--ink); border: 0; border-radius: 0; box-shadow: 0 0 0 3px var(--surface); }
.tune-knob input[type=range]:is(:hover, :focus-visible)::-webkit-slider-thumb { background: var(--accent-hover); }
.tune-knob input[type=range]:is(:hover, :focus-visible)::-moz-range-thumb { background: var(--accent-hover); }
.tune-knob input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }