.your-hand { border: 1px solid transparent; border-radius: 16px; padding: 18px 14px 8px; margin-top: 16px; transition: border-color 180ms ease, background 180ms ease; }
.your-hand.your-turn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
.hand-heading { flex-wrap: wrap; }
.hand-heading .turn-message { display: flex; flex: 0 0 100%; align-items: center; gap: 12px; width: 100%; max-width: none; padding: 11px 14px; border-radius: 11px; background: var(--surface); color: var(--muted); text-align: left; }
.hand-heading .turn-message strong { color: var(--text); font-size: 14px; }
.hand-heading .turn-message small { color: var(--muted); font-size: 12px; }
.your-turn .hand-heading .turn-message { color: var(--accent-ink); background: var(--accent); }
.your-turn .hand-heading .turn-message strong { color: inherit; font-size: 17px; }
.your-turn .hand-heading .turn-message small { color: inherit; opacity: .85; }
.turn-symbol { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; }
.turn-arrival .turn-message { animation: turn-arrives 850ms ease-out; }
@keyframes turn-arrives { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(3px); } 65% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; transform: translateY(0); } }
.turn-settings { margin: 14px 0 0; border-top: 1px solid var(--line); }
.turn-settings summary { cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; color: var(--muted); list-style: none; }
.turn-settings summary::-webkit-details-marker { display: none; }
.turn-settings summary small { margin-left: auto; font-size: 12px; color: var(--accent); }
.turn-settings summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
.turn-settings-content { padding: 4px 0 12px; display: grid; gap: 10px; }
.turn-settings-content p, .turn-settings-content > small { font-size: 12px; color: var(--muted); }
.turn-setting { display: flex; width: 100%; gap: 18px; align-items: center; justify-content: space-between; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-align: left; min-height: 56px; }
.turn-setting strong { display: block; font-size: 13px; }
.turn-setting small { display: block; color: var(--muted); font-size: 12px; }
.turn-switch { width: 34px; height: 20px; border-radius: 12px; padding: 3px; flex: none; background: var(--line); }
.turn-switch::after { content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 150ms ease; }
.turn-setting[aria-checked=true] .turn-switch { background: var(--accent); }
.turn-setting[aria-checked=true] .turn-switch::after { background: var(--accent-ink); transform: translateX(14px); }
.turn-settings-content .button { justify-self: start; min-height: 44px; }
@media (max-width: 760px) { .your-hand { padding: 14px 10px 6px; margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .your-hand, .turn-switch::after { transition: none; } .turn-arrival .turn-message { animation: none; } }