/* Mini-game shell.
   These run in the browser with no account and answer "what is this actually
   like?" before anyone pays. The controls sit ON the scene at every screen
   size rather than in a sidebar: a column of labelled buttons beside a picture
   reads as a quiz, the same buttons as pills over the scene read as a game. */

.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.game-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.game-card .art { aspect-ratio: 16/9; position: relative; background: #0b1726; }
.game-card .art img { width: 100%; height: 100%; object-fit: cover; }
.game-card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.game-card h3 { margin: 0 0 .3rem; font-size: 1.1rem; font-weight: 800; }
.game-card p { margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
.game-card .btn { margin-top: auto; justify-content: center; }
.game-card .meta { font-size: .78rem; color: var(--muted); margin: 0 0 .8rem; }

/* --- play surface -------------------------------------------------------- */

.stage-wrap { max-width: 1140px; margin: 0 auto; }

.stage {
  position: relative; border-radius: 18px; overflow: hidden;
  background: #08121f; box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
}
.stage canvas {
  display: block; width: 100%; height: 100%; touch-action: none;
  /* the scenes are drawn at a fixed 16:9; contain stops a stage of any other
     shape - a phone in full screen, say - from stretching the art */
  object-fit: contain;
}

/* HUD chips sit ON the scene: the readouts a player glances at belong next to
   the action, not in a sidebar */
.hud {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 6;
  display: flex; gap: 10px; align-items: flex-start; pointer-events: none;
}
.hud-chip {
  background: rgba(8,18,31,.74); backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  padding: .5rem .85rem; color: #fff; display: flex; gap: 16px; align-items: center;
}
.hud-chip .item { display: flex; flex-direction: column; line-height: 1.15; }
.hud-chip .hud-ico {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: rgba(26,109,240,.26); display: grid; place-items: center; color: var(--cyan);
}
.hud-chip .hud-ico svg { width: 17px; height: 17px; }
.hud-chip .rule { width: 1px; align-self: stretch; background: rgba(255,255,255,.16); }
.hud-chip .k { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.62); font-weight: 800; }
.hud-chip .v { font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.hud-chip .v.ok { color: #4ade9a; }
.hud-chip .v.bad { color: #ff9a92; }

.icon-btn {
  pointer-events: auto;
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: rgba(8,18,31,.74); backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,.18); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { background: rgba(26,109,240,.85); }
.icon-btn svg { width: 19px; height: 19px; }
.hud .icon-btn:first-of-type { margin-left: auto; }
.icon-btn + .icon-btn { margin-left: 8px; }

/* The round's verdict, as a banner across the top of the scene under the HUD.
   It used to sit along the bottom, where it fought the control strip and the
   ruler for the same strip of pixels - and the strip is a different height in
   every game, so no single offset cleared it. */
.toast {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 84px; bottom: auto;
  z-index: 5; max-width: 72%; text-align: center;
  background: rgba(8,18,31,.86); backdrop-filter: blur(7px); color: #fff;
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  padding: .7rem 1.1rem; font-size: .9rem; font-weight: 600;
  opacity: 0; transition: opacity .2s ease;
}
.toast.show { opacity: 1; }
.toast.good { border-color: rgba(74,222,154,.5); }
.toast.bad { border-color: rgba(255,154,146,.45); }

/* --- the control strip on the scene -------------------------------------- */

/* a scrim under the strip, so the controls read as a layer over the scene
   rather than objects floating in it */
.stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(180deg, rgba(5,13,24,0), rgba(5,13,24,.55));
  z-index: 4; pointer-events: none;
}
.stage:has(.fs-bar:empty)::after { display: none; }

/* play-fs.js moves each game's own controls in here at startup, so the markup
   a game writes stays a plain sidebar and its listeners never have to move. */
.fs-bar {
  position: absolute; z-index: 5;
  left: calc(14px + env(safe-area-inset-left));
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  overflow-x: auto; overflow-y: hidden; padding: 2px;
  scrollbar-width: none;
}
.fs-bar::-webkit-scrollbar { display: none; }
.fs-bar > * { margin: 0; flex: none; }
.fs-bar:empty { display: none; }

.fs-bar .choices, .fs-bar .tiles { display: flex; flex-direction: row; gap: 10px; margin: 0; }

.fs-bar .choice, .fs-bar .control, .fs-bar .tile {
  background: rgba(8,18,31,.78); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  color: #fff; white-space: nowrap;
}
.fs-bar .choice {
  display: flex; align-items: center; gap: 10px;
  padding: .62rem .95rem; font: inherit; font-size: .88rem; font-weight: 700;
  cursor: pointer; text-align: left;
}
.fs-bar .choice:hover { border-color: rgba(255,255,255,.4); }
.fs-bar .choice[aria-pressed="true"],
.fs-bar .choice[aria-selected="true"],
.fs-bar .tile[aria-pressed="true"] {
  border-color: var(--cyan); background: rgba(22,208,238,.2);
}
.fs-bar .choice .dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: #ff7a72; box-shadow: 0 0 0 3px rgba(255,122,114,.2);
}
.fs-bar .choice[aria-pressed="true"] .dot,
.fs-bar .choice[aria-selected="true"] .dot { background: #4ade9a; box-shadow: 0 0 0 3px rgba(74,222,154,.22); }
.fs-bar .choice.placed, .fs-bar .choice[disabled] { opacity: .35; }

/* the option tiles lie down into pills here: a tall tile pushes the whole
   strip up over the part of the scene you are meant to be reading */
.fs-bar .tile {
  display: flex; align-items: center; gap: 8px;
  padding: .36rem .7rem .36rem .36rem; cursor: pointer; font: inherit;
}
.fs-bar .tile .swatch {
  display: block; width: 34px; height: 30px; border-radius: 8px; flex: none;
  background-image: url("../play/surfaces.jpg"); background-size: 300% 100%;
  background-repeat: no-repeat;
}
.fs-bar .tile .name { display: block; font-weight: 800; font-size: .8rem; }
.fs-bar .tile .sub { display: none; }

.fs-bar .control { padding: .5rem .9rem .55rem; min-width: 210px; }
.fs-bar .control .row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: .25rem; }
.fs-bar .control label { font-weight: 800; font-size: .76rem; }
.fs-bar .control .val {
  font-weight: 900; font-size: .82rem; font-variant-numeric: tabular-nums;
  background: rgba(26,109,240,.34); color: #d4e8ff; padding: .05rem .5rem; border-radius: 10rem;
}
.fs-bar .control input[type=range] { width: 100%; accent-color: var(--cyan); height: 22px; display: block; }
.fs-bar .control .scale { display: none; }

.fs-bar .btn { margin-left: auto; padding: .8rem 1.5rem; }
.btn-lg { padding: .95rem 1.5rem; font-size: 1rem; }
.btn-lg svg { width: 15px; height: 15px; }

/* --- the brief, under the scene ------------------------------------------ */

.panel {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 24px; box-shadow: var(--shadow); margin-top: 18px;
  display: grid; grid-template-columns: 1fr minmax(0, 300px); gap: 4px 30px;
}
.panel h2 { margin: 0 0 .2rem; font-size: 1.05rem; font-weight: 900; grid-column: 1; }
.panel .hint { color: var(--muted); font-size: .9rem; margin: 0; grid-column: 1; }
.panel .learn {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  margin: 0; padding: 0 0 0 26px; border-left: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
}
.panel .learn a { color: var(--blue); font-weight: 700; }
/* a game's own controls have been moved onto the scene; anything still here is
   a duplicate, and showing it is what made these read as quizzes */
.panel .control, .panel .choices, .panel .tiles, .panel .btn { display: none; }

/* --- poster: what a phone sees instead of a cramped stage ----------------- */

.poster {
  display: none; position: absolute; inset: 0; z-index: 7;
  padding: 0; border: 0; background: #08121f; cursor: pointer; place-items: center;
}
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(62% 62% at 50% 50%, rgba(6,16,32,.2), rgba(6,16,32,.74));
}
.poster-play {
  position: relative; z-index: 1;
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 10px rgba(26,109,240,.26), 0 12px 30px rgba(0,0,0,.45);
}
.poster-play svg { width: 28px; height: 28px; fill: currentColor; stroke: none; margin-left: 3px; }
.poster-pill {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(8,18,31,.74); backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 10rem;
  padding: .3rem .7rem; color: #fff; font-size: .76rem; font-weight: 800;
}
.poster-pill svg { width: 14px; height: 14px; }
.poster-note { display: none; text-align: center; color: var(--muted); font-size: .85rem; margin: 10px 0 0; }

.fs-only { display: none !important; }

/* --- full screen ---------------------------------------------------------
   Portrait first: the scene keeps its shape in the middle of the screen with
   the controls under it, so most players never have to turn the phone. A wide
   scene gets a rotate hint rather than a forced orientation lock. */

body.fs { overflow: hidden; }
body.fs .site-head, body.fs .site-foot { visibility: hidden; }
body.fs main > section > .wrap > :not(.stage-wrap) { visibility: hidden; }
body.fs .stage-wrap {
  position: fixed; inset: 0; z-index: 2000; max-width: none; margin: 0;
}
body.fs .stage {
  width: 100%; height: 100%; aspect-ratio: auto;
  border-radius: 0; box-shadow: none; background: #050d18;
}
body.fs .panel, body.fs .poster, body.fs .poster-note { display: none; }
body.fs .fs-only { display: grid !important; }
body.fs #fsopen { display: none; }
body.fs .hud {
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  right: calc(12px + env(safe-area-inset-right));
}

/* Portrait full screen is the default, so it has to be a real layout rather
   than a wide scene marooned in the middle of a tall black screen: the stage
   becomes a centred column of scene, message, controls, hint. These three
   scenes are wide enough that turning the phone is still better, which is what
   the hint offers - an offer, not an orientation lock. */
@media (orientation: portrait) and (max-width: 980px) {
  body.fs .stage {
    display: flex; flex-direction: column; justify-content: center; gap: 16px;
    padding: 0 0 env(safe-area-inset-bottom);
  }
  body.fs .stage canvas {
    flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9;
  }
  body.fs .toast, body.fs .fs-bar, body.fs .rotate-hint {
    position: static; transform: none; inset: auto;
  }
  body.fs .toast { margin: 0 auto; max-width: calc(100% - 28px); }
  body.fs .fs-bar { justify-content: center; flex-wrap: wrap; padding: 0 14px; overflow: visible; }
  /* the pills live inside a .choices/.tiles group, so the group has to wrap
     too or the last one hangs off the edge of the screen */
  body.fs .fs-bar .choices,
  body.fs .fs-bar .tiles { flex-wrap: wrap; justify-content: center; }
  /* a .control box wrapping a group of pills has to be allowed to grow tall
     rather than run off the side */
  body.fs .fs-bar .control { max-width: 100%; white-space: normal; }
  body.fs .fs-bar .btn { margin: 0 auto; }
  body.fs .rotate-hint { margin: 0 auto; }
}

.rotate-hint { display: none; }
body.fs .rotate-hint {
  z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(8,18,31,.8); backdrop-filter: blur(7px); color: #fff;
  border: 1px solid rgba(255,255,255,.16); border-radius: 10rem;
  padding: .4rem .9rem; font-size: .78rem; font-weight: 700; white-space: nowrap;
}
body.fs .rotate-hint svg { width: 15px; height: 15px; }
@media (orientation: landscape) { body.fs .rotate-hint { display: none; } }
@media (min-width: 981px) { body.fs .rotate-hint { display: none; } }

/* --- phones --------------------------------------------------------------- */

@media (max-width: 980px) {
  .game-grid { grid-template-columns: repeat(2, 1fr); }
  .poster { display: grid; }
  .poster-note { display: block; }
  .panel { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px; }
  .panel .learn {
    grid-column: 1; grid-row: auto; align-self: start;
    padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .game-grid { grid-template-columns: 1fr; }

  /* the readouts give way to the buttons rather than pushing them off the
     edge - min-width:0 is what lets a flex item actually shrink */
  .hud { gap: 8px; }
  .hud-chip { padding: .4rem .6rem; gap: 10px; min-width: 0; overflow: hidden; }
  .hud-chip .hud-ico { display: none; }
  .hud-chip .k { font-size: .56rem; letter-spacing: .08em; }
  .hud-chip .v { font-size: .9rem; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn svg { width: 16px; height: 16px; }

  .toast { font-size: .8rem; padding: .55rem .8rem; max-width: 90%; }
  .fs-bar .choice { font-size: .8rem; padding: .55rem .8rem; }
  .fs-bar .btn { padding: .7rem 1.1rem; font-size: .85rem; }
}