/* Zivi's Gelt Run (HL·46, game.js): the stage (canvas + DOM overlays) and the question card, recreated from
   design/brand/gelt-run-mockup.png panel 3 (white speech bubble, three stacked answers, green ✓ / pink ✗ feedback);
   HL·46c the stage overlays (design/brand/gelt-run-stages-mockup.png: cream word cards, big green buttons, celebrating
   Zivi - not its pillars, backgrounds, coins, pause or wordmark). Brand tokens only; every text/background pair is in
   tests/contrast.cjs. */
body.gr-on{overflow:hidden;overscroll-behavior:none}
/* HL·46c: the world fills the route (no 480 px cap, no blurred side panels); wider than 2.2 : 1 is letterboxed in the
   sky colour, never stretched (game.js keeps every object's size in world px) */
.gr-root{position:fixed;inset:0;z-index:5;overflow:hidden;background:linear-gradient(180deg,#3FA2EE,#8CCBF6 60%,#C6E7FB)}
:root[data-theme=dark] .gr-root{background:linear-gradient(180deg,#0E1A3D,#33508C)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .gr-root{background:linear-gradient(180deg,#0E1A3D,#33508C)}}
.gr-stage{position:relative;height:100%;max-width:calc(100vh * 2.2);max-width:calc(100dvh * 2.2);margin:0 auto;overflow:hidden}
.gr-root.strip-on .gr-stage{height:calc(100% - 52px);margin-top:52px;max-width:calc((100vh - 52px) * 2.2);max-width:calc((100dvh - 52px) * 2.2)}
.gr-stage canvas{position:absolute;inset:0;display:block;touch-action:none;outline:none;-webkit-tap-highlight-color:transparent;user-select:none}
.gr-head{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:0 12px;pointer-events:none}
.gr-head .hc-ihead{padding:10px 0;flex:none}
.gr-head .hc-ihead .hc-sbar{display:none}
.gr-head button{pointer-events:auto}
.gr-title{margin:0;font-family:var(--hc-display);font-size:var(--hc-t20);font-weight:600;color:#fff;text-shadow:0 2px 0 rgba(23,35,74,.45),0 0 8px rgba(23,35,74,.35)}

.gr-ready{position:absolute;left:16px;right:16px;top:58%;text-align:center;pointer-events:none;color:#fff;
  text-shadow:0 2px 0 rgba(23,35,74,.5),0 0 10px rgba(23,35,74,.4)}
.gr-ready[hidden]{display:none}
.gr-big{margin:0;font-family:var(--hc-display);font-weight:700;font-size:30px}
.gr-ready small{font-size:var(--hc-t17);font-weight:700}

/* the question: a speech bubble under the header, the answers beside Zivi (left/width set by game.js: ≤ 480 px, right) */
.gr-q{position:absolute;left:16px;right:16px;top:64px;display:flex;flex-direction:column;gap:10px;outline:none;overflow-y:auto;overscroll-behavior:contain}
.gr-q[hidden]{display:none}
.gr-bubble{position:relative;background:var(--hc-card);color:var(--hc-text);border-radius:var(--hc-r2);padding:10px 16px 12px;
  text-align:center;box-shadow:var(--hc-shadow-2);border:3px solid transparent}
.gr-bubble::after{content:"";position:absolute;right:34px;bottom:-14px;width:26px;height:26px;background:inherit;border:inherit;
  border-top:0;border-left:0;transform:skewX(-25deg) rotate(45deg);border-radius:0 0 6px 0}
.gr-word{display:block;font-size:40px;line-height:1.35;font-weight:700;color:var(--hc-text)}
.gr-ask,.gr-fb{margin:0;min-height:52px;display:flex;align-items:center;justify-content:center;font-family:var(--hc-display);font-weight:600;font-size:var(--hc-t20);line-height:1.25}
.gr-ask[hidden]{display:none}
.gr-fb:empty{display:none}
.gr-fb [lang=he]{font-weight:700;margin:0 .2em}
.gr-fb b{font-weight:700}
.gr-bubble.ok{background:var(--hc-success-bg);border-color:var(--hc-success)}
.gr-bubble.ok .gr-fb b{color:var(--hc-success)}
.gr-bubble.no{background:var(--hc-error-bg);border-color:var(--hc-error)}
.gr-fb{flex-wrap:wrap;gap:0 .25em}
.gr-opts{display:flex;flex-direction:column;gap:10px}
.gr-opt.hc-btn{width:100%;min-height:56px;font-size:var(--hc-t20);border-radius:16px;position:relative;white-space:normal;
  background:var(--hc-tint-blue);color:var(--hc-text);border:2px solid var(--hc-card);box-shadow:var(--hc-shadow-1)}
.gr-opt .gr-mark{position:absolute;left:14px;font-size:22px;font-weight:700}
.gr-opt.hc-btn:active{background:var(--hc-tint-gold)}
.gr-opt.hc-btn:disabled{background:var(--hc-card);color:var(--hc-text);border-color:var(--hc-border);opacity:1}
.gr-opt.hc-btn.is-right:disabled{background:var(--hc-success-bg);color:var(--hc-success);border-color:var(--hc-success)}
.gr-opt.hc-btn.is-wrong:disabled{background:var(--hc-error-bg);color:var(--hc-error);border-color:var(--hc-error)}
.gr-keep.hc-btn{width:100%;min-height:56px;font-size:var(--hc-t20)}
.gr-keep[hidden]{display:none}

/* the crash card */
.gr-crash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(23,35,74,.35);padding:16px}
.gr-crash[hidden]{display:none}
.gr-crash-card{background:var(--hc-card);color:var(--hc-text);border-radius:var(--hc-r3);padding:18px 22px 22px;width:min(300px,100%);
  text-align:center;box-shadow:var(--hc-shadow-2)}
.gr-crash-card img{width:150px;height:auto}
.gr-crash-card h2{margin:4px 0 14px;font-size:var(--hc-t32)}

@media (max-width:360px){.gr-word{font-size:36px}}
@media (prefers-reduced-motion:reduce){.gr-root::before{filter:none}}

/* adult Home: the small link under the mode cards */
.gr-homelink{text-align:center;margin:14px 0 0}

/* HL·46a arming: a fresh card's buttons ignore input for 600 ms (and while a key is held) but look exactly as usual */
.gr-q.arming .gr-opt.hc-btn:disabled{background:var(--hc-tint-blue);color:var(--hc-text);border-color:var(--hc-card);box-shadow:var(--hc-shadow-1)}
.gr-q.arming .gr-keep.hc-btn:disabled,.gr-crash.arming .hc-btn.gold:disabled{background:var(--hc-gold);color:var(--hc-on-gold);box-shadow:0 3px 0 rgba(128,80,0,.25)}
.gr-crash-card{outline:none}
/* HL·46b: a small finger wiggle on a button never turns into a scroll that cancels the tap */
.gr-q .hc-btn,.gr-crash .hc-btn{touch-action:none}

/* ---------- HL·46c the stage overlays ---------- */
.gr-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:56px 16px 16px;background:rgba(23,35,74,.28)}
.gr-ov[hidden]{display:none}
.gr-ov-card{position:relative;width:min(640px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;outline:none;
  background:var(--hc-parchment);color:var(--hc-text);border-radius:var(--hc-r3);box-shadow:var(--hc-shadow-2);padding:16px 18px 18px;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.gr-ov-top{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.gr-ov-top img{width:72px;height:auto;flex:none}
.gr-ov.is-celebrate .gr-ov-top{flex-direction:column;gap:4px}
.gr-ov.is-celebrate .gr-ov-top img{width:min(150px,32vh)}
.gr-ov-top h2{margin:0;font-family:var(--hc-display);font-size:var(--hc-t24);line-height:1.2;color:var(--hc-text)}
.gr-ov-line{margin:0;font-size:var(--hc-t17);color:var(--hc-text)}
.gr-ov-line[hidden],.gr-ov-note[hidden],.gr-cards[hidden]{display:none}
.gr-ov-note{margin:0;padding:6px 12px;border-radius:999px;background:var(--hc-warning-bg);color:var(--hc-warning);font-weight:700;font-size:var(--hc-t15)}
/* the word cards: 2 columns on a phone, 4 on ≥ 600 px; Hebrew ≥ 32 px with nikud, English beneath */
.gr-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
@media (min-width:600px){.gr-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.gr-cards.n4,.gr-cards.n3,.gr-cards.n2,.gr-cards.n1{grid-template-columns:repeat(2,minmax(0,1fr));max-width:360px}}
.gr-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 10px;border-radius:14px;
  background:var(--hc-card);border:2px solid var(--hc-border)}
.gr-card .gr-he{font-size:34px;line-height:1.35;font-weight:700;color:var(--hc-text)}
.gr-card .gr-en{font-size:var(--hc-t17);color:var(--hc-text)}
.gr-card.is-ok{border-color:var(--hc-success)}
.gr-tick{position:absolute;top:4px;right:8px;color:var(--hc-success);font-weight:700}
.gr-go.hc-btn{width:min(340px,100%);min-height:56px;font-size:var(--hc-t20);background:var(--hc-success);color:var(--hc-card);
  box-shadow:0 3px 0 rgba(23,35,74,.25);gap:8px}
.gr-ov.arming .gr-go.hc-btn:disabled{background:var(--hc-success);color:var(--hc-card);box-shadow:0 3px 0 rgba(23,35,74,.25)}
.gr-more.hc-btn{min-height:44px}
.gr-more[hidden]{display:none}
.gr-ov.arming .gr-more.hc-btn:disabled{background:transparent;color:var(--hc-primary)}
.gr-ov .hc-btn{touch-action:none}
/* the celebration burst: CSS stars behind Zivi (none under reduced motion) */
.gr-burst{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none}
.gr-burst[hidden]{display:none}
.gr-burst::before,.gr-burst::after{content:"★ ✦ ★ ✦ ★";position:absolute;left:-90px;top:-60px;width:180px;font-size:22px;letter-spacing:6px;
  color:var(--hc-gold);animation:gr-pop 1.4s ease-out both}
.gr-burst::after{content:"✦ ★ ✦ ★";top:10px;left:-80px;width:160px;color:var(--hc-primary);animation-delay:.15s}
@keyframes gr-pop{0%{transform:scale(.3);opacity:0}30%{opacity:1}100%{transform:scale(1.25) translateY(-14px);opacity:0}}
@media (prefers-reduced-motion:reduce){.gr-burst{display:none}}
:root[data-calm="1"] .gr-burst{display:none}
/* another window has the session: a strip above the world, never over it */
.gr-strip{position:absolute;left:0;right:0;top:0;height:52px;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 12px;
  background:var(--hc-warning-bg);color:var(--hc-warning);font-weight:700;font-size:var(--hc-t15);line-height:1.2;text-align:left;overflow:hidden}
@media (max-width:480px){.gr-strip{font-size:var(--hc-t13);gap:8px;padding:0 8px}}
.gr-strip[hidden]{display:none}
.gr-strip .hc-btn{min-height:36px;padding:0 14px;flex:none}
/* short screens (a 640 px phone, landscape): the preview stays whole - Start Flying! never below the fold */
@media (max-height:700px){
  .gr-ov{padding:52px 12px 10px}
  .gr-ov-card{padding:10px 12px 12px;gap:6px}
  .gr-ov-top img{width:48px}
  .gr-ov.is-celebrate .gr-ov-top img{width:min(110px,24vh)}
  .gr-ov-top h2{font-size:var(--hc-t20)}
  .gr-ov-line{font-size:var(--hc-t15)}
  .gr-card{padding:3px 4px 5px}
  .gr-card .gr-he{font-size:32px;line-height:1.25}
  .gr-card .gr-en{font-size:var(--hc-t15)}
  .gr-go.hc-btn{min-height:50px}
}