:root { --page:#0b1020; --surface:#19243a; --text:#f9f7f3; --muted:#b1c2d0; --orange:#ff8a3d; --blue:#58aeff; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; color:var(--text); background:var(--page); font-family:Poppins,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(15,18,22,.94); border-bottom:1px solid #333842; backdrop-filter:blur(12px); }
.header-inner { max-width:1440px; padding:16px 24px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-family:'Libre Baskerville',serif; font-size:20px; font-weight:700; text-decoration:none; white-space:nowrap; }
.brand img { border-radius:8px; }
.brand strong, h1 span { color:var(--orange); }
nav { display:flex; gap:26px; }
nav a { text-decoration:none; font-weight:500; }
nav a:hover,.back-link:hover { color:var(--orange); }
main { flex:1; position:relative; }
.daily-shell { width:min(100%,880px); margin:auto; padding:32px 24px 84px; }
.back-link { display:inline-flex; align-items:center; min-height:28px; color:#a8bfd0; text-decoration:none; font-size:13px; font-weight:600; }
.page-heading { display:grid; grid-template-columns:minmax(0,1fr) 232px; align-items:center; gap:24px; text-align:left; padding:34px 0 31px; }
.eyebrow,.view-label { margin:0; color:var(--blue); font-size:11px; font-weight:700; letter-spacing:.2em; }
h1,h2 { font-family:'Libre Baskerville',serif; }
.page-heading h1 { margin:9px 0 11px; }
.heading-copy>p:last-child { margin:0; color:#b8c9d7; font-size:15px; line-height:1.6; }
.best-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 9px; padding:14px 16px; border:1px solid #436487; border-radius:11px; background:rgba(28,48,76,.82); }
.best-summary p { grid-column:1/-1; margin:0; color:#8fc8ff; font-size:10px; font-weight:700; letter-spacing:.15em; }
.best-summary div { min-width:0; }
.best-summary span { display:block; margin-bottom:3px; color:#a8bed1; font-size:11px; font-weight:600; }
.best-summary strong { color:#fff4e5; font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.best-summary small { grid-column:1/-1; color:#8fa8bd; font-size:10px; }
.game-panel { position:relative; overflow:visible; background:#192b44; border:1px solid #476687; border-radius:16px; padding:clamp(24px,4.5vw,40px); box-shadow:0 22px 48px rgba(0,0,0,.23); min-height:350px; }
.game-panel::before { content:""; position:absolute; top:-1px; left:40px; width:54px; height:3px; background:var(--orange); }
.game-topline { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:13px; font-weight:600; }
.total-score { color:var(--orange); white-space:nowrap; }
.progress { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:14px 0 34px; }
.progress span { height:5px; border-radius:3px; background:#3c526b; }
.progress .done { background:#64b7f3; }
.progress .current { background:var(--orange); }
.center-view { text-align:center; max-width:560px; margin:0 auto; }
h2 { margin:12px 0 22px; font-size:clamp(25px,4vw,36px); line-height:1.38; }
.center-view>p:not(.view-label):not(.final-score):not(.tier-name) { color:var(--muted); line-height:1.6; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:7px; padding:13px 22px; background:var(--orange); color:#111; font-weight:700; text-decoration:none; transition:background .2s,border-color .2s; }
.daily-shell .primary-button { border-radius:7px; box-shadow:none !important; }
.daily-shell .primary-button:hover { background:#ffab70 !important; transform:none; box-shadow:none !important; }
.skip-button { flex:0 0 auto; min-height:50px; padding:12px 18px; border:1px solid #617895; border-radius:7px; background:#20334f; color:#d8e7f5; font-weight:700; transition:border-color .2s,background .2s; }
.skip-button:hover { border-color:var(--blue); background:#2b466b; }
.answer-row button:disabled { opacity:.68; cursor:wait; transform:none; }
#start-button { margin-top:16px; }
.question-meta { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.timer { min-width:64px; padding:7px 11px; border:1px solid #53606b; border-radius:20px; color:var(--text); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; text-align:center; }
.timer.urgent { border-color:#f0645a; color:#ff8b82; }
#question-view h2 { max-width:720px; margin:18px 0 32px; min-height:86px; font-size:clamp(28px,4vw,39px); line-height:1.2; letter-spacing:-.035em; }
.prompt-hint { display:block; max-width:640px; margin-top:11px; color:#afc5d7; font-family:Poppins,sans-serif; font-size:clamp(14px,1.7vw,16px); font-weight:500; line-height:1.5; letter-spacing:0; }
.timer-track,.score-track { overflow:hidden; height:5px; background:#3b424b; border-radius:8px; }
.timer-track span,.score-track span { display:block; width:100%; height:100%; background:var(--orange); transition:width .25s linear; }
form { margin-top:30px; }
label { display:block; margin-bottom:10px; color:var(--muted); font-size:13px; font-weight:600; }
.answer-row { display:flex; gap:10px; align-items:flex-start; }
input { flex:1; min-width:0; width:100%; border:1px solid #667c98; border-radius:9px; padding:13px 14px; background:#101a2f; color:var(--text); outline:none; }
input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,128,25,.17); }
input::placeholder { color:#8694a2; }
.correction-view { margin:0 0 22px; padding:14px 17px; border:1px solid #4d87c4; border-radius:10px; background:#173452; color:var(--muted); font-size:14px; }
.correction-view strong { color:#88caff; }
.correction-view small { display:block; margin-top:5px; font-size:11px; letter-spacing:.08em; }
.feedback { min-height:22px; margin:12px 0 0; color:#ffd090; font-size:13px; }
.score-animation { margin:0; color:var(--earned,#ff8a3d); font-size:clamp(52px,8vw,76px); font-weight:700; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.055em; white-space:nowrap; }
.score-denominator { color:var(--muted); font-size:19px; font-weight:500; letter-spacing:0; }
.score-track { max-width:320px; margin:0 auto; height:5px; }
.score-track span { width:0; background:var(--earned-fill,linear-gradient(90deg,#ff8a3d,#ffb66b)); transition:width 1.2s ease-out; }
.tier-name { margin:20px 0 30px; color:var(--earned,#58aeff); font-size:15px; font-weight:700; }
#result-view { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:0 24px; max-width:none; padding:8px 0 0; text-align:left; }
#result-view .view-label { grid-column:1 / -1; margin:0 0 15px; }
#result-view h2 { grid-column:1; grid-row:2; max-width:510px; margin:0; font-size:clamp(27px,3.4vw,38px); line-height:1.18; letter-spacing:-.035em; overflow-wrap:anywhere; }
#result-view .score-animation { grid-column:2; grid-row:2; justify-self:end; }
#result-view .score-track { grid-column:1 / -1; grid-row:3; width:100%; max-width:none; margin:29px 0 18px; background:#405369; }
#result-view .tier-name { grid-column:1; grid-row:4; align-self:center; margin:0; }
#result-view #next-button { grid-column:2; grid-row:4; justify-self:end; }
#result-view[data-tier="0"] { --earned:#9aafc1; --earned-fill:#7c91a4; }
#result-view[data-tier="10"] { --earned:#96b7da; --earned-fill:linear-gradient(90deg,#7199c2,#a4c5e5); }
#result-view[data-tier="30"] { --earned:#68c4ff; --earned-fill:linear-gradient(90deg,#398fdf,#7bccff); }
#result-view[data-tier="60"] { --earned:#ff6b6b; --earned-fill:linear-gradient(90deg,#d63c3c,#ff8585); }
#result-view[data-tier="85"] { --earned:#c9a0ff; --earned-fill:linear-gradient(90deg,#8b6bdd,#c9a0ff); }
#result-view[data-tier="100"] { --earned:#f5d178; --earned-fill:linear-gradient(90deg,#e4a642,#fff0ab,#e5ac47); --earned-glow:rgba(255,205,98,.45); }
#result-view[data-tier="100"] .score-animation { background:linear-gradient(110deg,#f2bc58,#fff1b6,#dc9536); background-clip:text; -webkit-background-clip:text; color:transparent; }
.final-score { grid-column:2; grid-row:1 / 5; margin:0; padding-left:26px; border-left:1px solid #48637d; color:var(--orange); font-size:clamp(58px,8vw,78px); font-weight:700; line-height:1; letter-spacing:-.055em; white-space:nowrap; }
.final-score small { color:var(--muted); font-size:19px; font-weight:500; letter-spacing:0; }
.complete-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:27px 30px; border:1px solid #486b8d; border-radius:11px; background:#213a54; text-align:left; }
.complete-heading::before,.complete-heading::after { display:none; }
.complete-heading .view-label { grid-column:1; grid-row:1; }
.complete-heading h2 { grid-column:1; grid-row:2; margin:10px 0 4px; font-size:clamp(27px,3.5vw,36px); line-height:1.15; }
.complete-heading .tier-name { grid-column:1; grid-row:3; margin:0; color:#8bcaff; font-size:14px; }
.complete-heading .record-note { grid-column:1; grid-row:4; margin:10px 0 0; color:#b7d3e9; font-size:13px; font-weight:600; }
.complete-heading .record-note.new-best { color:#ffba7c; }
.rounds { margin-top:34px; padding:21px 0 0; border:0; border-top:1px solid #49637d; border-radius:0; background:none; box-shadow:none; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:15px; }
.section-heading h3 { margin:0; font-family:'Libre Baskerville',serif; font-size:20px; }
.section-heading span { color:#9eb3c3; font-size:11px; font-weight:500; letter-spacing:0; text-align:right; }
.rounds { padding-bottom:2px; }
.round { border-top:1px solid #344b64; }
.round summary { display:grid; grid-template-columns:26px minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:17px 8px; border-radius:0; cursor:pointer; list-style:none; transition:background .18s ease; }
.round summary::-webkit-details-marker { display:none; }
.round summary:hover,.round summary:focus-visible { background:rgba(105,163,225,.09); }
.round summary:focus-visible { outline:2px solid #81c3ff; outline-offset:2px; }
.round[open] summary { background:rgba(87,154,218,.09); }
.round summary:hover .round-answer { color:#fff; }
.round-number { color:#7e91a0; font-size:12px; }
.round-content { min-width:0; }
.round-prompt { display:block; overflow:hidden; color:#879bab; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.round-answer { display:block; overflow:hidden; margin-top:3px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.points-badge { display:inline-flex; align-items:center; justify-content:center; min-width:48px; padding:5px 9px; border:1px solid var(--badge-border); border-radius:8px; background:var(--badge-bg); color:var(--badge-text); font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.25; white-space:nowrap; }
.tier-0 { --badge-border:#53677e; --badge-bg:#25394e; --badge-text:#b1c2d0; }
.tier-10 { --badge-border:#536c91; --badge-bg:#233c5d; --badge-text:#a9c9e9; }
.tier-30 { --badge-border:#3680bd; --badge-bg:#173e62; --badge-text:#7acaff; }
.tier-60 { --badge-border:#c24444; --badge-bg:#5a1f27; --badge-text:#ff8f8f; }
.tier-85 { --badge-border:#8e70ca; --badge-bg:#352b61; --badge-text:#d2b2ff; }
.tier-100 { --badge-border:#eec66b; --badge-bg:linear-gradient(115deg,#efbd5f,#fff0b0 48%,#df9d37); --badge-text:#34230e; background-size:210% 100%; box-shadow:0 3px 13px rgba(244,186,76,.2); }
.round-points.tier-100,.your-answer .tier-100 { animation:gold-shimmer 1.8s ease-out 1; }
@keyframes gold-shimmer { from { background-position:100% 0; } to { background-position:0 0; } }
.round-points { font-size:13px; }
.round-toggle { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:115px; min-height:33px; padding:5px 8px; border:1px solid #506d8e; border-radius:8px; background:#193450; color:#a9d8ff; font-size:11px; font-weight:700; white-space:nowrap; transition:background .18s,border-color .18s,color .18s; }
.round summary:hover .round-toggle,.round[open] .round-toggle { border-color:#6aaee9; background:#214b70; color:#f4fbff; }
.round-toggle-close { display:none; }
.round[open] .round-toggle-open { display:none; }
.round[open] .round-toggle-close { display:inline; }
.answer-browser { padding:12px 8px 20px 38px; animation:answer-reveal .24s ease-out; }
@keyframes answer-reveal { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.answer-browser input { width:100%; margin-bottom:10px; padding:10px 12px; font-size:13px; }
.answer-count { margin:0 0 7px; color:#8da1b0; font-size:11px; }
.all-answers { max-height:330px; overflow:auto; margin:0; padding:0 8px 0 0; list-style:none; scrollbar-color:#567796 #15283f; }
.all-answers li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 9px; border-bottom:1px solid #304a64; border-radius:5px; color:#dce8f1; font-size:12px; }
.all-answers li:hover { background:rgba(102,160,218,.08); }
.all-answers li.your-answer { border-left:3px solid var(--orange); padding-left:10px; color:#fff; background:#213d58; }
.all-answers strong { flex:none; }
.all-answers small { margin-left:6px; color:#8395a4; }
.complete-footer { padding-top:28px; text-align:center; }
.complete-footer p { color:var(--muted); font-size:13px; }
.complete-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:14px; }
.complete-back-link,.mode-switch-link { display:inline-block; color:#88caff; font-size:13px; font-weight:700; text-decoration:none; }
.complete-back-link { padding:11px 15px; }
.complete-back-link:hover,.mode-switch-link:hover { color:#fff; text-decoration:underline; }
.mode-switch-link { display:block; width:max-content; margin:20px auto 0; }
.loading-view,.error-view { padding:40px 0; text-align:center; color:var(--muted); }
.error-view { color:#ffd090; }
.day-label { margin:20px 0 0; color:var(--muted); text-align:center; font-size:12px; }
footer { padding:28px 20px; border-top:1px solid #303942; text-align:center; color:var(--orange); font-size:14px; }
footer a { color:#88caff; font-weight:700; }
@media(max-width:600px) { .header-inner { padding:14px 16px; } .brand { font-size:16px; } .brand img { width:28px; height:28px; } nav { gap:16px; font-size:14px; } .daily-shell { padding:23px 16px 52px; } .page-heading { grid-template-columns:1fr; gap:18px; padding:30px 0 24px; } .heading-copy>p:last-child { font-size:14px; } .progress { margin-bottom:32px; } #question-view h2 { min-height:0; } .answer-row { display:grid; grid-template-columns:1fr auto; } .answer-row input { grid-column:1/-1; } .answer-row>.primary-button { width:100%; } .skip-button { min-width:84px; } .rounds { padding:17px; } .section-heading { align-items:flex-start; } .section-heading h3 { font-size:17px; } .section-heading span { max-width:128px; } .answer-browser { padding-left:0; } }
@media(max-width:600px) { .round summary { grid-template-columns:22px minmax(0,1fr) auto; grid-template-rows:auto auto auto; gap:5px 8px; padding:15px 2px; } .round-content { display:contents; } .round-number { grid-column:1; grid-row:1; } .round-prompt { grid-column:2 / -1; grid-row:1; overflow:visible; white-space:normal; line-height:1.4; } .round-answer { grid-column:2 / -1; grid-row:2; overflow:visible; white-space:normal; line-height:1.35; } .round-points { grid-column:2; grid-row:3; justify-self:start; min-width:42px; margin-top:5px; padding:5px 6px; } .round-toggle { grid-column:3; grid-row:3; justify-self:end; min-width:115px; font-size:10px; } .all-answers li { font-size:11px; } }
@media(max-width:600px) { #result-view { grid-template-columns:1fr; gap:0; } #result-view .view-label,#result-view h2,#result-view .score-animation,#result-view .score-track,#result-view .tier-name,#result-view #next-button { grid-column:1; grid-row:auto; justify-self:start; } #result-view h2 { margin:0 0 22px; } #result-view .score-animation { margin-bottom:7px; } #result-view .score-track { margin:16px 0; } #result-view .tier-name { margin:0 0 23px; } .complete-heading { grid-template-columns:1fr; padding:24px; } .complete-heading .view-label,.complete-heading h2,.complete-heading .tier-name,.complete-heading .final-score,.complete-heading .record-note { grid-column:1; grid-row:auto; } .complete-heading .final-score { margin:23px 0 10px; padding:0; border:0; } .rounds { padding:20px 0 0; } .section-heading { flex-direction:column; gap:3px; } .section-heading span { max-width:none; text-align:left; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* ---- Colorful backdrop: drifting posters and soft glows ---- */
.backdrop { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:linear-gradient(180deg,#15294a 0,#0e1a31 52%,#0a1020 100%); }
.glow { position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform; }
.glow-orange { width:42vw; height:42vw; left:-12vw; top:-8vw; background:radial-gradient(circle,rgba(255,138,61,.55),transparent 65%); animation:glow-drift 26s ease-in-out infinite alternate; }
.glow-blue { width:48vw; height:48vw; right:-14vw; top:12vh; background:radial-gradient(circle,rgba(88,174,255,.5),transparent 65%); animation:glow-drift 32s ease-in-out -8s infinite alternate-reverse; }
.glow-purple { width:40vw; height:40vw; left:22vw; bottom:-20vw; background:radial-gradient(circle,rgba(160,107,255,.42),transparent 65%); animation:glow-drift 29s ease-in-out -15s infinite alternate; }
@keyframes glow-drift { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(6vw,4vh,0) scale(1.15); } }
#confetti { position:fixed; inset:0; z-index:60; width:100%; height:100%; pointer-events:none; }

/* ---- Game panel polish ---- */
.game-panel { --cat:var(--orange); border-color:#4d6f94; background:linear-gradient(155deg,rgba(30,50,82,.96),rgba(24,41,67,.97) 55%,rgba(28,38,74,.96)); box-shadow:0 26px 60px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.06),0 0 70px rgba(88,174,255,.08); }
.game-panel::before { width:84px; border-radius:3px; background:var(--cat); box-shadow:0 0 14px var(--cat); transition:background .35s,box-shadow .35s; }
.game-panel[data-category="scenario"] { --cat:#ff8a3d; }
.game-panel[data-category="fact"] { --cat:#58aeff; }
.game-panel[data-category="attribute"] { --cat:#3ddc97; }
.game-panel[data-category="year"] { --cat:#2dd4bf; }
.game-panel[data-category="title"] { --cat:#c084fc; }
.game-panel[data-category="actors"] { --cat:#ff7eb6; }
.game-panel[data-category="characters"] { --cat:#ffd166; }
.game-panel[data-category="crew"] { --cat:#7dd3fc; }
.game-panel[data-category="franchise"] { --cat:#a3e635; }
.game-panel[data-category="studio"] { --cat:#fb7185; }
.progress .current { box-shadow:0 0 10px rgba(255,138,61,.7); }
.progress .done { background:linear-gradient(90deg,#4aa3ec,#7cc4ff); }
.prompt-enter { animation:prompt-in .42s cubic-bezier(.2,.8,.2,1); }
@keyframes prompt-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.timer-track span { background:linear-gradient(90deg,var(--cat),#ffc27a); }
.timer-track.urgent span { background:linear-gradient(90deg,#ff5d5d,#ff9a6b); }
.timer.urgent { animation:timer-pulse 1s ease-in-out infinite; }
@keyframes timer-pulse { 50% { box-shadow:0 0 0 5px rgba(240,100,90,.2); } }
.daily-shell .primary-button { background:linear-gradient(135deg,#ff8a3d,#ffa857); box-shadow:0 8px 22px rgba(255,138,61,.22) !important; transition:transform .16s,box-shadow .16s,filter .16s; }
.daily-shell .primary-button:hover { background:linear-gradient(135deg,#ff9a53,#ffb96e) !important; transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,138,61,.34) !important; }
.daily-shell .primary-button:active { transform:translateY(0); }
.skip-button:hover { transform:translateY(-1px); }
.key-hint-btn::after { content:"↵"; margin-left:10px; padding:1px 7px; border-radius:5px; background:rgba(17,17,17,.16); font-size:.9em; }
@media (hover:none) { .key-hint-btn::after { display:none; } }
.tier-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:4px 0 22px; }
.tier-legend .points-badge { font-size:12px; }

/* ---- Result screen: detail line and what you could have said ---- */
#result-view .result-detail { grid-column:1; margin:10px 0 0; color:var(--earned,#9fd0ff); font-size:15px; font-weight:600; line-height:1.45; }
#result-view .result-examples { grid-column:1 / -1; margin-top:26px; padding-top:20px; border-top:1px solid #3c5675; }
@media (min-width:601px) {
  #result-view .result-detail { grid-row:3; }
  #result-view .score-animation { grid-row:2 / 4; }
  #result-view .score-track { grid-row:4; }
  #result-view .tier-name { grid-row:5; }
  #result-view #next-button { grid-row:5; }
  #result-view .result-examples { grid-row:6; }
}
@media (max-width:600px) { #result-view .result-detail { margin:8px 0 6px; } #result-view .result-examples { margin-top:20px; } }
.examples-heading { margin:0 0 12px; color:#9eb7cc; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
#example-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
#example-list li { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid #38516f; border-radius:9px; background:rgba(20,36,60,.72); animation:answer-reveal .3s ease-out both; animation-delay:calc(var(--i) * 70ms); }
#example-list .example-text { min-width:0; flex:1; font-size:14px; font-weight:600; }
#example-list .example-text small { display:block; margin-top:2px; color:#8da6bb; font-size:12px; font-weight:500; }
#example-list .points-badge { flex:none; }
.round-answer small { margin-left:8px; color:#9db6ca; font-size:12px; font-weight:500; }
@media (max-width:600px) { #example-list li { align-items:flex-start; } }

/* ---- Posters in the side gutters: two tidy columns, crisp, never behind the game ---- */
#poster-drift { position:absolute; inset:0; }
.drift-poster { position:absolute; left:var(--x); top:var(--y); width:min(clamp(88px,8vw,136px),11.5vh); aspect-ratio:2/3; object-fit:cover; border:2px solid rgba(255,255,255,.32); border-radius:9px; box-shadow:0 20px 32px rgba(0,0,0,.5); opacity:.62; transform:rotate(var(--rot)); animation:poster-drift var(--dur) ease-in-out var(--delay) infinite alternate; will-change:transform; }
.drift-poster.size-1 { width:min(clamp(74px,6.6vw,112px),9.5vh); opacity:.44; filter:blur(.7px); }
.drift-poster.size-2 { width:min(clamp(62px,5.4vw,94px),8vh); opacity:.3; filter:blur(1.5px); }
@keyframes poster-drift { from { transform:translateY(0) rotate(var(--rot)); } to { transform:translateY(calc(var(--rise) * -1)) rotate(calc(var(--rot) + var(--sway))); } }
@media (max-width:1000px) { #poster-drift { display:none; } }
@media (prefers-reduced-motion:reduce) { .glow,.drift-poster { animation:none; } }

/* ---- Poster or photo for the answer on the result screen ---- */
#result-view .result-art { display:none; position:relative; width:112px; aspect-ratio:2/3; overflow:hidden; border:2px solid rgba(255,255,255,.28); border-radius:10px; background:#15263d; box-shadow:0 16px 30px rgba(0,0,0,.45); }
#result-view.has-art .result-art { display:block; align-self:start; }
#result-view .result-art.loading::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%); background-size:200% 100%; animation:art-shimmer 1.2s linear infinite; }
@keyframes art-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
.result-art img { display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .35s; }
.result-art:not(.loading) img { opacity:1; }
@media (min-width:601px) {
  #result-view.has-art { grid-template-columns:auto minmax(0,1fr) auto; }
  #result-view.has-art .result-art { grid-column:1; grid-row:2 / 6; margin-right:6px; }
  #result-view.has-art h2,#result-view.has-art .result-detail,#result-view.has-art .tier-name { grid-column:2; }
  #result-view.has-art .score-animation,#result-view.has-art #next-button { grid-column:3; }
  #result-view.has-art .score-track { grid-column:2 / -1; }
}
@media (max-width:600px) { #result-view.has-art .result-art { width:92px; margin:2px 0 14px; } }
#result-detail .bonus-note { display:block; margin-top:6px; color:#ffd89b; font-size:13px; font-weight:600; }