@charset "UTF-8";
:root {
  color-scheme:dark;
  --bg:#090d12;
  --panel:#10171c;
  --line:#273037;
  --muted:#829095;
  --text:#e9f0e9;
  --lime:#c0f96b;
  --orange:#ff965c;
  --mono:"Cascadia Code","Consolas","Courier New",monospace;
  --display:"Bahnschrift","Arial Narrow","Arial",sans-serif
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--display);
  font-size:14px;
  min-width:320px;
  -webkit-font-smoothing:antialiased
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% -20%,#52674c18,transparent 55%),radial-gradient(ellipse at 95% 80%,#64341e0c,transparent 35%);
  z-index:-1
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button:disabled {
  opacity:.3;
  cursor:default
}

button:focus-visible,a:focus-visible,.arena:focus-visible {
  outline:2px solid var(--lime);
  outline-offset:5px
}

button {
  touch-action:manipulation
}

button svg {
  pointer-events:none
}

button:active:not(:disabled) {
  transform:translateY(1px)
}

[hidden] {
  display:none!important
}

.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.icon {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

.site-shell {
  max-width:1392px;
  padding:0 40px;
  margin:auto
}

.masthead {
  height:91px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #ffffff0f
}

.brand {
  display:flex;
  gap:13px;
  align-items:center;
  color:var(--text);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  letter-spacing:2.2px
}

.brand-mark {
  width:35px;
  height:35px;
  fill:none;
  stroke:var(--lime);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round
}

.brand-slash {
  color:var(--lime);
  padding:0 3px
}

.brand-edition {
  display:block;
  font:8px var(--mono);
  letter-spacing:2.1px;
  color:#7c888a;
  margin-top:5px
}

.masthead-right {
  display:flex;
  align-items:center;
  gap:24px
}

.system-status {
  display:flex;
  align-items:center;
  gap:8px;
  color:#8f9d96;
  font:9px var(--mono);
  letter-spacing:1.5px
}

.system-status i,.lime-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 10px #baff4940
}

.header-divider {
  width:1px;
  height:19px;
  background:var(--line)
}

.sound-button {
  display:flex;
  align-items:center;
  gap:9px;
  font:10px var(--mono);
  letter-spacing:1px;
  background:transparent;
  border:0;
  padding:9px 0 9px 9px;
  color:#a4b0ad;
  transition:color .15s
}

.sound-button:hover {
  color:var(--lime)
}

.sound-button .icon {
  width:16px;
  height:16px
}

.hero {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:32px 0 29px;
  gap:20px
}

.eyebrow {
  font:9px var(--mono);
  letter-spacing:2px;
  color:#9ea9a0;
  margin:0 0 13px;
  display:flex;
  align-items:center;
  gap:11px
}

.eyebrow>span:first-child {
  color:var(--lime)
}

h1 {
  font-size:clamp(31px,4.35vw,66px);
  line-height:1.05;
  letter-spacing:-2.2px;
  font-weight:700;
  margin:0;
  white-space:nowrap
}

.title-divider {
  color:#46544c;
  font-size:.74em;
  letter-spacing:-7px;
  margin:0 22px 0 16px;
  font-weight:400;
  vertical-align:4px
}

.inferno-word {
  color:var(--orange);
  font-size:.73em;
  letter-spacing:1.2px
}

.hero-subtitle {
  color:#8e9999;
  font-size:12px;
  letter-spacing:.2px;
  margin:11px 0 0
}

.hero-subtitle>span {
  color:#b4beb7
}

.hero-index {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:7px;
  font:8px var(--mono);
  letter-spacing:1.7px;
  color:#73817b;
  padding-top:9px;
  flex-shrink:0
}

.mini-bars {
  display:flex;
  gap:3px;
  height:16px;
  align-items:flex-end;
  margin-top:4px
}

.mini-bars i {
  display:block;
  width:3px;
  background:#8da87555;
  height:5px
}

.mini-bars i:nth-child(2n) {
  height:10px
}

.mini-bars i:nth-child(3n) {
  height:15px
}

.mini-bars i:nth-child(4n) {
  height:8px
}

.game-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:22px;
  align-items:stretch
}

.arena-shell {
  border:1px solid #354236;
  background:#0d1418;
  min-width:0;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 0 0 4px #acff3902,0 12px 70px #00000038;
  position:relative
}

