/* Fenêtres (<dialog class="sheet">) : « Comment on joue » et « Mon compte ». */
dialog.sheet { border: 0; padding: 0; border-radius: 18px; background: var(--paper); color: var(--ink); width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); box-shadow: 0 20px 60px var(--shadow); overflow: hidden }
dialog.sheet[open] { display: flex; flex-direction: column; animation: sheet-in .25s ease-out }
dialog.sheet::backdrop { background: var(--backdrop) }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px 4px }
.sheet-head h2 { font-family: var(--display); font-weight: 800; font-size: 1.35rem; margin: 0 }
.sheet-body { padding: 8px 18px 18px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto }
.sheet-body p { margin: 0 }

.rules h3 { margin: 4px 0 0; font-size: 1rem }
.rules ul, .rules ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px }
.steps li::marker { font-family: var(--display); font-weight: 800; color: var(--accent) }

.login { display: flex; flex-direction: column; gap: 12px }
.switch { text-align: center }

@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }