/* Gradients (js/games/hue-*.js). The play screen is a Station (booth grey, DESIGN-SYSTEM.md): the board is the
   interface, centered, with a 112 px foot under the thumb. Tiles are flat color with a hairline of grey between
   them; when the board is solved the gaps close into one gradient. Controls are opaque, never frosted. Motion is
   transform-only: a tile lifts, flies, snaps; a ripple runs on success. Reduce Motion: no flight, no ripple. */

/* ---------- the board ---------- */
.hg-stage{padding:10px 0 8px;align-items:center}
.hg-board{position:relative;width:min(100%,calc((100dvh - 330px) * var(--ar)));aspect-ratio:var(--ar);margin:0 auto;flex:none;touch-action:none;-webkit-user-select:none;user-select:none}
/* landscape lane (2026-10-09): the 330px budget above assumes a portrait head+foot; on a rotated phone that
   math isn't wrong, just overcautious (same vertical chrome, far more available width), so the board comes out
   smaller than it has to. Same fix css/games.css already uses for Odd one out's board (a container query
   against the stage's own real box, not a guess at the page's fixed chrome) -- scoped to landscape only, so
   nothing about the approved portrait board changes. */
@media (orientation:landscape){
  .hg-stage{container-type:size}
}
@supports (width:1cqw){
  @media (orientation:landscape){
    .hg-stage .hg-board{width:min(100cqw,100cqh * var(--ar))}
  }
}
.hg-s{position:absolute;padding:0;border:0;background:var(--c);border-radius:3px;--g:.9;transform:scale(var(--g));transition:transform .26s var(--spring),background-color .18s;touch-action:none;-webkit-tap-highlight-color:transparent}
.hg-k-dia,.hg-k-hex,.hg-k-poly{border-radius:0}
.hg-k-hex{--g:.94}
.hg-k-poly{--g:.93}
.hg-k-dot{border-radius:50%;--g:.92}
.hg-board[style*="--ar:1."] .hg-k-sq,.hg-b-rect .hg-k-sq{--g:.9}
/* the fixed tiles: a small centered dot, dark on light colors and light on dark ones */
.hg-s.fix::after,.hg-still i.fix::after,.hg-heat i.fix::after{content:"";position:absolute;left:50%;top:50%;width:16%;max-width:7px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.78)}
.hg-s.fix[data-ink=d]::after,.hg-still i.fix[data-ink=d]::after{background:rgba(20,19,17,.6)}
.hg-heat i.fix::after{background:rgba(236,232,223,.35)}
.hg-s.fix{cursor:default}
/* picked up: lifted, with a ring drawn inside the tile (outlines would be clipped on shaped tiles) */
.hg-s.sel{transform:scale(calc(var(--g) * 1.12));z-index:3;transition-duration:.22s}
.hg-s.sel::before{content:"";position:absolute;inset:18%;border-radius:50%;border:2px solid rgba(255,255,255,.92);box-shadow:0 0 0 1.5px rgba(0,0,0,.28)}
.hg-k-sq.sel::before{border-radius:2px;inset:14%}
.hg-s.lift{background:rgba(0,0,0,.16)!important;transform:scale(calc(var(--g) * .86))}
.hg-s.lift::after{opacity:0}
.hg-s.over{transform:scale(calc(var(--g) * .84))}
.hg-s.snap{animation:hgSnap .34s var(--spring)}
@keyframes hgSnap{0%{transform:scale(calc(var(--g) * .84))}100%{transform:scale(var(--g))}}
.hg-s.nope{animation:hgNope .32s ease}
@keyframes hgNope{25%{transform:scale(var(--g)) translateX(-2px)}75%{transform:scale(var(--g)) translateX(2px)}}
.hg-s.nudge{animation:hgNudge 1.5s ease-in-out infinite}
@keyframes hgNudge{50%{transform:scale(calc(var(--g) * .8))}}
.hg-s.hinted::before{content:"";position:absolute;inset:30%;border-radius:50%;background:rgba(255,255,255,.85);animation:hgHint 1.4s ease-out both}
@keyframes hgHint{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
/* blind: face down is plain booth grey, one step darker than the ground */
.hg-s.down{background:#525252!important;transition:background-color .3s}
.hg-s.down::after{opacity:0}
.hg-look .hg-s{animation:hgLook 3s ease-in-out both}
@keyframes hgLook{0%,80%{filter:none}100%{filter:brightness(.92)}}
/* solved: a ripple from the last tile, then the gaps close into one gradient */
.hg-s.rip{animation:hgRip .62s var(--ease) var(--dl,0ms) both}
@keyframes hgRip{45%{transform:scale(calc(var(--g) * .84))}100%{transform:scale(var(--g))}}
.hg-board.whole .hg-s{--g:1.012;transition:transform .7s var(--ease)}
.hg-board.whole .hg-k-dot{--g:1}
.hg-board.whole .hg-s::after{opacity:0;transition:opacity .5s}
.hg-board.solved .hg-s{cursor:default}
/* a tile in flight (transform only) */
.hg-fly{position:fixed;z-index:60;pointer-events:none;margin:0;transform-origin:0 0}
.hg-fly.hg-drag{transform-origin:50% 50%;transition:none;box-shadow:0 10px 24px rgba(0,0,0,.28)}
@media (prefers-reduced-motion:reduce){.hg-s.rip,.hg-s.snap,.hg-s.nudge,.hg-look .hg-s{animation:none}.hg-board.whole .hg-s{transition:none}}

/* ---------- the header: a progress track for the clock or the move cap ---------- */
.hg-play .deck-top{gap:12px}
.hg-track{flex:1;height:4px;border-radius:2px;background:var(--b-track);overflow:hidden}
.hg-track.empty{background:none}
.hg-track i{display:block;height:100%;width:100%;background:var(--b-ink);border-radius:2px;transition:width .25s linear,background-color .3s}
.hg-track.empty i{display:none}
.hg-track.low i{background:#F2B8A8}
.hg-moves{min-width:64px;text-align:right;font:500 13px/1 var(--mono);color:var(--b-soft);font-variant-numeric:tabular-nums}
.hg-head h2{min-height:46px;text-wrap:balance}
.hg-head .note{min-height:21px;margin-top:6px;color:var(--b-soft);text-wrap:pretty;max-width:34ch}
.hg-reveal{display:inline-block;animation:hgUp .6s var(--ease) both}
.hg-head .note .hg-reveal{animation-delay:.12s}
@keyframes hgUp{from{opacity:0;transform:translateY(10px)}}
.hg-in{animation:hgUp .5s var(--ease) .25s both}
.hg-foot{min-height:112px;flex-direction:column;gap:10px}
.hg-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.hg-two .oo-pill{width:100%}
.hg-wait{flex:1;display:grid;place-items:center}
@media (prefers-reduced-motion:reduce){.hg-reveal,.hg-in{animation:none}}

/* ---------- a step inside another screen (the Journey) ---------- */
.hg-step,.hg-inbox{flex:1;display:flex;flex-direction:column;min-height:0;width:100%}
.hg-step .hg-head h2{font-size:34px}

/* ---------- minis: the map, the shelf, the daily card ---------- */
.hg-mini,.hg-still,.hg-heat{position:relative;display:block;aspect-ratio:var(--ar)}
.hg-mini{height:100%;max-width:100%;margin:0 auto}
.hg-mini i,.hg-still i,.hg-heat i{position:absolute;background:var(--c,var(--surface-3));border-radius:1.5px;transform:scale(.88)}
.hg-mini i.hg-k-dia,.hg-still i.hg-k-dia,.hg-heat i.hg-k-dia{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0}
.hg-mini i.hg-k-hex,.hg-still i.hg-k-hex,.hg-heat i.hg-k-hex{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border-radius:0;transform:scale(.94)}
.hg-mini i.hg-k-poly,.hg-still i.hg-k-poly,.hg-heat i.hg-k-poly{border-radius:0;transform:scale(.92)}
.hg-mini i.hg-k-dot,.hg-still i.hg-k-dot,.hg-heat i.hg-k-dot{border-radius:50%}
.hg-mini.locked i{background:var(--surface-3)}
.hg-still i{transform:scale(1.01)}
.hg-still i.hg-k-dot{transform:scale(.96)}
.hg-lvart{display:flex;align-items:center;justify-content:center;height:64px;width:100%}

/* the map */
.hg-map .oo-world .mono{font:500 13px/1 var(--mono);color:var(--faint);margin-left:6px;font-style:normal}
.hg-map .oo-world.lit b::after{content:"";display:inline-block;width:.7em;height:.7em;margin-left:.25em;vertical-align:.1em;background:#E8C66B;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.8l2.45 5.1 5.6.75-4.1 3.9 1.03 5.55L12 16.4l-4.98 2.7 1.03-5.55-4.1-3.9 5.6-.75z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.8l2.45 5.1 5.6.75-4.1 3.9 1.03 5.55L12 16.4l-4.98 2.7 1.03-5.55-4.1-3.9 5.6-.75z'/%3E%3C/svg%3E") center/contain no-repeat}
.hg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.hg-lv{display:flex;flex-direction:column;gap:9px;padding:12px 10px 11px;background:var(--surface-2);border-radius:var(--r-2);text-align:left;min-width:0;transition:transform .25s var(--spring),opacity .25s}
.hg-lv:active{transform:scale(.97)}
.hg-lv.locked{opacity:.4}
.hg-lv.cur{box-shadow:inset 0 0 0 1.5px var(--ink)}
.hg-lvt{display:flex;flex-direction:column;gap:5px;min-width:0}
.hg-lvt b{font:400 16px/1.12 var(--serif);color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-wrap:pretty}
.hg-lvt b .mono{font:500 13px/1 var(--mono);color:var(--soft);margin-right:6px;vertical-align:1px}
.hg-lv.done .hg-lvt b .mono{color:var(--good)}
.hg-world.locked .hg-grid{opacity:.7}
.hg-empty{margin-top:14px;max-width:34ch}
.hg-daily{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:16px;width:100%;margin-top:22px;padding:14px 16px;background:var(--surface-2);border-radius:var(--r-2);text-align:left;transition:transform .3s var(--spring)}
.hg-daily:active{transform:scale(.98)}
.hg-daily .hg-lvart{height:60px}
.hg-daily svg{color:var(--soft)}
.hg-dt b{display:block;font:400 22px/1.1 var(--serif)}
.hg-dt b .mono{font:500 13px/1 var(--mono);color:var(--soft);margin-left:4px;vertical-align:3px}
.hg-dt em{display:block;margin-top:4px;font-style:normal;font-size:13.5px;line-height:1.35;color:var(--soft)}
.hg-daily.done .hg-dt b .mono{color:var(--good)}
.hg-shelf .hg-lvart{width:52px;height:52px}
.oo-shelf.hg-shelf{grid-template-columns:52px 1fr auto}

/* ---------- results ---------- */
.hg-res{justify-content:flex-start}
.hg-res h1{margin-top:4px}
.hg-art{display:grid;grid-template-columns:1fr;gap:14px;width:100%;margin:6px 0 22px;padding:0;text-align:left;position:relative}
.hg-art .hg-still.big{width:min(100%,46dvh * var(--ar),300px);margin:0 auto}
.hg-srcline{display:flex;flex-direction:column;gap:3px;padding-right:28px}
.hg-srcline b{font:400 26px/1.08 var(--serif);color:var(--ink)}
.hg-srcline em{font:italic 400 17px/1.3 var(--serif);color:var(--soft)}
.hg-art>svg{position:absolute;right:0;bottom:12px;color:var(--soft)}
.hg-art:active .hg-srcline b{opacity:.7}
.hg-corners{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:14px}
.hg-corner{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:12px;padding:0 10px 0 0;background:var(--surface-2);text-align:left;min-height:52px;transition:opacity .2s}
.hg-corner:active{opacity:.7}
.hg-corner:first-child{border-radius:var(--r-2) 0 0 0}.hg-corner:nth-child(2){border-radius:0 var(--r-2) 0 0}
.hg-corner:nth-child(3){border-radius:0 0 0 var(--r-2)}.hg-corner:nth-child(4){border-radius:0 0 var(--r-2) 0}
.hg-corner i{align-self:stretch;background:var(--c)}
.hg-corner:first-child i{border-radius:var(--r-2) 0 0 0}.hg-corner:nth-child(3) i{border-radius:0 0 0 var(--r-2)}
.hg-corner span{font:400 16px/1.15 var(--serif);color:var(--ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.hg-heatrow{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;margin-top:14px}
.hg-heat{width:96px;max-height:120px;margin:0 auto}
.hg-heatrow .note{color:var(--soft)}
.hg-acts{margin-top:26px;padding-bottom:calc(var(--bottom, 0px) + 12px)}
.hg-share{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:30px}
.hg-share img{width:min(72%,260px);border-radius:var(--r-2);box-shadow:0 0 0 1px var(--rule)}
.hg-share .note{text-align:center;font-size:14.5px;max-width:34ch}
@media (max-width:340px){.hg-grid{grid-template-columns:repeat(2,1fr)}.hg-heatrow{grid-template-columns:76px 1fr}.hg-heat{width:76px}}

/* ---------- For you / Choose (opaque segmented controls) ---------- */
.hg-modebox{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.hg-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--surface-2);border-radius:var(--r-pill)}
.hg-seg button{display:grid;place-items:center;text-align:center;min-height:44px;border-radius:var(--r-pill);font:400 19px/1 var(--serif);color:var(--soft);transition:background .2s,color .2s,transform .2s var(--spring)}
.hg-seg button:active{transform:scale(.96)}
.hg-seg button.on{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(236,232,223,.22)}
.hg-diffs button{font-size:17px}
.hg-modeline{font:italic 400 17px/1.4 var(--serif);color:var(--soft);text-wrap:pretty;margin:2px 2px 0}

/* ---------- readable sizes (David: "the text at the bottom is too small"): nothing under body size on these screens ---------- */
.hg-map .fine,.hg-res .fine{font-size:16px;line-height:1.55;color:var(--soft)}
.hg-map .oo-world span{font-size:16px}
.hg-dt em,.hg-share .note,.hg-heatrow .note{font-size:16px}
.hg-moves{font-size:14px}
.hg-lvt b .mono,.hg-map .oo-world .mono,.hg-dt b .mono{font-size:13px}
.hg-foot .oo-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.hg-foot .oo-pill .mono{font:500 14px/1 var(--mono);font-style:normal}