/* ============================================================
   HYPER TOAD — slice styles. Game-local only (no kit edits).
   Stage = .tz-game-surface (kit sizes it: web 16:9 card, app full-bleed).
   Everything below is absolutely positioned inside #ht-stage.
============================================================ */
/* self-hosted game font (variable Fredoka, weights 400–700). NEVER a CDN —
   same rule as three.js: a font-CDN stall must not break the game. */
@font-face {
  font-family: "Fredoka";
  src: url("./assets/fonts/fredoka.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
:root {
  --ht-ink: #eafff2;
  --ht-dim: #9fc4ad;
  --ht-glow: #5effc0;
  --ht-fire: #ff7a1f;
  --ht-danger: #ff4d5e;
  --ht-font: "Fredoka", system-ui, -apple-system, sans-serif;
}
/* every text node in the game inherits the custom font (no default font) */
#ht-stage, #ht-stage button, #ht-stage input { font-family: var(--ht-font); }

#ht-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 78vh;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(120% 100% at 50% 0%, #16331f 0%, #0c1a12 70%);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--ht-font);
}
/* app mode: full-bleed (kit hides web chrome) */
body.tz-app #ht-stage,
.tz-app-mode #ht-stage { aspect-ratio: auto; height: 100%; max-height: none; border-radius: 0; }

#game { position: absolute; inset: 0; }
#game canvas { display: block; width: 100% !important; height: 100% !important; }

/* ---------- HUD ---------- */
#ht-hud {
  position: absolute; inset: 0; pointer-events: none;
  padding: max(10px, env(safe-area-inset-top)) 14px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.ht-row { display: flex; align-items: center; gap: 10px; }
.ht-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(8, 20, 14, 0.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(94, 255, 192, 0.25); border-radius: 999px;
  padding: 5px 12px; color: var(--ht-ink); font-weight: 600; font-size: 14px;
}
.ht-chip .ic { font-size: 15px; }
.ht-chip b { color: var(--ht-glow); }
#ht-hearts { color: var(--ht-danger); letter-spacing: 2px; font-size: 18px; margin-left: auto; }
.ht-ic-btn {
  pointer-events: auto; width: 38px; height: 38px; border-radius: 50%; font-size: 16px; cursor: pointer; color: #eafff2;
  border: 1px solid rgba(126,224,158,.38);
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.30), transparent 55%),
    linear-gradient(180deg, rgba(62,124,78,.75), rgba(14,38,24,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 9px rgba(0,0,0,.42);
  display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent;
  transition: transform .08s, filter .12s;
}
.ht-ic-btn:hover { filter: brightness(1.12); }
.ht-ic-btn:active { transform: scale(.9); filter: brightness(.9); }

/* ---------- menu / panels / pause overlays ---------- */
.ht-overlay {
  position: absolute; inset: 0; z-index: 6; display: none;
  align-items: center; justify-content: center;
  background: rgba(4,12,8,0.55); backdrop-filter: blur(4px);
}
.ht-overlay.open { display: flex; animation: htPop .3s cubic-bezier(.2,1.3,.4,1); }
.ht-menu-card {
  background:
    radial-gradient(130% 80% at 50% -12%, rgba(94,255,192,.12), transparent 58%),
    linear-gradient(180deg, rgba(28,60,40,0.97), rgba(9,22,15,0.98));
  border: 1.5px solid rgba(126,232,166,0.34); border-radius: 22px; padding: 22px 20px 16px;
  width: min(86%, 332px); max-height: 90%; overflow-y: auto; text-align: center;
  box-shadow: 0 22px 56px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 26px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 10px;
}
.ht-title { font-size: clamp(30px,9vw,46px); font-weight: 900; line-height: 1; }
.ht-title .t1 { color: #ffd84a; } .ht-title .t2 { color: var(--ht-glow); }
.ht-sub { color: #eafff2; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin: -2px 0 6px; text-shadow: 0 1px 4px rgba(0,0,0,.7); opacity: .95; }
.ht-menu-btns { display: flex; flex-direction: column; gap: 9px; }
/* glossy gel buttons (CSS — scales to any width, no smear, contrast-safe).
   gloss lives in a background layer so it never washes out the label. */
.ht-mbtn {
  border: 1px solid rgba(126,224,158,.30); border-radius: 14px; padding: 13px 16px;
  font-weight: 700; font-size: 15px; color: #eafff2; cursor: pointer; text-align: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(60,122,76,.55), rgba(20,50,30,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 7px rgba(0,0,0,.34), 0 4px 11px rgba(0,0,0,.32);
  transition: transform .07s, filter .12s; -webkit-tap-highlight-color: transparent;
}
.ht-mbtn:hover { filter: brightness(1.12); }
.ht-mbtn:active { transform: scale(.96); filter: brightness(.95); }
.ht-mbtn-go {
  color: #06351d; border: 1px solid rgba(255,255,255,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #9dffce, #4ff0b6 60%, #2bd497);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 9px rgba(0,90,55,.4), 0 7px 20px rgba(94,255,192,.5);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.ht-panel-title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.ht-about-text { color: #cfe7d8; font-size: 13.5px; line-height: 1.6; text-align: left; margin: 2px 0 6px; }
.ht-foot { color: var(--ht-dim); font-size: 10px; letter-spacing: 1px; margin-top: 6px; }

/* ---------- level select (M2) ---------- */
.ht-levels-card { width: min(92%, 390px); }
.ht-levels-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-height: 52vh; overflow-y: auto; padding: 4px 2px; margin: 4px 0 8px; }
/* lily-pad level buttons (Codex art; tinted bg fallback if the PNG is missing) */
.ht-lv {
  aspect-ratio: 1; border: none; border-radius: 10px; font-weight: 800; font-size: 16px; cursor: pointer;
  color: #06351f; text-shadow: 0 1px 2px rgba(255,255,255,.55);
  background: rgba(120,200,120,.18) center/100% 100% no-repeat;
  background-image: url("./assets/ui/lilypad_btn.png"); -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center; transition: transform .07s;
}
.ht-lv:active { transform: scale(.9); }
.ht-lv.current { filter: drop-shadow(0 0 9px rgba(255,216,74,.95)); color: #06351f; }
.ht-lv.locked { background-image: url("./assets/ui/lilypad_locked.png"); color: #4a5f50; cursor: default; font-size: 14px; text-shadow: none; }
.ht-levels-banner { width: 100%; max-width: 340px; height: auto; margin: -4px auto 6px; display: block; }

/* hide gameplay HUD + controls unless actively playing (so the menu is clean) */
#ht-hud, .ht-actions, #ht-move-hint { transition: opacity .25s; }
#ht-stage:not(.ht-playing) #ht-hud,
#ht-stage:not(.ht-playing) .ht-actions,
#ht-stage:not(.ht-playing) #ht-move-hint { opacity: 0; pointer-events: none; }
#ht-level-tag { color: var(--ht-glow); font-weight: 800; }

/* ---------- shop / skins (M4) ---------- */
#ht-coin-chip b { color: #ffd84a; }
.ht-shop-card { width: min(90%, 360px); }
.ht-shop-bal { color: #ffd84a; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.ht-shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 6px 0 8px; max-height: 52vh; overflow-y: auto; }
.ht-skin { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ht-skin.selected { border-color: var(--ht-glow); box-shadow: 0 0 12px rgba(94,255,192,.35); }
.ht-skin-dot { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 2px 6px rgba(255,255,255,.45), 0 3px 8px rgba(0,0,0,.4); }
.ht-skin-name { font-weight: 700; font-size: 14px; color: #eafff2; }
.ht-skin-btn { border: none; border-radius: 10px; padding: 8px 10px; font-weight: 700; font-size: 12px; color: #06301d; background: linear-gradient(180deg,#8bffc4,var(--ht-glow)); cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent; }
.ht-skin-btn:disabled { background: rgba(255,255,255,.12); color: var(--ht-dim); cursor: default; }

.ht-bar {
  position: relative; height: 9px; border-radius: 999px; overflow: hidden;
  background: rgba(8, 20, 14, 0.6); border: 1px solid rgba(255,255,255,0.12);
}
.ht-bar > span { position: absolute; inset: 0; width: 0%; border-radius: 999px; transition: width .12s linear; }
#ht-hyper { width: 130px; }
#ht-hyper-fill { background: linear-gradient(90deg, #ffd84a, var(--ht-fire)); box-shadow: 0 0 10px var(--ht-fire); }
#ht-hyper.hot { border-color: var(--ht-fire); animation: htPulse .5s infinite alternate; }
@keyframes htPulse { to { box-shadow: 0 0 16px var(--ht-fire); } }
.ht-ghp-wrap { margin-left: auto; width: 150px; }
.ht-ghp-label { font-size: 10px; color: var(--ht-dim); text-align: right; letter-spacing: 1px; margin-bottom: 2px; }
#ht-ghp-fill { background: linear-gradient(90deg, #ff4d5e, #c06bff); box-shadow: 0 0 8px #c06bff; width: 100%; }

/* ---------- controls ---------- */
/* FLOATING joystick — positioned at the touch point by JS, centered via margin.
   Kept SUBTLE (faint) so it doesn't disturb the view; only visible while dragging. */
#ht-joy {
  position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px;
  border-radius: 50%; background: radial-gradient(circle, rgba(94,255,192,0.06), rgba(8,20,14,0.10));
  border: 1.5px solid rgba(94, 255, 192, 0.18); z-index: 4;
  display: none; pointer-events: none; opacity: 0; transition: opacity .12s;
}
#ht-joy.active { display: block; opacity: .5; }
/* never let the stick linger off the play state */
#ht-stage:not(.ht-playing) #ht-joy { display: none !important; opacity: 0 !important; }
#ht-move-hint {
  position: absolute; left: 0; right: 0; bottom: 26px; text-align: center;
  color: var(--ht-dim); font-size: 13px; letter-spacing: .5px; pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.6); animation: htHintPulse 1.6s infinite; transition: opacity .4s;
}
#ht-move-hint.gone { opacity: 0; }
@keyframes htHintPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
#ht-joy-nub {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #aeffd9, #2ea878);
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 2px 4px rgba(255,255,255,.4);
  transition: transform .04s linear;
}
.ht-actions { position: absolute; right: 16px; bottom: 22px; display: flex; flex-direction: column; gap: 14px; pointer-events: auto; }
.ht-btn {
  width: 84px; height: 84px; border-radius: 50%; border: none; color: #fff;
  font-weight: 800; letter-spacing: .3px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 2px 6px rgba(255,255,255,.25);
  -webkit-tap-highlight-color: transparent; touch-action: none; transition: transform .07s;
}
.ht-btn .em { font-size: 23px; line-height: 1; }
.ht-btn .lab { font-size: 9.5px; line-height: 1.05; text-align: center; text-transform: uppercase; opacity: .95; }
.ht-btn:active { transform: scale(.92); }
#ht-grab { background: radial-gradient(circle at 35% 30%, #ff8fa6, #e23d63); }
#ht-attack { background: radial-gradient(circle at 35% 30%, #ffd06a, #ff7a1f); }

/* ---------- flash / vignette feedback ---------- */
#ht-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#ht-flash.show { animation: htFlash .32s ease-out; }
#ht-flash.g.show { background: radial-gradient(circle, rgba(94,255,192,.18), transparent 60%); }
#ht-flash.a.show { background: radial-gradient(circle, rgba(255,216,74,.22), transparent 60%); }
#ht-flash.h.show { background: radial-gradient(circle, rgba(255,122,31,.28), transparent 55%); }
#ht-flash.d.show { background: radial-gradient(circle, rgba(255,77,94,.34), transparent 55%); box-shadow: inset 0 0 120px rgba(255,0,0,.5); }
@keyframes htFlash { from { opacity: 1; } to { opacity: 0; } }

/* ---------- banner (win/dead) ---------- */
#ht-banner {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; pointer-events: none;
  background: rgba(4, 12, 8, 0.55); backdrop-filter: blur(3px); text-align: center;
}
#ht-banner.show { display: flex; pointer-events: auto; animation: htPop .35s cubic-bezier(.2,1.4,.4,1); }
.ht-banner-main { font-size: clamp(30px, 7vw, 56px); font-weight: 900; color: #fff; text-shadow: 0 4px 22px rgba(0,0,0,.6); }
.ht-banner-sub { font-size: 14px; color: var(--ht-dim); letter-spacing: 1px; }
.ht-banner-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.ht-pill {
  border: 1px solid rgba(126,224,158,.3); border-radius: 999px; padding: 13px 26px; font-weight: 800; font-size: 15px;
  color: #eafff2; cursor: pointer; letter-spacing: .3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, rgba(60,122,76,.6), rgba(20,50,30,.85));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 7px rgba(0,0,0,.34), 0 5px 14px rgba(0,0,0,.34);
  -webkit-tap-highlight-color: transparent; transition: transform .07s, filter .12s;
}
.ht-pill:active { transform: scale(.94); filter: brightness(.95); }
.ht-pill-go {
  color: #06351d; border: 1px solid rgba(255,255,255,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 48%),
    linear-gradient(180deg, #9dffce, #4ff0b6 60%, #2bd497);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 9px rgba(0,90,55,.4), 0 7px 20px rgba(94,255,192,.5);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.ht-pill-go:hover { filter: brightness(1.07); }
#ht-banner.win .ht-banner-main { color: #aaffd5; text-shadow: 0 0 26px rgba(94,255,192,.7); }
#ht-banner.dead .ht-banner-main { color: #ff8a96; text-shadow: 0 0 26px rgba(255,77,94,.6); }
@keyframes htPop { from { transform: scale(.7); opacity: 0; } }

/* ---------- splash ---------- */
#ht-splash {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(120% 90% at 50% 28%, #2a4a6b 0%, #1d4029 45%, #0a1610 100%);
  transition: opacity .5s ease; color: var(--ht-ink);
}
#ht-splash.gone { opacity: 0; pointer-events: none; }
#ht-splash .logo { font-size: clamp(34px, 9vw, 62px); font-weight: 900; letter-spacing: 1px; }
#ht-splash .logo .t1 { color: #ffd84a; } #ht-splash .logo .t2 { color: var(--ht-glow); }
#ht-splash .tagline { color: var(--ht-dim); font-size: 13px; letter-spacing: 2px; }
/* themed loading bar + chill animated bits */
.ht-loadwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.ht-loadbar { width: min(58vw, 220px); height: 8px; border-radius: 999px; background: rgba(8,20,14,.7); border: 1px solid rgba(94,255,192,.25); overflow: hidden; }
.ht-loadbar > span { display: block; height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #ffd84a, var(--ht-fire)); box-shadow: 0 0 10px var(--ht-fire); transition: width .35s ease; }
.ht-loadtext { color: var(--ht-dim); font-size: 12px; letter-spacing: 1px; }
.ht-dots i { animation: htBlink 1.2s infinite; opacity: 0; }
.ht-dots i:nth-child(2) { animation-delay: .2s; } .ht-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes htBlink { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
.ht-fireflies { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ht-fireflies i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #d6ff8a; box-shadow: 0 0 8px 2px rgba(180,255,120,.7); opacity: .7; animation: htFly 6s infinite ease-in-out; }
.ht-fireflies i:nth-child(1){ left:14%; top:30%; animation-delay:0s } .ht-fireflies i:nth-child(2){ left:80%; top:24%; animation-delay:1.1s }
.ht-fireflies i:nth-child(3){ left:28%; top:70%; animation-delay:2.2s } .ht-fireflies i:nth-child(4){ left:68%; top:64%; animation-delay:.6s }
.ht-fireflies i:nth-child(5){ left:46%; top:18%; animation-delay:3.1s } .ht-fireflies i:nth-child(6){ left:58%; top:80%; animation-delay:1.7s }
@keyframes htFly { 0%,100% { transform: translate(0,0); opacity:.25 } 50% { transform: translate(14px,-18px); opacity:.9 } }
#ht-splash .toad { font-size: 56px; animation: htHop 1s infinite; }
@keyframes htHop { 0%,100% { transform: translateY(0) scale(1,1); } 35% { transform: translateY(-16px) scale(.9,1.12); } 60% { transform: translateY(0) scale(1.12,.88); } }

/* ---------- brand logo (Codex art; falls back to the text title) ---------- */
.ht-logo-img { width: min(86%, 290px); height: auto; margin: 2px auto 2px; display: block; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.ht-splash-logo { width: min(82%, 340px); height: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.55)); animation: htHop 1.6s infinite; }

/* ---------- HUD icons from the Codex UI kit ---------- */
.ht-ui-ic { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; display: inline-block; }
.ht-heart-ic { width: 20px; height: 20px; object-fit: contain; margin: 0 1px; vertical-align: middle; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
#ht-hearts { display: inline-flex; align-items: center; }

/* ---------- minimap (GDD) ---------- */
#ht-minimap {
  position: absolute; left: 14px; bottom: 92px; width: 76px; height: 76px;
  border-radius: 10px; border: 1.5px solid rgba(94,255,192,0.3);
  background: rgba(8,20,14,0.4); box-shadow: 0 4px 12px rgba(0,0,0,.4);
  pointer-events: auto; cursor: pointer; z-index: 3; opacity: .92; transition: opacity .25s;
}
#ht-minimap:active { transform: scale(.94); }
#ht-stage:not(.ht-playing) #ht-minimap { opacity: 0; pointer-events: none; }

/* ---------- big map (GDD 6.1) ---------- */
.ht-bigmap-card { width: min(94%, 384px); }
#ht-bigmap-cv {
  width: min(78vw, 320px); height: min(78vw, 320px); max-height: 54vh;
  border-radius: 14px; border: 1.5px solid rgba(94,255,192,0.3);
  background: rgba(8,20,14,0.5); margin: 6px auto 10px; display: block;
}

/* ---------- daily missions panel (GDD) ---------- */
.ht-missions-card, .ht-upgrade-card { width: min(92%, 384px); }
.ht-mi-hint { color: var(--ht-dim); font-size: 11px; margin: -4px 0 8px; }
.ht-mi-section { font-size: 11px; font-weight: 800; color: var(--ht-glow); letter-spacing: 1.5px; text-align: left; margin: 8px 2px 0; }
.ht-missions-grid, .ht-upgrade-grid { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px; max-height: 56vh; overflow-y: auto; }
.ht-mission, .ht-upg { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 8px 10px; }
.ht-mission.done { border-color: var(--ht-glow); box-shadow: 0 0 10px rgba(94,255,192,.25); }
.ht-upg.maxed { border-color: #ffd84a; }
.ht-mi-ic, .ht-up-ic { font-size: 21px; width: 28px; text-align: center; flex: none; }
.ht-mi-mid, .ht-up-mid { flex: 1; text-align: left; min-width: 0; }
.ht-mi-name, .ht-up-name { font-weight: 700; font-size: 13px; color: #eafff2; }
.ht-mi-bar { height: 6px; border-radius: 999px; background: rgba(0,0,0,.35); overflow: hidden; margin: 5px 0 2px; }
.ht-mi-bar > span { display: block; height: 100%; background: linear-gradient(90deg,#ffd84a,var(--ht-glow)); border-radius: 999px; }
.ht-mi-prog { font-size: 10px; color: var(--ht-dim); }
.ht-up-pips { display: flex; gap: 4px; margin-top: 6px; }
.ht-up-pips i { width: 15px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.16); }
.ht-up-pips i.on { background: linear-gradient(90deg,#ffd84a,var(--ht-fire)); }
.ht-mi-btn, .ht-up-btn { border: none; border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: 12px; color: #06301d; background: linear-gradient(180deg,#8bffc4,var(--ht-glow)); cursor: pointer; white-space: nowrap; flex: none; -webkit-tap-highlight-color: transparent; }
.ht-mi-btn:disabled, .ht-up-btn:disabled { background: rgba(255,255,255,.12); color: var(--ht-dim); cursor: default; }
.ht-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--ht-danger); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; vertical-align: middle; }

/* ---------- toast (secret unlocks / cheats) ---------- */
#ht-toast {
  position: absolute; left: 50%; bottom: 17%; transform: translate(-50%, 8px);
  background: rgba(8,20,14,0.92); border: 1px solid var(--ht-glow); color: #eafff2;
  font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 999px; z-index: 9;
  pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s; text-align: center; max-width: 82%;
}
#ht-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- story intro (GDD 4.1) ---------- */
.ht-story-card { width: min(90%, 360px); max-height: 94%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ht-story-img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 12px 36px rgba(0,0,0,.6); }
.ht-story-cap { color: #eafff2; font-size: 15px; line-height: 1.5; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.75); margin: 0 6px; }
.ht-story-actions { display: flex; gap: 12px; width: 100%; }
.ht-story-actions .ht-mbtn { flex: 1; }

/* secret-skin preview image in the Character shop */
.ht-skin-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 2px 6px rgba(255,255,255,.4), 0 3px 8px rgba(0,0,0,.4); }

/* ---------- premium sheen sweep on primary buttons (lovely, no asset) ---------- */
.ht-mbtn-go, .ht-pill-go { position: relative; overflow: hidden; }
.ht-mbtn-go::after, .ht-pill-go::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 38%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); pointer-events: none; animation: htSheen 3.4s ease-in-out infinite;
}
@keyframes htSheen { 0% { left: -60%; } 24% { left: 135%; } 100% { left: 135%; } }

/* ---------- inline SVG icons (no emoji) ---------- */
.ht-mbtn { display: flex; align-items: center; justify-content: center; gap: 9px; }
.ht-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ht-bic { width: 19px; height: 19px; flex: none; }
.ht-hic { width: 19px; height: 19px; display: block; }
.ht-bl { line-height: 1; }
#ht-boss-arrow { position: absolute; z-index: 5; pointer-events: none; display: none; color: #ff4d5e; filter: drop-shadow(0 0 5px rgba(255,77,94,.85)); }
#ht-boss-arrow .ht-arrow-svg { width: 30px; height: 30px; display: block; animation: htArrowPulse .8s infinite alternate; }
@keyframes htArrowPulse { to { transform: scale(1.18); } }
#ht-stage:not(.ht-playing) #ht-boss-arrow { display: none !important; }

@media (max-width: 520px) {
  .ht-btn { width: 70px; height: 70px; }
  #ht-attack { width: 60px; height: 60px; }
  #ht-joy { width: 108px; height: 108px; }
}