:root{--red:#ef3426;--orange:#ff7a19;--gold:#ffd94d;--ink:#2b1710;--cream:#fff0bf;--green:#08793f;--blue:#24c6ef}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#180a08;color:#fff;font-family:monospace;touch-action:none}button,input{font:inherit}button{cursor:pointer}#game-shell{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#160908}#game{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111;image-rendering:pixelated}.screen,

.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:20}.screen.show{display:flex}.screen{background:#111}.world-art{position:absolute;width:100%;height:100%;object-fit:cover;filter:saturate(1.15) brightness(.72);transform:scale(1.02)}.start-card{position:relative;text-align:center;padding:1rem 1.5rem 1.35rem;border-radius:1.25rem;background:linear-gradient(180deg,rgba(24,8,3,.18),rgba(24,8,3,.85));text-shadow:0 3px 0 #2b0d05,0 5px 14px #000}.eyebrow{margin:0 0 .3rem;font-size:clamp(.72rem,1.5vw,1rem);font-weight:900;letter-spacing:.14em;color:var(--gold)}h1{margin:0;font-size:clamp(3.2rem,9vw,7rem);line-height:.78;letter-spacing:-.06em}h1 span{display:block;color:#ff516a;-webkit-text-stroke:2px #50110b;text-shadow:3px 4px 0 #ff9a19,6px 8px 0 #53100c}h2{margin:.2rem 0 .5rem;font-size:clamp(1.7rem,4vw,3rem)}.tagline{font-weight:900;letter-spacing:.08em}.wood-button,#unlock-btn,.dialog button{border:3px solid #6e2c0e;border-radius:.7rem;padding:.72rem 1.25rem;color:#291108;font-weight:1000;background:linear-gradient(#ffd866,#f79a27);box-shadow:0 4px 0 #6e2c0e,0 7px 18px #0008}.wood-button:active,#unlock-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #6e2c0e}.unlock-card{display:grid;grid-template-columns:minmax(220px,42%) 1fr;width:min(850px,92vw);height:min(460px,88vh);background:linear-gradient(135deg,#68120c,#190706 60%);border:4px solid #ffbf31;border-radius:1.4rem;overflow:hidden;box-shadow:0 20px 60px #000}.unlock-card>img{width:100%;height:100%;object-fit:cover}.unlock-copy{align-self:center;padding:clamp(1rem,4vw,2.5rem)}.unlock-copy p{max-width:32rem}.unlock-copy label{display:block;font-size:.78rem;font-weight:900;letter-spacing:.12em;color:#ffda67}.code-row{display:flex;gap:.5rem;margin:.4rem 0}.code-row input{min-width:0;flex:1;border:3px solid #ffbf31;border-radius:.65rem;padding:.7rem;background:#fff6d5;color:#431107;font-weight:900;text-transform:uppercase}.text-button{border:0;background:none;color:#ffd55d;text-decoration:underline;padding:.6rem 0}.story-screen{}.story-card{width:min(620px,90vw);padding:1.5rem 2rem;text-align:center;border:4px solid #ffcd42;border-radius:1.5rem;background:radial-gradient(circle at 50% 0,#aa2518,#260907 62%);box-shadow:0 20px 70px #000}.story-card p{margin:.6rem auto;max-width:34rem}.stone{font-size:3rem;color:#ffd72e;text-shadow:0 0 20px #fff,0 0 40px #ff6b00}.pele-quote{font-weight:900;color:#ffdc60;font-style:italic}#hud{position:absolute;z-index:8;top:max(.55rem,env(safe-area-inset-top));left:max(.65rem,env(safe-area-inset-left));right:max(.65rem,env(safe-area-inset-right));display:flex;align-items:center;gap:.55rem;pointer-events:none}.hidden{display:none!important}.hud-pill,.zone-label,.icon-button{border:2px solid #fff6;border-radius:999px;background:#23110bd9;padding:.42rem .7rem;font-size:.78rem;font-weight:1000;box-shadow:0 2px 8px #0007}.hearts{color:#ff4961;letter-spacing:.08em}.zone-label{margin:auto;color:#fff0ae;letter-spacing:.1em}.icon-button{pointer-events:auto;color:#fff;background:#7c210e}.spark{color:#ffd937}.quest{position:absolute;z-index:7;left:max(.75rem,env(safe-area-inset-left));top:4.1rem;width:190px;padding:.5rem .7rem;border-left:4px solid #ffc42f;background:#170b07c9;border-radius:0 .55rem .55rem 0}.quest span{display:block;font-size:.58rem;letter-spacing:.14em;color:#ffce3b}.quest strong{font-size:.72rem}.dialog{position:absolute;z-index:15;bottom:18%;left:50%;transform:translateX(-50%);width:min(620px,88vw);padding:1rem 1.2rem;border:3px solid #ffce4b;border-radius:1rem;background:#2b120cf5;box-shadow:0 12px 30px #0008}.dialog p{margin:.1rem 0 .8rem}.dialog button{float:right;padding:.4rem .8rem;font-size:.74rem}#toast{position:absolute;z-index:13;top:19%;left:50%;transform:translate(-50%,-10px);opacity:0;padding:.55rem .9rem;border:2px solid #fff7;border-radius:999px;background:#1b0c08e6;font-weight:900;transition:.25s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}#touch-controls{position:absolute;z-index:9;inset:0;pointer-events:none}#stick-zone{position:absolute;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));width:128px;height:128px;pointer-events:auto}#stick{position:absolute;inset:14px;border:3px solid #fff7;border-radius:50%;background:#130b0866}.stick-knob,#stick span{position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);border:2px solid #fff9;border-radius:50%;background:#fff5}
.action-cluster{position:absolute;right:max(18px,calc(env(safe-area-inset-right) + 18px));bottom:max(14px,env(safe-area-inset-bottom));width:136px;height:140px;pointer-events:auto}.action{position:absolute;right:0;bottom:0;width:64px;height:64px;border:3px solid #fff8;border-radius:50%;color:#fff;font-weight:1000;font-size:.62rem;background:linear-gradient(#ff594a,#a4150c);box-shadow:0 4px 0 #66110c}.action span{display:block;font-size:.46rem}.action.fire{right:72px;bottom:0;width:62px;height:62px;background:linear-gradient(#ffba2f,#e83b0d);font-size:1.05rem}.action.boost{right:72px;bottom:74px;width:62px;height:62px;background:linear-gradient(#ff9b21,#d9270c);font-size:1.05rem}.action.small{right:7px;bottom:80px;width:50px;height:50px;background:#1c84b8}.action:active{transform:translateY(3px);box-shadow:0 2px 0 #66110c}
.power{color:#fff7a8;border-color:#ffb32f;background:#7b210de8;white-space:nowrap}
.overlay{display:flex;background:#120807db;backdrop-filter:blur(8px);z-index:18}.map-card{position:relative;width:min(780px,92vw);height:min(470px,90vh);padding:1rem 1.3rem;border:4px solid #ffcb42;border-radius:1.4rem;background:linear-gradient(#672015,#1e0a07);text-align:center}.close{position:absolute;right:.7rem;top:.5rem;border:0;background:none;color:#fff;font-size:2rem}.region-map{position:relative;height:72%;margin:.3rem auto;background:radial-gradient(ellipse at 50% 15%,#d9321b 0 10%,transparent 11%),linear-gradient(145deg,#284a24,#0e261c);border:3px solid #a44c22;border-radius:48% 44% 40% 52%;overflow:hidden}.route{position:absolute;width:12px;height:88%;left:50%;top:6%;transform:translateX(-50%) rotate(4deg);background:repeating-linear-gradient(#f6d182 0 12px,#c68136 13px 18px);border-radius:99px}.map-node{position:absolute;display:flex;align-items:center;gap:.3rem;padding:.28rem .45rem;border:2px solid #5d250f;border-radius:.55rem;background:#ffd985;color:#351407;font-size:.67rem;font-weight:900;box-shadow:0 3px 0 #5d250f}.map-node b{font-size:1.15rem}.summit{left:43%;top:3%}.falls{left:18%;top:26%}.caverns{right:14%;top:32%}.fields{left:52%;top:51%}.village{left:26%;top:69%}.gate{left:50%;bottom:2%}.map-note{font-size:.72rem;color:#ffdd7b;margin:.15rem}.rotate{display:none;position:absolute;z-index:99;inset:0;background:#240b08;color:#fff;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:.45rem}.rotate div{font-size:4rem;color:#ffc632}.rotate span{color:#ffd995;font-size:.85rem}
@media (orientation:portrait) and (max-width:700px){.rotate{display:flex}}
@media (max-height:520px){.start-card{transform:scale(.86)}.unlock-card{height:92vh}.unlock-copy{padding:1rem}.unlock-copy h2{font-size:1.5rem}.unlock-copy p{margin:.35rem 0}.story-card{transform:scale(.88)}.map-card{height:92vh}.quest{top:3.4rem}}
@media (max-width:900px),(max-height:600px),(pointer:coarse){
  #stick-zone{left:max(16px,calc(var(--visual-left,0px) + clamp(160px,24vw,320px)));bottom:max(12px,env(safe-area-inset-bottom));width:104px;height:104px}
  #stick{inset:9px}.stick-knob,#stick span{width:40px;height:40px}
  .action-cluster{right:110px!important;bottom:18px;width:136px;height:140px;transform:none}
  .action{width:64px;height:64px;font-size:.68rem;box-shadow:0 4px 0 #66110c}
  .action.fire{right:72px;bottom:0;width:62px;height:62px;font-size:1.05rem}
  .action.boost{right:72px;bottom:74px;width:62px;height:62px;font-size:1.05rem}
  .action.small{right:9px;bottom:80px;width:46px;height:46px}
  .action span{font-size:.48rem}
}
.zone-label{display:none!important}