*{box-sizing:border-box;margin:0;padding:0}body{background-color:#f1f5f9;justify-content:center;align-items:center;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex}#root{justify-content:center;align-items:center;width:100%;padding:20px;display:flex}.app-container{background:#fff;border-radius:12px;flex-direction:column;align-items:center;gap:10px;width:fit-content;min-width:min(95vw,400px);max-width:98vw;max-height:98vh;padding:15px;display:flex;overflow:hidden auto;box-shadow:0 10px 25px #0000000d}.header{color:#0f172a;letter-spacing:-.5px;text-align:center;margin:0;font-size:22px;font-weight:800}.status-bar{justify-content:space-between;align-items:center;width:100%;padding:0 10px;font-size:clamp(12px,2vw,14px);font-weight:600;display:flex}.turn-indicator{align-items:center;gap:8px;display:flex}.turn-dot{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:10px;display:flex}.red-dot{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 6px -1px #ef444466}.blue-dot{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 4px 6px -1px #3b82f666}.legend{align-items:center;gap:15px;display:flex}.legend-item{align-items:center;gap:6px;display:flex}.small-dot{border-radius:50%;width:8px;height:8px}.board{--board-size:min(90vw, 65vh);width:var(--board-size);height:var(--board-size);background-color:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-shrink:0;grid-template-rows:repeat(10,1fr);grid-template-columns:repeat(10,1fr);gap:6px;margin:0 auto;padding:6px;display:grid}.cell{color:#64748b;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;min-width:0;min-height:0;padding:4px;font-size:min(10px,2.5vw);font-weight:500;display:flex;position:relative;overflow:hidden}.cell-header{flex-direction:row;justify-content:flex-start;align-items:center;gap:2px;width:100%;display:flex}.cell-num{color:#1e293b;font-size:min(8.5px,1.7vw);font-weight:700;line-height:1}.players-container{pointer-events:none;justify-content:center;gap:2px;padding:0 2px;display:flex;position:absolute;bottom:2px;left:0;right:0}.player-token{color:#fff;z-index:10;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:min(18px,4vw);height:min(18px,4vw);font-size:min(7px,1.2vw);font-weight:700;transition:all .5s cubic-bezier(.175,.885,.32,1.275);display:flex;box-shadow:0 2px 4px #0000004d}.player-token.blue-dot{z-index:4}.badge{white-space:nowrap;border-radius:999px;flex-shrink:0;padding:1px 4px;font-size:min(6.5px,1.4vw);font-weight:600}.ladder-badge{color:#16a34a;background-color:#f0fdf4;border:1px solid #bbf7d0}.snake-badge{color:#dc2626;background-color:#fef2f2;border:1px solid #fecaca}.controls{gap:12px;margin-top:10px;display:flex}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:8px;padding:clamp(6px,2vh,10px) clamp(12px,3vw,24px);font-size:clamp(12px,2vw,14px);font-weight:600;transition:all .2s}.btn-primary{color:#fff;background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 6px -1px #2563eb66}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 8px -1px #2563eb80}.dice-icon{vertical-align:middle;margin-right:8px;font-size:1.25em;transition:transform .2s;display:inline-block}.dice-icon.rolling{animation:.1s infinite alternate dice-roll}@keyframes dice-roll{0%{transform:scale(1)rotate(0)}to{transform:scale(1.2)rotate(10deg)}}.btn-outline{color:#475569;background-color:#fff;border:1px solid #e2e8f0;box-shadow:0 1px 2px #0000000d}.btn-outline:hover{background-color:#f8fafc;border-color:#cbd5e1}.btn:disabled{opacity:.5;cursor:not-allowed}.footer-text{color:#64748b;text-align:center;margin-top:15px;font-size:14px;font-weight:500}.footer-text strong{color:#1e293b;font-weight:700}@media (width<=430px){.cell{padding:2px;font-size:9px}.cell-num{font-size:9px}.badge{padding:1px 2px;font-size:min(6px,1.4vw)}.player-token{width:14px;height:14px;font-size:6px;box-shadow:0 1px 2px #0003}.players-container{gap:1px;bottom:4px}.status-bar{flex-direction:column;align-items:center;gap:8px}.cell-header{flex-direction:column;align-items:flex-start;gap:1px}}@media (height<=700px){.header{font-size:18px}.app-container{gap:10px;padding:15px}.footer-text{margin-top:5px;font-size:12px}}.win-message{align-items:center;gap:15px;font-size:16px;display:flex}.win-item{align-items:center;gap:5px;display:flex}
