/* Game surface and game-specific controls only. */
:root{--blue:#2f91e8;--red:#e4545a;--yellow:#e5b83d;--green:#4fb878;color-scheme:dark;}
.premium-stage{position:relative;overflow:hidden;border-radius:25px;padding:clamp(7px,2vw,16px);background:linear-gradient(180deg,#111827dd,#06090fef),radial-gradient(circle at 50% 20%,#7891bd55,transparent 48%);box-shadow:inset 0 1px #fff3,inset 0 -40px 80px #0008,0 22px 60px #000b}
.board-wrap{position:relative;width:min(100%,690px);aspect-ratio:1;margin:auto;filter:drop-shadow(0 20px 22px #000b)}
.ludo-board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);overflow:hidden;border:1px solid #b69145;border-radius:5%;background:linear-gradient(145deg,#293143,#10151f);box-shadow:inset 0 0 0 4px #05070ba8,inset 0 0 45px #000b}
.board-cell{position:relative;border:1px solid #8c74445c;background:linear-gradient(145deg,#f5e9c8,#c8ad72);box-shadow:inset 0 1px #fff9}
.board-cell.path:after{content:"";position:absolute;inset:22%;border:1px solid #5e4b2b55;border-radius:50%;background:#fff5d970}
.board-cell.start-blue{background:linear-gradient(145deg,#8bd4ff,#2278cc)}
.board-cell.start-red{background:linear-gradient(145deg,#ff9a9d,#bd303c)}
.board-cell.start-gold{background:linear-gradient(145deg,#ffe889,#c69016)}
.board-cell.start-green{background:linear-gradient(145deg,#9ee9b8,#25885a)}
.board-cell.lane-blue{background:linear-gradient(145deg,#6fc4ff,#2177c9)}
.board-cell.lane-red{background:linear-gradient(145deg,#ff8f94,#bd303c)}
.board-cell.lane-gold{background:linear-gradient(145deg,#ffe681,#bd8515)}
.board-cell.lane-green{background:linear-gradient(145deg,#91e6b0,#25885a)}
.home-quadrant{position:absolute;width:40%;height:40%;border:1px solid #ffffff1f;border-radius:12%;box-shadow:inset 0 0 30px #0008}
.home-quadrant:before{content:"";position:absolute;inset:16%;border-radius:16%;background:#090c13aa;box-shadow:inset 0 1px #fff2}
.home-blue{top:0;left:0;background:radial-gradient(circle,#307fc9,#102e4d)}
.home-red{top:0;right:0;background:radial-gradient(circle,#c9414a,#4e151c)}
.home-gold{right:0;bottom:0;background:radial-gradient(circle,#d39b25,#4b3510)}
.home-green{bottom:0;left:0;background:radial-gradient(circle,#299064,#123e2c)}
.center-crown{position:absolute;z-index:2;top:40%;left:40%;display:grid;width:20%;height:20%;place-items:center;clip-path:polygon(50% 50%,0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%,0 50%);background:conic-gradient(from 45deg,var(--blue) 0 25%,var(--red) 0 50%,var(--yellow) 0 75%,var(--green) 0);color:#fff3bf;font-size:clamp(22px,7vw,52px);text-shadow:0 3px 8px #000}
.piece-layer{position:absolute;z-index:4;inset:0;pointer-events:none}
.piece{position:absolute;width:6.2%;aspect-ratio:1;transform:translate(-50%,-62%);border:0;padding:0;background:transparent;filter:drop-shadow(0 4px 3px #000c);pointer-events:auto;transition:left .24s cubic-bezier(.2,.8,.2,1),top .24s cubic-bezier(.2,.8,.2,1),transform .25s}
.piece img{display:block;width:100%;height:100%;object-fit:contain}
.piece.legal{filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 9px #ffe479);animation:piece-pulse .8s ease-in-out infinite;cursor:pointer}
.piece.hop{animation:piece-hop .28s cubic-bezier(.2,.8,.2,1)}
.piece.captured{animation:piece-capture .55s ease-in}
.coin-glint{position:absolute;z-index:3;width:2.8%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff3b3;box-shadow:0 0 8px #ffd850,0 0 16px #ffd850;animation:glint 1.8s ease-in-out infinite;opacity:.33}
.status{min-height:22px;margin:8px 0 2px;color:#ddd3bd;font-size:13px;font-weight:700;text-align:center}
.turn-control{display:grid;grid-template-columns:68px minmax(150px,260px);align-items:center;justify-content:center;gap:14px;min-height:78px}
.die-scene{display:grid;width:64px;height:64px;place-items:center;perspective:500px}
.die-3d{position:relative;width:52px;height:52px;transform-style:preserve-3d;transform:rotateX(0) rotateY(0);transition:transform .25s}
.die-3d[data-face="2"]{transform:rotateX(-90deg)}
.die-3d[data-face="3"]{transform:rotateY(-90deg)}
.die-3d[data-face="4"]{transform:rotateY(90deg)}
.die-3d[data-face="5"]{transform:rotateX(90deg)}
.die-3d[data-face="6"]{transform:rotateY(180deg)}
.die-face{position:absolute;inset:0;border:1px solid #e9edf1;border-radius:11px;background:linear-gradient(135deg,#f8fafb 0,#aeb5bc 30%,#eef1f3 55%,#8a9299 100%);box-shadow:inset 0 2px 4px #fff,inset 0 -3px 6px #5a6067,0 3px 10px #0009;backface-visibility:hidden}
.front{transform:translateZ(26px)}
.back{transform:rotateY(180deg) translateZ(26px)}
.right{transform:rotateY(90deg) translateZ(26px)}
.left{transform:rotateY(-90deg) translateZ(26px)}
.top{transform:rotateX(90deg) translateZ(26px)}
.bottom{transform:rotateX(-90deg) translateZ(26px)}
.pip{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4b5157,#08090a 70%);box-shadow:inset 0 1px 2px #000,0 1px #fff8}
.tl{top:9px;left:9px}
.tr{top:9px;right:9px}
.ml{top:22px;left:9px}
.mr{top:22px;right:9px}
.c{top:22px;left:22px}
.bl{bottom:9px;left:9px}
.br{right:9px;bottom:9px}
.roll-button{min-height:48px;border:1px solid #eef2f4;border-radius:999px;padding:10px 22px;background:linear-gradient(110deg,#70777d,#f1f4f5 48%,#70777d);box-shadow:inset 0 1px #fff,0 8px 18px #0009;color:#090a0b;font-size:15px;font-weight:900;letter-spacing:.06em;cursor:pointer}
.turn-prompt{color:#fff;font-size:15px;text-align:center}
.advert-space{display:grid;min-height:120px;place-items:center;margin-top:24px;border:1px dashed #67552f;border-radius:18px;color:#8e846f;font-size:.7rem;font-weight:800;letter-spacing:.15em}
.seat-setting{display:grid;gap:4px;color:#cfc5b1;font-size:12px}
.seat-setting select{border:1px solid #80662f;border-radius:8px;padding:7px;background:#07090e;color:var(--ivory)}
.info-card{margin:0 0 14px;border:1px solid #705b30;border-radius:15px;padding:15px;background:linear-gradient(145deg,#171b27,#090c12 72%)}
.info-card h3{margin:0;color:var(--gold-light);font:normal 21px Georgia}
.info-card p{color:#c4b9a3;font-size:13px;line-height:1.55}
.result-medal{margin:0;color:var(--gold-light);font-size:64px}
.roll-button:focus-visible,.piece:focus-visible{outline:3px solid #fff1b8;outline-offset:2px}
@keyframes piece-pulse{50%{transform:translate(-50%,-72%) scale(1.15)}}
@keyframes piece-hop{50%{transform:translate(-50%,-120%) scale(1.1)}}
@keyframes piece-capture{50%{transform:translate(-50%,-62%) scale(.3) rotate(180deg);opacity:.3}}
@keyframes glint{50%{opacity:.75;transform:translate(-50%,-50%) scale(1.3)}}
@media(max-width:430px){.premium-stage{padding:7px 3px}
.piece{width:7.2%}
.turn-control{grid-template-columns:62px minmax(150px,220px);gap:8px}
.advert-space{min-height:100px}}
.premium-stage{min-height:0;border:0;border-radius:0;padding:2px 0 12px;background:transparent;box-shadow:none;overflow:visible}
.seat-setting>span{display:flex;align-items:center;gap:7px}
.seat-setting>span .game-ball{width:14px;height:14px;flex:0 0 14px}
.settings-error{min-height:18px;margin:8px 0 0;color:#ffd47a;font-size:11px;line-height:1.4}
.yard.inactive-seat .yard-player-name{color:#777;filter:none}
.yard.inactive-seat .yard-die,.yard.inactive-seat .yard-coin-score{visibility:hidden}
.status{display:grid;min-height:27px;place-items:center;margin:0 0 4px;color:#f7efd9;font-size:12px;text-align:center}
.yard-die{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;outline:0;user-select:none;-webkit-user-select:none}
.yard-die:focus,.yard-die:active{border-color:transparent;background:transparent;outline:0;box-shadow:none}
.yard-die:focus-visible .die-3d{filter:drop-shadow(0 0 5px #fff1b8)}
.classic-board{--cell:calc(100% / 15);position:relative;display:grid;width:min(100%,calc(100svh - 230px),620px);aspect-ratio:1;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);align-self:center;overflow:hidden;margin:auto;border:3px solid #55483a;border-radius:16px;background:radial-gradient(circle at 25% 18%,#202020 0 1px,transparent 1.5px),radial-gradient(circle at 72% 66%,#242424 0 1px,transparent 1.5px),linear-gradient(145deg,#181818,#060606 62%,#111);background-size:17px 19px,23px 21px,auto;box-shadow:inset 0 0 0 2px #39352d,inset 0 0 35px #000,0 13px 30px #000c;touch-action:manipulation}
.classic-board .board-cell{position:relative;z-index:1;align-self:center;justify-self:center;width:68%;height:68%;border:0;border-radius:50%;background:transparent;box-shadow:none}
.classic-board .board-cell.path{border:1px solid #aeb4c0;background:#d8dce6;box-shadow:inset 0 1px 2px #fff9,0 1px 2px #000b}
.classic-board .board-cell.safe:after{content:"";position:absolute;inset:-1px;border:2px solid #d7c069;border-radius:50%;box-shadow:0 0 5px #e6c75b77}
.classic-board .board-cell[data-path="0"]{border-color:#267fca;background:#267fca}
.classic-board .board-cell[data-path="13"]{border-color:#d73746;background:#d73746}
.classic-board .board-cell[data-path="26"]{border-color:#d8cf54;background:#d8cf54}
.classic-board .board-cell[data-path="39"]{border-color:#579b3b;background:#579b3b}
.classic-board .board-cell.lane-blue,.classic-board .board-cell.lane-red,.classic-board .board-cell.lane-gold,.classic-board .board-cell.lane-green{background:transparent;box-shadow:none}
.classic-board .board-cell.lane-blue{border:2px solid #267fca}
.classic-board .board-cell.lane-red{border:2px solid #d73746}
.classic-board .board-cell.lane-gold{border:2px solid #d8cf54}
.classic-board .board-cell.lane-green{border:2px solid #579b3b}
.yard{position:absolute;z-index:3;display:block;width:40%;height:40%;padding:0;border:0;background:transparent;color:#e9e2d3;pointer-events:none}
.yard:before{display:none}
.yard-blue{--yard-color:#1870c4;top:0;left:0}
.yard-red{--yard-color:#e23642;top:0;right:0}
.yard-gold{--yard-color:#dbd34f;right:0;bottom:0}
.yard-green{--yard-color:#5b9c3f;bottom:0;left:0}
.center-mark{display:none}
.yard-player-name{position:absolute;overflow:hidden;color:var(--yard-color);font-size:clamp(9px,2.75vw,15px);font-weight:600;letter-spacing:.025em;line-height:1.15;text-align:center;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;filter:saturate(1.15) brightness(1.08)}
.yard-blue .yard-player-name{top:8%;right:4%;left:28%}
.yard-red .yard-player-name{top:22%;right:4%;left:4%}
.yard-gold .yard-player-name{top:8%;right:28%;left:4%}
.yard-green .yard-player-name{top:5%;right:4%;left:4%}
.yard-player-name.current{animation:yard-name-glow .8s ease-in-out infinite alternate}
.yard-coin-score{position:absolute;display:flex;width:43%;align-items:center;justify-content:center;gap:4px;color:#f0cf72;font-size:clamp(11px,3.15vw,17px);font-weight:600;line-height:1;white-space:nowrap}
.yard-blue .yard-coin-score{bottom:6%;left:39%}
.yard-red .yard-coin-score{bottom:4%;left:28.5%}
.yard-gold .yard-coin-score{bottom:6%;left:17%}
.yard-green .yard-coin-score{top:70%;left:28.5%}
.yard-coin-score i{font-size:.78em;font-style:normal}
.yard-coin-score small{color:#b6ad9c;font-size:.58em;font-weight:600;letter-spacing:.025em;text-transform:uppercase}
.yard-die{position:absolute;display:grid;width:43%;aspect-ratio:1;place-items:center;border:0;padding:0;background:transparent;perspective:420px;pointer-events:auto;touch-action:manipulation;cursor:pointer;transition:opacity .3s ease,filter .3s ease}
.yard-blue .yard-die{top:27%;left:39%}
.yard-red .yard-die{top:37%;left:28.5%}
.yard-gold .yard-die{top:27%;left:17%}
.yard-green .yard-die{top:21%;left:28.5%}
.yard-die.is-waiting{opacity:.27!important;filter:brightness(.42) saturate(.38)!important}
.yard-die.is-turn{opacity:1!important;filter:brightness(1.08) saturate(1)!important}
.yard-die.is-turn:not(:disabled){filter:brightness(1.08) saturate(1) drop-shadow(0 0 8px var(--yard-color))!important}
.yard-die .die-3d{width:50px;height:50px;transition:transform .44s cubic-bezier(.18,.78,.24,1.28);will-change:transform}
.yard-die .die-3d .die-face{position:absolute;inset:-.45px;overflow:hidden;border:1px solid #aeb1af;border-radius:7px;background:linear-gradient(135deg,#fffef5 0,#deded4 43%,#aaaead 100%);box-shadow:inset 2px 2px 3px #fff,inset -3px -4px 5px #5556;backface-visibility:hidden}
.yard-die .die-3d .face-front{transform:translateZ(24.35px)}
.yard-die .die-3d .face-back{transform:rotateY(180deg) translateZ(24.35px)}
.yard-die .die-3d .face-right{transform:rotateY(90deg) translateZ(24.35px)}
.yard-die .die-3d .face-left{transform:rotateY(-90deg) translateZ(24.35px)}
.yard-die .die-3d .face-top{transform:rotateX(90deg) translateZ(24.35px)}
.yard-die .die-3d .face-bottom{transform:rotateX(-90deg) translateZ(24.35px)}
.yard-die .die-3d .pip{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3c3c,#080909 68%);box-shadow:inset 0 1px 2px #000,0 1px 1px #fff8}
.yard-die .die-3d .pip.tl{top:8px;left:8px}
.yard-die .die-3d .pip.tr{top:8px;right:8px}
.yard-die .die-3d .pip.ml{top:50%;left:8px;transform:translateY(-50%)}
.yard-die .die-3d .pip.mc{top:50%;left:50%;transform:translate(-50%,-50%)}
.yard-die .die-3d .pip.mr{top:50%;right:8px;transform:translateY(-50%)}
.yard-die .die-3d .pip.bl{bottom:8px;left:8px}
.yard-die .die-3d .pip.br{right:8px;bottom:8px}
.piece-layer{position:absolute;z-index:5;inset:0;pointer-events:none}
.piece{position:absolute;width:4.35%;height:auto;aspect-ratio:1;overflow:visible;transform:translate(-50%,-50%);border:0;padding:0;background:transparent;filter:drop-shadow(0 2px 2px #000d);pointer-events:none;transition:left var(--piece-move-time,.22s) ease,top var(--piece-move-time,.22s) ease,transform var(--piece-move-time,.22s) ease}
.game-ball{--ball:#267fca;position:relative;display:block;width:100%;aspect-ratio:1;border:1px solid #0009;border-radius:50%;background:radial-gradient(circle at 31% 25%,#fff 0 7%,#fff9 8%,var(--ball) 31%,color-mix(in srgb,var(--ball) 70%,#000) 76%,#080808 115%);box-shadow:inset -2px -3px 5px #0007,inset 2px 2px 4px #fff5,0 1px 3px #000c}
.game-ball:after{content:"";position:absolute;top:12%;left:18%;width:28%;height:17%;border-radius:50%;background:#fff8;transform:rotate(-25deg)}
.ball-blue{--ball:#0877d7}
.ball-red{--ball:#df2637}
.ball-gold{--ball:#f0d125}
.ball-green{--ball:#299047}
.piece.legal{pointer-events:auto;cursor:pointer;animation:piece-glow .8s ease-in-out infinite}
.coin-glint{display:none}
@keyframes piece-glow{50%{filter:drop-shadow(0 0 7px #fff7a8) drop-shadow(0 2px 2px #000a);transform:translate(-50%,-50%) scale(1.22)}}
@keyframes yard-name-glow{from{filter:saturate(1.25) brightness(1.15) drop-shadow(0 0 2px var(--yard-color))}to{filter:saturate(1.5) brightness(1.75) drop-shadow(0 0 7px var(--yard-color))}}
@media(max-width:430px){.classic-board{width:100%}
.piece{width:4.5%}
.classic-board .board-cell{width:71%;height:71%}
.yard-die .die-3d{width:44px;height:44px}
.yard-die .die-3d .face-front{transform:translateZ(21.35px)}
.yard-die .die-3d .face-back{transform:rotateY(180deg) translateZ(21.35px)}
.yard-die .die-3d .face-right{transform:rotateY(90deg) translateZ(21.35px)}
.yard-die .die-3d .face-left{transform:rotateY(-90deg) translateZ(21.35px)}
.yard-die .die-3d .face-top{transform:rotateX(90deg) translateZ(21.35px)}
.yard-die .die-3d .face-bottom{transform:rotateX(-90deg) translateZ(21.35px)}
.yard-die .die-3d .pip{width:8px;height:8px}
.yard-die .die-3d .pip.tl{top:7px;left:7px}
.yard-die .die-3d .pip.tr{top:7px;right:7px}
.yard-die .die-3d .pip.ml{left:7px}
.yard-die .die-3d .pip.mr{right:7px}
.yard-die .die-3d .pip.bl{bottom:7px;left:7px}
.yard-die .die-3d .pip.br{right:7px;bottom:7px}}
.yard-die .closed-die{
  display: block;
  width: 95px;
  height: 95px;
  filter: none;
  pointer-events: none;
}
.yard-die:focus-visible .closed-die{
  filter: drop-shadow(0 0 5px #fff1b8);
}
@media (max-width: 430px){.yard-die .closed-die{ width: 81px; height: 81px; }}