/* Shared dialog template. ID scopes override the older per-screen rules while
   leaving simulation, pause timers, fullscreen and session handling untouched. */
body :is(#arcade-overlay,#result,#account-dialog,#arcade-detail .detail-dialog,#legal-dialog,#analytics-choice){--dialog-ink:#171717;--dialog-muted:#6f675e;--dialog-rule:#ded4c5;--dialog-input:#fff;--dialog-accent:#b62745;--dialog-on:#171717;color-scheme:light}
body :is(#arcade-overlay,#result,#account-dialog){background:#18171dbd;backdrop-filter:none;padding:24px;overflow:auto;align-items:safe center}
body :is(#arcade-overlay,#result,#account-dialog)>.dialog-card,
body.arcade-open #arcade-overlay.is-orientation-prompt>.dialog-card,
body #arcade-detail .detail-dialog{width:min(560px,100%);max-width:none;padding:28px;border:2px solid #171717;border-radius:24px;background:#fffaf2;box-shadow:6px 6px 0 #171717;color:#171717;text-align:left;overflow:auto}
body :is(#result,#account-dialog)>.dialog-card{max-height:calc(100dvh - 48px)}
body #result>.dialog-card{width:min(720px,100%)}
body #arcade-detail .detail-dialog{width:min(560px,calc(100vw - 40px));max-height:calc(100dvh - 48px)}
body #arcade-detail .detail-dialog::backdrop,body #legal-dialog::backdrop{background:#18171dbd;backdrop-filter:none}
body #legal-dialog{border:2px solid #171717;border-radius:24px;box-shadow:6px 6px 0 #171717}
body :is(#arcade-overlay,#result,#account-dialog) .dialog-card h2,
body #arcade-detail .detail-dialog h2{font:900 clamp(25px,3vw,34px)/1.1 Arial,Helvetica,sans-serif;letter-spacing:-.045em;text-transform:uppercase;color:#171717;margin:10px 0 18px;max-width:none}
body #arcade-detail .detail-dialog h2,body #result .dialog-card h2{padding-right:34px}
body :is(#arcade-overlay,#result,#account-dialog) :is(.eyebrow,.dialog-kicker,.result-kicker){font:900 .6875rem/1.5 Arial,Helvetica,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#b62745;margin:0 0 10px}
body :is(#arcade-overlay,#result,#account-dialog) .dialog-card :is(p:not(.eyebrow,.dialog-kicker,.result-kicker),.help,.result-note),
body #arcade-detail .detail-dialog p{color:#6f675e;font-size:.875rem;line-height:1.7;margin:0 0 20px}
body :is(#arcade-overlay,#result,#account-dialog) .dialog-card .notice{color:#a71c3d}
body :is(#arcade-play #arcade-overlay,#arcade-detail .detail-dialog,#result,#account-dialog,#legal-dialog,#analytics-choice) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;margin:0;border:2px solid #171717;border-radius:999px;background:#fff;color:#171717;font:900 .875rem/1.35 Arial,Helvetica,sans-serif;letter-spacing:0;text-transform:none;box-shadow:none;cursor:pointer;white-space:normal;text-align:center}
body :is(#arcade-play #arcade-overlay,#arcade-detail .detail-dialog,#result,#account-dialog,#legal-dialog,#analytics-choice) .btn.primary{background:#ff5472;color:#171717;box-shadow:3px 3px 0 #171717}
body :is(#arcade-play #arcade-overlay,#arcade-detail .detail-dialog,#result,#account-dialog,#legal-dialog,#analytics-choice) .btn:hover:not(:disabled){background:#f4eee4;filter:none}
body :is(#arcade-play #arcade-overlay,#arcade-detail .detail-dialog,#result,#account-dialog,#legal-dialog,#analytics-choice) .btn.primary:hover:not(:disabled){background:#ff7390}
body :is(#arcade-play #arcade-overlay,#arcade-detail .detail-dialog,#result,#account-dialog,#legal-dialog,#analytics-choice) .btn:disabled{background:#f4eee4;color:#6f675e;border-color:#b5aa9d;box-shadow:none;opacity:1;cursor:default}
body .dialog-actions,body #account-dialog .row,body #result .finale-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
body #arcade-detail .dialog-close,body #legal-dialog .dialog-close,body #result .dialog-close{display:grid;place-items:center;width:44px;height:44px;min-height:44px;flex:none;padding:0;border:2px solid #171717;border-radius:50%;background:#fff;color:#171717;font:400 28px/1 Arial,Helvetica,sans-serif;cursor:pointer;box-shadow:none}
body #arcade-detail .dialog-close,body #result .dialog-close{position:absolute;right:16px;top:16px}
body :is(#arcade-detail,#legal-dialog,#result) .dialog-close:hover{background:#ffc83d}
body :is(#arcade-detail .detail-dialog,#account-dialog,#result) :is(input:not([type=checkbox]),select,textarea){min-width:0;max-width:100%;min-height:44px;padding:10px 12px;border:2px solid #8e8376;border-radius:10px;background:#fff;color:#171717;font:400 .9375rem/1.5 Arial,Helvetica,sans-serif;box-shadow:none}
body :is(#arcade-detail .detail-dialog,#account-dialog,#result,#arcade-overlay,#legal-dialog) :is(button,input,select,textarea):focus-visible{outline:3px solid #b62745;outline-offset:4px}
body #arcade-detail #arcade-race-entry .race-entry-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
body #arcade-race-entry #arcade-create-race{grid-column:1/-1;justify-self:start}
body #arcade-race-entry #arcade-race-code{width:100%;letter-spacing:.1em}
body #result .finale-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0;margin:22px 0}
body #result .finale-metrics>div{min-width:0;padding:14px;background:#f4eee4;border:1px solid #ded4c5;border-radius:12px}
body #result .finale-metrics>div:first-child{background:#ffc83d;border-color:#171717}
body #result .finale-metrics strong{font:900 clamp(20px,3vw,28px)/1.3 Arial,Helvetica,sans-serif;color:#171717;overflow-wrap:anywhere}
body #result .finale-metrics small{font-size:.6875rem;color:#514b43;line-height:1.5}
body #account-dialog .backup-check{margin-top:20px;color:#514b43}
body #account-dialog #recovery-output{width:100%;resize:vertical;min-height:88px;font-size:16px}
body #account-dialog #recovery-form{display:grid;gap:10px}
body #account-dialog #recovery-form .dialog-actions{margin-top:8px}
body #account-dialog #recovery-error:empty{display:none}
/* The ready indicator shares the card treatment without covering the saved scene. */
body.arcade-open .resume-countdown-card{display:flex;align-items:center;gap:16px;padding:12px 18px;border:2px solid #171717;border-radius:20px;background:#fffaf2;color:#171717;box-shadow:6px 6px 0 #171717}
body.arcade-open .resume-countdown-card span{font:900 .6875rem/1.4 Arial,Helvetica,sans-serif;letter-spacing:.12em;color:#b62745}
body.arcade-open .resume-countdown-card strong{display:grid;place-items:center;min-width:56px;min-height:56px;border:2px solid #171717;border-radius:50%;background:#ffc83d;font:900 36px/1 Arial,Helvetica,sans-serif;color:#171717}
body.arcade-open #leader-celebration{border:2px solid #171717;border-radius:20px;box-shadow:6px 6px 0 #171717;background:#fffaf2;color:#171717}
/* Keep the animated orientation illustration within the same readable card. */
body.arcade-open #arcade-overlay.is-orientation-prompt{background:#18171dbd}
body.arcade-open .is-orientation-prompt #arcade-overlay-kicker{color:#b62745;font:900 .6875rem/1.5 Arial,Helvetica,sans-serif;letter-spacing:.12em}
body.arcade-open .is-orientation-prompt #arcade-overlay-title{color:#171717;font-family:Arial,Helvetica,sans-serif;font-weight:900}
body.arcade-open .is-orientation-prompt #arcade-overlay-copy{color:#6f675e}
body.arcade-open .is-orientation-prompt .rotate-phone{stroke:#171717}
body.arcade-open .is-orientation-prompt .rotate-phone>rect:first-child{fill:#fff}
body.arcade-open .is-orientation-prompt .rotate-phone-screen{fill:#ffc83d33;stroke:#17171740}
body.arcade-open .is-orientation-prompt .rotate-hint-orbit{border-color:#17171740}
body.arcade-open .is-orientation-prompt .rotate-hint-arrow{stroke:#b62745}
@media(max-height:500px){body.arcade-open #arcade-overlay.is-orientation-prompt>.dialog-card{padding:18px}}
@media(max-width:600px){body :is(#arcade-overlay,#result,#account-dialog){padding:14px}body :is(#arcade-overlay,#result,#account-dialog)>.dialog-card,body #arcade-detail .detail-dialog{padding:22px 18px;border-radius:20px;box-shadow:4px 4px 0 #171717}body :is(#result,#account-dialog)>.dialog-card,body #arcade-detail .detail-dialog{max-height:calc(100dvh - 32px)}body #result .finale-metrics{gap:8px}body #result .finale-metrics>div{padding:10px 8px}body #arcade-detail .dialog-close,body #result .dialog-close{top:12px;right:12px}body .dialog-actions>.btn{flex:1}body #account-dialog .row>.btn{flex:1}body.arcade-open .resume-countdown-card{padding:10px 14px;gap:12px;box-shadow:4px 4px 0 #171717}body.arcade-open .resume-countdown-card strong{min-width:48px;min-height:48px;font-size:32px}}
@media(max-height:500px){body :is(#arcade-overlay,#result,#account-dialog){padding:10px}body :is(#arcade-overlay,#result,#account-dialog)>.dialog-card,body #arcade-detail .detail-dialog{padding:18px}body #arcade-overlay .dialog-card h2{font-size:25px;margin:6px 0 12px}body #arcade-overlay .dialog-card p{margin-bottom:12px}body #arcade-overlay .dialog-actions{margin-top:12px}}