/* Game surfaces: the shared primitives for "Map the city" (/run, the camera in a run, the "shop mapped" moment, the home card).
   Owner-approved (2026-10-30): ROUNDED shapes on these surfaces only; everything else in Tokay stays radius 0 (DESIGN.md "Game surfaces").
   Load after tokay.css. Colours come from the --h-* / --tk-gold* tokens (both themes); orange (--tokay-spot) is never used here, gold means points.
   Parts:  .tk-gpill (live pill)  .tk-fchip (map chip)  .tk-gsheet (bottom sheet, detents)  .tk-gstat (stat tiles)  .tk-stamp (passport stamp)
   plus .tk-gring (progress ring). The press-down key is a button modifier, `h-button tk-btn is-key`, and lives in tokay-theme.css.
   JS: game-pill.js (TokayGamePill) and game-sheet.js (TokayGameSheet). Class names avoid anything ad blockers hide. */

/* ---------- tokens ---------- */
:root{
  --tk-g-r-sheet:28px;--tk-g-r-pill:28px;--tk-g-r-chip:22px;--tk-g-r-card:18px;--tk-g-r-key:16px;
  --tk-g-ease:var(--h-ease,cubic-bezier(.2,.8,.2,1));
  /* light: panel is white on the pale slate page, cards are a tint of it */
  --tk-g-panel:var(--salt-paper);
  --tk-g-card:color-mix(in srgb,var(--salt-bg) 55%,var(--salt-paper));
  --tk-g-rule:var(--salt-rule);--tk-g-rule-2:color-mix(in srgb,var(--salt-muted) 40%,transparent);
  --tk-g-shadow:var(--salt-shadow);
  /* the live pill is a dark console in both themes (it sits on a map or a camera feed) */
  --tk-g-pill:#14212C;--tk-g-pill-ink:#EAF0F5;--tk-g-pill-mute:#B9C7D4;--tk-g-pill-chip:rgba(234,240,245,.12);--tk-g-pill-line:rgba(234,240,245,.18);
  --tk-g-pill-gold:#F2C230;--tk-g-pill-gold-text:#FBE48C;--tk-g-rec:#FF6B7E;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--tk-g-panel:var(--salt-bg);--tk-g-card:var(--salt-paper);--tk-g-pill:#0A1016}
}
:root[data-theme="dark"]{--tk-g-panel:var(--salt-bg);--tk-g-card:var(--salt-paper);--tk-g-pill:#0A1016}

/* ---------- progress ring (a small svg: <svg class="tk-gring" style="--p:40"> circle.tk-gring-bg + circle.tk-gring-fg pathLength="100") ---------- */
.tk-gring{width:22px;height:22px;flex:none;transform:rotate(-90deg)}
.tk-gring circle{fill:none;stroke-width:3.2}
.tk-gring-bg{stroke:var(--tk-g-rule-2)}
.tk-gring-fg{stroke:var(--tk-gold);stroke-linecap:round;stroke-dasharray:calc(var(--p,0) * 1) 100;transition:stroke-dasharray .6s var(--tk-g-ease)}

/* ---------- live pill ---------- */
.tk-gpill{display:flex;align-items:center;gap:12px;min-height:56px;box-sizing:border-box;padding:0 8px 0 14px;border-radius:var(--tk-g-r-pill);background:var(--tk-g-pill);color:var(--tk-g-pill-ink);box-shadow:0 0 0 1px var(--tk-g-pill-line);font-family:var(--h-font)}
.tk-gpill.has-back{padding-left:6px}
.tk-gpill[hidden]{display:none}
.tk-gpill-dot{position:relative;flex:none;width:12px;height:12px;border-radius:50%;background:var(--tk-g-pill-gold)}
.tk-gpill-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--tk-g-pill-gold);opacity:.5;animation:tk-gpill-ping 2.2s var(--tk-g-ease) infinite}
.tk-gpill.is-ended .tk-gpill-dot{background:var(--tk-g-pill-mute);opacity:.6}
.tk-gpill.is-ended .tk-gpill-dot::after{animation:none;opacity:0}
.tk-gpill.is-rec .tk-gpill-dot{background:var(--tk-g-rec)}
.tk-gpill.is-rec .tk-gpill-dot::after{border-color:var(--tk-g-rec)}
.tk-gpill-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tk-gpill-name{display:block;font:700 17px/1.1 var(--h-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-gpill-sub{display:block;font:500 13px/1.15 var(--h-font);color:var(--tk-g-pill-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-gpill-sub:empty{display:none}
.tk-gpill.is-here .tk-gpill-sub{color:var(--tk-g-pill-gold-text);font-weight:600}
.tk-gpill-r{flex:none;display:flex;align-items:center;gap:8px;margin-left:auto}
.tk-gpill [hidden]{display:none} /* the back button and right-slot parts set the hidden attribute; .h-button display would otherwise win */
.tk-gpill-count,.tk-gpill-time{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:20px;background:var(--tk-g-pill-chip);font:700 16px/1 var(--h-font);font-variant-numeric:tabular-nums;white-space:nowrap}
.tk-gpill-time{font-family:var(--h-mono);font-weight:500;font-size:17px;letter-spacing:-.01em}
.tk-gpill-time .h-ic{width:18px;height:18px;flex:none;color:var(--tk-g-pill-mute)}
.tk-gpill-time.is-low{color:var(--tk-g-pill-gold-text)}
.tk-gpill-count.is-rec::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tk-g-rec);animation:tk-gpill-blink 1.1s steps(2,start) infinite}
/* buttons inside the pill (back, hold again) are the Tokay button system, only re-skinned for the dark console */
.h-button.tk-btn.is-quiet.is-icon.tk-gpill-back{flex:none;--bh:44px;border-radius:50%;color:var(--tk-g-pill-ink);margin-right:2px}
.h-button.tk-btn.is-quiet.is-icon.tk-gpill-back:is(:hover,.is-hover):not(:disabled):not([aria-disabled="true"]){background:var(--tk-g-pill-chip);color:var(--tk-g-pill-ink)}
.h-button.tk-btn.tk-gpill-back:focus-visible{outline:2px solid var(--tk-g-pill-gold)}
.h-button.tk-btn.tk-gpill-renew{--bh:44px;--bpx:16px;--key-d:3px;margin-bottom:0;font-size:15px;border-radius:22px}
@keyframes tk-gpill-ping{0%{transform:scale(.8);opacity:.55}100%{transform:scale(2);opacity:0}}
@keyframes tk-gpill-blink{50%{opacity:.25}}

/* ---------- floating map chip ---------- */
.tk-fchip{display:inline-flex;align-items:center;gap:9px;min-height:44px;max-width:100%;box-sizing:border-box;padding:0 16px 0 12px;border-radius:var(--tk-g-r-chip);background:var(--tk-g-panel);color:var(--h-text);font:500 15px/1.2 var(--h-font);box-shadow:0 0 0 1px var(--tk-g-rule),0 8px 18px -10px var(--tk-g-shadow)}
.tk-fchip b{font-weight:700}
.tk-fchip .h-ic{width:18px;height:18px;flex:none}
.tk-fchip>.tk-gring{width:24px;height:24px}
.tk-fchip[hidden]{display:none}
button.tk-fchip{border:0;cursor:pointer}
button.tk-fchip:focus-visible{outline:2px solid var(--h-brand);outline-offset:2px}

/* ---------- bottom sheet with detents (TokayGameSheet drives data-detent) ----------
   Heights are CSS values so a screen can retune them: --gs-peek, --gs-half, --gs-full (percentages are of the containing block).
   Position it where it belongs (absolute inside the map section, or add .is-fixed); on desktop a screen may turn it into a side panel. */
.tk-gsheet{--gs-peek:132px;--gs-half:min(52%,460px);--gs-full:calc(100% - 64px);--gs-h:var(--gs-half);
  position:absolute;left:0;right:0;bottom:0;z-index:7;box-sizing:border-box;height:var(--gs-h);max-height:100%;max-width:var(--gs-max,640px);margin-inline:auto;display:flex;flex-direction:column;
  background:var(--tk-g-panel);color:var(--h-text);border-radius:var(--tk-g-r-sheet) var(--tk-g-r-sheet) 0 0;box-shadow:0 0 0 1px var(--tk-g-rule),0 -14px 30px -16px var(--tk-g-shadow);
  transition:height .32s var(--tk-g-ease)}
.tk-gsheet.is-fixed{position:fixed}
.tk-gsheet[data-detent="peek"]{--gs-h:var(--gs-peek)}
.tk-gsheet[data-detent="half"]{--gs-h:var(--gs-half)}
.tk-gsheet[data-detent="full"]{--gs-h:var(--gs-full)}
.tk-gsheet.is-dragging{transition:none;user-select:none}
.tk-gsheet-handle{flex:none;display:flex;align-items:center;justify-content:center;width:100%;height:44px;margin:0;padding:0;border:0;background:none;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;border-radius:var(--tk-g-r-sheet) var(--tk-g-r-sheet) 0 0}
.tk-gsheet-handle::before{content:"";width:40px;height:5px;border-radius:3px;background:var(--tk-g-rule-2);transition:background .15s,width .2s var(--tk-g-ease)}
.tk-gsheet-handle:hover::before,.tk-gsheet.is-dragging .tk-gsheet-handle::before{background:var(--h-muted);width:48px}
.tk-gsheet-handle:focus-visible{outline:2px solid var(--h-brand);outline-offset:-4px}
.tk-gsheet.is-dragging .tk-gsheet-handle{cursor:grabbing}
.tk-gsheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px max(16px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.tk-gsheet[data-detent="peek"] .tk-gsheet-body{overflow:hidden}

/* ---------- stat tiles ---------- */
.tk-gstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}
.tk-gstat{position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:62px;padding:10px 12px;border-radius:var(--tk-g-r-card);background:var(--tk-g-card);color:var(--h-text)}
.tk-gstat-v{display:block;font:700 21px/1.15 var(--h-font);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-gstat-l{display:block;font:500 13px/1.2 var(--h-font);color:var(--h-muted)}
.tk-gstat .tk-gring{position:absolute;right:10px;top:12px}
.tk-gstat.is-gold .tk-gstat-v{color:var(--tk-gold-text)}
.tk-gstat.is-lg{min-height:96px;padding:14px clamp(10px,3vw,16px);border-radius:22px}
.tk-gstat.is-lg .tk-gstat-v{font-size:clamp(24px,7.4vw,34px);font-weight:800;line-height:1.05}
.tk-gstat.is-lg .tk-gstat-l{font-size:14px}

/* ---------- passport stamp ----------
   <span class="tk-stamp" role="img" aria-label="Florist: Kvitkova Lavka"> <svg class="h-ic">kind icon</svg> <b class="tk-stamp-name">Mapped</b> </span>
   .is-s small (no name), .is-empty an unfilled slot (dashed, no tilt), .is-new stamps down once. --tk-stamp-bg should match the surface behind it. */
.tk-stamp{--tk-stamp-bg:var(--tk-g-card);position:relative;flex:none;box-sizing:border-box;width:100px;height:100px;display:grid;place-items:center;border-radius:50%;border:3px dashed var(--h-brand);color:var(--h-brand);transform:rotate(-8deg)}
.tk-stamp::before{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid var(--h-brand)}
.tk-stamp .h-ic{width:42px;height:42px;stroke-width:1.8}
.tk-stamp-name{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);padding:0 6px;background:var(--tk-stamp-bg);font:800 12px/1.2 var(--h-font);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.tk-stamp.is-s{width:52px;height:52px;border-width:2px}
.tk-stamp.is-s::before{inset:4px;border-width:1.5px}
.tk-stamp.is-s .h-ic{width:24px;height:24px}
.tk-stamp.is-s .tk-stamp-name{display:none}
.tk-stamp.is-empty{border-color:var(--tk-g-rule-2);color:var(--tk-g-rule-2);transform:none}
.tk-stamp.is-empty::before{display:none}
.tk-stamp.is-empty .h-ic{width:20px;height:20px}
.tk-stamp.is-new{animation:tk-stamp-down .62s var(--tk-g-ease) both}
.tk-stamp.is-new::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--h-brand);opacity:0;animation:tk-stamp-hit .62s var(--tk-g-ease) both}
.tk-stamps{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
@keyframes tk-stamp-down{0%{transform:rotate(-14deg) scale(2.6);opacity:0}52%{transform:rotate(-8deg) scale(.92);opacity:1}72%{transform:rotate(-8deg) scale(1.05)}100%{transform:rotate(-8deg) scale(1);opacity:1}}
@keyframes tk-stamp-hit{0%,50%{transform:scale(1);opacity:0}52%{opacity:.7}100%{transform:scale(1.5);opacity:0}}

@media (max-width:420px){.tk-gpill{gap:10px}.tk-gpill-time .h-ic{display:none}.tk-gpill-count,.tk-gpill-time{padding:0 10px}}
@media (prefers-reduced-motion:reduce){
  .tk-gpill-dot::after,.tk-gpill-count.is-rec::before,.tk-stamp.is-new,.tk-stamp.is-new::after{animation:none}
  .tk-gsheet,.tk-gsheet-handle::before,.tk-gring-fg{transition:none}
}