/* © 2026 Roy Borkin. All rights reserved. See LICENSE. */
/* ==========================================================================
   Games: the Games ring (hub) and the shared game screen (start card, score, pause, top 5).
   Sizes in cqmin like the rest of the app.
   ========================================================================== */

/* ---------------- Games ring ---------------- */
.games-hub { position: absolute; inset: 0; --gc: #ff5fa2; overflow: hidden; }
.gh-glow { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; transition: background .5s;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gc) 26%, transparent) 0, color-mix(in srgb, var(--gc) 7%, transparent) 42%, transparent 70%); }
.gh-ring { position: absolute; inset: 0; }
.gh-item { position: absolute; width: var(--gi, 9.6cqmin); height: var(--gi, 9.6cqmin); transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 16%, var(--surface)); border: .35cqmin solid color-mix(in srgb, var(--c) 45%, transparent);
  color: var(--c); transition: transform .25s var(--spring), border-color .25s, box-shadow .25s;
  animation: gh-in .5s var(--spring) both; }
.gh-item svg { width: 52%; height: 52%; fill: currentColor; }
.gh-item.on { transform: translate(-50%, -50%) scale(1.22); border-color: var(--c); background: var(--c); color: #0a0a0b; z-index: 2; }
.gh-item:active { transform: translate(-50%, -50%) scale(.9); }
/* a near-black game colour (Fill the Blank) vanishes on dark themes: its ring icon, the hub and the game's chrome use the ink colour there */
#app:not([data-mode="light"]) .gh-item.deep { --c: rgb(var(--ink) / .8) !important; }
#app:not([data-mode="light"]) :is(.games-hub, .game-screen).deep { --gc: rgb(var(--ink) / .82) !important; }
@keyframes gh-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } }
.gh-pointer { position: absolute; inset: 0; pointer-events: none; transition: transform .35s var(--ease); }
.gh-pointer::after { content: ''; position: absolute; left: 50%; top: 14.2%; width: 1.4cqmin; height: 1.4cqmin; border-radius: 50%; transform: translate(-50%, -50%); background: var(--gc); box-shadow: 0 0 1.6cqmin var(--gc); }
.gh-center { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2cqmin; }
.gh-center.swap { animation: gh-swap .35s var(--ease); }
@keyframes gh-swap { from { opacity: .2; transform: translate(-50%, -48%) scale(.96); } }
.gh-badge { width: 15cqmin; height: 15cqmin; border-radius: 50%; display: grid; place-items: center; color: #0a0a0b; background: var(--gc); }
.gh-badge svg { width: 55%; height: 55%; fill: currentColor; }
.gh-name { font-family: var(--display); font-size: 5.4cqmin; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin-top: .6cqmin; }
.gh-blurb { font-size: 2.35cqmin; color: var(--muted); line-height: 1.35; min-height: 6.4cqmin; }
.gh-best { font-size: 2.2cqmin; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--gc) 70%, rgb(var(--ink))); font-variant-numeric: tabular-nums; }
.gh-play { margin-top: .8cqmin; padding: 1.7cqmin 6cqmin; border-radius: 99px; font-size: 3cqmin; font-weight: 800; color: #0a0a0b; background: var(--gc); box-shadow: 0 0 3cqmin color-mix(in srgb, var(--gc) 50%, transparent); transition: transform .15s; }
.gh-play:active { transform: scale(.94); }
.gh-label { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: 1.9cqmin; font-weight: 800; letter-spacing: .32em; color: var(--dim); pointer-events: none; }
.gh-home { position: absolute; left: 37%; top: 77.5%; transform: translate(-50%, -50%); }
.gh-sound { position: absolute; left: 63%; top: 77.5%; transform: translate(-50%, -50%); }

/* ---------------- game screen ---------------- */
.game-screen { position: absolute; inset: 0; background: var(--bg); --gc: #fff; }
.g-canvas { position: absolute; left: 0; top: 0; touch-action: none; display: block; }
.g-hud { position: absolute; left: 50%; top: 13.5%; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 3; }
.g-score { font-family: var(--display); font-size: 6.2cqmin; font-weight: 700; letter-spacing: -.02em; line-height: 1; text-shadow: 0 0 2.4cqmin color-mix(in srgb, var(--gc) 55%, transparent), 0 .4cqmin 1.6cqmin rgb(var(--paper) / .8); font-variant-numeric: tabular-nums; }
.g-score.bump { animation: g-bump .25s var(--spring); }
@keyframes g-bump { 40% { transform: scale(1.18); } }
.g-sub { margin-top: .6cqmin; font-size: 2.2cqmin; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; text-shadow: 0 .3cqmin 1.2cqmin rgb(var(--paper) / .9); }
.game-screen:not(.playing) .g-hud { opacity: 0; }
.g-pause { position: absolute; left: 50%; top: 6.2%; transform: translate(-50%, -50%) scale(.82); z-index: 4; opacity: .75; }
.game-screen:not(.playing) .g-pause, .game-screen.ov-on .g-pause { opacity: 0; pointer-events: none; }
.g-toast { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%) scale(.8); z-index: 3; pointer-events: none; opacity: 0; font-family: var(--display); font-size: 5cqmin; font-weight: 700; color: rgb(var(--ink));
  text-shadow: 0 0 3cqmin var(--gc), 0 .4cqmin 1.6cqmin rgb(var(--paper) / .8); width: max-content; max-width: 78%; text-align: center; line-height: 1.15; text-wrap: balance; transition: opacity .2s, transform .3s var(--spring); }
.g-toast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* overlay cards */
.g-ov { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgb(var(--paper) / .55) 0, rgb(var(--paper) / .82) 70%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.g-ov.on { opacity: 1; pointer-events: auto; }
.g-card { width: 64%; max-height: 80%; display: flex; flex-direction: column; align-items: center; gap: 1.6cqmin; text-align: center; animation: g-card-in .45s var(--spring); }
@keyframes g-card-in { from { opacity: 0; transform: scale(.9); } }
.g-badge { width: 13cqmin; height: 13cqmin; border-radius: 50%; display: grid; place-items: center; color: #0a0a0b;
  background: var(--gc); }
.g-badge svg { width: 55%; height: 55%; fill: currentColor; }
.g-title { font-family: var(--display); font-size: 6cqmin; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.g-title.sm { font-size: 4.2cqmin; color: var(--muted); }
.g-how { font-size: 2.45cqmin; line-height: 1.4; color: var(--muted); max-width: 92%; }
.g-best { font-size: 2.2cqmin; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--gc) 70%, rgb(var(--ink))); font-variant-numeric: tabular-nums; }
.g-big { font-family: var(--display); font-size: 11cqmin; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: rgb(var(--ink)); text-shadow: 0 0 4cqmin color-mix(in srgb, var(--gc) 60%, transparent); font-variant-numeric: tabular-nums; }
.g-rankpill { padding: .7cqmin 2.4cqmin; border-radius: 99px; font-size: 2.2cqmin; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--glass-2); color: rgb(var(--ink)); }
.g-rankpill.gold { background: var(--gc); color: #0a0a0b; box-shadow: 0 0 3cqmin color-mix(in srgb, var(--gc) 55%, transparent); animation: g-bump .6s var(--spring) .2s both; }
.g-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1cqmin; max-width: 100%; }
.g-chip { padding: 1cqmin 2.2cqmin; border-radius: 99px; font-size: 2.2cqmin; font-weight: 700; color: var(--muted); background: var(--glass); border: 1px solid var(--line); transition: background .2s, color .2s; }
.g-chip.on { background: var(--fg); color: var(--on-fg); border-color: transparent; }
.g-actions { display: flex; gap: 1.4cqmin; justify-content: center; flex-wrap: wrap; }
.g-btn { padding: 1.5cqmin 3.4cqmin; border-radius: 99px; font-size: 2.6cqmin; font-weight: 800; background: var(--glass-2); color: rgb(var(--ink)); transition: transform .15s; }
.g-btn.primary { padding: 1.9cqmin 7cqmin; font-size: 3.2cqmin; color: #0a0a0b; background: var(--gc); box-shadow: 0 0 3cqmin color-mix(in srgb, var(--gc) 50%, transparent); }
.g-actions.small .g-btn { padding: 1.1cqmin 2.6cqmin; font-size: 2.2cqmin; background: var(--glass); color: var(--muted); }
.g-btn:active { transform: scale(.94); }

/* top 5 chart: one bar per place, best = full width */
.g-chart { width: 100%; display: flex; flex-direction: column; gap: .9cqmin; }
.g-chart-empty { font-size: 2.3cqmin; color: var(--dim); padding: 1.6cqmin 0; }
.g-row { display: grid; grid-template-columns: 3.2cqmin 1fr auto; align-items: center; gap: 1.3cqmin; font-size: 2.3cqmin; }
.g-rank { font-weight: 800; color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.g-bar-wrap { position: relative; height: 3.4cqmin; display: flex; align-items: center; }
.g-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 .6cqmin .6cqmin 0; background: color-mix(in srgb, var(--gc) 42%, transparent); }
.g-meta { position: relative; padding-left: 1cqmin; font-size: 1.8cqmin; color: rgb(var(--ink) / .8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-val { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; min-width: 8cqmin; }
.g-row.me .g-bar { background: var(--gc); box-shadow: 0 0 1.6cqmin color-mix(in srgb, var(--gc) 60%, transparent); }
.g-row.me .g-meta { color: #0a0a0b; font-weight: 700; }
.g-row.me .g-rank, .g-row.me .g-val { color: rgb(var(--ink)); }
.g-row.g-blank .g-bar-wrap { border-bottom: 1px dashed var(--line); height: 0; }
.g-row.g-blank .g-val { color: var(--dim); }

/* mode options (e.g. split / difficulty) */
.g-choices { display: flex; flex-direction: column; align-items: center; gap: 1cqmin; }
.g-opt { display: flex; align-items: center; justify-content: center; gap: .8cqmin; flex-wrap: wrap; }
.g-opt-label { font-size: 1.9cqmin; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-right: .4cqmin; }
.g-chip.sm { padding: .7cqmin 1.8cqmin; font-size: 2cqmin; }
.g-keyname { font-size: 1.9cqmin; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: -.6cqmin; }

/* your name on a new top-5 score */
.g-name { display: inline-flex; align-items: center; gap: 1cqmin; padding: .9cqmin 2.4cqmin; border-radius: 99px; font-size: 2.4cqmin; font-weight: 700; color: rgb(var(--ink));
  background: var(--glass); border: 1px dashed color-mix(in srgb, var(--gc) 70%, transparent); }
.g-name .ic { width: 2.4cqmin; height: 2.4cqmin; color: var(--gc); }
.g-name:active { transform: scale(.95); }

/* pause: what's playing in Music / Movies & TV */
.g-np { width: 100%; margin-top: .6cqmin; padding: 1.4cqmin 1.8cqmin; border-radius: 4cqmin; background: var(--glass); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 1.2cqmin; }
.g-np[hidden] { display: none; }
.g-np-head { display: flex; align-items: center; gap: 1.6cqmin; text-align: left; min-width: 0; }
.g-np-art { flex: none; width: 6.4cqmin; height: 6.4cqmin; border-radius: 50%; background: var(--glass-2) center / cover no-repeat; }
.g-np-text { min-width: 0; }
.g-np-title { font-size: 2.4cqmin; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-np-sub { font-size: 2cqmin; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-np-ctl { display: flex; align-items: center; justify-content: center; gap: .8cqmin; }
.g-np-btn { width: 6cqmin; height: 6cqmin; font-size: 3cqmin; }
.g-np-gap { width: 1.6cqmin; }
.g-np-vol { min-width: 4cqmin; text-align: center; font-size: 2.1cqmin; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }

/* right-to-left cards (a game in Hebrew, see def.lang() in shell.js): mirror the chart and the now-playing box;
   media buttons keep their usual order; Hebrew doesn't take wide letter spacing */
.g-ov[dir="rtl"] .g-rank { text-align: left; }
.g-ov[dir="rtl"] .g-bar { left: auto; right: 0; border-radius: .6cqmin 0 0 .6cqmin; }
.g-ov[dir="rtl"] .g-meta { padding-left: 0; padding-right: 1cqmin; }
.g-ov[dir="rtl"] .g-val { text-align: left; }
.g-ov[dir="rtl"] .g-opt-label { margin-right: 0; margin-left: .4cqmin; }
.g-ov[dir="rtl"] .g-np-head { text-align: right; }
.g-ov[dir="rtl"] .g-np-ctl { direction: ltr; }
.g-ov[dir="rtl"] :is(.g-best, .g-opt-label, .g-keyname, .g-rankpill) { letter-spacing: .02em; }
.g-ov[dir="rtl"], .g-toast[dir="rtl"] { font-family: 'Rubik', var(--font); }
.g-ov[dir="rtl"] :is(.g-title, .g-big) { font-family: 'Rubik', var(--display); }

/* ---------------- Play from phones (games/phones.js) ---------------- */
.gp-pill { display: inline-flex; align-items: center; gap: .8cqmin; }
.gp-pill svg { width: 2.8cqmin; height: 2.8cqmin; fill: currentColor; flex: none; }
.g-card.phones { width: 74%; gap: 1.4cqmin; }
.gp-card { display: flex; flex-direction: column; align-items: center; gap: 1.5cqmin; width: 100%; }
.gp-row { display: flex; align-items: center; justify-content: center; gap: 2.6cqmin; width: 100%; }
.gp-qr { width: 23cqmin; flex: none; }
.gp-qr.wait { aspect-ratio: 1; display: grid; place-items: center; background: var(--glass); border: 1px solid var(--line); border-radius: 2.6cqmin; box-shadow: none; }
.gp-spin { width: 4cqmin; height: 4cqmin; border-radius: 50%; border: .5cqmin solid var(--line); border-top-color: var(--gc); animation: gp-spin .8s linear infinite; }
@keyframes gp-spin { to { transform: rotate(360deg); } }
.gp-seats { display: flex; flex-direction: column; gap: 1cqmin; flex: 1; min-width: 0; max-width: 30cqmin; }
.gp-seat { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "d l l" "d n m"; column-gap: 1.2cqmin; align-items: center; text-align: left;
  padding: 1cqmin 1.8cqmin; border-radius: 2.4cqmin; background: var(--glass); border: 1px solid var(--line); color: rgb(var(--ink)); min-width: 0; }
.gp-seat .gp-dot { grid-area: d; width: 2.8cqmin; height: 2.8cqmin; }
.gp-sl { grid-area: l; font-size: 1.6cqmin; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.gp-seat b { grid-area: n; font-size: 2.5cqmin; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.gp-seat small { grid-area: m; font: 700 1.6cqmin/1 'JetBrains Mono', monospace; color: var(--muted); }
.gp-seat.empty { grid-template-columns: 1fr; grid-template-areas: "l" "n"; background: transparent; border-style: dashed; }
.gp-seat.empty b { color: var(--muted); font-weight: 600; font-size: 2.2cqmin; }
.gp-seat.g small, .gp-hp.g small { color: color-mix(in srgb, #22c55e 75%, rgb(var(--ink))); }
.gp-seat.y small, .gp-hp.y small { color: color-mix(in srgb, #f59e0b 80%, rgb(var(--ink))); }
.gp-seat.r small, .gp-hp.r small { color: color-mix(in srgb, #ef4444 85%, rgb(var(--ink))); }
.gp-seat.off { opacity: .55; }
.gp-seat:active { transform: scale(.97); }
.gp-dot { display: inline-block; width: 2cqmin; height: 2cqmin; border-radius: 50%; flex: none; }
.gp-watch { font-size: 1.8cqmin; color: var(--muted); text-align: left; }
.gp-url { font: 600 1.8cqmin/1.2 'JetBrains Mono', monospace; color: var(--dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-none { display: flex; flex-direction: column; align-items: center; gap: 1.2cqmin; }
.gp-ic svg { width: 9cqmin; height: 9cqmin; fill: var(--gc); opacity: .85; }
.gp-sm { font-size: 2cqmin; color: var(--dim); }
.gp-acts { align-items: center; }
.gp-acts .g-actions.small { display: inline-flex; }
.gp-hud { position: absolute; left: 50%; top: 94.6%; transform: translate(-50%, -50%); display: flex; gap: 1cqmin; z-index: 3; pointer-events: none; opacity: .62; transition: opacity .3s; max-width: 52%; }
.game-screen.ov-on .gp-hud { opacity: 0; }
.gp-hp { display: inline-flex; align-items: center; gap: .7cqmin; padding: .5cqmin 1.3cqmin; border-radius: 99px; background: rgb(var(--paper) / .45); font-size: 1.7cqmin; color: rgb(var(--ink) / .85); white-space: nowrap; min-width: 0; }
.gp-hp b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; max-width: 14cqmin; unicode-bidi: plaintext; }
.gp-hp .gp-dot { width: 1.4cqmin; height: 1.4cqmin; }
.gp-hp small { font: 700 1.5cqmin/1 'JetBrains Mono', monospace; color: var(--muted); }
.gp-hp.off { opacity: .5; }