*{box-sizing:border-box}body{margin:0;background:#151d1a;color:#f0e8cb;font:14px system-ui,sans-serif}header{height:76px;border-bottom:1px solid #ffffff18;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}header a{color:#eadcb3;text-decoration:none;font:24px Georgia}header span,.eyebrow,footer,.hud,small{font-size:10px;letter-spacing:2px}button{font:inherit;color:inherit;cursor:pointer;background:none;border:1px solid #ffffff30;padding:10px 15px}button:hover{background:#ffffff15}button:focus-visible{outline:2px solid #ffbf64}main{max-width:1160px;margin:auto;padding:40px 30px}.eyebrow{color:#bdaa80}h1{font:clamp(28px,4.5vw,56px) Georgia;margin:18px 0 12px}h1 i{color:#cb854a;font-size:.65em}.intro{color:#babda9;margin-bottom:32px}.game{position:relative;border:1px solid #8c936847;border-radius:5px;overflow:hidden;background:#a3c5b1;box-shadow:0 24px 80px #0005}.hud{height:45px;background:#24312a;display:flex;align-items:center;justify-content:space-between;padding:0 20px}.hud button{padding:5px 10px;font-size:10px}canvas{width:100%;display:block;image-rendering:pixelated}#overlay{position:absolute;inset:45px 0 0;background:#13221c88;display:grid;place-items:center;text-align:center;backdrop-filter:blur(2px)}.card{padding:25px}.card h2{font:clamp(27px,4vw,47px) Georgia;margin:15px}.card p{line-height:1.7;color:#dddccb}.primary{background:#e6c889;color:#273529;padding:16px 25px;font-size:11px;letter-spacing:2px;border:0;margin:15px}.primary:hover{background:#f7dda6}small{display:block;line-height:1.8;letter-spacing:1px;color:#9ba693}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;color:#a9ad99}footer button{font-size:10px}section{border-top:1px solid #ffffff18;margin-top:28px;padding-top:25px}section p{font:23px Georgia}.touch{display:none;gap:8px;padding-top:10px}#dialog{position:absolute;bottom:30px;left:15%;right:15%;background:#182820f5;padding:23px;border:1px solid #d2bd83;text-align:center}#dialog p{font:21px Georgia;line-height:1.4}#dialog button{margin:5px}#dialog small{margin-bottom:10px}[hidden]{display:none!important}@media(max-width:700px){main{padding:25px 12px}header{height:55px}header span{display:none}.touch{display:flex}.touch button{flex:1;touch-action:none}footer span:nth-child(2){display:none}#dialog{left:4%;right:4%;bottom:10px;padding:10px}#dialog p{font-size:16px}.card p{font-size:11px}.card small{font-size:8px}.card h2{font-size:25px}.primary{padding:10px}}

#overlay .card{max-height:100%;overflow-y:auto}#overlay .card p{max-width:740px}.sources a{font:12px system-ui;color:#bdaa80}.hud #chapter{letter-spacing:1px}#dialog p{font-size:18px}details{margin:12px;text-align:left}summary{cursor:pointer}@media(max-width:700px){#dialog p{font-size:12px}#dialog button{font-size:11px;padding:7px}#dialog{bottom:4px}#chapter{font-size:8px}.hud{padding:0 8px}.hud #apples{font-size:8px;letter-spacing:0}}

body{background:#f6eccc;color:#23324b}header{border-color:#26334b22;background:#fff4d6}header a{color:#23324b}button{border-color:#26334b50}button:hover{background:#f6cd4f50}main{padding-top:30px}.eyebrow{color:#95612d}h1{font-family:monospace;font-weight:900;letter-spacing:-2px;text-shadow:3px 3px 0 #edc557}h1 i{color:#e34c35}.intro{color:#526072}.game{border:5px solid #273851;border-radius:0;box-shadow:8px 8px 0 #dfb858}.hud{background:#22395c;color:#fff1c4;font-family:monospace;font-weight:bold}.hud button{border-color:#ffffff55}.primary{background:#ffd33c;color:#26354c;border:3px solid #23334a;box-shadow:4px 4px 0 #c94830;font-family:monospace;font-weight:bold}.primary:hover{background:#ffe879}#overlay{background:#152e5599}.card{color:#fff4d4}.card .eyebrow{color:#ffde65}.card small{color:#e7edff}.card h2{font-family:monospace;font-weight:bold;text-shadow:3px 3px #264676}.card p{color:#fff4d4}#dialog{background:#fff2cfee;border:4px solid #263b5e;box-shadow:5px 5px 0 #d57837;color:#25344c}#dialog p{font-family:system-ui;font-weight:500}#dialog button{background:#ffd945;border:2px solid #243756;font-size:12px;font-weight:bold}footer{color:#5a654e}section{border-color:#25344b33}section small{color:#596343}.sources a{color:#78542c}.touch button{background:#ffd945;border:2px solid #26344e;color:#23334c;font-weight:bold}

.evolution{font-size:13px;line-height:1.5;background:#fff6da;border-left:4px solid #e49c35;padding:12px 16px;margin:18px 0 0;color:#3f4b55}

.identity-bar{display:flex;align-items:center;gap:12px;padding:12px 18px;background:#fff0bd;color:#253958;font:bold 12px monospace;letter-spacing:.4px}#portrait{width:20px;height:24px;box-shadow:0 -5px 0 #e34835,4px 7px 0 #2b63c8,-4px 7px 0 #2b63c8;margin:5px 4px}.scene-role{display:inline-block;background:#243b5d;color:#fff1bd;font:bold 11px monospace;padding:6px 10px}#dialog h3{font:24px Georgia;margin:12px 0 8px}.scene-context{font-size:12px;line-height:1.55;color:#536477;border-bottom:1px solid #243b5d33;padding-bottom:12px}#dialog{left:10%;right:10%;bottom:16px;max-height:calc(100% - 90px);overflow-y:auto}#dialog p{font-size:15px;line-height:1.5;text-align:left}#dialog button{display:block;width:100%;margin:8px 0;padding:12px;text-align:left}#overlay{top:90px}.card h2{font-size:34px}.identity-bar+#chapter{font-size:10px}@media(max-width:700px){.identity-bar{font-size:9px;padding:8px 10px;gap:8px}#dialog{left:3%;right:3%;bottom:5px;max-height:calc(100% - 65px);padding:12px}#dialog h3{font-size:19px}#dialog p{font-size:12px}.scene-context{font-size:10px;padding-bottom:8px}#dialog button{font-size:11px;padding:8px}.card h2{font-size:22px}#overlay{top:85px}}

.character-select{display:flex;gap:12px;justify-content:center;margin:18px 0}.character-card{width:205px;text-align:left;background:#fff0c9;color:#263c58;border:3px solid #263b59;box-shadow:4px 4px #ca8041;padding:16px;transition:transform .15s}.character-card:hover{transform:translateY(-4px);background:#ffe297}.character-card strong{font:900 22px monospace;display:block}.character-card span{display:block;font-size:12px;margin:7px 0}.character-card small{font-size:10px;color:#576077;letter-spacing:0;line-height:1.6}.character-card.charles{border-top:8px solid #95648c}.character-card.adam{border-top:8px solid #57a497}.character-card.cathy{border-top:8px solid #bb6785}#overlay .card{width:100%}.card h2{margin:8px}.card>p{margin:10px auto}@media(max-width:700px){.character-select{gap:5px;margin:8px 0}.character-card{width:31%;padding:8px;box-shadow:2px 2px #ca8041}.character-card strong{font-size:15px}.character-card span{font-size:9px}.character-card small{font-size:8px}.card>p{font-size:10px}.card{padding:10px}}

/* Responsive playfield and full-size mobile story screens. */
html{min-width:280px}body{overflow-x:hidden}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:44px}main{width:100%}.game{isolation:isolate}canvas{height:auto;aspect-ratio:var(--game-aspect,2);touch-action:none}.hud{gap:10px;min-height:45px;height:auto;padding:8px 14px}.hud #chapter{flex:1;min-width:0;line-height:1.5}.hud #apples{white-space:nowrap}.identity-bar{min-height:48px}#portrait{flex:none}#identity{line-height:1.5}.character-card{min-width:0;max-width:100%}#overlay{z-index:10;top:0;bottom:0;padding:12px;overflow:auto;overscroll-behavior:contain}#overlay .card{max-height:none;overflow:visible}.card small{font-size:11px}.card>p{font-size:14px}#dialog{z-index:20;scrollbar-width:thin;overscroll-behavior:contain}#dialog p{font-size:15px}#dialog button{min-height:48px;font-size:14px}.touch button{user-select:none;-webkit-user-select:none;touch-action:none}.touch button.pressed{background:#e7a337;transform:translateY(2px)}footer{flex-wrap:wrap}a,button{overflow-wrap:anywhere}
@media(max-width:700px),(pointer:coarse){
body{padding-bottom:calc(100px + env(safe-area-inset-bottom))}main{padding:20px 12px}header{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}h1{font-size:clamp(25px,6vw,42px);letter-spacing:-1px}.intro{margin-bottom:20px}.game{box-shadow:4px 4px #dfb858;border-width:3px}.identity-bar{padding:9px 12px;font-size:11px}.hud{flex-wrap:wrap;padding:8px 10px}.hud #chapter{font-size:10px;flex-basis:52%}.hud #apples{font-size:10px;letter-spacing:0}.hud button{min-height:36px;font-size:11px}.touch{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1.35fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff0c9;border-top:3px solid #263b59;padding:12px max(12px,env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom));box-shadow:0 -5px 16px #22395c25}.touch button{min-height:56px;min-width:0;font-size:13px;padding:8px 4px;border-radius:8px}.touch button:last-child{background:#ec6846;color:#fff7d9}.evolution{font-size:13px;padding:12px}footer{font-size:9px}.character-select{display:grid;grid-template-columns:1fr;gap:12px;width:100%;max-width:450px;margin:20px auto}.character-card{width:100%;padding:16px 18px;min-height:100px;text-align:left}.character-card strong{font-size:22px}.character-card span{font-size:13px;margin:4px 0}.character-card small{font-size:13px;line-height:1.5}.card{padding:20px 12px}.card h2{font-size:28px}.card>p{font-size:14px}.card small{font-size:12px;letter-spacing:0;line-height:1.5}
#overlay:not([hidden]),#dialog:not([hidden]){position:fixed;inset:0;left:0;right:0;top:0;bottom:0;width:100%;height:100vh;height:100dvh;max-height:none;z-index:60;overflow-y:auto;overscroll-behavior:contain;padding:calc(22px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));border:0;box-shadow:none;background:#fff2cf;backdrop-filter:none;-webkit-overflow-scrolling:touch}
#overlay:not([hidden]){display:block;background:#22395c}#overlay .card{max-width:650px;margin:auto;width:100%;max-height:none}#dialog h3{font-size:27px;line-height:1.15;margin:18px 0 14px}.scene-context{font-size:14px;line-height:1.6;padding-bottom:16px}#dialog p{font-size:16px;line-height:1.65;margin:20px 0}#dialog button{font-size:15px;padding:16px;line-height:1.4;margin:12px 0;min-height:60px}body.story-open{overflow:hidden}body.story-open .touch{visibility:hidden}
}
@media(pointer:coarse) and (orientation:landscape){main{padding-top:12px;max-width:1000px}header{height:48px}h1{font-size:28px;margin:10px 0}.eyebrow{font-size:9px}.intro{margin:5px 0 12px}.character-select{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}.character-card{padding:12px}.character-card small{font-size:12px}#overlay .card{max-width:800px}.touch{padding-top:8px}.touch button{min-height:46px}.game{max-width:760px;margin:auto}}
@media(prefers-reduced-motion:reduce){.character-card{transition:none}.character-card:hover{transform:none}}

/* Give play the screen, keep narrative panels separate. */
@media(max-width:700px),(pointer:coarse){body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}main{padding:12px 8px}header{height:42px}h1{font-size:25px;margin:9px 0 5px}.intro{margin:5px 0 12px;font-size:12px}.eyebrow{font-size:9px;letter-spacing:1px}.identity-bar{font-size:10px;min-height:40px;padding:6px 10px}.hud{min-height:40px;padding:5px 8px}.hud #chapter{font-size:9px}.hud #apples{font-size:9px}.touch{gap:6px;padding-top:9px;padding-bottom:calc(9px + env(safe-area-inset-bottom))}.touch button{min-height:54px;font-size:12px}.evolution{font-size:12px;line-height:1.5;margin-top:12px}section{margin-top:18px}.game{scroll-margin-top:6px}#dialog p{font-size:16px}#dialog h3{font-size:24px}}
@media(pointer:coarse) and (orientation:landscape){header,main>.eyebrow,h1,.intro{display:none}main{padding-top:4px}.game{max-width:calc((100dvh - 165px)*2);min-width:300px}.identity-bar{min-height:30px;padding:3px 8px}.hud{min-height:32px}.hud button{min-height:28px}.touch button{min-height:44px}.touch{padding-top:6px}.evolution{max-width:700px;margin:8px auto}.game canvas{max-height:calc(100dvh - 150px)}}

/* Mobile browser chrome and notch-safe sizing. */
.touch{padding-right:max(12px,env(safe-area-inset-right))}.game{max-width:100%}.touch button{min-width:44px}.character-card{min-height:88px}#dialog,#overlay{overflow-wrap:break-word}.hud #chapter{overflow-wrap:anywhere}.hud #pause{flex:none}
@media(pointer:coarse) and (orientation:landscape){.game{width:min(100%,calc((100vh - 152px)*1.333333));width:min(100%,calc((100dvh - 152px)*1.333333));min-width:0;max-width:100%;}.game canvas{max-height:none;height:auto}.touch{padding-right:max(12px,env(safe-area-inset-right))}.identity-bar{font-size:9px}.hud{gap:4px}.hud #chapter{font-size:8px}.hud #apples{font-size:8px}.evolution{display:none}}
@media(max-width:360px){.hud #chapter{flex-basis:100%;font-size:9px}.touch{gap:4px;padding-left:8px;padding-right:8px}.touch button{font-size:11px}#dialog{padding-left:14px;padding-right:14px}}

/* Character selection: a compact pixel landscape, with room for browser chrome. */
.mobile-help{display:none}.start-brand{font:900 13px monospace;letter-spacing:2px;color:#ffe078}.start-brand span{display:block;font-size:10px;letter-spacing:1px;margin-top:5px;color:#c5e3f3}.start-credit{font-size:10px;color:#ccdfec;margin-top:20px}.start-help{font-size:12px;line-height:1.6;color:#e6f0f8}.start-help small{font-size:10px;margin-top:6px;color:#c5ddec;letter-spacing:0}.character-art{width:65px;height:78px;flex:none;filter:drop-shadow(3px 4px 0 #23395822)}.character-copy{flex:1;min-width:0}.choose-arrow{font:900 24px monospace!important;margin:0!important}.opening .character-card{display:flex;align-items:center;gap:14px;min-height:112px;width:240px;padding:12px}.opening .character-card strong{font-size:20px}.opening .character-card span{font-size:12px}.opening .card h2{font-size:32px;margin:18px 0 8px}.opening #continue{margin-top:16px;border:2px solid #98b5ca;color:#fff1be;font:bold 12px monospace;background:#193759;padding:12px 18px}.opening #continue:hover{background:#315a80}
@media(max-width:700px),(pointer:coarse){
#overlay.opening:not([hidden]){background:linear-gradient(180deg,#2989cd 0%,#68b7df 65%,#78bb65 65%,#438c54 76%,#264c37 100%);padding:calc(18px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom));display:flex;align-items:flex-start;justify-content:center;}
#overlay.opening .card{position:relative;max-width:420px;margin:auto;padding:22px 18px;background:#193b60f2;border:3px solid #fff0b9;box-shadow:5px 5px 0 #254b38;text-align:left;}
.opening .start-brand{font-size:12px}.opening .card h2{font-size:clamp(23px,6.5vw,30px);line-height:1.15;margin:18px 0 8px;text-shadow:2px 2px #142d49}.opening .card>p{font-size:13px;margin:0;line-height:1.5;color:#e4eff6}.opening .character-select{gap:10px;margin:20px 0 16px;max-width:none;grid-template-columns:1fr}.opening .character-card{width:100%;min-height:90px;padding:8px 12px;gap:12px;border-width:2px;border-top-width:5px;box-shadow:3px 3px #142b43}.opening .character-art{width:52px;height:64px}.opening .character-card strong{font-size:20px}.opening .character-card span{font-size:12px;line-height:1.4}.opening .keyboard-help{display:none}.opening .mobile-help{display:block;font-size:12px}.opening .start-help small{font-size:10px;line-height:1.5}.opening #continue{width:100%;margin-top:14px;min-height:44px}.opening .start-credit{margin-top:15px;font-size:9px}.opening .choose-arrow{font-size:22px!important}body.story-open{overflow:hidden}
}
@media(max-width:360px){#overlay.opening .card{padding:18px 12px}.opening .character-card{gap:8px}.opening .character-card strong{font-size:18px}.opening .character-card span{font-size:11px}}
@media(max-height:650px) and (orientation:portrait){#overlay.opening .card{padding-top:14px;padding-bottom:14px}.opening .card h2{margin-top:12px}.opening .character-select{margin-top:14px;gap:8px}.opening .character-card{min-height:76px}.opening .character-art{height:54px}.opening .start-credit{margin-top:10px}}
@media(pointer:coarse) and (orientation:landscape){#overlay.opening .card{max-width:800px;margin:0 auto;padding:16px}.opening .character-select{grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0}.opening .character-card{gap:8px;padding:8px}.opening .character-art{width:36px;height:48px}.opening .character-card strong{font-size:16px}.opening .character-card span{font-size:11px}.opening .choose-arrow{display:none}.opening .card h2{font-size:23px;margin-top:10px}.opening #continue{width:auto}.opening .start-credit{margin-top:10px}}