/* ═══════════════════════════════════════════════════════════════════════
   PARTY GAMES  (css/party-games.css)  — styles for the six extra games
   Colours come from the theme variables in style.css (dark / light work by themselves).
   Load AFTER style.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Game choice, step 1 (fallback): a 3 x 3 grid. js/game-carousel.js turns it into the diagonal (step 2 below). ── */
.games { --game-disc: clamp(62px, 18vw, 104px); }
@media (min-width: 900px) { .games { --game-disc: clamp(70px, 8vw, 108px); } }
.games-row {
  display: grid; grid-template-columns: repeat(3, var(--game-disc));
  justify-content: center; align-items: start; gap: clamp(10px, 2.2vh, 18px) var(--games-gap);
}
.game-name { text-align: center; line-height: 1.2; max-width: calc(var(--game-disc) + 22px); }

/* the move list belongs to chess only */
.gpage:is([data-game="connect4"], [data-game="dotsboxes"], [data-game="memory"], [data-game="mindmeld"], [data-game="draw"], [data-game="coloring"]) .g-moves { display: none; }
.gpage:is([data-game="mindmeld"], [data-game="draw"], [data-game="coloring"]) { --gw: min(94vw, 460px); }
.gpage:is([data-game="connect4"], [data-game="dotsboxes"], [data-game="memory"]) { --gw: min(94vw, 440px); }

