:root{--bg-0: #0a0c1f;--bg-1: #11142f;--bg-2: #181d44;--surface: rgba(255, 255, 255, .06);--surface-2: rgba(255, 255, 255, .1);--stroke: rgba(255, 255, 255, .12);--text: #f4f6ff;--text-dim: rgba(244, 246, 255, .62);--shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);--shadow-md: 0 12px 30px rgba(0, 0, 0, .35);--radius: 22px;--board: min(92vw, calc(100vh - 230px) , 640px);font-family:Inter,system-ui,-apple-system,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;height:100%;min-height:100%}body{background:radial-gradient(140% 120% at 50% -10%,var(--bg-2) 0%,var(--bg-1) 42%,var(--bg-0) 100%);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}.app-shell{position:relative;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}.bg-orbs{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;filter:blur(40px);opacity:.55}.orb{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:float 14s ease-in-out infinite}.orb-1{width:42vw;height:42vw;left:-8vw;top:-6vw;background:#ff5470}.orb-2{width:38vw;height:38vw;right:-10vw;top:10vh;background:#3da5ff;animation-delay:-4s}.orb-3{width:34vw;height:34vw;left:30vw;bottom:-12vw;background:#27d07a;animation-delay:-8s}@keyframes float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(4vw,5vh) scale(1.12)}}.start-screen{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,4vh,38px);padding:28px 20px 40px;text-align:center}.hero{display:flex;flex-direction:column;align-items:center;gap:12px}.logo-badge{width:92px;height:92px;border-radius:26px;background:linear-gradient(160deg,#ffffff2e,#ffffff0a);border:1px solid var(--stroke);box-shadow:var(--shadow-lg),inset 0 1px #ffffff40;display:grid;place-items:center;animation:bob 4s ease-in-out infinite}@keyframes bob{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}.logo-quads{width:54px;height:54px;display:grid;grid-template-columns:1fr 1fr;gap:5px;transform:rotate(0)}.lq{border-radius:8px;box-shadow:inset 0 -3px #00000040}.lq-red{background:#ff5470}.lq-green{background:#27d07a}.lq-yellow{background:#ffc23c}.lq-blue{background:#3da5ff}.hero-title{font-family:"Baloo 2",sans-serif;font-size:clamp(46px,11vw,82px);line-height:.95;margin:0;font-weight:800;letter-spacing:-1px;background:linear-gradient(180deg,#fff,#c8d0ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 8px 30px rgba(0,0,0,.4)}.hero-title span{background:linear-gradient(180deg,#ffd97a,#ff9d3c);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-sub{margin:0;color:var(--text-dim);font-size:clamp(13px,3.4vw,16px);font-weight:500}.setup-card{width:min(440px,92vw);background:var(--surface);border:1px solid var(--stroke);border-radius:var(--radius);padding:clamp(20px,4vw,30px);display:flex;flex-direction:column;gap:18px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.setup-label{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);font-weight:700}.count-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.count-pill{padding:16px 0;border-radius:16px;font-size:22px;font-weight:800;background:var(--surface-2);border:1.5px solid var(--stroke);transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}.count-pill:hover{transform:translateY(-2px)}.count-pill.is-selected{background:linear-gradient(160deg,#6c7bff,#4453e6);border-color:#fff6;box-shadow:0 10px 24px #4c5aff80}.preview-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.preview-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#ffffff0d;border:1px solid var(--stroke);font-size:13px;font-weight:600}.preview-token{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--c-light),var(--c-base));box-shadow:0 2px 4px #0006}.play-btn{position:relative;padding:17px 22px;border-radius:16px;font-size:18px;font-weight:800;letter-spacing:.3px;color:#1a1030;background:linear-gradient(160deg,#ffe08a,#ffb43c);box-shadow:0 14px 30px #ffaa3c73,inset 0 1px #fff9;display:inline-flex;align-items:center;justify-content:center;gap:10px}.play-arrow{font-size:13px}.start-foot{color:var(--text-dim);font-size:12.5px;max-width:460px;line-height:1.6}.mute-float{position:absolute;top:18px;right:18px}.game-screen{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;min-height:100dvh;padding:10px clamp(10px,2vw,24px) 14px}.game-header{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 10px}.brand-mini{display:flex;align-items:center;gap:10px}.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-family:"Baloo 2";font-weight:800;font-size:20px;color:#1a1030;background:linear-gradient(160deg,#ffe08a,#ffb43c);box-shadow:0 6px 16px #ffaa3c66}.brand-text{font-family:"Baloo 2";font-weight:700;font-size:20px}.header-actions{display:flex;gap:8px}.icon-btn{width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--stroke);font-size:18px;display:grid;place-items:center;transition:transform .16s ease,background .16s ease}.icon-btn:hover{transform:translateY(-2px);background:var(--surface-2)}.game-body{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,26px)}.panel-col{display:flex;flex-direction:column;gap:14px;width:clamp(150px,18vw,210px)}.board-area{display:grid;place-items:center}.player-card{position:relative;background:var(--surface);border:1px solid var(--stroke);border-radius:18px;padding:14px;box-shadow:var(--shadow-md);overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}.player-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--c-glow),transparent 60%);opacity:0;transition:opacity .3s ease}.player-card.is-active{border-color:var(--c-base);box-shadow:0 0 0 1.5px var(--c-base),0 14px 34px var(--c-glow)}.player-card.is-active:before{opacity:.5}.player-top{position:relative;display:flex;align-items:center;gap:10px}.player-avatar{position:relative;width:34px;height:34px;flex:none}.avatar-dot{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--c-light),var(--c-base) 70%,var(--c-dark));box-shadow:inset 0 -3px 5px #0000004d,0 4px 10px var(--c-glow)}.avatar-pulse{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:50%;border:2px solid var(--c-base);animation:ring 1.6s ease-out infinite}@keyframes ring{0%{transform:scale(.8);opacity:.8}to{transform:scale(1.5);opacity:0}}.player-meta{display:flex;flex-direction:column;line-height:1.2}.player-name{font-weight:700;font-size:15px}.player-sub{font-size:11.5px;color:var(--text-dim)}.turn-chip{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:1px;padding:4px 8px;border-radius:8px;color:#15102a;background:var(--c-base);box-shadow:0 4px 10px var(--c-glow)}.token-track{position:relative;display:flex;gap:6px;margin-top:12px}.tk-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--stroke)}.tk-yard{background:#ffffff14}.tk-board{background:var(--c-base);box-shadow:0 0 8px var(--c-glow);border-color:transparent}.tk-home{background:var(--c-light);border-color:var(--c-base);box-shadow:0 0 10px var(--c-glow)}.player-stats{position:relative;display:flex;gap:14px;margin-top:12px;font-size:12px;color:var(--text-dim);font-weight:600}.board{position:relative;width:var(--board);height:var(--board);border-radius:26px;padding:10px;background:linear-gradient(160deg,#20264f,#161a3a);box-shadow:var(--shadow-lg),inset 0 1px #ffffff1f;border:1px solid rgba(255,255,255,.08)}.board-grid{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);border-radius:16px;overflow:hidden;background:#f4f6fb}.tile{position:relative;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 .6px #141e461f}.tile-plain{background:#f7f9fe}.tile-red,.tile-green,.tile-yellow,.tile-blue{background:linear-gradient(160deg,var(--c-light),var(--c-base))}.star-icon{width:62%;height:62%;fill:#28376e52}.tile-safe .star-icon{fill:#28376e66}.start-dot{width:56%;height:56%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffffd9,#ffffff26);box-shadow:inset 0 0 0 2px #ffffff80}.yard{position:relative;margin:0;background:linear-gradient(160deg,var(--c-light),var(--c-base));display:grid;place-items:center}.yard-red{border-bottom-right-radius:14px}.yard-green{border-bottom-left-radius:14px}.yard-yellow{border-top-left-radius:14px}.yard-blue{border-top-right-radius:14px}.yard-inner{width:64%;height:64%;background:#ffffffd1;border-radius:16px;display:grid;grid-template-columns:1fr 1fr;gap:12%;padding:12%;box-shadow:inset 0 2px 8px #0000001f}.yard-pod{border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffffff,var(--c-light));box-shadow:inset 0 0 0 2px var(--c-base),inset 0 -3px 6px #0000001f}.center-home{position:relative;background:#fff;box-shadow:inset 0 0 0 .6px #141e461f}.center-tri{position:absolute;top:0;right:0;bottom:0;left:0}.tri-red{background:linear-gradient(90deg,var(--c-red, #ff5470),#ff7d92);clip-path:polygon(0 0,0 100%,50% 50%);background:linear-gradient(90deg,#ff8aa0,#ff5470)}.tri-green{clip-path:polygon(0 0,100% 0,50% 50%);background:linear-gradient(180deg,#74e9ad,#27d07a)}.tri-yellow{clip-path:polygon(100% 0,100% 100%,50% 50%);background:linear-gradient(270deg,#ffd97a,#ffc23c)}.tri-blue{clip-path:polygon(0 100%,100% 100%,50% 50%);background:linear-gradient(0deg,#86c8ff,#3da5ff)}.center-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;height:38%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,#e7ecff);display:grid;place-items:center;font-size:60%;color:#ffb43c;box-shadow:0 4px 12px #00000040;z-index:2}.center-badge span{font-size:clamp(14px,3vw,26px)}.token-layer{position:absolute;top:10px;right:10px;bottom:10px;left:10px;pointer-events:none}.token{position:absolute;pointer-events:auto;padding:0;border:none;background:none;will-change:left,top,transform;z-index:5}.token-movable{z-index:7;cursor:pointer}.token:disabled{cursor:default}.token-body{position:relative;display:block;width:100%;height:100%;border-radius:50%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}.token-gem{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 36% 28%,var(--c-light),var(--c-base) 58%,var(--c-dark));box-shadow:inset 0 -3px 5px #00000059,inset 0 2px 3px #ffffff80;border:1.5px solid rgba(255,255,255,.7)}.token-shine{position:absolute;left:26%;top:16%;width:30%;height:24%;border-radius:50%;background:#fffc;filter:blur(.5px)}.token-ring{position:absolute;top:-22%;right:-22%;bottom:-22%;left:-22%;border-radius:50%;border:2.5px solid var(--c-base);animation:tring 1.2s ease-out infinite}@keyframes tring{0%{transform:scale(.7);opacity:.9}to{transform:scale(1.25);opacity:0}}.token-movable .token-gem{animation:tbounce .9s ease-in-out infinite}@keyframes tbounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12%)}}.token-home .token-gem{box-shadow:inset 0 -3px 5px #00000059,0 0 12px var(--c-glow)}.control-bar{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,40px);padding:14px 10px 6px}.status-msg{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--stroke);font-weight:600;font-size:15px;box-shadow:var(--shadow-md);min-width:180px;justify-content:center}.status-pip{width:10px;height:10px;border-radius:50%}.dice-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}.dice-btn{--size: 62px;width:var(--size);height:var(--size);perspective:460px;display:grid;place-items:center;border-radius:18px;transition:transform .16s ease,box-shadow .2s ease}.dice-btn.is-ready{box-shadow:0 0 0 3px #ffffff14,0 12px 30px var(--turn-glow, rgba(0,0,0,.3));animation:dieready 1.6s ease-in-out infinite}@keyframes dieready{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.dice-btn.is-disabled{opacity:.96}.dice-btn:active.is-ready{transform:scale(.92)}.dice-scene{width:100%;height:100%;transform-style:preserve-3d;display:grid;place-items:center}.die{position:relative;width:56px;height:56px;transform-style:preserve-3d}.die-face{position:absolute;width:56px;height:56px;border-radius:14px;background:linear-gradient(160deg,#fff,#e6ebfb);box-shadow:inset 0 0 0 1.5px #0000000f,inset 0 -4px 8px #141e461f;display:grid;place-items:center}.f-front{transform:translateZ(28px)}.f-back{transform:rotateY(180deg) translateZ(28px)}.f-right{transform:rotateY(90deg) translateZ(28px)}.f-left{transform:rotateY(-90deg) translateZ(28px)}.f-top{transform:rotateX(90deg) translateZ(28px)}.f-bottom{transform:rotateX(-90deg) translateZ(28px)}.pips{width:74%;height:74%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px}.pip{border-radius:50%}.pip-on{background:radial-gradient(circle at 38% 32%,#4a5170,var(--die-accent, #2b3157));box-shadow:inset 0 -1px 1px #0000004d}.dice-hint{font-size:11px;color:var(--text-dim);font-weight:600;height:14px}.dice-hint.pulse{color:var(--text);animation:hintp 1.4s ease-in-out infinite}@keyframes hintp{0%,to{opacity:.5}50%{opacity:1}}.win-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;background:radial-gradient(120% 100% at 50% 0%,#0a0c1fb3,#050612eb);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:20px}.win-card{position:relative;z-index:2;width:min(440px,92vw);background:linear-gradient(165deg,#282e56f2,#161a3af2);border:1px solid var(--stroke);border-radius:28px;padding:30px 26px;text-align:center;box-shadow:var(--shadow-lg),0 0 0 1.5px var(--c-base)}.trophy{font-size:64px;filter:drop-shadow(0 8px 18px var(--c-glow))}.win-eyebrow{display:block;letter-spacing:4px;font-size:12px;font-weight:800;color:var(--c-base);text-transform:uppercase;margin-top:6px}.win-title{font-family:"Baloo 2";font-size:clamp(28px,7vw,40px);margin:4px 0 6px}.win-sub{color:var(--text-dim);margin:0 0 22px;font-size:14px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}.stat-cell{background:var(--surface);border:1px solid var(--stroke);border-radius:14px;padding:12px 6px;display:flex;flex-direction:column;gap:3px}.stat-value{font-size:22px;font-weight:800;font-family:"Baloo 2"}.stat-label{font-size:10.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.win-actions{display:flex;flex-direction:column;gap:10px}.ghost-btn{padding:14px;border-radius:14px;font-weight:700;font-size:15px;background:var(--surface-2);border:1px solid var(--stroke)}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:1}.confetti-piece{position:absolute;top:-20px;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite}@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translate(var(--drift),105vh) rotate(calc(var(--rot) * 4));opacity:.9}}.mode-choice{display:flex;flex-direction:column;gap:12px}.mode-online-btn{padding:17px 22px;border-radius:16px;font-size:18px;font-weight:800;letter-spacing:.3px;background:linear-gradient(160deg,#6c7bff,#4453e6);color:#fff;box-shadow:0 14px 30px #4c5aff73,inset 0 1px #fff6;display:inline-flex;align-items:center;justify-content:center;gap:10px}.online-glyph{font-size:18px}.net-badge{margin-left:8px;font-size:9.5px;font-weight:800;letter-spacing:1.2px;padding:3px 7px;border-radius:7px;color:#cfe0ff;background:#6c7bff40;border:1px solid rgba(108,123,255,.5)}.online-card{position:relative;width:min(440px,92vw);background:var(--surface);border:1px solid var(--stroke);border-radius:var(--radius);padding:clamp(22px,4vw,30px);display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);text-align:left}.link-back{align-self:flex-start;color:var(--text-dim);font-weight:600;font-size:14px;padding:2px 0}.link-back:hover{color:var(--text)}.online-title{font-family:"Baloo 2";font-size:28px;margin:0}.online-sub{margin:-8px 0 0;color:var(--text-dim);font-size:13.5px}.field{display:flex;flex-direction:column;gap:6px}.field span{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);font-weight:700}.field input{width:100%;padding:13px 14px;border-radius:12px;background:#00000038;border:1.5px solid var(--stroke);color:var(--text);font-size:16px;font-weight:600;outline:none;transition:border-color .18s ease,box-shadow .18s ease}.field input:focus{border-color:#6c7bff;box-shadow:0 0 0 3px #6c7bff40}.code-input{letter-spacing:8px;text-align:center;font-size:26px;font-family:"Baloo 2";text-transform:uppercase}.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#00000038;border:1px solid var(--stroke);padding:4px;border-radius:12px}.seg button{padding:10px;border-radius:9px;font-weight:700;color:var(--text-dim);transition:all .18s ease}.seg .seg-on{background:var(--surface-2);color:var(--text);box-shadow:var(--shadow-md)}.net-note{color:var(--text-dim);font-size:13px;text-align:center;margin:0}.net-error{color:#ff8a9c;font-size:13px;text-align:center;margin:0;font-weight:600}.code-display{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;border-radius:16px;background:linear-gradient(160deg,#6c7bff33,#4453e61a);border:1px solid rgba(108,123,255,.4);transition:transform .16s ease}.code-display:hover{transform:translateY(-2px)}.code-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);font-weight:700}.code-value{font-family:"Baloo 2";font-size:42px;font-weight:800;letter-spacing:10px;line-height:1;padding-left:10px}.code-copy{font-size:11.5px;color:#b9c4ff;font-weight:600}.seat-list{display:flex;flex-direction:column;gap:8px}.seat-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:13px;background:#ffffff0d;border:1px solid var(--stroke)}.seat-dot{width:18px;height:18px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,var(--c-light),var(--c-base));box-shadow:0 2px 6px #00000059}.seat-empty{opacity:.45}.seat-empty .seat-dot{background:#ffffff1f;animation:hintp 1.6s ease-in-out infinite}.seat-name{font-weight:600;font-size:15px}.seat-host{margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:1px;padding:3px 7px;border-radius:7px;color:#1a1030;background:linear-gradient(160deg,#ffe08a,#ffb43c)}@media (max-width: 860px){:root{--board: min(94vw, calc(100dvh - 320px) , 560px)}.game-body{flex-direction:column;gap:10px}.panel-col{width:100%;max-width:var(--board);flex-direction:row}.player-card{flex:1;padding:9px 11px}.player-card .player-stats{display:none}.token-track{margin-top:8px}.panel-left{order:1}.board-area{order:2}.panel-right{order:3}}@media (max-width: 520px){:root{--board: min(96vw, calc(100dvh - 300px) )}.player-name{font-size:13px}.player-sub{font-size:10px}.player-avatar{width:26px;height:26px}.tk-dot{width:10px;height:10px}.status-msg{font-size:13px;min-width:0;padding:9px 13px}.dice-btn{--size: 56px}.dice-scene{transform:scale(.86)}.control-bar{gap:14px}}@media (max-width: 380px){.turn-chip{display:none}.player-card{padding:7px 9px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}