@font-face{font-family:"ZX";src:url("../fonts/PressStart2P.woff") format("woff");font-display:block}
:root{
  --k:#000;--b:#0000D7;--B:#0000FF;--r:#D70000;--R:#FF0000;--m:#D700D7;--M:#FF00FF;
  --g:#00D700;--G:#00FF00;--c:#00D7D7;--C:#00FFFF;--y:#D7D700;--Y:#FFFF00;--w:#D7D7D7;--W:#FFFFFF;
  --font:"ZX",ui-monospace,monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;color:var(--W);font-family:var(--font);font-size:11px;line-height:1.6;overscroll-behavior:none}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font-family:var(--font);font-size:11px;color:inherit;cursor:pointer;touch-action:manipulation}
#app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 10px;background:#000;border-bottom:4px solid var(--b);min-height:60px}
.bar h1{flex:1;margin:0;font-size:13px;line-height:1.35;font-weight:normal;color:var(--Y);text-shadow:2px 2px 0 var(--r);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.iconbtn{width:44px;height:44px;border:3px solid var(--W);background:var(--b);font-size:16px;flex:none}
.iconbtn:active{background:var(--B)}
.toggles{display:flex;gap:6px;flex:none}
.tog{width:58px;height:44px;border:3px solid var(--G);background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0}
.tog span{font-size:7px;color:var(--w)}
.tog b{font-weight:normal;font-size:10px;color:var(--G)}
.tog.off{border-color:var(--R)}
.tog.off b{color:var(--R)}
main{flex:1;display:flex;flex-direction:column;padding:10px 8px calc(12px + var(--safe-b))}
.stripe{display:inline-block;width:64px;height:20px;background:linear-gradient(115deg,transparent 0 22%,var(--R) 22% 36%,var(--Y) 36% 50%,var(--G) 50% 64%,var(--C) 64% 78%,transparent 78%)}
/* menu */
.hero{position:relative;border:4px solid var(--W);padding:12px;margin-bottom:12px;background:#000;overflow:hidden}
.hero p{margin:0;color:var(--C);font-size:10px}
.hero .stripe{position:absolute;right:-6px;bottom:0;width:110px;height:100%}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:12px 10px 10px;background:#000;border:4px solid var(--c);min-height:118px;overflow:hidden}
.tile:active{transform:translate(2px,2px)}
.tile canvas{width:48px;height:48px;image-rendering:pixelated}
.tile .nm{font-size:12px;color:var(--W)}
.tile .bs{font-size:8px;color:var(--Y);line-height:1.5}
.tile .stripe{position:absolute;right:-10px;top:0;width:44px;height:20px}
.tile.resume::after{content:"SAVED";position:absolute;top:10px;right:8px;font-size:7px;color:#000;background:var(--G);padding:2px 3px}
.foot{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;font-size:8px;color:var(--w)}
.status{color:var(--G)}
.status.warn{color:var(--Y)}
.btn{min-height:44px;padding:10px 12px;border:3px solid var(--W);background:var(--b);color:var(--W)}
.btn:active{background:var(--B)}
.btn.red{background:var(--r)}.btn.green{background:var(--g);color:#000}.btn.yellow{background:var(--y);color:#000}.btn.black{background:#000}
.btn.on{background:var(--Y);color:#000}
.row{display:flex;gap:6px;align-items:center}
.row.c{justify-content:center}
.row.sb{justify-content:space-between}
.stats{display:flex;justify-content:space-between;gap:6px;margin-bottom:8px;font-size:10px}
.stat{flex:1;border:3px solid var(--b);padding:5px 6px;text-align:center;min-width:0}
.stat small{display:block;font-size:7px;color:var(--C)}
.stat b{font-weight:normal;color:var(--Y);font-size:11px;white-space:nowrap}
.tools{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.tools .btn{flex:1;font-size:9px;padding:8px 4px}
/* overlay */
.ov{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:18px}
.ov .box{width:100%;max-width:400px;background:#000;border:4px solid var(--Y);padding:16px;text-align:center;box-shadow:8px 8px 0 var(--r)}
.ov h2{margin:0 0 12px;font-size:15px;font-weight:normal;color:var(--Y);line-height:1.5}
.ov p{margin:0 0 12px;font-size:10px;color:var(--W)}
.ov .btns{display:flex;flex-direction:column;gap:8px}
.blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.shake{animation:shake .25s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* boot */
#boot{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:28px;
  background:repeating-linear-gradient(0deg,var(--R) 0 9px,var(--C) 9px 18px);background-size:100% 18px;animation:loadA .4s linear infinite}
#boot.data{background:repeating-linear-gradient(0deg,var(--B) 0 3px,var(--Y) 3px 5px);background-size:100% 5px;animation:loadB .12s linear infinite}
@keyframes loadA{to{background-position:0 18px}}
@keyframes loadB{to{background-position:0 5px}}
#boot.gone{display:none}
.boot-inner{width:100%;height:100%;max-width:520px;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center}
#bootPlane{width:128px;height:128px;image-rendering:pixelated}
.boot-title{font-size:22px;line-height:1.5;color:var(--Y);text-shadow:3px 3px 0 var(--r)}
.boot-sub{color:var(--C);font-size:11px}
.boot-tap{color:var(--W);font-size:13px}
.boot-foot{color:var(--w);font-size:8px}
canvas.pix{image-rendering:pixelated}
.sec{font-size:11px;font-weight:normal;margin:14px 2px 8px;display:flex;align-items:center;justify-content:space-between}.sec .stripe{width:56px;height:14px}
.bar h1 small{display:block;font-size:7px;line-height:1.4;color:var(--C);text-shadow:none;margin-top:4px;white-space:normal}
.boot-tag{font-size:10px;line-height:1.7;color:var(--W)}
.netbtn{width:100%;margin:12px 0 4px;padding:14px 10px;font-size:12px}
.netbtn small{display:block;font-size:7px;margin-top:6px;line-height:1.6}
.netbar{font-size:9px;padding:6px 8px;margin:0 0 8px;border:3px solid var(--G);color:var(--G);text-align:center;line-height:1.6}
.netbar.wait{border-color:var(--Y);color:var(--Y)}
.netbar.down{border-color:var(--R);color:var(--R)}
/* catalogue button + badges */
.catbtn{width:100%;margin:10px 0 2px;padding:14px 10px;font-size:13px;background:#0000D7;color:#FFFF00;border:4px solid #FFFF00;box-shadow:5px 5px 0 #D70000;text-align:left}
.catbtn small{display:block;font-size:7px;margin-top:7px;line-height:1.7;color:#FFF}
.badge,.tile .upd{background:#FFFF00;color:#000;padding:2px 4px;font-size:7px;animation:blink 1s steps(1) infinite}
.tile .upd{position:absolute;top:6px;right:6px;animation:none;box-shadow:2px 2px 0 #D70000}
.tile .pl{position:absolute;bottom:6px;right:6px;font-size:7px;color:#000;background:#00FFFF;padding:2px 3px}
/* pass-the-phone player setup */
.ppf{display:block;margin-top:8px}.ppn{display:flex;gap:4px;margin-bottom:8px}.ppn .btn{flex:1;font-size:8px;padding:8px 2px}
.ppr{display:flex;align-items:center;gap:6px;margin:5px 0}.ppr i{width:16px;height:16px;flex:none;border:2px solid #FFF}
.ppr input{flex:1;min-width:0;font-family:var(--font);font-size:11px;background:#000;color:#FFF;border:3px solid #0000D7;padding:7px 6px;text-transform:uppercase}
.ppr .btn{font-size:8px;padding:8px 6px;min-width:70px}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:60;background:#FFFF00;color:#000;font-size:9px;line-height:1.6;padding:8px 10px;border:3px solid #000;box-shadow:4px 4px 0 #D70000;max-width:90vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
/* casino */
.chipbar{display:flex;align-items:center;justify-content:space-between;gap:8px;border:3px solid #FFFF00;padding:6px 8px;font-size:9px}
.chipbar .btn{padding:6px 8px;font-size:8px}.chipc{display:flex;align-items:center;gap:6px}.chipc b{color:#FFFF00;font-weight:normal;font-size:12px}
.chipc i{width:12px;height:12px;background:#D70000;box-shadow:inset 0 0 0 3px #FFFFFF,inset 0 0 0 5px #D70000;display:inline-block}
.pmo{font-size:7px;color:#00D7D7;text-align:center;margin:4px 0 6px;line-height:1.5}
.card{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:36px;height:50px;background:#FFFFFF;color:#000;border:2px solid #000;outline:2px solid #FFFFFF;margin:2px;font-size:11px;vertical-align:top}
.card.red{color:#D70000}.card img{width:14px;height:14px;image-rendering:pixelated}.card b{font-weight:normal}
.card.back{background:repeating-linear-gradient(45deg,#0000D7 0 4px,#D70000 4px 8px);outline-color:#FFFF00}
.card.sm{width:28px;height:40px;font-size:9px}.card.sm img{width:11px;height:11px}
.card.dim{opacity:.45}.card.win{outline-color:#00FF00;box-shadow:0 0 0 4px #00FF00}
.casnote{font-size:8px;line-height:1.7;color:#00FFFF;border:3px dashed #00D7D7;padding:8px;margin:0 0 10px;text-align:center}
.chipc small{font-size:7px;color:#00FFFF}
#musicBtn .note{font-family:sans-serif;font-style:normal;margin-right:3px}
.setl{display:flex;flex-direction:column;gap:6px;text-align:left}.setl small{font-size:7px;line-height:1.5;color:var(--w);margin-bottom:6px}
.ans{font:inherit;font-size:16px;width:80px;text-align:center;margin-top:8px;background:#000;color:#FFF;border:2px solid #FFF;padding:4px}
/* COLOUR-BLIND SYMBOLS setting */
.cbsym .ctr{position:relative}.cbsym .ctr::after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#000;font-size:min(4vw,20px);line-height:1}
.cbsym .ctr.R::after{content:'\2665'}.cbsym .ctr.Y::after{content:'\2605'}
/* category pages: tabs, arrows + dots, swipe track */
.mbar{display:flex;justify-content:flex-end;margin:10px 0 4px}.mbar .btn{font-size:8px;padding:6px 8px}
.pgtabs{display:flex;gap:6px;overflow-x:auto;padding:8px 2px 6px;scrollbar-width:none}.pgtabs::-webkit-scrollbar{display:none}
.pgtab{flex:0 0 auto;font:inherit;font-size:9px;background:#000;color:var(--c);border:3px solid var(--c);padding:7px 8px;cursor:pointer}
.pgtab.on{background:var(--c);color:#000}.pgtab:focus-visible,.pgdot:focus-visible,.pgarr:focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}
.pgnav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 8px}.pgarr{min-width:44px;padding:6px 0;font-size:12px}
.pgdots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.pgdot{width:12px;height:12px;padding:0;border:2px solid #FFFFFF;background:#000;cursor:pointer}.pgdot.on{background:#FFFFFF}
.pgview{overflow:hidden;touch-action:pan-y;transition:height .2s}.pgtrack{display:flex;transition:transform .25s ease-out;will-change:transform;align-items:flex-start}
.pgpage{flex:0 0 100%;min-width:0;box-sizing:border-box;padding:0 1px}
.tile .pl{position:absolute;right:6px;bottom:6px;font-size:8px;background:#000;color:#FFFFFF;border:2px solid #FFFFFF;padding:2px 3px}
.tile .pl.go{color:#000;background:#FFFF00;border-color:#FFFF00}
.rqf{display:flex;flex-direction:column;gap:8px;text-align:left;margin-top:8px}.rqf label{display:flex;flex-direction:column;gap:4px;font-size:8px}
.rqf input,.rqf textarea{font:inherit;font-size:12px;background:#000;color:#FFFFFF;border:3px solid #FFFFFF;padding:6px;text-transform:uppercase}.rqf textarea{font-size:10px;resize:vertical}
.rqf input:focus,.rqf textarea:focus{border-color:#FFFF00;outline:none}.rqf small{font-size:7px;color:#00FFFF}.rqp{line-height:1.6}.rqe{color:#FF9A1F;font-size:8px;min-height:10px}
.nick{display:flex;flex-direction:column;gap:4px;font-size:8px}.nick input{font:inherit;font-size:14px;background:#000;color:#FFFF00;border:3px solid #FFFF00;padding:6px}