/* ── shared pieces ── */
.pg { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-primary); }
.pg-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; letter-spacing: .04em;
  background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary);
}
.pg-badge.p1 { border-color: #ef4444; } .pg-badge.p2 { border-color: #facc15; }
.pg-in, .mm2-input {
  font: inherit; font-size: 16px; color: var(--text-primary); background: var(--input-bg);
  border: 1.5px solid var(--input-border); border-radius: 12px; padding: 10px 12px; min-width: 0; flex: 1;
}
.mm2-input:focus { outline: none; border-color: var(--input-focus); }

/* ── Connect Four ── */
.c4-board {
  display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; padding: 8px; border-radius: 18px;
  background: #2563eb; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 -4px 0 rgba(0,0,0,.2);
}
.c4-col { display: flex; flex-direction: column; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.c4-col:hover .c4-cell:first-child { background-color: rgba(255,255,255,.16); }
.c4-cell { position: relative; aspect-ratio: 1; padding: 7%; display: block; }
.c4-cell::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; background: var(--bg); box-shadow: inset 0 3px 6px rgba(0,0,0,.45); }
.c4-disc {
  position: absolute; inset: 7%; border-radius: 50%; z-index: 1;
  box-shadow: inset 0 -4px 6px rgba(0,0,0,.25), inset 0 3px 4px rgba(255,255,255,.35);
  animation: c4drop calc(.18s + var(--fall) * .06s) cubic-bezier(.5,0,.9,.6) both;
}
.c4-disc.p1 { background: #ef4444; } .c4-disc.p2 { background: #facc15; }
.c4-disc.win { animation: c4win .6s ease-in-out infinite alternate; }
@keyframes c4drop { from { transform: translateY(calc(var(--fall) * -105% - 60%)); } to { transform: none; } }
@keyframes c4win { to { transform: scale(.82); filter: brightness(1.3); } }

/* ── Dots & Boxes ── */
.db-svg { width: 100%; height: auto; touch-action: manipulation; user-select: none; }
.db-edge { stroke: var(--input-border); stroke-width: 7; stroke-linecap: round; opacity: .35; transition: opacity .15s, stroke .15s; }
.db-edge.hover { opacity: .9; stroke: var(--input-focus); }
.db-edge.on { opacity: 1; stroke-width: 8; }
.db-edge.on.p1 { stroke: #ef4444; } .db-edge.on.p2 { stroke: #eab308; }
.db-edge.last { stroke-width: 11; }
.db-hit { stroke: transparent; stroke-width: 34; stroke-linecap: round; cursor: pointer; }
.db-dots circle { fill: var(--text-primary); }
.db-box { animation: dbpop .3s ease both; transform-box: fill-box; transform-origin: center; }
.db-box.p1 { fill: rgba(239,68,68,.28); } .db-box.p2 { fill: rgba(250,204,21,.34); }
.db-letter { font-size: 26px; font-weight: 700; fill: var(--text-primary); pointer-events: none; }
@keyframes dbpop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Memory Match ── */
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; width: 100%; min-height: 120px; }
.mm-card { aspect-ratio: 1; border: 0; padding: 0; background: none; perspective: 600px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mm-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .35s; transform-style: preserve-3d; }
.mm-card.up .mm-in, .mm-card.done .mm-in { transform: rotateY(180deg); }
.mm-front, .mm-back {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1.5px solid var(--icon-border);
}
.mm-front { background: var(--icon-bg); color: var(--text-muted); font-size: 26px; }
.mm-back { transform: rotateY(180deg); background: var(--input-bg); font-size: clamp(28px, 9vw, 44px); }
.mm-card.done.mine .mm-back { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.35); }
.mm-card.done.theirs .mm-back { border-color: #eab308; box-shadow: 0 0 0 2px rgba(234,179,8,.4); }
.mm-card.done { cursor: default; }

/* ── Mind Meld ── */
.mm2 { gap: 12px; padding: 4px 8px; }
.mm2-round { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.mm2-prompt { font-size: clamp(20px, 5.6vw, 26px); font-weight: 300; text-align: center; line-height: 1.3; min-height: 2.6em; }
.mm2-form { display: flex; gap: 8px; width: 100%; }
.mm2-wait { min-height: 20px; font-size: 13px; color: var(--text-muted); }
.mm2-hist { width: 100%; max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.mm-row { display: grid; grid-template-columns: 22px 1fr 24px 1fr; align-items: center; gap: 6px; font-size: 15px; animation: dbpop .3s ease both; }
.mm-n { color: var(--text-muted); font-size: 12px; text-align: center; }
.mm-w { padding: 6px 10px; border-radius: 10px; background: var(--input-bg); border: 1px solid var(--input-border); text-align: center; overflow: hidden; text-overflow: ellipsis; }
.mm-w.me { border-color: #ef4444; } .mm-w.opp { border-color: #eab308; }
.mm-vs { text-align: center; color: var(--text-muted); }
.mm2-how { font-size: 12px; line-height: 1.5; color: var(--text-muted); text-align: center; max-width: 360px; }

/* ── Draw & Guess ── */
.dg { gap: 8px; }
.dg-top { width: 100%; display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.dg-time { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.dg-word { font-size: clamp(17px, 5vw, 22px); letter-spacing: .08em; text-align: center; min-height: 1.5em; }
.dg-pick { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.dg-canvas { width: 100%; aspect-ratio: 10 / 9; background: #fff; border-radius: 14px; border: 1.5px solid var(--icon-border); touch-action: none; display: block; }
.dg-tools { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.dg-sw { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dg-c { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--icon-border); padding: 0; cursor: pointer; }
.dg-c.sel { border-color: var(--input-focus); transform: scale(1.18); }
.dg-sz { display: flex; gap: 4px; }
.dg-s { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--icon-border); background: var(--input-bg); display: grid; place-items: center; padding: 0; cursor: pointer; }
.dg-s i { display: block; border-radius: 50%; background: var(--text-primary); }
.dg-s.sel { border-color: var(--input-focus); }
.dg-guess { width: 100%; display: flex; gap: 8px; }
.dg-log { width: 100%; max-height: 84px; overflow-y: auto; font-size: 13px; display: flex; flex-direction: column; gap: 2px; color: var(--text-muted); }
.dg-line.me { color: var(--text-primary); }
.pg [hidden] { display: none !important; }

/* ── Color Together ── */
.cl { gap: 12px; }
.cl-art { width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.cl-art svg { width: 100%; height: 100%; display: block; }
.cl .cp.blank { cursor: pointer; }
.cl:not(.wait) .cp.blank:hover { opacity: .75; }
.cl.wait .cp { cursor: default; }
.cl .cp.pop { animation: clpop .35s ease; }
@keyframes clpop { 0% { opacity: .2; } 100% { opacity: 1; } }
.cl-pal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; width: 100%; max-width: 360px; }
.cl-sw { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--icon-border); padding: 0; cursor: pointer; transition: transform .15s; }
.cl-sw.sel { transform: scale(1.18); border-color: var(--input-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus) 40%, transparent); }
.cl-result { text-align: center; display: flex; flex-direction: column; gap: 6px; animation: dbpop .5s ease both; }
.cl-title { font-family: Bangers, 'Comic Neue', 'Arial Black', system-ui, sans-serif; font-size: clamp(28px, 8vw, 38px); letter-spacing: .04em; line-height: 1.1; }
.cl-review { font-size: 13px; font-style: italic; color: var(--text-muted); }
.cl-chaos { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }


/* ═══════════════════════════════════════════════════════════════════════
   GAME CHOICE: FIXED DIAGONAL BANDS  (works with js/game-carousel.js)
   CHANGE: was a carousel (one big disc, swipe / arrows / dots). Now all nine games are visible, each in its own fixed place.
   js/game-carousel.js sets, per button: left / top (position), --game-disc (size), --cg-fs-name / --cg-fs-sub / --cg-ny / --cg-sy (text).
   --diag-angle = tilt of the bands, like the glowing curves of the slots. Bigger = steeper. Phone default 26deg.
   ═══════════════════════════════════════════════════════════════════════ */
/* CHANGE: 26deg / 20deg -> 35deg. The glowing curves of the two slots are tilted 90 - --slot2-rot = 35 degrees (style.css, :root), measured on a
   phone screenshot. With the bands at 35deg the discs, the title and both curves run in ONE direction, so the picker has the same free space to
   the upper and the lower curve. (If you change --slot2-rot / --slot1-rot in style.css, set this to 90 minus that number.) */
:root { --diag-angle: 35deg; }
@media (min-width: 900px) { :root { --diag-angle: 35deg; } }

/* CHANGE: the whole picker (title + 3 bands + names) is taller than the old carousel, so the block is centred in the free space between
   the two slots (22% .. 82% on a phone) instead of at 47%. Everything is scaled by the JS to fit the row height below. */
.games { --games-y: 52%; }

.games-row.diag {
  display: block; position: relative; width: 100%;
  height: clamp(460px, 68vh, 660px);   /* CHANGE: was 400 / 56vh / 580. A reference box only (the JS fits the picker to the channel between the curves), but it must be tall enough to hold the diagonal picker */
  opacity: 0; translate: 0 40px;
  transition: opacity .6s ease .15s, translate .7s cubic-bezier(.2, .8, .2, 1) .15s;
}
@media (min-width: 900px) { .games-row.diag { height: clamp(520px, 74vh, 760px); } }   /* big screens: more room, so the discs can be bigger */
.games.open .games-row.diag { opacity: 1; translate: 0 0; pointer-events: auto; }

/* a disc: position / size come from the JS. The pop-in at the start (opacity + scale, one after the other) is the normal rule of
   style.css (.game-btn / .games.open .game-btn), its delay follows --i = the place in the layout. */
.games-row.diag .game-btn {
  position: absolute; width: var(--game-disc);
  margin: calc(var(--game-disc) / -2) 0 0 calc(var(--game-disc) / -2);   /* left / top from the JS point at the CENTRE of the disc */
  will-change: transform;
}
/* CHANGE: IDLE MOTION. Every disc (with its name) floats a few pixels, each with its own speed and phase (--fd / --fdl from the JS).
   Uses the separate "translate" property, so it never fights with the pop-in transform. Always plays (no prefers-reduced-motion). */
.games.open .games-row.diag .game-btn { animation: cg-float var(--fd, 6s) ease-in-out var(--fdl, 0s) infinite; }
/* CHANGE: the float was -2.5 / +3 px; now a calmer, symmetric -2 / +2 px (moving discs next to small text look jittery). */
@keyframes cg-float { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 2px; } }

/* CHANGE: name + short line are ALWAYS visible under every disc (no hover on a phone). Sizes come from the JS so they follow the scale. */
.games-row.diag .game-name {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: var(--cg-ny, 8px);
  width: max-content; white-space: nowrap; text-align: center;
  font-size: var(--cg-fs-name, 14px); font-weight: 600; letter-spacing: .03em; line-height: 1.2; padding-left: .03em;
  color: var(--text-primary);
}
.games-row.diag .game-sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: var(--cg-sy, 30px);
  width: max-content; max-width: 170px; white-space: normal; text-align: center;   /* one line normally; a very long translation may wrap */
  font-size: var(--cg-fs-sub, 10.5px); line-height: 1.25; text-transform: uppercase;
  /* CHANGE: a little less letter-spacing (.08 -> .06em) makes the short lines narrower, so the left and right sides look more equal;
     weight 500 keeps the small text crisp on a dark background. */
  letter-spacing: .06em; padding-left: .06em; font-weight: 500;
  color: color-mix(in srgb, var(--text-primary) 78%, var(--bg));   /* brighter than --text-muted: works in dark AND light theme */
}
/* CHANGE: TITLE. It is now a line of its own that runs parallel to the bands and to the glowing curve above it (the JS sets left / top =
   the CENTRE of the title; .tilt adds the rotation). Style: Outfit (the app font) 600, small capitals, wide spacing, a fine accent line on both
   sides that fades out, and a very soft glow in the accent colour. The old rule had top:0 + translateX(-50%) (= "centred above the first band"). */
.games-row.diag .games-title {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); transform-origin: 50% 50%;
  margin: 0; white-space: nowrap; pointer-events: none; z-index: 200; padding-left: .28em;
  font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
  color: color-mix(in srgb, var(--text-primary) 84%, var(--bg));
}
.games-row.diag .games-title.tilt { transform: translate(-50%, -50%) rotate(calc(var(--diag-angle) * -1)); }
html:not([data-style="ink"]) .games-row.diag .games-title {
  display: flex; align-items: center; justify-content: center; gap: 12px; padding-left: 0;
  font-size: 12.5px; font-weight: 600; letter-spacing: .34em;
  color: color-mix(in srgb, var(--text-primary) 94%, var(--bg));
  text-shadow: 0 0 18px color-mix(in srgb, var(--input-focus) 40%, transparent);
}
html:not([data-style="ink"]) .games-row.diag .games-title > span:first-child { margin-right: -.34em; }   /* cancels the spacing after the last letter, so the text is truly centred */
html:not([data-style="ink"]) .games-row.diag .games-title::before,
html:not([data-style="ink"]) .games-row.diag .games-title::after { content: ''; flex: none; width: 16px; height: 1.5px; opacity: .9; }
html:not([data-style="ink"]) .games-row.diag .games-title::before { background: linear-gradient(90deg, transparent, var(--input-focus)); }
html:not([data-style="ink"]) .games-row.diag .games-title::after  { background: linear-gradient(90deg, var(--input-focus), transparent); }
[data-theme="light"] .games-row.diag .games-title { text-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════
   RING + GLOW: ONLY THE LAST PLAYED GAME  (class .last, set by js/game-carousel.js)
   CHANGE: was the "centre" disc of the carousel. A pseudo-element, so every visual style keeps its own shadows.
   (all animations always play: no prefers-reduced-motion anywhere)
   ═══════════════════════════════════════════════════════════════════════ */
.game-disc::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--input-focus) 75%, transparent);
  box-shadow: 0 0 22px 2px color-mix(in srgb, var(--input-focus) 50%, transparent),
              inset 0 0 16px color-mix(in srgb, var(--input-focus) 22%, transparent);
  opacity: 0; transition: opacity .35s ease;
}
.games-row.diag .game-btn.last .game-disc::after { opacity: 1; animation: cg-glow 2.8s ease-in-out infinite; }
@keyframes cg-glow { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.035); } }
/* keyboard focus: the same ring (not for the mouse) */
.games-row.diag .game-btn:focus-visible .game-disc::after { opacity: .9; }
/* the icon of the last played game breathes slowly */
.games-row.diag .game-btn.last .game-icon svg { animation: cg-breathe 3.2s ease-in-out infinite; }
@keyframes cg-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* CHANGE: Premium crown on Open World (js/game-carousel.js adds it). A gold SVG circle on the upper-right edge of the disc. */
/* CHANGE: crown a bit smaller (.32 -> .30) and tucked in (-4% -> -2%), so it stays on the disc and does not cut the glow ring. */
.game-badge { position: absolute; top: -2%; right: -2%; width: calc(var(--game-disc) * .30); height: calc(var(--game-disc) * .30); z-index: 3; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.game-badge svg { display: block; width: 100%; height: 100%; }
.game-badge .bg { fill: #f6c453; stroke: rgba(0, 0, 0, .28); stroke-width: .8; }
.game-badge .cr { fill: #3b2a00; }
html[data-style="ink"] .game-badge { filter: none; }
html[data-style="ink"] .game-badge .bg { stroke: var(--ink); stroke-width: 1.8; }

/* INK style (comic): the last played disc wears a HALO: a solid accent ring that hugs the disc (4 px) and 36 fine rays that grow out of
   it (6 px). Ring and rays are one piece, so it looks attached, like a badge. The rays turn slowly (the ring is round, so only the rays
   seem to move) and the whole halo breathes a little. The hard offset shadow of this disc is dropped: the halo replaces it.
   Drawn with gradients + a round mask (no border-radius, so no square can flash on phones, see 4d). Behind the disc (z-index -2). */
html[data-style="ink"] .game-disc::after {
  inset: -16px; z-index: -2; border: 0; border-radius: 0; box-shadow: none;
  background:
    radial-gradient(circle, var(--input-focus) calc(var(--game-disc) / 2 + 4px), transparent calc(var(--game-disc) / 2 + 4.8px)),
    repeating-conic-gradient(from 0deg, var(--input-focus) 0deg 3.4deg, transparent 3.4deg 10deg);
  -webkit-mask-image: radial-gradient(circle, #000 calc(var(--game-disc) / 2 + 10px), transparent calc(var(--game-disc) / 2 + 11px));
          mask-image: radial-gradient(circle, #000 calc(var(--game-disc) / 2 + 10px), transparent calc(var(--game-disc) / 2 + 11px));
}
html[data-style="ink"] .games-row.diag .game-btn.last .game-disc::after {
  animation: cg-ink-spin 30s linear infinite, cg-ink-pop 2.4s ease-in-out infinite;
}
html[data-style="ink"] .games-row.diag .game-btn.last::before { opacity: 0; }   /* no hard shadow for the glowing disc: the halo is its "depth" */
@keyframes cg-ink-spin { to { rotate: 360deg; } }
@keyframes cg-ink-pop  { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }

/* 4b) CHANGE: "RECTANGLE FLASH" DEFENCES for the picker.
   - no text / element selection while tapping across the discs (the browser paints a selection rectangle around each disc)
   - no square focus outline on the disc button itself (the round ring above is the focus mark)
   - no image drag ghost */
.games-row.diag, .games-row.diag * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
.games-row.diag ::selection { background: transparent; }
.games-row.diag .game-btn, .games-row.diag .game-btn:focus, .games-row.diag .game-btn:focus-visible { outline: none; }

/* 4c) CHANGE: TEST SWITCH. Open the site with  ?nofx  at the end of the address (e.g. https://your-site/?nofx) to turn the newest
   effects off (ring, breathing icon, floating). If a flash is gone with ?nofx, it comes from one of them. */
html.cg-nofx .game-disc::after { display: none; }
html.cg-nofx .games-row.diag .game-btn.last .game-icon svg { animation: none; }
html.cg-nofx .games.open .games-row.diag .game-btn { animation: none; will-change: auto; }

/* 4d) CHANGE: INK DISCS WITHOUT border-radius CLIPPING  (the "rectangle flash" on phones, Ink only)
   Phone browsers paint a layer that moves + fades + scales (every disc here does) and sometimes show the element's SQUARE box for a
   frame while the rounded corners are being cut. Only Ink shows it, because Ink fills the disc with a bright solid colour.
   So in Ink the circles are drawn as gradients (a circle that is transparent in the corners), which has no corners to flash:
   - the disc itself:      radial-gradient circle instead of background + border-radius
   - the hard shadow:      a second circle behind the button, shifted 6px (used to be box-shadow, which also follows the rounded box)
   - the purple face:      clipped with clip-path: circle() (a path clip, not a rounded-box clip) */
html[data-style="ink"] .games-row.diag .game-btn .game-disc {
  background: radial-gradient(circle closest-side, var(--ink) calc(100% - 1px), transparent 100%);
}
html[data-style="ink"] .games-row.diag .game-btn.last .game-disc { box-shadow: none; }
html[data-style="ink"] .games-row.diag .game-btn::before {
  content: ''; position: absolute; left: 6px; top: 6px; width: var(--game-disc); height: var(--game-disc); z-index: -1; pointer-events: none;
  background: radial-gradient(circle closest-side, var(--ink) calc(100% - 1px), transparent 100%);
  opacity: 0; transition: opacity .3s ease;
}
html[data-style="ink"] .games-row.diag .game-disc::before { clip-path: circle(50% at 50% 50%); }

/* soft shadow under every disc except the glowing one (that one keeps the normal style.css shadow) */
.games-row.diag .game-btn:not(.last) .game-disc { box-shadow: 0 6px 16px rgba(0,0,0,.28); }
html[data-style="soft"] .games-row.diag .game-btn:not(.last) .game-disc { box-shadow: 6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l); }

/* ═══════════════════════════════════════════════════════════════════════
   SOFT STYLE: text boxes that you can actually see
   Before, a box had the same colour as the page and a very faint shadow. Now it is a darker "well" with a
   clear rim, and a coloured ring when you type in it. Change --well to make it lighter / darker.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-style="soft"][data-theme="dark"]  { --well: color-mix(in srgb, var(--bg) 78%, #000); --well-rim: rgba(255,255,255,.12); }
html[data-style="soft"][data-theme="light"] { --well: color-mix(in srgb, var(--bg) 86%, #6f7e9c); --well-rim: rgba(43,50,64,.16); }
html[data-style="soft"] :is(.q-input, .mm2-input) {
  background: var(--well); border-color: transparent; border-radius: 14px;
  box-shadow: inset 5px 5px 11px var(--sh-d), inset -3px -3px 8px var(--sh-l), 0 0 0 1.5px var(--well-rim);
}
html[data-style="soft"] :is(.q-input, .mm2-input)::placeholder { color: var(--text-muted); opacity: .9; }
html[data-style="soft"] :is(.q-input, .mm2-input):focus {
  border-color: transparent;
  box-shadow: inset 5px 5px 11px var(--sh-d), inset -3px -3px 8px var(--sh-l), 0 0 0 2px var(--input-focus), 0 0 18px color-mix(in srgb, var(--input-focus) 35%, transparent);
}


/* ═══════════════════════════════════════════════════════════════════════
   GAME SHEET: clear hierarchy
   Search opponent = the big primary button. Practice offline = a visible secondary button (not grey text).
   ═══════════════════════════════════════════════════════════════════════ */
#gv-menu .mode-alt, .f-actions .mode-alt, .s-card .mode-alt {
  align-self: stretch; width: 100%; padding: 15px 18px; border-radius: 18px;
  font-size: 16px; font-weight: 500; letter-spacing: .05em; color: var(--text-primary);
  background: color-mix(in srgb, var(--input-focus) 10%, var(--bg));
  border: 1.5px solid color-mix(in srgb, var(--input-focus) 62%, transparent);
}
#gv-menu .mode-alt:hover, .f-actions .mode-alt:hover, .s-card .mode-alt:hover { border-color: var(--input-focus); background: color-mix(in srgb, var(--input-focus) 16%, var(--bg)); }
.s-card .mode-alt { padding: 12px 16px; font-size: 15px; }
html[data-style="soft"] :is(#gv-menu, .f-actions, .s-card) .mode-alt {
  background: var(--bg); border-color: color-mix(in srgb, var(--input-focus) 40%, transparent);
  box-shadow: 6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l);
}
html[data-style="soft"] :is(#gv-menu, .f-actions, .s-card) .mode-alt:active { box-shadow: inset 3px 3px 7px var(--sh-d), inset -3px -3px 7px var(--sh-l); }

.f-note { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); text-align: center; }
.f-note[hidden], .s-extra [hidden] { display: none !important; }

/* search screen */
.s-extra { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin: 6px 0 2px; }
.s-chip { align-self: center; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 8px 14px; }
.s-card {
  text-align: center; padding: 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 12px;
  background: color-mix(in srgb, var(--text-primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
  animation: dbpop .3s ease both;
}
.s-card p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0; }
.s-card strong { color: var(--text-primary); font-weight: 500; }
.s-slow-actions { display: flex; flex-direction: column; gap: 10px; }
.s-card .mode-main { padding: 14px 18px; font-size: 15px; }

/* ── CHANGE: OPEN WORLD (js/open-world.js) — the 3D page sits in the stage, chat and voice stay under it ── */
.gpage[data-game="openworld"] .g-moves { display: none; }
.gpage[data-game="openworld"] { --gw: min(96vw, 560px); }
.pg.ow { gap: 0; }
.ow-frame { width: 100%; height: min(66vh, 560px); border: 0; border-radius: 14px; background: #0b0f14; display: block; }