:root{color-scheme:dark;--bg:#09131f;--panel:#101f30;--line:#283849;--gold:#dfbc75;--ink:#f3f0e8;--muted:#a3b0bd}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #f4d89e;outline-offset:4px}header{max-width:1400px;margin:auto;padding:26px 46px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none;font-weight:750;letter-spacing:3px}.brandmark{font-size:45px;color:var(--gold);line-height:1}.brand small{display:block;font-size:10px;letter-spacing:2.1px;color:var(--gold);margin-top:3px}.wallet{display:flex;gap:10px;align-items:center;border:1px solid #5a4c34;background:#211e1a;border-radius:24px;padding:8px 18px}.coin{color:var(--gold);font-size:22px}.wallet-label{font-size:14px;color:var(--muted)}nav{display:flex;gap:30px;padding:0 46px;border-bottom:1px solid var(--line);max-width:1400px;margin:auto}.nav{border:0;background:none;color:var(--muted);padding:17px 0;font-size:15px;border-bottom:2px solid transparent}.nav.active{color:var(--gold);border-color:var(--gold)}.nav span{padding:3px 7px;border-radius:5px;background:#233040;margin-left:5px;font-size:12px}main{max-width:1400px;margin:auto;padding:30px 46px 15px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--gold);font-weight:650;margin:0 0 9px}h1,h2,h3,p{margin-top:0}h1{font-family:Georgia,serif;font-weight:400;font-size:36px;line-height:1.2;margin-bottom:0}.section-head p:not(.eyebrow){color:var(--muted);margin:12px 0 0}.record{border:1px solid var(--line);padding:9px 15px;border-radius:8px;color:var(--muted);font-size:14px;white-space:nowrap}.record b{color:var(--ink);margin-left:8px}.adventure-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px}.game-wrap{border:1px solid #324353;border-radius:15px;overflow:hidden;align-self:start}.game{position:relative;aspect-ratio:960/520;background:#142c3e url('assets/forest.png') center/cover;isolation:isolate}.game:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#081726c9,transparent)}canvas{width:100%;height:100%;display:block;touch-action:none}.game-overlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;padding:6%;background:linear-gradient(90deg,#061525dc, #07152630)}.game-overlay h2{font:400 clamp(26px,3.5vw,48px)/1.06 Georgia,serif;margin:5px 0 18px}.game-overlay p:not(.eyebrow){color:#ccd5d9;margin-bottom:22px}.game-overlay small{font-size:12px;color:#c0cad0;margin-top:14px}.primary{background:linear-gradient(135deg,#efd394,#cba357);color:#15212b;border:1px solid #eed7a0;border-radius:7px;padding:12px 20px;font-weight:700;box-shadow:0 5px 24px #0003}.primary span{margin-left:28px}.secondary{border:1px solid #455261;color:var(--ink);background:transparent;border-radius:7px;padding:10px 15px;font-size:14px}.secondary:hover{border-color:var(--gold);color:var(--gold)}.game-footer{display:flex;justify-content:space-between;gap:12px;background:#122031;padding:14px 18px;font-size:12px;color:var(--muted)}.game-footer b{color:var(--gold)}.companion{background:linear-gradient(150deg,#182a3b,#101d2b);border:1px solid var(--line);border-radius:15px;padding:20px}.portrait{background-image:url('assets/dogs.png');background-size:400% 300%;background-repeat:no-repeat;aspect-ratio:1;border-radius:10px}.hero-portrait{height:158px;width:158px;margin:10px auto 16px;border-radius:50%;border:1px solid #92784d}.companion-title{display:flex;justify-content:space-between;align-items:center;gap:5px}.companion-title h2{font:28px Georgia,serif;margin:0}.companion-title span{font-size:12px;color:var(--muted)}.gold{color:var(--gold)}.companion>p:not(.eyebrow){font-size:14px;margin:4px 0 13px}.companion #activeStory{color:var(--muted);font-size:13px}.power{display:flex;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:13px}.power>span{color:var(--gold);font-size:22px}.power p{margin:3px 0 0;color:var(--muted);font-size:12px}.companion .secondary{width:100%;margin-top:5px}.next-goal{display:flex;align-items:center;gap:20px;padding:21px 24px;border:1px solid var(--line);border-radius:12px;margin-top:24px;background:#101d2b}.seal{color:var(--gold);font-size:46px}.next-goal h3{margin:0;font:22px Georgia,serif}.next-goal p:last-child{margin:3px 0 0;font-size:14px;color:var(--muted)}.text-button{margin-left:auto;color:var(--gold);border:0;background:none;font-size:14px}.hud{position:absolute;top:16px;left:16px;right:16px;display:flex;gap:10px;align-items:center}.hud[hidden]{display:none}.hud>span,.hud button{background:#071524dc;padding:7px 13px;border-radius:6px;color:var(--ink);font-size:14px;border:1px solid #425366}.hud button{margin-left:auto}.collection-info{display:flex;align-items:center;gap:30px;background:var(--panel);padding:18px 22px;border-radius:10px;border:1px solid var(--line);margin-bottom:22px}.collection-info p{margin:0;color:var(--muted);font-size:14px;flex:1}.collection-info button{white-space:nowrap}.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}.filter{border:1px solid var(--line);background:transparent;color:var(--muted);padding:7px 13px;border-radius:20px;font-size:14px}.filter.active{background:#3a3327;color:var(--gold);border-color:#8b724a}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.card{display:block;text-align:left;color:var(--ink);background:#132333;border:1px solid #41505b;padding:9px;border-radius:12px;transition:transform .18s,border-color .18s;position:relative}.card:hover{transform:translateY(-4px);border-color:var(--gold)}.card.locked .portrait{filter:saturate(.45) brightness(.63)}.card .portrait{border-radius:6px}.card .card-copy{padding:12px 6px 4px}.card h3{font:24px Georgia,serif;margin:0}.card p{font-size:13px;color:var(--muted);margin:4px 0}.card .card-status{font-size:12px;color:var(--gold);border-top:1px solid var(--line);padding-top:10px;margin-top:10px}.rarity{position:absolute;top:18px;left:17px;border-radius:4px;padding:3px 7px;background:#0a1420de;color:var(--gold);font-size:11px;letter-spacing:1px}.equipped{position:absolute;top:18px;right:17px;background:var(--gold);color:#122132;border-radius:4px;font-size:11px;padding:3px 7px}.completion{padding:22px;background:#393021;border:1px solid var(--gold);border-radius:10px;margin-top:24px;color:var(--gold)}.save-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.save-grid article{border:1px solid var(--line);background:var(--panel);padding:28px;border-radius:12px}.save-grid h2{font:26px Georgia,serif}.save-grid p{color:var(--muted)}.save-grid button{margin:0 10px 14px 0}.muted{color:var(--muted);font-size:13px}.stat-row{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}#stats{margin-bottom:25px}footer{max-width:1400px;margin:20px auto 0;padding:20px 46px 28px;display:flex;justify-content:space-between;gap:15px;color:#899aaa;font-size:12px;border-top:1px solid #1c2c3b}footer>span:first-child{letter-spacing:1.5px}dialog{color:var(--ink);background:#112133;border:1px solid #776445;border-radius:16px;max-width:440px;width:calc(100% - 30px);padding:28px;max-height:90dvh;overflow:auto}dialog::backdrop{background:#010812c9;backdrop-filter:blur(5px)}.close{position:absolute;right:12px;top:8px;background:transparent;border:0;color:var(--ink);font-size:28px;z-index:2}dialog .portrait{width:180px;margin:0 auto 20px}dialog h2{font:32px Georgia,serif;margin-bottom:5px}dialog .primary,dialog .secondary{display:block;width:100%;margin-top:12px}dialog p{color:#b4c1ce}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#ead096;color:#132132;box-shadow:0 10px 50px #0008;border-radius:8px;padding:13px 20px;z-index:20;max-width:90%;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}[hidden]{display:none!important}@media(min-width:1500px){main{padding-top:45px}.game{aspect-ratio:960/550}}@media(max-width:1000px){.adventure-layout{grid-template-columns:minmax(0,1fr) 250px;gap:16px}header,main,footer{padding-left:25px;padding-right:25px}nav{padding-left:25px}.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.game-footer{flex-direction:column;gap:2px}.game{aspect-ratio:1.5}.hero-portrait{height:130px;width:130px}.companion{padding:16px}.game-overlay p:not(.eyebrow){font-size:14px}.game-overlay{padding:7%}.game-overlay h2{font-size:35px}}
@media(max-width:720px){header{padding:18px}.brand{font-size:13px;letter-spacing:2px;gap:8px}.brand small{font-size:8px}.brandmark{font-size:32px}.wallet{padding:5px 12px}.wallet-label{display:none}nav{padding:0 18px;gap:23px}.nav{font-size:13px}.nav span{display:none}main{padding:24px 16px 10px}h1{font-size:29px}.section-head{align-items:flex-start;gap:8px}.section-head .record{font-size:12px;padding:6px 8px}.eyebrow{font-size:10px;letter-spacing:1.5px}.adventure-layout{grid-template-columns:1fr}.game{aspect-ratio:1.2}.game-overlay h2{font-size:37px}.game-overlay p:not(.eyebrow){margin-bottom:16px}.game-overlay small{font-size:11px}.companion{display:grid;grid-template-columns:70px 1fr;column-gap:14px}.companion>.eyebrow{grid-column:1/-1}.hero-portrait{width:70px;height:70px;grid-column:1;grid-row:2/5;margin:0}.companion-title{grid-column:2}.companion .gold{grid-column:2}.companion #activeStory{grid-column:1/-1;margin-top:14px}.power,.companion .secondary{grid-column:1/-1}.next-goal{padding:15px;gap:12px}.seal{font-size:30px}.next-goal h3{font-size:19px}.next-goal p:last-child{font-size:12px}.next-goal .text-button{font-size:12px;max-width:80px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.card h3{font-size:23px}.card p{font-size:12px}.rarity,.equipped{font-size:9px;top:15px}.equipped{right:12px}.collection-info{flex-direction:column;gap:14px;align-items:stretch}.save-grid{grid-template-columns:1fr}.save-grid article{padding:20px}footer{padding:20px 16px;flex-direction:column;font-size:11px}.filters{gap:6px}.filter{font-size:12px;padding:6px 10px}.game-footer{font-size:11px}.game-overlay .primary{padding:11px 16px;font-size:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Mobile-first play mode, v0.2: maintain the canvas aspect ratio. */
.touch-controls{display:none;padding:14px 18px;background:#101f30;gap:8px;text-align:center}
.touch-controls span{color:var(--muted);font-size:12px}
#jumpButton{width:100%;min-height:64px;font-size:20px;letter-spacing:2px;touch-action:none;user-select:none;-webkit-user-select:none}
#jumpButton:active{background:#ffdf9a;transform:translateY(2px)}
@media(pointer:coarse),(max-width:720px){
.touch-controls{display:flex;flex-direction:column}
.game{aspect-ratio:960/520;min-height:0}
.game-overlay{padding:5%}
.game-overlay h2{font-size:clamp(23px,6vw,34px);margin:4px 0 9px}
.game-overlay p:not(.eyebrow){font-size:12px;line-height:1.4;margin-bottom:10px}
.game-overlay .primary{padding:9px 14px;font-size:13px}
.game-overlay small{font-size:10px;margin-top:7px}
.game-overlay .secondary{padding:7px 12px;font-size:12px}
.game-overlay .eyebrow{font-size:9px;margin-bottom:3px}
.hud{top:8px;left:8px;right:8px;gap:5px}
.hud>span,.hud button{font-size:12px;padding:5px 8px}
.hud button{min-width:44px;min-height:44px}
body.playing{overflow:hidden;overscroll-behavior:none}
body.playing>header,body.playing>nav,body.playing>footer,body.playing .section-head,body.playing .companion,body.playing .next-goal,body.playing .game-footer{display:none}
body.playing main{padding:0;max-width:none}
body.playing .adventure-layout{display:block}
body.playing .game-wrap{position:fixed;inset:0;z-index:10;border:0;border-radius:0;background:#081522;display:flex;flex-direction:column;justify-content:center;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
body.playing .game{flex:0 0 auto;width:100%;max-height:calc(100dvh - 130px);aspect-ratio:960/520}
body.playing .touch-controls{flex:0 0 auto;padding:20px 18px 14px}
body.playing #jumpButton{min-height:78px}
body.playing .game-overlay{z-index:2}
}
@media(max-width:720px){header{padding:12px 16px}.brand small{display:none}nav{gap:22px}.nav{padding:12px 0}main{padding-top:17px}.section-head{margin-bottom:16px}h1{font-size:24px}.section-head .eyebrow{font-size:9px}.companion{margin-top:0}.game-footer{padding:10px 16px}}
@media(pointer:coarse) and (orientation:landscape){body.playing .game-wrap{flex-direction:row;align-items:center}body.playing .game{width:calc(100% - 130px);max-height:100dvh}body.playing .touch-controls{width:130px;padding:12px}body.playing #jumpButton{min-height:100px;font-size:15px;letter-spacing:1px}body.playing .touch-controls span{font-size:10px}}

@media(pointer:coarse){.game{aspect-ratio:640/520}body.playing .game{aspect-ratio:640/520}.game canvas{object-fit:contain}}
@media(pointer:coarse) and (orientation:landscape){body.playing .game{width:min(calc(100% - 130px),calc(100dvh * 640 / 520));max-height:100dvh}}
@media(max-width:720px){body:not(.playing) .game{min-height:320px}.game canvas{object-fit:contain}}

#soundToggle{margin-left:auto;margin-right:16px;font-size:12px;padding:8px 12px}
.run-goal{display:none;position:absolute;top:72px;left:16px;color:#f5dca0;background:#0b1825b8;padding:4px 9px;font-size:12px;border-radius:5px;pointer-events:none}
body.playing .run-goal{display:block}
#reveal{text-align:center;max-width:430px;border-color:#e5c478;background:radial-gradient(ellipse at 50% 25%,#364452,#0a1829 72%);box-shadow:0 0 90px #e4ba5738}
#reveal::backdrop{background:#020b16e8;backdrop-filter:blur(8px)}
.reveal-card{max-width:250px;margin:22px auto;border:1px solid #d7b878;padding:10px;border-radius:15px;background:#152737;box-shadow:0 12px 50px #e3b44b22;animation:cardReveal .9s cubic-bezier(.2,.8,.2,1) both}
.reveal-card .portrait{width:100%;border-radius:9px;margin-bottom:12px}.reveal-card p{font-size:13px;margin:5px 0}.reveal-card h2{font-size:32px}
@keyframes cardReveal{0%{opacity:0;transform:perspective(700px) rotateY(80deg) scale(.65);filter:brightness(2)}100%{opacity:1;transform:perspective(700px) rotateY(0) scale(1);filter:brightness(1)}}
#revealContent>p:not(.eyebrow){font-size:14px}#reveal .primary{width:100%}
@media(max-width:720px){#soundToggle{font-size:10px;margin-right:8px;padding:6px 8px}.brand{font-size:11px;letter-spacing:1px}.run-goal{top:61px;left:8px;font-size:11px}#reveal{padding:20px}.reveal-card{max-width:210px;margin:15px auto}}
@media(prefers-reduced-motion:reduce){.reveal-card{animation:none}}

#soundToggle{min-height:44px} .run-goal{max-width:calc(100% - 32px)}

.mystery-portrait{aspect-ratio:1;border-radius:8px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at center,#314053 0,#142536 48%,#091522 100%);border:1px solid #8b724a;color:var(--gold)}
.mystery-portrait:before{content:'';position:absolute;inset:12px;border:1px solid #dfbc7545;border-radius:4px;pointer-events:none}
.mystery-portrait>span{position:absolute;font-size:clamp(110px,12vw,185px);opacity:.22;line-height:1}.mystery-portrait b{font:64px Georgia,serif;text-shadow:0 0 30px #dfbc7550}.mystery-portrait small{font-size:9px;letter-spacing:3px;margin-top:22px}
.card.locked h3{font-size:20px}dialog .mystery-portrait{width:180px;margin:0 auto 20px}
.card-pieces{display:flex;gap:7px;margin:12px 0}.card-pieces span{display:grid;place-items:center;width:35px;height:42px;border:1px solid #667485;border-radius:5px;color:#a3b0bd;background:#152537}.card-pieces .filled{background:#dfbc75;color:#132333;border-color:#ffe3a8}#missionText{max-width:720px;font-size:15px}.game-overlay p{max-width:450px}

.brand-logo{display:block;width:72px;height:72px;object-fit:contain;flex-shrink:0}@media(max-width:720px){.brand-logo{width:48px;height:48px}}

header{gap:16px;flex-wrap:wrap}.shop-link{color:var(--gold);text-decoration:none;font-size:13px;border:1px solid #655439;border-radius:8px;padding:10px 14px;white-space:nowrap}.shop-link:hover{background:#292417;color:#ffe2a2}@media(max-width:720px){header{gap:8px}.shop-link{flex-basis:100%;text-align:center;padding:8px 12px;font-size:12px}}