:root{--bg:#0c0713;--panel:#171021;--line:#342541;--ink:#fffaf0;--muted:#9b8ba8;--lime:#b7ff2a;--pink:#ff3aa7;--cyan:#2ce6ff;--orange:#ff8a28;--purple:#7b38ff;--shadow:0 22px 60px #05020aaa}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -20%,#422062 0,#180d25 37%,var(--bg) 72%);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.shell{width:min(1480px,96vw);margin:auto;padding:22px 0 12px}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:var(--ink);font:28px "Archivo Black";letter-spacing:-2px;transform:skew(-7deg)}.brand b{color:var(--lime);font-size:46px;line-height:0;text-shadow:4px 4px 0 var(--purple)}.room{font-size:12px;letter-spacing:1px;color:var(--muted)}.room i{display:inline-block;width:8px;height:8px;background:var(--lime);border-radius:50%;box-shadow:0 0 13px var(--lime);margin-right:6px}.room strong{color:white;margin-left:5px}.icon-btn{width:42px;height:42px;border:1px solid var(--line);background:#22172d;color:white;border-radius:12px;cursor:pointer}.game-layout{display:grid;grid-template-columns:250px minmax(560px,1fr) 270px;gap:14px}.panel{background:linear-gradient(145deg,#1b1225,#120c1b);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.players,.chat{padding:18px}.eyebrow{font:13px "Archivo Black";letter-spacing:1.4px;color:#d9cce3}.player{display:grid;grid-template-columns:45px 1fr 24px;align-items:center;gap:10px;padding:12px 8px;border-bottom:1px solid #2c2036}.player.active{margin-top:12px;background:#b7ff2a0e;border:1px solid #b7ff2a44;border-radius:14px}.avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#2a1d35;font-size:21px}.player div{min-width:0}.player b{font-size:13px;display:block}.player small{color:var(--muted);font-size:11px}.player em{color:var(--lime);font-style:normal}.player button{border:0;background:transparent;cursor:pointer;filter:grayscale(.3)}.controls{display:grid;gap:8px;margin-top:18px}.pill{display:flex;justify-content:space-between;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#21162b;color:white;cursor:pointer;text-align:left}.pill b{font-size:10px;color:var(--lime);margin-left:auto}.pill.off{opacity:.55}.pill.off b{color:#ff5d65}.arena{padding:16px;position:relative;overflow:hidden}.turn-banner{text-align:center;margin:2px auto 12px}.turn-banner span{display:block;font:22px "Archivo Black";color:var(--lime);letter-spacing:1px}.turn-banner small{font-size:9px;color:var(--muted);letter-spacing:2px}.board-wrap{width:min(100%,610px);margin:auto;position:relative}.board{aspect-ratio:1;position:relative;border:8px solid #2a1c35;border-radius:28px;background:repeating-linear-gradient(45deg,#f8efdc 0 22px,#f3e6cf 22px 44px);box-shadow:inset 0 0 0 4px #0e0914,0 18px 40px #0008;overflow:hidden}.board:before,.board:after{content:"";position:absolute;background:#201329;z-index:1}.board:before{left:43%;width:14%;height:100%}.board:after{top:43%;height:14%;width:100%}.home{position:absolute;width:37%;height:37%;display:grid;place-items:center;font-size:46px;border:5px solid #201329}.home span{filter:drop-shadow(0 7px 0 #0003);z-index:1}.home i{position:absolute;width:26px;height:26px;border-radius:50%;background:#fff5;box-shadow:0 0 0 4px #20132933}.home i:nth-of-type(1){top:12%;left:12%}.home i:nth-of-type(2){bottom:12%;right:12%}.home i:nth-of-type(3){top:12%;right:12%}.home-lime{background:var(--lime);left:0;top:0}.home-pink{background:var(--pink);right:0;top:0}.home-cyan{background:var(--cyan);left:0;bottom:0}.home-orange{background:var(--orange);right:0;bottom:0}.track{position:absolute;inset:37%;background:#f7eddb;z-index:2;transform:rotate(45deg);border:5px solid #201329}.center{position:absolute;z-index:3;inset:39%;display:grid;place-content:center;text-align:center;background:#191020;border:4px solid #f9efdc;outline:4px solid #24172e;border-radius:50%;transform:rotate(-5deg)}.center strong{font:17px "Archivo Black"}.center b{font:38px "Archivo Black";color:var(--lime);line-height:.8;text-shadow:3px 3px var(--purple)}.center small{font-size:7px;color:var(--pink);font-weight:bold;margin-top:6px}.pawn{position:absolute;z-index:5;width:46px;height:46px;border:4px solid white;border-radius:50%;font-size:20px;box-shadow:0 7px 0 #191020,0 10px 20px #0006;cursor:pointer;transition:left .45s cubic-bezier(.2,1.7,.4,1),top .45s cubic-bezier(.2,1.7,.4,1),transform .2s}.pawn:hover{transform:translateY(-5px) rotate(-8deg)}.pawn-lime{background:var(--lime)}.pawn-pink{background:var(--pink)}.pawn-cyan{background:var(--cyan)}.pawn-orange{background:var(--orange)}.p1{left:42%;top:18%}.p2{left:70%;top:42%}.p3{left:30%;top:68%}.p4{left:49%;top:77%}.impact{position:absolute;left:50%;top:45%;z-index:20;opacity:0;font:44px "Archivo Black";color:#fff;transform:translate(-50%,-50%) rotate(-8deg) scale(.2);text-shadow:4px 4px 0 var(--pink),8px 8px 0 #000;pointer-events:none}.impact.show{animation:impact .7s both}.action-row{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center;gap:10px;margin-top:15px}.streak,.timer{display:flex;align-items:center;justify-content:center;gap:9px}.streak>span{font-size:28px}.streak small,.timer small{font-size:8px;color:var(--muted);letter-spacing:1px;display:block}.streak b,.timer b{font:14px "Archivo Black"}.timer{text-align:center}.timer b{font-size:25px;color:var(--pink)}.roll-btn{border:0;border-radius:15px;background:var(--lime);color:#181020;padding:10px 18px;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;box-shadow:0 7px 0 #6c9d12,0 12px 25px #b7ff2a26;transition:.12s}.roll-btn:hover{transform:translateY(-2px)}.roll-btn:active{transform:translateY(5px);box-shadow:0 2px 0 #6c9d12}.die{font-size:31px}.roll-btn b{font:18px "Archivo Black";display:block}.roll-btn small{font-size:8px;font-weight:bold}.chat{display:flex;flex-direction:column}.chat-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:15px}.chat-head small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.chat-head>b{font-size:11px;color:var(--lime)}.messages{flex:1;padding:12px 0}.msg{display:flex;gap:8px;margin:13px 0}.msg>span{display:grid;place-items:center;width:32px;height:32px;background:#2b1d36;border-radius:10px}.msg p{margin:0;font-size:12px;line-height:1.3}.msg p b{display:block;color:#d9c9e5;font-size:10px}.system-msg{text-align:center;background:#ff8a2814;border:1px dashed #ff8a2855;border-radius:12px;padding:10px;font-size:9px;color:var(--muted)}.system-msg b{color:var(--orange);font-size:10px}.chat-form{display:flex;border:1px solid var(--line);background:#0f0a16;border-radius:12px;overflow:hidden}.chat-form input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:white;padding:12px;font:12px inherit}.chat-form button{border:0;background:var(--purple);color:white;width:40px;cursor:pointer}.quick{display:flex;gap:7px;margin-top:8px}.quick button{flex:1;border:1px solid var(--line);background:#21162b;border-radius:9px;padding:7px;cursor:pointer}.quick button:hover{background:#352344}footer{display:flex;justify-content:space-between;padding:16px 5px 0;color:#897893;font-size:10px;letter-spacing:2px}footer b{color:var(--pink)}.toast{position:fixed;left:50%;top:12%;z-index:50;opacity:0;transform:translate(-50%,-30px) rotate(-3deg);background:#fff;color:#17101f;border:4px solid #17101f;padding:10px 22px;border-radius:10px;font:20px "Archivo Black";box-shadow:6px 6px 0 var(--pink)}.toast.show{animation:toast 1.4s both}.confetti{position:fixed;inset:0;pointer-events:none;z-index:40}.confetti i{position:absolute;width:10px;height:18px;top:-30px;animation:fall 1.5s linear forwards}.shake{animation:shake .45s}.rolling .die{animation:dice .55s linear infinite}@keyframes dice{to{transform:rotate(720deg) scale(1.2)}}@keyframes impact{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.1)}35%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1.25)}70%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(.95)}100%{opacity:0;transform:translate(-50%,-60%) rotate(-8deg) scale(1)}}@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-8px,3px) rotate(-1deg)}40%{transform:translate(8px,-3px) rotate(1deg)}60%{transform:translate(-5px,-2px)}80%{transform:translate(5px,2px)}}@keyframes toast{0%{opacity:0;transform:translate(-50%,-30px) rotate(-3deg)}15%,80%{opacity:1;transform:translate(-50%,0) rotate(-3deg)}100%{opacity:0;transform:translate(-50%,-10px) rotate(2deg)}}@keyframes fall{to{transform:translate(var(--drift),110vh) rotate(800deg)}}@media(max-width:1050px){.game-layout{grid-template-columns:210px 1fr}.chat{grid-column:1/-1;min-height:260px}.messages{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}}@media(max-width:760px){.shell{width:94vw}.topbar{height:55px}.room{display:none}.game-layout{display:flex;flex-direction:column}.arena{order:-1;padding:10px}.board{border-width:5px;border-radius:20px}.action-row{grid-template-columns:1fr}.streak,.timer{display:none}.players{display:grid;grid-template-columns:1fr 1fr;gap:6px}.players>.eyebrow,.controls{grid-column:1/-1}.player{padding:8px}.chat{min-height:310px}.messages{display:block}.impact{font-size:30px}}