:root{
  --paper:#e6dcc3;
  --paper-light:#f4f1e8;
  --ink:#16171a;
  --red:#c4342a;
  --orange:#e4761b;
  --brass:#c6a046;
  --green:#4a5548;
  --grey:#8c8b84;
  --dim:#aab2a2;
  --rail-h:clamp(104px,17vh,150px);
  --plate-w:clamp(56px,6.4vw,92px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{background:#0b0c0b}
body{
  overflow:hidden;
  background:#0b0c0b;
  color:var(--paper);
  font-family:'Saira Condensed',sans-serif;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit}
img{display:block}

#stage{position:fixed;inset:0;z-index:0;background:#0b0c0b}
#stage canvas{display:block;width:100%!important;height:100%!important}

.rail{
  position:fixed;top:0;left:0;
  width:100%;height:var(--rail-h);
  object-fit:fill;z-index:2;pointer-events:none;
}

.lampglow{
  position:fixed;z-index:3;pointer-events:none;
  width:clamp(90px,15vw,240px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  top:calc(var(--rail-h) * 0.86);
  background:radial-gradient(circle,rgba(255,206,120,.30) 0%,rgba(255,178,74,.10) 36%,rgba(255,160,50,0) 68%);
  mix-blend-mode:screen;
  animation:lampFlicker 6.4s infinite;
}
.lampglow.l1{left:19.5%}
.lampglow.l2{left:78%;animation-delay:-2.6s}
@keyframes lampFlicker{
  0%,100%{opacity:.48}
  41%{opacity:.64}
  44%{opacity:.40}
  48%{opacity:.61}
  73%{opacity:.52}
}

.maintitle{
  position:fixed;left:50%;top:calc(var(--rail-h) + 4px);
  width:clamp(260px,46vw,760px);height:auto;aspect-ratio:1024/225;
  transform:translateX(-50%) rotate(-.22deg);
  z-index:12;pointer-events:none;
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,.55)) drop-shadow(1px 0 0 rgba(196,52,42,.18));
}

.hud{position:fixed;inset:0;z-index:14;pointer-events:none}
.plates{position:absolute;top:max(clamp(10px,2vh,20px),env(safe-area-inset-top));display:flex;gap:clamp(4px,0.5vw,8px)}
.plates.left{left:max(clamp(10px,2vw,30px),env(safe-area-inset-left))}
.plates.right{right:max(clamp(10px,2vw,30px),env(safe-area-inset-right))}

.plate{
  position:relative;
  width:var(--plate-w);
  padding:0;margin:0;border:0;background:none;
  container-type:inline-size;
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,.50));
  -webkit-appearance:none;appearance:none;
}
button.plate{cursor:pointer;pointer-events:auto}
.plate img{width:100%;height:auto;aspect-ratio:317/388}
.plabel,.pval{
  position:absolute;left:8%;right:8%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;line-height:1;white-space:nowrap;
  color:var(--ink);
}
.plabel{
  top:10.5%;height:23%;
  font-family:'Big Shoulders Stencil',sans-serif;
  font-weight:700;font-size:15cqw;letter-spacing:.02em;
  opacity:.86;
}
.pval{
  top:40%;height:49%;
  font-family:'Share Tech Mono',monospace;
  font-size:21cqw;letter-spacing:-.02em;
  text-shadow:.5px 0 0 rgba(196,52,42,.16),-.5px 0 0 rgba(74,85,72,.14);
}
#plateAmmo .pval{font-size:24cqw}

.hint{
  position:fixed;left:max(clamp(10px,2vw,28px),env(safe-area-inset-left));bottom:max(9px,env(safe-area-inset-bottom));
  z-index:12;pointer-events:none;
  display:flex;flex-wrap:wrap;gap:2px 14px;
  max-width:54vw;
  font-family:'Saira Condensed',sans-serif;
  font-weight:600;font-size:clamp(8.5px,0.72vw,10.5px);
  letter-spacing:.12em;text-transform:uppercase;
  color:#c7cbbb;opacity:0;
  text-shadow:0 1px 0 #000,0 0 6px rgba(0,0,0,.55);
  transition:opacity .25s ease;
}
body.is-playing .hint{opacity:.84}
.hint span{white-space:nowrap}

.vignette{
  position:fixed;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at 50% 44%,rgba(0,0,0,0) 48%,rgba(0,0,0,.34) 78%,rgba(0,0,0,.66) 100%);
}
.halftone{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.55) .7px,rgba(0,0,0,0) .9px);
  background-size:3px 3px;
  mix-blend-mode:multiply;opacity:.10;
}
.grain{
  position:fixed;inset:0;z-index:45;pointer-events:none;
  background-image:url(assets/tex/grain.png);
  background-size:256px 256px;
  opacity:.46;mix-blend-mode:overlay;
}

