:root { color-scheme: dark; --ink:#38233f; --cream:#fff5dc; --coral:#f67767; --berry:#b93f68; }
* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#24182e; color:var(--cream); font-family:ui-rounded,"Trebuchet MS",sans-serif; }
button { border:0; color:inherit; cursor:pointer; font:inherit; }
button:disabled { cursor:wait; opacity:.65; }
button:focus-visible { outline:4px solid #fff; outline-offset:3px; }
#app, #game-shell { position:relative; width:100%; height:100%; overflow:hidden; }
#game-shell { max-width:1600px; margin:auto; background:#82c9d4; }
#game-canvas { display:block; width:100%; height:100%; object-fit:contain; image-rendering:auto; }
#hud { display:none; position:absolute; z-index:8; top:max(8px,env(safe-area-inset-top)); left:64px; right:64px; justify-content:space-between; align-items:start; pointer-events:none; text-shadow:0 2px var(--ink); }
body.playing #hud { display:flex; }
.hero-health, .mission { padding:7px 14px; border:2px solid #fff8; border-radius:18px; background:#38233fbb; box-shadow:0 4px 14px #24182e55; }
.hero-health { min-width:130px; }
.hero-health span { display:block; color:#ff7f87; letter-spacing:3px; }
.hero-health.dudu { text-align:right; }
.mission { text-align:center; }
.mission span { display:block; font-size:.82rem; }
.mission i { font-style:normal; }
.round { display:none; position:absolute; z-index:10; top:10px; width:42px; height:42px; border:2px solid #fff7; border-radius:50%; background:#38233fcc; }
body.playing .round { display:block; }
#pause-button { left:10px; }
#sound-button { right:10px; }
#install-button, #ios-install { position:absolute; z-index:20; right:18px; bottom:18px; max-width:260px; padding:11px 16px; border:2px solid #fff8; border-radius:14px; background:#38233fee; }
#ios-install { font-size:.85rem; }
body.playing #install-button, body.playing #ios-install { display:none; }
.screen { display:none; position:absolute; inset:0; z-index:15; }
.screen.active { display:flex; }
.screen::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,#3a2347e8 0 45%,#7fc6c9aa); }
#screen-menu { align-items:center; padding:6vw; }
.menu-copy { position:relative; z-index:2; width:min(46vw,580px); }
.eyebrow { color:#ffd87f; font-size:.72rem; font-weight:bold; letter-spacing:.22em; }
.menu-copy h1 { margin:.12em 0 .3em; font-size:clamp(3.2rem,8vw,8rem); line-height:.73; text-shadow:0 6px #8e3658; }
.menu-copy h1 em { color:#ffd87f; font-style:normal; }
.menu-copy > p:not(.eyebrow) { max-width:34rem; font-size:clamp(1rem,2vw,1.4rem); }
.keyboard-hints { font-size:.9rem!important; }
.menu-scene { position:absolute; z-index:2; right:5vw; bottom:8vh; display:flex; align-items:center; filter:drop-shadow(0 15px 18px #28172c88); }
.menu-scene img { width:clamp(130px,19vw,290px); height:clamp(130px,19vw,290px); object-fit:contain; }
.menu-scene span { color:#ff7b8a; font-size:clamp(2rem,5vw,5rem); }
.primary, .secondary { display:block; min-height:48px; margin:10px 0; padding:12px 22px; border-radius:16px; font-weight:800; }
.primary { background:linear-gradient(#ff8976,#e04c65); box-shadow:0 5px #812f55; }
.secondary { border:2px solid #fff8; background:#fff3; }
.map-panel, .result { position:relative; z-index:2; width:min(900px,94vw); margin:auto; padding:20px; }
.map-panel h2 { margin:3px 0 12px; }
#adventure-map { display:grid; grid-template-columns:repeat(5,minmax(100px,1fr)); gap:10px; align-items:end; }
.map-stop { min-height:150px; padding:10px 6px; border:3px solid #fff9; border-radius:48% 48% 20px 20px; background:linear-gradient(#ffffff22,#3a2347cc); box-shadow:0 8px #21162b; text-align:center; }
.map-stop:nth-child(even) { transform:translateY(24px); }
.map-stop.locked { filter:grayscale(1); opacity:.55; }
.map-stop span, .map-stop small { display:block; }
.map-stop .icon { font-size:2.2rem; }
.result { max-width:520px; border:3px solid #fff8; border-radius:30px; background:#38233fed; text-align:center; }
.result .primary, .result .secondary { width:100%; }
#result-stars { color:#ffd867; font-size:3rem; }
.touch-controls { display:none; position:absolute; z-index:9; bottom:max(7px,env(safe-area-inset-bottom)); gap:6px; grid-template-columns:repeat(2,54px); }
body.playing .touch-controls { display:grid; }
.touch-controls.left { left:max(8px,env(safe-area-inset-left)); }
.touch-controls.right { right:max(8px,env(safe-area-inset-right)); }
.touch-controls button { min-width:52px; min-height:52px; border:2px solid #fff8; border-radius:17px; background:#392640cc; box-shadow:0 4px #24182eaa; font-size:1.35rem; touch-action:none; }
.touch-controls .jump { background:#e09e3ddd; }
.touch-controls .attack { background:#bf4567ee; }
.touch-controls button.pressed { transform:translateY(3px); box-shadow:none; }
#toast { position:absolute; z-index:30; left:50%; bottom:118px; padding:10px 18px; border-radius:18px; background:#38233fdd; opacity:0; transform:translateX(-50%) translateY(20px); transition:.2s; }
#toast.show { opacity:1; transform:translateX(-50%); }
#rotate-device { display:none; }
@media (orientation:portrait) { #rotate-device { display:flex; position:fixed; inset:0; z-index:99; align-items:center; justify-content:center; flex-direction:column; background:#38233f; text-align:center; } #rotate-device b { font-size:4rem; } }
@media (hover:hover) and (pointer:fine) { .touch-controls { display:none!important; } .keyboard-hints { display:block; } }
@media (any-pointer:coarse) { .keyboard-hints { display:none; } body.playing #game-canvas { height:calc(100% - 112px); } }
@media (max-width:700px), (max-height:380px) { #hud { top:3px; left:48px; right:48px; } .hero-health,.mission { min-width:0; padding:3px 7px; font-size:.7rem; } .mission span { font-size:.68rem; } .map-panel { padding:8px; overflow:auto; } #adventure-map { grid-template-columns:repeat(5,minmax(92px,1fr)); } .map-stop { min-height:105px; padding:5px; font-size:.72rem; } .map-stop:nth-child(even) { transform:none; } .menu-copy h1 { font-size:3rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; } .map-stop:nth-child(even) { transform:none; } }