/* Optional precision game; static SVG reserves its space before JavaScript. */
.hero .hero-inner { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,4rem);align-items:center;padding-top:2.5rem;padding-bottom:3rem; }
.hero-copy { min-width:0; }
.hero-game { min-width:0;width:100%;max-width:480px;justify-self:end;position:relative;color:var(--ink);padding:1rem 0; }
.hg-heading { display:flex;justify-content:space-between;align-items:center;gap:1rem; }
.hg-kicker { color:var(--volt);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; }
.hg-number { font-size:.625rem;letter-spacing:.12em;color:#92988b; }
.hero-game h2 { font-size:clamp(1.8rem,2.8vw,2.6rem);line-height:1.12;margin-top:.7rem; }
.hg-field { position:relative;width:100%;margin-top:.25rem;touch-action:pan-y;outline:none; }
.hg-art { width:100%;height:auto;overflow:visible;pointer-events:none; }
.hg-field:focus-visible { outline:1px solid rgba(198,255,58,.6);outline-offset:5px;border-radius:3px; }
[data-phase="aim"] .hg-field { cursor:crosshair; }
.hg-ball-handle { position:absolute;left:50%;top:85.43%;transform:translate(-50%,-50%);height:64px;width:64px;border:0;border-radius:50%;background:transparent;cursor:grab;touch-action:none;visibility:hidden;-webkit-tap-highlight-color:transparent; }
.is-ready[data-phase="aim"] .hg-ball-handle { visibility:visible; }
.hg-ball-handle:active { cursor:grabbing; }
.hg-ball-handle::after { content:'';position:absolute;inset:5px;border:1px solid rgba(244,244,240,.15);border-radius:50%; }
[data-input="mouse"] .hg-ball-handle::after { opacity:0; }
.hg-aim,.hg-arc { opacity:0; }
[data-phase="aim"] .hg-aim { opacity:.75; }
[data-phase="aim"] .hg-arc,[data-phase="flight"] .hg-arc { opacity:.2; }
[data-paused="true"] .hg-aim,[data-paused="true"] .hg-arc { opacity:0; }
[data-dragging] .hg-arc { opacity:.45; }
[data-outcome="hit"] .hg-ring { stroke-width:3;fill-opacity:.16; }
[data-outcome="miss"] .hg-ring { stroke-opacity:.65; }
.hg-scoreline { display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:.7rem;font-size:.75rem;color:#acb3a2; }
.hg-dots { display:flex;gap:.7rem;font-size:1rem;line-height:1; }
.hg-dots i { font-style:normal; }
.hg-dots [data-result="hit"] { color:var(--volt); }
.hg-dots [data-result="miss"] { color:#aaa; }
.hg-status { margin:.6rem 0 .75rem;min-height:3em;font-size:.8125rem;line-height:1.5;color:#bac0af;max-width:43ch; }
[data-outcome="hit"] .hg-status { color:var(--volt); }
.hg-controls { display:flex;align-items:center;justify-content:space-between;gap:.65rem;min-height:44px;visibility:hidden; }
.is-ready .hg-controls { visibility:visible; }
.hg-play-controls { display:flex;align-items:center;gap:.2rem; }
.hg-action,.hg-pause { min-height:44px;padding:.65rem .85rem;font:600 .75rem/1.2 var(--font-body);background:transparent;color:var(--volt);border:1px solid rgba(198,255,58,.45);cursor:pointer;touch-action:manipulation; }
.hg-pause { border-color:transparent;color:#adb4a0;padding:.65rem .5rem; }
.hg-action:hover { background:rgba(198,255,58,.08); }
.hg-action:disabled { opacity:.4;cursor:default; }
.hg-action:focus-visible,.hg-pause:focus-visible,.hg-book:focus-visible { outline:2px solid var(--ink);outline-offset:4px; }
.hg-book,.hg-fallback { font-size:.75rem;min-height:44px;display:inline-flex;align-items:center;color:#bec5b0;text-decoration:underline;text-underline-offset:4px; }
.hero-game [hidden] { display:none; }
.has-hero-game .hero-pitch { display:none; }
:lang(fi) .hero .hero-title { font-size:clamp(4.2rem,9.8vw,10rem); }
:lang(fi) .hero .hero-stroke { font-size:clamp(1.7rem,3.1vw,3.1rem); }
@media(max-width:1100px) {
 .hero .hero-inner { grid-template-columns:1fr;gap:2rem;padding-top:2rem; }
 .hero-game { justify-self:center;max-width:480px; }
 :lang(fi) .hero .hero-title { font-size:clamp(4.2rem,13vw,10rem); }
 :lang(fi) .hero .hero-stroke { font-size:clamp(1.7rem,4.2vw,3.6rem); }
 .hero-game h2 { font-size:2rem; }
}
@media(max-width:600px) {
 .hero .hero-inner { padding-top:1.2rem;gap:2.1rem;padding-bottom:2rem; }
 .hero-game { max-width:420px;padding-top:.2rem; }
 .hg-heading { gap:.5rem; }
 .hg-kicker { letter-spacing:.08em; }
 .hg-number { font-size:.58rem;letter-spacing:.04em; }
 .hg-action { padding:.65rem .7rem; }
 .hg-pause { padding:.65rem .35rem; }
 .hg-controls { gap:.25rem; }
}
@media(prefers-reduced-motion:no-preference) {
 .hero-game.is-ready .hg-art { animation:hg-arrive .8s cubic-bezier(.23,1,.32,1) both; }
 [data-outcome="hit"] .hg-ring { animation:hg-hit .4s ease-out; }
}
@keyframes hg-arrive { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
@keyframes hg-hit { from{stroke-width:5;fill-opacity:.25}to{stroke-width:3;fill-opacity:.16} }
@media(prefers-reduced-motion:reduce) { .hero-game * { animation:none!important;transition:none!important; } }

/* Three quiet, equally sized panels; shooting remains the no-script fallback. */
.hero-games { min-width:0;width:100%;max-width:480px;justify-self:end; }
.hero-games [hidden] { display:none!important; }
.hg-tabs { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-bottom:1px solid var(--line);padding-bottom:8px; }
.hg-tab { min-width:0;min-height:44px;padding:10px 4px;border:1px solid transparent;background:transparent;color:#abb2a1;font:600 .75rem/1.3 var(--font-body);cursor:pointer;touch-action:manipulation; }
.hg-tab[aria-selected="true"] { color:var(--volt);border-color:rgba(198,255,58,.4); }
.hg-tab:focus-visible,.hgd-handle:focus-visible,.hgr-target:focus-visible,.hgm-field:focus-visible { outline:2px solid var(--ink);outline-offset:3px; }
.hero-games .hero-game { min-height:calc(260px + min(79.55vw,382px)); }
.hero-games .hg-status { min-height:4.5em; }
.hero-games .hg-controls,.hero-games .hg-play-controls { gap:8px; }
.hgm-field { position:relative;margin-top:.25rem;width:100%;aspect-ratio:440/350;touch-action:pan-y; }
.hgm-art { display:block;width:100%;height:100%;pointer-events:none; }
.hgd-handle { position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;background:transparent;border:1px solid rgba(244,244,240,.16);border-radius:50%;touch-action:none;cursor:grab; }
.hgd-handle:active { cursor:grabbing; }
.hgd-handle:disabled { border-color:transparent;cursor:default; }
.hgr-field { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;gap:16px 8px;padding:10px 4px; }
.hgr-target { padding:0;border:0;min-width:64px;min-height:64px;width:100%;aspect-ratio:1;background:transparent;cursor:pointer;touch-action:manipulation; }
.hgr-target svg { width:100%;height:100%;max-width:110px;vertical-align:middle; }
.hgr-ring { stroke:rgba(244,244,240,.12);stroke-width:1; }
.hgr-cue { opacity:0; }
.hgr-target[data-active="true"] .hgr-ring { stroke:var(--volt);stroke-width:2;fill:rgba(198,255,58,.08); }
.hgr-target[data-active="true"] .hgr-cue { opacity:1; }
.hgr-target:disabled { cursor:default; }
.hgr-target:disabled svg { opacity:.65; }
@media(max-width:1100px) { .hero-games { justify-self:center; } }
@media(max-width:600px) {
 .hero-games { max-width:420px; }
 .hero-games .hero-game { min-height:calc(268px + (100vw - 48px)*.7955); }
 .hero-games .hg-controls { flex-wrap:wrap; }
 .hero-games .hg-book { margin-left:auto; }
 .hero-games .hg-pause { padding:.65rem .5rem; }
}
@media(max-width:359px) { .hero-games .hg-controls { align-items:flex-start; }.hero-games .hg-book { flex-basis:100%;margin-left:0; }.hero-games .hero-game { min-height:calc(316px + (100vw - 48px)*.7955); } }
.hero-games .hg-field { aspect-ratio:440/350; }
.hero-games .hg-art { display:block;height:100%; }

/* Endless challenges: quiet mode controls and a score readable while playing. */
.hgm-modes { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:1rem; }
.hgm-mode { min-width:0;min-height:44px;padding:8px 4px;border:1px solid var(--line);background:transparent;color:#abb2a1;font:600 .75rem/1.2 var(--font-body);cursor:pointer;touch-action:manipulation; }
.hgm-mode[aria-pressed="true"] { color:var(--volt);border-color:rgba(198,255,58,.45);background:rgba(198,255,58,.055); }
.hgm-mode:disabled { cursor:default;color:#838b78; }
.hgm-mode[aria-pressed="true"]:disabled { color:var(--volt);border-color:rgba(198,255,58,.25); }
.hgm-mode:focus-visible { outline:2px solid var(--ink);outline-offset:3px; }
.hgm-mode-note { min-height:1.5em;margin:.4rem 0 .2rem;font-size:.625rem;line-height:1.5;color:#929b86; }
.hgd-field .hgm-art { overflow:hidden; }
.hgm-scoreline { align-items:center;min-height:78px; }
.hgm-score { display:flex;align-items:baseline;gap:12px; }
.hgm-score strong { font:600 clamp(2.5rem,6vw,3.5rem)/1 var(--font-body);font-variant-numeric:tabular-nums;color:var(--volt); }
.hgm-progress { display:flex;flex-direction:column;align-items:flex-end;gap:8px; }
.hgm-lives { display:flex;align-items:center;gap:8px; }
.hgm-life-dots { display:flex;gap:6px; }
.hgm-life-dots i { font-style:normal;font-size:.7rem;color:var(--volt); }
.hgm-life-dots i[data-available="false"] { color:#5b6252; }