.overlay{
  position:fixed;inset:0;z-index:30;
  display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:rgba(7,8,7,.60);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
  overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;
}
.overlay.show{opacity:1;visibility:visible;pointer-events:auto}
.overlay::-webkit-scrollbar{width:8px}
.overlay::-webkit-scrollbar-thumb{background:#4a5548}

.card{
  position:relative;
  width:min(92vw,470px);
  max-height:92vh;
  overflow:auto;
  overscroll-behavior:contain;
  padding:clamp(20px,3.2vw,30px);
  background:var(--paper);
  color:var(--ink);
  border:1px solid rgba(22,23,26,.30);
  outline:1px solid rgba(22,23,26,.14);
  outline-offset:-7px;
  box-shadow:9px 9px 0 rgba(0,0,0,.58);
  transform:rotate(-.22deg);
  scrollbar-width:thin;
  scrollbar-color:#4a5548 #d8ccb0;
}
.card::-webkit-scrollbar{width:7px}
.card::-webkit-scrollbar-thumb{background:#4a5548}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url(assets/tex/grain.png);
  background-size:180px 180px;
  opacity:.30;mix-blend-mode:multiply;
}
.card::after{
  content:"";position:absolute;top:-13px;left:50%;
  width:112px;height:25px;pointer-events:none;
  transform:translateX(-50%) rotate(-1.2deg);
  background:rgba(232,224,196,.62);
  border-left:1px solid rgba(22,23,26,.16);
  border-right:1px solid rgba(22,23,26,.16);
}
.card > *{position:relative;z-index:1}

.card-topline{
  font-family:'Saira Condensed',sans-serif;
  font-weight:600;font-size:clamp(9px,.92vw,11px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--green);
  padding-right:86px;
}
.dot{display:inline-block;width:5px;height:5px;margin:0 5px;background:var(--orange);vertical-align:middle}

.stamp{
  position:absolute;top:15px;right:17px;z-index:2;
  padding:4px 7px 3px;
  transform:rotate(-7deg);
  border:2px solid var(--red);
  box-shadow:inset 0 0 0 1px rgba(196,52,42,.55);
  color:var(--red);
  font-family:'Big Shoulders Stencil',sans-serif;
  font-weight:700;font-size:clamp(12px,1.55vw,16px);
  letter-spacing:.10em;line-height:1;
  opacity:.86;
}

h1,h2{
  font-family:'Big Shoulders Stencil',sans-serif;
  font-weight:700;text-transform:uppercase;
  margin:13px 0 8px;line-height:.84;letter-spacing:.01em;
  color:var(--ink);
  text-shadow:1px 0 0 rgba(196,52,42,.22),-1px 0 0 rgba(74,85,72,.18);
}
h1{font-size:clamp(38px,7.2vw,60px);max-width:82%}
h2{font-size:clamp(31px,5.8vw,48px);max-width:78%}

.lede{
  font-family:'Saira Condensed',sans-serif;
  font-size:clamp(12.5px,1.15vw,14.5px);
  line-height:1.46;color:#3d4238;margin:8px 0 12px;max-width:48ch;
}

.rule{height:1px;background:rgba(22,23,26,.30);position:relative;margin:12px 0}
.rule::before{content:"";position:absolute;left:0;top:-2px;width:42px;height:5px;background:var(--orange)}

.notes{display:flex;flex-direction:column;gap:0;margin:0 0 6px}
.notes > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:5px 0;border-bottom:1px solid rgba(22,23,26,.16);
  font-family:'Saira Condensed',sans-serif;font-size:clamp(10px,.95vw,11.5px);
  letter-spacing:.10em;text-transform:uppercase;
}
.notes .k{color:var(--green)}
.notes .v{color:var(--ink);font-weight:700}
.controls{
  font-family:'Saira Condensed',sans-serif;
  font-size:clamp(9.5px,.9vw,11px);line-height:1.45;
  letter-spacing:.09em;text-transform:uppercase;color:var(--green);
  margin:9px 0 0;
}

