:root{--bg:#0d0d0f;--panel:rgba(18,18,22,.92);--line:rgba(255,255,255,.12);--text:#f2efe8;--dim:#a29e96;--accent:#ffd23f;--danger:#ff5a4e;--ok:#3ddc84}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;-webkit-user-select:text;user-select:text}
.hidden{display:none!important}
.note{font-size:12px;color:var(--dim);margin:10px 0 0;line-height:1.45}
.lc{text-transform:none;letter-spacing:0}

/* ---------- Title ---------- */
#title{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25) 40%,rgba(0,0,0,.8)),url(/bg.jpg) center/cover no-repeat;z-index:50}
#logo{font-family:'Rubik Spray Paint',Inter,sans-serif;font-size:clamp(64px,14vw,150px);line-height:.9;text-align:center;color:#fff;text-shadow:0 0 18px rgba(255,210,63,.35),3px 4px 0 #000;letter-spacing:2px;margin-top:12vh}
#playBtn{font-weight:800;font-size:26px;letter-spacing:6px;padding:16px 64px;border:3px solid #fff;border-radius:6px;background:rgba(0,0,0,.45);transition:transform .1s,background .2s}
#playBtn:hover{background:var(--accent);color:#000;border-color:var(--accent)}
#playBtn:active{transform:scale(.96)}
#playBtn:disabled{opacity:.5}
#titleMsg{background:rgba(0,0,0,.7);border:1px solid var(--line);padding:10px 16px;border-radius:10px;font-size:14px;text-align:center;max-width:90vw}
#titleFoot{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));font-size:12px;color:#cfcac0;opacity:.8;letter-spacing:1px}

/* ---------- App ---------- */
#app{position:fixed;inset:0}
#view{position:absolute;inset:0;touch-action:none;display:block}
#cursor{position:absolute;pointer-events:none;border:1.5px solid rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.6);transform:translate(-50%,-50%);display:none}
.mode-wall .paintOnly,.mode-wall #view,.mode-wall #cursor{display:none!important}
.mode-paint #gallery{display:none}

.topbar{position:absolute;top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;gap:8px;pointer-events:none;z-index:5}
.topbar>*{pointer-events:auto}
#menuBtn{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 14px}
#menuBtn .mini{font-family:'Rubik Spray Paint',Inter;font-size:20px}
#server{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;display:flex;gap:8px;align-items:center;white-space:nowrap}
#server .dot{width:8px;height:8px;border-radius:50%;background:#f0a020}
#server.live .dot{background:var(--ok)}
#server.test{color:#ffb44d}
#server.test .dot{background:#ff8a00}
#parentBanner{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:12px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#parentBanner b{color:var(--text)}
.mode-wall #parentBanner{display:none}

#side{position:absolute;top:0;bottom:0;left:0;width:260px;max-width:80vw;background:var(--panel);border-right:1px solid var(--line);
  padding:calc(20px + env(safe-area-inset-top)) 14px 20px calc(14px + env(safe-area-inset-left));transform:translateX(-105%);transition:transform .22s;z-index:30;display:flex;flex-direction:column;gap:4px}
#side.open{transform:none}
#side h2{font-family:'Rubik Spray Paint';font-weight:400;font-size:34px;margin:0 0 4px 6px}
.meTag{margin:0 0 12px 8px;font-size:13px;color:var(--dim)}
.meTag b{color:var(--text)}
.navItem{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:12px;border-radius:8px;font-weight:600}
.navItem:hover{background:rgba(255,255,255,.07)}
.navItem small{color:var(--dim);font-weight:400;font-size:11px}
#side .ver{margin-top:auto;font-size:11px;color:var(--dim);padding-left:12px}
#scrim{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:25}

/* ---------- Gallery ---------- */
#gallery{position:absolute;inset:0;overflow-y:auto;padding:calc(70px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 120px calc(16px + env(safe-area-inset-left));
  background:linear-gradient(180deg,rgba(13,13,15,.92),rgba(13,13,15,.97)),url(/bg.jpg) center/cover fixed;-webkit-overflow-scrolling:touch}
.galHead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.galHead h1{font-family:'Rubik Spray Paint';font-weight:400;font-size:44px;margin:0;line-height:1}
.galMeta{display:flex;gap:8px;align-items:center;color:var(--dim);font-size:13px}
#wallGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.piece{background:#161619;border:1px solid var(--line);border-radius:10px;overflow:hidden;text-align:left;transition:transform .1s,border-color .2s}
.piece:hover{border-color:rgba(255,255,255,.3)}
.piece:active{transform:scale(.98)}
.piece img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#222}
.piece .cr{padding:8px 10px 2px;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.piece .cr .more{color:var(--accent);font-weight:600}
.piece .when{padding:0 10px 9px;font-size:11px;color:var(--dim)}
.credits{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-weight:700}
.credits .arrow{color:var(--dim);font-weight:400}

/* ---------- Toolbar & sheets ---------- */
.toolbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));display:flex;gap:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none;z-index:6}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:56px;height:54px;padding:0 6px;border-radius:10px;font-size:11px;color:var(--dim);flex-shrink:0}
.tb:hover,.tb.on{background:rgba(255,255,255,.08);color:var(--text)}
.tb svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tb.post{background:var(--accent);color:#000;font-weight:700}
#swatchBtn .sw{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #000}
#capBtn .capIcon{width:24px;height:24px}
.sheet{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));width:min(560px,calc(100vw - 20px));
  max-height:min(60vh,520px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;z-index:12;backdrop-filter:blur(8px)}
