@font-face{font-family:Kanka HUD;src:url(../fonts/kanka-hud.ttf) format("truetype");font-display:block}@font-face{font-family:Kanka Title;src:url(../fonts/kanka-title.ttf) format("truetype");font-display:block}:root{--ink: #1a1220;--panel: #241a30;--panel2: #2e2240;--gold: #f0c818;--cream: #f6e8b8;--red: #e0303c;--blue: #4a9af0;--green: #4ad06a;--muted: #a89cb8}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;background:#0e0a14;color:var(--cream);overflow:hidden;overscroll-behavior:none}body{font-family:Kanka HUD,monospace;font-size:10px;line-height:1.8;text-transform:uppercase;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}#stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}#bezel{position:relative;display:block;line-height:0}#screen{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;box-shadow:0 0 0 2px #2e2240,0 10px 40px #0009}body.crt #screen{filter:contrast(1.06) saturate(1.08) brightness(1.02) blur(.45px)}#glass{position:absolute;inset:0;pointer-events:none;display:none;border-radius:6px}body.crt #glass{display:block;background:repeating-linear-gradient(180deg,#0003 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#ff50500d 0 1px,#50ff5009 1px 2px,#5050ff0e 2px 3px),radial-gradient(115% 115% at 50% 45%,#ffffff0d,#fff0 48%,#0006),linear-gradient(164deg,#ffffff12,#fff0 26%);box-shadow:inset 0 0 22px #06040c80}.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:16px;z-index:5}.screen.show{display:flex}.screen.overlay{background:#0e0a1459}#menu,#select,#lobby,#howto,#settings,#credits,#pause,#loading{background:#0e0a148c}#title{flex-direction:column;gap:18px;justify-content:flex-start;padding-top:7vh;padding-bottom:30px;pointer-events:auto;cursor:pointer}#logo{width:min(92vw,640px);height:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 0 rgba(0,0,0,.45))}.blink{animation:blink 1.1s steps(2) infinite;text-shadow:2px 2px 0 var(--ink);color:var(--gold);margin-top:auto}.credit{position:absolute;bottom:10px;color:var(--muted);text-shadow:1px 1px 0 #000}@keyframes blink{50%{opacity:0}}.panel{background:var(--panel);border:3px solid var(--ink);box-shadow:0 0 0 3px var(--gold),6px 6px 0 3px #00000080;padding:18px 22px;max-width:560px;width:100%;max-height:100%;overflow:auto}.panel.wide{max-width:860px}.panel.center{text-align:center}.panel.scroll{max-height:calc(100vh - 32px)}h2{font-family:Kanka Title,monospace;margin:0 0 14px;font-size:20px;color:var(--gold);text-shadow:2px 2px 0 var(--ink)}h3{font-size:10px;color:var(--blue);margin:12px 0 8px}p{margin:8px 0}.tiny{font-size:10px;color:var(--muted);line-height:1.8}.red{color:var(--red)}a{color:var(--blue)}.list{display:flex;flex-direction:column;gap:10px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}.buttons{justify-content:flex-end;margin-top:16px}button,input,select{font-family:inherit;font-size:10px;color:var(--cream)}button{background:var(--panel2);border:2px solid var(--ink);box-shadow:inset -2px -2px #00000059,inset 2px 2px #ffffff1f,0 0 0 2px #5a4a70;padding:10px 14px;cursor:pointer;text-align:left}button:hover,button:focus-visible,button.focus{outline:none;box-shadow:inset -2px -2px #00000059,inset 2px 2px #ffffff1f,0 0 0 2px var(--gold);color:#fff}button:hover:before,button:focus-visible:before{content:"▶ ";color:var(--gold)}button:active{transform:translate(1px,1px)}button.primary{background:#7a2a1a;box-shadow:inset -2px -2px #00000059,inset 2px 2px #ffffff26,0 0 0 2px var(--gold)}button.ghost{background:transparent}button.small{padding:6px 8px;font-size:10px}button[disabled]{opacity:.45;cursor:not-allowed}button.pick.on{background:#2a5a8a;box-shadow:0 0 0 2px var(--gold)}input[type=text],input:not([type]),select{background:var(--ink);border:2px solid #5a4a70;padding:8px;color:var(--cream)}input:focus,select:focus{outline:none;border-color:var(--gold)}#join-code{width:7.5em;text-transform:uppercase;letter-spacing:3px}input[type=range]{accent-color:var(--gold);width:200px}.bar{height:14px;border:2px solid var(--ink);background:#3a2a4a;box-shadow:0 0 0 2px #5a4a70}#loadbar{height:100%;width:0;background:var(--gold)}.roster{display:grid;grid-template-columns:104px minmax(0,1fr) 104px;gap:10px;align-items:stretch}.cards{display:block}.peek{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px;background:#1b1426;border:2px solid var(--ink);cursor:pointer;opacity:.6}.peek:hover,.peek:focus-visible{opacity:1;outline:none;box-shadow:inset 0 0 0 2px #6a5a86,0 0 0 2px var(--gold)}.peek:before{content:none!important}.peek .arw{color:var(--gold);font-size:9px;line-height:1}.peek canvas{width:84px;height:108px;border:2px solid var(--ink);background:#241a34;image-rendering:pixelated}.peek .nm{font-size:8px;letter-spacing:1px;color:var(--muted)}.peek:hover .nm{color:var(--gold)}.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}.rail .rtab{text-align:center;padding:6px 4px;font-size:9px;letter-spacing:1px;opacity:.6}.rail .rtab:before{content:none!important}.rail .rtab:hover,.rail .rtab:focus-visible{opacity:1;color:var(--gold)}.rail .rtab.on{opacity:1;color:var(--gold)}.card{background:var(--panel2);border:3px solid var(--ink);padding:12px;cursor:default;display:flex;gap:14px;align-items:stretch}.card>div{display:flex;flex-direction:column;flex:1;min-width:0}.card.on{background:#3a2a52}.card canvas{width:190px;height:226px;border:2px solid var(--ink);background:#241a34;image-rendering:pixelated;flex:none}.card h3{margin:0 0 6px;font-size:18px;letter-spacing:2px;color:var(--gold)}.card p{font-size:9px;color:var(--muted);line-height:1.9;margin:4px 0}.stats{display:grid;row-gap:4px;margin-top:auto;padding-top:8px;font-size:8px}.stats .stat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;align-items:center;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;text-align:left;cursor:help;color:inherit}.stats .stat:before{content:none!important}.stats .stat:focus-visible{outline:2px solid var(--gold);outline-offset:1px}.stats .stat:hover .sl,.stats .stat:focus-visible .sl{color:var(--gold)}.stats .sl{white-space:nowrap;color:var(--cream)}.stats .track{position:relative;height:7px;max-width:180px;background:#5a5268;box-shadow:inset 0 0 0 1px #171122,inset 0 1px #ffffff1a}.card .stats .track{max-width:none}.stats .track:after{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(90deg,#0e0a1400 0 calc(20% - 1px),#241a34 calc(20% - 1px) 20%)}.stats .track b{position:absolute;inset:0 auto 0 0;width:calc(var(--v) / 5 * 100%);background:linear-gradient(180deg,#ffe066,#f0c818 55%,#c08e10);box-shadow:inset 0 1px #fff6}#stat-tip{position:fixed;z-index:30;max-width:232px;padding:6px 8px;background:var(--panel);border:2px solid var(--gold);box-shadow:4px 4px #0000008c;font-size:8px;line-height:1.7;color:var(--cream);pointer-events:none}#stat-tip[hidden]{display:none}#stat-tip b{display:block;color:var(--gold);font-size:9px;letter-spacing:1px}#stat-tip p{margin:2px 0 4px;color:var(--muted)}#stat-tip .figs{display:flex;flex-wrap:wrap;gap:2px 8px}#stat-tip .figs em{font-style:normal;color:var(--gold)}.code{color:#fff;background:var(--ink);padding:4px 10px;letter-spacing:4px}.players{list-style:none;padding:0;margin:10px 0;display:grid;gap:8px}.players li{display:flex;align-items:center;gap:10px;background:var(--panel2);padding:8px 10px;border-left:4px solid var(--c, #888);font-size:10px}.players li .st{margin-left:auto;font-size:8px}.players li .ok{color:var(--green)}.players li .no{color:var(--muted)}.players li .off{color:var(--red)}.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}table.keys,table.food{border-collapse:collapse;width:100%;font-size:8px}table.keys td,table.food td{padding:4px;border-bottom:1px solid #3a2a4a;vertical-align:middle}.kbd{display:inline-block;min-width:22px;padding:4px 5px;background:#f6f2ea;color:var(--ink);border:2px solid var(--ink);box-shadow:0 2px #8a8090;text-align:center;margin:1px;cursor:pointer;font-size:8px}.kbd.wait{background:var(--gold)}.tips{padding-left:14px;font-size:8px;line-height:2;color:var(--cream)}.food canvas{width:26px;height:26px;image-rendering:pixelated}.food .grp td{padding-top:10px;color:var(--gold);letter-spacing:1px;border-bottom-color:var(--gold)}.shop{max-width:480px}.shoplist{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}.shoplist li{display:flex;align-items:center;gap:10px;padding:6px 8px;background:var(--panel2);border:2px solid transparent;cursor:pointer;font-size:9px}.shoplist li.sel{border-color:var(--gold);background:#3a2a52}.shoplist li.poor{opacity:.5}.shoplist li canvas{width:28px;height:28px;image-rendering:pixelated}.shoplist li .price{margin-left:auto;color:var(--gold)}.shoplist li .d{font-size:7px;color:var(--muted);display:block}#toast{position:absolute;top:12px;left:50%;transform:translate(-50%);background:var(--ink);border:2px solid var(--gold);padding:8px 12px;font-size:9px;z-index:50;display:none;max-width:90vw;text-align:center}#toast.show{display:block}#toast.err{border-color:var(--red);color:#ffb0b0}#pause-btn{position:absolute;top:8px;right:8px;z-index:20;display:none;padding:6px 9px;font-size:9px;opacity:.8}#pause-btn.show{display:block}#legend-close{position:absolute;right:1.5%;bottom:2%;z-index:12;display:none;padding:4px 7px;font-size:9px;line-height:1.2}#legend-close.show{display:block}#legend-close:before{content:none!important}#touch{position:absolute;inset:auto 0 0;height:46vh;max-height:260px;display:none;z-index:15;pointer-events:none;padding:8px calc(10px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));justify-content:space-between;align-items:flex-end}#touch.show{display:flex}#touch button{pointer-events:auto;opacity:.62;touch-action:none;text-align:center;padding:0;font-size:9px;background:#2e2240d9}#touch button.on{opacity:1;background:#7a2a1a}#touch button:before{content:none!important}.dpad{position:relative;width:156px;height:156px}.dpad button{position:absolute;width:52px;height:52px;font-size:16px}.dpad .u{left:52px;top:0}.dpad .d{left:52px;bottom:0}.dpad .l{left:0;top:52px}.dpad .r{right:0;top:52px}.abtn{display:grid;grid-template-columns:repeat(4,56px);grid-template-rows:30px 56px 56px;gap:6px}.abtn .big{width:56px;height:56px;border-radius:50%}.abtn .small{height:30px;border-radius:6px;font-size:7px}.abtn .a{grid-column:3;grid-row:3}.abtn .b{grid-column:4;grid-row:2}.abtn .c{grid-column:4;grid-row:3}.abtn .d{grid-column:3;grid-row:2}.abtn .e{grid-column:1;grid-row:1}.abtn .f{grid-column:2;grid-row:1}.abtn .g{grid-column:3;grid-row:1}.abtn .h{grid-column:4;grid-row:1}@media (max-width: 720px){body{font-size:10px}.cols{grid-template-columns:1fr}.roster{grid-template-columns:minmax(0,1fr)}.peek{display:none}.card canvas{width:118px;height:150px}.panel{padding:14px}h2{font-size:13px}}@media (orientation: portrait) and (max-width: 720px){#stage{align-items:flex-start;padding-top:8px}}.lang-row{margin-top:14px;gap:8px}.lang-btn.on{background:#2a5a8a;box-shadow:0 0 0 2px var(--gold);color:#fff}.panel{background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),linear-gradient(180deg,#2e2244,#241a34 55%,#1b1426);border:2px solid #0e0a14;box-shadow:inset 0 0 0 2px #4a3a5e,inset 0 0 0 4px #1a1220,0 0 0 2px #0e0a14,0 0 0 4px #c8a028,0 0 0 6px #0e0a14,8px 8px 0 6px #00000080;padding:20px 24px}.panel:after{content:"";position:absolute;inset:8px;pointer-events:none;background:radial-gradient(circle,#f0c818 1.8px,transparent 2px) left top / 7px 7px no-repeat,radial-gradient(circle,#f0c818 1.8px,transparent 2px) right top / 7px 7px no-repeat,radial-gradient(circle,#f0c818 1.8px,transparent 2px) left bottom / 7px 7px no-repeat,radial-gradient(circle,#f0c818 1.8px,transparent 2px) right bottom / 7px 7px no-repeat}.panel>*{position:relative;z-index:1}h2{font-size:20px;letter-spacing:1px;text-shadow:2px 2px 0 #7a2a1a,4px 4px 0 rgba(0,0,0,.55);border-bottom:2px solid #4a3a5e;padding-bottom:8px}h3{color:#8ac8ff;text-shadow:1px 1px 0 var(--ink)}button{background:linear-gradient(180deg,#46355e,#33264a 55%,#251b38);border:2px solid #0e0a14;box-shadow:inset 0 2px #ffffff29,inset 0 -3px #00000073,0 0 0 2px #6a5a86;text-shadow:1px 1px 0 rgba(0,0,0,.6)}button:hover,button:focus-visible,button.focus{box-shadow:inset 0 2px #fff3,inset 0 -3px #00000073,0 0 0 2px #f0c818,0 0 0 4px #7a2a1a}button.primary{background:linear-gradient(180deg,#a8361f,#8a2814 55%,#6e1e10);box-shadow:inset 0 2px #ffffff38,inset 0 -3px #00000073,0 0 0 2px #f0c818,0 0 0 4px #0e0a14}button.ghost{background:#140e1e99}button.small{padding:7px 10px}button.off{color:#b8a8c8;box-shadow:inset 0 2px #ffffff14,inset 0 -3px #00000073,0 0 0 2px #4a3a5e}input[type=range]{-webkit-appearance:none;appearance:none;height:12px;background:#140f1e;border:2px solid #0e0a14;box-shadow:inset 0 0 0 1px #5a4730}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:18px;background:#f0c818;border:2px solid #0e0a14;box-shadow:inset -2px -2px #b8860b,inset 2px 2px #fff0a0;cursor:pointer}input[type=range]::-moz-range-thumb{width:10px;height:16px;border-radius:0;background:#f0c818;border:2px solid #0e0a14}input[type=checkbox]{accent-color:#f0c818;width:14px;height:14px}.lang-row,.sound-row{border-top:1px dashed #4a3a5e;padding-top:10px;margin-top:12px}.lang-row>span,.sound-row>span{color:#8ac8ff}.help-btn{margin-left:auto}.card{background:linear-gradient(180deg,#352850,#241a34);box-shadow:inset 0 0 0 2px #4a3a5e,0 0 0 2px #0e0a14}.card.on{box-shadow:inset 0 0 0 2px #4a3a5e,0 0 0 3px #f0c818,0 0 0 5px #0e0a14}.kbd{box-shadow:0 3px #8a8090,0 0 0 2px #0e0a14}
