:root{
  --ink:#0a0c14;
  --indigo:#17203a;
  --slate:#2c3a5e;
  --moonblue:#6e7fa6;
  --silver:#c8d4e8;
  --amber:#e5a24a;
  --blood:#b03a3a;
  --parchment:#e8dcc0;
  --brass:#b08a4a;
  --brass-light:#d3ae6b;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100dvh;
  background:
    radial-gradient(ellipse at 50% -10%, #1b2544 0%, #0a0d17 46%, #05060b 100%);
  color:var(--parchment);
  font-family:'Spectral', Georgia, serif;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
img{user-select:none;-webkit-user-drag:none}

.cover{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  background:#07080d;
  transition:opacity .55s ease, visibility .55s;
}
.cover.gone{opacity:0;visibility:hidden;pointer-events:none}
.cover-bg{
  position:absolute;
  inset:-2%;
  background:url(assets/art/moon_sky_band.webp) center 42%/cover no-repeat;
  filter:brightness(.58) saturate(.84) blur(1.25px);
  transform:scale(1.03);
}
.cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 52% 42%, rgba(23,32,58,.06) 0%, rgba(7,8,13,.72) 58%, #07080d 92%),
    linear-gradient(180deg, rgba(7,8,13,.55), rgba(7,8,13,.2) 30%, #07080d 100%);
}
.cover-inner{
  position:relative;
  z-index:2;
  width:min(980px,94vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:9px;
  padding:clamp(12px,3vh,40px) 16px clamp(14px,3vh,36px);
}
.cover-lockup{
  position:relative;
  width:min(660px,76vw,82vh);
  margin-bottom:2px;
}
.cover-title{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.85));
}
.cover-hand{
  position:absolute;
  z-index:3;
  right:-10%;
  top:2%;
  width:30%;
  height:auto;
  transform:rotate(-9deg);
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.75));
}
.cover-kicker{
  margin:6px 0 0;
  font-family:'Spectral', serif;
  font-style:italic;
  font-size:clamp(13px,1.55vw,19px);
  color:var(--silver);
  letter-spacing:.04em;
  text-shadow:0 2px 10px #000;
}
.cover-sub{
  margin:0;
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(9px,1vw,12px);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--amber);
}
.cover-marks,.marks{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}
.cover-marks{margin:7px 0 3px}
.cover-marks i,.marks i{
  display:block;
  width:9px;
  height:9px;
  transform:rotate(45deg);
  background:#1b2338;
  border:1px solid rgba(176,138,74,.55);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
.cover-marks i.on,.marks i.on{
  background:var(--amber);
  border-color:#f0c37e;
  box-shadow:0 0 8px rgba(229,162,74,.65), inset 0 0 0 1px rgba(58,30,4,.4);
}
.plate-btn{
  appearance:none;
  border:1px solid var(--brass);
  border-radius:3px;
  background:
    linear-gradient(180deg, rgba(44,58,94,.65), rgba(14,18,30,.92)),
    #0e1220;
  box-shadow:
    inset 0 0 0 2px #090b12,
    inset 0 0 0 3px rgba(200,212,232,.08),
    0 8px 22px rgba(0,0,0,.65);
  color:var(--parchment);
  font-family:'Staatliches', Impact, sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.plate-btn:hover:not(:disabled){filter:brightness(1.14)}
.plate-btn:active:not(:disabled){transform:translateY(1px) scale(.99)}
.plate-btn:disabled{opacity:.62;cursor:progress}
.begin-btn{
  margin-top:8px;
  min-width:min(290px,70vw);
  padding:13px 30px 11px;
  font-size:clamp(17px,2.1vw,24px);
}
.cover-hint{
  max-width:590px;
  margin:10px 0 0;
  font-size:clamp(12px,1.2vw,15px);
  line-height:1.55;
  color:#9fb0cc;
}
.cover-sound{
  position:absolute;
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  z-index:5;
}

.cabinet{
  position:relative;
  z-index:1;
  width:min(1240px,100%);
  margin:0 auto;
  padding:10px clamp(8px,1.6vw,22px) 18px;
  border-left:1px solid rgba(176,138,74,.10);
  border-right:1px solid rgba(176,138,74,.10);
  background:
    linear-gradient(180deg, rgba(16,21,36,.72), rgba(7,8,13,.35) 55%, rgba(7,8,13,.8));
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.marquee{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 9px;
}
.wordmark{display:flex;align-items:center;gap:9px;min-width:0}
.seal{
  width:clamp(23px,2.8vw,36px);
  height:auto;
  transform:rotate(-8deg);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.8));
}
.wm-line{
  font-family:'Staatliches', Impact, sans-serif;
  font-size:clamp(21px,3.1vw,40px);
  line-height:1;
  letter-spacing:.055em;
  color:#090b12;
  -webkit-text-stroke:1px rgba(200,212,232,.72);
  text-shadow:
    0 1px 0 rgba(200,212,232,.55),
    1px 0 0 rgba(200,212,232,.5),
    0 -1px 0 rgba(200,212,232,.4),
    2px 3px 0 rgba(110,127,166,.4),
    0 10px 22px rgba(0,0,0,.9);
  white-space:nowrap;
}
.wm-line em{font-style:normal;color:var(--blood);-webkit-text-stroke:1px rgba(229,162,74,.55)}
.marquee-tools{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.sound-btn{
  flex:0 0 auto;
  appearance:none;
  border:1px solid rgba(176,138,74,.65);
  border-radius:3px;
  padding:6px 9px 5px;
  background:linear-gradient(180deg, rgba(44,58,94,.55), rgba(10,13,22,.9));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.7);
  color:#b9c6dd;
  font-family:'IBM Plex Mono', monospace;
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.sound-btn[aria-pressed="false"]{color:#6c7896}

.stage-wrap{
  position:relative;
  container-type:inline-size;
}
.stage{
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  overflow:hidden;
  border:2px solid var(--brass);
  border-radius:4px;
  background:#0a0c14;
  box-shadow:
    inset 0 0 0 5px #080a10,
    inset 0 0 70px rgba(0,0,0,.85),
    0 0 0 1px rgba(0,0,0,.85),
    0 18px 50px rgba(0,0,0,.65);
  touch-action:none;
}
.stage canvas{display:block;width:100%!important;height:100%!important}

.hud{position:absolute;inset:0;pointer-events:none;z-index:10}
.health{
  position:absolute;
  top:1.35cqw;
  left:1.35cqw;
  width:26cqw;
  z-index:4;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
.health>img,.objective>img,.ammo>img,.levelstrip>img{display:block;width:100%;height:auto}
.health-bar{
  position:absolute;
  left:11.5%;
  right:11.5%;
  top:35%;
  bottom:31%;
  display:flex;
  gap:.28cqw;
}
.health-bar i{
  flex:1 1 0;
  background:#371013;
  border-top:1px solid rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,170,170,.06);
  transition:background .18s ease, box-shadow .18s ease;
}
.health-bar i.on{
  background:linear-gradient(180deg,#d35050,#8e2626 58%,#651517);
  box-shadow:inset 0 1px 0 rgba(255,210,200,.35), 0 0 5px rgba(176,58,58,.35);
}
.objective{
  position:absolute;
  top:1.2cqw;
  left:50%;
  transform:translateX(-50%);
  width:31cqw;
  z-index:4;
  text-align:center;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.6));
}
.objective-copy{
  position:absolute;
  inset:17% 8% 19%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35cqw;
  line-height:1.15;
}
.obj-kicker{
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(6px,.72cqw,9px);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--amber);
}
#objectiveText{
  display:block;
  font-family:'Spectral', serif;
  font-size:clamp(9px,1.18cqw,15px);
  font-weight:600;
  color:var(--parchment);
  text-shadow:0 1px 2px #000;
}
.ammo{
  position:absolute;
  top:1.35cqw;
  right:1.35cqw;
  width:15.5cqw;
  z-index:4;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
.ammo-row{
  position:absolute;
  inset:22% 10% 18%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55cqw;
  color:var(--parchment);
}
.ammo-row svg{
  width:clamp(9px,1.35cqw,17px);
  height:auto;
  fill:currentColor;
  opacity:.86;
  filter:drop-shadow(0 1px 1px #000);
}
.ammo-row b{
  font-family:'IBM Plex Mono', monospace;
  font-weight:700;
  font-size:clamp(11px,1.5cqw,20px);
  line-height:1;
  min-width:1.1em;
  text-align:center;
  color:#f2e6c8;
  text-shadow:0 1px 2px #000;
}
.ammo-div{
  width:1px;
  align-self:stretch;
  margin:.15cqw .2cqw;
  background:linear-gradient(180deg,transparent,rgba(176,138,74,.55),transparent);
}
.ammo.empty-flash{animation:ammoFlash .35s ease 2}
@keyframes ammoFlash{50%{filter:drop-shadow(0 0 12px rgba(176,58,58,.95)) brightness(1.5)}}
.levelstrip{
  position:absolute;
  bottom:1.15cqw;
  left:50%;
  transform:translateX(-50%);
  width:27cqw;
  z-index:4;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
}
.levelstrip .marks{
  position:absolute;
  inset:27% 15% 25%;
  justify-content:space-between;
  gap:0;
}
.levelstrip .marks i{width:clamp(4px,.7cqw,9px);height:clamp(4px,.7cqw,9px)}
.shade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(5,7,14,.15) 20%, rgba(4,6,12,.62) 100%);
  transition:opacity .45s ease;
}
.caption{
  position:absolute;
  left:7%;
  right:7%;
  bottom:16.5%;
  z-index:5;
  text-align:center;
  font-family:'Spectral', serif;
  font-style:italic;
  font-size:clamp(10px,1.35cqw,17px);
  color:#f0e6cf;
  text-shadow:0 2px 5px #000, 0 0 16px rgba(0,0,0,.9);
  opacity:0;
  transform:translateY(5px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.caption.show{opacity:1;transform:translateY(0)}

.controls{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:15;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:1.5cqw;
  pointer-events:none;
}
.moves{display:flex;gap:.7cqw;pointer-events:auto}
.acts{display:flex;gap:.75cqw;pointer-events:auto}
.pad{
  position:relative;
  appearance:none;
  width:clamp(42px,5.3vw,72px);
  aspect-ratio:1;
  padding:0;
  border:1px solid var(--brass);
  border-radius:5px;
  background:
    radial-gradient(circle at 50% 30%, rgba(62,80,124,.5), rgba(10,13,22,.95) 72%),
    #0d111c;
  box-shadow:inset 0 0 0 2px #07090f, 0 5px 14px rgba(0,0,0,.55);
  color:var(--parchment);
  cursor:pointer;
  touch-action:none;
}
.pad .chev{
  display:block;
  font-family:'Spectral', serif;
  font-size:clamp(24px,3.2vw,44px);
  line-height:.72;
  color:#ded2b4;
  text-shadow:0 2px 4px #000;
}
.pad b{
  position:absolute;
  left:50%;
  bottom:5%;
  transform:translateX(-50%);
  font-family:'IBM Plex Mono', monospace;
  font-size:clamp(7px,.62vw,9px);
  letter-spacing:.08em;
  color:#8a97b5;
}
.pad.on,.pad:active{
  background:radial-gradient(circle at 50% 38%, rgba(229,162,74,.55), rgba(24,20,16,.96) 70%);
  box-shadow:inset 0 0 0 2px #120d08, 0 0 18px rgba(229,162,74,.35);
}
.act{
  position:relative;
  appearance:none;
  width:clamp(44px,6.1vw,94px);
  aspect-ratio:1;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  touch-action:none;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.6));
}
.act img{display:block;width:100%;height:auto;transition:transform .1s ease, filter .1s ease}
.act .key{
  position:absolute;
  left:50%;
  bottom:3%;
  transform:translateX(-50%);
  padding:0 3px;
  font-family:'IBM Plex Mono', monospace;
  font-weight:700;
  font-size:clamp(7px,.62vw,10px);
  line-height:1.35;
  color:#e8dcc0;
  background:rgba(6,8,14,.74);
  border:1px solid rgba(176,138,74,.38);
  border-radius:2px;
}
.act .rim{
  position:absolute;
  inset:2%;
  border-radius:50%;
  box-shadow:inset 0 0 0 0 transparent;
  transition:box-shadow .2s ease;
}
.act.active .rim{box-shadow:inset 0 0 0 3px rgba(229,162,74,.8), 0 0 16px rgba(229,162,74,.3)}
.act.empty .rim{box-shadow:inset 0 0 0 3px rgba(176,58,58,.9)}
.act.pressed img{transform:scale(.93) brightness(1.3);filter:drop-shadow(0 0 12px rgba(229,162,74,.55))}
.act.empty{opacity:.7}

