/* Shared look: Comic Pop (shell, tag and party games) and Pixel Retro (arcade, arena and co-op games).
   body[data-theme="comic"|"pixel"] is set by the phone shell. Fonts are local so the LAN works offline. */
@font-face{font-family:"Bangers";src:url(/fonts/Bangers-Regular.ttf) format("truetype");font-display:block}
@font-face{font-family:"Press Start 2P";src:url(/fonts/PressStart2P-Regular.ttf) format("truetype");font-display:block}
@font-face{font-family:"Lilita One";src:url(/fonts/LilitaOne-Regular.ttf) format("truetype");font-display:block}

:root{--ink:#111;--yel:#ffd93b;--red:#e8202a;--blu:#2a6bff;--pnavy:#2b2766;--pbg:#1d1b2e}

/* ---------- Comic Pop (default) ---------- */
body,body[data-theme="comic"]{background:#ffd93b radial-gradient(#f0b400 22%,transparent 24%) 0 0/14px 14px fixed;color:var(--ink);font-family:"Lilita One","Arial Rounded MT Bold",system-ui,sans-serif}
body[data-theme="comic"] .panel{background:#ffd93b radial-gradient(#f0b400 22%,transparent 24%) 0 0/14px 14px fixed;color:var(--ink)}
body[data-theme="comic"] h1{font-family:"Bangers",sans-serif;font-weight:400;font-size:44px;letter-spacing:2px;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink);margin:4px 0}
body[data-theme="comic"] p.sub{color:var(--ink);opacity:.85}
body[data-theme="comic"] .sec{font-family:"Bangers",sans-serif;font-size:22px;letter-spacing:2px;opacity:1;color:#fff;background:var(--ink);display:inline-block;padding:0 10px;transform:skew(-8deg)}
body[data-theme="comic"] .btn{font-family:"Bangers",sans-serif;font-weight:400;letter-spacing:2px;font-size:24px;color:#fff;background:var(--blu);border:4px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink)}
body[data-theme="comic"] .btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
body[data-theme="comic"] .btn.go{background:var(--red)}
body[data-theme="comic"] .btn.alt{background:#fff;color:var(--ink);font-size:20px}
body[data-theme="comic"] .btn.bad{background:var(--ink);color:var(--yel)}
body[data-theme="comic"] .btn[disabled]{opacity:.45}
body[data-theme="comic"] input{border:4px solid var(--ink);border-radius:12px;background:#fff;font-family:"Lilita One",sans-serif;box-shadow:4px 4px 0 var(--ink)}
body[data-theme="comic"] .stand{background:#fff;border:4px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
body[data-theme="comic"] .stand.me{outline:4px solid var(--blu)}
body[data-theme="comic"] #hTop{background:var(--red);border-bottom:5px solid var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff}
body[data-theme="comic"] #hdot{border-color:var(--ink);box-shadow:none}

/* ---------- Pixel Retro ---------- */
body[data-theme="pixel"]{background:var(--pbg) linear-gradient(rgba(0,0,0,.22) 50%,transparent 50%) 0 0/100% 4px fixed;color:#fff;font-family:"Lilita One","Arial Rounded MT Bold",system-ui,sans-serif}
body[data-theme="pixel"] .panel{background:#1d1b2e linear-gradient(rgba(0,0,0,.22) 50%,transparent 50%) 0 0/100% 4px fixed;color:#fff}
body[data-theme="pixel"] h1{font-family:"Press Start 2P",monospace;font-weight:400;font-size:20px;line-height:1.4;color:#ffe066;text-shadow:3px 3px 0 #000;margin:8px 0}
body[data-theme="pixel"] .sec{font-family:"Press Start 2P",monospace;font-size:10px;letter-spacing:0;opacity:1;color:#ffe066;text-shadow:2px 2px 0 #000}
body[data-theme="pixel"] .btn{font-family:"Press Start 2P",monospace;font-weight:400;font-size:13px;line-height:1.5;letter-spacing:0;color:#fff;background:#ff4d4d;border:4px solid #fff;border-radius:0;box-shadow:4px 4px 0 #000;text-shadow:2px 2px 0 #000}
body[data-theme="pixel"] .btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
body[data-theme="pixel"] .btn.go{background:#22b34a}
body[data-theme="pixel"] .btn.alt{background:#2a78ff;font-size:11px}
body[data-theme="pixel"] .btn.bad{background:#7a1020}
body[data-theme="pixel"] .btn[disabled]{opacity:.4}
body[data-theme="pixel"] input{border:4px solid #fff;border-radius:0;background:#000;color:#fff;font-family:"Press Start 2P",monospace;font-size:14px;box-shadow:4px 4px 0 #000}
body[data-theme="pixel"] .stand{background:#3b3566;border:3px solid #fff;border-radius:0;box-shadow:3px 3px 0 #000;color:#fff}
body[data-theme="pixel"] .stand.me{outline:3px solid #ffe066}
body[data-theme="pixel"] #hTop{background:var(--pnavy);border-bottom:4px solid #fff;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff}
body[data-theme="pixel"] #hdot{border-radius:0;border-color:#fff;box-shadow:none}

/* in-game menu (☰) */
body #gMenuBtn{background:#fff;color:var(--ink);border:4px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-weight:bold}
body[data-theme="pixel"] #gMenuBtn{border-radius:0;border-color:#fff;background:#000;color:#fff;box-shadow:3px 3px 0 #000}
#gMenu{background:rgba(17,17,17,.78)}
#gMenu .card{background:#fff;border:6px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 var(--ink);color:var(--ink)}
#gMenu .card h1{font-family:"Bangers",sans-serif;font-size:36px;color:var(--red);-webkit-text-stroke:3px var(--ink);text-shadow:none}
body[data-theme="pixel"] #gMenu .card{background:#2b2766;border:4px solid #fff;border-radius:0;box-shadow:8px 8px 0 #000;color:#fff}
body[data-theme="pixel"] #gMenu .card h1{font-family:"Press Start 2P",monospace;font-size:16px;color:#ffe066;-webkit-text-stroke:0;text-shadow:3px 3px 0 #000}
#gMenu .sub{color:inherit}

/* ---------- shell: join screen and hub (always Comic Pop) ---------- */
#pJoin .logo,#pHub .logo{font-family:"Bangers",sans-serif;letter-spacing:3px;color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--ink);transform:rotate(-2deg)}
#pJoin .logo b,#pHub .logo b{color:#fff}
#pJoin .logo i,#pHub .logo i{color:var(--yel)}
#pJoin .logo small{font-family:"Lilita One",sans-serif;-webkit-text-stroke:0;text-shadow:none;color:var(--ink);opacity:.8;letter-spacing:6px}
#pJoin .btn.go{background:var(--red);border-radius:12px}
#pJoin input{border-radius:12px;border-width:4px;font-size:24px}
#pHub .vipnote{background:#fff;border:4px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);padding:8px 12px;color:var(--ink);opacity:1}
#pHub .vipnote b{color:var(--red)}
#pHub .pchip{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-family:"Bangers",sans-serif;font-size:17px;letter-spacing:1px}
#pHub .pchip i{border-color:var(--ink)}#pHub .pchip.me{outline:3px solid var(--blu)}
#pHub .botrow{background:#fff;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--ink)}
#pHub .botrow b{background:var(--ink);color:var(--yel);padding:0 8px;border-radius:6px}
#pHub .botrow button{background:var(--blu);border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-family:"Bangers",sans-serif;letter-spacing:1px}
#pHub .botrow button.on{background:var(--red)}
#pHub .tabs{background:rgba(255,217,59,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
#pHub .tab{font-family:"Bangers",sans-serif;font-size:19px;letter-spacing:1px;background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
#pHub .tab.on{background:var(--blu);color:#fff}
#pHub .chead{font-family:"Bangers",sans-serif;font-size:24px;letter-spacing:2px;color:var(--yel);text-shadow:none;background:var(--ink);display:flex;width:max-content;padding:0 12px;margin:16px 2px 10px;transform:skew(-8deg);text-transform:uppercase}
#pHub .chead:after{display:none}
#pHub .tile{border:4px solid var(--ink);border-left-width:4px;border-radius:10px;box-shadow:4px 4px 0 var(--ink);margin-bottom:12px}
#pHub .tile .ic{border:3px solid var(--ink);border-radius:50%}
#pHub .tile .meta span{border-radius:6px;font-family:"Lilita One",sans-serif}
#pHub .tile .play{font-family:"Bangers",sans-serif;font-size:28px;letter-spacing:2px;background:var(--red);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:12px}
#pHub .tile.focus{box-shadow:0 0 0 5px var(--blu),4px 4px 0 5px var(--ink)}
#pHub .tile.t-comic{background:#fff;color:var(--ink)}
#pHub .tile.t-comic .ic{background:var(--yel)}
#pHub .tile.t-comic b{font-family:"Bangers",sans-serif;font-weight:400;font-size:27px;letter-spacing:1px;color:var(--red);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}
#pHub .tile.t-comic .meta span{background:var(--ink);color:var(--yel)}
#pHub .tile.t-comic.focus{background:#fff}
#pHub .tile.t-pixel{background:var(--pnavy);color:#fff;border-color:#fff;border-radius:0;box-shadow:4px 4px 0 #000}
#pHub .tile.t-pixel .ic{background:#111;border:3px solid var(--yel);border-radius:0}
#pHub .tile.t-pixel b{font-family:"Press Start 2P",monospace;font-weight:400;font-size:13px;line-height:1.4;color:#ffe066;text-shadow:2px 2px 0 #000}
#pHub .tile.t-pixel .meta span{background:#2a78ff;border:2px solid #fff;border-radius:0;font-size:10px}
#pHub .tile.t-pixel.focus{background:#3b3566;box-shadow:0 0 0 5px var(--blu),4px 4px 0 5px #000}
#pHub .tile .more{color:inherit}
#pHub .tile .lk{opacity:.8}

/* short notices from a game (hud.msg) */
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 56px);transform:translateX(-50%);max-width:92vw;z-index:50;display:none;padding:10px 16px;background:#fff;color:var(--ink);border:4px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink);font-family:"Lilita One",sans-serif;font-size:16px;text-align:center;pointer-events:none}
#toast.on{display:block}
body[data-theme="pixel"] #toast{background:#2b2766;color:#fff;border-color:#fff;border-radius:0;box-shadow:5px 5px 0 #000;font-size:15px}
#gMenuBtn{font-family:-apple-system,"Helvetica Neue",Arial,sans-serif}