:root { color-scheme: dark; --bg:#05070a; --surface:#111114; --gold:#e8b75c; --ink:#f4f5f8; --muted:rgb(232 236 244 / 64%); --line:rgb(244 245 248 / 12%); --green:#88b98c; --red:#d28178; --sans:"Work Sans",ui-sans-serif,system-ui,-apple-system,sans-serif; --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { min-width:320px; min-height:100svh; margin:0; background:radial-gradient(ellipse 88% 34% at 50% 0%,rgb(197 160 89 / 18%) 0%,rgb(197 160 89 / 8%) 48%,transparent 100%),var(--bg); color:var(--ink); font-family:var(--sans); }
button,a { -webkit-tap-highlight-color:transparent; } button { font:inherit; }
.quiz-header { display:grid; width:min(980px,calc(100% - 40px)); height:80px; margin:auto; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; }
.selector-tabs { display:grid; height:80px; place-items:center; }
.selector-tab-list { display:flex; width:432px; height:44px; gap:4px; padding:4px; border:1px solid rgb(255 255 255 / 18%); border-radius:999px; background:rgb(5 7 10 / 88%); }
.selector-tab-list a { display:grid; flex:1 1 0; min-width:0; place-items:center; border-radius:999px; color:rgb(255 255 255 / 68%); font-size:.76rem; font-weight:650; letter-spacing:.035em; text-align:center; text-decoration:none; }
.selector-tab-list a.is-active { background:var(--gold); color:var(--bg); }
.round-link { display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--gold); }
.round-link:hover { border-color:rgb(232 183 92 / 55%); transform:translateY(-2px); }
.round-link svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.wordmark { margin:0; color:var(--ink); font:500 clamp(1.15rem,2.4vw,1.55rem)/1 var(--serif); letter-spacing:-.02em; text-align:center; }
.selector-shell,.quiz-shell { width:min(920px,calc(100% - 40px)); margin:auto; padding:8px 0 max(96px,calc(68px + env(safe-area-inset-bottom))); }
.play-index { background:var(--bg); }
.play-index .selector-shell { width:min(1100px,calc(100% - 48px)); padding:clamp(104px,11vw,136px) 0 72px; }
.selector-intro { max-width:850px; text-align:left; }
.quiz-intro { text-align:center; }
.selector-intro p,.quiz-intro p { margin:0 0 14px; color:var(--gold); font-size:.7rem; font-weight:650; letter-spacing:.15em; text-transform:uppercase; }
.selector-intro h1,.quiz-intro h1 { margin:0; font:500 clamp(2.4rem,5vw,4rem)/.96 var(--serif); letter-spacing:-.045em; text-wrap:balance; }
.play-index .selector-intro h1 { max-width:760px; font-size:clamp(2.8rem,5.5vw,4.8rem); }
.selector-intro span { display:block; margin-top:16px; color:var(--muted); }
.quiz-intro span { display:block; margin-top:0; color:var(--muted); }
.game-grid { display:grid; margin-top:clamp(32px,5vw,52px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.game-tile { position:relative; isolation:isolate; display:flex; min-height:280px; padding:32px; overflow:hidden; flex-direction:column; border:1px solid var(--line); border-radius:24px; background:var(--surface); color:var(--ink); text-decoration:none; }
.game-tile::before { position:absolute; z-index:-1; right:-2%; bottom:-18%; width:62%; aspect-ratio:1; background-position:center; background-repeat:no-repeat; background-size:contain; content:""; filter:sepia(1); opacity:.16; }
.game-tile:nth-child(1)::before { background-image:url("/assets/popes/001.webp"); }
.game-tile:nth-child(2)::before { background-image:url("/assets/popes/267-medallion-formal.webp"); }
.game-tile:nth-child(3)::before { background-image:url("/assets/popes/266.webp"); }
.game-tile:nth-child(4)::before { background-image:url("/assets/popes/264.webp"); }
.game-tile:hover { border-color:rgb(232 183 92 / 52%); }
.tile-number { color:var(--gold); font-size:.7rem; letter-spacing:.1em; }
.game-tile h2 { max-width:72%; margin:0; font:500 clamp(2rem,4vw,3.2rem)/.95 var(--serif); letter-spacing:-.04em; text-wrap:balance; }
.game-tile > span { display:inline-flex; min-height:38px; margin:auto 0 0; padding:0 15px; align-self:flex-end; align-items:center; border:1px solid rgb(232 183 92 / 42%); border-radius:999px; color:var(--gold); font-size:.76rem; font-weight:650; }
.tile-action { margin-top:24px; color:var(--gold); font-size:.76rem; font-weight:650; }
.quiz-stage { margin-top:clamp(24px,3.5vw,36px); }
.quiz-status { display:flex; margin-bottom:20px; justify-content:space-between; color:var(--muted); font-size:.72rem; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
.quiz-status b { color:var(--gold); }
.portrait-question { display:grid; place-items:center; }
.portrait-question img { width:clamp(150px,24vw,220px); height:clamp(150px,24vw,220px); object-fit:contain; border-radius:50%; filter:drop-shadow(0 16px 28px rgb(0 0 0 / 30%)); }
.tip-button,.text-button { margin-top:18px; padding:8px; border:0; background:none; color:var(--gold); cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.tip-button:hover,.text-button:hover { color:var(--ink); transform:translateY(-1px); }
.tip-copy { margin:16px 0 0; color:var(--muted); font:italic 1rem var(--serif); }
.answer-options { display:grid; max-width:720px; margin:20px auto 0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.answer-options button { min-height:62px; padding:12px 18px; border:1px solid var(--line); border-radius:14px; background:rgb(255 255 255 / 3%); color:var(--ink); font:500 1.15rem var(--serif); cursor:pointer; }
.answer-options button:not(:disabled):hover { border-color:rgb(232 183 92 / 50%); }
.answer-options button:not(:disabled):hover { background:rgb(232 183 92 / 8%); transform:translateY(-2px); }
.answer-options button.is-correct { border-color:var(--green); background:rgb(136 185 140 / 10%); }
.answer-options button.is-wrong { border-color:var(--red); opacity:.6; }
.clue-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.clue-grid div { display:grid; min-height:104px; padding:14px; place-content:center; gap:8px; text-align:center; }
.clue-grid span { color:var(--gold); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; }
.clue-grid strong { font:500 clamp(1.05rem,2.4vw,1.5rem)/1.15 var(--serif); }
.chain-instruction { margin:0 0 20px; color:var(--muted); text-align:center; }
.chain-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.chain-cards button { position:relative; display:grid; min-width:0; min-height:240px; padding:22px 10px; place-items:center; border:1px solid var(--line); border-radius:18px; background:rgb(255 255 255 / 3%); color:var(--ink); cursor:pointer; }
.chain-cards button.is-selected { border-color:var(--gold); background:rgb(232 183 92 / 9%); }
.chain-cards button:not(:disabled):hover { border-color:rgb(232 183 92 / 50%); transform:translateY(-2px); }
.chain-cards img { width:min(14vw,130px); height:min(14vw,130px); object-fit:contain; border-radius:50%; }
.chain-cards strong { font:500 clamp(1rem,2.3vw,1.35rem) var(--serif); text-align:center; }
.chain-years { color:var(--muted); font:italic .76rem var(--serif); opacity:0; transition:opacity 180ms ease; }
.chain-cards.show-years .chain-years { opacity:1; }
.pair-choices { display:grid; max-width:760px; margin:auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.pair-choices button { display:grid; min-width:0; min-height:270px; padding:24px 14px; place-items:center; border:1px solid var(--line); border-radius:20px; background:rgb(255 255 255 / 3%); color:var(--ink); cursor:pointer; }
.pair-choices button.is-correct,.time-actions button.is-correct { border-color:var(--green); background:rgb(136 185 140 / 10%); }
.pair-choices button.is-wrong,.time-actions button.is-wrong { border-color:var(--red); opacity:.6; }
.pair-choices img { width:min(22vw,160px); height:min(22vw,160px); object-fit:contain; border-radius:50%; }
.pair-choices strong { font:500 clamp(1.3rem,3vw,2rem)/1 var(--serif); text-align:center; }
.pair-choices span { visibility:hidden; color:var(--muted); font:italic .82rem var(--serif); opacity:0; transition:opacity 180ms ease; }
.pair-choices.show-years span { visibility:visible; opacity:1; }
.time-question { display:grid; max-width:680px; margin:auto; justify-items:center; text-align:center; }
.time-question>img { width:120px; height:120px; object-fit:contain; border-radius:50%; }
.event-category { margin:18px 0 8px; color:var(--gold); font-size:.65rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.time-question h2 { max-width:620px; margin:0; font:500 clamp(2rem,5vw,3.5rem)/.98 var(--serif); letter-spacing:-.04em; }
.time-question>p:last-of-type { color:var(--muted); }
.time-actions { display:flex; gap:10px; }
.time-actions button { min-width:130px; min-height:50px; border:1px solid var(--line); border-radius:999px; background:rgb(255 255 255 / 3%); color:var(--ink); cursor:pointer; }
.missing-chain { display:grid; max-width:680px; margin:auto; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:12px; }
.missing-chain div { display:grid; justify-items:center; gap:10px; text-align:center; }
.missing-chain img,.missing-space { width:min(18vw,130px); height:min(18vw,130px); border-radius:50%; }
.missing-chain img { object-fit:contain; }.missing-space { display:grid!important; place-items:center; justify-self:center; border:1px dashed var(--gold); color:var(--gold); font:500 2rem var(--serif); }
.missing-chain strong { font:500 clamp(.9rem,2vw,1.2rem) var(--serif); }
.nope-question { display:grid; padding:34px 0 10px; place-content:center; justify-items:center; text-align:center; }
.nope-question>p { margin:0 0 18px; color:var(--muted); }
.nope-question h2 { max-width:760px; margin:0 0 34px; font:500 clamp(2.6rem,7vw,5.5rem)/.92 var(--serif); letter-spacing:-.055em; text-wrap:balance; }
.order-badge { position:absolute; top:12px; right:12px; display:grid; width:28px; height:28px; place-items:center; border-radius:50%; background:var(--gold); color:var(--bg); font-weight:750; }
.order-badge:empty { display:none; }
.chain-actions { display:flex; margin-top:24px; justify-content:center; align-items:center; gap:16px; }
.gold-button { min-height:46px; padding:0 24px; border:0; border-radius:999px; background:var(--gold); color:var(--bg); font-weight:700; cursor:pointer; }
.gold-button:not(:disabled):hover { filter:brightness(1.08); transform:translateY(-2px); }
.gold-button:disabled { opacity:.35; cursor:not-allowed; }
.feedback,.quiz-results { max-width:620px; margin:22px auto 0; text-align:center; }
.feedback strong { font:500 1.4rem var(--serif); }.feedback strong.is-correct { color:var(--green); }.feedback strong.is-wrong { color:var(--red); }
.feedback p,.quiz-results p { margin:10px 0 22px; color:var(--muted); line-height:1.5; }
.key-score { display:flex; justify-content:center; gap:8px; }
.score-key { width:32px; height:32px; fill:none; stroke:rgb(232 236 244 / 20%); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.score-key.is-earned { stroke:var(--gold); }
.archive-loading { margin:60px 0; color:var(--muted); text-align:center; }
.quiz-summary { display:grid; margin:20px 0 24px; text-align:left; }
.summary-row { display:grid; min-height:68px; padding:8px 0; grid-template-columns:30px 48px minmax(0,1fr); align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.summary-row:first-child { border-top:1px solid var(--line); }
.summary-mark { display:grid; width:24px; height:24px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:.9rem; }
.summary-mark.is-correct { color:var(--green); }.summary-mark.is-wrong { color:var(--red); }
.summary-medallion { width:48px; height:48px; object-fit:contain; border-radius:50%; }
.summary-pope { display:grid; gap:4px; }.summary-pope strong { font:500 1.2rem var(--serif); }.summary-pope small { color:var(--muted); font:italic .72rem var(--serif); }
.summary-row.is-chain { grid-template-columns:30px minmax(0,1fr); }
.summary-row.is-text { grid-template-columns:30px minmax(0,1fr); }
.summary-chain { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.summary-chain.is-pair { grid-template-columns:repeat(2,minmax(0,1fr)); }
.summary-sequence { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:7px; }
.summary-sequence div { display:grid; justify-items:center; gap:5px; text-align:center; }
.summary-sequence img { width:42px; height:42px; object-fit:contain; border-radius:50%; }
.summary-sequence strong { font:500 .76rem/1.1 var(--serif); }
.summary-arrow { color:var(--gold); }
.summary-chain div { display:flex; min-width:0; align-items:center; gap:7px; }
.summary-chain img { width:42px; height:42px; flex:0 0 auto; object-fit:contain; border-radius:50%; }
.summary-chain span { display:grid; min-width:0; gap:3px; }.summary-chain strong { overflow:hidden; font:500 .86rem var(--serif); text-overflow:ellipsis; white-space:nowrap; }.summary-chain small { color:var(--muted); font:italic .62rem var(--serif); }
.result-actions { display:grid; justify-items:center; gap:14px; }
.result-button-row { display:flex; justify-content:center; align-items:center; gap:12px; }
.result-link { color:var(--muted); font-size:.78rem; text-underline-offset:4px; }
.result-link:hover { color:var(--gold); }
.secondary-button { display:inline-flex; min-height:46px; padding:0 20px; align-items:center; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); font-size:.82rem; font-weight:650; text-decoration:none; cursor:pointer; }
.secondary-button:hover { border-color:rgb(232 183 92 / 52%); color:var(--gold); transform:translateY(-2px); }
.round-link,.tip-button,.text-button,.answer-options button,.chain-cards button,.gold-button,.secondary-button { transition:transform 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out,background 160ms ease-out,filter 160ms ease-out; }
[hidden] { display:none !important; }
button:focus-visible,a:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
@media(max-width:640px){.quiz-header{width:calc(100% - 24px);height:64px}.selector-tabs{height:70px}.selector-tab-list{width:calc(100% - 24px)}.selector-tab-list a{font-size:.68rem;letter-spacing:0}.selector-shell,.quiz-shell{width:calc(100% - 24px);padding-top:4px}.play-index .selector-shell{width:calc(100% - 24px);padding-top:104px}.selector-intro h1,.quiz-intro h1{font-size:clamp(2.25rem,10vw,3.15rem)}.play-index .selector-intro h1{font-size:clamp(2.55rem,11vw,3.5rem)}.selector-intro span{margin-top:12px}.quiz-intro span{margin-top:0}.quiz-stage{margin-top:24px}.quiz-status{margin-bottom:16px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.game-tile{min-height:190px;padding:17px;border-radius:17px}.game-tile::before{right:-12%;bottom:-7%;width:86%;opacity:.13}.game-tile h2{max-width:100%;font-size:clamp(1.35rem,6.4vw,1.8rem)}.game-tile > span{min-height:34px;padding:0 12px;font-size:.7rem}.answer-options{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px;gap:7px}.answer-options button{min-height:54px;padding:8px;font-size:.92rem}.clue-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.clue-grid div{min-height:116px;padding:10px 5px;gap:7px;border-radius:0}.clue-grid span{font-size:.52rem;letter-spacing:.04em}.clue-grid strong{font-size:clamp(.74rem,3.5vw,.94rem)}.chain-cards{gap:6px}.chain-cards button{min-height:198px;padding-inline:5px}.chain-cards img{width:min(25vw,100px);height:min(25vw,100px)}.chain-cards strong{font-size:.92rem}.chain-years{font-size:.62rem}.order-badge{top:8px;right:8px}.summary-chain div{display:grid;justify-items:center;text-align:center}.summary-chain img{width:38px;height:38px}.summary-chain strong{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
@media(hover:none){.round-link:hover{border-color:var(--line);transform:none}.game-tile:hover{border-color:var(--line)}.tip-button:hover,.text-button:hover{color:var(--gold);transform:none}.answer-options button:not(:disabled):hover{border-color:var(--line);background:rgb(255 255 255 / 3%);transform:none}.chain-cards button:not(:disabled):hover{border-color:var(--line);transform:none}.gold-button:not(:disabled):hover{filter:none;transform:none}.secondary-button:hover{border-color:var(--line);color:var(--ink);transform:none}.result-link:hover{color:var(--muted)}}
@media(max-width:640px){.pair-choices{gap:7px}.pair-choices button{min-height:220px;padding:18px 6px;border-radius:15px}.pair-choices img{width:min(34vw,130px);height:min(34vw,130px)}.pair-choices strong{font-size:clamp(1.05rem,5vw,1.4rem)}.time-question>img{width:92px;height:92px}.time-question h2{font-size:clamp(1.8rem,8vw,2.5rem)}.time-actions{width:100%}.time-actions button{min-width:0;flex:1}.missing-chain{gap:5px}.missing-chain img,.missing-space{width:min(25vw,96px);height:min(25vw,96px)}.missing-chain strong{font-size:.72rem}.missing-chain>span{font-size:.7rem}}
@media(max-width:640px){.selector-shell,.quiz-shell{padding-bottom:max(120px,calc(88px + env(safe-area-inset-bottom)))}.nope-question{padding-top:18px}.feedback{margin-top:16px}.quiz-summary{margin-top:16px}.result-actions{padding-bottom:4px}}