:root{--red:#ec1018;--ink:#111;--muted:#666;--line:#dedede;--display:'Roboto Condensed','Arial Narrow',sans-serif;--body:'Manrope',Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:var(--body);font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:disabled{cursor:default}button,a{touch-action:manipulation}:focus-visible{outline:3px solid #3477ba;outline-offset:5px}#app:focus{outline:none}.skip{position:fixed;top:-70px;left:16px;background:#fff;z-index:10;padding:14px}.skip:focus{top:12px}.icon{width:22px;height:22px;vertical-align:middle;flex-shrink:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:13px 28px;border:1px solid var(--red);border-radius:15px;background:var(--red);color:#fff;font-weight:700;text-decoration:none;transition:background .16s,transform .16s}.button:hover{background:#c90c13}.button .icon{filter:brightness(0) invert(1)}.button.outline{background:white;color:var(--ink)}.button.outline .icon{filter:none}.button.outline:hover{background:#fff0f0}.button.quiet{border-color:var(--line);background:white;color:var(--ink)}.button.quiet:hover{background:#f3f3f3}.button.quiet .icon{filter:none}.home{max-width:1490px;margin:auto;padding:16px 27px 24px}.brand{display:flex;align-items:center;justify-content:center;gap:20px;font-size:20px;font-weight:500;text-decoration:none}.brand:before,.brand:after{content:'';width:62px;height:1px;background:#444}.hero{text-align:center}.hero h1{font-family:var(--display);font-size:clamp(60px,8.5vw,126px);font-weight:900;letter-spacing:-.035em;line-height:1;margin:15px 0 1px;text-transform:uppercase}.hero h1 span{color:var(--red)}.hero p{font-size:clamp(18px,2.15vw,31px);font-weight:500;letter-spacing:-.055em;margin:0 0 24px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mode-card{position:relative;min-height:322px;overflow:hidden;border-radius:14px;border:1px solid #e1e1e1;background:#fafafa;isolation:isolate}.mode-card.dark{background:#111;color:white;border-color:#111}.cover{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;z-index:-1}.card-content{position:relative;display:flex;align-items:flex-start;flex-direction:column;width:59%;height:100%;min-height:322px;padding:26px 0 24px 32px}.mode-card h2{font-family:var(--display);font-size:64px;font-weight:900;letter-spacing:-.035em;line-height:.9;margin:1px 0 16px}.mode-card h2 .small-line{display:block}.mode-card[data-mode="hallucination"] h2{font-size:54px}.mode-card p{font-size:23px;line-height:1.26;letter-spacing:-.035em;margin:0 0 22px;max-width:315px}.mode-card[data-mode="text"] p{font-size:20px}.mode-card .button{margin-top:auto;font-size:23px;min-width:184px;min-height:56px;font-weight:600}.mode-card .button:hover{transform:translateX(3px)}.random-wrap{text-align:center;margin-top:21px}.random-wrap .button{font-size:18px;padding:13px 20px;min-height:58px}.random-wrap .icon{width:32px;height:32px}.principle{display:flex;justify-content:center;align-items:center;gap:20px;margin:21px 0 0;font-size:19px;text-align:center;letter-spacing:-.025em}.principle:before,.principle:after{content:'';height:1px;width:100px;flex-shrink:0;background:#777}.home-stats{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:20px 0 0;font-size:13px;color:var(--muted)}.about{margin:20px auto 0;max-width:720px;font-size:13px;color:#666;text-align:center}.about summary{cursor:pointer;display:inline-block;text-decoration:underline;text-underline-offset:3px}.about p{line-height:1.6}.about a{color:#444}.shell{max-width:1080px;margin:auto;padding:24px 24px 50px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:35px}.brand.small{font-size:14px;gap:10px}.brand.small:before,.brand.small:after{width:24px}.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;color:#555;min-height:44px}.game-heading{text-align:center;font:900 48px/.98 var(--display);letter-spacing:-.03em;margin:0 0 26px}.game-meta{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin-bottom:12px}.game-meta strong{font-size:23px}.progress{height:5px;background:#eee;overflow:hidden;border-radius:3px;margin-bottom:28px}.progress span{display:block;height:100%;background:var(--red)}.question{font:900 32px/1.15 var(--display);margin:0 0 22px;text-align:center}.media-frame{display:flex;align-items:center;justify-content:center;background:#f2f1ee;border:1px solid var(--line);border-radius:16px;overflow:hidden;height:390px;max-width:820px;margin:0 auto 24px}.question-image{width:100%;height:100%;object-fit:contain}.image-error{padding:24px;text-align:center;color:#6d1616}.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:820px;margin:0 auto}.choice{display:flex;align-items:center;justify-content:center;gap:12px;border:2px solid #d4d4d4;border-radius:14px;background:white;color:var(--ink);padding:18px 22px;min-height:70px;font-size:18px;font-weight:700;transition:border-color .15s,background .15s}.choice:not(:disabled):hover{border-color:var(--red);background:#fff7f7}.choice.selected{border-color:var(--red);background:#fff1f1}.choice.correct{border-color:#237444;background:#ecf6ee}.choice.wrong{border-color:var(--red);background:#fff1f1}.choice:disabled{opacity:1}.choice .icon{width:20px;height:20px}.choice.correct .icon{filter:invert(35%) sepia(27%) saturate(1198%) hue-rotate(91deg)}.feedback{max-width:820px;margin:22px auto 0;border:1px solid var(--line);border-left:5px solid var(--red);border-radius:12px;padding:23px;background:#faf9f7}.feedback.good{border-left-color:#237444}.feedback h2{font:900 32px/1.1 var(--display);margin:0 0 12px}.feedback h3{font-size:18px;margin:0 0 9px}.feedback p{line-height:1.6;margin:8px 0;font-size:15px}.sources{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;font-size:14px;margin-top:13px}.sources a{text-decoration-thickness:1px;text-underline-offset:3px;color:#333}.feedback .button{margin-top:19px;min-width:220px}.poem{position:relative;max-width:820px;margin:0 auto 24px;padding:42px 30px;background:#f6f3ed;border:1px solid #e0dad0;border-radius:16px;text-align:center}.poem:before{content:'“';position:absolute;top:10px;left:20px;color:var(--red);font:76px/1 Georgia,serif}.poem blockquote{white-space:pre-line;font:24px/1.8 Georgia,'Times New Roman',serif;margin:0}.answers{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 auto;max-width:1000px}.answer-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:15px;padding:23px;background:#faf9f7}.answer-card h2{font:900 30px/1 var(--display);margin:0 0 16px}.answer-card p{font-size:17px;line-height:1.7;margin:0 0 24px;flex:1}.answer-card .choice{width:100%;font-size:15px;padding:15px 12px;min-height:58px}.instruction{text-align:center;font-size:18px;margin:0 0 22px;font-weight:600}.answers~.feedback{max-width:1000px}.loading,.error-panel{text-align:center;max-width:600px;margin:80px auto}.error-panel h1{font:900 45px/1 var(--display)}.error-panel p{line-height:1.7;margin-bottom:25px}.results{text-align:center;max-width:760px;margin:auto}.results h1{font:900 60px/1 var(--display);letter-spacing:-.03em;margin:0 0 10px}.eyebrow{font-size:14px;color:#666}.result-score{font:900 140px/1 var(--display);letter-spacing:-.06em;margin:25px 0 0}.result-score span{font-size:65px;color:#aaa;letter-spacing:-.035em}.percent{font-size:21px;margin:6px 0 22px}.rank{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;background:#fff0f0;padding:13px 21px;font-weight:700;font-size:20px}.rank .icon{color:var(--red)}.result-note{max-width:530px;margin:26px auto;line-height:1.7;color:#555}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:22px 0;margin:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:13px;color:#666}.result-stats strong{display:block;font:900 32px/1.2 var(--display);color:#111;margin-bottom:5px}.result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.result-actions .button{font-size:15px}.home-link{display:inline-block;margin:22px 0;font-size:14px;text-underline-offset:4px}.storage-note{font-size:12px;color:#666;line-height:1.5;margin-top:20px}.new-best{color:var(--red);font-size:13px;font-weight:700;margin-top:13px}.mini-principle{text-align:center;font-size:12px;color:#777;line-height:1.6;margin-top:32px}.mode-best{position:absolute;right:14px;bottom:12px;font-size:11px;background:#fff;color:#111;padding:5px 8px;border-radius:6px}
@media(min-width:1500px){.home{padding-top:24px}.mode-card,.card-content{min-height:334px}}
@media(max-width:1100px){.home{padding:18px 22px 24px}.hero h1{font-size:9vw}.hero p{font-size:23px}.mode-card,.card-content{min-height:290px}.card-content{padding:25px 0 23px 25px;width:64%}.mode-card h2{font-size:50px}.mode-card[data-mode="hallucination"] h2{font-size:43px}.mode-card p{font-size:19px;max-width:235px}.mode-card[data-mode="text"] p{font-size:17px}.mode-card .button{font-size:19px;min-width:150px}.principle{font-size:15px;gap:14px}.principle:before,.principle:after{width:50px}}
@media(max-width:700px){.home{padding:17px 16px 24px}.brand{font-size:15px;gap:12px}.brand:before,.brand:after{width:32px}.hero h1{font-size:clamp(36px,8.8vw,62px);letter-spacing:-.04em;margin:17px 0 10px}.hero p{font-size:16px;line-height:1.5;margin-bottom:23px;letter-spacing:-.02em}.mode-grid{grid-template-columns:1fr;gap:13px}.mode-card,.card-content{min-height:258px}.card-content{width:63%;padding:25px 0 22px 23px}.mode-card h2{font-size:49px}.mode-card[data-mode="hallucination"] h2{font-size:40px}.mode-card p{font-size:17px;max-width:218px;margin-bottom:20px}.mode-card[data-mode="text"] p{font-size:15px}.mode-card .button{font-size:17px;min-width:143px;min-height:49px;padding:10px 20px}.principle{font-size:13px;line-height:1.6;margin-top:21px;gap:0;padding:0 18px}.principle:before,.principle:after{display:none}.random-wrap .button{font-size:16px}.home-stats{font-size:11px;gap:8px 15px}.shell{padding:14px 16px 28px}.topbar{margin-bottom:24px;gap:10px}.brand.small:before,.brand.small:after{display:none}.brand.small{font-size:12px}.back{font-size:12px}.game-heading{font-size:36px;margin-bottom:22px}.question{font-size:27px}.progress{margin-bottom:23px}.media-frame{height:310px;margin-bottom:18px}.choice{font-size:15px;min-height:64px;padding:14px 10px;gap:7px}.choices{gap:10px}.feedback{padding:19px;margin-top:18px}.feedback h2{font-size:28px}.feedback h3{font-size:16px}.feedback p{font-size:14px}.feedback .button{width:100%;font-size:15px}.poem{padding:38px 14px}.poem blockquote{font-size:19px;line-height:1.9}.answers{grid-template-columns:1fr;gap:13px}.answer-card{padding:21px}.answer-card p{font-size:15px;margin-bottom:18px}.instruction{font-size:16px}.results h1{font-size:48px}.result-score{font-size:116px}.result-score span{font-size:54px}.percent{font-size:18px}.rank{font-size:17px}.result-stats{font-size:11px;gap:9px}.result-stats strong{font-size:28px}.result-actions{flex-direction:column}.result-actions .button{width:100%}.result-note{font-size:14px}}
@media(max-width:375px){.mode-card h2{font-size:43px}.mode-card[data-mode="hallucination"] h2{font-size:36px}.mode-card p{font-size:15px;max-width:185px}.card-content{padding-left:19px}.media-frame{height:255px}.poem blockquote{font-size:17px}.choice{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Keep the collage on the right, leaving the title and description clear. */
.cover{inset:0 0 0 auto;width:82%;object-position:right center}.mode-card[data-mode="hallucination"] .cover{width:70%}.mode-card[data-mode="text"] .cover{width:80%}.card-content{width:63%}.mode-card p{max-width:290px}.mode-card[data-mode="hallucination"] p{max-width:310px}
@media(max-width:1100px){.cover{width:79%}.mode-card[data-mode="hallucination"] .cover{width:65%}.mode-card p{max-width:225px}.mode-card[data-mode="hallucination"] p{max-width:240px}}
@media(max-width:700px){.cover{width:76%}.mode-card[data-mode="text"] .cover{width:74%}.mode-card[data-mode="hallucination"] .cover{width:63%}.mode-card p{max-width:203px}.mode-card[data-mode="hallucination"] p{max-width:210px}}
.mode-card{background:#fff}.mode-card.dark{background:#0b0b0b}
@media(min-width:1101px){.hero h1{margin-top:8px}.hero p{margin-bottom:17px}.mode-card h2{font-size:72px}.mode-card[data-mode="hallucination"] h2{font-size:62px}.mode-card p{font-size:25px;max-width:315px}.mode-card[data-mode="text"] p{font-size:20px}.mode-card[data-mode="hallucination"] p{max-width:340px}.mode-card[data-mode="art"] .cover{width:78%}.mode-card[data-mode="photo"] .cover{width:78%}}
@media(max-width:900px){.mode-grid{grid-template-columns:1fr}.card-content{width:63%}}
@media(max-width:700px){.mode-card,.card-content{min-height:286px}.card-content{width:100%}.mode-card .cover,.mode-card[data-mode="text"] .cover,.mode-card[data-mode="hallucination"] .cover{width:70%;height:50%;top:auto;bottom:0;object-fit:contain;object-position:right bottom}.mode-card p,.mode-card[data-mode="hallucination"] p{max-width:175px}.mode-card h2{max-width:320px}.mode-best{bottom:8px;right:8px}}
@media(min-width:1101px){.mode-card h2{line-height:.85;margin-bottom:12px}.mode-card p{line-height:1.2;margin-bottom:16px}}

/* Brief editorial motion: the content stays still while an answer is read. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.hero{position:relative;isolation:isolate}
.hero-accents{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;user-select:none}
.hero-accents span{position:absolute;display:block}
.accent-ring{left:19px;top:65px;width:28px;height:28px;border:3px solid var(--red);border-radius:50%}
.accent-dot{left:71px;top:117px;width:9px;height:9px;background:var(--ink);border-radius:50%}
.accent-cross{right:33px;top:53px;width:23px;height:23px;color:var(--ink)}
.accent-cross:before,.accent-cross:after{content:'';position:absolute;left:10px;top:0;width:3px;height:23px;background:currentColor}
.accent-cross:after{transform:rotate(90deg)}
.accent-bars{right:68px;top:123px;width:29px;height:14px;background:repeating-linear-gradient(to bottom,var(--red) 0 3px,transparent 3px 7px)}
.button{transition:background 160ms ease,transform 220ms var(--motion-ease),box-shadow 220ms ease}
.button .icon{transition:transform 220ms var(--motion-ease)}
.button:active:not(:disabled){transform:translateY(2px) scale(.97)}
.choice{transition:border-color 160ms ease,background 160ms ease,transform 200ms var(--motion-ease),box-shadow 200ms ease}
.choice:active:not(:disabled){transform:scale(.98)}
.mode-card{transition:transform 300ms var(--motion-ease),box-shadow 300ms ease,border-color 200ms ease}
.cover{transform-origin:85% 65%;transition:transform 650ms var(--motion-ease)}
.mode-card:focus-within{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}
@media(prefers-reduced-motion:no-preference){
 .hero .brand{animation:editorial-enter 500ms var(--motion-ease) backwards}
 .hero h1{animation:editorial-enter 650ms var(--motion-ease) 70ms backwards}
 .hero p{animation:editorial-enter 550ms var(--motion-ease) 140ms backwards}
 .mode-card{animation:card-enter 650ms var(--motion-ease) 180ms backwards}
 .mode-card:nth-child(2){animation-delay:260ms}
 .mode-card:nth-child(3){animation-delay:340ms}
 .mode-card:nth-child(4){animation-delay:420ms}
 .random-wrap{animation:editorial-enter 500ms var(--motion-ease) 500ms backwards}
 .principle{animation:editorial-enter 500ms var(--motion-ease) 570ms backwards}
 .accent-ring{animation:accent-drift 2200ms ease-in-out 2}
 .accent-dot{animation:accent-drift 2100ms ease-in-out 2 reverse}
 .accent-cross{animation:accent-turn 4000ms var(--motion-ease)}
 .accent-bars{animation:accent-drift 1900ms ease-in-out 2 reverse}
 .round-enter .question,.round-enter .media-frame,.round-enter .poem,.round-enter .answers{animation:editorial-enter 350ms var(--motion-ease) backwards}
 .round-enter .choices{animation:editorial-enter 350ms var(--motion-ease) 60ms backwards}
 .feedback{animation:feedback-enter 300ms var(--motion-ease) backwards}
 .choice:disabled .icon{animation:answer-mark 350ms var(--motion-ease)}
 .result-score{animation:result-enter 650ms var(--motion-ease) backwards}
 .rank{animation:editorial-enter 500ms var(--motion-ease) 150ms backwards}
 .new-best{animation:editorial-enter 500ms var(--motion-ease) 230ms backwards}
 @media(hover:hover) and (pointer:fine){
  .mode-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgb(0 0 0 / .12);border-color:var(--red)}
  .mode-card:hover .cover,.mode-card:focus-within .cover{transform:translate(3px,-2px) scale(1.025)}
  .button:hover:not(:disabled){box-shadow:0 5px 14px rgb(236 16 24 / .18)}
  .button:hover .icon{transform:translateX(3px)}
  .random-wrap .button:hover .icon{transform:rotate(-14deg)}
  .choice:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 0 0 / .06)}
 }
}
@keyframes editorial-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes feedback-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes answer-mark{0%{transform:scale(.6)}65%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes result-enter{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes accent-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes accent-turn{0%{opacity:0;transform:rotate(-90deg) scale(.7)}30%{opacity:1}100%{opacity:1;transform:rotate(0) scale(1)}}
@media(max-width:1100px){.accent-ring{left:4px;top:46px;width:21px;height:21px}.accent-dot{left:19px;top:106px}.accent-cross{right:2px;top:47px;width:18px;height:18px}.accent-cross:before,.accent-cross:after{height:18px}.accent-bars{right:22px;top:107px}}
@media(max-width:900px){.hero-accents{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.mode-card .button:hover{transform:none}}

/* One reusable paper dossier; topic images are static and shared. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dossier{max-width:1440px;padding:19px 28px 27px}
.dossier-header{display:grid;grid-template-columns:195px 1fr 195px;align-items:center;gap:18px;margin-bottom:18px}
.dossier-header .game-heading{font-size:clamp(25px,3.25vw,46px);margin:0;white-space:nowrap}
.dossier-header .brand{justify-self:end;white-space:nowrap}
.dossier-steps{list-style:none;display:flex;justify-content:center;gap:8px;margin:10px 0 0;padding:0}
.dossier-steps li{display:flex;justify-content:center;align-items:center;min-width:34px;height:34px;background:#eeece8;border-radius:5px;font-size:16px}
.dossier-steps .done{background:#f9dbd8}
.dossier-steps [aria-current]{background:var(--red);color:#fff;font-weight:700}
.dossier .game-meta{margin:-4px 7px 10px;font-size:16px}
.dossier .game-meta strong{font-size:28px}
.dossier .progress{margin:0 7px 24px}
.dossier-sheet{position:relative;border:10px solid transparent;border-image:url('../assets/ui/dossier/paper-sheet.webp') 185 fill / 62px / 0 stretch}
.dossier-question{padding:20px 185px 20px 58px;min-height:258px;margin:0 0 18px}
.dossier-question:before{content:'';position:absolute;left:14px;top:18px;bottom:18px;width:7px;background:var(--red)}
.dossier .question{font-size:clamp(35px,5.85vw,82px);line-height:1.03;letter-spacing:-.03em;text-align:left;margin:0 0 16px;position:relative;z-index:1}
.dossier .instruction{font-size:23px;text-align:left;margin:0;font-weight:500;position:relative;z-index:1}
.dossier-corner{position:absolute;right:14px;top:13px;width:142px;height:184px;object-fit:contain;transform:rotate(7deg);pointer-events:none}
.dossier-workspace{display:grid;grid-template-columns:minmax(270px,.55fr) minmax(0,1fr);gap:22px;align-items:start}
.dossier-art{position:relative;height:580px;isolation:isolate;pointer-events:none}
.dossier-foreground{display:block;position:relative;width:100%;height:100%;object-fit:contain;object-position:top left;z-index:1}
.dossier-portrait{position:absolute;top:4px;right:0;width:62%;height:auto;transform:rotate(2deg);z-index:0}
.dossier-number{position:absolute;left:8%;bottom:6%;font:900 clamp(90px,10vw,145px)/.9 var(--display);letter-spacing:-.07em;z-index:2}
.dossier .answers{display:flex;flex-direction:column;gap:19px;max-width:none}
.dossier .answer-card{display:grid;grid-template-columns:126px minmax(0,1fr);gap:22px 23px;border-radius:0;background:none;padding:29px 30px 25px 28px;min-height:264px}
.dossier .answer-card h3{grid-column:1;grid-row:1;font:900 124px/.93 var(--display);margin:0;padding-right:12px;border-right:1px solid #aaa;align-self:start}
.dossier .answer-card p{grid-column:2;grid-row:1;font-size:23px;line-height:1.6;margin:0;align-self:center}
.answer-action{grid-column:1 / -1}
.dossier .choice{width:100%;background:var(--red);color:#fff;border:0;border-radius:8px;min-height:66px;font:900 28px/1.2 var(--display);padding:15px 24px;justify-content:center;gap:12px}
.dossier .choice span{flex:1}
.dossier .choice .icon{filter:brightness(0) invert(1)}
.dossier .choice:not(:disabled):hover{background:#ca1017;color:#fff}
.dossier .choice.correct{background:#236e44;color:#fff}
.dossier .choice.wrong{background:#b10c13;color:#fff}
.dossier .choice:disabled:not(.correct):not(.wrong){background:#d5cfca;color:#35312e}
.dossier .choice:disabled:not(.correct):not(.wrong) .icon{filter:none}
.dossier .feedback{max-width:none;margin-top:23px}
.dossier .feedback h2{font-size:36px}
.dossier-principle{font-size:14px;display:flex;align-items:center;justify-content:center;gap:24px;margin:16px 0 0;line-height:1.6}
.dossier-principle:before,.dossier-principle:after{content:'';height:1px;background:#8b8984;flex:1;max-width:260px}
@media(max-width:1100px){
 .dossier-header{grid-template-columns:155px 1fr 155px;gap:10px}
 .dossier-header .brand:before,.dossier-header .brand:after{display:none}
 .dossier-question{padding-left:34px;padding-right:150px;min-height:225px}
 .dossier-corner{width:115px;height:150px}
 .dossier-workspace{grid-template-columns:minmax(220px,.46fr) minmax(0,1fr);gap:13px}
 .dossier-art{min-height:500px}
 .dossier .answer-card{grid-template-columns:72px minmax(0,1fr);padding:26px 22px 22px;gap:18px 15px;min-height:260px}
 .dossier .answer-card h3{font-size:85px}
 .dossier .answer-card p{font-size:18px}
 .dossier .choice{font-size:18px;padding:14px 18px}
}
@media(max-width:800px){
 .dossier{padding:16px 18px 28px}
 .dossier-header{grid-template-columns:1fr 1fr;row-gap:16px}
 .dossier-header .game-heading{grid-column:1 / -1;grid-row:2;white-space:normal;font-size:37px}
 .dossier-header .brand{grid-column:2;grid-row:1}
 .dossier-steps{gap:6px;margin:14px 0 17px}
 .dossier-steps li{min-width:29px;height:30px;font-size:14px}
 .dossier-workspace{grid-template-columns:1fr}
 .dossier-art{display:none}
 .dossier .answer-card{grid-template-columns:75px minmax(0,1fr);min-height:230px;padding:27px 24px 22px}
 .dossier .answer-card p{font-size:19px}
 .dossier-question{padding:23px 130px 25px 28px;min-height:215px}
 .dossier .instruction{font-size:18px}
 .dossier .question{font-size:42px}
}
@media(max-width:480px){
 .dossier{padding:12px 11px 24px}
 .dossier-header .game-heading{font-size:31px}
 .dossier-header .back{font-size:13px}
 .dossier-header .brand{font-size:13px}
 .dossier .game-meta{font-size:14px}
 .dossier-steps{gap:4px}
 .dossier-steps li{min-width:0;max-width:26px;flex:1;height:28px}
 .dossier .progress{margin-bottom:16px}
 .dossier-question{padding:22px 19px 22px 22px;min-height:0}
 .dossier-question:before{left:5px;width:4px;top:12px;bottom:12px}
 .dossier-corner{position:relative;float:right;right:-6px;top:0;width:82px;height:102px;margin:0 0 8px 8px;opacity:.85}
 .dossier .question{font-size:31px;line-height:1.08;margin-bottom:15px}
 .dossier .instruction{font-size:16px;clear:both}
 .dossier .answer-card{grid-template-columns:48px minmax(0,1fr);gap:17px 13px;padding:26px 19px 20px 14px;min-height:0}
 .dossier .answer-card h3{font-size:60px;padding-right:8px}
 .dossier .answer-card p{font-size:16px;line-height:1.6}
 .dossier .choice{min-height:60px;font-size:16px;padding:14px 14px}
 .dossier .feedback{padding:19px 17px}
 .dossier .feedback h2{font-size:30px}
 .dossier .feedback h3{font-size:17px}
 .dossier-principle{font-size:12px;gap:10px;margin-top:20px}
 .dossier-principle:before,.dossier-principle:after{max-width:25px}
}

/* Inspect the same local image, then return to the current question. */
button.media-frame{position:relative;width:100%;padding:0;color:var(--ink);cursor:zoom-in}
.image-enlarge-hint{position:absolute;right:12px;bottom:12px;padding:7px 12px;background:#fff;border:1px solid #bbb;border-radius:8px;font-size:14px;font-weight:700;box-shadow:0 2px 8px rgb(0 0 0 / .12)}
button.media-frame:hover .image-enlarge-hint{border-color:var(--red);color:var(--red)}
.image-viewer{width:min(94vw,1200px);max-width:94vw;max-height:94dvh;padding:20px;border:1px solid #444;border-radius:14px;background:#fff;color:var(--ink)}
.image-viewer::backdrop{background:rgb(0 0 0 / .8)}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}
.viewer-toolbar h2{font:900 28px/1.15 var(--display);margin:0}
.viewer-actions{display:flex;gap:10px;flex-shrink:0}
.viewer-actions .button{min-height:46px;font-size:16px;padding:10px 18px;border-radius:9px}
.viewer-media{max-height:calc(94dvh - 155px);overflow:auto;overscroll-behavior:contain;background:#111;border-radius:8px;padding:8px}
.viewer-media img{display:block;max-width:100%;max-height:calc(94dvh - 175px);width:auto;height:auto;margin:auto}
.full-size .viewer-media img{max-width:none;max-height:none}
.image-viewer>p{margin:12px 0 0;font-size:14px;line-height:1.5;color:#555}

/* A completed party keeps its mistakes available for reading. */
.mistake-review{margin:25px 0;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff}
.mistake-review>summary{padding:17px 20px;cursor:pointer;font-size:18px;font-weight:800;min-height:56px}
.mistake-review>summary span{display:inline-block;padding:1px 9px;margin-left:6px;border-radius:6px;background:#fff0f0;color:#b10c13}
.review-intro{padding:0 20px;font-size:16px;color:#555}
.review-list{list-style:none;padding:0 20px 20px;margin:0}
.review-list>li+li{margin-top:20px}
.review-item{padding:20px;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:9px;background:#faf9f7}
.review-number{margin:0 0 8px!important;color:#555;font-size:14px!important}
.review-item h2{font:900 26px/1.2 var(--display);margin:0 0 16px}
.review-item h3{font-size:18px;margin:16px 0 8px}
.review-item p{font-size:16px;line-height:1.6;margin:8px 0}
.review-media{max-width:300px;height:190px;margin:0 0 16px}
.review-media .image-enlarge-hint{font-size:14px;right:8px;bottom:8px}
.review-verdict{padding:8px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;margin:16px 0}
.review-selected{color:#9b1118}
.review-correct{color:#185b35}
.review-poem{white-space:pre-line;font:18px/1.8 Georgia,serif;margin:16px 0}
.review-answers{padding:0 0 4px}
.review-answers p{padding:12px;background:#fff;border:1px solid #ddd;border-radius:8px}
.perfect-note{padding:16px;border:1px solid #b4d5bd;border-radius:10px;font-size:16px;background:#ecf6ee;color:#185b35;margin:24px 0}
.feedback p{font-size:1rem}

/* Keep both paper answers close enough to compare on shorter screens. */
.dossier-header{margin-bottom:10px}
.dossier-steps{margin:4px 0 2px;gap:6px}
.dossier-steps li{height:28px;min-width:28px;font-size:14px}
.dossier .game-meta{margin:4px 7px 8px}
.dossier .game-meta strong{font-size:24px}
.dossier .progress{margin-bottom:14px}
.dossier-question{min-height:0;padding:14px 145px 14px 36px;margin-bottom:12px}
.dossier .question{font-size:clamp(32px,4vw,56px);line-height:1.08;margin-bottom:10px}
.dossier .instruction{font-size:19px;line-height:1.45}
.dossier-corner{width:106px;height:132px;top:8px}
.dossier-workspace{grid-template-columns:minmax(230px,.42fr) minmax(0,1fr);gap:18px}
.dossier-art{height:440px;min-height:0}
.dossier .answers{gap:12px}
.dossier .answer-card{min-height:0;grid-template-columns:72px minmax(0,1fr);padding:18px 22px 16px;gap:14px 18px}
.dossier .answer-card h3{font-size:84px}
.dossier .answer-card p{font-size:19px;line-height:1.5}
.dossier .choice{min-height:54px;font-size:22px;padding:12px 18px}
.dossier .feedback{margin-top:16px}
.dossier-principle{margin-top:12px}
@media(min-width:801px) and (max-height:850px){
 .dossier-steps{display:none}
 .dossier-art{height:380px}
 .dossier .question{font-size:clamp(30px,3.5vw,48px)}
}
@media(max-width:1100px){
 .dossier-workspace{grid-template-columns:minmax(195px,.35fr) minmax(0,1fr);gap:12px}
 .dossier .answer-card{grid-template-columns:55px minmax(0,1fr);padding:17px 18px 15px;gap:12px 14px}
 .dossier .answer-card h3{font-size:68px}
 .dossier .answer-card p{font-size:18px}
 .dossier .choice{font-size:19px}
}
@media(max-width:800px){
 .dossier-header{row-gap:8px}
 .dossier-steps{display:none}
 .dossier-workspace{grid-template-columns:1fr}
 .dossier-question{padding:14px 125px 14px 26px}
 .dossier .question{font-size:36px}
 .dossier .answer-card{grid-template-columns:48px minmax(0,1fr);padding:15px 18px 13px}
 .dossier .answer-card h3{font-size:60px}
 .dossier .answer-card p{font-size:17px}
 .viewer-toolbar{flex-wrap:wrap;gap:12px}
 .viewer-toolbar h2{font-size:22px}
 .viewer-actions{width:100%;justify-content:flex-end}
 .viewer-media{max-height:calc(94dvh - 220px)}
 .viewer-media img{max-height:calc(94dvh - 240px)}
 .full-size .viewer-media img{max-height:none}
}
@media(max-width:480px){
 .dossier{padding:10px 10px 18px}
 .dossier-header .game-heading{font-size:clamp(25px,7.8vw,31px)}
 .dossier .game-meta{margin:0 5px 6px}
 .dossier .progress{margin:0 5px 10px}
 .dossier-question{padding:12px 15px 12px 18px;margin-bottom:10px}
 .dossier-corner{width:60px;height:76px;margin:0 0 4px 8px;top:0;right:0}
 .dossier .question{font-size:29px;margin-bottom:8px}
 .dossier .instruction{font-size:16px}
 .dossier .answers{gap:10px}
 .dossier .answer-card{grid-template-columns:36px minmax(0,1fr);padding:13px 13px 12px;gap:12px 10px}
 .dossier .answer-card h3{font-size:47px;padding-right:6px}
 .dossier .answer-card p{font-size:16px;line-height:1.5}
 .dossier .choice{font-size:16px;min-height:48px;padding:11px 12px}
 .dossier .feedback{padding:16px}
 .dossier-principle{margin-top:12px}
 .image-viewer{width:96vw;max-width:96vw;padding:12px}
 .viewer-actions .button{font-size:14px;padding:10px 12px}
 .image-viewer>p{font-size:14px}
 .review-list{padding:0 12px 12px}
 .review-intro{padding:0 12px}
 .review-item{padding:15px}
 .mistake-review>summary{padding:16px 14px;font-size:17px}
}

.difficulty{border:0;margin:8px auto 30px;padding:0;text-align:center}.difficulty legend{margin:auto auto 12px;font-weight:700}.difficulty label{display:inline-flex;position:relative;margin:0 4px;cursor:pointer}.difficulty input{position:absolute;opacity:0}.difficulty span{display:block;border:2px solid #111;padding:10px 28px;font-weight:700;background:#fff}.difficulty input:checked+span{background:#ed1118;color:#fff;border-color:#ed1118}.difficulty input:focus-visible+span{outline:3px solid #111;outline-offset:4px}.difficulty p{font-size:14px;line-height:1.6;margin:14px 0 0}.level-label{font-size:14px;font-weight:700;color:#ed1118;margin:0 0 12px}.dossier .level-label{margin-bottom:8px}

/* Shared museum setting; the painting itself stays uncropped and local. */
body.gallery-active{background:#0b0b0b;color:#fff}.art-gallery{min-height:100dvh;padding:24px 28px 70px;background:#0b0b0b url('../assets/ui/art-gallery/gallery-backdrop.webp') center top/100% 100% no-repeat}.gallery-content{max-width:1440px;margin:auto}.gallery-topbar{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;margin-bottom:20px}.gallery-topbar .brand{grid-column:2;justify-self:center;white-space:nowrap;font-size:20px;gap:20px}.gallery-topbar .brand:before,.gallery-topbar .brand:after{background:#aaa;width:60px}.gallery-topbar .back{font-size:18px;color:#fff}.gallery-topbar .back .icon{filter:invert(1)}.gallery-title{text-align:center;font:900 clamp(45px,6.7vw,108px)/.96 var(--display);text-transform:uppercase;margin:0 0 24px;letter-spacing:-.025em}.gallery-title span{color:var(--red)}.gallery-meta{display:flex;justify-content:center;gap:0;margin:0 auto 23px}.gallery-meta>div{padding:0 30px;text-align:center}.gallery-meta>div+div{border-left:1px solid #888}.gallery-meta strong{font-size:24px;line-height:1.3;color:var(--red);white-space:nowrap}.gallery-meta strong span{color:#fff}.gallery-meta small{display:block;font-size:15px;color:#bbb;margin-top:7px}.gallery-question{max-width:840px;width:62%;margin:auto}.art-gallery button.gallery-frame{height:auto;aspect-ratio:1.82;width:100%;max-width:none;display:block;border:0;border-radius:0;background:#111 url('../assets/ui/art-gallery/frame.webp') center/108% 128% no-repeat;margin:0;overflow:hidden;position:relative}.gallery-frame .question-image{position:absolute;inset:7.6% 4.7%;height:84.8%;width:90.6%;max-height:none;object-fit:contain;background:#10100f;border-radius:0}.gallery-frame:focus-visible{outline:3px solid #fff;outline-offset:5px}.gallery-enlarge{display:block;border:0;background:none;color:#ddd;font:500 17px/1.5 var(--body);margin:14px auto 13px;padding:2px 12px;cursor:zoom-in;text-decoration:underline;text-underline-offset:4px}.gallery-enlarge:hover{color:#fff}.art-gallery .question{font:700 clamp(23px,2.55vw,36px)/1.3 var(--body);text-align:center;margin:0 0 18px}.art-gallery .choices{max-width:none;gap:28px}.art-gallery .choice{border:0;border-radius:9px;background:var(--red);color:#fff;font:600 24px/1.25 var(--body);min-height:64px;padding:14px 18px;justify-content:center}.art-gallery .choice:not(:disabled):hover{background:#c90912;color:#fff}.art-gallery .choice.correct{background:#236e44;color:#fff}.art-gallery .choice.wrong{background:#a60c15;color:#fff}.art-gallery .choice:disabled:not(.correct):not(.wrong){background:#444;color:#ddd}.art-gallery .choice .icon{filter:invert(1)}.art-gallery .mini-principle{font-size:15px;color:#ccc;margin:28px auto 0}.art-gallery .feedback{color:#111;text-align:left;margin-top:22px}.art-gallery .image-error{color:#fff;padding:40px}
@media(min-width:1500px){.art-gallery{background-size:100% 100%;padding-top:28px}.gallery-question{width:65%;max-width:1040px}.gallery-title{font-size:110px}.gallery-meta{margin-bottom:28px}}
@media(max-width:1000px){.gallery-topbar .brand:before,.gallery-topbar .brand:after{display:none}.gallery-topbar .brand{font-size:16px}.gallery-topbar .back{font-size:15px}.gallery-question{width:74%}.gallery-title{font-size:8vw}.gallery-meta>div{padding:0 20px}.gallery-meta strong{font-size:20px}.art-gallery .choice{font-size:19px}.art-gallery .choices{gap:16px}}
@media(max-width:700px){.art-gallery{padding:18px 14px 35px;background-size:auto 100dvh;background-position:center top}.gallery-topbar{grid-template-columns:1fr 1fr;margin-bottom:26px;gap:8px}.gallery-topbar .brand{grid-column:2;font-size:12px;justify-self:end}.gallery-topbar .back{font-size:13px}.gallery-title{font-size:clamp(36px,8.7vw,57px);line-height:1.02;margin-bottom:20px}.gallery-meta{margin-bottom:20px}.gallery-meta>div{padding:0 13px}.gallery-meta strong{font-size:16px}.gallery-meta small{font-size:11px;margin-top:5px}.gallery-question{width:100%}.art-gallery .question{font-size:22px;margin-bottom:16px}.gallery-enlarge{font-size:14px;margin:12px auto}.art-gallery .choices{gap:10px}.art-gallery .choice{font-size:15px;min-height:60px;padding:12px 10px}.art-gallery .mini-principle{font-size:12px;line-height:1.5;margin-top:22px}.art-gallery .feedback h2{font-size:28px}.gallery-frame .question-image{object-fit:contain}}
@media(min-width:1001px) and (max-height:1000px){.art-gallery{padding-bottom:30px}.gallery-topbar{margin-bottom:16px}.gallery-title{font-size:6vw;margin-bottom:18px}.gallery-enlarge{margin:10px auto}.art-gallery .question{font-size:28px;margin-bottom:16px}.art-gallery .mini-principle{margin-top:20px}}

/* Reusable photographic laboratory; the paper follows the actual image ratio. */
body.darkroom-active{background:#090909;color:#fff}
.photo-darkroom{--print-height:min(51dvh,540px);min-height:100dvh;padding:24px 28px 32px;background:#090909 url('../assets/ui/photo-darkroom/backdrop.webp') center top/100% 100% no-repeat}
.darkroom-content{max-width:1440px;margin:auto}
.darkroom-topbar{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;margin-bottom:22px}
.darkroom-topbar .brand{grid-column:2;justify-self:center;white-space:nowrap;font-size:19px;gap:18px}
.darkroom-topbar .brand:before,.darkroom-topbar .brand:after{width:50px;background:#999}
.darkroom-topbar .back{font-size:17px;color:#fff}
.darkroom-topbar .back .icon{filter:invert(1)}
.darkroom-title{text-align:center;font:900 clamp(46px,6.7vw,108px)/1 var(--display);margin:0 0 22px;letter-spacing:-.025em}
.darkroom-title span{color:var(--red)}
.darkroom-title br{display:none}
.darkroom-meta{display:flex;justify-content:center;align-items:center;margin:0 auto 44px}
.darkroom-meta strong{font-size:23px;line-height:1.4;font-weight:700;padding:0 28px;white-space:nowrap}
.darkroom-meta strong+strong{border-left:1px solid #777}
.darkroom-meta strong span{color:#c4c4c4;font-weight:500}
.darkroom-meta strong:nth-child(2){color:var(--red)}
.darkroom-question{width:74%;max-width:1000px;margin:auto;text-align:center}
.darkroom-stage{width:100%;margin:auto}
.photo-darkroom button.darkroom-print{display:block;width:fit-content;max-width:100%;height:auto;padding:10px;border:0;border-radius:0;overflow:visible;margin:auto;background:#f3f3f1 url('../assets/ui/dossier/paper-sheet.webp') center/cover;color:#111}
.darkroom-print .question-image{display:block;position:static;width:auto;height:auto;max-height:var(--print-height);max-width:min(980px,calc(74vw - 64px));object-fit:contain;border-radius:0}
.darkroom-clip{position:absolute;top:-47px;width:40px;height:60px;pointer-events:none;z-index:1}
.darkroom-clip.clip-left{left:12%}.darkroom-clip.clip-right{right:12%}
.darkroom-print:focus-visible{outline:3px solid #fff;outline-offset:6px}
.darkroom-enlarge{display:block;margin:12px auto 13px;padding:2px 12px;border:0;background:none;color:#ccc;cursor:zoom-in;font:500 16px/1.5 var(--body);text-decoration:underline;text-underline-offset:4px}
.darkroom-enlarge:hover{color:#fff}
.photo-darkroom .question{font:900 clamp(28px,3.15vw,46px)/1.15 var(--display);margin:0 0 18px;text-align:center}
.photo-darkroom .choices{max-width:800px;margin:auto;gap:22px}
.photo-darkroom .choice{background:var(--red);border:0;border-radius:8px;color:#fff;min-height:62px;padding:13px 20px;justify-content:center;font:800 26px/1.2 var(--display)}
.photo-darkroom .choice:not(:disabled):hover{background:#c90912;color:#fff}
.photo-darkroom .choice.correct{background:#236e44;color:#fff}
.photo-darkroom .choice.wrong{background:#a60c15;color:#fff}
.photo-darkroom .choice:disabled:not(.correct):not(.wrong){background:#444;color:#ddd}
.photo-darkroom .choice .icon{filter:invert(1)}
.photo-darkroom .feedback{color:#111;text-align:left;margin-top:22px}
.photo-darkroom .mini-principle{font-size:14px;line-height:1.5;color:#bbb;margin:24px auto 0;text-align:center}
.photo-darkroom .image-error{font-size:18px;line-height:1.5;padding:30px;color:#111;max-width:500px}
@media(min-width:1001px) and (max-height:1000px){.photo-darkroom{--print-height:min(46dvh,430px)}.darkroom-topbar{margin-bottom:14px}.darkroom-title{font-size:6.1vw;margin-bottom:16px}.darkroom-meta{margin-bottom:36px}.photo-darkroom .question{font-size:36px}.photo-darkroom .mini-principle{margin-top:20px}}
@media(max-width:1000px){.darkroom-topbar .brand:before,.darkroom-topbar .brand:after{display:none}.darkroom-topbar .brand{font-size:16px}.darkroom-topbar .back{font-size:15px}.darkroom-title{font-size:7.2vw}.darkroom-meta strong{font-size:20px;padding:0 20px}.darkroom-question{width:78%}.darkroom-print .question-image{max-width:calc(78vw - 64px)}.photo-darkroom .choice{font-size:23px}}
@media(max-width:700px){.photo-darkroom{--print-height:min(39dvh,340px);padding:18px 16px 22px;background-image:url('../assets/ui/photo-darkroom/mobile-backdrop.webp');background-size:100% auto}.darkroom-topbar{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.darkroom-topbar .back{font-size:13px}.darkroom-topbar .brand{font-size:12px;grid-column:2;justify-self:end}.darkroom-title{font-size:clamp(36px,11.3vw,50px);line-height:1;margin-bottom:18px}.darkroom-title br{display:block}.darkroom-meta{margin-bottom:36px}.darkroom-meta strong{font-size:14px;padding:0 12px}.darkroom-question{width:100%}.photo-darkroom button.darkroom-print{padding:7px}.darkroom-print .question-image{max-width:calc(100vw - 46px)}.darkroom-clip{width:32px;height:48px;top:-37px}.darkroom-enlarge{font-size:14px;margin:8px auto}.photo-darkroom .question{font-size:26px;line-height:1.08;margin-bottom:14px}.photo-darkroom .choices{grid-template-columns:1fr;gap:10px;max-width:300px;width:86%}.photo-darkroom .choice{font-size:23px;min-height:50px;padding:11px 18px}.photo-darkroom .mini-principle{font-size:12px;line-height:1.5;max-width:285px;margin-top:20px}.photo-darkroom .feedback h2{font-size:28px}}

@media(max-width:360px){.darkroom-meta strong{font-size:13px;padding:0 8px}}

/* Three difficulty options fit in one row on narrow phones. */
@media(max-width:480px){.difficulty label{margin:0 2px}.difficulty span{font-size:14px;padding:10px 14px}}