/* Paper, ink and brass: foreground polish shared by all six rooms. */
body::before { border:6px solid #26322e;box-shadow:inset 0 0 0 1px #c3a67566,inset 0 0 32px #060d1433 }
.masthead { border-bottom:1px solid #f1ede150 }
.card { border-color:#d4c6ad;border-radius:14px;box-shadow:0 18px 55px -28px #050c12bb,0 2px 0 #fff6 inset }
.sheet { padding:22px 28px 24px;background:#fffcf5 }
.question-heading { display:flex;justify-content:space-between;align-items:center;gap:10px }
.sheet .eyebrow { font-size:10px;letter-spacing:.12em;text-align:left }
.difficulty-chip { display:flex;align-items:center;gap:7px;font:10px var(--mono);color:#685d4c }
.difficulty-chip i { display:flex;align-items:flex-end;gap:2px;height:12px }
.difficulty-chip b { width:3px;height:5px;background:#ddd5c7;border-radius:1px }
.difficulty-chip b:nth-child(2){height:7px}.difficulty-chip b:nth-child(3){height:9px}.difficulty-chip b:nth-child(4){height:11px}.difficulty-chip b:nth-child(5){height:13px}
.difficulty-chip b.lit { background:#a17b3d }
.quiz-title { margin:16px 0 5px;font:700 clamp(20px,4vw,26px)/1.15 var(--sans);letter-spacing:-.035em;color:#253a3e }
.sequence { margin:20px auto 15px;gap:10px }
.sequence.matrix { width:min(100%,320px);gap:5px }
.sequence .seq-item small { color:#857b69;font-size:8px }
.sequence.matrix .seq-item small { display:none }
.tile-frame { filter:drop-shadow(0 2px 2px #42352612) }
.missing-slot { border:1.5px dashed #b1a692;color:#8c7c61;background:#f4efdf;font:300 28px var(--sans);border-radius:8px;width:clamp(42px,12vw,88px) }
.sequence.matrix .missing-slot { width:94%;margin:2% auto;aspect-ratio:1 }
.revealed-tile { border-radius:8px;box-shadow:0 0 0 2px #5f9778 }
.instruction { font-size:12px;margin:12px 0 16px;color:#645c50 }
.keyboard-hint { display:inline-block;margin-left:7px;padding:3px 6px;border:1px solid #e1d9c9;border-radius:4px;font:9px var(--mono);color:#84755e;white-space:nowrap }
.answers { width:min(100%,510px);gap:10px;grid-template-columns:repeat(4,minmax(0,1fr)) }
.answer { padding:24px 6px 7px;border:1.5px solid #c6baa5;background:#f4efe3;border-radius:9px;box-shadow:0 3px 0 #d8cdbd;transition:background 140ms,border-color 140ms,box-shadow 140ms,transform 140ms }
.answer .tile-frame { width:min(100%,96px) }
.answer .keychip { top:5px;left:50%;transform:translateX(-50%);border:0;padding:0;background:none;color:#7b6c54;font:10px var(--mono) }
.answer:hover:not(:disabled) { border-color:#587d92;background:#ecf1ee;box-shadow:0 3px 0 #a5b6b1;transform:translateY(-1px) }
.answer:active:not(:disabled) { transform:translateY(2px);box-shadow:0 1px 0 #a5b6b1 }
.answer.right { background:#e4efe5;border-color:#5f9875;box-shadow:0 3px 0 #8bb199 }
.answer.wronged { background:#f4e5df;border-color:#b46b58;box-shadow:0 3px 0 #c9907f;animation:none }
.is-marked .answer:not(.right):not(.wronged) { opacity:.48 }
.stamp { top:4px;right:0;left:0;padding:0;background:none;border:0;transform:none;font:700 9px var(--mono);letter-spacing:.02em;animation:none }
.stamp.ok{color:#216241}.stamp.no{color:#984733}
.is-marked .answer.right .keychip,.is-marked .answer.wronged .keychip { visibility:hidden }
.skip { min-height:44px;margin:14px auto 0;font-size:11px;color:#776951;text-underline-offset:3px }
.feedback { min-height:0;font-size:12px;line-height:1.5;margin:18px 0 0 }
.feedback:empty { display:none }
.result { border:1px solid #c6d6c8;border-radius:10px;margin-top:12px;background:#f7faf4;animation:none;scroll-margin-block:16px }
.result-wrong { border-color:#dbc1b5;background:#fcf5ef }.result-skip{border-color:#d7cdbb;background:#f8f5ec}
.result-head { display:flex;justify-content:flex-start;border-bottom:1px solid #829d7e30;padding:13px 14px;color:#326647;gap:10px }
.result-head>span:nth-child(2) { flex:1;line-height:1.5;font-size:14px }
.result-head small { display:block;font:11px var(--mono);color:#687662;font-weight:400 }
.result-wrong .result-head { color:#9b553e }.result-wrong .result-head small{color:#8c6e60}
.result-symbol { display:block;width:34px;height:34px;flex:0 0 34px }
.result-symbol svg { width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5 }
.result-symbol path { stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:0;animation:ink-check .5s ease-out both }
@keyframes ink-check { from{stroke-dashoffset:50}to{stroke-dashoffset:0} }
.verdict { font-size:8px;border:0;padding:4px 6px }
.result-body { padding:14px 18px 17px }.rule-line{font-size:13px;line-height:1.65}
.rankbadge { border:0;background:transparent;box-shadow:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center }
.rankbadge small{width:100%;text-align:center;line-height:1.5}.rankbadge b{font-size:12px}
.rstats { gap:24px;margin-top:12px }.rstat b{font-size:13px}
.next-wrap { position:sticky;bottom:8px;margin-top:14px;z-index:3 }
.next-wrap .action { width:min(100%,340px);background:#263e3c;border-color:#263e3c;box-shadow:0 5px 16px #1c322b30 }
.summary-card { padding:27px 28px;background:linear-gradient(145deg,#fffdf7,#f8efdd) }
.summary-card h2 { font:700 clamp(23px,5vw,31px)/1.2 var(--sans);letter-spacing:-.04em;text-transform:none;color:#283f3d }
.sum-sub { font:10px/1.6 var(--mono);margin-top:8px;color:#817258 }
.score-seal { position:relative;width:240px;height:240px;margin:20px auto 8px;max-width:100% }
.score-seal>svg { width:100%;height:100%;overflow:visible }
.seal-track{fill:none;stroke:#e3d7bf;stroke-width:4}.seal-progress{fill:none;stroke:#b18b47;stroke-width:4;stroke-linecap:round}
.seal-inner{fill:#fffdf580;stroke:#bca474;stroke-width:.8;stroke-dasharray:1 5}
.seal-content { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px }
.seal-kicker { font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#896b36 }
.score-seal .big-score { font:750 49px/1.05 var(--sans);letter-spacing:-.06em;color:#293e3d;margin:0 }
.seal-total { font:10px var(--mono);color:#837253 }
.seal-content .stars-big { justify-content:center;gap:3px;margin-top:3px }.seal-content .star{width:19px;height:19px}
.report-note { font:13px/1.6 var(--sans);color:#5a6459;margin:10px 0 20px }
.summary-grid { margin:16px auto;gap:8px }.scell{border-color:#d6cbb7;background:#fffaf066;border-radius:7px}
.mark-row { gap:10px;margin:22px 0 }.mark-cell .tile-frame{width:54px}.mark-cell small{font-size:8px}.mark-cell b{font:10px var(--mono);color:#78705c}
.share-pre { background:#fffaf070;border-color:#c9bda5;font-size:10px }
.pct-line { font-size:12px }.pct-note{line-height:1.6}
.celebration-layer { position:fixed;inset:0;pointer-events:none;z-index:25;overflow:hidden }
.celebration-layer i { position:absolute;display:block;border-radius:1px }
#game-status { left:1px;top:1px }
.volume-control { display:grid;gap:6px;margin-top:16px;font:12px var(--sans);color:#6b604e }
.volume-control>span { display:flex;justify-content:space-between }.volume-control output{font-family:var(--mono)}
.volume-control input { width:100%;min-height:32px;accent-color:#426b5c;margin:0 }
:is(button,input,a,summary):focus-visible { outline:3px solid #355bc5;outline-offset:3px }
.trow .stars-mini .star { width:15px;height:15px }
body[data-screen="exam"] .pips { gap:5px;margin-bottom:8px }.pip{height:4px;flex:1;max-width:45px}
.timerbar { margin-bottom:12px;background:#172b2bba;border-radius:6px;padding:8px 10px }.exam-stars{gap:5px}.exam-stars .star{width:17px;height:17px}
.practice-banner { color:#34555c;background:#edf2e8;border:1px solid #a8b9ab;font-size:11px;line-height:1.5 }
#timer { font-size:18px;min-width:76px }.timer-dot{width:6px;height:6px}
footer { padding:12px;border-radius:8px;background:#182d2b70;color:#f0e7d4d9;line-height:1.6 }
.paper-review { text-align:left;border-block:1px solid #d5c9b4;margin:0 0 22px }
.paper-review summary { cursor:pointer;font:600 12px var(--sans);min-height:44px;padding:14px 4px;color:#5b6757 }
.review-rule { display:flex;gap:12px;padding:14px 0;border-top:1px solid #ded6c8 }
.review-rule .tile-frame { flex:0 0 50px;width:50px;align-self:flex-start }
.review-rule h3 { font-size:12px;margin:0 0 5px;line-height:1.5 }.review-rule h3 small{font:9px var(--mono);color:#7c715e;font-weight:400;margin-left:4px}
.review-rule p { font-size:12px;line-height:1.65;color:#706653;margin:0 }
@media(max-width:580px){
  .sheet{padding:18px 15px}.sequence.matrix{width:min(100%,280px)}
  .answers{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,340px);gap:9px}
  .answer{padding:8px 24px}.answer .tile-frame{width:78px}
  .answer .keychip{top:9px;left:11px;transform:none}.stamp{left:7px;right:auto;top:7px;font-size:0}
  .stamp.ok::after{content:'✓';font-size:13px}.stamp.no::after{content:'×';font-size:15px}
  .question-heading{gap:5px}.difficulty-chip{font-size:9px}.sheet .eyebrow{font-size:9px}
  .quiz-title{margin-top:13px;font-size:22px}.sequence{margin-top:15px;gap:5px}
  .keyboard-hint{display:none}.instruction{font-size:11px;margin-block:10px 13px}
  .summary-card{padding:24px 15px}.result-body{padding:13px}.result-head{padding:11px 10px;gap:7px}
  .verdict{display:none}.result-head>span:nth-child(2){font-size:13px}.result-head small{font-size:10px}
  .next-wrap{bottom:10px}.next-wrap .action{width:100%}
  .mark-row{gap:6px}.mark-cell .tile-frame{width:45px}.summary-card .btnrow>button{flex:1}
  .trow{grid-template-columns:auto minmax(0,1fr) auto}.trow .stars-mini{grid-column:2;grid-row:auto}.trow .p{grid-column:3;grid-row:1 / 3}
  body[data-screen="exam"] .tagline{display:none}
  body[data-screen="exam"] .masthead{margin-bottom:12px;padding-bottom:8px;gap:8px}
  body[data-screen="exam"] .brand h1{font-size:24px}
}
.reduce-motion .result-symbol path{animation:none}.reduce-motion .celebration-layer{display:none}
@media(forced-colors:active){.difficulty-chip b.lit{background:CanvasText}.seal-progress,.result-symbol svg{stroke:CanvasText}.tile-frame{filter:none}}

/* ---------- Pixel ascent theme ----------
 * The backdrop is a bright pixel sky, so chrome sits on dark navy plaques with hard
 * pixel shadows; display type uses the self-hosted Pixelify Sans, body text stays sans. */
@font-face { font-family:"Pixelify Sans";src:url("/fonts/pixelify-sans-latin.woff2") format("woff2");font-weight:400 700;font-display:swap }
:root { --pixel:"Pixelify Sans",var(--mono);--plaque:#1b2140;--plaque-edge:#0d1126;--cream:#fff6dc;--brass:#e0b45a;--hard:0 4px 0 #0d112699 }
body { background:#4f9fdc }
body::before { display:none }
.tile-defs { position:absolute;width:0;height:0;overflow:hidden }
body[data-screen="exam"] .academy-root::after { opacity:.14 }

.masthead { padding:8px 10px 8px 12px;background:var(--plaque);border:2px solid var(--plaque-edge);border-radius:10px;box-shadow:var(--hard) }
.brand svg { flex:0 0 auto }
.brand h1 { font:700 30px/1 var(--pixel);letter-spacing:.02em;color:var(--cream);text-shadow:2px 2px 0 #3a62d4,4px 4px 0 var(--plaque-edge) }
.tagline { margin-top:5px;font:500 10px var(--pixel);letter-spacing:.2em;color:#ffd98a }
.nav a,.nav button,.streak-chip { border:2px solid var(--plaque-edge);border-radius:8px;background:#fff6e0;color:var(--plaque);box-shadow:0 3px 0 var(--plaque-edge);font-family:var(--pixel);font-weight:600;font-size:13px }
.nav a[aria-current],.nav button.on { background:var(--brass);color:var(--plaque);box-shadow:0 3px 0 var(--plaque-edge) }
.streak-chip span { font-family:var(--pixel)!important }

.card { border:2px solid #2d2a35;border-radius:10px;box-shadow:0 6px 0 #1b214066,0 24px 44px -26px #0b1020bb }
.today-intro h2,.quiz-title,.summary-card h2,.start-gate h2,.testamur h2,.score-seal .big-score { font-family:var(--pixel);letter-spacing:0 }
.today-intro h2 { font-weight:700;font-size:clamp(32px,8vw,48px);line-height:1;color:#1b2140 }
.quiz-title { font-weight:600;color:#1b2140 }
.score-seal .big-score { font-weight:700;letter-spacing:.01em }
.badge { border-width:2px;font-family:var(--pixel);letter-spacing:.12em }

.action,.secondary { border:2px solid var(--plaque-edge);border-radius:8px;font:600 16px var(--pixel);letter-spacing:.03em;transition:transform 90ms ease,box-shadow 90ms ease }
.action { background:var(--plaque);color:var(--cream);box-shadow:0 4px 0 var(--plaque-edge) }
.secondary { background:#fff6e0;color:var(--plaque);box-shadow:0 4px 0 #b9a985 }
.action:hover,.secondary:hover { transform:translateY(-1px) }
.action:active,.secondary:active { transform:translateY(3px);box-shadow:0 1px 0 var(--plaque-edge) }
.next-wrap .action { background:var(--plaque);border-color:var(--plaque-edge);box-shadow:0 4px 0 var(--plaque-edge),0 10px 22px -8px #0b1020aa }

/* Answers: the tile is the button. Its card outline carries hover and marking state. */
.tile-frame,.sequence .tile-frame { filter:none }
.answers { gap:14px }
.answer { padding:0;background:none;border:0;box-shadow:none;border-radius:8px;transition:transform 110ms ease }
.answer .tile-frame { width:100%;max-width:none }
.answer:hover:not(:disabled) { background:none;border:0;box-shadow:none;transform:translateY(-3px) }
.answer:hover:not(:disabled) .tile-card { stroke:#3a62d4;stroke-width:2.6 }
.answer:active:not(:disabled) { transform:translateY(1px) }
.answer .keychip { top:-6px;left:-6px;transform:none;z-index:1;display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border:0;border-radius:6px;background:var(--plaque);color:var(--cream);font:700 12px/1 var(--pixel);box-shadow:0 2px 0 var(--plaque-edge) }
.answer.right,.answer.wronged { background:none;border:0;box-shadow:none }
.answer.right .tile-card,.revealed-tile .tile-card { stroke:#2f8a55;stroke-width:3 }
.answer.wronged .tile-card { stroke:#b4402c;stroke-width:3 }
.answer.right svg>rect:first-child,.revealed-tile svg>rect:first-child { fill:#9fcdad }
.answer.wronged svg>rect:first-child { fill:#e2a99a }
.is-marked .answer:not(.right):not(.wronged) { opacity:.42 }
.stamp,.stamp.ok,.stamp.no { top:-8px;right:-7px;left:auto;z-index:1;display:grid;place-items:center;width:26px;height:26px;padding:0;border:2px solid var(--plaque-edge);border-radius:50%;font-size:0;color:#fff;box-shadow:0 2px 0 var(--plaque-edge) }
.stamp.ok { background:#2f8a55 }.stamp.no { background:#b4402c }
.stamp.ok::after { content:'✓';font:700 14px/1 var(--sans) }.stamp.no::after { content:'✕';font:700 13px/1 var(--sans) }
.is-marked .answer.right .keychip,.is-marked .answer.wronged .keychip { visibility:visible }
.revealed-tile { box-shadow:none }
.missing-slot,.sequence.matrix .missing-slot { display:grid;place-items:center;border:2px dashed #8d7d62;border-radius:7px;background:repeating-linear-gradient(45deg,#f7f0de 0 5px,#efe5cd 5px 10px);color:#7b6a4d;font:700 30px/1 var(--pixel) }
.sequence.matrix .missing-slot { width:92.5%;height:auto;margin:3% auto 4.5% }

/* Chrome that sits directly on the sky gets a plaque so it stays readable. */
.timerbar { background:var(--plaque);border:2px solid var(--plaque-edge);border-radius:8px;box-shadow:var(--hard) }
#timer { font-family:var(--pixel);font-weight:600;font-size:20px;color:var(--cream) }
.pip { background:#1b214055;border-radius:2px;height:6px }
.pip.cur { background:var(--brass);box-shadow:0 0 0 2px #1b214066 }.pip.ok { background:#3fae6a }.pip.no { background:#d0604a }
.archive-wrap summary { padding:10px 14px;border:2px solid var(--plaque-edge);border-radius:10px;background:var(--plaque);color:var(--cream);font-family:var(--pixel);font-weight:600;box-shadow:var(--hard) }
.archive-wrap summary::after { color:#ffd98a }
.archive-note { padding:8px 12px;border-radius:8px;background:#1b2140d9;color:var(--cream) }
footer { border:2px solid var(--plaque-edge);background:#1b2140e0;color:#f2e9d4 }
.section-label { color:var(--cream) }

@media(max-width:580px){
  .brand h1 { font-size:26px }
  .answers { grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,360px);gap:10px }
  .answer { padding:0 }.answer .tile-frame { width:100% }
  .answer .keychip { top:-6px;left:-6px }
  .stamp,.stamp.ok,.stamp.no { top:-8px;right:-7px;left:auto }
  .stamp.ok::after { content:'✓';font-size:14px }.stamp.no::after { content:'✕';font-size:13px }
  body[data-screen="exam"] .brand h1 { font-size:24px }
}
@media(forced-colors:active){ .masthead,.timerbar,.archive-wrap summary,footer { forced-color-adjust:auto } .brand h1 { text-shadow:none } }

/* ---------- IQdle IQ: bell curve on the report, history on the record ---------- */
.iq-panel,.iq-record { margin:6px auto 18px;padding:16px 18px 12px;border:2px solid #2d2a35;border-radius:10px;background:#fffdf6;box-shadow:0 4px 0 #d9caa9;text-align:left }
.iq-panel { width:min(100%,460px) }
.iq-record { margin:16px 0 18px }
.iq-head { display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;flex-wrap:wrap }
.iq-kicker { margin:0;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6b5d44 }
.iq-value { display:block;font:700 46px/1 var(--pixel);color:#1b2140;letter-spacing:.01em }
.iq-panel.pending .iq-value { color:#a2967f }
.iq-rank { margin:0 0 4px;max-width:30ch;font-size:12.5px;line-height:1.45;color:#4d4536;text-align:right }
.iq-rank strong { color:#1b2140 }
.iq-curve { margin:6px -4px 0 }
.bell { display:block;width:100%;height:auto;overflow:visible }
.bell-curve { fill:none;stroke:#2c3546;stroke-width:2;stroke-linejoin:round }
.bell-area { fill:#3a62d4;opacity:.2 }
.bell-base,.bell-tick { stroke:#bfb29a;stroke-width:1 }
.bell-label { font:10px var(--mono);fill:#6b5d44 }
.bell-you line { stroke:#3a62d4;stroke-width:2 }
.bell-you circle { fill:#3a62d4;stroke:#fffdf6;stroke-width:2 }
.bell-you text { font:700 12px var(--pixel);fill:#1b2140;paint-order:stroke;stroke:#fffdf6;stroke-width:4px;stroke-linejoin:round }
.iq-panel.pending .bell-curve { stroke:#a2967f;stroke-dasharray:3 3 }
.iq-note { margin:6px 0 0;font-size:10.5px;line-height:1.5;color:#6b5d44 }
.iq-facts { display:flex;gap:18px;margin:0 }
.iq-facts div { text-align:right }.iq-facts dt { font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6b5d44 }
.iq-facts dd { margin:2px 0 0;font:700 20px/1 var(--pixel);color:#1b2140 }
.iq-empty { margin:12px 0 4px;font-size:12.5px;color:#4d4536 }
.iq-history { position:relative;margin-top:10px }
.iq-history svg { display:block;width:100%;height:auto }
.hist-grid { stroke:#ece3d1;stroke-width:1 }.hist-grid.mid { stroke:#cfc2a8 }
.hist-axis { font:11px var(--mono);fill:#6b5d44 }
.hist-line { fill:none;stroke:#3a62d4;stroke-width:2;stroke-linejoin:round;stroke-linecap:round }
.hist-dot { fill:#3a62d4;stroke:#fffdf6;stroke-width:2 }
.hist-hit { fill:transparent;cursor:default }
.hist-rating { stroke:#1b2140;stroke-width:1;stroke-dasharray:4 4 }
.hist-rating-label { font:700 12px var(--pixel);fill:#1b2140 }
.hist-tip { position:absolute;transform:translate(-50%,calc(-100% - 10px));padding:5px 8px;border-radius:6px;background:var(--plaque);color:var(--cream);font:11px var(--mono);white-space:nowrap;pointer-events:none;box-shadow:0 2px 0 var(--plaque-edge) }
.trow .p small { display:block;font:600 11px var(--pixel);color:#3a62d4;text-align:right }
@media(max-width:580px){ .iq-panel,.iq-record { padding:14px 13px 10px }.iq-rank { text-align:left }.iq-facts { gap:12px }.iq-facts div { text-align:left } }
@media(forced-colors:active){ .bell-area { fill:Highlight;opacity:.4 }.bell-curve,.hist-line { stroke:CanvasText }.bell-you circle,.hist-dot { fill:Highlight } }