.ludo-theme{background:radial-gradient(circle at top left,#3b6b49 0,#11222b 38%,#071018 100%)}
.game-hero .game-callouts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.status-panel h2{margin-top:0}.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.setup-grid label{display:grid;gap:8px;color:var(--muted)}.setup-grid select{background:#081120;color:var(--text);border:1px solid var(--line);padding:12px 14px;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}.tool-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.tool-row.compact{margin-top:0}.tool-row .btn{flex:1}

.gameplay-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.play-surface{padding:20px}.play-top{display:flex;justify-content:space-between;gap:18px;align-items:start;flex-wrap:wrap}.play-top h2{margin:.2rem 0}.play-top p{margin:6px 0 0;color:var(--muted)}.utility-row{justify-content:flex-end}.utility-row .btn{flex:0 1 auto}.play-stage{padding-top:18px}.board-shell{display:grid;justify-items:center;gap:18px}

.ludo-board{position:relative;width:min(100%,680px);aspect-ratio:1/1;margin:0 auto;border-radius:38px;overflow:hidden;box-shadow:0 22px 46px rgba(2,6,23,.42),inset 0 0 0 1px rgba(255,255,255,.08);touch-action:manipulation;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;background:#102414}
.ludo-board .board-art{position:absolute;inset:0;background:url('../img/board-reference-square.png') center/cover no-repeat;filter:saturate(1.02) contrast(1.02)}
.ludo-board::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 16%,transparent 84%,rgba(0,0,0,.16));pointer-events:none}
.base-slot-cover,.landing-pulse{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.base-slot-cover{width:9.6%;aspect-ratio:1/1;border-radius:50%;box-shadow:inset 0 1px 2px rgba(255,255,255,.28),inset 0 -8px 12px rgba(0,0,0,.18),0 8px 14px rgba(0,0,0,.14);z-index:2;opacity:.96}
.base-slot-cover.player-0{background:radial-gradient(circle at 35% 30%,#ffd8e4 0,#f191ab 42%,#c05f78 72%,#8c4759 100%)}
.base-slot-cover.player-1{background:radial-gradient(circle at 35% 30%,#d5ffe5 0,#85d98f 44%,#4e995c 74%,#2d653b 100%)}
.base-slot-cover.player-2{background:radial-gradient(circle at 35% 30%,#fff3be 0,#eac969 42%,#be912d 74%,#866012 100%)}
.base-slot-cover.player-3{background:radial-gradient(circle at 35% 30%,#e7dfff 0,#a8a0ff 42%,#7566d8 72%,#46389d 100%)}

.token{position:absolute;width:8.9%;aspect-ratio:1/1;border:none;background:transparent;padding:0;transform:translate(-50%,-50%);cursor:pointer;z-index:5;transition:transform .16s ease,filter .16s ease,opacity .16s ease}.token:hover{transform:translate(-50%,-50%) scale(1.06)}.token:active{transform:translate(-50%,-50%) scale(1.02)}.token[disabled]{cursor:default}.token.dim{opacity:.42;filter:grayscale(.35) saturate(.8)}.token.selectable .pawn{animation:ludoPulse 1s ease-in-out infinite;box-shadow:0 0 0 4px rgba(255,227,110,.96),0 0 24px rgba(255,227,110,.5),0 12px 20px rgba(2,6,23,.42)}
.pawn{position:absolute;inset:4%;border-radius:50%;box-shadow:0 12px 20px rgba(2,6,23,.36),inset 0 0 0 2px rgba(255,255,255,.52),inset 0 -10px 16px rgba(0,0,0,.2)}
.pawn::before,.pawn::after{content:'';position:absolute;left:50%;transform:translateX(-50%)}
.pawn::before{top:11%;width:35%;height:35%;border-radius:50%;box-shadow:inset 0 1px 2px rgba(255,255,255,.4)}
.pawn::after{bottom:12%;width:58%;height:22%;border-radius:999px;box-shadow:inset 0 1px 2px rgba(255,255,255,.2)}
.pawn .pawn-body{position:absolute;left:50%;top:33%;width:46%;height:38%;transform:translateX(-50%);border-radius:42% 42% 32% 32%/36% 36% 48% 48%;box-shadow:inset 0 1px 2px rgba(255,255,255,.2)}
.pawn .pawn-ring{position:absolute;left:50%;top:28%;width:26%;height:8%;transform:translateX(-50%);border-radius:999px;background:rgba(255,255,255,.26)}
.pawn .pawn-shine{position:absolute;left:20%;top:14%;width:18%;height:44%;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.08));filter:blur(.2px);opacity:.7}
.token-blossom .pawn,.token-blossom .pawn::before,.token-blossom .pawn::after,.token-blossom .pawn .pawn-body{background:linear-gradient(180deg,#ffd6e4 0,#ff8aac 22%,#e7537d 58%,#972d51 100%)}
.token-mint .pawn,.token-mint .pawn::before,.token-mint .pawn::after,.token-mint .pawn .pawn-body{background:linear-gradient(180deg,#d9ffe6 0,#86eba7 24%,#2aa957 58%,#1f6d39 100%)}
.token-sun .pawn,.token-sun .pawn::before,.token-sun .pawn::after,.token-sun .pawn .pawn-body{background:linear-gradient(180deg,#fff0bb 0,#ffd96a 24%,#eba52a 58%,#9a5900 100%)}
.token-iris .pawn,.token-iris .pawn::before,.token-iris .pawn::after,.token-iris .pawn .pawn-body{background:linear-gradient(180deg,#ece6ff 0,#baa7ff 24%,#7e63ee 58%,#4b2db5 100%)}
.token.captured .pawn{animation:captureBlink .34s ease-in-out 2;filter:brightness(1.3) saturate(1.25)}.token.finish-glow .pawn{box-shadow:0 0 0 4px rgba(255,255,255,.35),0 0 26px rgba(255,207,87,.65),0 12px 20px rgba(2,6,23,.42)}

.side-panel .content-card{padding:20px}.summary-list{display:grid;gap:12px}.summary-row{display:flex;justify-content:space-between;gap:12px;padding:13px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.summary-row strong{display:block}.summary-row span{color:var(--muted);font-size:.9rem}.summary-row .player-chip{display:inline-flex;align-items:center;gap:8px}.summary-row .chip-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.22)}.summary-row[data-p='0'] .chip-dot{background:#f36f97}.summary-row[data-p='1'] .chip-dot{background:#47c26d}.summary-row[data-p='2'] .chip-dot{background:#f0b332}.summary-row[data-p='3'] .chip-dot{background:#8771f5}.side-panel[data-active-player='0'] .summary-row[data-p='0'],.side-panel[data-active-player='1'] .summary-row[data-p='1'],.side-panel[data-active-player='2'] .summary-row[data-p='2'],.side-panel[data-active-player='3'] .summary-row[data-p='3']{border-color:rgba(255,225,120,.88);box-shadow:0 0 0 2px rgba(255,225,120,.22),inset 0 1px 0 rgba(255,255,255,.05)}
.dice-box{margin-top:18px;display:grid;gap:12px}.match-hint,.notice.small{padding:14px 15px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045)}.notice.small{font-size:.92rem}

.dice-dock{display:grid;justify-items:center;gap:10px;margin-top:-4px}.dice-button{width:clamp(82px,15vw,110px);aspect-ratio:1/1;border:none;border-radius:26px;padding:10px;background:linear-gradient(180deg,#fff7e7 0,#fbfbff 42%,#e2e6ef 100%);box-shadow:0 18px 26px rgba(2,6,23,.32),inset 0 2px 0 rgba(255,255,255,.92),inset 0 -8px 14px rgba(148,163,184,.24);display:grid;place-items:center;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.dice-button:hover:not(:disabled){transform:translateY(-2px)}.dice-button:active:not(:disabled){transform:translateY(0) scale(.98)}.dice-button:disabled{opacity:.72;cursor:not-allowed;filter:saturate(.8)}.dice-button.rolling{animation:diceRock .11s linear infinite alternate}
.dice-cube{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8%;width:100%;height:100%;padding:10%;transform-style:preserve-3d}
.pip{width:100%;height:100%;border-radius:50%;background:#101827;box-shadow:inset 0 1px 1px rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.2);opacity:0}
.dice-cube[data-face='1'] .pip-5,.dice-cube[data-face='2'] .pip-1,.dice-cube[data-face='2'] .pip-9,.dice-cube[data-face='3'] .pip-1,.dice-cube[data-face='3'] .pip-5,.dice-cube[data-face='3'] .pip-9,.dice-cube[data-face='4'] .pip-1,.dice-cube[data-face='4'] .pip-3,.dice-cube[data-face='4'] .pip-7,.dice-cube[data-face='4'] .pip-9,.dice-cube[data-face='5'] .pip-1,.dice-cube[data-face='5'] .pip-3,.dice-cube[data-face='5'] .pip-5,.dice-cube[data-face='5'] .pip-7,.dice-cube[data-face='5'] .pip-9,.dice-cube[data-face='6'] .pip-1,.dice-cube[data-face='6'] .pip-3,.dice-cube[data-face='6'] .pip-4,.dice-cube[data-face='6'] .pip-6,.dice-cube[data-face='6'] .pip-7,.dice-cube[data-face='6'] .pip-9{opacity:1}
.dice-caption{text-align:center}.dice-caption strong{display:block;font-size:1.06rem}.dice-readout{margin:4px 0 0;color:var(--muted);font-size:.95rem}

@keyframes ludoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes captureBlink{0%,100%{transform:scale(1)}50%{transform:scale(.88)}}
@keyframes diceRock{from{transform:rotate(-5deg) translateY(1px)}to{transform:rotate(5deg) translateY(-1px)}}

@media (max-width:980px){.gameplay-layout{grid-template-columns:1fr}.status-panel .setup-grid{grid-template-columns:1fr 1fr}.utility-row{width:100%;justify-content:flex-start}.utility-row .btn{flex:1 1 calc(33.33% - 8px)}}
@media (max-width:720px){.setup-grid{grid-template-columns:1fr}.play-surface{padding:14px}.ludo-board{border-radius:28px}.token{width:9.3%}.dice-button{width:94px;border-radius:24px}.play-top .utility-row{width:100%}.play-top .utility-row .btn{flex:1 1 calc(50% - 8px)}.summary-row{padding:12px 13px}}
@media (orientation:landscape) and (max-width:980px){.gameplay-layout{grid-template-columns:minmax(0,1fr) 280px}.play-surface{min-width:0}}