.dna-panel { position: fixed; z-index: 14; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: 188px; padding: 8px 11px; background: rgba(10, 20, 34, .94); color: #d6f5f5; font: 700 11px/1.4 Manrope, sans-serif; pointer-events: none; }
.dna-panel[hidden] { display: none; }
.dna-phase { display: block; font-size: 9px; color: #ffd45e; letter-spacing: .12em; }
.dna-momentum { display: block; }
.dna-clock { height: 3px; margin: 5px 0; background: #263449; }
.dna-clock i { display: block; height: 100%; background: #5cf2dc; transform-origin: left; }
.dna-hint { display: block; font-size: 8px; color: #b6c9d8; }
.dna-feedback { position: fixed; z-index: 17; left: 50%; top: 170px; max-width: 88vw; padding: 8px 14px; background: rgba(10, 20, 34, .94); border-left: 2px solid #5cf2dc; color: #d6f5f5; font: 800 13px Manrope, sans-serif; pointer-events: none; opacity: 0; transform: translate(-50%, -4px); transition: opacity .12s, transform .12s; }
.dna-feedback.active { opacity: 1; transform: translate(-50%, 0); }
.dna-result { font: 700 12px/1.6 Manrope, sans-serif; color: #b6c9d8; }
.dna-failure { font: 700 12px/1.5 Manrope, sans-serif; color: #b6c9d8; }
.dna-another { display: inline-block; padding: 10px; color: #b6c9d8; font: 700 12px Manrope, sans-serif; }
.dna-sound { position: fixed; z-index: 60; bottom: 8px; left: 50%; transform: translateX(-50%); padding: 7px 12px; border: 1px solid #365166; background: #101b2e; color: #d6f5f5; font: 700 10px Manrope, sans-serif; cursor: pointer; }
@media (hover:none), (pointer:coarse) {
  .dna-panel { bottom: max(145px, calc(env(safe-area-inset-bottom) + 130px)); width: 150px; font-size: 10px; }
  .dna-sound { bottom: max(108px, calc(env(safe-area-inset-bottom) + 92px)); }
}
@media (max-height:500px) {
  .dna-panel { bottom: 95px; width: 140px; padding: 5px 8px; }
  .dna-hint { display: none; }
  .dna-feedback { top: 100px; }
  .dna-sound { bottom: 8px; }
  #gameOverScreen .dna-failure { grid-column: 1; grid-row: 3; margin: 0; font-size: 10px; }
  #gameOverScreen .final-stats { grid-row: 4 / 9; }
  #gameOverScreen .dna-result { grid-column: 2; grid-row: 4; margin: 0; font-size: 10px; }
  #gameOverScreen .dna-another { grid-column: 2; grid-row: 5; padding: 4px; font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) { .dna-feedback { transition: none; } }

body[data-hype-game] { --hype-cyan: #5cf2dc; --hype-gold: #ffd45e; --hype-frame: rgba(137, 190, 211, .24); }
body[data-hype-game] :is(.hud-pill, .hud-stat, .objective, .objective-panel, .vitals, .timer) { border-radius: 3px; border-color: var(--hype-frame); background-color: rgba(7, 15, 29, .94); }
body[data-hype-game] :is(.panel, .card, .pause-card, .result-card) { border-color: var(--hype-frame); border-radius: 3px; }
body[data-hype-game] :is(.panel, .card, .pause-card, .result-card) { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: inset 0 2px rgba(92, 242, 220, .35); }
body[data-hype-game] :is(.result-card, .pause-card, #gameOverScreen, #pauseScreen) h1 { font-family: 'Barlow Condensed', sans-serif; }
body[data-hype-game].victory-flash .game-shell:after { display: none; }
body[data-hype-game] :is(#restartButton, #replay, #replay-button) { min-height: 48px; color: #06131b; background: var(--hype-cyan); border: 0; border-radius: 2px; font: 800 22px/1 'Barlow Condensed', sans-serif; letter-spacing: .08em; box-shadow: inset 0 -3px rgba(4, 34, 40, .18); }
body[data-hype-game] :is(#restartButton, #replay, #replay-button):focus-visible { outline: 2px solid var(--hype-gold); outline-offset: 5px; }
body[data-hype-game] :is(#restartButton, #replay, #replay-button):hover { background: #a4ffef; }
body[data-hype-game] :is(.final-stats b, #result-score) { font-family: 'Barlow Condensed', sans-serif; }
body[data-hype-game="runner"] .result-grid p:nth-child(3), body[data-hype-game="runner"] .result-grid p:nth-child(4) { display: none; }
#distancePill { font-size: 10px; white-space: nowrap; }
#hypeDistance { color: var(--hype-cyan); font: 800 17px/1 'Barlow Condensed', sans-serif; }
.chaos-score-stat small { color: #95aebe; font: 800 8px Manrope, sans-serif; letter-spacing: .07em; }
.chaos-score-stat span { color: var(--hype-gold); font: 800 19px/1 'Barlow Condensed', sans-serif; }
.dna-panel.hype-status { position: relative; inset: auto; z-index: auto; flex: 0 1 120px; align-self: stretch; width: 120px; min-width: 96px; padding: 6px 9px; border: 1px solid var(--hype-frame); border-left: 2px solid var(--hype-cyan); border-radius: 3px; background: rgba(7, 15, 29, .94); font: 800 10px/1.2 Manrope, sans-serif; }
.hype-status .dna-phase { overflow: hidden; max-width: 116px; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; color: #95aebe; }
.hype-status .dna-momentum { white-space: nowrap; margin-top: 3px; font: 800 17px/1 'Barlow Condensed', sans-serif; letter-spacing: .04em; }
.hype-status .dna-clock { height: 2px; margin: 4px 0; }
.hype-status .dna-hint { display: block; white-space: nowrap; color: #91a7b8; font: 700 7px/1 Manrope, sans-serif; letter-spacing: .07em; }
.hype-status[data-tier="3"], .hype-status[data-tier="4"] { border-left-color: var(--hype-gold); }
.hype-status[data-tier="3"] .dna-momentum, .hype-status[data-tier="4"] .dna-momentum { color: var(--hype-gold); }
.dna-feedback.hype-callout { box-sizing: border-box; z-index: 13; width: min(252px, calc(100vw - 32px)); max-width: none; min-height: 54px; padding: 10px 14px; border: 0; border-left: 3px solid var(--hype-cyan); border-radius: 2px; background: linear-gradient(105deg, rgba(7, 15, 29, .93), rgba(7, 15, 29, .72)); color: #ebfbff; text-align: center; white-space: nowrap; font: italic 800 32px/1 'Barlow Condensed', sans-serif; letter-spacing: .025em; text-shadow: 1px 0 rgba(92, 242, 220, .55); transform: translateX(-50%); transition: none; opacity: 0; pointer-events: none; }
.hype-callout[data-priority="3"], .hype-callout[data-priority="4"] { border-left-color: var(--hype-gold); color: var(--hype-gold); }
.hype-callout.active { animation: hype-runner var(--hype-duration, 650ms) ease-out both; }
.hype-callout[data-game="chaos"].active { animation-name: hype-chaos; }
.hype-callout[data-game="escape"].active { animation-name: hype-escape; font-style: normal; letter-spacing: .05em; }
.hype-mastery { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--hype-frame); border-left: 3px solid var(--hype-gold); border-radius: 3px; background: rgba(7, 15, 29, .86); }
.hype-mastery[hidden] { display: none; }
.hype-mastery > span { grid-row: 1; color: #95aebe; font: 800 9px/1.2 Manrope, sans-serif; letter-spacing: .1em; }
.hype-mastery > strong { grid-row: 2; color: #eefbff; font: 800 32px/1 'Barlow Condensed', sans-serif; }
.hype-mastery > strong:first-of-type { color: var(--hype-gold); }
.hype-mastery .hype-best { grid-column: 1 / -1; margin-top: 4px; color: #95aebe; font: 700 8px/1.3 Manrope, sans-serif; letter-spacing: .07em; }
@keyframes hype-runner { 0% { opacity: 0; transform: translate(-58%, 0) scale(.97); } 14% { opacity: 1; transform: translate(-50%, 0) scale(1.025); } 25%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-44%, 0) scale(.99); } }
@keyframes hype-chaos { 0% { opacity: 0; transform: translate(-50%, 2px) scale(.96); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.035); } 28%, 76% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -2px) scale(.98); } }
@keyframes hype-escape { 0% { opacity: 0; transform: translate(-50%, 3px) scale(.995); } 12%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -2px) scale(.995); } }
@keyframes hype-reduced { 0% { opacity: 0; } 14%, 76% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 600px) {
  .dna-panel.hype-status { flex-basis: 98px; min-width: 82px; width: 98px; padding: 5px 7px; }
  .hype-status .dna-phase { max-width: 86px; }
  .dna-feedback.hype-callout { font-size: 27px; }
  body[data-hype-game="chaos"] .hud, body[data-hype-game="escape"] .hud { flex-wrap: wrap; }
  body[data-hype-game="chaos"] .hype-status { margin-left: auto; }
  body[data-hype-game="chaos"] .hud .vitals { position: static; flex: 1 1 auto; width: auto; }
  body[data-hype-game="escape"] .hype-status { display: grid; grid-template-columns: 1fr auto; flex: 1 1 100%; min-height: 32px; }
  body[data-hype-game="escape"] .hype-status .dna-phase { display: none; }
  body[data-hype-game="escape"] .hype-status .dna-momentum, body[data-hype-game="escape"] .hype-status .dna-hint { grid-row: 1; align-self: center; margin: 0; }
  body[data-hype-game="escape"] .hype-status .dna-clock { grid-row: 2; grid-column: 1 / -1; margin: 4px 0 0; }
  body[data-hype-game="escape"] .system-strip { top: max(151px, calc(env(safe-area-inset-top) + 139px)); }
  body[data-hype-game="escape"] #message { top: max(170px, calc(env(safe-area-inset-top) + 158px)); }
}
@media (max-height: 500px) {
  .dna-panel.hype-status { padding: 4px 7px; min-width: 86px; }
  .hype-status .dna-phase { display: none; }
  .dna-feedback.hype-callout { min-height: 38px; padding: 7px 12px; font-size: 24px; }
  .hype-mastery { padding: 7px 10px; margin: 6px 0; gap: 3px 12px; }
  .hype-mastery > strong { font-size: 25px; }
  #gameOverScreen .hype-mastery { grid-column: 2; grid-row: 5 / 7; }
  #gameOverScreen .dna-another { grid-row: 7; }
}
@media (prefers-reduced-motion: reduce) {
  .hype-callout.active, .hype-callout[data-game].active { animation-name: hype-reduced; transform: translateX(-50%); text-shadow: none; }
}