.firebtn{
  position:sticky;bottom:0;z-index:3;width:100%;margin:16px 0 0;
  min-height:clamp(46px,7vh,56px);
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:10px 16px;
  background-color:var(--orange);
  background-image:
    radial-gradient(circle at 10px 10px,#16171a 2.1px,rgba(0,0,0,0) 2.7px),
    radial-gradient(circle at calc(100% - 10px) 10px,#16171a 2.1px,rgba(0,0,0,0) 2.7px),
    radial-gradient(circle at 10px calc(100% - 10px),#16171a 2.1px,rgba(0,0,0,0) 2.7px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#16171a 2.1px,rgba(0,0,0,0) 2.7px);
  border:2px solid var(--ink);
  color:var(--ink);
  font-family:'Big Shoulders Stencil',sans-serif;
  font-weight:700;font-size:clamp(19px,2.3vw,25px);
  letter-spacing:.09em;text-transform:uppercase;line-height:1;
  box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;
  transition:transform .07s linear,box-shadow .07s linear,background-color .15s linear;
}
.firebtn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.firebtn:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.firebtn:disabled{background-color:var(--grey);color:#30312d;cursor:default;box-shadow:2px 2px 0 #30312d}
.firebtn:focus-visible{outline:2px solid var(--paper-light);outline-offset:3px}
.firebtn kbd{
  font-family:'Share Tech Mono',monospace;font-weight:400;
  font-size:9px;letter-spacing:.08em;
  padding:3px 5px 2px;border:1px solid rgba(22,23,26,.55);
  background:rgba(244,241,232,.34);
}

.cardfoot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:12px;
  font-family:'Share Tech Mono',monospace;font-size:clamp(8.5px,.8vw,10px);
  letter-spacing:.05em;color:var(--green);
}
.best{min-height:1em}
.linkbtn{
  background:none;border:0;border-bottom:1px solid rgba(22,23,26,.42);
  padding:0 0 1px;margin:0;color:var(--green);
  font-family:'Saira Condensed',sans-serif;font-weight:600;
  font-size:clamp(8.5px,.82vw,10px);letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;
}
.linkbtn:hover{color:var(--ink)}
.retry{margin-top:10px;color:var(--red);border-color:var(--red)}

.result-card{width:min(92vw,500px)}
.pause-card{width:min(90vw,390px)}

.bigscore{
  display:block;
  margin:12px 0 10px;padding-bottom:8px;
  border-bottom:1px solid rgba(22,23,26,.28);
}
.blabel{display:block;font-family:'Saira Condensed',sans-serif;font-size:10px;letter-spacing:.16em;color:var(--green);text-transform:uppercase;margin-bottom:2px}
.bnum{
  display:block;
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(42px,7vw,64px);line-height:.86;letter-spacing:.01em;
  color:var(--ink);
  text-shadow:1px 0 0 rgba(196,52,42,.24),-1px 0 0 rgba(74,85,72,.18);
}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:3px 18px;margin:6px 0}
.stats > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  border-bottom:1px solid rgba(22,23,26,.16);padding:4px 0;
}
.stats span{font-family:'Saira Condensed',sans-serif;font-size:clamp(9px,.82vw,10.5px);letter-spacing:.11em;color:var(--green);text-transform:uppercase}
.stats b{font-family:'Share Tech Mono',monospace;font-weight:400;font-size:clamp(13px,1.3vw,16px);color:var(--ink)}

.record{
  min-height:16px;margin:8px 0 4px;
  font-family:'Share Tech Mono',monospace;font-size:clamp(9px,.85vw,11px);
  letter-spacing:.05em;color:var(--green);
}
.record.new{color:var(--red)}

.boardwrap{margin:8px 0 2px}
.boardhead{
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid rgba(22,23,26,.30);
  padding-bottom:4px;
  font-family:'Saira Condensed',sans-serif;font-weight:600;
  font-size:clamp(9px,.85vw,10.5px);letter-spacing:.13em;text-transform:uppercase;color:var(--green);
}
.board{min-height:24px;margin-top:2px}
.boardrow{
  display:grid;grid-template-columns:26px 1fr auto;align-items:baseline;gap:8px;
  padding:3px 0;border-bottom:1px solid rgba(22,23,26,.10);
  font-family:'Saira Condensed',sans-serif;font-size:clamp(11px,1vw,12.5px);
  letter-spacing:.04em;
}
.boardrow .brank{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--green)}
.boardrow a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(22,23,26,.3)}
.boardrow a:hover{color:var(--red)}
.boardrow .bname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boardrow .bval{font-family:'Share Tech Mono',monospace;font-size:clamp(10px,.95vw,12px);color:var(--ink)}
.boardrow.mine{background:rgba(228,118,27,.16);border-left:3px solid var(--orange);padding-left:5px}
.boardempty{font-family:'Saira Condensed',sans-serif;font-size:11px;letter-spacing:.08em;color:var(--green);padding:6px 0}

@media (max-width:560px){
  :root{--rail-h:clamp(104px,17vh,150px);--plate-w:clamp(54px,14.5vw,64px)}
  .card{width:min(94vw,470px)}
  .maintitle{width:min(76vw,300px)}
  .hint{max-width:56vw;gap:1px 10px}
  .plates{gap:5px}
  .plates.left{left:9px}
  .plates.right{right:9px}
  h1{max-width:84%}
  .firebtn kbd{display:none}
}
@media (max-height:640px) and (orientation:landscape){
  :root{--rail-h:clamp(86px,19vh,120px)}
  .card{padding:16px 20px;max-height:94vh}
  h1{font-size:clamp(30px,5.4vw,44px)}
  .lede{margin:6px 0 8px}
  .notes > div{padding:3px 0}
  .firebtn{min-height:42px;margin-top:11px}
}
@media (hover:none){
  .firebtn kbd{display:none}
}