/* Paramapadham — Tamil snakes & ladders: kolam colours, temple at 100, SVG snakes and ladders. */
.ta { font-size: 13px; opacity: .9; }
.pp-head { display: flex; align-items: center; gap: 10px; width: min(100%, 440px); margin-bottom: 10px; }
.pp-head b { display: block; font-size: 20px; color: var(--gold); letter-spacing: .5px; }
.pp-head small { color: var(--muted); font-size: 12px; line-height: 1.3; display: block; }
.pp-kolam {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background:
    radial-gradient(circle, #fff 2px, transparent 2.5px) 0 0 / 11px 11px,
    conic-gradient(from 45deg, #e8590c, #ffc533, #e64980, #3ddc84, #e8590c);
  box-shadow: 0 0 0 3px #ffffff33; animation: pp-turnslow 18s linear infinite;
}
@keyframes pp-turnslow { to { transform: rotate(360deg); } }
.levels { display: flex; gap: 6px; margin-bottom: 10px; 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); }

.pp-players { display: flex; gap: 6px; width: min(100%, 440px); margin-bottom: 8px; flex-wrap: wrap; }
.pp-pl { flex: 1 1 0; min-width: 80px; display: flex; align-items: center; gap: 6px; background: var(--card); border: 2px solid transparent; border-radius: 12px; padding: 5px 8px; font-size: 13px; transition: border-color .2s, box-shadow .2s; }
.pp-pl.turn { border-color: var(--gold); box-shadow: 0 0 12px #ffc53344; }
.pp-pl .nm { flex: 1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-pl .sq { color: var(--muted); font-weight: 700; }
.pp-pl .tok { position: relative; width: 18px; height: 18px; flex: none; margin: 0; left: auto; top: auto; }

.pp-board {
  position: relative; width: min(100%, 440px); aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
  box-shadow: 0 10px 28px #0009, 0 0 0 4px #c98a2e, 0 0 0 7px #5a1d0c;
}
.pp-sq { position: relative; font-size: 10px; font-weight: 800; color: #3b1606; padding: 2px 3px; line-height: 1; }
.pp-sq.c0 { background: #ffd58a; } .pp-sq.c1 { background: #ffb36b; } .pp-sq.c2 { background: #f7e3b5; } .pp-sq.c3 { background: #f59f80; } .pp-sq.c4 { background: #c7e59a; }
.pp-sq::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #ffffff66 1px, transparent 1.6px) 0 0 / 8px 8px; opacity: .55; pointer-events: none; }
.pp-sq.goal { background: radial-gradient(circle at 50% 60%, #fff3c4, #ffc533 60%, #e8590c); color: #5a1d0c; }
.pp-sq.goal .tmpl { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-size: 22px; filter: drop-shadow(0 2px 2px #0006); }
.pp-sq.start .lbl { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-size: 8px; }
.pp-sq.hint { box-shadow: inset 0 0 0 3px var(--gold); animation: pp-glow 1s ease-in-out 4; z-index: 1; }
.pp-sq.hint.bad { box-shadow: inset 0 0 0 3px var(--bad); }
@keyframes pp-glow { 50% { filter: brightness(1.25); } }

.pp-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.pp-art .rail { stroke: #7a4a1c; stroke-width: 1.3; stroke-linecap: round; }
.pp-art .rung { stroke: #a8692b; stroke-width: 1; stroke-linecap: round; }
.pp-art .snake { fill: none; stroke-linecap: round; stroke-width: 3.2; opacity: .93; }
.pp-art .belly { fill: none; stroke-linecap: round; stroke-width: 1.1; stroke-dasharray: 1 2.2; opacity: .8; }
.pp-art .head { stroke: #0006; stroke-width: .3; }
.pp-art .eye { fill: #fff; } .pp-art .pupil { fill: #111; }
.pp-art .tongue { stroke: #e03131; stroke-width: .5; fill: none; }

.tok {
  position: absolute; z-index: 4; width: 7%; height: 7%; margin: -3.5% 0 0 -3.5%; border-radius: 50% 50% 45% 45%;
  border: 2px solid #fff; box-shadow: 0 3px 4px #000a; transition: left .17s ease-out, top .17s ease-out;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: #fff; text-shadow: 0 1px 1px #0008;
}
.tok.t0 { background: radial-gradient(circle at 35% 30%, #ff9a8a, #e03131); }
.tok.t1 { background: radial-gradient(circle at 35% 30%, #9af0b5, #2f9e44); }
.tok.t2 { background: radial-gradient(circle at 35% 30%, #ffe28a, #f08c00); }
.tok.t3 { background: radial-gradient(circle at 35% 30%, #a5d8ff, #1c7ed6); }
.tok.me { box-shadow: 0 0 0 2px var(--gold), 0 3px 4px #000a; }
.tok.hop { animation: pp-hop .17s ease-out; }
@keyframes pp-hop { 50% { transform: translateY(-40%) scale(1.15); } }
.tok.slow { transition: left .7s ease-in-out, top .7s ease-in-out; }
.tok.out { opacity: .4; }

.pp-controls { display: flex; align-items: center; gap: 12px; width: min(100%, 440px); margin-top: 12px; }
.pp-dice {
  width: 74px; height: 74px; flex: none; border-radius: 18px; border: 0; padding: 10px;
  background: linear-gradient(160deg, #fff, #e9e3f5); box-shadow: 0 6px 0 #b9b0cc, 0 10px 18px #0008;
  transition: transform .1s, box-shadow .1s;
}
.pp-dice:active { transform: translateY(4px); box-shadow: 0 2px 0 #b9b0cc, 0 4px 10px #0008; }
.pp-dice[disabled] { opacity: .55; }
.pp-dice.ready { animation: pp-ready 1.2s ease-in-out infinite; }
@keyframes pp-ready { 0%, 100% { box-shadow: 0 6px 0 #b9b0cc, 0 10px 18px #0008, 0 0 0 0 #ffc53300; } 50% { box-shadow: 0 6px 0 #b9b0cc, 0 10px 18px #0008, 0 0 0 6px #ffc53388; } }
.pp-dice.rolling { animation: pp-roll .55s ease-in-out; }
@keyframes pp-roll { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-25deg) scale(1.1); } 60% { transform: rotate(200deg) scale(1.05); } 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: 11px; height: 11px; margin: auto; border-radius: 50%; background: #2a2340; visibility: hidden; }
.face i.on { visibility: visible; }
.face.d1 i.on, .face.d4 i.on { background: #e03131; }
.pp-status { flex: 1; min-width: 0; }
.pp-turn { font-weight: 800; margin: 0; min-height: 22px; }
.pp-ev { margin: 4px 0 0; color: var(--muted); font-size: 13px; min-height: 18px; }
.pp-ev.up { color: var(--ok); } .pp-ev.down { color: var(--bad); }
.pp-tools { display: flex; gap: 10px; justify-content: center; margin-top: 12px; min-height: 40px; }