.field-note{
  max-width:980px;
  margin:11px auto 0;
  padding:9px 6px 2px;
  border-top:1px solid rgba(176,138,74,.18);
  color:#96a6c4;
  font-size:clamp(12px,.98vw,14px);
  line-height:1.55;
}
.field-note p{margin:0}
.field-short{display:none}
.field-note b{color:var(--parchment);font-weight:600}
.bezel-foot{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 6px 0;
  font-family:'IBM Plex Mono', monospace;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#5a6888;
}

.result{
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:radial-gradient(ellipse at 50% 45%, rgba(16,22,40,.72), rgba(4,5,9,.94) 72%);
  backdrop-filter:blur(4px);
}
.result[hidden]{display:none}
.guide{z-index:92}
.guide .result-card h2{font-size:clamp(26px,4.4vw,38px)}
.result-card{
  position:relative;
  width:min(560px,94vw);
  padding:28px 24px 24px;
  text-align:center;
  border:1px solid var(--brass);
  border-radius:4px;
  background:
    linear-gradient(165deg, rgba(36,44,72,.5), rgba(8,10,17,.96) 46%),
    #0a0c14;
  box-shadow:inset 0 0 0 4px #080a10, inset 0 0 0 5px rgba(200,212,232,.08), 0 30px 90px #000;
}
.result-kicker{
  margin:0 0 4px;
  font-family:'IBM Plex Mono', monospace;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--amber);
}
.result-card h2{
  margin:0;
  font-family:'Staatliches', Impact, sans-serif;
  font-size:clamp(30px,5vw,46px);
  font-weight:400;
  letter-spacing:.06em;
  line-height:1;
  color:var(--parchment);
  text-shadow:0 2px 0 #000, 0 0 28px rgba(176,58,58,.28);
}
.result-line{
  margin:10px auto 16px;
  max-width:430px;
  color:#9fb0cc;
  font-size:14px;
  line-height:1.5;
}
.result-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:0 0 14px;
  padding:12px 4px;
  border-top:1px solid rgba(176,138,74,.25);
  border-bottom:1px solid rgba(176,138,74,.25);
}
.result-stats span{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7584a5;
}
.result-stats b{
  display:block;
  margin-top:3px;
  font-family:'IBM Plex Mono', monospace;
  font-size:20px;
  color:#f0e3c2;
}
.result-armor{
  min-height:20px;
  margin:0 0 16px;
  font-family:'Spectral', serif;
  font-style:italic;
  font-size:14px;
  color:var(--amber);
}
#again{padding:11px 26px 9px;font-size:clamp(16px,2vw,21px)}

