@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:#120d1c; --bg2:#1c1530; --panel:#241b3a; --panel2:#2e2448; --line:#4a3a70; --ink:#f3ecff; --dim:#a596c8;
  --gold:#ffd23a; --red:#ff5a6a; --green:#5ee08a; --blue:#5ab4ff; --en:#40e0ff; --pink:#ff7ab0;
  --px:"Press Start 2P", ui-monospace, monospace; --tx:"VT323", ui-monospace, monospace;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,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:22px;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}
input,select{font-family:var(--tx);font-size:22px}
h1,h2{font-family:var(--px);font-weight:normal;margin:0 0 12px}
h2{font-size:12px;color:var(--gold);letter-spacing:1px}
.screen{position:fixed;inset:0}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- buttons & panels ---------- */
.btn{background:#5a3fd0;color:#fff;border:0;padding:12px 16px;font-size:12px;letter-spacing:1px;
  box-shadow:inset -3px -3px 0 #3a26a0, inset 3px 3px 0 #7d66ff, 0 4px 0 #0a0612;position:relative;top:0}
.btn:hover{filter:brightness(1.15)}
.btn:active{top:3px;box-shadow:inset -3px -3px 0 #3a26a0, inset 3px 3px 0 #7d66ff, 0 1px 0 #0a0612}
.btn.big{font-size:16px;padding:18px 22px;background:#e8a020;box-shadow:inset -4px -4px 0 #a86a10, inset 4px 4px 0 #ffd060, 0 5px 0 #0a0612;color:#2a1600}
.btn.small{font-size:10px;padding:9px 12px}
.btn.ghost{background:#3a2e58;box-shadow:inset -3px -3px 0 #251c3c, inset 3px 3px 0 #54447c, 0 4px 0 #0a0612}
.btn:disabled{filter:grayscale(1) brightness(.7);cursor:default}
.iconbtn{background:rgba(18,13,28,.85);border:2px solid var(--line);color:var(--ink);width:38px;height:38px;font-size:16px;padding:0;font-family:system-ui,sans-serif}
.panel{background:var(--panel);border:3px solid var(--line);box-shadow:0 6px 0 #0a0612, inset 0 0 0 3px #1c1530;padding:16px;position:relative}
.err{color:var(--red);font-size:20px}
.err:empty{display:none}

/* ---------- title ---------- */
#titleBg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.title-wrap{position:relative;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:24px 14px;-webkit-overflow-scrolling:touch}
.logo{font-family:var(--px);font-size:60px;color:var(--gold);text-shadow:4px 4px 0 #a86a10, 8px 8px 0 #0a0612;letter-spacing:4px;margin:4px 0 22px;white-space:nowrap}
.logo span{color:var(--pink);text-shadow:4px 4px 0 #a8306a, 8px 8px 0 #0a0612;margin-left:22px}
.title-grid{display:grid;grid-template-columns:minmax(0,340px);gap:20px;width:100%;justify-content:center;align-items:start;margin-top:4vh}
.play{display:flex;flex-direction:column;gap:14px}
.play .btn.big{width:100%}
.join-row{display:flex;gap:8px}
.btn.big.pub{background:#3aa0ff;box-shadow:inset -4px -4px 0 #1f6ab8, inset 4px 4px 0 #8ac8ff, 0 5px 0 #0a0612;color:#081830;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}
#codeInput{flex:1;min-width:0;background:#120d1c;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}
.av-row{display:flex;gap:16px}
.av-stage{display:flex;flex-direction:column;align-items:center;gap:10px}
#avPreview{background:radial-gradient(circle at 50% 70%, #3a2e58, #1c1530 70%);border:3px solid var(--line);width:140px;height:182px}
.av-controls{flex:1;min-width:0}
.name-in{display:block;width:100%;background:#120d1c;border:2px solid var(--line);color:var(--ink);padding:4px 8px;margin-bottom:6px}
.slider{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:8px;line-height:1.1;font-size:20px;color:var(--dim);white-space:nowrap}
.slider input{width:100%}
input[type=range]{-webkit-appearance:none;appearance:none;height:14px;background:#120d1c;border:2px solid var(--line);margin:6px 0;touch-action:pan-y}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:24px;background:var(--gold);border:2px solid #0a0612;cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:22px;background:var(--gold);border:2px solid #0a0612;border-radius:0;cursor:pointer}
input[type=range].hue{background:linear-gradient(90deg,#f33,#ff3,#3f3,#3ff,#33f,#f3f,#f33)}
#avAcc{margin-top:10px}
.acc-row{display:flex;align-items:center;gap:5px;margin:5px 0;flex-wrap:wrap}
.acc-row .lbl{width:50px;color:var(--dim);font-size:19px}
.acc{width:40px;height:40px;background:#120d1c;border:2px solid var(--line);padding:0;display:flex;align-items:center;justify-content:center}
.acc.on{border-color:var(--gold);background:#3a2e58;box-shadow:0 0 0 2px var(--gold)}
.acc canvas{width:36px;height:36px}
#avDone{margin-top:12px;width:100%}

/* ---------- lobby ---------- */
#lobby{background:radial-gradient(ellipse at top, #2a1f48, var(--bg) 70%);display:flex;flex-direction:column;padding:14px;gap:12px}
.lobby-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.code-box b{font-family:var(--px);font-size:30px;color:var(--gold);letter-spacing:6px;text-shadow:3px 3px 0 #0a0612}
#inviteBox{flex:1;display:flex;gap:8px;min-width:240px}
#inviteLink{flex:1;min-width:0;background:#120d1c;border:2px solid var(--line);color:var(--blue);padding:6px 10px;font-size:20px}
.lobby-grid{flex:1;min-height:0;display:grid;grid-template-columns:260px 1fr 280px;gap:12px}
.lobby-grid .panel{display:flex;flex-direction:column;min-height:0}
#plList{flex:1;overflow:auto;margin-bottom:10px}
.pl{display:flex;align-items:center;gap:10px;padding:5px;border-bottom:2px solid #1c1530}
.pl canvas{width:40px;height:52px;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:50px;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 .kick{background:none;border:2px solid #5a2a3a;color:var(--red);font-size:9px;padding:5px 7px}
.pl .sc{color:var(--gold);font-size:20px}
#setTabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.tab{background:#1c1530;border:2px solid var(--line);color:var(--dim);font-size:9px;padding:9px 10px}
.tab.on{background:var(--panel2);color:var(--gold);border-color:var(--gold)}
#setBody{flex:1;overflow:auto;padding-right:6px;-webkit-overflow-scrolling:touch}
.set{display:grid;grid-template-columns:minmax(120px,1fr) 1.3fr 80px;align-items:center;gap:10px;padding:4px 6px;border-bottom:1px solid #2e2448}
.set .v{color:var(--gold);text-align:right}
.set select{background:#120d1c;color:var(--ink);border:2px solid var(--line);padding:3px 4px;grid-column:span 2;min-width:0}
.set.child{padding-left:24px}
.set.child label{color:var(--dim)}
.set.ab{background:#1f1733;margin-top:6px}
.toggle{grid-column:span 2;justify-self:start;background:#120d1c;border:2px solid var(--line);color:var(--dim);font-size:9px;padding:7px 12px;min-width:64px}
.toggle.on{background:#1f5a3a;color:#bfffd8;border-color:var(--green)}
.set :disabled{opacity:.75;cursor:default}
.map-prev{display:flex;gap:12px;align-items:center;padding:8px 6px}
.map-prev canvas{width:180px;height:114px;border:2px solid var(--line);flex:none}
.map-prev .d{color:var(--dim);font-size:19px}
.start-row{display:flex;align-items:center;gap:14px;justify-content:flex-end;padding-top:12px}
.chatlog{flex:1;overflow:auto;font-size:20px;line-height:1.15;word-wrap:break-word;-webkit-overflow-scrolling:touch}
.chatlog .m{margin:3px 0}
.chatlog .m b{color:var(--gold)}
.chatlog .m.sys{color:var(--dim);font-style:italic}
.chatlog .m .team{font-size:16px;color:var(--en)}
#lbChatIn,#gChatIn{width:100%;background:#120d1c;border:2px solid var(--line);color:var(--ink);padding:6px 8px;margin-top:8px}

/* ---------- game ---------- */
#game{background:#000}
#cv{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
#hud{position:absolute;inset:0;pointer-events:none}
#hud button,#hud input,#bottomBar *,#propMenu *{pointer-events:auto}
#hudTop{position:absolute;top:8px;left:calc(10px + var(--safe-l));right:calc(10px + var(--safe-r));display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
#roomName{font-family:var(--px);font-size:13px;color:#fff;text-shadow:3px 3px 0 #000;flex:1;min-width:0;padding-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#timerBox{text-align:center;background:rgba(18,13,28,.85);border:3px solid var(--line);padding:5px 14px 7px;min-width:120px}
#phaseLbl{font-family:var(--px);font-size:9px;color:var(--gold)}
#timer{font-family:var(--px);font-size:20px;margin-top:5px}
#timer.low{color:var(--red)}
#hudRight{display:flex;gap:5px;align-items:center;flex:1;justify-content:flex-end;flex-wrap:wrap}
#hidersLeft{font-family:var(--px);font-size:9px;background:rgba(18,13,28,.85);border:2px solid var(--line);padding:10px 8px;color:var(--green);white-space:nowrap}
#banner{position:absolute;top:22%;left:4%;right:4%;text-align:center;font-family:var(--px);font-size:30px;color:#fff;text-shadow:4px 4px 0 #000;opacity:0;transition:opacity .3s;line-height:1.3}
#banner.show{opacity:1}
#banner .sub{display:block;font-size:11px;color:var(--gold);margin-top:12px;text-shadow:2px 2px 0 #000;line-height:1.6}
#toasts{position:absolute;top:84px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;width:max-content;max-width:92vw}
.toast{background:rgba(18,13,28,.92);border:2px solid var(--line);padding:5px 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}
@keyframes tin{from{transform:translateY(-8px);opacity:0}}
#useBtn{position:absolute;left:50%;bottom:calc(104px + var(--safe-b));transform:translateX(-50%);background:rgba(18,13,28,.92);border:3px solid var(--gold);color:var(--gold);font-family:var(--px);font-size:11px;padding:10px 14px;animation:tin .2s}
#bottomBar{position:absolute;bottom:calc(10px + var(--safe-b));left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:flex-end}
.hb{background:rgba(18,13,28,.9);border:3px solid var(--line);padding:8px 12px}
.energy{width:280px}
.energy .lbl{display:flex;justify-content:space-between;font-family:var(--px);font-size:9px;color:var(--en);margin-bottom:6px}
.energy .bar{height:16px;background:#0a0612;border:2px solid #000;position:relative}
.energy .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#80f0ff,#20b0e0);transition:width .15s}
.energy .cost{position:absolute;top:0;bottom:0;background:rgba(255,90,106,.45)}
.energy.low .fill{background:linear-gradient(#ff9aa6,#e03a4a)}
.slot{min-width:60px;padding:0 6px;height:60px;background:rgba(18,13,28,.92);border:3px solid var(--line);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;cursor:pointer}
.slot:active{border-color:var(--gold)}
.slot .ic{font-size:24px;line-height:1;font-family:system-ui,sans-serif}
.slot .k{position:absolute;top:2px;left:4px;font-family:var(--px);font-size:8px;color:var(--gold)}
.slot .n{font-size:16px;color:var(--dim);margin-top:2px;white-space:nowrap;line-height:1}
.slot .cd{position:absolute;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;font-family:var(--px);font-size:12px;color:#fff}
.slot.armed{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}
.hb.propbox{display:flex;gap:10px;align-items:center}
.propbox canvas{width:44px;height:44px;background:#0a0612;border:2px solid #000}
.propbox .pn{font-family:var(--px);font-size:9px;color:var(--gold)}
.propbox .sw{font-size:19px;color:var(--dim)}
#propMenu{position:absolute;bottom:calc(88px + var(--safe-b));left:50%;transform:translateX(-50%);background:rgba(18,13,28,.96);border:3px solid var(--gold);padding:10px;width:min(760px,96vw);max-height:60vh;overflow:auto}
#propMenu h2{margin:4px 0 8px}
#propMenu .grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
#propMenu button{width:78px;height:74px;background:#120d1c;border:2px solid var(--line);color:var(--dim);font-family:var(--tx);font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px;line-height:1;text-align:center}
#propMenu button.fit{border-color:#3f8a5a}
#propMenu button:hover{border-color:var(--gold);color:#fff}
#propMenu button.cur{border-color:var(--green);background:#1f3a2a}
#propMenu canvas{width:40px;height:40px}
#chatBox{position:absolute;left:calc(12px + var(--safe-l));bottom:calc(96px + var(--safe-b));width:300px;max-width:60vw;max-height:40%;display:flex;flex-direction:column;justify-content:flex-end}
#gChat{text-shadow:2px 2px 0 #000;max-height:200px;overflow:hidden}
#gChat .m{animation:fadeout 12s forwards}
#chatBox.open #gChat .m{animation:none}
#chatBox.open #gChat{overflow:auto;background:rgba(18,13,28,.75)}
@keyframes fadeout{0%,80%{opacity:1}100%{opacity:0}}
#joyBase{position:fixed;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:3px solid rgba(255,255,255,.35);background:rgba(18,13,28,.35);pointer-events:none;z-index:5}
#joyKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,210,58,.75);border:3px solid rgba(0,0,0,.4)}
#blindOv{position:absolute;inset:0;background:#05030a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:20px}
#blindOv .big{font-family:var(--px);font-size:30px;color:var(--red);text-shadow:4px 4px 0 #400}
#blindTime{font-family:var(--px);font-size:44px}
#blindOv .sub{color:var(--gold)}
#flashOv{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .4s}
.overlay{position:fixed;inset:0;background:rgba(8,5,14,.84);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;padding:12px}
.small-panel{min-width:260px;display:flex;flex-direction:column;gap:12px}
#board .panel{min-width:min(540px,94vw);max-height:84vh;overflow:auto}
.brow{display:grid;grid-template-columns:24px 40px 1fr auto 70px;align-items:center;gap:10px;padding:4px 0;border-bottom:2px solid #1c1530}
.brow canvas{width:34px;height:44px}
.brow .role{font-family:var(--px);font-size:8px}
.r-seeker{color:var(--red)}.r-hider{color:var(--green)}.r-spec{color:var(--dim)}
#minimap canvas{border:3px solid var(--line);max-width:94vw;max-height:84vh}
#voteOv h1{font-size:22px;color:var(--gold);text-shadow:3px 3px 0 #000;margin:0}
#voteTimer{font-family:var(--px);font-size:16px;margin:8px 0 14px}
#voteCards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:1180px;overflow:auto;max-height:78vh;padding:4px}
.vcard{width:178px;background:var(--panel);border:3px solid var(--line);padding:10px;cursor:pointer;text-align:left;color:var(--ink);font-family:var(--tx);font-size:18px;position:relative}
.vcard:hover{border-color:var(--gold)}
.vcard.on{border-color:var(--green);box-shadow:0 0 0 3px var(--green)}
.vcard canvas{width:100%;height:auto;display:block;margin-bottom:8px}
.vcard .t{font-family:var(--px);font-size:9px;color:var(--gold);margin-bottom:4px}
.vcard .votes{position:absolute;top:14px;right:14px;background:#0a0612;font-family:var(--px);font-size:12px;padding:6px 8px;color:var(--green)}
.vcard .who{display:flex;gap:2px;flex-wrap:wrap;min-height:28px}
.vcard .who canvas{width:22px;height:28px;margin:0}
#voteCards.three .vcard{width:260px;font-size:20px}
#voteCards.three .vcard .t{font-size:11px}
#resultOv .panel{min-width:min(500px,94vw);max-width:760px;text-align:center;max-height:90vh;overflow:auto}
#resultOv h1{font-size:28px;margin-bottom:6px}
.win-h{color:var(--green)}.win-s{color:var(--red)}
.res-list{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:14px 0}
.res-p{display:flex;flex-direction:column;align-items:center;width:86px;font-size:18px}
.res-p canvas{width:48px;height:62px}
.res-p .tag2{font-family:var(--px);font-size:7px;margin-top:4px}
#helpOv .panel{max-width:760px;max-height:86vh;overflow:auto;font-size:21px;line-height:1.2}
.kbd{display:inline-block;font-family:var(--px);font-size:9px;background:#120d1c;border:2px solid var(--line);padding:3px 6px;margin:1px 2px;color:var(--gold)}
#avatarModal #avatarPanel{max-width:620px;width:96vw;max-height:94vh;overflow:auto}

/* ---------- medium screens ---------- */
@media (max-width:1100px){
  .lobby-grid{grid-template-columns:220px 1fr;grid-template-rows:1fr auto}
  .chatp{grid-column:1/-1;max-height:170px}
}
/* ---------- phones ---------- */
@media (max-width:820px), (max-height:500px){
  html,body{font-size:19px}
  .logo{font-size:32px;margin:0 0 14px;text-shadow:3px 3px 0 #a86a10, 5px 5px 0 #0a0612}
  .logo span{margin-left:12px;text-shadow:3px 3px 0 #a8306a, 5px 5px 0 #0a0612}
  .title-wrap{padding:14px 10px}
  .title-grid{grid-template-columns:minmax(0,340px);gap:14px}
  .panel{padding:12px}
  #avPreview{width:96px;height:125px}
  .slider{grid-template-columns:96px 1fr;font-size:16px}
  .slider span{overflow:hidden;text-overflow:clip}
  .acc-row .lbl{width:40px;font-size:16px}
  .acc{width:36px;height:36px}.acc canvas{width:32px;height:32px}
  #lobby{overflow:auto;padding:10px;-webkit-overflow-scrolling:touch}
  .lobby-grid{display:flex;flex-direction:column;flex:none}
  .plp{order:0}.settings{order:1}.chatp{order:2;max-height:none;height:190px}
  #plList{display:flex;flex-wrap:wrap;gap:4px;overflow:visible;margin-bottom:8px}
  .pl{border:2px solid #1c1530;padding:3px 6px;gap:6px}
  .pl canvas{width:28px;height:36px}
  #setBody{max-height:none;overflow:visible}
  .set{grid-template-columns:1fr 1.2fr 64px;gap:6px;font-size:18px}
  .code-box b{font-size:22px}
  #inviteLink{display:none}
  #linkPick{max-width:none;flex:1;min-width:0}
  .start-row{position:sticky;bottom:0;background:var(--panel);padding:8px 0 0}
  .start-row .btn.big{flex:1}
  #roomName{font-size:9px;padding-top:4px}
  #timerBox{min-width:84px;padding:3px 8px 5px;border-width:2px}
  #phaseLbl{font-size:7px}#timer{font-size:15px;margin-top:3px}
  .iconbtn{width:34px;height:34px;font-size:15px}
  #hidersLeft{font-size:7px;padding:9px 6px}
  #banner{font-size:18px;top:18%;text-shadow:2px 2px 0 #000}
  #roomName{text-shadow:2px 2px 0 #000}
  body.touch .propbox .pn{display:none}
  #banner .sub{font-size:9px}
  #toasts{top:56px}.toast{font-size:18px;padding:4px 10px}
  .energy{width:190px}
  .slot{min-width:52px;height:52px;padding:0 4px}
  .slot .ic{font-size:20px}.slot .n{font-size:14px}
  .hb{padding:6px 8px}
  .propbox canvas{width:36px;height:36px}
  .propbox .sw{font-size:16px}
  #chatBox{bottom:calc(76px + var(--safe-b));width:240px}
  #gChat{max-height:120px;font-size:17px}
  #propMenu{bottom:calc(72px + var(--safe-b));max-height:54vh}
  #propMenu button{width:64px;height:64px;font-size:13px}
  #propMenu canvas{width:32px;height:32px}
  .vcard{width:44vw;max-width:220px;font-size:16px}
  #blindOv .big{font-size:20px}#blindTime{font-size:32px}
}
/* touch devices: action buttons on the right, joystick on the left */
body.touch #bottomBar{left:auto;right:calc(10px + var(--safe-r));transform:none;flex-wrap:wrap-reverse;justify-content:flex-end;max-width:62vw}
body.touch #bottomBar .hb.energy,body.touch #bottomBar .hb.propbox{order:-1}
body.touch #chatBox{display:none}
body.touch #chatBox.open{display:flex;left:50%;transform:translateX(-50%);top:60px;bottom:auto;width:min(420px,92vw);max-width:none}
body.touch #useBtn{left:auto;right:calc(14px + var(--safe-r));transform:none;bottom:calc(150px + var(--safe-b));font-size:13px;padding:16px 18px}
body.touch .slot{min-width:58px;height:58px}
body.touch #cv{cursor:default}
@media (orientation:portrait){ body.touch #bottomBar{max-width:96vw} body.touch #useBtn{bottom:calc(210px + var(--safe-b))} }

/* lobby link picker + QR */
#linkPick{background:#120d1c;border:2px solid var(--line);color:var(--gold);font-size:18px;max-width:130px}
.qr-panel{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:94vw}
#qrCv{width:min(320px,80vw);height:auto;background:#fff;image-rendering:pixelated}
#qrTxt{color:var(--blue);font-size:19px;word-break:break-all;text-align:center;max-width:320px}
#qrCode{font-family:var(--px);font-size:20px;color:var(--gold);letter-spacing:6px}
/* out of energy blindness */
#darkOv{position:fixed;inset:0;background:rgba(2,1,6,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:4;pointer-events:none}
#darkOv .big{font-family:var(--px);font-size:24px;color:var(--en);text-shadow:3px 3px 0 #003a4a;text-align:center}
#darkTime{font-family:var(--px);font-size:36px;color:#fff}
.energy .st{color:var(--red)}
/* free camera: seekers scouting during the hide time, spectators */
#scoutBar{position:absolute;top:64px;left:50%;transform:translateX(-50%);text-align:center;background:rgba(18,13,28,.88);border:2px solid var(--gold);padding:5px 12px 4px;max-width:92vw;line-height:1.3;white-space:nowrap}
#scoutBar .t{font-family:var(--px);font-size:9px;color:var(--gold)}
#scoutBar .t b{color:#fff;font-weight:normal}
#scoutBar .h{font-size:17px;color:var(--dim);white-space:normal}
#hud.scouting #toasts{top:116px}
#camCtl{position:absolute;left:calc(10px + var(--safe-l));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}
#camCtl .iconbtn{width:44px;height:44px;font-size:24px;line-height:1}
body.touch #camCtl .iconbtn{width:50px;height:50px}
.pl .specbtn{background:none;border:2px solid var(--line);color:var(--dim);font-size:9px;padding:5px 7px}
.pl .specbtn.on{border-color:var(--blue);color:var(--blue)}
.pl .tagspec{font-family:var(--px);font-size:7px;color:var(--blue);border:2px solid var(--blue);padding:3px 4px;margin-left:6px;vertical-align:middle}
@media (max-width:820px), (max-height:500px){
  #scoutBar{top:50px;padding:3px 8px}
  #scoutBar .t{font-size:8px}#scoutBar .h{font-size:15px}
  #hud.scouting #toasts{top:100px}
}
@media (orientation:portrait) and (max-width:820px){
  #scoutBar{top:96px}
  #hud.scouting #toasts{top:150px}
  #camCtl{top:auto;bottom:calc(96px + var(--safe-b));transform:none;flex-direction:row}
}
#hud.scouting #banner{top:34%}

/* link back to the Yen Games home page (title screen only) */
.yen-home{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:calc(12px + var(--safe-l));z-index:2;font-family:var(--px);font-size:10px;color:var(--dim);text-decoration:none;padding:8px 10px;background:rgba(18,13,28,.7);border:2px solid var(--line)}
.yen-home:hover{color:var(--gold);border-color:var(--gold)}
@media (max-width:820px), (max-height:500px){ .yen-home{font-size:8px;padding:6px 8px} .title-wrap{padding-top:48px} }

/* your Yen Games character (set on the home page) */
.mechip{display:flex;align-items:center;gap:10px;background:#120d1c;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}

.vcard{font-size:15px;padding:8px}
.vcard .dim{font-size:14px;line-height:1.1}
@media (max-width:640px){.vcard{width:calc(50% - 8px)}#voteCards{gap:6px}}
#voteOv{background:rgba(8,5,14,.96)}
.tagadm{font-family:var(--px);font-size:7px;margin-left:6px;padding:3px 4px;border:2px solid #ffd23a;color:#ffd23a;vertical-align:middle}
.tagadm.dev{border-color:#ff7ab8;color:#fff;background:linear-gradient(90deg,#e2363e,#e8a020,#3aa058,#3a8ae2,#9a5ad0)}
.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}
#camCtl .iconbtn .yi{width:22px;height:22px}
.slot .ic .yi{width:24px;height:24px;vertical-align:middle}
.crown .yi{width:15px;height:15px;vertical-align:-2px}
.kick .yi{width:14px;height:14px;vertical-align:-2px}
.hb .lbl .yi,#blindTip .yi,#hidersLeft .yi{width:1em;height:1em;vertical-align:-.15em}
@media (max-width:700px){ .slot .ic .yi{width:20px;height:20px} }