/* Motion */
/* motion: rare moments only (screen change, new prompt, a live recording, dice, token steps). transform + opacity. */
.screen, .whisper, .roomwrap > section { transition:opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
@starting-style { .screen, .whisper, .roomwrap > section { opacity:0; transform:translateY(8px); } .sheetback, .rov { opacity:0; } .sheet { opacity:0; transform:translateY(32px); } }
.tok { transition:transform var(--t-slow) var(--ease-out); }

.devbar { position:fixed; left:50%; bottom:76px; transform:translateX(-50%); z-index:20; display:flex; gap:2px; padding:3px; border-radius:999px; background:#d9d9dd; font:500 12px system-ui,sans-serif; white-space:nowrap; box-shadow:0 4px 14px #0006; }
.devbar a { padding:8px 10px; min-height:32px; border-radius:999px; color:#333; text-decoration:none; }
.devbar a[aria-current] { background:#fff; color:#000; }

@media (prefers-reduced-motion: reduce){
  @starting-style { .screen, .whisper, .roomwrap > section { opacity:0; transform:none; } .sheet { opacity:0; transform:none; } }
  .tok, .btn, .chip, .pick, .sw, .tabbtn, .rec, .roll, .cta, .game { transition:none; }
  .cta:not(:disabled):active, .chip:active, .pick:active, .sw:active, .btn:active, .rec:active, .roll:active, .game:active { transform:none; }
  .seat.speaking .av::after, .rec.live::after, .hero .spk { animation:none; }
  .tok.go .ring { animation:none; opacity:.9; }
  .reel div { animation:none; opacity:1; position:static; padding:6px 0; }
  .reel { display:grid; place-content:center; aspect-ratio:auto; padding:24px; }
  .thumb, .rov .stop, .pit, .tg::after { transition:none; }
}
.ph { font-size: 15px; margin: 18px 0 4px; }
.plink { grid-column: 1 / -1; margin-top: 24px; }
.plink button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.voice { margin: 16px 0 4px; padding: 16px; border: 1px solid var(--line, rgba(128,128,128,.25)); border-radius: 16px; }
.voice h2 { font-size: 17px; margin: 0 0 4px; }
.voice .vq { font-size: 19px; line-height: 1.3; margin: 10px 0; }
.voice .vrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.voice .live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d33; margin-right: 6px; }

/* reactions and game feel */
.reacts { display:flex; justify-content:center; gap:6px; margin-top:20px; }
.reacts .rx { width:44px; height:44px; border:0; border-radius:50%; background:var(--soft); font-size:1.3rem; cursor:pointer; }
.reacts .rx:active { transform:scale(.9); }
.room2 { position:relative; }
.float-react { position:absolute; bottom:60px; pointer-events:none; display:flex; flex-direction:column; align-items:center; animation:floatup 2.1s ease-out forwards; z-index:20; }
.float-react span { font-size:2rem; } .float-react small { font-size:.7rem; color:var(--muted); }
@keyframes floatup { from { transform:translateY(0); opacity:1; } to { transform:translateY(-180px); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .float-react { animation:none; opacity:0; } }

/* dice */
.roll.tumble { animation:tumble .6s var(--ease-out); }
@keyframes tumble { 0% { transform:rotate(0) scale(.85); } 25% { transform:rotate(-24deg) scale(1.1); } 50% { transform:rotate(20deg) scale(1.04); } 75% { transform:rotate(-10deg) scale(1.02); } 100% { transform:none; } }

/* win moment and your-turn nudge */
.ludo, .whot, .ayo, #stage2 { position:relative; }
.confetti { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:30; }
.win { animation:winpop .5s var(--ease-out); }
@keyframes winpop { from { transform:scale(.85); opacity:0; } to { transform:none; opacity:1; } }
.nudge { animation:nudge 1.6s var(--ease-out); }
@keyframes nudge { 0%, 100% { box-shadow:0 0 0 0 transparent; } 20%, 60% { box-shadow:0 0 0 4px var(--accent); } 40%, 80% { box-shadow:0 0 0 2px var(--accent); } }
@media (prefers-reduced-motion:reduce) { .win, .nudge { animation:none; } }