*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#08090b;color:#e8e8ea;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}
body{position:fixed;inset:0}
canvas#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}
button{font-family:inherit;font-weight:700;letter-spacing:.06em;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.top{display:flex;gap:6px;align-items:center}
.spacer{flex:1}
.chip{background:rgba(18,19,23,.82);border:1px solid rgba(255,255,255,.14);border-radius:8px;
  padding:6px 9px;font-size:12px;font-weight:700;letter-spacing:.05em;font-variant-numeric:tabular-nums;
  backdrop-filter:blur(6px)}
.chip.mid{color:#fff}
.chip.btn{pointer-events:auto}
.chip.btn:active{background:rgba(255,255,255,.18)}
#timer.warn{color:#ff3b5c;border-color:#ff3b5c}

#board{position:absolute;right:max(8px,env(safe-area-inset-right));top:52px;width:150px;
  background:rgba(18,19,23,.78);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px;
  font-size:11px;letter-spacing:.03em;backdrop-filter:blur(6px)}
.brow{display:flex;align-items:center;gap:5px;padding:2px 0;font-variant-numeric:tabular-nums}
.brow .sq{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.brow .nm{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.brow .vl{opacity:.85}
.brow.meRow{color:#fff;font-weight:800}
.brow.dd{opacity:.35}

#feed{position:absolute;left:50%;transform:translateX(-50%);top:52px;text-align:center;
  font-size:11.5px;letter-spacing:.03em;line-height:1.6;text-shadow:0 1px 3px #000}
#feed div{opacity:.95}

#alert{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);text-align:center;
  font-size:min(7vw,30px);font-weight:800;letter-spacing:.1em;color:#ff3b5c;text-shadow:0 2px 12px #000;
  animation:pulse .8s infinite alternate}
@keyframes pulse{from{opacity:.55}to{opacity:1}}

canvas#mini{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));
  width:96px;height:96px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:#0b0c0f;opacity:.9}
#roomTag{position:absolute;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));
  font-size:11px;letter-spacing:.14em;opacity:.55;pointer-events:auto;padding:7px 10px;border-radius:8px;
  background:rgba(18,19,23,.8);border:1px solid rgba(255,255,255,.12)}
#roomTag:active{opacity:1}

#dead,#waiting{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(6,7,9,.72);pointer-events:auto;backdrop-filter:blur(3px)}
.deadBox{text-align:center;padding:22px;max-width:min(92vw,380px)}
#deadTitle{font-size:min(9vw,34px);font-weight:800;letter-spacing:.12em;color:#ff3b5c}
#deadSub{margin-top:8px;font-size:13px;opacity:.8;line-height:1.5}
.wTitle{font-size:min(6vw,22px);font-weight:800;letter-spacing:.1em}
.wSub{margin-top:8px;font-size:13px;opacity:.75}
.wHint{margin-top:6px;font-size:12px;opacity:.6}
.codeBig{margin-top:14px;font-size:min(16vw,54px);font-weight:800;letter-spacing:.3em;
  color:#3bd6ff;text-shadow:0 0 24px rgba(59,214,255,.4)}
.wList{margin:14px 0 4px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.wList span{font-size:11px;border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:3px 9px}

.big{margin-top:16px;width:100%;padding:15px;border-radius:10px;background:#fff;color:#08090b;
  font-size:14px;letter-spacing:.1em}
.big:active{transform:scale(.98)}
.ghost{margin-top:10px;width:100%;padding:13px;border-radius:10px;
  border:1px solid rgba(255,255,255,.22);color:#e8e8ea;font-size:13px;letter-spacing:.1em;background:transparent}

/* ---------- МЕНЮ ---------- */
#menu,#over{position:absolute;inset:0;overflow-y:auto;background:
  radial-gradient(120% 80% at 50% -10%,#16181f 0%,#08090b 60%);z-index:10;-webkit-overflow-scrolling:touch}
.menuInner,.overInner{max-width:440px;margin:0 auto;padding:
  calc(24px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom))}
h1{margin:6px 0 2px;font-size:min(15vw,54px);font-weight:800;letter-spacing:.06em;line-height:1}
h1 .dot{color:#ff3b5c}
.tag{margin:0 0 22px;font-size:12.5px;opacity:.6;line-height:1.5}
.lbl{display:block;font-size:10.5px;letter-spacing:.18em;opacity:.45;margin:16px 0 7px}
input{width:100%;padding:14px;border-radius:10px;background:#12131a;color:#fff;font-size:16px;
  border:1px solid rgba(255,255,255,.14);font-family:inherit;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase}
input::placeholder{color:rgba(255,255,255,.28)}
input:focus{outline:none;border-color:rgba(255,255,255,.4)}
.modes{display:flex;flex-direction:column;gap:9px}
.mode{display:block;width:100%;text-align:left;padding:14px;border-radius:12px;background:#12131a;
  border:1px solid rgba(255,255,255,.12);position:relative}
.mode:active{background:#1b1d26}
.mName{display:block;font-size:15px;font-weight:800;letter-spacing:.06em}
.mDesc{display:block;margin-top:5px;font-size:11.5px;opacity:.55;font-weight:400;letter-spacing:0;line-height:1.45}
.mOn{position:absolute;top:12px;right:12px;font-size:10px;letter-spacing:.08em;opacity:.45;font-weight:600}
.sep{margin:26px 0 12px;text-align:center;font-size:10px;letter-spacing:.2em;opacity:.35}
.row{display:flex;gap:8px}
.row input{flex:1;text-align:center;letter-spacing:.4em}
.side{flex:0 0 96px;border-radius:10px;background:#12131a;border:1px solid rgba(255,255,255,.14);font-size:12px}
.side:active{background:#1b1d26}
.wide{margin-top:9px;width:100%;padding:14px;border-radius:10px;background:#12131a;
  border:1px solid rgba(255,255,255,.14);font-size:12.5px;letter-spacing:.1em}
.wide:active{background:#1b1d26}
.pills{display:flex;gap:6px;margin-top:9px}
.pill{flex:1;padding:11px 4px;border-radius:9px;background:#12131a;border:1px solid rgba(255,255,255,.12);
  font-size:11px;letter-spacing:.06em;opacity:.55}
.pill.sel{opacity:1;border-color:rgba(255,255,255,.55);background:#1d2030}
.check{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11.5px;opacity:.6}
.check input{width:16px;height:16px;padding:0;flex:0 0 16px}
.err{margin-top:14px;padding:11px;border-radius:9px;background:rgba(255,59,92,.14);
  border:1px solid rgba(255,59,92,.4);color:#ff8ea1;font-size:12.5px}
.help{margin-top:26px;font-size:11.5px;line-height:1.65;opacity:.45}
.help b{opacity:.8;letter-spacing:.08em}
.ver{margin-top:18px;font-size:10px;letter-spacing:.12em;opacity:.25}

/* ---------- СКИН ---------- */
.skinRow{display:flex;gap:12px;align-items:center}
#skinPrev{width:72px;height:72px;flex:0 0 72px;border-radius:50%;background:#12131a}
.skinRowTxt{flex:1}
.skinHint{margin-top:7px;font-size:11px;opacity:.45;line-height:1.4}
#skinBox{position:absolute;inset:0;z-index:12;background:rgba(6,7,9,.96);overflow-y:auto;
  display:flex;align-items:center;justify-content:center}
.skinInner{width:100%;max-width:360px;padding:20px}
.skinTitle{font-size:min(6vw,20px);font-weight:800;letter-spacing:.12em;text-align:center;margin-bottom:16px}
#skinCv{width:100%;aspect-ratio:1;display:block;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  touch-action:none;image-rendering:pixelated}
.palette{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.sw{aspect-ratio:1;border-radius:8px;border:2px solid transparent}
.sw.sel{border-color:#fff;transform:scale(1.06)}
.sw.er{background:#12131a;border:1px solid rgba(255,255,255,.2);font-size:15px;color:#fff}
.skinBtns{display:flex;gap:8px;margin-top:12px}
.skinBtns .wide{flex:1}

/* ---------- ИТОГИ ---------- */
#over{background:rgba(6,7,9,.94);z-index:11}
#overTitle{font-size:min(9vw,32px);font-weight:800;letter-spacing:.12em;margin-top:8px}
#overWin{margin-top:8px;font-size:14px;letter-spacing:.06em}
#overList{margin-top:18px}
.orow{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;background:#12131a;
  margin-bottom:6px;font-size:12.5px;font-variant-numeric:tabular-nums}
.orow.meRow{background:#1d2030;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.orow .pl{width:22px;font-weight:800;opacity:.6}
.orow .sq{width:10px;height:10px;border-radius:3px}
.orow .nm{flex:1;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.orow .st{opacity:.65;font-size:11.5px}
.row2{display:flex;gap:8px;align-items:flex-end}
.row2 .big{flex:1}
.row2 .ghost{flex:0 0 120px;margin-top:16px}