/* Castano 1.3: one responsive game menu, without stacked legacy overrides. */
:root{--gold:#e7c77d;--cream:#fff0c8;--ink:#071710;--panel:#142c22;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
#game{position:fixed;inset:0;width:100%;height:100%;height:100dvh;object-fit:fill}
button{font-family:system-ui,-apple-system,Arial,sans-serif;touch-action:manipulation}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #fff0b7;outline-offset:4px}
button:active{filter:brightness(1.2);transform:translateY(2px)}
[hidden]{display:none!important}

#panel{isolation:isolate;padding:24px 20px;padding-top:calc(24px + var(--safe-top));padding-bottom:calc(20px + var(--safe-bottom));height:100%;height:100dvh;box-sizing:border-box;align-items:center;justify-content:center;overflow:auto;background:#06130dd9;backdrop-filter:blur(5px)}
#panel::before,#panel::after{display:none}
#panel .card{position:relative;flex:none;box-sizing:border-box;width:min(100%,440px);max-width:440px;margin:auto;padding:26px;text-align:center;clip-path:none;border:1px solid #b59c596b;border-radius:24px;background:linear-gradient(160deg,#20382df5,#0c201bf7);box-shadow:inset 0 1px #fff0bc33,0 24px 70px #0009}
#panel #eyebrow{font:600 10px/1.3 system-ui,Arial;letter-spacing:3px;color:var(--gold);margin:0 0 9px}
#panel h1{font:700 clamp(28px,7vw,42px)/1.12 Georgia,serif;letter-spacing:0;color:var(--cream);background:none;filter:none;text-shadow:0 3px 0 #132019;margin:0}
#panel h2{font:500 13px/1.5 system-ui,Arial;letter-spacing:.5px;color:#d8e3cc;text-transform:none;margin:10px 0 14px}
#panel .gold-line{width:65%;height:1px;margin:14px auto;background:linear-gradient(90deg,transparent,#e2c57a88,transparent)}
#panel #panel-copy{font:14px/1.65 system-ui,Arial;color:#d0dbcd;margin:8px 0 18px}
#panel .actions{display:flex;flex-direction:column;gap:10px;margin:14px 0 10px}
#panel #primary,#settings-close{min-height:58px;width:100%;min-width:0;padding:13px 22px;border:1px solid #fff0b3;border-radius:16px;background:linear-gradient(#f4dba0 0%,#d8b567 48%,#ae8138 100%);color:#302414;box-shadow:inset 0 2px #fff7cfb3,inset 0 -3px #77562388,0 5px 0 #543d1f,0 9px 18px #0006;font:800 18px/1.2 system-ui,Arial;letter-spacing:2px;text-transform:uppercase;clip-path:none;text-shadow:0 1px #ffefb788;overflow:hidden}
#panel #primary::after{display:none}
#panel #secondary{min-height:48px;border:1px solid #c0aa6a77;border-radius:13px;background:#0e251e;color:var(--cream);font:600 14px system-ui,Arial;padding:12px}
.menu-tools{display:flex;align-items:center;justify-content:center;gap:8px;margin:15px 0 0;flex-wrap:wrap}
.menu-tools button,#campaign-back,#chapter-prev,#chapter-next{min-height:46px;min-width:44px;box-sizing:border-box;border:1px solid #d7bc7266;border-radius:13px;background:linear-gradient(#244336,#122a21);box-shadow:inset 0 1px #d5e2c522,0 3px 0 #05120d;color:#e5dec2;padding:10px 12px;font:600 12px system-ui,Arial;letter-spacing:.1px;text-transform:none}
.menu-tools #settings-open span{font-size:17px;margin-right:4px}
.menu-tools #help-open,.menu-tools #fullscreen{font:600 21px system-ui,Arial;padding:8px;width:46px}
.menu-tools #fullscreen::after{display:none}
#panel #save-status{font:11px/1.5 system-ui,Arial;color:#b9cbb6;margin:14px 0 0;letter-spacing:0}
#panel .keys,#panel .mobile-note,.edition{display:none}
#loading{font:12px/1.5 system-ui,Arial;color:#d5c69f;margin:9px 0 0}
#loading:empty{display:none}
#hero-stage,#home-chapter{display:none}
#castanita-rescue{width:auto;height:140px;max-width:100%;object-fit:contain;border:0;border-radius:0}

/* Home: logo, character, selected chapter, Play, and a small command row. */
#panel[data-mode=title]{background:linear-gradient(180deg,#04130f88,transparent 27%,#03140e77 56%,#03100fec);backdrop-filter:none;overflow:hidden;align-items:flex-start}
#panel[data-mode=title] .card{display:flex;flex-direction:column;width:min(100%,420px);max-width:420px;height:100%;max-height:900px;margin:auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;clip-path:none;text-align:center}
#panel[data-mode=title] #eyebrow{font-size:9px;letter-spacing:3.5px;margin:0 0 6px}
#panel[data-mode=title] h1{font:700 clamp(42px,14vw,68px)/1.08 Georgia,serif;letter-spacing:.035em;color:#f5df9e;background:linear-gradient(#fff3c7,#d6af59 82%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center;text-shadow:none;filter:drop-shadow(0 3px 0 #332818) drop-shadow(0 6px 12px #000a)}
#panel[data-mode=title] h2{font:600 9px/1.3 system-ui,Arial;letter-spacing:3px;text-transform:uppercase;color:#e3d7b2;margin:8px 0 4px;text-align:center}
#panel[data-mode=title] .gold-line{width:52%;margin:10px auto 0;flex:none}
#panel[data-mode=title] #panel-copy{display:none}
#panel[data-mode=title] #hero-stage{display:block;position:relative;flex:1;min-height:110px;max-height:42dvh;margin:9px 0 4px;overflow:visible}
#title-hero{display:block;position:relative;inset:auto;margin:auto;height:100%;width:100%;max-width:100%;object-fit:contain;object-position:center bottom;transform:none;animation:none;filter:drop-shadow(0 12px 9px #0009) drop-shadow(0 0 20px #f2da9e22)}
#title-halo{position:absolute;inset:5% 0 -4%;width:100%;height:auto;background:radial-gradient(ellipse at 50% 69%,#e5cc7233,transparent 65%);animation:none;pointer-events:none}
#panel[data-mode=title] #home-chapter{display:flex;flex:none;align-items:center;justify-content:space-between;gap:8px;border:1px solid #ddc57859;border-radius:18px;background:linear-gradient(120deg,#142e22e8,#0b201be8);box-shadow:inset 0 1px #e4d2a518,0 7px 20px #0006;padding:9px 6px;margin:0 0 4px;min-height:76px;box-sizing:border-box}
#home-chapter>div{min-width:0;flex:1}
#home-chapter-label{display:block;color:#b8c4a5;font:600 9px/1.3 system-ui,Arial;letter-spacing:2px;margin-bottom:4px}
#home-chapter-name{display:block;font:17px/1.2 Georgia,serif;color:#fff0cf;overflow-wrap:anywhere}
#chapter-prev,#chapter-next{border:0;background:none;box-shadow:none;font:30px/1 system-ui,Arial;min-width:38px;width:38px;padding:4px;color:var(--gold)}
#difficulty-cycle{border:0;border-radius:10px;background:#e2c47717;color:#e5ca89;min-height:44px;padding:8px 16px;margin:4px 0 0;font:600 10px/1.2 system-ui,Arial;letter-spacing:1px}
#panel[data-mode=title] .actions{flex:none;margin:8px 0 6px;gap:0}
#panel[data-mode=title] #primary{min-width:0;min-height:62px;padding:14px 24px;font-size:24px;letter-spacing:4px;background:linear-gradient(#f3d899,#d6ae59 54%,#ac7d35);border:1px solid #f5e2ad;clip-path:none;color:#332818;text-shadow:0 1px #ffedb099}
#panel[data-mode=title] .menu-tools{flex:none;flex-wrap:nowrap;margin:10px 0 0;gap:7px}
#panel[data-mode=title] #campaign-open,#panel[data-mode=title] #settings-open{flex:1;min-width:0;padding:8px 6px}
#panel[data-mode=title] #save-status{flex:none;margin:10px 0 0;font-size:10px;min-height:15px}
#panel[data-mode=title] #difficulty-picker{display:none!important}
#panel:not([data-mode=title]) #hero-stage{display:none}

/* Journey view: guardian portraits make each chapter identifiable. */
#panel[data-screen=chapters]{background:linear-gradient(#0b241cf2,#05140ff5);backdrop-filter:blur(10px);overflow:hidden}
#panel[data-screen=chapters] .card{visibility:hidden;pointer-events:none}
.campaign-screen{position:absolute;inset:0;padding:calc(20px + var(--safe-top)) 20px calc(18px + var(--safe-bottom));box-sizing:border-box;display:flex;flex-direction:column;max-width:1000px;margin:auto;z-index:5}
.campaign-screen header{display:flex;align-items:center;gap:14px;flex:none;margin-bottom:20px;text-align:left}
.campaign-screen .choose-label{display:block;font:600 8px system-ui,Arial;letter-spacing:2px;color:#d7be7c;margin-bottom:6px}
#panel .campaign-screen h2{font:26px/1.2 Georgia,serif;text-transform:none;margin:0;letter-spacing:0;color:#fff0c8}
#campaign-back{width:48px;font-size:28px;flex:none}
.chapter-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;min-height:0;padding:4px 3px 12px;scrollbar-width:thin;scrollbar-color:#b6a36b #132c20}
.chapter-options button{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:26px 1fr;align-items:center;min-width:0;min-height:104px;max-width:none;padding:10px 9px;border:1px solid #c3aa633d;border-radius:16px;clip-path:none;background:linear-gradient(145deg,#254133,#10261c);color:#e4e6ce;text-align:left;font:600 12px/1.4 system-ui,Arial;letter-spacing:0;text-transform:none;box-shadow:inset 0 1px #b6c8a619,0 5px 12px #0004;transform:none;transition:background .12s,border-color .12s}
.chapter-options button img{grid-row:1/3;width:48px;height:78px;object-fit:contain;object-position:center;filter:drop-shadow(0 3px 3px #0007);margin-right:5px;pointer-events:none}
.chapter-options button>span:first-of-type{font:20px/1 Georgia,serif;color:#dfc781;margin:0;display:block}
.chapter-options button .chapter-name{display:block;font:600 11px/1.3 system-ui,Arial;letter-spacing:0;color:inherit;margin:0;overflow-wrap:anywhere}
.chapter-options button .chapter-short{display:none}
.chapter-options button[aria-pressed=true]{border:2px solid #efd996;background:linear-gradient(145deg,#3c5640,#1c3324);box-shadow:0 0 20px #e8c87622,inset 0 1px #ffffcc33;transform:none;padding:9px 8px}
.chapter-options button[aria-pressed=true]::after{display:none}
.chapter-options button.completed::before{content:'✓';position:absolute;top:7px;right:8px;font:700 12px system-ui,Arial;color:#b9dba7}
.chapter-options button:hover{transform:none;background:linear-gradient(145deg,#38523e,#1b3426);border-color:#e6cd85}
.campaign-hint{flex:none;font:11px/1.5 system-ui,Arial;color:#b9cdb1;text-align:center;margin:14px 0 0}

/* The play surface has game controls, no website footer. */
#bottom-bar{display:none!important}
#hud{left:14px;right:14px;top:calc(12px + var(--safe-top));align-items:flex-start;gap:8px}
.identity{padding:9px 11px;border:1px solid #b8a56933;border-radius:14px;background:linear-gradient(140deg,#112e22e8,#081f17d9);box-shadow:0 5px 16px #0005;gap:0}
.identity{min-width:0;max-width:calc(100% - 156px)}
.identity>div{min-width:0}
.right-hud{flex:none}
.identity .place{overflow-wrap:anywhere}
.identity .crest{display:none}
.chapter{font:600 8px/1.2 system-ui,Arial;letter-spacing:2px;color:#dfc47e}
.place{font:15px/1.2 Georgia,serif;margin:5px 0 4px;color:#f0e6c9}
#objective{font:600 9px/1.4 system-ui,Arial;letter-spacing:.6px;color:#c4d4b8}
#hearts{font-size:20px;letter-spacing:4px;line-height:1.2;margin-top:3px;color:#edc086}
.right-hud{gap:8px;align-items:flex-start}
.seeds{padding:8px 9px;border:1px solid #b8a56933;border-radius:14px;background:#102d21de;gap:6px;box-shadow:0 5px 16px #0004}
.seeds img{width:20px;height:27px;object-fit:contain}
.seeds small{font:600 7px/1.2 system-ui,Arial;letter-spacing:1px;color:#c8caaa}
.seeds strong{font:20px/1.2 Georgia,serif;letter-spacing:2px;color:#f0dfb6}
#pause{width:46px;height:46px;min-height:46px;border:1px solid #d7bb716b;border-radius:14px;background:linear-gradient(#244333,#102c21);box-shadow:inset 0 1px #fff1bd22,0 4px 0 #06170f77;font:20px system-ui,Arial;color:#efdfb3}
#notice{top:calc(125px + var(--safe-top));left:8%;right:8%;font:11px/1.5 system-ui,Arial;color:#eee3bf;text-shadow:0 2px 4px #000;background:none;padding:4px}
#controls{left:14px;right:14px;bottom:calc(18px + var(--safe-bottom));gap:10px;align-items:flex-end}
.cluster{gap:8px;align-items:flex-end}
.cluster button{width:58px;height:64px;min-height:0;border:2px solid #dac3848c;border-radius:20px;background:linear-gradient(#345242e6,#193a2ddd);box-shadow:inset 0 2px #e5e2b42b,inset 0 -3px #06190f66,0 5px 0 #04180ba6;color:#f6eccf;font:700 36px/1 system-ui,Arial;padding:0;touch-action:none}
.cluster button.attack{width:62px;height:66px;font:700 10px system-ui,Arial;letter-spacing:.7px;border-radius:50%}
.cluster button.jump{width:68px;height:74px;border-color:#eed6a0b3;background:linear-gradient(#c5a469ef,#937138e8);font:700 32px system-ui,Arial;border-radius:23px}
.cluster button.held{transform:translateY(3px);filter:brightness(1.22);box-shadow:inset 0 2px 9px #06160c77,0 2px 0 #04180ba6}
.cluster button:disabled{opacity:.45}
#tutorial{top:calc(164px + var(--safe-top));border:1px solid #cdb47870;border-radius:16px;background:#102b23ed;padding:12px 14px;box-shadow:0 6px 22px #0006}

/* Native-style sheets for settings and help. */
#settings-panel{box-sizing:border-box;width:min(400px,calc(100vw - 28px));max-height:calc(100dvh - 36px - var(--safe-top) - var(--safe-bottom));padding:24px;border:1px solid #d9c28577;border-radius:24px;background:linear-gradient(145deg,#244235,#0e251d);color:#eee5c7;box-shadow:inset 0 1px #e7ddaa33,0 20px 70px #000b;overflow:auto;font:13px system-ui,Arial;touch-action:pan-y}
#settings-panel::backdrop{background:#04110ccc;backdrop-filter:blur(7px)}
.settings-crest{display:block;margin:0 auto 9px;width:38px;height:38px;border:1px solid #b4a065;border-radius:14px;background:#1c3828;color:#e4c783;font:25px/38px Georgia,serif;text-align:center}
#settings-title{font:28px Georgia,serif;margin:0 0 22px;color:#fff0c7;text-align:center}
#settings-panel label{font:600 12px system-ui,Arial;color:#ced7bc;margin:16px 0 7px}
#settings-panel input[type=range]{width:100%;height:32px;accent-color:#e6c77e;padding:0;margin:0;touch-action:pan-x}
#settings-panel select{font:14px system-ui,Arial;background:#102a20;color:#f0e7c9;border:1px solid #b8aa7059;border-radius:10px;padding:10px;min-height:44px;width:100%;margin:0}
#sound,#tutorial-replay{width:100%;min-height:44px;margin:6px 0 0;border:1px solid #c1ab6766;border-radius:12px;background:#142f23;font:600 12px system-ui,Arial;color:#e4d8ad;letter-spacing:.5px;padding:11px}
#sound[aria-pressed=true]{color:#bfcbba;background:#0a201a}
#settings-close{margin:20px 0 5px;min-height:50px;font-size:14px;letter-spacing:2px}
#help-panel{background:#04110ded;padding:24px;overflow:auto;backdrop-filter:blur(8px)}
#help-panel>div{max-width:480px;margin:auto}
#help-panel h2{font:28px Georgia,serif;color:#f1d9a3}
#help-panel p{font:13px/1.7 system-ui,Arial;color:#cbd7c1}
#help-close{min-height:48px;min-width:160px;border:1px solid #e4cc90;border-radius:13px;background:linear-gradient(#dac186,#af8b4b);color:#332719;font:700 14px system-ui,Arial;padding:12px}
#scene-transition{position:fixed;inset:0;z-index:50;background:#020b09;display:grid;place-items:center;opacity:0;pointer-events:none}
#transition-label{font:18px Georgia;letter-spacing:2px;color:#e2cd9d;text-align:center;padding:30px}
#difficulty-picker{justify-content:center;font-family:system-ui,Arial;margin:8px 0}
#difficulty-select{border-radius:10px;background:#10291f;min-height:44px;font:14px system-ui,Arial}
#difficulty-hint{flex-basis:100%;font:10px system-ui,Arial;min-width:0}

@media(min-width:760px) and (orientation:landscape){
 #panel[data-mode=title]{padding:26px 6vw;background:linear-gradient(90deg,#06150dd9,transparent 80%),linear-gradient(0deg,#04130ccc,transparent 55%)}
 #panel[data-mode=title] .card{position:static;width:49%;max-width:480px;height:auto;margin:0 auto 0 0;max-height:100%;}
 #panel[data-mode=title] #hero-stage{position:absolute;left:58%;right:3%;top:8%;bottom:7%;min-height:0;max-height:none;margin:0;}
 #panel[data-mode=title] h1{font-size:clamp(52px,7.8vw,108px)}
 #panel[data-mode=title] .gold-line{margin:18px auto}
 #panel[data-mode=title] #home-chapter{margin-top:12px}
 .chapter-options{grid-template-columns:repeat(5,minmax(0,1fr));}
 .chapter-options button{min-height:140px;grid-template-columns:1fr;text-align:center;grid-template-rows:76px 24px 1fr;padding:10px}
 .chapter-options button img{grid-row:auto;width:100%;height:76px;object-fit:contain;margin:0}
 .chapter-options button[aria-pressed=true]{padding:9px}
 #hud{left:22px;right:22px;top:calc(16px + var(--safe-top))}
 #controls{left:24px;right:24px}
 #notice{top:116px}
}
@media(orientation:landscape) and (max-height:540px){
 #panel{padding:14px 20px;}
 #panel[data-mode=title]{padding:16px 5vw;}
 #panel[data-mode=title] .card{position:static;width:54%;max-width:490px;height:auto;margin:0 auto 0 0;}
 #panel[data-mode=title] h1{font-size:44px;}
 #panel[data-mode=title] #eyebrow{font-size:8px;margin:0 0 2px;}
 #panel[data-mode=title] h2{font-size:8px;margin:6px 0;}
 #panel[data-mode=title] .gold-line{display:none}
 #panel[data-mode=title] #hero-stage{position:absolute;left:62%;right:4%;top:6%;bottom:6%;min-height:0;max-height:none;margin:0;}
 #panel[data-mode=title] #home-chapter{min-height:66px;margin:9px 0 0;padding:4px;}
 #panel[data-mode=title] #primary{min-height:52px;font-size:20px;}
 #panel[data-mode=title] .menu-tools{margin:8px 0 0;}
 #panel[data-mode=title] #save-status{margin:7px 0 0;font-size:9px;}
 #panel:not([data-mode=title]) .card{padding:18px;width:min(94%,480px);}
 #panel:not([data-mode=title]) h1{font-size:28px;}
 #panel:not([data-mode=title]) h2{margin:6px 0;font-size:12px;}
 #panel:not([data-mode=title]) #panel-copy{margin:8px 0;font-size:12px;line-height:1.4;}
 #panel:not([data-mode=title]) .gold-line{display:none}
 #panel:not([data-mode=title]) .actions{flex-direction:row;}
 #panel #primary,#panel #secondary{min-height:48px;}
 #panel:not([data-mode=title]) #secondary{flex:1;min-width:120px;}
 #panel:not([data-mode=title]) #primary{flex:1;}
 #panel .menu-tools{margin-top:8px;}
 .campaign-screen{padding:14px 22px;}
 .campaign-screen header{margin-bottom:10px;}
 #panel .campaign-screen h2{font-size:23px;}
 .chapter-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;}
 .chapter-options button{min-height:94px;grid-template-columns:42px 1fr;grid-template-rows:22px 1fr;text-align:left;}
 .chapter-options button img{grid-row:1/3;width:40px;height:65px;}
 .chapter-options button .chapter-name{font-size:10px;}
 .campaign-hint{margin:6px 0 0;}
 .identity{padding:6px 10px;}
 .place{font-size:13px;margin:3px 0;}
 #hearts{font-size:17px;}
 #notice{top:103px;font-size:10px;}
 #tutorial{top:130px;width:330px;padding:8px 12px;}
 #controls{bottom:calc(14px + var(--safe-bottom));}
 .cluster button{height:58px;}
 .cluster button.attack{height:60px;}
 .cluster button.jump{height:66px;}
}
@media(max-width:380px) and (orientation:portrait){
 #panel{padding-left:16px;padding-right:16px;}
 #home-chapter-name{font-size:15px;}
 #hud{left:10px;right:10px;gap:5px;}
 .identity{padding:7px 9px;}
 .identity{max-width:calc(100% - 142px);}
 .place{font-size:13px;}
 .right-hud{gap:5px;}
 .seeds{padding:8px 7px;gap:4px;}
 .seeds img{width:16px;}
 .seeds strong{font-size:17px;letter-spacing:1px;}
 .seeds small{font-size:6px;letter-spacing:.5px;}
 #pause{width:44px;height:44px;}
 #controls{left:10px;right:10px;gap:8px;}
 .cluster{gap:6px;}
 .cluster button{width:49px;height:60px;}
 .cluster button.attack{width:54px;height:60px;font-size:9px;}
 .cluster button.jump{width:59px;height:68px;}
 .campaign-screen{padding-left:14px;padding-right:14px;}
 .chapter-options{gap:7px;}
 .chapter-options button{grid-template-columns:42px 1fr;padding:8px 6px;min-height:94px;}
 .chapter-options button img{width:40px;height:72px;}
 .chapter-options button[aria-pressed=true]{padding:7px 5px;}
 .chapter-options button .chapter-name{font-size:10px;}
}
@media(max-height:630px) and (orientation:portrait){
 #panel[data-mode=title]{padding-top:calc(14px + var(--safe-top));padding-bottom:calc(14px + var(--safe-bottom));}
 #panel[data-mode=title] h1{font-size:42px;}
 #panel[data-mode=title] #eyebrow{font-size:8px;margin-bottom:3px;}
 #panel[data-mode=title] h2{font-size:8px;margin:5px 0;}
 #panel[data-mode=title] .gold-line{display:none}
 #panel[data-mode=title] #hero-stage{min-height:66px;max-height:28dvh;margin:4px 0;}
 #panel[data-mode=title] #home-chapter{min-height:68px;padding:4px;}
 #panel[data-mode=title] #primary{min-height:54px;font-size:21px;}
 #panel[data-mode=title] #save-status{display:none}
 #panel[data-mode=title] .menu-tools{margin-top:8px;}
 #panel[data-mode=title]{overflow:auto;}
 #panel[data-mode=title] .card{min-height:365px;}
}
@media(prefers-reduced-motion:reduce){button,.chapter-options button,#title-hero,#title-halo{animation:none!important;transition:none!important}}
html[data-motion=reduced] button,html[data-motion=reduced] #title-hero{transition:none!important;animation:none!important}