/* Thaya Kattam Race — kolam track, tokens and dice. */
.dr-head { text-align: center; margin-bottom: 6px; }
.dr-head b { display: block; font-size: 19px; }
.dr-head small { color: var(--muted); font-size: 12px; }
.levels { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; justify-content: center; }
.levels .tnz-btn { min-height: 38px; font-size: 13px; padding: 0 12px; }
.levels .tnz-btn.on { border-color: var(--primary); color: var(--primary); }
.dr-board { position: relative; width: min(100%, 400px); aspect-ratio: 6 / 6; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr) .9fr; gap: 4px; padding: 6px; border-radius: 16px;
  background: radial-gradient(circle at 50% 40%, #7a2e1c, #4a170d); box-shadow: 0 10px 26px #0009, inset 0 0 0 3px #f3c98b55; }
.dr-board::before { content: ''; position: absolute; inset: 6px; border-radius: 12px; pointer-events: none; opacity: .18;
  background: radial-gradient(circle, #fff 1.5px, transparent 2px) 0 0 / 22px 22px; }
.dr-sq { position: relative; border-radius: 10px; background: #f6e7c8; color: #6b3a1f; font-size: 11px; font-weight: 800; display: flex; align-items: flex-start; justify-content: flex-start; padding: 3px 5px; box-shadow: inset 0 -3px 0 #0002; }
.dr-sq.alt { background: #fbefd6; }
.dr-sq .ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; opacity: .9; }
.dr-sq .to { position: absolute; right: 4px; bottom: 2px; font-size: 10px; color: #8a4a26; }
.dr-sq.short { background: radial-gradient(circle, #ffd6e7, #f6b3cf); }
.dr-sq.slide { background: radial-gradient(circle, #cfe6ff, #a6c8f0); }
.dr-sq.safe { background: radial-gradient(circle, #fff3b0, #f3d36b); }
.dr-sq.home { background: radial-gradient(circle, #b8f5cf, #5fd38f); }
.dr-sq.flash { animation: dr-flash .6s ease both; }
@keyframes dr-flash { 50% { transform: scale(1.12); box-shadow: 0 0 18px #fff; } }
.dr-start { grid-column: 1 / span 6; border-radius: 10px; background: #00000033; border: 2px dashed #f3c98b77; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; color: #f3c98bcc; font-size: 12px; font-weight: 700; }
.dr-tok { position: absolute; width: 7.5%; aspect-ratio: 1; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 3px 6px #0009; transition: left .17s ease, top .17s ease; z-index: 3; transform: translate(-50%, -50%); }
.dr-tok.hop { animation: dr-hop .17s ease; }
.dr-tok.me { box-shadow: 0 0 0 3px var(--gold), 0 3px 6px #0009; }
.dr-tok.turn { animation: dr-pulse 1s ease-in-out infinite; }
@keyframes dr-hop { 50% { margin-top: -10px; } }
@keyframes dr-pulse { 50% { transform: translate(-50%, -50%) scale(1.18); } }
.dr-tok.c0 { background: radial-gradient(circle at 35% 30%, #ff9a9a, #d62828); }
.dr-tok.c1 { background: radial-gradient(circle at 35% 30%, #9ae6b4, #1f9d55); }
.dr-tok.c2 { background: radial-gradient(circle at 35% 30%, #ffe08a, #e0a100); }
.dr-tok.c3 { background: radial-gradient(circle at 35% 30%, #9ccaff, #2563eb); }
.dr-controls { display: flex; align-items: center; gap: 14px; width: min(100%, 400px); margin-top: 12px; }
.dr-dice { width: 76px; height: 76px; flex: none; border-radius: 18px; border: 0; background: linear-gradient(145deg, #fff, #ddd6e8); box-shadow: 0 6px 0 #9b93ad, 0 10px 18px #0008; cursor: pointer; padding: 10px; }
.dr-dice:active { transform: translateY(3px); box-shadow: 0 3px 0 #9b93ad; }
.dr-dice.live { animation: dr-wiggle 1.4s ease-in-out infinite; }
.dr-dice.roll { animation: dr-roll .6s ease both; }
.dr-dice[disabled] { opacity: .55; animation: none; }
@keyframes dr-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(8deg); } }
@keyframes dr-roll { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } }
.face { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); width: 100%; height: 100%; }
.face i { width: 12px; height: 12px; border-radius: 50%; background: #7a2e1c; margin: auto; }
.dr-status { flex: 1; min-width: 0; }
.dr-turn { font-weight: 700; margin: 0; min-height: 22px; }
.dr-ev { margin: 2px 0 0; color: var(--muted); font-size: 13px; min-height: 18px; }
.dr-legend { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--muted); margin-top: 10px; }