html, body { margin: 0; height: 100%; overflow: hidden; background: #cfe3e6; position: fixed; inset: 0; touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif; }
#c { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(40,22,10,0.38) 100%); }
#hud { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); display: flex; align-items: center; gap: 10px; pointer-events: none; }
#counter { display: flex; align-items: center; gap: 8px; background: #f3e6c8; color: #4a3020; font-weight: bold; font-size: 20px; padding: 6px 14px 6px 8px; border-radius: 22px; border: 2px dashed #8a5a3a; box-shadow: 0 3px 0 rgba(60,30,10,.25); }
.btnicon { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7a, #d84040); position: relative; box-shadow: inset 0 0 0 3px rgba(0,0,0,.12); }
.btnicon::before { content: ""; position: absolute; inset: 7px; background: radial-gradient(circle at 25% 25%, #3a1a14 2px, transparent 2.5px), radial-gradient(circle at 75% 25%, #3a1a14 2px, transparent 2.5px), radial-gradient(circle at 25% 75%, #3a1a14 2px, transparent 2.5px), radial-gradient(circle at 75% 75%, #3a1a14 2px, transparent 2.5px); }
#pills { display: flex; gap: 6px; margin: 0 auto; pointer-events: auto; }
.pill { display: flex; align-items: center; gap: 6px; border: 2px dashed rgba(90,60,30,.5); background: rgba(243,230,200,.78); color: #4a3020; font: bold 15px inherit; font-family: inherit; padding: 6px 12px; border-radius: 18px; cursor: pointer; opacity: .75; }
.pill.active { opacity: 1; background: #fff4d8; border-color: #8a5a3a; transform: translateY(-1px) scale(1.06); box-shadow: 0 3px 0 rgba(60,30,10,.25); }
.pill .dot { width: 12px; height: 12px; border-radius: 50%; }
#dbgbtn { pointer-events: auto; font: bold 12px monospace; background: rgba(30,20,10,.55); color: #fff; border: 0; border-radius: 8px; padding: 6px 8px; }
#toast { position: fixed; top: 22%; left: 50%; transform: translate(-50%, -10px); background: #f3e6c8; color: #4a3020; font-weight: bold; font-size: 22px; padding: 8px 18px; border-radius: 14px; border: 2px dashed #8a5a3a; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; white-space: nowrap; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#debug { position: fixed; top: calc(56px + env(safe-area-inset-top)); right: 10px; background: rgba(20,14,8,.78); color: #d8ffd0; font: 12px/1.35 monospace; padding: 8px 10px; border-radius: 8px; display: none; z-index: 5; }
#debug.show { display: block; } #debug pre { margin: 0 0 6px; } #debug .row { display: flex; gap: 4px; } #debug button { font: 11px monospace; padding: 3px 6px; }
#keys { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); color: rgba(60,40,20,.75); font-size: 13px; background: rgba(243,230,200,.6); padding: 4px 10px; border-radius: 10px; pointer-events: none; white-space: nowrap; }
body.touch-on #keys { display: none; }
#touch { position: fixed; inset: 0; pointer-events: none; display: none; }
body.touch-on #touch { display: block; }
.cluster { position: absolute; bottom: calc(78px + env(safe-area-inset-bottom)); display: grid; gap: 12px; pointer-events: none; }
.cluster.left { left: calc(14px + env(safe-area-inset-left)); grid-template-columns: 76px 76px; grid-template-areas: "b f" "l r"; }
.cluster.right { right: calc(14px + env(safe-area-inset-right)); grid-template-columns: 76px 88px; grid-template-areas: "s a" "g j"; align-items: end; }
#t-back { grid-area: b; } #t-front { grid-area: f; } #t-left { grid-area: l; } #t-right { grid-area: r; }
#t-switch { grid-area: s; } #abil { grid-area: a; } #t-grab { grid-area: g; } #t-jump { grid-area: j; }
.tb { pointer-events: auto; width: 76px; height: 76px; border-radius: 50%; border: 3px dashed rgba(90,60,30,.55); background: rgba(243,230,200,.72); color: #4a3020; font-size: 28px; font-weight: bold; display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none; padding: 0; box-shadow: 0 4px 0 rgba(60,30,10,.25); }
.tb small { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.tb.small { width: 64px; height: 64px; font-size: 20px; justify-self: center; }
.tb.big { width: 88px; height: 88px; font-size: 32px; background: rgba(255,214,140,.85); }
.tb.on { background: #fff; transform: translateY(2px); box-shadow: 0 2px 0 rgba(60,30,10,.25); }
.tb.dim { opacity: .45; }
#finish { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(40,25,10,.35); z-index: 6; }
#finish.show { display: flex; }
#finish .card { background: #f3e6c8; border: 3px dashed #8a5a3a; border-radius: 18px; padding: 18px 28px; text-align: center; color: #4a3020; }
#finish button { font: bold 18px inherit; font-family: inherit; padding: 8px 18px; border-radius: 12px; border: 2px solid #8a5a3a; background: #ffd68c; }
#loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #f3e6c8; color: #4a3020; font-size: 24px; font-weight: bold; transition: opacity .4s; z-index: 9; }
#loading.hide { opacity: 0; pointer-events: none; }
#counter, .pill { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 520px) { #hud { gap: 5px; } #pills { gap: 3px; } .pill { font-size: 11px; padding: 4px 6px; gap: 3px; } .pill .dot { width: 8px; height: 8px; } #counter { font-size: 14px; padding: 4px 9px 4px 5px; gap: 5px; } .btnicon { width: 20px; height: 20px; } .btnicon::before { inset: 5px; } #dbgbtn { padding: 4px 5px; font-size: 10px; } #toast { font-size: 18px; } }

/* ---- World 1 HUD additions ---- */
#counter.stars .btnicon { border-radius: 0; background: none; box-shadow: none; }
#counter.stars .btnicon::before { content: "\2605"; position: static; inset: auto; background: none; color: #e8a820; font-size: 26px; line-height: 26px; display: block; text-align: center; text-shadow: 0 1px 0 #8a5a3a; }
#crayons { display: flex; align-items: center; gap: 6px; background: #f3e6c8; color: #4a3020; font-weight: bold; font-size: 16px; padding: 4px 10px 4px 6px; border-radius: 18px; border: 2px dashed #8a5a3a; flex-shrink: 0; }
#crayons i { width: 8px; height: 22px; border-radius: 2px 2px 1px 1px; background: linear-gradient(#d9534a 0 25%, #f6efe0 25% 75%, #d9534a 75%); transform: rotate(30deg); }
#lvltitle { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -10px); text-align: center; color: #4a3020; background: #f3e6c8; border: 3px dashed #8a5a3a; border-radius: 16px; padding: 10px 26px; opacity: 0; transition: opacity .5s, transform .5s; pointer-events: none; z-index: 4; }
#lvltitle.show { opacity: 1; transform: translate(-50%, 0); }
#lvltitle small { display: block; font-size: 13px; letter-spacing: 3px; } #lvltitle b { font-size: 26px; }
#worldmap { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(30,20,40,.55); z-index: 7; }
#worldmap.show { display: flex; }
#worldmap .card { background: #f3e6c8; border: 3px dashed #8a5a3a; border-radius: 18px; padding: 22px 26px; color: #4a3020; font-weight: bold; max-width: 92vw; }
#worldmap .route { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 20px; }
#worldmap .stop { padding: 6px 12px; border-radius: 12px; background: #fff8e6; border: 2px solid #c8a070; }
#worldmap .stop.done { background: #b8e0a0; text-decoration: line-through; } #worldmap .stop.next { background: #ffd68c; border-color: #8a5a3a; animation: pulse 1.2s infinite; }
/* ---- tap-to-advance cutscenes ---- */
#cine { position: fixed; inset: 0; display: none; z-index: 8; cursor: pointer; }
#cine.show { display: block; }
#cine .bar { position: absolute; left: 0; right: 0; height: 7vh; background: #120c10; }
#cine .bar.top { top: 0; } #cine .bar.bot { bottom: 0; }
#cine:not(.intro) .bar { height: 4vh; opacity: .85; }
#cap { position: absolute; left: 50%; bottom: calc(9vh + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(820px, 88vw); background: rgba(250,242,222,.96); color: #3a2618; border: 3px dashed #8a5a3a; border-radius: 16px; padding: 12px 18px; font-size: clamp(16px, 2.4vw, 22px); line-height: 1.35; box-shadow: 0 6px 0 rgba(40,20,10,.3); opacity: 0; transition: opacity .25s; }
#cap.show { opacity: 1; } #cap .spk { color: #7a3a1a; } #cap i.dir, #cap i.after { color: #6a5a4a; font-weight: 600; } #cap b { font-weight: 800; }
#cap.wind { background: rgba(232,222,250,.92); font-style: italic; border-color: #6a2a8a; animation: wind 2.4s ease-in-out infinite; }
@keyframes wind { 0%,100% { transform: translateX(-50%) skewX(0deg); } 50% { transform: translateX(calc(-50% + 6px)) skewX(-3deg); } }
#namecard { position: absolute; left: calc(6vw + env(safe-area-inset-left)); top: 14vh; background: #fff8e6; border: 3px solid #8a5a3a; border-radius: 12px; padding: 8px 18px; color: #3a2618; transform: rotate(-3deg) translateY(-10px); opacity: 0; transition: opacity .6s, transform .6s; box-shadow: 0 5px 0 rgba(40,20,10,.3); }
#namecard.show { opacity: 1; transform: rotate(-3deg) translateY(0); }
#namecard .nm { display: block; font-size: 30px; font-weight: 900; letter-spacing: 3px; } #namecard .sub { display: block; font-size: 16px; font-style: italic; }
#storybook { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: #120c08; }
#storybook.show { display: flex; }
#storybook p { margin: 0; max-width: min(760px, 84vw); padding: 34px 40px; background: #d8a838; color: #120c08; font: bold clamp(18px, 2.8vw, 28px)/1.45 Georgia, "Times New Roman", serif; border-radius: 6px; box-shadow: inset 0 0 0 6px #120c08, inset 0 0 0 9px #d8a838, inset 0 0 0 11px #120c08; text-align: center; }
#titlecard { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
#titlecard.show { display: flex; }
#titlecard h1 { margin: 0 6vw; text-align: center; color: #ffe9b0; font: 900 clamp(26px, 5vw, 58px)/1.15 "Trebuchet MS", sans-serif; text-shadow: 0 4px 0 #6a2a8a, 0 0 30px rgba(255,200,120,.6); }
#tapicon { position: absolute; right: calc(5vw + env(safe-area-inset-right)); bottom: calc(9vh + env(safe-area-inset-bottom) + 8px); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,248,230,.9); border: 3px dashed #8a5a3a; opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 2; }
#tapicon span { position: absolute; inset: 12px; border-radius: 50%; background: #d9534a; }
#tapicon.show { opacity: 1; animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
#skip { position: absolute; top: calc(7vh + 8px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); font: bold 14px inherit; font-family: inherit; color: #fff8e6; background: rgba(20,12,16,.6); border: 2px solid rgba(255,248,230,.5); border-radius: 12px; padding: 8px 12px; cursor: pointer; z-index: 3; }

body.cine #hud, body.cine #keys, body.cine #touch, body.cine #toast { opacity: 0; pointer-events: none; }

/* ---- felt cards: level title (3.5 s), name cards, captions ---- */
#lvltitle, #namecard, #finish .card { background-color: #c8423a; color: #fff6e6; border: none; outline: 3px dashed rgba(255,240,215,.85); outline-offset: -9px;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px), radial-gradient(rgba(0,0,0,.10) 1px, transparent 1.5px);
  background-size: 5px 5px, 7px 7px; background-position: 0 0, 2px 3px; box-shadow: 0 6px 0 rgba(60,20,10,.35), inset 0 0 18px rgba(0,0,0,.18); }
#lvltitle { padding: 16px 34px; } #lvltitle small { color: #ffe0a0; } #lvltitle b { font-size: 30px; }
#namecard { background-color: #3a6a8a; } #namecard .nm, #namecard .sub { color: #fff6e6; }
#cap.fit1 { font-size: clamp(14px, 2.0vw, 19px); } #cap.fit2 { font-size: clamp(12px, 1.7vw, 16px); line-height: 1.25; padding: 8px 14px; }
/* ---- shadow-puppet taunt bubble (paper) ---- */
#taunt { position: fixed; transform: translate(-10%, -100%); max-width: 46vw; min-width: 90px; min-height: 40px; padding: 10px 16px; background: #fffaf0; color: #2a1a10; border-radius: 22px 22px 22px 4px; box-shadow: 0 4px 0 rgba(40,20,10,.3); font: 700 clamp(13px, 1.8vw, 18px)/1.3 "Trebuchet MS", sans-serif; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 5; }
#taunt.show { opacity: 1; }
#taunt .scribble { display: none; width: 64px; height: 18px; background: repeating-linear-gradient(115deg, transparent 0 6px, #3a2a20 6px 8px, transparent 8px 12px); border-radius: 9px; opacity: .7; }
#taunt.placeholder .scribble { display: block; }
#finline { display: none; margin: 4px 0 10px; font-weight: 700; font-size: clamp(13px, 1.7vw, 17px); line-height: 1.3; text-align: left; }
#finish.reward #finline.on { display: block; } #finline .spk { color: #ffe2a8; }
#finish.reward .card { max-width: min(44vw, 440px); }
@media (orientation: portrait) { #finish.reward .card { max-width: 90vw; } }
#finish.reward .card { animation: rewardIn .7s cubic-bezier(.2,1.6,.4,1) 1.4s both; }
@keyframes rewardIn { from { transform: translateY(40px) scale(.6) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
#finish.reward { background: transparent; align-items: flex-end; justify-content: flex-end; padding: 0 calc(4vw + env(safe-area-inset-right)) calc(14vh + env(safe-area-inset-bottom)) 0; box-sizing: border-box; } /* card clear of the hero (framed left) */
@media (orientation: portrait) { #finish.reward { justify-content: center; padding: 0 0 calc(8vh + env(safe-area-inset-bottom)) 0; } }
#mapgo { display: block; margin: 14px auto 0; font: bold 20px inherit; font-family: inherit; padding: 6px 22px; border-radius: 12px; border: 2px solid #8a5a3a; background: #ffd68c; }
#cap.fit3 { width: 96vw; font-size: 11.5px; line-height: 1.22; padding: 6px 10px; }

/* World 4: the ending's player prompt (Daphne's button glows; one tap), the credits card, the final world map */
#cineprompt { position: absolute; left: 50%; bottom: calc(18vh + env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
#cineprompt.show { display: flex; }
#cineprompt .btn { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 46px; color: #7a3a10; background: radial-gradient(circle at 40% 35%, #fff4c0, #ffc840 60%, #e89a20); box-shadow: 0 0 0 6px rgba(255,240,180,.6), 0 0 40px 18px rgba(255,210,110,.75); animation: promptGlow 1.1s ease-in-out infinite; }
#cineprompt small { color: #ffe9b0; font: bold 16px "Trebuchet MS", sans-serif; text-shadow: 0 2px 0 #3a1a10; }
@keyframes promptGlow { 0%,100% { transform: scale(1); box-shadow: 0 0 0 6px rgba(255,240,180,.6), 0 0 30px 12px rgba(255,210,110,.6); } 50% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255,240,180,.8), 0 0 60px 26px rgba(255,220,130,.9); } }
#credits { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: #120c10; z-index: 9; cursor: pointer; }
#credits.show { display: flex; }
#credits .roll { text-align: center; color: #ffe9b0; font-family: "Trebuchet MS", sans-serif; padding: 20px calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); animation: rollIn 1.2s ease-out both; }
#credits h1 { margin: 0 0 8px; font: 900 clamp(40px, 9vw, 92px)/1 "Trebuchet MS", sans-serif; text-shadow: 0 5px 0 #6a2a8a, 0 0 34px rgba(255,200,120,.6); }
#credits h2 { margin: 0 0 18px; font-size: clamp(14px, 2.4vw, 22px); color: #f3e6c8; }
#credits .cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; max-width: 640px; margin: 0 auto 16px; }
#credits .cast b { background: #f3e6c8; color: #4a3020; border: 2px dashed #8a5a3a; border-radius: 12px; padding: 4px 12px; font-size: 16px; }
#credits .made { color: #d8c8a8; letter-spacing: 2px; }
#credgo { margin-top: 10px; min-width: 78px; min-height: 78px; font: bold 26px inherit; border-radius: 50%; border: 3px solid #8a5a3a; background: #ffd68c; color: #4a3020; }
@keyframes rollIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
#worldmap .stop.replay { cursor: pointer; background: #b8e0a0; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
#worldmap .stop.replay:hover { background: #d0f0b8; }
#worldmap .fin { text-align: center; margin: 0 0 10px; font-size: 22px; }

body.endgame #hud, body.endgame #keys, body.endgame #touch, body.endgame #toast { opacity: 0; pointer-events: none; } /* ending, credits, epilogue, final map: no gameplay HUD */
/* short landscape screens (iPhone landscape): keep the whole credits card, incl. the 78px button, inside the screen */
@media (max-height: 500px) { #credits .roll { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); } #credits h1 { font-size: clamp(32px, 11vh, 56px); margin-bottom: 4px; } #credits h2 { margin-bottom: 8px; font-size: 14px; } #credits .cast { gap: 4px 8px; margin-bottom: 6px; } #credits .cast b { font-size: 13px; padding: 2px 8px; } #credits .made { margin: 0; font-size: 12px; } #credgo { margin-top: 6px; } }