.arena-shell::before {
  content:"";
  position:absolute;
  top:0;
  left:3%;
  right:45%;
  height:1px;
  background:linear-gradient(90deg,transparent,#ceff8b90,transparent);
  z-index:5
}

.arena-toolbar {
  height:44px;
  background:linear-gradient(90deg,#14201b70,#0e151a);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 17px;
  border-bottom:1px solid #28322b
}

.arena-identity {
  display:flex;
  align-items:center;
  gap:9px;
  font:9px var(--mono);
  letter-spacing:1.3px;
  color:#c1d0ba
}

.state-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 9px #b5f96488
}

.state-dot.playing {
  animation:breathe 2.5s ease-in-out infinite
}

.state-dot.paused {
  background:var(--orange);
  box-shadow:0 0 9px #ff965c55
}

.state-dot.dead {
  background:#ff746d;
  box-shadow:0 0 9px #ff746d55
}

.arena-divider {
  color:#3a4941;
  margin:0 5px
}

.sector {
  font-size:8px;
  color:#77867f;
  letter-spacing:1px
}

.arena-tools {
  display:flex;
  align-items:center;
  gap:13px
}

.timer {
  font:10px var(--mono);
  letter-spacing:1px;
  color:#a0ada6;
  min-width:37px
}

.tool-divider {
  width:1px;
  height:14px;
  background:#29352f;
  margin-right:0
}

.icon-button {
  background:none;
  border:0;
  padding:6px;
  display:grid;
  place-items:center;
  color:#8e9f94;
  transition:color .15s,background .15s;
  border-radius:3px
}

.icon-button .icon {
  width:15px;
  height:15px
}

.icon-button:hover:not(:disabled) {
  color:var(--lime);
  background:#bfff3f0b
}

.arena {
  position:relative;
  aspect-ratio:1.6;
  isolation:isolate;
  touch-action:none;
  outline-offset:-3px!important;
  overflow:hidden
}

canvas {
  width:100%;
  height:100%;
  display:block
}

.arena-vignette {
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 85px #00000035;
  z-index:1
}

.arena-footer {
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 17px;
  border-top:1px solid #28322b;
  font:8px var(--mono);
  letter-spacing:1.15px;
  color:#84957f;
  background:#0e1619
}

.arena-footer>span:first-child {
  display:flex;
  align-items:center;
  gap:9px
}

.lime-dot {
  width:4px;
  height:4px
}

.arena-dimensions {
  color:#a0ac9a;
  font-size:8px
}

.arena-dimensions span {
  color:#53675b;
  margin-left:4px
}

.overlay {
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  transition:opacity .3s,visibility .3s;
  background:#09101580;
  overflow:hidden
}

.overlay.is-hidden {
  opacity:0;
  visibility:hidden;
  pointer-events:none
}

.intro-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:60% 45%;
  opacity:.83;
  transition:opacity .3s;
  pointer-events:none
}

.intro-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#071014f5 0%,#071014ce 25%,#07101438 65%,#07101405),linear-gradient(0deg,#080e15b5,transparent 25%,transparent 75%,#080e1520)
}

.overlay-content {
  z-index:1;
  margin:0 0 0 5.5%;
  width:70%;
  padding:20px 0
}

.overlay .eyebrow {
  font-size:8px;
  letter-spacing:2px;
  margin-bottom:21px;
  color:#b3c9a7
}

.tiny-cross {
  font-size:17px;
  font-weight:400;
  line-height:10px
}

.overlay h2 {
  font-size:clamp(28px,3.4vw,53px);
  letter-spacing:-1.3px;
  line-height:1.12;
  font-weight:700;
  margin:0 0 19px;
  color:#f3f5ec
}

.overlay h2 span {
  color:var(--lime)
}

.overlay-content>p:not(.eyebrow) {
  font-size:12px;
  line-height:1.8;
  color:#a8b3ac;
  margin:0 0 26px;
  font-weight:400
}

.primary-button {
  background:var(--lime);
  color:#182116;
  display:flex;
  gap:35px;
  align-items:center;
  justify-content:space-between;
  border:0;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  font:700 10px var(--mono);
  letter-spacing:1px;
  padding:17px 20px;
  min-width:213px;
  box-shadow:0 0 35px #c0f96b20;
  transition:background .15s,filter .15s
}

