@font-face{font-family:Lexend;src:url("assets/fonts/LexendDeca-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Lexend;src:url("assets/fonts/LexendDeca-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  color-scheme:light;
  font-family:Lexend,Arial,sans-serif;
  --ink:#142c33;
  --muted:#4b6264;
  --teal:#155e57;
  --line:#cbd8d2;
  --wash:#edf3ef;
  --paper:#fff;
  --focus:#a44200;
  --radius:1.25rem;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--wash);color:var(--ink);line-height:1.5}
img{display:block;max-width:100%}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
p,h1,h2,dl,dd{margin:0}
.site-header{min-height:4.5rem;padding:.8rem max(1.25rem,calc((100% - 67rem)/2));display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:var(--ink);color:#fff}
.site-brand{display:flex;align-items:center;gap:.65rem;font-size:.95rem;font-weight:700}
.brand-icon{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.6rem;background:#fff;flex:none}
.brand-icon img{object-fit:contain}
.header-label{font-size:.8rem;color:#e6f4ef;white-space:nowrap}
.shell{width:min(100% - 2.5rem,67rem);margin:clamp(1.5rem,5vw,4rem) auto;flex:1}
.site-footer{margin-top:auto;text-align:center;padding:.9rem 1rem 1.3rem;font-size:.78rem;color:var(--muted)}
.start-layout{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(1rem,4vw,3rem);align-items:center}
.intro-panel{min-width:0}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--teal)}
.intro-panel h1{font-size:clamp(2.1rem,5.5vw,4rem);line-height:1.08;letter-spacing:-.055em;margin:.45rem 0 .8rem}
.intro-copy{color:var(--muted);max-width:45ch;font-size:clamp(.96rem,2vw,1.12rem)}
.cover{margin-top:1.35rem;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}
.start-card,.question-card,.results-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 35px #153b3210}
.start-card{padding:clamp(1.3rem,3.8vw,2rem)}
.start-card h2{font-size:1.55rem;line-height:1.2;margin-bottom:1.05rem}
.start-card>p{font-size:.92rem;color:var(--muted)}
.game-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;margin-bottom:1.05rem;padding:.8rem .6rem;border-radius:.8rem;background:#edf5f0;text-align:center}
.game-facts dt{font-size:.67rem;color:var(--muted)}
.game-facts dd{font-size:.86rem;font-weight:700;white-space:nowrap}
form{display:grid;gap:.55rem;margin:1.15rem 0 .8rem}
label{font-size:.9rem;font-weight:700}
input{width:100%;min-height:3rem;padding:.65rem .8rem;color:var(--ink);background:#fff;border:1px solid #8ba29b;border-radius:.65rem}
input::placeholder{color:#5e7273}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.9rem;padding:.55rem 1.1rem;border:1px solid transparent;border-radius:.65rem;font-size:.9rem;font-weight:700;line-height:1.3}
.button.primary{background:var(--teal);color:#fff}
.button.primary:hover{background:#104b45}
.button.secondary{background:#fff;color:var(--teal);border-color:#7eaaa2}
.button.secondary:hover{background:#e3efe9}
.start-button{margin-top:.3rem;justify-content:space-between}
.print-note,.start-card .print-note{font-size:.79rem;color:var(--muted)}
.question-layout,.results-layout{width:min(100%,52rem);margin:0 auto}
.question-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.8rem}
.question-number{font-size:.9rem;font-weight:700}
progress{display:block;appearance:none;width:clamp(8rem,38vw,15rem);height:.38rem;margin-top:.35rem;border:0;border-radius:1rem;background:#cbded5;overflow:hidden}
progress::-webkit-progress-bar{background:#cbded5}
progress::-webkit-progress-value{background:var(--teal)}
progress::-moz-progress-bar{background:var(--teal)}
.timer{display:flex;align-items:baseline;gap:.25rem;justify-content:center;min-width:5.3rem;padding:.35rem .55rem;background:#dcebe2;border:1px solid #a6c4b5;border-radius:.65rem;font-variant-numeric:tabular-nums}
.timer #seconds{font-size:1.45rem;font-weight:700;line-height:1.25}
.timer-unit{font-size:.72rem}
.timer.urgent{color:#811c27;background:#fde9eb;border-color:#cb7981}
.question-card{overflow:hidden}
.question-photo{aspect-ratio:4/1;background:#dce8e0;overflow:hidden}
.question-photo img{width:100%;height:100%;object-fit:cover;object-position:center 29%}
.question-body{padding:clamp(1rem,3vw,1.65rem)}
.question-body h1{font-size:clamp(1.14rem,2.5vw,1.6rem);line-height:1.35;margin-bottom:1rem;letter-spacing:-.025em}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.choice{display:flex;align-items:center;gap:.65rem;min-height:3.55rem;padding:.55rem .7rem;border:1px solid #9eb5aa;border-radius:.75rem;color:var(--ink);background:#f8fbf9;text-align:left;line-height:1.35;font-size:.91rem}
.choice:not(:disabled):hover{background:#e7f3ec;border-color:var(--teal)}
.choice:disabled{cursor:default}
.choice-letter{flex:none;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:.45rem;background:#dfece4;color:#264b43;font-size:.8rem;font-weight:700}
.choice.is-correct{background:#def2e5;border:2px solid #367850;color:#164d2e}
.choice.is-incorrect{background:#fae9eb;border:2px solid #a7515b;color:#7b2630}
.choice.is-correct .choice-letter{background:#216542;color:#fff}
.choice.is-incorrect .choice-letter{background:#92313c;color:#fff}
.question-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.65rem;margin-top:.95rem;min-height:1.5rem}
.feedback{max-width:65ch;font-size:.86rem;color:var(--muted)}
.results-layout{max-width:45rem}
.results-header{padding:1.4rem 1.5rem 1.15rem;border-bottom:1px solid var(--line)}
.results-header h1{font-size:clamp(1.5rem,4vw,2.3rem);line-height:1.15;margin-top:.35rem;letter-spacing:-.045em}
.results-body{padding:1.2rem 1.5rem 1.5rem}
.result-identity{display:grid;grid-template-columns:1.3fr 1fr;gap:1rem;margin-bottom:1.1rem}
.result-identity time,.result-identity #result-time{display:block}
.result-label{font-size:.75rem;color:var(--muted);margin-bottom:.25rem}
.result-name{font-size:1.15rem;font-weight:700;overflow-wrap:anywhere}
.scores{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:.65rem}
.scores>div{min-width:0;display:grid;align-content:center;min-height:5.6rem;text-align:center;background:#edf4ef;border-radius:.65rem;padding:.45rem .25rem}
.scores .score-main{background:#d7ebe0}
.scores dt{font-size:.72rem;color:var(--muted)}
.scores dd{font-size:clamp(1.2rem,4vw,2.1rem);font-weight:700;line-height:1.2}
#result-percent{font-size:.77rem}
.results-body .print-note{margin-top:.85rem}
.results-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}

@media(max-width:700px){
  .start-layout{grid-template-columns:1fr;gap:1.35rem}
  .cover{max-height:16rem;object-position:50% 40%}
  .question-photo{aspect-ratio:3.25/1}
}
@media(max-width:470px){
  .shell{width:calc(100% - 1.4rem);margin:1rem auto}
  .site-header{padding:.65rem .75rem;min-height:3.5rem}
  .site-brand{font-size:.78rem}
  .header-label{font-size:.7rem}
  .choices{grid-template-columns:1fr;gap:.42rem}
  .choice{min-height:2.6rem;padding:.38rem .5rem;font-size:.83rem}
  .question-body h1{margin-bottom:.65rem}
  .question-photo{aspect-ratio:3.4/1}
  .result-identity{grid-template-columns:1fr;gap:.6rem}
  .results-header,.results-body{padding:1rem}
}
@media print{
  @page{margin:.5in}
  body,.shell{display:block;width:auto;min-height:0;margin:0;background:#fff;color:#000}
  .site-header,.site-footer,.results-actions,#start-screen,#question-screen,noscript{display:none!important}
  .results-layout{width:100%;max-width:6.7in;margin:0 auto}
  .results-card{border:1px solid #555;border-radius:0;box-shadow:none;break-inside:avoid}
  .scores>div{border:1px solid #aaa}
  .eyebrow,.result-label,.scores dt,.print-note{color:#222}
}