:root{--font-display: "Fredoka", system-ui, sans-serif;--font-body: "Nunito", system-ui, sans-serif;--table-0: #160c26;--table-1: #241540;--ink: #f4eeff;--muted: rgba(244, 238, 255, .62);--gold: #ffcf5c;--gold-deep: #d99a24;--surface: #241a3d;--surface-line: rgba(255, 255, 255, .09);--cell: 62px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-body);font-weight:700;color:var(--ink);background:radial-gradient(1100px 780px at 50% -12%,#3c2560,#241540 46%,#160c26);min-height:100vh;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(680px 460px at 40% 24%,rgba(255,209,140,.16),transparent 70%),radial-gradient(120% 120% at 50% 50%,transparent 58%,rgba(8,4,16,.55) 100%);z-index:0}.screen{position:relative;z-index:1;min-height:100vh;padding:28px 24px}.center{display:flex;align-items:center;justify-content:center}.card{width:min(430px,92vw);background:linear-gradient(180deg,#ffffff12,#ffffff08);border:1px solid var(--surface-line);border-radius:26px;padding:32px;box-shadow:0 30px 70px #00000080,inset 0 1px #ffffff1f;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:18px;text-align:center;animation:cardIn .5s cubic-bezier(.2,.9,.3,1.2)}@keyframes cardIn{0%{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}.title{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1.1;letter-spacing:.2px}.subtitle{color:var(--muted);font-size:14px;line-height:1.5}.subtitle code,code{font-family:var(--font-body);font-weight:800;background:#0000004d;color:var(--gold);padding:2px 8px;border-radius:7px;font-size:13px}.pulse{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.warn{color:var(--gold);font-size:14px;font-weight:800}.field{display:flex;flex-direction:column;gap:7px;text-align:left;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}input{font-family:var(--font-body);font-weight:700;font-size:16px;padding:13px 15px;border-radius:13px;border:2px solid rgba(255,255,255,.14);background:#00000047;color:var(--ink);outline:none;transition:border-color .16s,box-shadow .16s}input::placeholder{color:#f4eeff52}input:focus{border-color:var(--gold);box-shadow:0 0 0 4px #ffcf5c29}.code-input{letter-spacing:10px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:26px;text-transform:uppercase}.col{display:flex;flex-direction:column;gap:12px}.row{display:flex;gap:10px;justify-content:center}button{font-family:var(--font-display);font-weight:600;cursor:pointer;border:none;letter-spacing:.3px;border-radius:14px;padding:14px 20px;font-size:17px;color:#3a2205;background:linear-gradient(180deg,#ffe08a,var(--gold) 55%,var(--gold-deep));box-shadow:0 5px #a9741a,0 10px 18px #00000052;transition:transform .08s,box-shadow .08s,filter .15s;position:relative;overflow:hidden}button:after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skew(-18deg);transition:left .5s}button:hover:not(:disabled){filter:brightness(1.04)}button:hover:not(:disabled):after{left:130%}button:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px #a9741a,0 3px 8px #0000004d}button:disabled{cursor:not-allowed;filter:grayscale(.5) brightness(.85);opacity:.7;box-shadow:0 4px #0000004d}button.ghost{color:var(--ink);background:#ffffff1a;box-shadow:0 4px #00000047}button.ghost:after{display:none}button.ghost:active:not(:disabled){box-shadow:0 1px #00000047}button.small{font-size:14px;padding:10px 15px;border-radius:11px}.room-code{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;background:#00000047;border:2px dashed rgba(255,207,92,.55)}.room-code span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;font-weight:800}.room-code strong{font-family:var(--font-display);font-weight:700;font-size:42px;letter-spacing:12px;color:var(--gold);text-shadow:0 3px 10px rgba(255,207,92,.3)}.players-list{display:flex;flex-direction:column;gap:8px;list-style:none}.player-row{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:13px;background:#ffffff0f;border:2px solid transparent;transition:.22s}.player-row.active{border-color:var(--gold);background:#ffcf5c24;box-shadow:0 0 22px #ffcf5c40;transform:translate(3px)}.pawn-chip{width:22px;height:22px;flex-shrink:0;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid rgba(255,255,255,.8);box-shadow:inset -1px -1px 3px #0000004d}.pname{flex:1;text-align:left;font-weight:800;font-size:15px}.pname .lead{color:var(--gold)}.ppos{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--muted);min-width:22px;text-align:right}.badge{font-size:11px;color:var(--muted);font-weight:800}.game-screen{display:flex;gap:40px;align-items:flex-start;justify-content:center;flex-wrap:wrap}.panel{width:300px;background:linear-gradient(180deg,#ffffff14,#ffffff08);border:1px solid var(--surface-line);border-radius:22px;padding:22px;box-shadow:0 26px 60px #00000073,inset 0 1px #ffffff1a;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:16px}.panel-head{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center}.brand{font-family:var(--font-display);font-weight:700;font-size:20px}.room-tag{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}.turn-banner{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:14px;font-family:var(--font-display);font-weight:600;font-size:18px;background:#0000003d;box-shadow:inset 0 0 0 2px var(--turn, #fff);transition:.2s}.turn-banner.is-you{background:color-mix(in srgb,var(--gold) 20%,transparent)}.turn-dot{width:12px;height:12px;border-radius:50%;background:var(--turn, #fff);box-shadow:0 0 10px var(--turn, #fff);animation:blip 1.1s ease-in-out infinite}@keyframes blip{0%,to{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.6}}.log{font-size:13px;font-weight:700;text-align:center;padding:11px;border-radius:12px;background:#00000042;line-height:1.45;animation:cardIn .3s ease}.stage-wrap{flex-shrink:0;margin:4px 0}.stage{padding:15px;border-radius:26px;background:linear-gradient(155deg,#9a6631,#6b4320 55%,#4f3016);box-shadow:0 22px 50px #0000008c,inset 0 2px 3px #ffdcaa59,inset 0 -6px 12px #0006}.board-inner{position:relative}.board{position:relative;z-index:1;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 2px #0000002e}.cell{position:relative;display:flex;align-items:flex-start;padding:3px 5px;box-shadow:inset 0 0 0 .5px #0000000f}.cell-light{background:linear-gradient(150deg,#fdf0c9,#f6e3a6)}.cell-dark{background:linear-gradient(150deg,#a9e0c0,#8ad3aa)}.cell-start{background:linear-gradient(150deg,#bdeaff,#8fd6ff)}.cell-finish{background:linear-gradient(150deg,#ffd9f0,#ff9ede)}.num{font-family:var(--font-body);font-size:10px;font-weight:800;color:#5a3c1480}.cell-dark .num{color:#14482e8c}.cell-icon{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:22px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));pointer-events:none}.cell-finish{animation:finishGlow 2.4s ease-in-out infinite}@keyframes finishGlow{0%,to{box-shadow:inset 0 0 0 .5px #0000000f}50%{box-shadow:inset 0 0 14px #ff78d2b3}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.pawns{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none}.pawn{position:absolute;width:30px;height:42px;transform:translate(-50%,-68%);transition:left .26s cubic-bezier(.34,1.4,.5,1),top .26s cubic-bezier(.34,1.4,.5,1)}.pawn.traveling{transition:left .1s linear,top .1s linear;z-index:60!important}.pawn-ring{position:absolute;left:50%;top:33px;width:30px;height:12px;border-radius:50%;transform:translate(-50%);border:2.5px solid currentColor;box-shadow:0 0 12px currentColor;animation:ring 1.4s ease-in-out infinite}@keyframes ring{0%,to{opacity:.85;transform:translate(-50%) scale(1)}50%{opacity:.35;transform:translate(-50%) scale(1.25)}}.pawn-shadow{position:absolute;left:50%;top:33px;width:22px;height:7px;border-radius:50%;transform:translate(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.4),transparent 72%);filter:blur(1px);animation:hopShadow .5s ease}@keyframes hopShadow{0%,to{transform:translate(-50%) scale(1);opacity:.9}55%{transform:translate(-50%) scale(.55);opacity:.4}}.hopper{position:absolute;left:0;top:0;width:100%;height:34px;display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 100%;animation:hop .5s ease}@keyframes hop{0%{transform:translateY(0) scale(1.08,.9)}20%{transform:translateY(-5px) scale(.92,1.12)}55%{transform:translateY(-21px) scale(.98,1.02)}80%{transform:translateY(0) scale(1.18,.82)}to{transform:translateY(0) scale(1)}}.peg{position:relative;width:22px;height:30px}.peg-base{position:absolute;left:1px;bottom:0;width:20px;height:20px;clip-path:polygon(0% 100%,100% 100%,74% 6%,26% 6%);border-radius:0 0 9px 9px;box-shadow:inset -2px -2px 4px #00000059,inset 2px 1px 3px #ffffff4d}.peg-head{position:absolute;left:2px;top:-1px;width:18px;height:18px;border-radius:50%;box-shadow:inset -2px -2px 4px #0000004d,0 1px 3px #0000004d}.peg-head:after{content:"";position:absolute;top:3px;left:4px;width:6px;height:5px;border-radius:50%;background:#ffffffd9;filter:blur(.4px)}.pawn.active .peg{animation:idle 2.1s ease-in-out infinite}@keyframes idle{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.pawn.slide-snake .peg{animation:slither .26s ease-in-out infinite}@keyframes slither{0%,to{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}.pawn.slide-ladder .peg{animation:climb .3s ease-in-out infinite}@keyframes climb{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(3deg)}}.dice-area{display:flex;flex-direction:column;align-items:center;gap:15px}.dice-scene{width:86px;height:86px;perspective:560px;display:flex;align-items:center;justify-content:center}.dice-cube{position:relative;width:64px;height:64px;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(0);transition:transform .55s cubic-bezier(.2,.85,.3,1.1)}.dice-cube.rolling{animation:tumble .5s linear infinite}@keyframes tumble{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(360deg) rotateY(-360deg) rotate(180deg)}}.die-face{position:absolute;width:64px;height:64px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:11px;gap:2px;border-radius:13px;background:linear-gradient(150deg,#fff,#e7e7ef);box-shadow:inset 0 0 0 2px #0000000d,inset 0 -6px 10px #00000014;backface-visibility:hidden}.f-front{transform:rotateY(0) translateZ(32px)}.f-back{transform:rotateY(180deg) translateZ(32px)}.f-right{transform:rotateY(90deg) translateZ(32px)}.f-left{transform:rotateY(-90deg) translateZ(32px)}.f-top{transform:rotateX(90deg) translateZ(32px)}.f-bottom{transform:rotateX(-90deg) translateZ(32px)}.die-pip{display:flex;align-items:center;justify-content:center}.die-pip.on:after{content:"";width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#545461,#17171d);box-shadow:inset 0 1px 1px #ffffff59}.win-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:130;display:flex;align-items:center;justify-content:center;background:#0a0618b3;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);animation:fade .3s}@keyframes fade{0%{opacity:0}to{opacity:1}}.win-card{background:linear-gradient(165deg,#362463,#1b1140);border:2px solid rgba(255,207,92,.5);border-radius:26px;padding:40px 48px;text-align:center;box-shadow:0 34px 70px #0009;animation:pop .55s cubic-bezier(.2,1.4,.4,1);display:flex;flex-direction:column;gap:12px;align-items:center}@keyframes pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.win-card h2{font-family:var(--font-display);font-weight:700;font-size:32px}.win-card p{color:var(--muted);font-size:14px}.trophy-wrap{position:relative;width:110px;height:110px;display:flex;align-items:center;justify-content:center}.trophy-rays{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,207,92,.5),transparent 25%,rgba(255,207,92,.5) 50%,transparent 75%,rgba(255,207,92,.5));filter:blur(1px);animation:spin 6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.trophy{position:relative;font-size:72px;animation:bounce 1s infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}.confetti-layer{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:140}.confetti{position:absolute;top:-24px;width:11px;height:11px;animation-name:fall;animation-timing-function:linear;animation-fill-mode:forwards}.confetti.rect{width:7px;height:16px;border-radius:2px}.confetti.circ{border-radius:50%}.confetti.sq{border-radius:2px}@keyframes fall{0%{top:-24px;transform:translate(0) rotate(var(--rot));opacity:1}90%{opacity:1}to{top:108vh;transform:translate(var(--drift)) rotate(calc(var(--rot) + 540deg));opacity:.9}}@media (max-width: 900px){.game-screen{gap:16px}.panel{width:min(94vw,440px)}}@media (max-width: 600px){.screen{padding:14px 10px}.game-screen{flex-direction:column;align-items:center;gap:14px}.panel{width:100%;max-width:460px;padding:18px;gap:14px}.card{padding:24px 22px}.title{font-size:26px}.room-code strong{font-size:34px;letter-spacing:8px}.code-input{letter-spacing:7px;font-size:22px}.brand{font-size:18px}.dice-scene{width:78px;height:78px}}@media (max-height: 480px) and (orientation: landscape){.screen{padding:10px}.game-screen{gap:14px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important}.pawn{transition:left .15s linear,top .15s linear}}