@media (max-width:760px) and (orientation:portrait){
  .cabinet{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .stage{
    aspect-ratio:auto;
    height:clamp(340px,64dvh,600px);
  }
  .controls{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(7,8,13,0), rgba(7,8,13,.9) 42%, rgba(7,8,13,.98));
    border-top:1px solid rgba(176,138,74,.28);
    box-shadow:0 -16px 50px rgba(0,0,0,.55);
  }
  .moves{gap:8px}
  .acts{gap:7px}
  .pad{width:clamp(46px,12.5vw,60px);border-radius:7px}
  .act{width:clamp(48px,13.4vw,64px)}
  .pad .chev{font-size:clamp(28px,8vw,38px)}
  .marquee{padding-bottom:6px}
  .wm-line{font-size:clamp(19px,5.1vw,28px)}
  .field-note{font-size:12px;line-height:1.45;margin-top:8px}
  .bezel-foot{font-size:8px}
  .cover-title{width:100%}
  .cover-lockup{width:min(660px,90vw,56vh)}
  .cover-hand{width:30%;right:1%;top:2%}
  .cover-hint{font-size:12px}
}

@media (orientation:landscape) and (max-height:580px){
  body{overflow:hidden}
  .cabinet{
    width:min(100%,calc((100dvh - 14px) * 1.5));
    padding:3px 4px 4px;
    height:100dvh;
    display:flex;
    flex-direction:column;
  }
  .marquee{padding:0 2px 3px}
  .wm-line{font-size:19px}
  .seal{width:20px}
  .sound-btn{padding:3px 6px;font-size:8px}
  .stage-wrap{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
  .stage{width:100%;max-height:100%;margin:0 auto}
  .controls{padding:1.1cqw}
  .pad{width:clamp(38px,4.4vw,58px)}
  .act{width:clamp(40px,5vw,72px)}
  .field-note,.bezel-foot{display:none}
}

@media (min-width:761px){
  .stage-wrap{width:min(100%,calc((100dvh - 150px) * 1.5));margin:0 auto}
}
@media (min-width:761px) and (max-height:860px){
  .field-long{display:none}
  .field-short{display:block}
  .field-note{margin-top:7px;padding-top:6px;font-size:12px}
  .stage-wrap{width:min(100%,calc((100dvh - 142px) * 1.5))}
}

@media (max-height:660px){
  .cover-inner{gap:5px;padding:8px 14px}
  .cover-lockup{width:min(560px,64vw,74vh)}
  .cover-hint{display:none}
  .begin-btn{margin-top:3px;padding:9px 24px 7px;font-size:clamp(15px,1.8vw,20px)}
  .cover-kicker{font-size:12px}
}

@media (orientation:landscape) and (max-height:580px){
  .stage-wrap{width:min(100%,calc((100dvh - 46px) * 1.5))!important;margin:0 auto;flex:none}
}