.sheet h3{margin:0 0 10px;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
.caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.cap{display:flex;gap:10px;align-items:center;text-align:left;padding:10px;border:1px solid var(--line);border-radius:10px}
.cap.on{border-color:var(--accent);background:rgba(255,210,63,.08)}
.cap b{display:block;font-size:14px}.cap small{color:var(--dim);font-size:11px}
.cap canvas{flex-shrink:0;background:#e9e4d8;border-radius:6px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tab{padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:600}
.tab.on{background:var(--text);color:#000}
.tab.soon{opacity:.45}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.swatch{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--dim);text-align:center;cursor:pointer}
.swatch i{width:40px;height:40px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.swatch.on i{border-color:#fff;box-shadow:0 0 0 2px #000,0 0 0 3px #fff}
input[type=color]{width:44px;height:44px;border:0;padding:0;background:none}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{padding:11px 16px;border-radius:10px;border:1px solid var(--line);font-weight:600;background:rgba(255,255,255,.05)}
.btn.small{padding:7px 12px;font-size:13px}
.btn.primary{background:var(--accent);color:#000;border-color:var(--accent)}
.btn.danger{color:var(--danger);border-color:rgba(255,90,78,.4)}
.btn:disabled{opacity:.5}
.saves{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.save{border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:12px}
.save img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#222}
.save div{padding:8px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.toggle{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.toggle input{width:22px;height:22px}

/* ---------- Chat ---------- */
#chat{position:absolute;left:calc(12px + env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));width:min(340px,calc(100vw - 24px));
  background:rgba(14,14,17,.72);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;z-index:7;backdrop-filter:blur(6px)}
.mode-paint #chat,.mode-paint #chatOpen{bottom:calc(84px + env(safe-area-inset-bottom))}
.chatHead{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;font-size:12px;color:var(--dim);border-bottom:1px solid var(--line)}
.chatHead b{color:var(--text)}
#chatMin{font-size:18px;line-height:1;padding:0 6px}
#chatLog{height:170px;overflow-y:auto;padding:6px 10px;font-size:13px;line-height:1.4;-webkit-user-select:text;user-select:text}
#chatLog .m{margin:2px 0;word-wrap:break-word}
#chatLog .m b{margin-right:6px}
#chatLog .m.sys{color:var(--dim);font-style:italic}
.role-admin{color:#ff6b5b}.role-tester{color:#ffb44d}.role-player{color:#8fd3ff}
#chatForm{display:flex;gap:6px;padding:7px;border-top:1px solid var(--line)}
#chatInput{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:8px 10px;font-size:14px}
#chatOpen{position:absolute;left:calc(12px + env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:600;z-index:7}
#chatUnread{background:var(--accent);color:#000;border-radius:999px;padding:1px 7px;margin-left:6px;font-size:11px}

/* ---------- Modals / toast ---------- */
#toast{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);background:#000;border:1px solid var(--line);padding:9px 16px;border-radius:999px;font-size:13px;z-index:90;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;text-align:center}
#toast.show{opacity:1}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:80;padding:16px}
.modal .box{background:#141418;border:1px solid var(--line);border-radius:14px;padding:18px;width:min(92vw,760px);max-height:92vh;overflow:auto}
.modal .box.narrow{width:min(92vw,380px)}
.modal h3{margin:0 0 6px}
.modal .big{width:100%;max-height:58vh;object-fit:contain;display:block;margin:10px 0;background:#000;border-radius:8px}
.field{display:flex;flex-direction:column;gap:5px;margin:10px 0;font-size:13px;color:var(--dim)}
.field input{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:9px;color:var(--text);padding:12px;font-size:16px}
.err{color:var(--danger);font-size:13px;min-height:18px;margin-top:6px}
.authTabs{display:flex;gap:6px;margin:6px 0 4px}
.serverPick{display:grid;gap:10px;margin-top:12px}
.serverPick button{padding:16px;border:1px solid var(--line);border-radius:12px;text-align:left;font-weight:700;font-size:16px}
.serverPick button small{display:block;font-weight:400;color:var(--dim);font-size:12px;margin-top:3px}
.serverPick button:hover{border-color:var(--accent)}

@media (max-width:560px){
  #menuBtn .mini{display:none}
  #server{font-size:11px;padding:6px 10px}
  .tb{min-width:48px;padding:0 4px;font-size:10px}
  .galHead h1{font-size:34px}
  #wallGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
}