.primary-button:hover {
  background:#d5ff9c;
  filter:drop-shadow(0 0 12px #b8f75a60)
}

.primary-button .icon {
  width:18px;
  height:18px
}

.primary-button:focus-visible {
  outline-offset:-5px;
  outline:2px solid #264016
}

.overlay-hint {
  display:block;
  font:8px var(--mono);
  letter-spacing:1.6px;
  color:#7b917d;
  margin-top:14px;
  margin-left:14px
}

.intro-caption {
  position:absolute;
  bottom:23px;
  right:22px;
  display:flex;
  align-items:center;
  gap:9px;
  font:8px var(--mono);
  letter-spacing:1.5px;
  color:#c3dfaa9c
}

.intro-caption>span:last-child {
  font-size:7px;
  color:#819a6b;
  margin-left:4px
}

.crosshair {
  font-size:18px;
  color:#c9f99c
}

.overlay:not(.intro) .intro-art,.overlay:not(.intro) .intro-caption {
  opacity:0
}

.overlay:not(.intro) {
  background:#080f15c9;
  backdrop-filter:blur(7px)
}

.overlay:not(.intro) .intro-shade {
  opacity:0
}

.overlay:not(.intro) .overlay-content {
  width:100%;
  text-align:center;
  margin:0;
  padding:25px
}

.overlay:not(.intro) .eyebrow {
  justify-content:center
}

.overlay:not(.intro) .primary-button {
  margin:auto;
  width:225px
}

.overlay:not(.intro) .overlay-hint {
  margin-left:0
}

.overlay:not(.intro) h2 {
  font-size:clamp(30px,3.5vw,54px)
}

.overlay.death h2 span {
  color:#ff986b
}

.result-stats {
  display:flex;
  justify-content:center;
  gap:40px;
  margin:0 0 24px
}

.result-stats div {
  display:flex;
  flex-direction:column;
  gap:5px
}

.result-stats span {
  font:8px var(--mono);
  letter-spacing:1.3px;
  color:#8c9c90
}

.result-stats strong {
  font:500 25px var(--display);
  letter-spacing:1px
}

.level-toast {
  position:absolute;
  top:18%;
  left:50%;
  z-index:2;
  transform:translate(-50%,8px);
  text-align:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s,transform .3s
}

.level-toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}

.level-toast span {
  display:block;
  color:var(--orange);
  font:8px var(--mono);
  letter-spacing:4px;
  margin-bottom:7px
}

.level-toast strong {
  font-size:27px;
  color:#d5ff9b;
  letter-spacing:3px;
  text-shadow:0 0 20px #adff4055
}

