/* ===== v4 UI pass: chunky glossy controls, soft panels, no flat boxes ===== */
:root{--ink:#1d2823;--g1:#5fe39a;--g2:#1f8a4a;--g3:#0f4a2a;--glass:rgba(10,32,22,.78)}
/* page chrome */
.top{background:linear-gradient(rgba(6,18,12,.96),rgba(6,18,12,.9));border-bottom:1px solid rgba(127,227,160,.18)}
#nav button{background:linear-gradient(#143526,#0b1f16);border:2px solid #1f4a35;color:#b9e6cb;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #06120c}
#nav button.on{background:linear-gradient(#6fe8a4,#2fa862);border-color:#1d2823;color:#06200f;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 3px 0 #0f4a2a}
.card{background:linear-gradient(rgba(16,40,28,.9),rgba(8,24,16,.9));border:2px solid #1f4a35;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.35)}
.btn{background:linear-gradient(#1b4a33,#0f2e1f);border:2px solid #1d2823;box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 3px 0 #06120c;border-radius:12px}
.btn:hover{transform:translateY(-1px);border-color:#1d2823;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 4px 0 #06120c}
.btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 1px 0 #06120c}
.btn.primary{background:linear-gradient(#7af0ab,#2fa862);color:#06200f;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 3px 0 #0f4a2a}
.btn.sel{background:linear-gradient(#7af0ab,#2fa862);color:#06200f}
.btn.danger{background:linear-gradient(#ff8a96,#d1283c);color:#2a0409;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 3px 0 #6b0f1a}
/* game frame */
.game{border:5px solid #1d2823;border-radius:22px;box-shadow:0 0 0 3px #3b6b52,0 0 0 6px #1d2823,0 20px 50px rgba(0,0,0,.55)}
.game::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 0 60px rgba(0,0,0,.35);border-radius:16px}
/* HUD cards */
.hcard,.tbar,.tlist,.gtimer,.tasktab,.ib{background:linear-gradient(rgba(22,56,40,.9),rgba(8,28,18,.92));border:3px solid var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -3px 0 rgba(0,0,0,.35),0 4px 0 #06120c,0 8px 18px rgba(0,0,0,.35);border-radius:16px}
.hcard{padding:7px 16px}.hcard small{color:#9fe0bb}.code{color:#ffe36b;text-shadow:0 2px 0 #1d2823}
.ib{padding:4px;border-radius:50%;width:58px;height:58px;display:grid;place-items:center}.ib svg{width:40px;height:40px}.ib:hover{transform:scale(1.08) rotate(-6deg)}
.gtimer{font:900 22px system-ui;color:#fff;padding:7px 14px;border-radius:14px;letter-spacing:1px}
.tbar{padding:5px 10px 8px;border-radius:14px}.tbar b{color:#d8ffe9}
.tfill{height:20px;border-radius:10px;background:linear-gradient(#0a1f15,#13302a);border:3px solid var(--ink);box-shadow:inset 0 3px 6px rgba(0,0,0,.5)}
.tfill i{background:linear-gradient(#9dffc2,#2fbf5a 60%,#1f8a4a);border-radius:7px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.tfill i::after{top:2px;height:5px;background:rgba(255,255,255,.55)}
.tasktab{border-radius:12px;padding:4px 12px 4px 6px}
.tlist{border-radius:12px;padding:8px 12px}.tlist p{display:flex;gap:6px;align-items:baseline}.tlist p::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffd34d;flex:none;box-shadow:0 0 6px #ffd34d}.tlist p.d::before{background:#5ef08a;box-shadow:none}.tlist p.al::before,.tlist p.sb::before{background:#ff5d6e}
/* big round action buttons */
.gb .ic{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#4fcf88,#1f8a4a 55%,#0f4a2a);border:4px solid var(--ink);box-shadow:inset 0 6px 0 rgba(255,255,255,.28),inset 0 -8px 0 rgba(0,0,0,.28),0 6px 0 #06120c,0 10px 18px rgba(0,0,0,.45);filter:none;transition:.12s}
.gb .ic svg{width:58px;height:58px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.gb.main .ic{width:120px;height:120px}.gb.main .ic svg{width:74px;height:74px}
.gb.sm .ic{width:68px;height:68px}.gb.sm .ic svg{width:42px;height:42px}
.gb b{margin-top:4px;font-size:15px;letter-spacing:1px}
.gb:hover:not(:disabled){transform:none}.gb:hover:not(:disabled) .ic{transform:translateY(-2px);box-shadow:inset 0 6px 0 rgba(255,255,255,.34),inset 0 -8px 0 rgba(0,0,0,.28),0 8px 0 #06120c,0 14px 22px rgba(0,0,0,.45)}
.gb:active:not(:disabled) .ic{transform:translateY(4px);box-shadow:inset 0 6px 0 rgba(255,255,255,.2),inset 0 -8px 0 rgba(0,0,0,.28),0 2px 0 #06120c}
.gb:disabled{opacity:.55;filter:none}.gb:disabled .ic{background:radial-gradient(circle at 35% 28%,rgba(90,110,100,.5),rgba(43,58,51,.5) 55%,rgba(23,33,28,.5));box-shadow:inset 0 4px 0 rgba(255,255,255,.1),0 4px 0 rgba(6,18,12,.6);transform:scale(.82)}.gb:disabled b{opacity:.6}
.gb.emerg .ic,.gb.sab .ic{background:radial-gradient(circle at 35% 28%,#ff8a96,#d1283c 55%,#6b0f1a)}
.gb.repair .ic{background:radial-gradient(circle at 35% 28%,#ffd07a,#e08a1f 55%,#6b3a05)}
.gb.fake .ic{background:radial-gradient(circle at 35% 28%,#c9a9ff,#7a4fe0 55%,#33186b)}
.gb.dist .ic{background:radial-gradient(circle at 35% 28%,#ffe07a,#e0b020 55%,#6b4a05)}
.gb.council .ic{background:radial-gradient(circle at 35% 28%,#b9ffd4,#38c172 55%,#1f8a4a);animation:glowC 1.4s infinite}
@keyframes glowC{50%{box-shadow:inset 0 6px 0 rgba(255,255,255,.28),inset 0 -8px 0 rgba(0,0,0,.28),0 6px 0 #06120c,0 0 30px #7fe3a0}}
.gb.emerg:not(:disabled) .ic,.gb.repair:not(:disabled) .ic{animation:none}
.gb.cd::before{top:0;width:96px;height:96px;margin-left:-48px;background:conic-gradient(rgba(5,12,8,.8) calc(var(--p,0)*1%),transparent 0);border-radius:50%}
.gb.main.cd::before{width:120px;height:120px;margin-left:-60px}.gb.sm.cd::before{width:68px;height:68px;margin-left:-34px;top:0}
.cdn{top:48px}.gb.main .cdn{top:60px}.gb.sm .cdn{top:34px}
.startbtn{background:linear-gradient(#8dffb9,#38c172 50%,#1f8a4a);border:4px solid var(--ink);border-radius:22px;padding:8px 44px;box-shadow:inset 0 4px 0 rgba(255,255,255,.5),inset 0 -6px 0 rgba(0,0,0,.2),0 7px 0 #0f4a2a,0 14px 24px rgba(0,0,0,.45);font-size:32px;letter-spacing:3px}
.startbtn:active{transform:translateY(5px);box-shadow:inset 0 4px 0 rgba(255,255,255,.4),0 2px 0 #0f4a2a}
.joy{background:radial-gradient(circle at 50% 50%,rgba(10,32,22,.55),rgba(10,32,22,.75));border:4px solid var(--ink);box-shadow:inset 0 4px 10px rgba(0,0,0,.5),0 0 0 3px rgba(127,227,160,.25)}
.joy i{background:radial-gradient(circle at 35% 30%,#ffffff,#9fd6b8 60%,#5fae84);box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),0 4px 8px rgba(0,0,0,.4)}
.roomtoast{text-shadow:0 4px 0 rgba(0,0,0,.35)}
/* banners, menus, overlays */
.game .banner{background:linear-gradient(#ff7b88,#c81e32);border:4px solid var(--ink);border-radius:18px;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 6px 0 #4a0810,0 12px 24px rgba(0,0,0,.45)}
.game .banner.warn{background:linear-gradient(#ffd97a,#d99a1a);color:#2a1a02}
.sabmenu{background:linear-gradient(#3a1220,#1a0810);border:4px solid var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 8px 0 #0a0306,0 14px 30px rgba(0,0,0,.5);border-radius:18px}
.sabmenu button{background:linear-gradient(#5a1a2c,#3a0f1c);border-radius:12px;box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 3px 0 #0a0306}
.minimap .mm-in{background:linear-gradient(#1b3d2c,#0d2419);border:5px solid var(--ink);box-shadow:inset 0 0 0 4px #3b6b52,0 20px 50px rgba(0,0,0,.6);border-radius:22px}
.mmx{box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 0 #4a0810}
.rbox,.cbox{background:linear-gradient(#2f7a52,#16452e);border:5px solid var(--ink);box-shadow:inset 0 0 0 3px #5fb88a,inset 0 4px 0 rgba(255,255,255,.2),0 20px 50px rgba(0,0,0,.55);border-radius:24px}
.holdbtn{box-shadow:inset 0 6px 0 rgba(255,255,255,.35),inset 0 -8px 0 rgba(0,0,0,.25),0 6px 0 #4a2a05}
.cprev{background:radial-gradient(circle at 50% 30%,#2a6b48,#143526);box-shadow:inset 0 0 30px rgba(0,0,0,.4)}
.cbox .sw{box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.25),0 2px 0 #06120c}
.acc{background:linear-gradient(#1b4a33,#0f2e1f);box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 2px 0 #06120c}
/* task modal */
.mbox{background:linear-gradient(#2f7a52,#143526);border:5px solid var(--ink);box-shadow:inset 0 0 0 3px #5fb88a,inset 0 4px 0 rgba(255,255,255,.2),0 24px 60px rgba(0,0,0,.6);border-radius:26px}
.mbox::before,.mbox::after{background:#0f2e1f;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.mroom{background:rgba(0,0,0,.25);border-width:2px}
.mbody{background:linear-gradient(#0d2419,#071610);border:4px solid var(--ink);border-radius:18px;box-shadow:inset 0 0 40px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.05)}
.mfoot{background:rgba(0,0,0,.18);border-radius:12px;padding:10px 12px;border-top:0;margin-top:12px}
.mdone{background:radial-gradient(circle,rgba(20,60,40,.97),rgba(6,20,12,.98))}.mdone h2{text-shadow:0 0 20px #5ef08a}
/* meeting */
.vc{background:linear-gradient(#ffffff,#dfe9e4);box-shadow:inset 0 3px 0 rgba(255,255,255,.9),inset 0 -4px 0 rgba(0,0,0,.08),0 4px 0 #0f2e1f;border-radius:16px}
.vc.sel{box-shadow:inset 0 3px 0 rgba(255,255,255,.9),0 0 0 4px #ffd34d,0 4px 0 #0f2e1f}
.vc .conf button{box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 #0f2e1f}
.chat{background:linear-gradient(#0f3324,#0a2419);border:3px solid var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);border-radius:18px}
.msg{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 rgba(0,0,0,.25)}
.cin input{background:#071610;border:2px solid #1f4a35;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.vt{border:3px solid var(--ink);box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
/* preview page bits */
.skin,.tc,.sheet .it{background:linear-gradient(rgba(16,40,28,.9),rgba(8,24,16,.9));border:2px solid #1f4a35;box-shadow:0 6px 0 #06120c,0 10px 24px rgba(0,0,0,.35)}
.skin.on{border-color:#5fe39a;box-shadow:0 0 0 3px #5fe39a inset,0 6px 0 #06120c}
.tc:hover{border-color:#5fe39a}
.seg-ctl{border:2px solid #1f4a35;background:#0b1f16;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}.seg-ctl button.on{background:linear-gradient(#7af0ab,#2fa862);color:#06200f}
.frames,.walkTrack{background:linear-gradient(#0f3324,#071610);border:2px solid #1f4a35}