:root{color-scheme:dark;--ink:#102720;--paper:#f4f1e7;--lime:#d9f28d;--muted:#b8c9b7;--line:#ffffff25;--vh:100svh;--top:env(safe-area-inset-top,0px);--bottom:env(safe-area-inset-bottom,0px);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%}*{box-sizing:border-box}body{margin:0;min-width:280px;color:var(--paper);background:var(--ink);font-size:16px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{min-height:48px;padding:13px 17px;border:1px solid transparent;border-radius:14px;font-weight:750;color:var(--paper);background:#ffffff12;cursor:pointer}button:disabled{opacity:.55;cursor:default}button:active:not(:disabled){filter:brightness(.93)}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--lime);outline-offset:3px}a{color:inherit}h1,h2,p{margin-top:0}h1,h2{line-height:1.17;letter-spacing:-.045em}p{line-height:1.6}img{display:block;max-width:100%}[hidden]{display:none!important}.primary{background:var(--lime);color:#1c3020}.secondary{background:#ffffff08;border-color:#ffffff35}.wide{display:flex;width:100%;align-items:center;justify-content:center;gap:10px}.text-button{background:transparent;color:var(--muted);font-size:14px}.eyebrow{color:var(--lime);font-size:12px;font-weight:800;letter-spacing:.06em}.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}
.home-hero{position:relative;min-height:min(850px,var(--vh));overflow:hidden;background:#152b27}.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,#0c241ce8 0%,#0c241c67 100%),linear-gradient(0deg,#102720 0%,transparent 45%),url('/assets/photo3.jpg') 60% 20%/cover no-repeat}.home-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1000px;margin:auto;padding:calc(18px + var(--top)) 22px 14px}.brand{display:flex;gap:10px;align-items:center;font-size:9px;font-weight:750;letter-spacing:.04em}.brand b{display:grid;place-items:center;width:32px;height:32px;border:1px solid #e0ecc377;border-radius:9px;color:var(--lime);font-size:19px}.home-bar a{display:grid;place-items:center;min-height:44px;text-decoration:none;font-size:13px}.hero-copy{position:relative;width:100%;max-width:470px;margin:10px auto 0;padding:18px 22px 28px}.hero-copy h1{margin:18px 0 20px;font-size:clamp(50px,16vw,74px);font-weight:850}.hero-copy h1 span{color:var(--lime)}.hero-lead{margin-bottom:20px;font-size:16px;font-weight:550;line-height:1.8;text-shadow:0 1px 4px #0005}.hero-tags{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 22px}.hero-tags span{border:1px solid #ffffff35;background:#12291d66;padding:6px 9px;border-radius:7px;font-size:12px;font-weight:700}.hero-copy .primary{justify-content:space-between;min-height:58px}.hero-copy .secondary{margin-top:9px}.hero-copy .text-button{min-height:44px;margin-top:4px}.stock-line{margin:12px 0 0;color:#d4decc;font-size:11px;line-height:1.6}.status{margin:10px 0 0;color:#ffe1bb;font-size:13px;line-height:1.5}.status:empty{display:none}.home-content{max-width:900px;margin:auto;padding:30px 22px calc(24px + var(--bottom))}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px}.section-heading h2{margin:0;font-size:23px}.section-heading>span{color:var(--muted);font-size:12px}.leader-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.leader-card{display:flex;flex-direction:column;gap:10px;padding:16px 13px;border:1px solid var(--line);border-radius:16px;background:#ffffff07;min-width:0}.leader-title{color:#d9e3cd;font-size:11px;line-height:1.4}.leader-title b{display:inline-block;margin-right:5px;color:var(--lime);font-size:14px}.leader-name{min-height:40px;font-size:15px;font-weight:750;line-height:1.4;overflow-wrap:anywhere}.leader-value{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;row-gap:4px}.leader-value strong{font-size:37px;line-height:1;letter-spacing:-.04em;font-family:ui-monospace,monospace}.leader-value small{color:var(--muted);font-size:10px}.board-note{margin:12px 0 0;color:#aabda9;font-size:11px}.personal{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:24px 0 0;color:var(--muted);font-size:12px}.personal strong{color:var(--paper);font-size:28px}.how-section{margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}.how-section h2{font-size:30px;margin-bottom:22px}.how-section ol{display:grid;gap:21px;list-style:none;margin:0;padding:0}.how-section li{display:flex;gap:14px;align-items:flex-start}.how-section li>b{padding-top:4px;color:var(--lime);font-size:11px;font-family:ui-monospace,monospace}.how-section li>span{font-size:15px;font-weight:650}.how-section small{display:block;margin-top:5px;color:var(--muted);font-size:12px;font-weight:500;line-height:1.6}footer{padding-top:36px;color:#a1b29e;font-size:10px;line-height:1.8}
.play-screen{position:fixed;inset:0;height:var(--vh);overflow:hidden;background:#102720}.photo-layer,.play-shade{position:absolute;inset:0;pointer-events:none}.photo-backdrop{width:100%;height:100%;object-fit:cover;opacity:.38;filter:blur(16px);transform:scale(1.06)}.photo-art{position:absolute;inset:calc(54px + var(--top)) 0 calc(48px + var(--bottom));display:flex;align-items:center;justify-content:center}.photo-frame{position:relative;flex:0 0 auto;overflow:hidden}.main-photo{width:100%;height:100%;object-fit:contain}.photo-mask{position:absolute;background:#102720e8;border:1px solid #dceacb42;border-radius:8px}.review-region{position:absolute;border:3px solid var(--lime);border-radius:9px;box-shadow:0 0 0 2px #17311caa}.play-shade{background:linear-gradient(#071a16bb,transparent 20%,transparent 76%,#071a16b3)}.play-header{position:absolute;z-index:4;left:max(8px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));top:calc(4px + var(--top));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;height:44px}.hud-button{justify-self:start;min-height:44px;padding:8px 10px;border-radius:10px;background:#10271c86;font-size:13px}#play-label{color:#d7e4d1;font-size:12px;white-space:nowrap}.streak-chip{display:flex;align-items:baseline;gap:5px;justify-self:end;white-space:nowrap}.streak-chip strong{font-family:ui-monospace,monospace;font-size:29px;font-weight:800}.streak-chip small{color:#d9e2d1;font-size:10px}.progress{position:absolute;z-index:4;top:calc(51px + var(--top));left:12px;right:12px;height:3px;border-radius:4px;overflow:hidden;background:#ffffff36}.progress span{display:block;height:100%;background:var(--lime);transform-origin:left;transform:scaleX(0)}.watch-note{position:absolute;bottom:calc(8px + var(--bottom));left:12px;right:12px;margin:0;padding:8px 10px;color:#f4f2df;background:#10271c99;border-radius:9px;text-align:center;font-size:13px;font-weight:650}.loading{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;padding:25px;background:#102720;text-align:center;z-index:2}.loading b{font-size:23px}.loading p{margin:12px 0 0;color:var(--muted);font-size:13px}body[data-phase="question"] .photo-layer,body[data-phase="asking"] .photo-layer,body[data-phase="paused"] .photo-layer,body[data-phase="preparing"] .photo-layer{visibility:hidden}.answer-panel{position:absolute;z-index:3;inset:calc(70px + var(--top)) 12px calc(12px + var(--bottom));display:grid;align-content:center;max-width:460px;margin:auto;overflow-y:auto;overscroll-behavior:contain}.answer-kicker{margin:0 0 13px;color:var(--lime);font-size:11px;font-weight:750;letter-spacing:.03em}.answer-panel h2{margin:0 0 24px;font-size:24px;line-height:1.4}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.choices button{min-height:62px;padding:13px 10px;border-color:#ffffff35;background:#f7f4eb;color:#183024;font-size:16px;line-height:1.45}.giveup{margin-top:10px;min-height:44px;background:transparent;color:var(--muted);font-size:13px}.correct-panel{position:absolute;z-index:4;left:12px;right:12px;bottom:calc(12px + var(--bottom));max-width:450px;margin:auto;padding:16px;background:#102720ed;border:1px solid #d8ebad69;border-radius:17px;box-shadow:0 8px 24px #0003}.correct-panel h2{margin:0 0 7px;font-size:22px;color:var(--lime)}.correct-panel p{margin:0 0 12px;font-size:13px}.play-error{position:absolute;z-index:5;inset:calc(70px + var(--top)) 12px calc(15px + var(--bottom));max-width:420px;margin:auto;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:22px;background:#102720f7;border:1px solid var(--line);border-radius:17px}.play-error p{font-size:14px;color:#dbe5cf}.play-error h2{font-size:24px;margin-bottom:4px}
.end-screen{max-width:500px;margin:auto;padding:calc(22px + var(--top)) max(18px,env(safe-area-inset-left,0px)) calc(28px + var(--bottom))}.end-brand{margin-bottom:25px;color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.04em}.end-screen h1{font-size:35px;margin-bottom:10px}.end-score{display:flex;align-items:baseline;gap:10px;margin:17px 0}.end-score strong{font-size:80px;font-weight:850;line-height:1;font-family:ui-monospace,monospace;letter-spacing:-.07em}.end-score span{font-size:16px;color:var(--muted)}.end-comment{color:#ccdac0;font-size:14px;margin-bottom:20px}.end-review{position:relative;height:clamp(220px,40svh,360px);overflow:hidden;border-radius:16px;background:#19372c;margin-bottom:12px}.end-review .photo-art{inset:4px}.end-review .photo-backdrop{position:absolute;inset:0}.review-copy{margin:0 0 24px;font-size:14px;line-height:1.6}.review-copy b{display:block;font-size:17px;margin-bottom:6px;color:var(--lime)}.claim-box{padding:18px;margin:20px 0;border:1px solid #def29a6b;border-radius:16px;background:#c7e0800a}.claim-box h2{font-size:20px;margin-bottom:9px}.claim-box p{font-size:12px;color:#d2debf;margin-bottom:12px}.name-label{display:block;margin-bottom:7px;font-size:12px}.claim-box input{width:100%;min-height:50px;padding:12px;border:1px solid #a4bf76;border-radius:10px;background:#f8f5ec;color:#183024;font-size:16px}.claim-box .primary{margin-top:10px}.end-screen .leader-grid{margin:16px 0 20px}.end-actions{display:grid;gap:10px;margin-top:22px}.end-status{min-height:19px;margin:9px 0 0;color:#e5eebf;font-size:12px}.new-record{display:inline-block;padding:5px 8px;border-radius:6px;background:var(--lime);color:#183024;font-size:11px;font-weight:800}dialog{width:calc(100% - 32px);max-width:390px;padding:23px;border:1px solid #c5d4a755;border-radius:20px;background:#153226;color:var(--paper)}dialog::backdrop{background:#071a15df}dialog h2{margin-bottom:12px;font-size:27px}dialog p{color:#ccdac0;font-size:13px}dialog .wide+button{margin-top:9px}
@media(min-width:700px){.hero-copy{margin-left:max(50px,calc((100vw - 1000px)/2));padding-top:35px;padding-bottom:50px}.hero-photo{background-position:50% 30%}.home-content{padding-top:40px}.leader-card{padding:23px}.leader-name{font-size:18px}.leader-value strong{font-size:46px}}
@media(max-width:359px){.hero-copy{padding-left:18px;padding-right:18px}.home-content{padding-left:16px;padding-right:16px}.hero-copy h1{font-size:51px}.leader-card{padding:14px 10px}.leader-name{font-size:14px}.leader-value strong{font-size:31px}.streak-chip small{font-size:9px}.answer-panel h2{font-size:20px}.choices button{font-size:14px}}
@media(max-height:650px){.hero-copy{margin-top:0;padding-top:10px}.hero-copy h1{font-size:51px;margin:12px 0 15px}.hero-lead{font-size:14px;margin-bottom:15px}.hero-tags{margin-bottom:15px}.answer-panel h2{font-size:19px;margin-bottom:15px}.answer-kicker{margin-bottom:8px}.choices{gap:7px}.choices button{min-height:50px;padding:9px;font-size:14px}.giveup{margin-top:4px}.correct-panel{padding:12px}.correct-panel h2{font-size:19px}.correct-panel p{font-size:12px}}
@media(orientation:landscape) and (max-height:500px) and (min-width:600px){.photo-art{inset:calc(52px + var(--top)) 0 calc(5px + var(--bottom))}.watch-note{max-width:280px;left:auto;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(8px + var(--bottom))}.answer-panel{max-width:650px}.answer-panel h2{margin-bottom:12px}.choices{grid-template-columns:repeat(4,minmax(0,1fr))}.choices button{min-height:62px}.correct-panel{left:auto;width:300px;right:12px}.photo-layer:has(+.play-shade){background:#102720}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
body[data-phase="answering"] .photo-layer,body[data-phase="error"] .photo-layer{visibility:hidden}

.symbol-marks{position:absolute;inset:0;pointer-events:none}.symbol-mark{position:absolute;display:grid;place-items:center;width:var(--symbol-size,52px);height:var(--symbol-size,52px);transform:translate(-50%,-50%);border:1px solid #1536296b;border-radius:11px;background:#fffdf2;box-shadow:0 2px 8px #0004;font-family:Arial,sans-serif;font-size:33px;font-weight:800;line-height:1}.symbol-correct{outline:3px solid var(--lime);outline-offset:3px}.question-intro{display:flex;align-items:center;gap:15px;margin-bottom:20px}.question-intro h2{margin:0;flex:1}.location-map{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;width:58px;flex:0 0 58px;height:76px;padding:4px;border:1px solid #ffffff40;border-radius:8px}.location-map span{display:grid;place-items:center;border-radius:3px;background:#ffffff0d;color:#8caa90;font-size:15px}.location-map .target{color:#183024;background:var(--lime);font-weight:800}.symbol-choices button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:66px}.choice-glyph{font-family:Arial,sans-serif;font-size:30px;font-weight:800;line-height:1.1}.last-result{padding:13px 15px;margin:0 0 17px;background:#0d241de8;border:1px solid #dcf39c73;border-radius:14px}.last-result>p{margin:0 0 8px;color:#dce6c9;font-size:12px}.last-score{display:flex;align-items:baseline;gap:9px}.last-score strong{font-family:ui-monospace,monospace;font-size:46px;line-height:1;color:var(--lime)}.last-score span{font-size:14px;font-weight:700}.last-answer{font-size:12px}.last-answer summary{padding:12px 0 0;min-height:44px;cursor:pointer;color:#c6d7ba}.last-answer p{margin:4px 0 0;font-size:12px}.hero-copy .claim-box{margin-bottom:0}.hero-copy .claim-box .primary{min-height:48px;justify-content:center}body[data-last="yes"] .hero-copy h1{font-size:42px;margin:10px 0 14px}body[data-last="yes"] .hero-lead,body[data-last="yes"] .hero-tags{display:none}body[data-last="yes"] .hero-copy{margin-top:0}body[data-last="yes"] .hero-copy>.eyebrow{margin-bottom:5px}body[data-last="yes"] .home-hero{min-height:0}.hero-copy>.end-status:empty{display:none}
@media(max-height:650px){.question-intro{gap:12px;margin-bottom:15px}.location-map{height:66px;width:52px;flex-basis:52px}.symbol-choices button{min-height:56px}.choice-glyph{font-size:27px}body[data-last="yes"] .hero-copy h1{font-size:34px;margin-bottom:10px}.last-result{padding:11px 13px;margin-bottom:12px}.last-score strong{font-size:40px}}

.location-map{grid-template-rows:repeat(3,minmax(0,1fr))}.location-map span{min-height:0;line-height:1}

/* The homepage illustration is separate from the original in-game photo library. */
.hero-photo{background:linear-gradient(0deg,#102720 0%,#10272018 48%,#10272000 80%),url('/hero-sages-distraction-v3.webp') right top/cover no-repeat}.hero-copy h1{font-size:clamp(48px,13vw,64px);text-shadow:0 2px 8px #10272099}.hero-lead{max-width:218px;font-size:14px;text-shadow:0 1px 5px #102720}.hero-tags{max-width:220px}.hero-tags span{background:#102720bf}
@media(min-width:700px){.hero-photo{background-size:auto 100%;background-color:#102720;background-position:right top}.hero-copy h1{font-size:72px}.hero-lead{font-size:16px;max-width:270px}}

/* Keep small text readable over the comic's bright clothing and sky. */
.hero-lead{padding:8px 10px;background:#102720ed;border-radius:10px}.hero-copy .text-button{background:#102720ed;border:1px solid #d9f28d4d;color:var(--paper);border-radius:12px}.stock-line{padding:8px 10px;background:#102720ed;border-radius:9px;color:#e3e9d6;font-size:12px}.home-bar a{padding:8px 10px;background:#102720df;border:1px solid #ffffff40;border-radius:10px}

.hero-lead{max-width:242px}
@media(min-width:700px){.hero-lead{max-width:270px}}

/* Leave the sages' sideways glances visible between the title and controls. */
@media(max-width:699px){.home-hero{min-height:0}.hero-photo{background-size:100% 100%,auto 660px;background-position:center top,right top;background-color:var(--ink)}body:not([data-last="yes"]) .hero-copy #start{margin-top:100px}}

.how-intro{max-width:560px;margin:0 0 24px;color:var(--muted);font-size:14px;line-height:1.8}