@font-face{font-family:"Press Start 2P";src:url("/fonts/press-start-2p-latin-400-normal.woff2") format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url("/fonts/vt323-latin-400-normal.woff2") format("woff2");font-display:swap}
:root{
  --bg:#050506; --panel:#141613; --panel2:#1c1f1a; --line:#2f3a2c; --ink:#e4e8dc; --dim:#8a9484;
  --gold:#e8c860; --red:#e2363e; --green:#6ee07a; --blue:#5ab4ff; --cyan:#6ad8ff;
  --px:"Press Start 2P", ui-monospace, monospace; --tx:"VT323", ui-monospace, monospace;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--tx);font-size:21px;overflow:hidden;-webkit-font-smoothing:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
input{-webkit-user-select:text;user-select:text}
.hidden{display:none!important}
.dim{color:var(--dim)}
button{font-family:var(--px);cursor:pointer;touch-action:manipulation;color:inherit}
input,select{font-family:var(--tx);font-size:21px}
h1,h2{font-family:var(--px);font-weight:normal;margin:0}
h1{font-size:20px;color:var(--red);text-shadow:3px 3px 0 #000}
h2{font-size:11px;color:var(--gold);letter-spacing:1px}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.screen{position:fixed;inset:0}

.btn{background:#3d4a36;color:#eef2e6;border:0;padding:11px 15px;font-size:11px;letter-spacing:1px;
  box-shadow:inset -3px -3px 0 #252d20, inset 3px 3px 0 #58684e, 0 4px 0 #000;position:relative;top:0}
.btn:hover{filter:brightness(1.18)}
.btn:active{top:3px;box-shadow:inset -3px -3px 0 #252d20, inset 3px 3px 0 #58684e, 0 1px 0 #000}
.btn.big{font-size:15px;padding:16px 20px;background:#a8242c;box-shadow:inset -4px -4px 0 #6a1016, inset 4px 4px 0 #d8484e, 0 5px 0 #000;color:#fff}
.btn.small{font-size:9px;padding:9px 11px}
.btn.ghost{background:#22261f;box-shadow:inset -3px -3px 0 #141712, inset 3px 3px 0 #363c31, 0 4px 0 #000}
.btn:disabled{filter:grayscale(1) brightness(.6);cursor:default}
.panel{background:var(--panel);border:3px solid var(--line);box-shadow:0 5px 0 #000, inset 0 0 0 3px #0b0d0a;padding:12px;position:relative}
.err{color:var(--red);font-size:20px;text-align:center}
.err:empty{display:none}
.yen-home{position:absolute;top:calc(10px + var(--safe-t));left:12px;z-index:3;font-family:var(--px);font-size:10px;color:var(--dim);text-decoration:none;padding:8px 10px;background:rgba(5,5,6,.75);border:2px solid var(--line)}
.yen-home:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- menu ---------- */
#menuBg{position:absolute;inset:0;width:100%;height:100%}
.menu-wrap{position:relative;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:60px 14px 24px}
.logo{display:flex;flex-direction:column;align-items:center;font-family:var(--px);color:var(--red);margin:5vh 0 34px;text-align:center;animation:flick 6s infinite}
.logo .l1{font-size:24px;color:#b8c0b0;letter-spacing:8px;text-shadow:3px 3px 0 #000}
.logo .l2{font-size:54px;letter-spacing:4px;text-shadow:0 0 18px rgba(226,54,62,.6), 4px 4px 0 #3a0608, 7px 7px 0 #000;margin-top:10px}
@keyframes flick{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.35}}
.menu-panel{width:min(340px,100%);display:flex;flex-direction:column;gap:14px;background:rgba(20,22,19,.92)}
.menu-panel .btn.big{width:100%}
.join-row{display:flex;gap:8px}
.btn.big.pub{background:#2a6ac8;box-shadow:inset -4px -4px 0 #143c7a, inset 4px 4px 0 #5a9ae8, 0 5px 0 #000;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
.btn.big.pub small{font-size:10px;opacity:.8}
.pubtag{font-family:var(--px);font-size:9px;margin-left:10px;padding:4px 6px;border:2px solid #3aa0ff;color:#8ac8ff;vertical-align:middle}
#codeIn{flex:1;min-width:0;background:#080907;border:3px solid var(--line);color:var(--gold);font-family:var(--px);font-size:20px;text-align:center;text-transform:uppercase;letter-spacing:6px;padding:8px}
.mechip{display:flex;align-items:center;gap:10px;background:#080907;border:3px solid var(--line);padding:6px 10px;text-decoration:none;color:var(--ink)}
.mechip:hover{border-color:var(--gold)}
.mechip canvas{width:36px;height:36px;flex:none}
.mechip b{display:block;font-family:var(--px);font-size:11px;font-weight:normal;color:var(--gold);line-height:1.5}
.mechip small{display:block;font-size:17px;color:var(--dim);line-height:1}

/* ---------- lobby ---------- */
#lobby{background:radial-gradient(ellipse at top,#16201a,var(--bg) 70%);overflow:auto;padding:12px 14px 24px}
.lobby-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:1200px;margin:0 auto 12px}
.code-box{font-family:var(--px);font-size:11px;color:var(--dim)}
.code-box b{font-size:30px;color:var(--gold);letter-spacing:6px;text-shadow:3px 3px 0 #000;margin-left:8px}
#inviteBox{flex:1;display:flex;gap:8px;min-width:240px}
#inviteLink{flex:1;min-width:0;background:#080907;border:2px solid var(--line);color:var(--blue);padding:6px 10px;font-size:19px}
#linkPick{background:#080907;border:2px solid var(--line);color:var(--gold);font-size:18px;max-width:150px}
.lobby-grid{display:grid;grid-template-columns:300px minmax(0,1fr) 280px;gap:12px;max-width:1200px;margin:0 auto;align-items:start}
.plp h2{margin-bottom:8px}
.pl{display:flex;align-items:center;gap:8px;padding:5px 2px;border-bottom:2px solid #0b0d0a;font-size:22px}
.pl canvas{width:32px;height:32px;flex:none}
.pl .nm{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:3px;white-space:nowrap}
.pl .nm>span:not(.tagadm):not(.ytag):not(.crown):not(.tagspec){overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pl{flex-wrap:wrap}
.pl .tgl{flex-basis:100%;display:flex;flex-wrap:wrap;gap:3px;padding-left:42px;margin-top:-4px}
.pl .tgl .ytag{margin-left:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pl .crown{color:var(--gold);margin-right:4px}
.pl .me{color:var(--green)}
.pl .sc{font-family:var(--px);font-size:10px;color:var(--gold)}
.pl .tag{font-family:var(--px);font-size:7px;padding:3px 4px;border:2px solid var(--dim);color:var(--dim)}
.pl .mini{font-family:var(--px);font-size:7px;padding:5px 5px;background:#22261f;border:2px solid var(--line);color:var(--dim)}
.pl .mini.on{border-color:var(--red);color:var(--red)}
.pl .mini.spec.on{border-color:var(--blue);color:var(--blue)}
.pl.away{opacity:.5}
#setTabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.tab{background:#0b0d0a;border:2px solid var(--line);color:var(--dim);font-size:8px;padding:7px 8px}
.tab.on{color:var(--gold);border-color:var(--gold)}
#setBody{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow:auto;padding-right:4px}
.set{display:grid;grid-template-columns:minmax(0,1fr) 150px 66px;align-items:center;gap:8px;font-size:20px}
.set.child{padding-left:16px;font-size:18px;color:var(--dim)}
.set.ab label{color:var(--red)}
.set select{grid-column:2 / 4;background:#080907;color:var(--ink);border:2px solid var(--line);padding:3px}
.set input[type=range]{width:100%;accent-color:#a8242c}
.set .v{font-family:var(--px);font-size:9px;color:var(--gold);text-align:right}
.set .toggle{grid-column:2 / 4;justify-self:start;font-size:9px;padding:6px 12px;background:#22261f;border:2px solid var(--line);color:var(--dim)}
.set .toggle.on{background:#4a1a1e;border-color:var(--red);color:#fff}
.map-prev{display:flex;gap:10px;align-items:center;margin:4px 0 8px}
.map-prev canvas{width:180px;height:auto;border:2px solid var(--line)}
.map-prev .d{font-size:18px;color:var(--dim);line-height:1}
.start-row{display:flex;align-items:center;gap:10px;margin-top:12px}
.start-row #waitNote{flex:1;text-align:right}
.chatp{display:flex;flex-direction:column;gap:8px;height:min(70vh,520px)}
.chatlog{flex:1;overflow:auto;font-size:19px;line-height:1.05}
.chatlog .m{margin:2px 0;word-wrap:break-word}
.chatlog .m.sys{color:var(--dim);font-style:italic}
.chatlog .m.out{color:#8a8aa8}
#lbChatIn,#gChatIn{background:#080907;border:2px solid var(--line);color:var(--ink);padding:6px 8px}
.qr-panel{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:94vw}
#qrCv{width:min(300px,78vw);height:auto;background:#fff}
#qrTxt{color:var(--blue);font-size:19px;word-break:break-all;text-align:center;max-width:300px}
#qrCode{font-family:var(--px);font-size:20px;color:var(--gold);letter-spacing:6px}

/* ---------- game ---------- */
#game{background:#000;touch-action:none}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#vignette{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 160px 60px rgba(200,0,10,.65);transition:opacity .08s}
#hud{position:absolute;inset:0;pointer-events:none}
#hud button,#hud input,#check,#spec{pointer-events:auto}
#hudTop{position:absolute;top:calc(8px + var(--safe-t));left:8px;right:8px;display:flex;align-items:flex-start;gap:10px}
#meBox{display:flex;align-items:center;gap:8px;background:rgba(5,5,6,.7);border:2px solid var(--line);padding:4px 8px 4px 4px;min-width:150px}
#meBox canvas{width:36px;height:36px}
#meRole{font-family:var(--px);font-size:9px;line-height:1.6}
#meRole.beast{color:var(--red)}
#meRole.surv{color:var(--green)}
#hpBar{width:110px;height:8px;background:#1a0a0c;border:2px solid #000;margin-top:2px}
#hpBar i{display:block;height:100%;width:100%;background:var(--cyan)}
#centerBox{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
#timer{font-family:var(--px);font-size:16px;color:#fff;text-shadow:2px 2px 0 #000;background:rgba(5,5,6,.7);border:2px solid var(--line);padding:6px 12px}
#timer.low{color:var(--red)}
#compsLeft{font-family:var(--px);font-size:9px;color:var(--blue);text-shadow:2px 2px 0 #000;display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center}
#compsLeft i{display:inline-block;width:12px;height:10px;border:2px solid #5ab4ff;background:#10243e}
#compsLeft i.d{background:#6ee07a;border-color:#6ee07a}
#compsLeft.pw{color:var(--green)}
#hudRight{display:flex;gap:6px}
.iconbtn{width:40px;height:40px;background:rgba(5,5,6,.75);border:2px solid var(--line);color:var(--dim);font-size:17px;font-family:var(--tx);padding:0}
.iconbtn:hover{color:var(--gold)}
.iconbtn.off{text-decoration:line-through}
#roomName{position:absolute;top:calc(64px + var(--safe-t));left:12px;font-family:var(--px);font-size:9px;color:var(--dim);text-shadow:2px 2px 0 #000}
#banner{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);font-family:var(--px);font-size:28px;color:#fff;text-shadow:4px 4px 0 #000;opacity:0;transition:opacity .3s;text-align:center;width:max-content;max-width:94vw;line-height:1.3}
#banner.show{opacity:1}
#banner.red{color:var(--red)}
#banner.green{color:var(--green)}
#banner .sub{display:block;font-size:11px;color:#d8dcd0;margin-top:12px;line-height:1.7}
#toasts,#menuToasts{position:fixed;top:calc(96px + var(--safe-t));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;z-index:30;pointer-events:none;width:max-content;max-width:92vw}
#menuToasts{top:calc(14px + var(--safe-t))}
.toast{background:rgba(5,5,6,.9);border:2px solid var(--line);padding:4px 12px;font-size:21px;animation:tin .2s;text-align:center}
.toast.bad{border-color:var(--red);color:#ffd0d6}
.toast.good{border-color:var(--green);color:#d0ffe0}
.toast.blue{border-color:var(--cyan);color:#d0f4ff}
@keyframes tin{from{transform:translateY(-8px);opacity:0}}
#stateMsg{position:absolute;left:50%;bottom:calc(150px + var(--safe-b));transform:translateX(-50%);font-family:var(--px);font-size:12px;color:#fff;text-shadow:2px 2px 0 #000;text-align:center;line-height:1.8;width:max-content;max-width:94vw}
#stateMsg .r{color:var(--red)} #stateMsg .c{color:var(--cyan)} #stateMsg .g{color:var(--green)}
#prompt{position:absolute;left:50%;bottom:calc(110px + var(--safe-b));transform:translateX(-50%);font-family:var(--px);font-size:11px;color:var(--gold);text-shadow:2px 2px 0 #000;background:rgba(5,5,6,.65);padding:6px 10px;border:2px solid rgba(232,200,96,.35)}
#prompt:empty{display:none}
#gChat{position:absolute;left:10px;bottom:calc(150px + var(--safe-b));width:min(340px,60vw);max-height:30vh;overflow:hidden;pointer-events:none;text-shadow:2px 2px 0 #000;display:flex;flex-direction:column;justify-content:flex-end}
#gChat .m{transition:opacity 1s}
#gChat .m.old{opacity:0}
#gChatIn{position:absolute;left:10px;bottom:calc(112px + var(--safe-b));width:min(340px,70vw)}
/* timing check */
#check{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);background:rgba(5,5,6,.85);border:3px solid var(--blue);padding:10px 14px;display:flex;flex-direction:column;align-items:center;gap:8px}
#check.ok{border-color:var(--green)} #check.bad{border-color:var(--red)}
.ck-t{font-family:var(--px);font-size:11px;color:var(--blue)}
#check.ok .ck-t{color:var(--green)} #check.bad .ck-t{color:var(--red)}
.ck-bar{position:relative;width:min(320px,76vw);height:26px;background:#10141a;border:2px solid #000}
.ck-zone{position:absolute;top:0;bottom:0;background:#2a9a48;box-shadow:inset 0 0 0 2px #6ee07a}
.ck-needle{position:absolute;top:-6px;bottom:-6px;width:4px;background:#fff;box-shadow:0 0 0 2px #000;left:0}
.ck-h{font-size:17px;color:var(--dim)}
#spec{position:absolute;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:rgba(5,5,6,.75);border:2px solid var(--line);padding:6px 8px}
#specName{font-family:var(--px);font-size:10px;color:var(--gold);min-width:120px;text-align:center}
/* touch controls */
#pads{position:absolute;inset:0;pointer-events:none;display:none}
.touch #pads{display:block}
#stick{position:absolute;left:calc(26px + env(safe-area-inset-left,0px));bottom:calc(26px + var(--safe-b));width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.06);border:3px solid rgba(255,255,255,.14);opacity:.8}
#knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px;border-radius:50%;background:rgba(255,255,255,.22);border:3px solid rgba(255,255,255,.35)}
#btns{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(22px + var(--safe-b));display:flex;align-items:flex-end;gap:12px;pointer-events:none}
#powerBtns{display:flex;flex-direction:column;gap:8px}
.pbtn{pointer-events:auto;width:76px;height:76px;border-radius:50%;border:3px solid rgba(255,255,255,.3);background:rgba(20,22,19,.75);color:#fff;font-size:9px;line-height:1.3;padding:0}
.pbtn.act{width:92px;height:92px;background:rgba(120,30,36,.8);border-color:rgba(255,120,120,.6);font-size:10px}
.pbtn.alt{background:rgba(30,50,40,.8)}
.pbtn.pw{width:56px;height:56px;font-size:16px;font-family:var(--tx);position:relative}
.pbtn.pw.cd{opacity:.45}
.pbtn:empty,.pbtn.hidden{display:none}
.pbtn:active{filter:brightness(1.4)}
/* overlays */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;padding:12px}
.small-panel{min-width:260px;display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:center}
.res-panel{width:min(640px,96vw);max-height:92vh;overflow:auto;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.res-panel h1{font-size:22px}
.res-panel h1.g{color:var(--green)}
#resRows{width:100%;display:flex;flex-direction:column;gap:2px}
.rr{display:grid;grid-template-columns:36px minmax(0,1fr) 110px 60px 60px;align-items:center;gap:8px;font-size:21px;text-align:left;padding:3px 4px;background:#0b0d0a}
.rr canvas{width:32px;height:32px}
.rr .o{font-family:var(--px);font-size:8px}
.rr .o.escaped{color:var(--green)} .rr .o.frozen{color:var(--cyan)} .rr .o.beast{color:var(--red)} .rr .o.caught{color:var(--gold)} .rr .o.left{color:var(--dim)}
.rr .p{font-family:var(--px);font-size:10px;color:var(--gold);text-align:right}
.rr.hd{background:none;font-family:var(--px);font-size:8px;color:var(--dim)}
#resBtns{display:flex;gap:10px}
.how-panel{width:min(720px,96vw);max-height:90vh;overflow:auto}
.how-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.how-body p{font-size:20px;line-height:1.1;margin:8px 0}
.how-body b{color:var(--gold);font-weight:normal}
.how-body b.g{color:var(--green)} .how-body b.r{color:var(--red)}

@media (max-width:1000px){
  .lobby-grid{grid-template-columns:1fr}
  .chatp{height:240px}
  #setBody{max-height:none}
}
@media (max-width:700px){
  html,body{font-size:19px}
  .logo .l1{font-size:16px} .logo .l2{font-size:32px}
  .set{grid-template-columns:minmax(0,1fr) 110px 56px;font-size:18px}
  .code-box b{font-size:22px}
  #inviteLink{display:none}
  #linkPick{max-width:none;flex:1;min-width:0}
  #meBox{min-width:0} #hpBar{width:70px}
  #timer{font-size:12px;padding:5px 8px}
  #banner{font-size:17px}
  #roomName{display:none}
  .rr{grid-template-columns:32px minmax(0,1fr) 84px 44px 44px;font-size:18px}
  #stateMsg{font-size:9px}
  #prompt{font-size:9px}
}
.pl .tagadm{font-family:var(--px);font-size:7px;margin-left:6px;padding:3px 4px;border:2px solid #e8c860;color:#e8c860;vertical-align:middle}
.pl .tagadm.dev{border-color:#ff7ab8;color:#fff;background:linear-gradient(90deg,#e2363e,#e8a020,#3aa058,#3a8ae2,#9a5ad0)}
.pl .tagadm.vip{border-color:#d08aff;color:#fff;background:linear-gradient(90deg,#9a5ad0,#e04ab8)}
/* icons (shared/icons.js) */
.iconbtn .yi{width:18px;height:18px;vertical-align:middle}
.pbtn .yi{width:26px;height:26px}
.crown .yi{width:15px;height:15px;vertical-align:-2px}
.mini .yi{width:13px;height:13px;vertical-align:-2px}
#spec .btn .yi{width:16px;height:16px;margin:0}

/* ---------- Killer Escape ---------- */
#compsLeft .slot,#compsLeft .lk{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:2px solid #6a2a30;background:rgba(40,10,14,.75);margin:0 1px;opacity:.85}
#compsLeft .slot.d{border-color:#6ee07a;background:rgba(16,58,26,.85);opacity:1}
#compsLeft .lks{margin-left:8px;display:inline-flex;gap:2px}
#compsLeft .lk{width:20px;height:20px;border-color:#5a4a2a;background:rgba(30,24,10,.7)}
#compsLeft .lk.d{opacity:.3}
#compsLeft .iimg{image-rendering:pixelated;display:block}
#compsLeft .lk .iimg{width:16px!important}
#heldBox{position:absolute;left:calc(8px + env(safe-area-inset-left,0px));top:calc(84px + var(--safe-t));display:flex;align-items:center;gap:8px;background:rgba(5,5,6,.75);border:2px solid rgba(232,200,96,.5);padding:6px 10px 6px 6px;font-family:var(--px);font-size:9px;color:var(--gold);pointer-events:none}
#heldBox .iimg{image-rendering:pixelated;display:block}
#heldBox small{display:block;color:#b8c0b0;font-size:7px;margin-top:5px}
.pbtn.drop{width:60px;height:60px;background:rgba(80,64,20,.85);border-color:rgba(232,200,96,.6)}
@media (max-width:700px){#heldBox{font-size:7px}}
@media (max-width:520px){#compsLeft .slot{width:22px;height:22px}#compsLeft .lk{width:17px;height:17px}#compsLeft .lks{margin-left:4px}#compsLeft .slot .iimg{width:16px!important}#compsLeft .lk .iimg{width:12px!important}}