:root{color-scheme:dark;--gold:#d9b779;--ink:#102523;--cream:#f5e5c8}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#081716;color:var(--cream);font-family:Georgia,'Times New Roman',serif}
body{touch-action:none;user-select:none;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;color:var(--cream)}
button:focus-visible{outline:2px solid #f5dc9f;outline-offset:5px}
button:disabled{opacity:.5;cursor:wait}
[hidden]{display:none!important}
canvas{display:block;position:fixed;inset:0;width:100%;height:100%;height:100dvh}
html:fullscreen,html:fullscreen body{width:100%;height:100%;background:#081716}
#hud{position:fixed;top:max(22px,env(safe-area-inset-top));left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));display:flex;justify-content:space-between;pointer-events:none;text-shadow:0 2px 8px #061311}
.identity{display:flex;gap:16px;align-items:center}
.crest{font-size:30px;border:1px solid #d9b77999;width:54px;height:60px;display:grid;place-items:center;border-radius:45% 45% 48% 48%;background:#142c2788;color:var(--gold)}
.chapter{display:block;color:var(--gold);font:10px Arial;letter-spacing:3px}
.place{font-size:18px;display:block;margin:5px 0}
#hearts{color:#ddad78;letter-spacing:6px;font-size:19px}
.right-hud{display:flex;gap:20px;align-items:flex-start}
.seeds{display:flex;gap:8px;align-items:center}
.seeds img{width:26px;height:36px;object-fit:contain}
.seeds small{display:block;font:9px Arial;letter-spacing:2px;color:#ddd0ae}
.seeds strong{display:block;font-weight:400;font-size:24px;letter-spacing:3px;margin-top:4px}
#pause{pointer-events:auto;border:1px solid #cfb77a66;background:#122c2688;width:40px;height:40px;border-radius:50%;font:18px Arial}
#notice{position:fixed;top:116px;left:10%;right:10%;text-align:center;font:13px Arial;letter-spacing:1px;text-shadow:0 2px 10px #000;color:#fff1bf;pointer-events:none}
#bottom-bar{position:fixed;bottom:max(15px,env(safe-area-inset-bottom));left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));display:flex;align-items:center;gap:12px;font:10px Arial;letter-spacing:1.5px;color:#d6c4a0}
.trail{height:2px;background:#c4b88f33;max-width:240px;flex:1}
.trail span{display:block;height:100%;background:#d9b779}
#sound{margin-left:auto;font:10px Arial;letter-spacing:1px;border:0;background:none;color:#d6c4a0}
#fullscreen{flex:none;border:1px solid #d9b77966;border-radius:6px;background:#102523aa;color:var(--cream);font:23px Arial;width:36px;height:32px;line-height:1;padding:0}
#controls{position:fixed;bottom:max(54px,env(safe-area-inset-bottom));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));display:flex;justify-content:space-between;pointer-events:none}
.cluster{display:flex;gap:12px;align-items:flex-end;pointer-events:auto}
.cluster button{width:65px;height:65px;border-radius:50%;border:1px solid #d9b77977;background:#12312ac9;font:36px Georgia;box-shadow:inset 0 0 16px #e3c4840a,0 3px 18px #0003}
.cluster button.attack{font:10px Arial;letter-spacing:1px;width:70px;height:70px}
.cluster button.throw{background:#354b2dcc}
.cluster button.throw:disabled{opacity:.42;cursor:default}
.cluster button.jump{background:#816335c9;width:76px;height:76px}
.cluster button.held{background:#b58d45;color:#fff}
#panel{position:fixed;inset:0;display:flex;align-items:center;padding:7vw;background:linear-gradient(90deg,rgba(5,19,17,.94) 0%,rgba(7,23,19,.8) 33%,rgba(7,23,19,.35) 70%,rgba(7,23,19,.06) 100%)}
.card{max-width:570px;width:100%;padding-bottom:25px}
#eyebrow{font:10px Arial;letter-spacing:4px;color:var(--gold);margin-bottom:26px}
h1{font-size:clamp(40px,6vw,94px);font-weight:400;letter-spacing:4px;line-height:1.05;margin:0;color:#f2dbac;text-shadow:0 4px 28px #040f0b}
h2{font-size:clamp(14px,1.7vw,22px);font-weight:400;letter-spacing:1px;color:#d1c3a5;margin:15px 0 25px}
.gold-line{width:70px;height:1px;background:var(--gold);margin:25px 0}
#panel-copy{font:15px/1.8 Arial;color:#bdc5ae;max-width:340px}
.actions{display:flex;gap:12px;margin:30px 0}
#primary,#secondary{padding:16px 28px;border:1px solid var(--gold);background:linear-gradient(120deg,#d6b778,#a98442);color:#14271d;font-size:15px;letter-spacing:1px}
#secondary{background:#132922;color:var(--cream)}
.keys{font:11px Arial;color:#a2b5a3}
.keys span{margin:0 8px}
kbd{padding:4px 6px;display:inline-block;border:1px solid #5c706255;border-radius:3px;font:10px Arial;margin-right:4px}
.mobile-note,#loading{font:10px Arial;color:#8da897;letter-spacing:.6px;margin-top:20px}
.edition{position:absolute;bottom:24px;right:30px;font:9px Arial;letter-spacing:2px;color:#97ad9c}
@media(hover:hover) and (pointer:fine) and (min-width:1100px) and (min-height:650px){#controls{opacity:.28}
#controls:hover{opacity:1}
}
@media(max-height:500px){#hud{top:max(12px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}
.crest{display:none}
.chapter{font-size:8px}
.place{font-size:13px}
#hearts{font-size:14px}
.seeds strong{font-size:18px}
#notice{top:76px;font-size:11px}
.card{padding:0}
#eyebrow{margin-bottom:12px;font-size:8px}
h1{font-size:45px}
h2{margin:8px 0;font-size:14px}
.gold-line{margin:12px 0}
#panel-copy{font-size:12px;max-width:330px}
.actions{margin:16px 0}
#primary,#secondary{padding:11px 20px;font-size:12px}
.mobile-note{display:none}
#controls{bottom:calc(26px + env(safe-area-inset-bottom,0px))}
.cluster button{width:52px;height:52px}
.cluster button.attack{width:57px;height:57px}
.cluster button.jump{width:62px;height:62px}
}
@media(max-width:600px){#hud{left:max(15px,env(safe-area-inset-left));right:max(15px,env(safe-area-inset-right))}
.crest{display:none}
.place{font-size:13px}
.chapter{font-size:8px}
.seeds small{font-size:8px}
.seeds strong{font-size:19px}
.right-hud{gap:10px}
#panel{padding:26px}
.card{max-width:400px}
h1{font-size:48px}
.keys{font-size:10px}
.edition{left:26px;right:auto;font-size:8px}
#bottom-bar{left:18px;right:18px}
#checkpoint{max-width:125px;letter-spacing:.5px}
#controls{left:15px;right:15px}
.cluster{gap:8px}
.cluster button{width:55px;height:55px}
.cluster button.attack{width:60px;height:60px}
.cluster button.jump{width:64px;height:64px}
}

@media(max-width:600px) and (orientation:portrait){
#notice{top:92px;left:6%;right:6%;font-size:11px}
#controls{bottom:calc(48px + env(safe-area-inset-bottom,0px))}
#bottom-bar{bottom:max(12px,env(safe-area-inset-bottom))}
.cluster button{background:#0c201dcc;backdrop-filter:blur(4px)}
.cluster button.jump{background:#816335dc}
}

/* Buttons sit below the calibrated ground line, not over Castano's boots. */
@media(max-height:600px) and (orientation:landscape){
#controls{bottom:calc(38px + env(safe-area-inset-bottom,0px));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}
.cluster{gap:10px}
.cluster button{width:52px;height:52px;background:#12312aaa}
.cluster button.attack{width:57px;height:57px}
.cluster button.jump{width:62px;height:62px;background:#816335bb}
#bottom-bar{bottom:max(6px,env(safe-area-inset-bottom))}
#fullscreen{width:32px;height:26px;font-size:21px}
}

@media(min-width:2560px) and (min-height:1000px){
#hud{top:44px;left:56px;right:56px}
.identity{gap:28px}
.crest{font-size:54px;width:96px;height:106px}
.chapter{font-size:18px;letter-spacing:5px}
.place{font-size:34px;margin:8px 0}
#hearts{font-size:34px;letter-spacing:11px}
.right-hud{gap:34px}
.seeds{gap:14px}
.seeds img{width:48px;height:64px}
.seeds small{font-size:16px;letter-spacing:4px}
.seeds strong{font-size:42px;letter-spacing:6px;margin-top:7px}
#pause{width:72px;height:72px;font-size:30px}
#notice{top:205px;font-size:23px;letter-spacing:2px}
#bottom-bar{bottom:30px;left:56px;right:56px;gap:30px;font-size:18px;letter-spacing:2px}
.trail{height:4px;max-width:480px}
#sound{font-size:18px;letter-spacing:2px}
#controls{bottom:94px;left:48px;right:48px}
.cluster{gap:20px}
.cluster button{width:112px;height:112px;font-size:62px;border-width:2px}
.cluster button.attack{width:122px;height:122px;font-size:17px}
.cluster button.jump{width:134px;height:134px}
.card{max-width:980px}
#eyebrow{font-size:17px;letter-spacing:7px}
h2{font-size:34px}
#panel-copy{font-size:25px;max-width:620px}
.keys{font-size:19px}
.mobile-note{font-size:18px}
#primary,#secondary{padding:25px 45px;font-size:25px}
.edition{font-size:16px;letter-spacing:4px;bottom:42px;right:54px}
}
/* Three action buttons remain separate, with real 44px touch targets even
   on compact phones. One row keeps the camera's control-top anchor stable. */
@media(max-width:360px){
 #controls{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right))}
 .cluster{gap:6px}
 .cluster button{width:48px;height:48px;font-size:30px}
 .cluster button.attack{width:46px;height:46px;font-size:8px;letter-spacing:.5px}
 .cluster button.jump{width:52px;height:52px}
}

/* Immediate native touch controls, without browser tap overlays. */
button,a,[data-key]{-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#controls,#controls button{touch-action:none;-webkit-touch-callout:none}
#controls button{backdrop-filter:none;transition:none}
#controls button:active,#controls button.held{background:#b58d45;color:#fff4da}

#castanita-rescue{width:120px;max-height:150px;object-fit:cover;object-position:top;border-radius:12px;margin:8px auto;display:block}#castanita-rescue[hidden]{display:none}