.hel-game { --ice:#67d7dc; --ember:#e48b50; --bone:#e7ddc1; max-width:1080px; margin:28px auto 0; color:var(--bone); }
.hel-back a { color:#90c5c5; }
.hel-hud { display:flex; flex-wrap:wrap; gap:10px 24px; padding:11px 16px; background:#121b22; border:2px solid #425d62; border-bottom:0; }
.hel-hud div { min-width:100px; display:grid; }
.hel-hud span,.hel-kicker { color:#75979a; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; }
.hel-hud strong { color:#d9ece5; font:700 .95rem/1.4 "Courier New",monospace; }
.hel-dash { margin-left:auto; }
.hel-auto { align-self:center; padding:7px 10px; border:1px solid #668286; color:#9eb6b4; background:#18272d; cursor:pointer; font:700 .72rem "Courier New",monospace; }
.hel-auto.is-active { color:#071416; border-color:#76d5cb; background:#76d5cb; box-shadow:0 0 12px #65d1c955; }
.hel-stage { position:relative; overflow:hidden; background:#091116; border:2px solid #425d62; box-shadow:0 18px 45px #0008; }
#helCanvas { display:block; width:100%; aspect-ratio:16/9; image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none; }
.hel-announcement { position:absolute; top:12%; left:50%; margin:0; transform:translateX(-50%); color:#e9d9a9; text-shadow:0 2px 0 #000; font:700 clamp(1rem,3vw,1.7rem) "Courier New",monospace; pointer-events:none; opacity:0; transition:opacity .2s; }
.hel-announcement.is-visible { opacity:1; }
.hel-overlay { position:absolute; z-index:4; inset:0; display:grid; place-items:center; padding:18px; background:#071015dd; }
.hel-overlay[hidden] { display:none; }
.hel-panel { width:min(590px,100%); max-height:95%; overflow:auto; padding:24px; background:#152129; border:2px solid #658184; box-shadow:8px 8px 0 #05090caa,inset 0 0 0 2px #26383d; }
.hel-panel-wide { width:min(850px,100%); }
.hel-panel h3 { margin:4px 0 12px; color:#e7cf96; font:700 clamp(1.3rem,4vw,2rem) "Courier New",monospace; }
.hel-panel p { line-height:1.5; }
.hel-controls { color:#8fa5a4; font-size:.85rem; }
.hel-meta { color:#70d2d4; }
.hel-shop { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.hel-shop button,.hel-upgrades button { color:#e9e2cf; background:#20323a; border:1px solid #658184; cursor:pointer; }
.hel-shop button { padding:7px 10px; }
.hel-shop button:disabled { opacity:.45; cursor:not-allowed; }
.hel-upgrades { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.hel-upgrades button { min-height:135px; padding:16px; text-align:left; }
.hel-upgrades button:hover,.hel-upgrades button:focus { background:#2a454a; border-color:#bcd9ce; transform:translateY(-2px); }
.hel-upgrades strong { display:block; margin-bottom:8px; color:#f0c67b; font:700 1rem "Courier New",monospace; }
.hel-summary { display:grid; grid-template-columns:1fr auto; gap:5px 20px; padding:12px; background:#0d171c; }
.hel-summary dt { color:#8da8a6; }.hel-summary dd { margin:0; color:#e9cf92; font-family:"Courier New",monospace; }
.hel-touch { position:absolute; z-index:3; inset:auto 14px 12px; display:none; justify-content:space-between; align-items:end; pointer-events:none; }
.hel-touch button,.hel-stick { pointer-events:auto; touch-action:none; }
.hel-touch button { width:72px; height:55px; margin-left:7px; border:1px solid #85aaab; border-radius:50%; color:#e8e4d6; background:#17272bd9; }
.hel-stick { position:relative; width:92px; height:92px; margin-right:auto; border:1px solid #78999a; border-radius:50%; background:#102025aa; }
.hel-stick i { position:absolute; left:28px; top:28px; width:34px; height:34px; border-radius:50%; background:#84aaabbb; }
@media (pointer:coarse),(max-width:700px) { .hel-touch { display:flex; }.hel-upgrades { grid-template-columns:1fr; }.hel-upgrades button { min-height:80px; }.hel-hud { gap:6px 12px; }.hel-hud div { min-width:75px; }.hel-dash { margin-left:0; } }
@media (prefers-reduced-motion:reduce) { .hel-announcement { transition:none; }.hel-upgrades button:hover { transform:none; } }