section { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; } section[hidden] { display:none; }
.pad { width:min(520px, 94vw); height:min(280px, 45vh); border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; user-select:none; touch-action:manipulation; text-align:center; padding:12px; }
.pad b { font-size:clamp(1.6rem,6vw,2.6rem); } .pad span { opacity:.85; }
.pad.idle { background:#1e293b; border:2px solid #334155; } .pad.wait { background:#7f1d1d; } .pad.go { background:#16a34a; } .pad.early { background:#92400e; } .pad.done { background:#1d4ed8; }
.holes { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; width:min(380px, 90vw); }
.hole { aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 70%, #0b1220 55%, #3b2a1a 56%); border:3px solid #5a3f22; padding:0; overflow:hidden; position:relative; touch-action:manipulation; }
.critter { position:absolute; left:20%; right:20%; bottom:-70%; height:60%; border-radius:50% 50% 12% 12%; background:#d97706; transition:bottom .12s; box-shadow:inset -6px -6px 0 rgba(0,0,0,.2); }
.critter::before { content:''; position:absolute; top:28%; left:22%; width:16%; height:16%; border-radius:50%; background:#111; box-shadow:26px 0 0 #111; }
.hole.up .critter { bottom:8%; }

/* Keep the timing state unmistakable while echoing the luminous cover. */
.pad.idle { border:2px solid #4d7899; background:radial-gradient(circle at center,#193f5e,#10243e 72%); }
.pad.wait { background:radial-gradient(circle at center,#b73b48,#5d1d32 72%); }
.pad.go { background:radial-gradient(circle at center,#a0f9aa,#1da86a 47%,#0b5949 74%); box-shadow:0 0 28px rgba(44,206,121,.38), inset 0 0 0 2px rgba(255,255,255,.24); }
.pad.early { background:radial-gradient(circle at center,#efbd5b,#8f4b1d 72%); }
.pad.done { background:radial-gradient(circle at center,#7ebaff,#214c9c 72%); }