/* A compact score card, with one consistent card system for every element. */
#results-dialog{width:min(680px,calc(100vw - 28px));max-height:calc(100dvh - 32px);padding:27px 30px 22px;border:1px solid #776588;border-radius:24px;background:radial-gradient(ellipse at 100% 0,#a48bcc14,transparent 42%),#171b28;color:#e7eaf4;box-shadow:0 0 36px #a18bc327,0 28px 110px #000a;scrollbar-width:thin;scrollbar-color:#6b5c7c transparent}
#results-dialog::backdrop{background:#060a16ba;backdrop-filter:blur(6px)}
#results-dialog .close-dialog{right:17px;top:14px;width:32px;height:32px;border:1px solid #65596f;border-radius:10px;background:#252332;color:#ded7ea;font-size:21px;line-height:1}
#results-dialog .dialog-eyebrow{font-size:9px;letter-spacing:1.8px;color:#b7a8ce;margin:0 36px 8px 0}
#results-dialog h2{font:600 clamp(25px,4vw,34px)/1.12 'Space Grotesk',Arial,sans-serif;letter-spacing:-1px;margin:0 30px 19px 0;color:#f0eef8}
.result-hero{display:flex;align-items:center;gap:24px;margin-bottom:17px}.result-art{flex:0 0 106px;width:106px;height:106px;border:1px solid #6f627e;border-radius:20px;background-repeat:no-repeat;box-shadow:0 0 23px #a996d024;overflow:hidden}.result-art svg{width:100%;height:100%}
.result-hero-copy{flex:1;min-width:0}#result-material{margin:0 0 5px;font-size:14px;color:#c9c7dc;font-weight:500}
#results-dialog .score-readout{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px;text-align:left;margin:0;color:#c8b4e4;line-height:1}
#results-dialog #score-number{font-size:64px;font-weight:600;font-family:'Space Grotesk',Arial,sans-serif;letter-spacing:-3px;font-variant-numeric:tabular-nums}#results-dialog .score-readout>span:nth-child(2){font-size:27px;margin-left:4px;color:#aba1bc}
#results-dialog #score-status{font-size:8px;line-height:1.4;letter-spacing:1.6px;color:#a8a9bd;margin:0 0 5px 13px;max-width:70px}
#results-dialog[data-tier="perfect"] .score-readout{color:#a5e7c6}#results-dialog[data-tier="perfect"] .result-art{border-color:#9bd4b8;box-shadow:0 0 25px #a5e7c63d}
#results-dialog .score-track{height:8px;margin:0;border-radius:10px;background:#2c283c;box-shadow:0 0 0 1px #655775,0 0 15px #a89ac324}#results-dialog #score-bar{height:100%;border-radius:inherit}
#results-dialog .score-explanation{font-size:10px;text-align:right;margin:10px 0 17px;color:#aaa7bd}
#results-dialog .result-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 23px;padding:14px 0;border:1px solid #484253;border-radius:13px;background:#202231;box-shadow:inset 0 1px #ffffff04}
#results-dialog .result-summary>div{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 8px;border:0;border-right:1px solid #494253}#results-dialog .result-summary>div:last-child{border:0}
#results-dialog .result-summary strong{font:600 22px/1 'Space Grotesk',Arial,sans-serif;color:#d6c6ec}#results-dialog .result-summary small{font-size:9px;line-height:1.4;color:#aaa8bc;max-width:46px}
#results-dialog .answer-section{margin-top:20px}#results-dialog .answer-heading{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}#results-dialog .answer-heading h3{margin:0;font-size:13px;font-weight:500;color:#e0dcea}#results-dialog .answer-heading>span{font-size:10px;color:#b8aec7;text-align:right;line-height:1.5;max-width:60%}
#results-dialog .answer-elements{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
/* Keep the periodic-table tile layout; result colors communicate the outcome. */
#results-dialog .answer-element.result-tile{--result-accent:var(--score-good);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;min-width:0;min-height:0;aspect-ratio:1.22;padding:1px 2px;text-align:center;border:1.5px solid color-mix(in srgb,var(--element-color) 94%,transparent);border-radius:6px;background:color-mix(in srgb,var(--element-color) 15%,#10131c);color:color-mix(in srgb,var(--element-color) 70%,white);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--element-color) 20%,transparent),0 0 8px color-mix(in srgb,var(--element-color) 18%,transparent)}
#results-dialog .answer-element.result-tile.found{--result-accent:#39ee9e;--result-tile-color:#39ee9e}
#results-dialog .answer-element.result-tile.missed{--result-accent:#ffe15b;--result-tile-color:#ffe15b}
#results-dialog .answer-element.result-tile.wrong{--result-accent:#ff5e69;--result-tile-color:#ff5e69}
#results-dialog .answer-element.result-tile{border-color:var(--result-tile-color);background:color-mix(in srgb,var(--result-tile-color) 18%,#10131c);color:color-mix(in srgb,var(--result-tile-color) 82%,white);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--result-tile-color) 24%,transparent),0 0 12px color-mix(in srgb,var(--result-tile-color) 25%,transparent)}
#results-dialog .result-tile .atomic-number{position:absolute;top:4px;left:5px;font-size:7px;line-height:1;color:inherit;opacity:.96}
#results-dialog .result-tile .symbol{font:600 23px/1 'Space Grotesk',Arial,sans-serif;margin-top:4px;color:inherit}
#results-dialog .result-tile .element-name{font:400 7px/1.1 'DM Sans',Arial,sans-serif;margin-top:3px;color:inherit;opacity:.96;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#results-dialog .result-tile .result-element-state{position:absolute;display:grid;place-items:center;right:3px;top:3px;width:12px;height:12px;border-radius:50%;font:700 10px/1 Arial,sans-serif;color:var(--result-accent);background:#10131ce8;box-shadow:0 0 5px color-mix(in srgb,var(--result-accent) 30%,transparent)}
#results-dialog .result-tile.wrong .result-element-state{background:#42151ae8;color:#ff9ba1}
#results-dialog .answer-key{display:flex;gap:16px;margin:10px 0 0;font-size:9px;color:#9d9fb4}#results-dialog .hit-dot{background:#39ee9e;box-shadow:0 0 6px #39ee9e44}#results-dialog .miss-dot{background:#ffe15b;box-shadow:0 0 6px #ffe15b33}
.result-clean-mix{font-size:10px;color:#a5d9c0;margin:15px 0 0;padding:0}
.result-science{margin:21px 0 0;border:1px solid #4c455b;border-radius:12px;background:#1d2030;overflow:hidden}.result-science summary{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;font-size:11px;color:#bcb3cd;cursor:pointer;list-style:none}.result-science summary::-webkit-details-marker{display:none}.result-science summary span{font-size:17px}.result-science[open] summary span{transform:rotate(45deg)}
#results-dialog .component-list{margin:0 15px;padding:13px 0;border-top:1px solid #474051}#results-dialog .component-list:empty{display:none}#results-dialog .fact-box{border:0;border-top:1px solid #474051;border-radius:0;background:transparent;box-shadow:none;padding:13px 0;margin:0 15px 13px}#results-dialog .fact-box p{font-size:11px;line-height:1.7;color:#afb5c9}#results-dialog .fact-box a{font-size:10px;color:#c6b7dc}
#results-dialog .result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:21px}#results-dialog .result-actions button{min-height:42px;padding:11px;border-radius:11px;font-size:11px}#results-dialog #next-puzzle{font-size:9px;text-align:center;line-height:1.6;margin:13px 0 0;color:#9296ad}
/* The product occupies the same visual center as the flask during the finale. */
.beaker-stage.finale-perfect.finale-running,.beaker-stage.finale-perfect.finale-held{transform:none}.beaker-stage.finale-perfect.finale-running #beaker,.beaker-stage.finale-perfect.finale-held #beaker{opacity:0;transition:opacity .25s ease}.beaker-stage.finale-held::after{display:none}.beaker-stage.finale-running .beaker-halo,.beaker-stage.finale-held .beaker-halo{opacity:.35}
@media(max-width:600px){#results-dialog .answer-elements{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}}
@media(max-width:500px){#results-dialog{padding:23px 18px 19px;border-radius:20px}.result-hero{gap:16px}.result-art{width:88px;height:88px;flex-basis:88px}#results-dialog #score-number{font-size:55px}#results-dialog #score-status{margin-left:9px;font-size:7px}#results-dialog .result-summary strong{font-size:19px}#results-dialog .result-summary small{font-size:8px}#results-dialog .answer-elements{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.result-hero-copy #result-material{font-size:12px}#results-dialog .answer-heading>span{max-width:55%;font-size:9px}}
@media(max-width:360px){#results-dialog .answer-elements{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.beaker-stage.finale-perfect.finale-running #beaker,.beaker-stage.finale-perfect.finale-held #beaker{transition:none}}