.sidebar {
  display:flex;
  flex-direction:column;
  min-width:0;
  background:linear-gradient(135deg,#12191e99,#0b111660);
  border:1px solid #25312c;
  border-radius:6px;
  overflow:hidden
}

.score-panel {
  padding:20px 20px 16px
}

.panel-kicker {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:8px var(--mono);
  letter-spacing:1.3px;
  color:#92a095
}

.panel-cross {
  font-size:15px;
  line-height:8px;
  color:#7b8d76
}

.score-heading {
  font:8px var(--mono);
  letter-spacing:2px;
  color:#94a38c;
  margin-top:22px;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.score-value {
  font-size:clamp(42px,4vw,60px);
  letter-spacing:-2px;
  line-height:1.1;
  color:var(--lime);
  font-weight:500;
  margin:7px 0 20px;
  text-shadow:0 0 30px #c0f96b15;
  font-variant-numeric:tabular-nums
}

.score-pop {
  color:var(--orange);
  opacity:0;
  transition:opacity .2s,transform .2s;
  transform:translateY(4px)
}

.score-pop.visible {
  opacity:1;
  transform:translateY(0)
}

.score-value.pulse {
  animation:scorePulse .35s ease-out
}

.best-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:15px;
  border-top:1px solid #2a352c;
  color:#b7c2af;
  gap:8px
}

.best-row>span {
  font:8px var(--mono);
  letter-spacing:.6px;
  display:flex;
  align-items:center;
  gap:7px
}

.best-row .icon {
  width:14px;
  height:14px;
  color:#a4ba78
}

.best-row strong {
  font:13px var(--mono);
  letter-spacing:1px;
  color:#e4ebd8
}

.storage-note {
  display:block;
  font:7px var(--mono);
  letter-spacing:1.2px;
  color:#687c69;
  margin:9px 0 0 21px
}

.storage-note.unavailable {
  color:var(--orange);
  font-size:8px
}

.heat-panel {
  padding:18px 20px;
  border-top:1px solid #273229;
  border-bottom:1px solid #273229;
  background:linear-gradient(100deg,#bbff3e05,transparent);
  transition:background .4s
}

.heat-panel.heating {
  background:#b4f34e17
}

.heat-symbol {
  color:var(--orange);
  font-size:16px
}

.level-line {
  display:flex;
  gap:16px;
  align-items:center;
  margin:13px 0
}

.level-line>strong {
  font-size:40px;
  font-weight:400;
  line-height:1;
  letter-spacing:-1px
}

.level-line>div {
  display:flex;
  flex-direction:column;
  gap:7px;
  font:7px var(--mono);
  letter-spacing:1.1px
}

.level-line>div>span:first-child {
  color:#bed48c;
  font-size:8px
}

.level-line>div>span:last-child {
  color:#778d7c;
  font-size:7px
}

.level-line b {
  font-weight:400;
  color:#bdc7b4;
  font-size:9px
}

.heat-meter {
  display:flex;
  gap:3px;
  height:9px;
  margin:16px 0 11px
}

.heat-meter i {
  flex:1;
  background:#26362a;
  border-radius:1px;
  transition:background .25s
}

.heat-meter i.lit {
  background:#a0ca60;
  box-shadow:0 0 7px #b8fc3325
}

.heat-meter i:nth-child(n+16).lit {
  background:#eea963
}

.next-level {
  display:flex;
  justify-content:space-between;
  font:7px var(--mono);
  letter-spacing:.7px;
  color:#84947e;
  align-items:center
}

.next-level strong {
  font:10px var(--mono);
  color:#b1bf9c
}

.pickup-panel {
  display:flex;
  align-items:center;
  padding:14px 13px 14px 8px;
  gap:3px;
  border-bottom:1px solid #273229;
  background:radial-gradient(ellipse at 12% 50%,#ff70200d,transparent 70%)
}

.pickup-panel img {
  width:61px;
  height:61px;
  object-fit:contain;
  filter:drop-shadow(0 0 10px #ff97461c)
}

.pickup-panel div>span {
  font:7px var(--mono);
  letter-spacing:1.3px;
  color:var(--orange)
}

.pickup-panel strong {
  display:block;
  font-size:11px;
  font-weight:500;
  color:#d4dace;
  margin:7px 0 5px
}

.pickup-panel p {
  font:8px var(--mono);
  color:#8b9485;
  margin:0
}

.controls-panel {
  padding:18px 20px 20px;
  flex:1
}

.controls-panel h2 {
  font:8px var(--mono);
  letter-spacing:1px;
  margin:0;
  color:#92a095
}

.control-row {
  display:flex;
  align-items:center;
  gap:8px;
  margin:16px 0 14px
}

kbd {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border:1px solid #3a493d;
  border-bottom-width:2px;
  border-radius:3px;
  background:#17211c;
  min-width:20px;
  height:21px;
  font:9px var(--mono);
  color:#a7b7a3
}

.key-cluster {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px
}

.key-cluster span {
  display:flex;
  gap:3px
}

.or-label {
  font:10px var(--mono);
  color:#566c56;
  margin:8px 0 0
}

.control-label {
  font:7px var(--mono);
  letter-spacing:1px;
  color:#7d947b;
  margin:17px 0 0 auto
}

.control-shortcuts {
  display:flex;
  justify-content:space-between;
  gap:10px
}

.control-shortcuts span {
  font:7px var(--mono);
  color:#839780;
  display:flex;
  align-items:center;
  gap:6px;
  letter-spacing:.4px
}

.control-shortcuts kbd {
  font-size:7px;
  padding:0 5px;
  height:19px
}

.controls-panel>p {
  color:#768775;
  font-size:10px;
  line-height:1.8;
  margin:17px 0 0;
  letter-spacing:.1px
}

.site-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 0 24px;
  font:8px var(--mono);
  letter-spacing:1.2px;
  color:#687a6d;
  gap:15px
}

.site-footer>span {
  display:flex;
  align-items:center;
  gap:9px
}

.footer-separator {
  margin:0 8px;
  color:#34493c
}

.headphone-icon {
  fill:none;
  stroke:#71876c;
  stroke-width:1.1;
  width:12px;
  height:12px
}

.footer-version {
  color:#526647;
  margin-left:18px
}

.touch-controls {
  display:none
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.noscript {
  padding:20px;
  color:var(--orange)
}

@keyframes breathe {
  50% {
    box-shadow:0 0 14px #b5f964bb;
    opacity:.6
  }
}

@keyframes scorePulse {
  0% {
    color:#fff;
    transform:translateY(-2px)
  }
  100% {
    color:var(--lime);
    transform:translateY(0)
  }
}

@media(min-width:1100px) and (max-height:850px) {
  .site-shell {
    max-width:1120px
  }
  .masthead {
    height:62px
  }
  .hero {
    padding:14px 0
  }
  .hero h1 {
    font-size:47px
  }
  .hero .eyebrow {
    margin-bottom:9px
  }
  .hero-subtitle {
    margin-top:9px
  }
  .game-layout {
    grid-template-columns:minmax(0,1fr) 244px;
    gap:20px
  }
  .score-panel {
    padding:15px 18px 12px
  }
  .score-heading {
    margin-top:15px
  }
  .score-value {
    font-size:48px;
    margin:4px 0 12px
  }
  .heat-panel {
    padding:14px 18px
  }
  .level-line {
    margin:10px 0
  }
  .level-line>strong {
    font-size:35px
  }
  .heat-meter {
    margin:12px 0 9px
  }
  .pickup-panel {
    padding:9px 9px 9px 5px
  }
  .pickup-panel img {
    width:54px;
    height:54px
  }
  .controls-panel {
    padding:15px 18px
  }
  .control-row {
    margin:12px 0
  }
  .controls-panel>p {
    display:none
  }
  .site-footer {
    padding:8px 0;
    font-size:7px
  }
  .arena-toolbar {
    height:40px
  }
  .arena-footer {
    height:30px
  }
}

@media(min-width:1100px) and (max-height:740px) {
  .site-shell {
    max-width:1160px
  }
  .hero {
    padding:20px 0
  }
  .hero h1 {
    font-size:47px
  }
  .hero .eyebrow {
    margin-bottom:9px
  }
  .score-value {
    font-size:42px
  }
  .score-heading {
    margin-top:12px
  }
  .score-panel {
    padding-top:14px
  }
  .best-row {
    padding-top:10px
  }
  .controls-panel>p {
    font-size:9px;
    margin-top:11px
  }
  .pickup-panel {
    padding-block:7px
  }
  .control-row {
    margin-block:10px
  }
  .heat-meter {
    height:7px
  }
  .site-footer {
    padding-block:16px
  }
}

@media(min-width:1650px) {
  .site-shell {
    padding-top:16px
  }
  .hero {
    padding:38px 0
  }
  .game-layout {
    grid-template-columns:minmax(0,1fr) 280px;
    gap:26px
  }
  .sidebar .score-panel,.sidebar .heat-panel,.sidebar .controls-panel {
    padding-left:24px;
    padding-right:24px
  }
}

@media(max-width:1099px) {
  .site-shell {
    padding:0 25px
  }
  .hero-index {
    display:none
  }
  .hero {
    padding:28px 0
  }
  h1 {
    font-size:clamp(31px,5.8vw,58px)
  }
  .title-divider {
    margin-inline:14px
  }
  .game-layout {
    grid-template-columns:minmax(0,1fr) 230px;
    gap:16px
  }
  .score-panel {
    padding:17px
  }
  .score-heading {
    margin-top:17px
  }
  .score-value {
    font-size:46px;
    margin-bottom:16px
  }
  .heat-panel {
    padding:16px 17px
  }
  .controls-panel {
    padding:16px 17px
  }
  .pickup-panel {
    padding:10px 5px
  }
  .pickup-panel img {
    width:50px;
    height:50px
  }
  .pickup-panel strong {
    font-size:10px
  }
  .pickup-panel div>span {
    font-size:6px
  }
  .control-label {
    display:none
  }
  .control-row {
    gap:10px
  }
  .control-shortcuts {
    gap:6px
  }
  .control-shortcuts span {
    font-size:6px;
    gap:4px
  }
  .overlay h2 {
    font-size:clamp(25px,3.7vw,43px)
  }
  .overlay-content>p:not(.eyebrow) {
    font-size:11px;
    margin-bottom:20px
  }
  .overlay .eyebrow {
    font-size:7px;
    margin-bottom:16px
  }
  .primary-button {
    padding:14px 16px;
    min-width:190px;
    font-size:9px
  }
  .overlay-hint {
    font-size:7px
  }
  .hero-subtitle {
    font-size:11px
  }
  .controls-panel>p {
    font-size:9px
  }
  .intro-caption {
    font-size:7px;
    right:15px;
    bottom:17px
  }
  .intro-caption>span:last-child {
    display:none
  }
  .site-footer {
    font-size:7px;
    letter-spacing:.7px
  }
  .score-value {
    font-size:48px
  }
  .arena {
    min-height:310px;
    aspect-ratio:1.6
  }
  .arena-dimensions {
    display:none
  }
}

@media(max-width:760px) {
  .site-shell {
    padding:0 18px
  }
  .masthead {
    height:72px
  }
  .system-status,.header-divider {
    display:none
  }
  .brand {
    font-size:11px;
    gap:9px;
    letter-spacing:1.5px
  }
  .brand-mark {
    width:30px;
    height:30px
  }
  .brand-edition {
    font-size:6px;
    letter-spacing:1.6px
  }
  .sound-button {
    font-size:8px;
    gap:7px
  }
  .hero {
    padding:25px 0 23px
  }
  .hero h1 {
    font-size:clamp(25px,5.8vw,44px);
    letter-spacing:-1.2px
  }
  .hero .eyebrow {
    font-size:7px;
    margin-bottom:11px
  }
  .inferno-word {
    font-size:.73em;
    letter-spacing:.5px
  }
  .title-divider {
    letter-spacing:-4px;
    margin:0 10px 0 8px;
    vertical-align:2px
  }
  .hero-subtitle {
    font-size:10px
  }
  .game-layout {
    display:flex;
    flex-direction:column;
    gap:15px
  }
  .arena {
    min-height:0;
    aspect-ratio:1.28
  }
  .arena-toolbar {
    height:40px;
    padding-inline:13px
  }
  .arena-identity {
    font-size:8px
  }
  .arena-footer {
    padding-inline:12px;
    font-size:6px;
    height:29px;
    letter-spacing:.8px
  }
  .arena-tools {
    gap:8px
  }
  .sidebar {
    display:grid;
    grid-template-columns:1fr 1fr;
    border-radius:4px
  }
  .score-panel {
    padding:16px
  }
  .score-heading {
    margin-top:14px
  }
  .score-value {
    font-size:43px;
    margin-bottom:13px
  }
  .panel-kicker {
    font-size:7px;
    letter-spacing:.7px
  }
  .best-row {
    padding-top:12px
  }
  .best-row>span {
    font-size:6px;
    gap:5px
  }
  .best-row strong {
    font-size:11px
  }
  .storage-note {
    font-size:6px;
    letter-spacing:.7px;
    margin-left:18px
  }
  .heat-panel {
    border:0;
    border-left:1px solid #273229;
    padding:16px
  }
  .level-line {
    margin-top:17px
  }
  .level-line>strong {
    font-size:37px
  }
  .level-line>div>span:first-child {
    font-size:7px
  }
  .level-line>div {
    letter-spacing:.5px;
    gap:7px
  }
  .heat-meter {
    gap:2px
  }
  .next-level {
    font-size:6px
  }
  .pickup-panel,.controls-panel {
    display:none
  }
  .overlay-content {
    margin-left:6%;
    width:90%
  }
  .overlay h2 {
    font-size:clamp(29px,7.2vw,49px)
  }
  .overlay-content>p:not(.eyebrow) {
    font-size:10px;
    line-height:1.75;
    max-width:85%;
    margin-bottom:23px
  }
  .overlay .eyebrow {
    font-size:6px;
    letter-spacing:1.5px
  }
  .overlay-content .primary-button {
    padding:13px 15px;
    width:185px;
    min-width:0;
    font-size:8px;
    gap:20px
  }
  .overlay-hint {
    font-size:6px;
    letter-spacing:1.3px;
    margin-left:7px
  }
  .intro-art {
    object-position:56% center;
    opacity:.8
  }
  .intro-shade {
    background:linear-gradient(90deg,#081115e8,#08111570 70%,#08111525)
  }
  .intro-caption {
    display:none
  }
  .overlay:not(.intro) .overlay-content>p:not(.eyebrow) {
    max-width:100%
  }
  .overlay:not(.intro) h2 {
    font-size:36px
  }
  .site-footer {
    font-size:6px;
    padding:21px 0;
    line-height:1.8;
    align-items:flex-start
  }
  .site-footer>span:last-child {
    display:none
  }
  .footer-separator {
    margin:0 5px
  }
  .touch-controls {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    padding:19px 0 0
  }
  .touch-controls>div {
    display:flex;
    flex-direction:column;
    gap:6px
  }
  .touch-controls button {
    width:52px;
    height:42px;
    border:1px solid #3b513c;
    border-bottom-width:3px;
    background:#142019;
    border-radius:5px;
    font-size:21px;
    color:#bedb9b;
    user-select:none
  }
  .touch-controls>button:last-child {
    margin-left:20px;
    width:43px;
    font-size:16px
  }
  .touch-controls button:active {
    background:#304528
  }
  .touch-controls+.noscript {
    margin-top:15px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}