body.playing #hud {
  top: 16px;
  left: 16px;
  right: 16px;
  gap: 18px;
}
.hud-block {
  min-width: 268px;
  max-width: 360px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(7,12,20,.78));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  padding: 12px 14px 13px;
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
}
.hud-ident { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hud-avatar {
  width: 38px; height: 38px; border-radius: 12px; flex: 0 0 38px;
  background:
    radial-gradient(circle at 50% 60%, var(--tint, #7ee7ff), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(0,0,0,.2));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 16px rgba(126,231,255,.28);
}
.hud-kicker {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9ad7ff;
  margin-bottom: 2px;
}
.hud-name { color: #f7fbff; }
.hud-meta, #hud-world, #hud-evo, #hud-combo { color: #c9d7e8; }
#hud-world {
  font-family: Fredoka, sans-serif;
  font-size: 16px;
  color: #fff;
  margin-top: 0;
}
.bar-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.bar-lab {
  width: 22px;
  font-size: 9px;
  letter-spacing: .12em;
  font-weight: 800;
  color: #8eb4d0;
}
.bar { flex: 1; height: 11px; margin-top: 0; }
.bar i { transition: width .18s ease; }
.hud-block.hurt .bar.hp i { animation: hpPulse .7s ease infinite; }
.form-pips { display: flex; gap: 6px; margin-top: 8px; justify-content: flex-end; }
.form-pips b {
  width: 10px; height: 10px; border-radius: 50%;
  background: #1b2430; border: 1px solid #3a4658;
}
.form-pips b.on {
  background: linear-gradient(90deg, #7ee7ff, #ffe66a);
  border-color: #c9f4ff;
  box-shadow: 0 0 10px rgba(126,231,255,.55);
}
.form-pips b.active {
  width: 13px;
  height: 13px;
  transform: scale(1.15);
  border-color: #fff;
  box-shadow: 0 0 14px rgba(255,255,255,.65), 0 0 10px currentColor;
  filter: brightness(1.25);
}
#top-actions {
  z-index: 12;
}
#top-actions button {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(8,12,20,.72));
  letter-spacing: .08em;
  padding: 9px 13px;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  transition: transform .16s ease, border-color .16s ease, color .16s ease;
}
#top-actions button:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
}
#boss-wrap {
  top: 64px;
  width: min(540px, 58vw);
  padding: 10px 14px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(40,8,14,.82), rgba(8,6,10,.86));
  border: 1px solid rgba(255,90,120,.42);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.boss-label {
  letter-spacing: .18em;
  color: #ffd0d8;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(0,0,0,.7);
}
#combo-chip {
  top: 128px;
  font: 800 34px Fredoka, sans-serif;
  color: #ffe66a;
  text-shadow: 0 8px 24px rgba(255, 210, 80, .45), 0 2px 0 #000, 0 0 12px #000;
}
#combo-chip.show { transform: translateX(-50%) scale(1.06); }
body.boss-fight #combo-chip { top: 168px; }
#prompt {
  bottom: 96px;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(14, 28, 40, .82), rgba(8, 12, 22, .82));
  border: 1px solid rgba(126,231,255,.35);
  font-size: 13px;
  color: #d7f4ff;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.ability-slot {
  min-width: 156px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(8,12,20,.78));
  border-radius: 16px;
  padding: 10px 12px 11px;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.ability-slot .key { font-weight: 800; color: #eef8ff; }
.ability-slot .cd { height: 5px; border-radius: 99px; }
.ability-slot .cd i { box-shadow: 0 0 8px #7ee7ff88; }
@keyframes hpPulse { 50% { filter: brightness(1.25); } }

@media (max-width: 820px) {
  .hud-avatar { width: 30px; height: 30px; flex-basis: 30px; }
  #ability-bar { bottom: 86px; }
  .ability-slot { min-width: 104px; padding: 8px; }
  body.playing #hud { top: 44px; }
  body.boss-fight #combo-chip { top: 132px; }}


/* ============================================================================
   OHANA V37 · COMBAT FLOW + SIGNATURE U
   ============================================================================ */
#combo-chip.flow::after{
  content:attr(data-flow);
  display:block;
  margin-top:2px;
  color:#dff7ff;
  font:900 8px/1 Outfit,sans-serif;
  letter-spacing:.18em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 2px 10px #000;
}
#combo-chip[data-flow="OHANA FLOW"]::after{color:#fff0a6;text-shadow:0 0 14px rgba(255,225,120,.55),0 2px 10px #000}
.ability-slot[data-supreme="1"]{
  position:relative;
  min-width:176px;
  border-color:color-mix(in srgb,var(--abil,#ffd84a) 62%,rgba(255,255,255,.12));
  background:
    radial-gradient(circle at 14% 20%,color-mix(in srgb,var(--abil,#ffd84a) 18%,transparent),transparent 46%),
    linear-gradient(180deg,rgba(255,255,255,.1),rgba(8,12,20,.86));
  box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 24px color-mix(in srgb,var(--abil,#ffd84a) 10%,transparent);
  overflow:hidden;
}
.ability-slot[data-supreme="1"]::before{
  content:"SUPREMA";
  position:absolute;right:8px;top:6px;
  color:color-mix(in srgb,var(--abil,#ffd84a) 72%,white);
  font:900 6px/1 Outfit,sans-serif;letter-spacing:.18em;
}
.ability-slot[data-supreme="1"] .key{
  color:#fff4b1;
  text-shadow:0 0 10px color-mix(in srgb,var(--abil,#ffd84a) 72%,transparent);
}
.ability-slot[data-supreme="1"]:not(.cooling){
  animation:v37-u-ready 2.4s ease-in-out infinite;
}
.touch-btn.special-u{
  position:relative;
  border-color:rgba(255,222,105,.5)!important;
  background:
    radial-gradient(circle at 50% 36%,rgba(255,232,130,.2),transparent 56%),
    rgba(10,14,24,.78)!important;
  color:#fff4b0!important;
  box-shadow:0 0 20px rgba(255,216,74,.12)!important;
}
.touch-btn.special-u:not(.cooling):not(.off){animation:v37-u-ready 2.4s ease-in-out infinite}
.touch-btn.special-u.off{opacity:.38!important;filter:saturate(.3)}
@keyframes v37-u-ready{
  0%,100%{filter:brightness(1);box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 12px color-mix(in srgb,var(--abil,#ffd84a) 8%,transparent)}
  50%{filter:brightness(1.12);box-shadow:0 12px 32px rgba(0,0,0,.32),0 0 28px color-mix(in srgb,var(--abil,#ffd84a) 22%,transparent)}
}
@media(max-width:820px){
  .ability-slot[data-supreme="1"]{min-width:118px}
  .ability-slot[data-supreme="1"]::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .ability-slot[data-supreme="1"],.touch-btn.special-u{animation:none!important}
}

/* V97: meaningful screen-reader updates, without an offscreen focus trap. */
.game-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
@media (forced-colors: active) {
  body.playing #hud .hud-block,
  body.playing #boss-wrap,
  body.playing #touch .touch-btn {
    background: Canvas !important;
    border: 2px solid CanvasText !important;
    color: CanvasText !important;
    box-shadow: none !important;
  }
  body.playing #hud .bar {
    border: 1px solid CanvasText !important;
  }
}

/* V314 · Tiny bounded U affinity gauge, separate from evolution crystals. */
.u-exp-track{
  width:min(100%,235px);height:4px;margin:3px 0 5px;
  overflow:hidden;border-radius:999px;
  background:rgba(229,218,188,.23);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.15);
}
.u-exp-track i{
 display:block;height:100%;width:0%;border-radius:inherit;
 background:linear-gradient(90deg,#8cebd8,#ffe0a5,#ffb4da);
 transition:width .2s ease-out;
}
@media(prefers-reduced-motion:reduce){.u-exp-track i{transition:none}}
/* V400 · A useful, calm pause with room to breathe on small screens. */
#pause-overlay .panel.slim {width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 36px);overflow:auto;padding:clamp(22px,4vw,36px);text-align:left;background:radial-gradient(ellipse at 100% 0,rgba(113,91,179,.25),transparent 65%),#101c2a;border:1px solid #a8d8e533;border-radius:28px;box-shadow:0 24px 90px #0008;}
.pause-kicker {color:#a6deea;font-size:10px;letter-spacing:.18em;font-weight:800;margin:0 0 10px;}
#pause-title {font:600 clamp(25px,5vw,34px) Fredoka,sans-serif;margin:0;color:#fff2c2;}
.pause-hero {color:#c4b6f8;font-weight:700;margin:9px 0 22px;}
.pause-mission {padding:18px;border-radius:16px;background:#a4e2d30c;border:1px solid #a4e2d325;}
.pause-mission span {font-size:10px;letter-spacing:.13em;font-weight:800;color:#9ce2cb;}
.pause-mission p {margin:8px 0 0;line-height:1.55;color:#eef7fa;}
.pause-stats {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0;}
.pause-stats div {border-left:2px solid #cbb1f34d;padding-left:12px;}
.pause-stats dt {font-size:12px;color:#a8bdcc;}
.pause-stats dd {margin:5px 0 0;font:600 23px Fredoka,sans-serif;color:#fff2c2;}
.pause-controls {display:flex;flex-wrap:wrap;gap:12px 20px;font-size:12px;color:#afc6d5;margin-bottom:24px;}
#pause-overlay .cta {min-height:48px;}
#pause-overlay #btn-resume {width:100%;margin:0 0 10px;}
#pause-overlay #btn-quit {width:100%;margin:0;}
#help .panel {max-height:calc(100dvh - 36px);overflow:auto;}
#help ul {list-style:none;padding:0;display:grid;gap:10px;}
#help li {padding:12px 16px;background:#ffffff07;border:1px solid #ffffff12;border-radius:12px;line-height:1.5;}
#help .help-controls {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:18px 0;}
.help-controls div {padding:10px 12px;border-radius:10px;background:#a6deea0c;color:#dcebf5;font-size:13px;}
.help-controls kbd {display:inline-block;margin-right:6px;color:#fff2c2;}
@media(max-width:480px){#help .help-controls{grid-template-columns:1fr;} .pause-stats{gap:6px;} .pause-stats dd{font-size:20px;} .pause-controls{gap:10px;}}
.pause-settings {border:1px solid #a6deea25;border-radius:16px;padding:14px 16px;margin:0 0 22px;color:#dcebf5;}
.pause-settings legend {padding:0 8px;font-size:12px;font-weight:700;color:#a6deea;}
.pause-settings label {display:flex;align-items:center;gap:10px;font-size:13px;}
.pause-settings output {margin-left:auto;color:#fff2c2;font-variant-numeric:tabular-nums;}
#pause-music {width:100%;min-height:32px;accent-color:#f3cf83;}
.pause-settings .pause-gentle {display:grid;grid-template-columns:20px 1fr;gap:3px 10px;margin-top:6px;}
.pause-gentle input {grid-row:span 2;width:18px;height:18px;accent-color:#aeecd5;}
.pause-gentle small {grid-column:2;color:#9db6c8;font-size:11px;}
body.gentle-motion .ability-slot,body.gentle-motion .touch-btn,body.gentle-motion #combo-value {animation:none!important;transition:none!important;}