@font-face{font-family:"Jersey 10";src:url(fonts/jersey10.woff2) format("woff2");font-display:block}
@font-face{font-family:"Silkscreen";src:url(fonts/silkscreen.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Silkscreen";src:url(fonts/silkscreen700.woff2) format("woff2");font-weight:700;font-display:block}
@font-face{font-family:"VT323";src:url(fonts/vt323.woff2) format("woff2");font-display:block}
:root{--u:2px;--ink:#2B1E3A;--parch:#F6EBCB;--shade:#D9C59A;--gold:#FFD23F;--gold2:#E09A1A;--red:#E5383B;--crim:#8E1B2E;--teal:#3F8F8B;--pink:#FF6FB5;--navy:#2E3A6E}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#EADDB6;color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0}
#stage{position:absolute;width:calc(256*var(--u));height:calc(384*var(--u));overflow:hidden;background:#7EC8F2;outline:calc(2*var(--u)) solid var(--ink);box-shadow:0 0 0 calc(4*var(--u)) var(--shade),0 0 0 calc(5*var(--u)) var(--ink)}
#gamewrap,#gamewrap canvas{position:absolute;left:0;top:0;width:100%!important;height:100%!important;image-rendering:pixelated;image-rendering:crisp-edges}
.hidden{display:none!important}
button{font-family:"Silkscreen",monospace;color:var(--ink);cursor:pointer}
/* ---------- CRT ---------- */
#crt{position:absolute;inset:0;pointer-events:none;display:none;z-index:5;border-radius:calc(10*var(--u))}
#crt.on{display:block;box-shadow:inset 0 0 calc(28*var(--u)) rgba(20,10,40,.55),inset 0 0 calc(6*var(--u)) rgba(20,10,40,.6)}
#crt.on::before{content:"";position:absolute;inset:0;background-image:var(--scan);background-size:100% var(--u);opacity:.25}
/* ---------- HUD ---------- */
#hud{position:absolute;left:0;top:0;width:100%;height:calc(26*var(--u));background:var(--parch);border-bottom:calc(2*var(--u)) solid var(--ink);box-shadow:inset 0 0 0 var(--u) var(--gold2),inset 0 0 0 calc(2*var(--u)) var(--parch),inset 0 0 0 calc(3*var(--u)) var(--shade);display:flex;align-items:stretch;z-index:4;padding:0 calc(5*var(--u))}
.hcell{display:flex;flex-direction:column;justify-content:center}
.hl{flex:1}.hm{flex:1.3;align-items:center}.hr{flex:1;align-items:flex-end;flex-direction:row;gap:calc(4*var(--u));justify-content:flex-end}
.big{font-family:"Jersey 10";font-size:calc(20*var(--u));line-height:.8;color:var(--ink)}
#hScore{color:var(--crim)}
#hPurity{display:flex;gap:var(--u);height:calc(6*var(--u))}
#hPurity i{width:calc(7*var(--u));height:calc(6*var(--u));background-image:var(--heart);background-size:100% 100%;image-rendering:pixelated}
#hPurity i.off{opacity:.25}
#hTier{font-family:"Silkscreen";font-size:calc(8*var(--u));line-height:1;text-align:center;white-space:normal;letter-spacing:0;max-width:calc(118*var(--u))}
.hm{min-width:0}
#hCombo{font-family:"Jersey 10";font-size:calc(10*var(--u));color:var(--pink);line-height:1;height:calc(10*var(--u));text-shadow:var(--u) var(--u) 0 var(--ink);transform-origin:center}
#hCombo.pop{animation:cpop .25s steps(3)}
@keyframes cpop{0%{transform:scale(1.6)}100%{transform:scale(1)}}
.mini{font-family:"Silkscreen";font-size:calc(8*var(--u));background:var(--parch);border:calc(2*var(--u)) solid var(--ink);box-shadow:0 var(--u) 0 var(--ink);padding:calc(1*var(--u)) calc(3*var(--u));line-height:1;height:calc(16*var(--u));min-width:calc(16*var(--u))}
.mini:active{transform:translateY(var(--u));box-shadow:none}
#rules{position:absolute;left:calc(3*var(--u));top:calc(29*var(--u));max-width:calc(120*var(--u));background:rgba(246,235,203,.88);border:var(--u) solid var(--ink);padding:calc(2*var(--u)) calc(3*var(--u));z-index:3;pointer-events:auto}
.rt{font-family:"Silkscreen";font-size:calc(8*var(--u));color:var(--crim);line-height:1.1}
#rulesList{font-family:"VT323";font-size:calc(9*var(--u));line-height:.95}
#rulesList div::before{content:"\2022 "}
#rules.collapsed #rulesList{display:none}
#meter{position:absolute;right:calc(2*var(--u));top:calc(40*var(--u));width:calc(9*var(--u));height:calc(150*var(--u));z-index:3;pointer-events:none}
#meterLine{position:absolute;left:calc(3*var(--u));top:0;bottom:0;width:calc(3*var(--u));background:var(--teal);border:var(--u) solid var(--ink)}
#meter .notch{position:absolute;left:0;width:calc(9*var(--u));height:calc(2*var(--u));background:var(--ink)}
#meter .notch.done{background:var(--gold)}
#meterMark{position:absolute;left:calc(-1*var(--u));width:calc(11*var(--u));height:calc(5*var(--u));background:var(--gold);border:var(--u) solid var(--ink)}
#hint{position:absolute;right:calc(14*var(--u));top:calc(29*var(--u));text-align:center;line-height:1.2;font-family:"Silkscreen";font-size:calc(8*var(--u));background:var(--parch);border:var(--u) solid var(--ink);padding:calc(2*var(--u)) calc(4*var(--u));white-space:pre;z-index:3;pointer-events:none}
/* ---------- SCREENS ---------- */
.screen{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(5*var(--u));padding:calc(6*var(--u))}
#loading{background:var(--parch);z-index:30}
.lhead{font-family:"Silkscreen";font-weight:700;font-size:calc(8*var(--u));color:var(--crim);text-align:center;letter-spacing:calc(.5*var(--u))}
.vt{font-family:"VT323";font-size:calc(12*var(--u));line-height:1;text-align:center}
.vt.small{font-size:calc(10*var(--u));opacity:.85}
.vt.huge{font-size:calc(22*var(--u));line-height:.95;margin:calc(4*var(--u)) 0}
.vt.it{font-style:italic;color:var(--crim)}
.slabs{display:flex;flex-direction:column;gap:calc(5*var(--u));width:calc(170*var(--u))}
.slabs.row{flex-direction:row;width:auto}
.slab{font-family:"Silkscreen";font-size:calc(8*var(--u));background:var(--parch);border:calc(2*var(--u)) solid var(--ink);box-shadow:0 calc(2*var(--u)) 0 var(--ink),inset 0 calc(-2*var(--u)) 0 var(--shade);padding:calc(3*var(--u)) calc(4*var(--u));line-height:1.1;position:relative;text-align:center}
.slab b{color:var(--crim);font-weight:700}
.slab:active,.slab.press{transform:translateY(calc(2*var(--u)));box-shadow:inset 0 calc(-2*var(--u)) 0 var(--shade)}
.slab:focus-visible{outline:var(--u) dashed var(--crim);outline-offset:var(--u)}
.slab.gold{background:var(--gold);box-shadow:0 calc(2*var(--u)) 0 var(--ink),inset 0 calc(-2*var(--u)) 0 var(--gold2)}
.slab.red{background:var(--red);color:#F4F4EE;box-shadow:0 calc(2*var(--u)) 0 var(--ink),inset 0 calc(-2*var(--u)) 0 var(--crim)}
.bigslab{font-size:calc(10*var(--u));padding:calc(5*var(--u)) calc(10*var(--u))}
.stampico{display:inline-block;width:calc(8*var(--u));height:calc(8*var(--u));vertical-align:middle;margin-right:calc(3*var(--u));background-image:var(--stampico);background-size:100% 100%;image-rendering:pixelated}
/* menu cover */
#menu{background:var(--parch);padding:calc(4*var(--u))}
.cover{position:relative;width:100%;height:100%;border:calc(2*var(--u)) solid var(--ink);box-shadow:inset 0 0 0 calc(2*var(--u)) var(--parch),inset 0 0 0 calc(3*var(--u)) var(--gold2),inset 0 0 0 calc(4*var(--u)) var(--parch),inset 0 0 0 calc(5*var(--u)) var(--ink);display:flex;flex-direction:column;align-items:center;padding:calc(8*var(--u)) calc(8*var(--u)) calc(6*var(--u));gap:calc(3*var(--u))}
.cvtop,.cvbot{width:100%;display:flex;justify-content:space-between;font-family:"Silkscreen";font-size:calc(8*var(--u));line-height:1;transform:scale(.75);transform-origin:center}
.cvtop{color:var(--teal);width:133%}
.cvbot{margin-top:auto;transform:none}
.link{background:none;border:0;font-size:calc(8*var(--u));padding:calc(2*var(--u)) 0;text-decoration:underline;text-underline-offset:calc(1*var(--u))}
.link b{color:var(--crim)}
#logo,#ribbon,#menuEllen{image-rendering:pixelated;display:block}
.skywin{position:relative;width:calc(150*var(--u));height:calc(84*var(--u));margin:calc(2*var(--u)) 0;border:calc(2*var(--u)) solid var(--ink);background-image:var(--skywin);background-size:100% 100%;image-rendering:pixelated;display:flex;justify-content:center;align-items:flex-end}
#graceBadge{position:absolute;top:calc(2*var(--u));font-family:"Silkscreen";font-size:calc(8*var(--u));background:var(--gold);border:var(--u) solid var(--ink);padding:0 calc(2*var(--u))}
#rejectStamp{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%) rotate(-14deg);font-family:"Jersey 10";font-size:calc(40*var(--u));color:var(--red);border:calc(3*var(--u)) solid var(--red);padding:0 calc(6*var(--u));pointer-events:none;animation:slam .25s steps(4)}
@keyframes slam{0%{transform:translate(-50%,-50%) rotate(-14deg) scale(2.2);opacity:.2}100%{transform:translate(-50%,-50%) rotate(-14deg) scale(1)}}
/* ledger */
#board,#about,#pause,#namebox{background:rgba(43,30,58,.55)}
.ledger,.page{width:100%;max-height:calc(330*var(--u));background:var(--parch);border:calc(2*var(--u)) solid var(--ink);box-shadow:inset 0 0 0 calc(3*var(--u)) var(--crim),inset 0 0 0 calc(4*var(--u)) var(--gold);padding:calc(8*var(--u)) calc(8*var(--u));display:flex;flex-direction:column;gap:calc(3*var(--u));overflow:hidden}
.page{max-height:calc(300*var(--u))}
.lsub{font-family:"VT323";font-size:calc(10*var(--u));text-align:center;line-height:1}
.tabs{display:flex;gap:calc(3*var(--u));justify-content:center}
.tabs button{font-size:calc(8*var(--u));background:var(--parch);border:var(--u) solid var(--ink);padding:var(--u) calc(4*var(--u))}
.tabs button.on{background:var(--crim);color:var(--parch)}
.lcols,.lrow{display:grid;grid-template-columns:calc(14*var(--u)) 1fr calc(42*var(--u)) calc(28*var(--u)) calc(14*var(--u));align-items:baseline;gap:calc(2*var(--u))}
.lcols{font-family:"Silkscreen";font-size:calc(8*var(--u));border-bottom:var(--u) solid var(--ink);color:var(--crim)}
#lrows{overflow-y:auto;flex:1;min-height:calc(60*var(--u));touch-action:pan-y}
.lrow{font-family:"VT323";font-size:calc(11*var(--u));line-height:1;border-bottom:var(--u) solid var(--shade);padding:calc(1*var(--u)) 0}
.lrow .nm{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lrow .nm a{color:var(--navy)}
.lrow .tt{grid-column:2 / 6;font-style:italic;color:var(--crim);font-size:calc(9*var(--u))}
.lrow .rk{font-family:"Jersey 10";font-size:calc(12*var(--u))}
.lrow.top .rk{color:var(--gold2);text-shadow:var(--u) var(--u) 0 var(--ink)}
.lrow.me{background:rgba(255,210,63,.35)}
#lmine{font-family:"VT323";font-size:calc(10*var(--u));text-align:center;line-height:1}
#aboutText{text-align:left;font-size:calc(11*var(--u));overflow-y:auto;touch-action:pan-y}
#aboutText p{margin:0 0 calc(4*var(--u))}
#aboutText b{font-family:"Silkscreen";font-size:calc(8*var(--u));color:var(--crim);font-weight:400}
.help{text-align:left;font-size:calc(11*var(--u));overflow-y:auto}
.help p{margin:0 0 calc(3*var(--u))}
.help b{font-family:"Silkscreen";font-size:calc(8*var(--u));color:var(--crim);font-weight:400}
.testi{display:flex;gap:calc(2*var(--u));align-items:center;font-family:"Silkscreen";font-size:calc(8*var(--u))}
input{font-family:"VT323";font-size:calc(14*var(--u));background:#fff;border:var(--u) solid var(--ink);color:var(--ink);padding:0 calc(3*var(--u));width:100%;min-width:0;border-radius:0;-webkit-user-select:text;user-select:text}
.testi input{flex:1}
/* game over */
#over{background:rgba(26,16,48,.7)}
.book{position:absolute;inset:0;display:flex;pointer-events:none}
.book .cv{flex:1;background:var(--crim);border:calc(2*var(--u)) solid var(--ink);box-shadow:inset 0 0 0 calc(3*var(--u)) var(--gold)}
.book .l{transform-origin:left;animation:shutL .5s steps(5) forwards}
.book .r{transform-origin:right;animation:shutR .5s steps(5) forwards}
@keyframes shutL{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes shutR{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.overin{position:relative;width:100%;background:var(--parch);border:calc(2*var(--u)) solid var(--ink);box-shadow:inset 0 0 0 calc(3*var(--u)) var(--gold2);padding:calc(10*var(--u)) calc(8*var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(3*var(--u));animation:popin .3s steps(4) .45s both}
@keyframes popin{0%{transform:scale(.4)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
#oStats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(4*var(--u));width:100%;text-align:center}
#oStats div{font-family:"Silkscreen";font-size:calc(8*var(--u))}
#oStats b{display:block;font-family:"Jersey 10";font-size:calc(20*var(--u));font-weight:400;color:var(--crim);line-height:.9}
#oBest{color:var(--teal)}
#toast{position:absolute;left:50%;bottom:calc(30*var(--u));transform:translateX(-50%);width:calc(220*var(--u));background:var(--parch);border:calc(2*var(--u)) solid var(--ink);font-family:"VT323";font-size:calc(12*var(--u));line-height:1;text-align:center;padding:calc(3*var(--u));z-index:40;animation:popin .2s steps(3)}
/* ---------- PADS ---------- */
#pads{position:absolute;inset:0;pointer-events:none;z-index:20}
#pads button{position:absolute;pointer-events:auto;touch-action:none;font-family:"Silkscreen";border:calc(2*var(--pu,3px)) solid var(--ink);box-shadow:0 calc(2*var(--pu,3px)) 0 var(--ink)}
#pads .pad{width:var(--pw);height:var(--ph);background:rgba(246,235,203,.82);font-size:calc(var(--ph)*.38)}
#pads .jump{width:var(--jw);height:var(--jw);border-radius:50%;background:var(--gold);font-size:calc(var(--jw)*.2);box-shadow:0 calc(2*var(--pu,3px)) 0 var(--ink),inset 0 calc(-3*var(--pu,3px)) 0 var(--gold2)}
#pads button.down{transform:translateY(calc(2*var(--pu,3px)));box-shadow:none}
#pads.overlay .pad{background:rgba(246,235,203,.5)}
#pads.overlay .jump{background:rgba(255,210,63,.7)}

.tagline{font-family:"VT323";font-size:calc(11*var(--u));color:var(--teal);text-align:center;line-height:1;margin-top:calc(4*var(--u))}

.side{position:absolute;width:calc(100*var(--u));height:calc(384*var(--u));background-size:100% 100%;image-rendering:pixelated;outline:calc(2*var(--u)) solid var(--ink);box-shadow:0 0 0 calc(4*var(--u)) var(--shade),0 0 0 calc(5*var(--u)) var(--ink)}