/* Focused repairs; the original page's typography, colors, panels and gallery remain. */
.ml-playing { overflow:hidden; }
#symbol-canvas { touch-action:none; cursor:crosshair; display:block; }
#game-overlay { min-height:100svh; padding:4.5rem 0 2rem; }
#game-overlay > [id^="step-"]:not(.hidden) { flex-shrink:0; }
#game-overlay #step-onboarding { position:relative; height:auto; min-height:calc(100svh - 6.5rem); }
#step-onboarding > div:not(.hidden) { position:relative; min-height:calc(100svh - 6.5rem); height:auto; }
#game-overlay:has(#step-onboarding:not(.hidden)) { padding:0; justify-content:flex-start; }
#game-overlay:has(#step-onboarding:not(.hidden)) #step-onboarding > div:not(.hidden) { min-height:100svh; padding-top:5rem; padding-bottom:3rem; }
#game-overlay:has(#step-finish:not(.hidden)) { justify-content:flex-start; }
#step-finish { max-height:none; overflow:visible; padding-top:1rem; }
#game-overlay button:focus-visible,#game-overlay input:focus-visible,#game-overlay textarea:focus-visible,#game-overlay [role="button"]:focus-visible { outline:3px solid #facc15; outline-offset:4px; }
.game-notice { position:fixed; z-index:110; bottom:.75rem; left:50%; transform:translateX(-50%); margin:0; width:calc(100% - 2rem); max-width:34rem; padding:.5rem 1rem; border-radius:8px; background:#171717; color:#facc15; text-align:center; pointer-events:none; }
.game-notice:empty { display:none; }
.ml-selected { border-color:#facc15!important; }
.template-btn.ml-selected { background:#262626; }
.template-btn.ml-selected .template-radio { background:#facc15; border-color:#facc15; }
.ml-current-dot { background:#facc15!important; }
.ml-link { text-decoration:underline; text-underline-offset:4px; padding:.65rem; margin:.25rem; color:inherit; }
.ml-drawing-tools,.ml-result-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin:1.5rem 0; }
.ml-drawing-tools button { font-size:.8rem; text-decoration:underline; padding:.5rem; }
.ml-audio { max-width:26rem; margin:1.5rem auto; font-size:.85rem; color:#a3a3a3; }
.ml-audio audio { width:100%; margin-top:.75rem; }
.ml-local-note { font-size:.85rem; line-height:1.6; color:#d4d4d4; max-width:33rem; margin:-1rem auto 1.5rem; }
#step-finish h2 { font-family:Georgia,serif; font-size:clamp(1.8rem,5vw,3rem); line-height:1.15; margin:1rem 0; }
.ml-explanation { max-width:48rem; margin:1rem auto; color:#a3a3a3; line-height:1.6; }
.ml-your-symbol { display:flex; gap:1.5rem; align-items:center; justify-content:center; margin:1.5rem 0 2rem; }
.ml-your-symbol img { width:96px; height:96px; border-radius:12px; }
.ml-your-symbol p { max-width:25rem; font-family:Georgia,serif; font-size:1.3rem; overflow-wrap:anywhere; }
.ml-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; text-align:left; margin:2rem 0; }
.ml-result { padding:1.25rem; border:1px solid #404040; border-radius:12px; background:#171717; }
.ml-result img { width:100%; aspect-ratio:1; object-fit:contain; background:white; border-radius:8px; }
.ml-result h3 { font-family:Georgia,serif; font-size:1.3rem; margin:1rem 0 .5rem; }
.ml-result p { color:#d4d4d4; font-size:.9rem; min-height:3rem; }
.ml-result small { display:block; color:#a3a3a3; margin:.75rem 0; }
.ml-score-details { color:#a3a3a3; font-size:.8rem; margin:.75rem 0; }
.ml-score-details summary { cursor:pointer; }
.ml-score-details p { font-size:.8rem; min-height:0; margin-top:.5rem; }
.ml-button { border:1px solid #737373; border-radius:999px; padding:.75rem 1.25rem; font-size:.85rem; color:white; margin:.3rem; }
.ml-button:hover { background:white; color:black; }
#outcome-note { display:block; width:100%; max-width:42rem; margin:.75rem auto; border:1px solid #737373; border-radius:8px; background:#171717; padding:1rem; color:white; }
#step-searching #search-symbols-parade,#step-searching .perspective-500 + div + div { display:none; }
#step-searching [id^="story-"] { display:none; }
#search-symbol-display { border-radius:12px; }
#search-symbol-display img { width:100%; height:100%; object-fit:contain; }
@media(max-width:640px) { .ml-results { grid-template-columns:1fr; } .ml-result { display:grid; grid-template-columns:100px minmax(0,1fr); gap:.5rem 1rem; } .ml-result img { grid-row:span 4; } .ml-result h3 { font-size:1.1rem; margin:0; } .ml-result p { min-height:0; } .ml-result small { margin:0; } .ml-result button { grid-column:1/-1; } .ml-your-symbol { align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; transition:none!important; } }