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; } }

/* ===================== SUNSTITCH stage 1 ===================== */
/* DRAFT tag on unapproved lines (story/SUNSTITCH-NEW-LINES.md): small, always visible, never voiced */
.draft { display: inline-block; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .08em; color: #fff; background: #c0392b; border-radius: 4px; padding: 3px 5px 2px; margin-left: 6px; vertical-align: middle; transform: rotate(-2deg); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
#scrap { display: flex; align-items: center; gap: 6px; background: rgba(250,242,222,.92); border: 2px dashed #8a5a3a; border-radius: 14px; padding: 4px 10px; font: 700 16px system-ui, sans-serif; color: #3a2618; }
#scrap i { width: 18px; height: 10px; background: #c8924a; border-radius: 2px; box-shadow: 0 4px 0 #9a6a32; display: inline-block; transform: translateY(-2px); }
#bark { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%) translateY(-8px); background: rgba(250,242,222,.96); color: #3a2618; border: 2px dashed #8a5a3a; border-radius: 12px; padding: 6px 12px; font-size: 17px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 6; white-space: nowrap; }
#bark.show { opacity: 1; transform: translateX(-50%); }
/* portal video (L1 -> felt): muted, playsinline, skip after 2 s; in-engine-style fallback when the file is missing */
#portal { position: fixed; inset: 0; background: #0c1030; display: none; z-index: 40; }
#portal.show { display: block; }
#portal video { width: 100%; height: 100%; object-fit: cover; background: #0c1030; }
#portalfx { position: absolute; inset: 0; display: none; overflow: hidden; background: radial-gradient(circle at 50% 45%, #fff 0, #ffe9a8 8%, #9fd4f0 30%, #1c2660 70%); }
#portal.fallback video { display: none; }
#portal.fallback #portalfx { display: block; animation: ssflash 3s ease-in forwards; }
#portalfx i { position: absolute; left: 50%; top: 45%; width: 30vmin; height: 30vmin; margin: -15vmin; border-radius: 50%; background: #1a2458; border: 6px dashed #f6e7a8; animation: sshole 3s ease-in forwards; }
@keyframes ssflash { 0% { filter: brightness(1.4); } 60% { filter: brightness(1); } 100% { filter: brightness(.6); } }
@keyframes sshole { 0% { transform: scale(.2) rotate(0); } 100% { transform: scale(7) rotate(200deg); } }
/* return-video fallback (ending row 10): the felt pages fold away into the sunny 3D meadow */
#portal.ret { background: #8fd0f0; }
#portal.ret.fallback #portalfx { background: linear-gradient(180deg, #9fdcff 0, #cdeefc 55%, #7cc46a 56%, #5aa04c 100%); animation: ssret 3s ease-in-out forwards; }
#portal.ret.fallback #portalfx i { left: 0; top: 0; margin: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: repeating-linear-gradient(45deg, #b77a4a 0 14px, #a86c3e 14px 28px); transform-origin: 0 50%; animation: ssfold 3s ease-in forwards; }
@keyframes ssret { 0% { filter: brightness(.8); } 100% { filter: brightness(1.1); } }
@keyframes ssfold { 0% { transform: perspective(900px) rotateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: perspective(900px) rotateY(-100deg); opacity: 0; } }
#portalskip { position: absolute; right: calc(16px + env(safe-area-inset-right)); bottom: calc(86px + env(safe-area-inset-bottom)); font: 700 16px system-ui, sans-serif; color: #3a2618; background: rgba(250,242,222,.92); border: 2px dashed #8a5a3a; border-radius: 14px; padding: 10px 16px; opacity: 0; pointer-events: none; transition: opacity .3s; }
#portalskip.show { opacity: 1; pointer-events: auto; }
/* logo sting over the felt night sky */
#logosting { position: fixed; inset: 0; z-index: 41; display: none; background: radial-gradient(ellipse at 50% 40%, #2c3a8c 0, #141a48 75%); }
#logosting::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#f6e7a8 1.5px, transparent 2px), radial-gradient(#f6e7a8 1px, transparent 1.5px); background-size: 120px 90px, 70px 60px; background-position: 10px 20px, 40px 5px; opacity: .55; }
#logosting.show { display: block; animation: ssfade 2.6s ease both; }
#logosting iframe, #titlescreen iframe { position: absolute; border: 0; background: transparent; pointer-events: none; }
#logosting iframe { left: 50%; top: 50%; width: min(92vw, 150vh); height: min(52vw, 84vh); transform: translate(-50%, -50%); }
@keyframes ssfade { 0% { opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
/* title screen */
#titlescreen { position: fixed; inset: 0; z-index: 30; display: none; background: radial-gradient(ellipse at 50% 30%, rgba(255,250,230,.0) 0, rgba(20,26,72,.35) 100%); }
#titlescreen.show { display: block; }
#titlescreen .logo { position: absolute; left: 50%; top: calc(3vh + env(safe-area-inset-top)); width: min(92vw, 110vh); height: min(48vw, 58vh); transform: translateX(-50%); }
#titlescreen .logo iframe { inset: 0; width: 100%; height: 100%; }
#titlescreen .tagline { position: absolute; left: 0; right: 0; top: calc(5vh + min(48vw, 58vh) + env(safe-area-inset-top)); text-align: center; font: 700 clamp(18px, 3vw, 30px) system-ui, sans-serif; color: #3a2618; text-shadow: 0 2px 0 rgba(255,255,255,.7); margin: 0; }
#titlescreen .btns { position: absolute; left: 0; right: 0; bottom: calc(96px + env(safe-area-inset-bottom)); display: flex; gap: 14px; justify-content: center; }
#titlescreen .btns button, #levelsel button { font: 700 20px system-ui, sans-serif; color: #3a2618; background: #fff3d4; border: 3px dashed #8a5a3a; border-radius: 18px; padding: 14px 26px; box-shadow: 0 5px 0 rgba(40,20,10,.3); }
#tapstart { animation: sspulse 1.6s ease-in-out infinite; }
#titlescreen.static #tapstart { animation: none; }
@keyframes sspulse { 50% { transform: scale(1.06); } }
#levelsel { position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; gap: 10px; justify-content: center; }
#levelsel button { font-size: 14px; padding: 8px 14px; border-width: 2px; }
#levelsel { flex-wrap: wrap; gap: 6px; max-width: 96vw; margin: 0 auto; } /* stage 2: 16 levels */
#levelsel button { font-size: 12px; padding: 5px 9px; border-radius: 12px; white-space: nowrap; }
#levelsel button:disabled { opacity: .45; }
#worldmap .soon { text-align: center; font: 700 18px system-ui, sans-serif; color: #8a5a3a; margin: 10px 0 0; }
@media (orientation: portrait) { #titlescreen .logo { top: calc(14vh + env(safe-area-inset-top)); height: 50vw; } #titlescreen .tagline { top: calc(16vh + 50vw + env(safe-area-inset-top)); } }
body.titlemode #hud, body.titlemode #keys, body.titlemode #touch { display: none !important; }

/* the logo already carries the tagline on its banner: keep the text for screen readers only (no doubled line under the patch) */
#titlescreen .tagline { clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }

/* stage 2: Sarah's Plan hint button (top bar) + 2-player marker on P2's pill */
#plan { pointer-events: auto; font: 700 14px system-ui, sans-serif; color: #fff; background: #2a8f8f; border: 2px dashed #f6e7a8; border-radius: 14px; padding: 6px 12px; margin-left: 8px; box-shadow: 0 3px 0 rgba(20,40,40,.35); }
#plan b { font-size: 17px; color: #ffe27a; margin-left: 3px; }
.pill.p2 { outline: 3px solid #2a8f8f; outline-offset: 1px; }
.pill.p2::after { content: 'P2'; font: 800 10px system-ui, sans-serif; color: #fff; background: #2a8f8f; border-radius: 6px; padding: 1px 4px; margin-left: 4px; }
body.twop .pill.active::after { content: 'P1'; font: 800 10px system-ui, sans-serif; color: #fff; background: #6f7442; border-radius: 6px; padding: 1px 4px; margin-left: 4px; }
#twop { font-size: 15px !important; padding: 10px 16px !important; }

/* captions over the ending / epilogue videos (the files have no burned-in text and no audio) */
#vcap { 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: 600 clamp(16px, 2.4vw, 22px)/1.35 system-ui, sans-serif; box-shadow: 0 6px 0 rgba(40,20,10,.3); opacity: 0; transition: opacity .25s; pointer-events: none; text-align: center; }
#vcap.show { opacity: 1; } #vcap .spk { color: #7a3a1a; font-weight: 800; }
#vcap .draft { font: 800 11px system-ui, sans-serif; color: #fff; background: #c0392b; border-radius: 6px; padding: 1px 5px; vertical-align: middle; }
/* ---- polish: illustrated felt world map (js/worldmap.js) ---- */
#worldmap { background: radial-gradient(ellipse at 50% 40%, #3a3a6a 0%, #1e1a34 100%); }
#worldmap .card.wm { position: relative; padding: 0; border: 0; background: none; border-radius: 0; max-width: none; aspect-ratio: 16 / 9; width: min(97vw, calc(97vh * 16 / 9)); }
#worldmap .card.wm.port { aspect-ratio: 9 / 16; width: min(97vw, calc(97vh * 9 / 16)); }
#worldmap .wm-art, #worldmap .wm-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#worldmap .maplogo { position: absolute; pointer-events: none; }
#worldmap .maplogo iframe { width: 100%; height: 100%; border: 0; background: transparent; }
#worldmap .card.wm .route { position: absolute; inset: 0; display: block; font-size: 0; }
#worldmap .card.wm .stop { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; min-width: 96px; min-height: 96px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; text-decoration: none; box-sizing: border-box; animation: none; }
#worldmap .card.wm .stop .nm { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; font: 800 clamp(13px, 1.7vw, 22px) / 1.1 system-ui, sans-serif; color: #4a2a1a; background: #fff3d8; border: 2px dashed #8a5a3a; border-radius: 14px; padding: 5px 12px; box-shadow: 0 3px 0 rgba(90, 50, 30, .25); }
#worldmap .card.wm.port .stop .nm { font-size: clamp(13px, 3.6vw, 20px); }
#worldmap .card.wm .stop.next { box-shadow: 0 0 0 6px rgba(255, 214, 120, .9), 0 0 26px 10px rgba(255, 200, 90, .55); animation: wmpulse 1.4s ease-in-out infinite; }
#worldmap .card.wm .stop.next .nm { background: #ffd68c; }
@keyframes wmpulse { 50% { box-shadow: 0 0 0 10px rgba(255, 214, 120, .6), 0 0 34px 14px rgba(255, 200, 90, .35); } }
#worldmap .card.wm .stop.replay { cursor: pointer; display: block; background: transparent; }
#worldmap .card.wm .stop.replay::after { content: '\25b6'; position: absolute; right: -6%; bottom: -2%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: #f07a4a; color: #fff; border: 3px dashed #fff3d8; outline: 3px solid #a0482e; display: flex; align-items: center; justify-content: center; font: 900 clamp(18px, 2.4vw, 32px) / 1 system-ui, sans-serif; box-shadow: 0 4px 0 rgba(90, 40, 20, .35); }
#worldmap .card.wm .stop.replay:hover, #worldmap .card.wm .stop.replay:focus-visible { box-shadow: 0 0 0 6px rgba(255, 240, 200, .95); outline: none; }
#worldmap .card.wm .stop.replay:active { transform: translate(-50%, -50%) scale(.96); }
#worldmap .card.wm #mapgo { margin: 0; padding: 0; position: absolute; right: 3%; bottom: 5%; width: 88px; height: 88px; border-radius: 50%; font-size: 36px; background: #f07a4a; color: #fff; border: 3px dashed #fff3d8; outline: 3px solid #a0482e; }
#worldmap .card.wm .soon:empty { display: none; }
/* ---- audio: sound button (>= 78 px, safe-area aware) + panel; settings persist (localStorage ss-audio) ---- */
#sndbtn { position: fixed; z-index: 40; right: calc(10px + env(safe-area-inset-right)); top: calc(7vh + 54px + env(safe-area-inset-top)); width: 78px; height: 78px; border-radius: 50%; border: 3px dashed #fff3d8; outline: 3px solid rgba(90, 50, 30, .55); background: rgba(40, 26, 30, .55); color: #fff8e6; font-size: 32px; line-height: 1; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#sndbtn.off .ic { opacity: .55; } #sndbtn.off::after { content: ''; position: absolute; left: 18px; right: 18px; top: 50%; height: 4px; background: #f07a4a; transform: rotate(-40deg); border-radius: 2px; }
#sndpanel { position: fixed; z-index: 40; right: calc(98px + env(safe-area-inset-right)); top: calc(7vh + 54px + env(safe-area-inset-top)); display: none; gap: 8px; flex-direction: column; }
#sndpanel.show { display: flex; }
#sndpanel button { min-width: 168px; min-height: 78px; border-radius: 16px; border: 3px dashed #8a5a3a; background: #fff3d8; color: #4a2a1a; font: 800 18px system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
#sndpanel button[aria-pressed="false"] { background: #d8cbb4; color: #7a6a5a; text-decoration: line-through; }
#snd-mute[aria-pressed="true"] { background: #f07a4a; color: #fff; text-decoration: none; }
@media (orientation: portrait) { #sndpanel { right: calc(10px + env(safe-area-inset-right)); top: calc(7vh + 140px + env(safe-area-inset-top)); } }
/* a captive (Daphne in the L2 cage) keeps her pill but greyed + barred: not selectable until the rescue */
.pill.captive { opacity: .5; filter: grayscale(.9); background: repeating-linear-gradient(90deg, rgba(243,230,200,.85) 0 7px, rgba(120,90,40,.55) 7px 9px); cursor: not-allowed; }
.pill.captive.nope { animation: pillnope .35s; }
@keyframes pillnope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* auto-hints: a gentle caption under the top bar (hint 1), stronger + gold on hint 2; the right character's pill pulses */
#hintcap { position: fixed; left: 50%; top: calc(7vh + 58px + env(safe-area-inset-top, 0px)); transform: translate(-50%, -8px); max-width: min(620px, 88vw); z-index: 30; pointer-events: none;
  background: rgba(255, 248, 228, .94); color: #4a3020; border: 2px dashed rgba(138, 90, 58, .6); border-radius: 14px; padding: 9px 14px; font: 600 16px/1.35 inherit; font-family: inherit;
  box-shadow: 0 4px 0 rgba(60, 30, 10, .18); opacity: 0; transition: opacity .35s, transform .35s; }
#hintcap.show { opacity: 1; transform: translate(-50%, 0); }
#hintcap.strong { border: 3px solid #e0a820; background: #fff4c8; box-shadow: 0 0 0 4px rgba(255, 210, 58, .35), 0 4px 0 rgba(60, 30, 10, .2); }
#hintcap b { color: #2a6f6f; } #hintcap .draft { font: 800 10px system-ui, sans-serif; font-style: normal; color: #fff; background: #c0392b; border-radius: 5px; padding: 1px 5px; margin-left: 8px; vertical-align: 2px; }
#packcap { position: fixed; left: 50%; bottom: calc(11vh + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); max-width: min(560px, 88vw); z-index: 31; pointer-events: none; opacity: 0; transition: opacity .35s, transform .35s;
  background: #fff4d8; color: #4a3020; border: 3px dashed #d08a3a; border-radius: 16px; padding: 9px 16px; font: bold 17px inherit; font-family: inherit; box-shadow: 0 4px 0 rgba(60, 30, 10, .2); text-align: center; }
#packcap.show { opacity: 1; transform: translate(-50%, 0); }
#packcap .draft { font: 800 10px system-ui, sans-serif; color: #fff; background: #c0392b; border-radius: 5px; padding: 1px 5px; margin-left: 8px; vertical-align: 2px; }
#hintcap .lead { color: #b0581a; margin-right: 6px; } #hintcap .lead::after { content: " "; }
.pill.inpack { position: relative; border-color: #d08a3a; border-style: solid; }
.pill.inpack::before { content: '\1F392'; font-size: 13px; margin-right: -2px; }
.pill.inpack.packpulse { animation: packpulse .9s ease-in-out infinite; opacity: 1; }
@keyframes packpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 150, 50, 0); transform: scale(1); } 50% { box-shadow: 0 0 0 8px rgba(240, 150, 50, .55); transform: scale(1.12); } }
@media (max-width: 520px) { #packcap { font-size: 13px; padding: 7px 10px; } }
.pill.hintpulse { animation: hintpulse 1s ease-in-out infinite; border-color: #e0a820; }
@keyframes hintpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 40, .0); transform: scale(1); } 50% { box-shadow: 0 0 0 7px rgba(255, 200, 40, .55); transform: scale(1.1); } }
@media (max-width: 520px) { #hintcap { font-size: 13px; padding: 7px 10px; top: calc(7vh + 48px + env(safe-area-inset-top, 0px)); } }
#hintedge { position: fixed; width: 0; height: 0; z-index: 29; pointer-events: none; opacity: 0; transition: opacity .3s; }
#hintedge.show { opacity: 1; }
#hintedge::before { content: ''; position: absolute; left: -34px; top: -26px; width: 0; height: 0; border-top: 26px solid transparent; border-bottom: 26px solid transparent; border-left: 52px solid #ffd23a;
  transform: rotate(var(--rot, 0deg)) translateX(-10px); transform-origin: 34px 26px; filter: drop-shadow(0 0 10px rgba(255, 210, 58, .95)) drop-shadow(0 0 3px #8a5a3a); animation: hintnudge .8s ease-in-out infinite; }
@keyframes hintnudge { 50% { translate: calc(cos(var(--rot, 0deg)) * 8px) calc(sin(var(--rot, 0deg)) * 8px); } }
/* pause: a 78 px button in the top-left corner under the counters (mirrors the sound button on the right), safe-area aware */
#pausebtn { position: fixed; z-index: 40; left: calc(10px + env(safe-area-inset-left)); top: calc(7vh + 54px + env(safe-area-inset-top)); width: 78px; height: 78px; border-radius: 50%; border: 3px dashed #fff3d8; outline: 3px solid rgba(90, 50, 30, .55);
  background: rgba(74, 42, 26, .78); color: #fff3d8; font: 900 26px system-ui, sans-serif; cursor: pointer; touch-action: manipulation; display: none; padding: 0; }
body.can-pause #pausebtn { display: block; } body.paused #pausebtn { display: none; }
#pause { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; background: rgba(28, 16, 10, .55); backdrop-filter: blur(2px); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#pause.show { display: flex; }
#pause .card { background: #fff3d8; border: 4px dashed #8a5a3a; border-radius: 22px; padding: 18px 22px 20px; width: min(460px, 92vw); max-height: 92vh; overflow: auto; box-shadow: 0 8px 0 rgba(40, 20, 10, .35); color: #4a2a1a; }
#pause h2 { margin: 0 0 12px; text-align: center; font: 900 30px system-ui, sans-serif; letter-spacing: .04em; }
#pause .menu { display: flex; flex-direction: column; gap: 10px; }
#pause button { min-height: 78px; border-radius: 16px; border: 3px dashed #8a5a3a; background: #fff8ea; color: #4a2a1a; font: 800 20px system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
#pause button:focus-visible { outline: 4px solid #2a8f8f; }
#pz-resume { background: #2a8f8f !important; color: #fff !important; border-color: #f6e7a8 !important; }
#pz-sound[aria-pressed="false"] { background: #d8cbb4; color: #7a6a5a; }
#pause.dbg .menu { display: none; }
#dbgform label { display: block; font: 700 15px system-ui, sans-serif; margin: 4px 0 6px; }
#dbgform textarea { width: 100%; box-sizing: border-box; font: 16px/1.35 system-ui, sans-serif; border-radius: 12px; border: 2px solid #8a5a3a; padding: 8px; background: #fff; color: #222; resize: vertical; }
#dbgform .row { display: flex; gap: 8px; margin-top: 10px; } #dbgform .row button { flex: 1; min-width: 0; }
#dbg-send { background: #2a8f8f !important; color: #fff !important; }
#dbg-status { min-height: 1.3em; margin: 8px 0 0; font: 700 15px system-ui, sans-serif; } #dbg-status.ok { color: #1f7a3a; } #dbg-status.err { color: #b03020; }
#dbg-restore { margin-top: 10px; font: 600 14px system-ui, sans-serif; } #dbg-restore textarea { font: 12px/1.3 ui-monospace, monospace; margin: 6px 0; } #dbg-restore button { min-height: 56px; width: 100%; font-size: 16px; }

/* DEBUG > Send > grown-up PIN step: felt card, big keypad (>= 78 px keys), checked on the server only */
#dbgform.pin > label, #dbgform.pin > textarea, #dbgform.pin > .row, #dbgform.pin > #dbg-restore { display: none; }
#dbg-pin .pintitle { margin: 0 0 2px; text-align: center; font: 900 22px system-ui, sans-serif; }
#dbg-pin .pinhelp { margin: 0 0 8px; text-align: center; font: 600 15px system-ui, sans-serif; color: #6a4a32; }
#dbg-pin .pinrow { display: flex; gap: 8px; align-items: stretch; }
#dbg-pin-input { flex: 1; min-width: 0; min-height: 78px; box-sizing: border-box; border-radius: 16px; border: 3px dashed #8a5a3a; background: #fff; color: #222; text-align: center; font: 900 30px ui-monospace, monospace; letter-spacing: .3em; padding: 0 8px; }
#dbg-pin-input::placeholder { color: #c9b393; letter-spacing: .1em; }
#dbg-pin-input:focus-visible { outline: 4px solid #2a8f8f; }
#pause #dbg-pin-back { flex: 0 0 auto; padding: 0 16px; font-size: 18px; }
#dbg-pin .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
#pause #dbg-pin .keypad button { min-height: 78px; font-size: 30px; font-weight: 900; padding: 0; }
#pause #dbg-pin .keypad button[data-k="del"] { background: #f1e2c6; }
#pause #dbg-pin-ok { background: #2a8f8f !important; color: #fff !important; font-size: 24px !important; }
#pause #dbg-pin-ok:disabled { opacity: .6; }
#dbgform.pin #dbg-status { text-align: center; }
/* short landscape phones: 6 x 2 keys, wider card, no big title, so it fits without scrolling */
@media (max-height: 520px) and (orientation: landscape) {
  #pause.dbg .card:has(#dbgform.pin) { width: min(760px, 94vw); padding: 10px 16px 10px; }
  #pause.dbg:has(#dbgform.pin) h2 { display: none; }
  #dbg-pin .pinhelp { margin-bottom: 6px; }
  #dbg-pin .keypad { grid-template-columns: repeat(6, 1fr); }
  #dbgform.pin #dbg-status { margin-top: 4px; }
}

/* DEStinies series logo: title screen only, top-left corner (bottom-right clashes with the level select), inside the safe area */
#serieslogo { position: absolute; left: calc(16px + env(safe-area-inset-left)); top: calc(14px + env(safe-area-inset-top)); width: clamp(90px, 8vw, 120px); opacity: .85; pointer-events: none; user-select: none; z-index: 1; }
#serieslogo img { display: block; width: 100%; height: auto; }

/* Emmett is inside a craft outline: the craft button glows and bobs so a tap target is obvious (Omer L4 iPad, Oct 22) */
.tb.ready { background: #ffe27a; border: 3px solid #ff9d2e; box-shadow: 0 0 0 4px rgba(255,190,60,.55), 0 0 18px 6px rgba(255,200,80,.8); animation: tbready 1s ease-in-out infinite; }
@keyframes tbready { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* Oct 22: the DRAFT badge text is drawn by CSS, so it is never part of a caption's text (copy, textContent, innerText, reader
   modes, the DEBUG report) and can never show as a raw "...line.DRAFT" suffix; without CSS the badge is simply empty. */
.draft::before { content: attr(data-tag); }
/* sun-lives (Oct 22 2026): felt heart HUD, top-right of the HUD row; the "Try again!" felt card */
#hearts { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; pointer-events: none; background: rgba(243,230,200,.92); border: 2px dashed #8a5a3a; border-radius: 22px; padding: 4px 9px; box-shadow: 0 3px 0 rgba(60,30,10,.25); }
#hearts .ht { width: 30px; height: 28px; display: block; transition: transform .25s, opacity .25s; }
#hearts .ht svg { width: 100%; height: 100%; display: block; overflow: visible; }
#hearts .hb { fill: #d8433c; stroke: #8a2a24; stroke-width: 1.6; } #hearts .hs { fill: none; stroke: #fff0dc; stroke-width: 1.3; stroke-dasharray: 2.2 1.8; }
#hearts .ht.empty .hb { fill: #e8d6b4; stroke: #b39470; stroke-dasharray: 2.4 1.6; } #hearts .ht.empty .hs { stroke: #c9b08a; } #hearts .ht.empty { opacity: .8; transform: scale(.86); }
#hearts .ht.lose { animation: htlose .7s ease-out; } #hearts .ht.pop { animation: htpop .7s ease-out; }
@keyframes htlose { 0% { transform: scale(1.35) rotate(-10deg); } 40% { transform: scale(.7) rotate(12deg); } 100% { transform: scale(.86); } }
@keyframes htpop { 0% { transform: scale(.4); } 55% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }
@media (max-width: 520px) { #hearts { gap: 2px; padding: 3px 6px; } #hearts .ht { width: 20px; height: 19px; } }
#tryagain { position: fixed; left: 50%; top: 34%; transform: translate(-50%, -12px) rotate(-2deg); z-index: 45; text-align: center; background: #f3e6c8; color: #4a3020; border-radius: 20px; padding: 18px 40px 14px;
  outline: 3px dashed #c8423a; outline-offset: -10px; box-shadow: 0 6px 0 rgba(60,30,10,.3); opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s; }
#tryagain.show { opacity: 1; transform: translate(-50%, 0) rotate(-2deg); pointer-events: auto; }
#tryagain b { display: block; font: 900 40px/1.1 system-ui, sans-serif; color: #c8423a; } #tryagain small { display: block; margin-top: 6px; font: 700 16px system-ui, sans-serif; }
/* ---- sun-tutorial: first-time pause card + pulsing spot ring + pause 'How to play' list ---- */
#tutcard { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(28, 16, 10, .38);
  padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); touch-action: none; }
#tutcard.show { display: flex; animation: tutIn .28s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tutIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
#tutcard .tc { background: #fff3d8; border: 4px dashed #8a5a3a; outline: 6px solid #f2c97a; border-radius: 26px; padding: 16px 22px 18px; width: min(520px, 94vw); max-height: 90vh; overflow: auto; text-align: center; color: #4a2a1a; box-shadow: 0 10px 0 rgba(40, 20, 10, .35); }
#tutcard .ti { font-size: 64px; line-height: 1.1; height: 76px; display: inline-block; filter: drop-shadow(0 4px 0 rgba(90, 50, 30, .25)); }
#tutcard h3 { margin: 4px 0 8px; font: 900 34px/1.1 system-ui, sans-serif; letter-spacing: .02em; color: #2a6f6f; }
#tutcard .how { margin: 0 0 10px; font: 800 21px/1.7 system-ui, sans-serif; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; }
#tutcard .how .w { white-space: normal; }
#tutcard kbd { display: inline-block; min-width: 44px; padding: 4px 10px; border-radius: 10px; background: #fff; border: 3px solid #8a5a3a; border-bottom-width: 6px; font: 900 20px system-ui, sans-serif; color: #4a2a1a; }
#tutcard .tbic { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 56px; padding: 0 10px; border-radius: 50%; background: rgba(255, 248, 234, .95); border: 3px dashed #8a5a3a; font: 900 24px system-ui, sans-serif; }
#tutcard .cap { margin: 0 0 12px; font: italic 600 17px/1.35 system-ui, sans-serif; color: #7a4a2a; }
#tut-ok { min-width: 200px; min-height: 78px; border-radius: 18px; border: 3px dashed #fff3d8; outline: 3px solid #2a6f6f; background: #2a8f8f; color: #fff; font: 900 24px system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
@media (max-height: 520px) { #tutcard .ti { font-size: 44px; height: 52px; } #tutcard h3 { font-size: 26px; } #tutcard .how { font-size: 17px; } #tutcard .tbic { min-width: 46px; height: 46px; } #tutcard .cap { font-size: 14px; } }
.ti.a-hop { animation: tHop .9s ease-in-out infinite; } @keyframes tHop { 0%, 100% { transform: translateY(0) } 45% { transform: translateY(-16px) scaleY(1.05) } 60% { transform: translateY(0) scaleY(.92) } }
.ti.a-bob { animation: tBob 1.4s ease-in-out infinite; } @keyframes tBob { 0%, 100% { transform: translateY(0) rotate(-6deg) } 50% { transform: translateY(-8px) rotate(6deg) } }
.ti.a-push, .ti.a-roll { animation: tPush 1.2s ease-in-out infinite; } @keyframes tPush { 0%, 100% { transform: translateX(-18px) } 50% { transform: translateX(18px) } }
.ti.a-roll { animation-name: tRoll; } @keyframes tRoll { 0% { transform: translateX(-22px) rotate(0) } 100% { transform: translateX(22px) rotate(360deg) } }
.ti.a-depth { animation: tDepth 1.6s ease-in-out infinite; } @keyframes tDepth { 0%, 100% { transform: scale(1) translateY(0) } 50% { transform: scale(.7) translateY(-10px); opacity: .75 } }
.ti.a-hammer { animation: tHam .7s ease-in-out infinite; transform-origin: 80% 80%; } @keyframes tHam { 0%, 100% { transform: rotate(0) } 40% { transform: rotate(-32deg) } 55% { transform: rotate(8deg) } }
.ti.a-swap { animation: tSwap 1.4s ease-in-out infinite; } @keyframes tSwap { 0%, 100% { transform: rotateY(0) } 50% { transform: rotateY(180deg) } }
.ti.a-wall { animation: tWall 1s ease-in-out infinite; } @keyframes tWall { 0%, 100% { transform: translate(0, 0) } 30% { transform: translate(14px, -12px) } 60% { transform: translate(-6px, -22px) } }
.ti.a-climb { animation: tClimb 1.2s steps(4) infinite; } @keyframes tClimb { from { transform: translateY(10px) } to { transform: translateY(-14px) } }
.ti.a-zoom { animation: tZoom .9s cubic-bezier(.5, 0, .2, 1) infinite; } @keyframes tZoom { 0% { transform: translateX(-30px); opacity: 0 } 30% { opacity: 1 } 100% { transform: translateX(34px); opacity: 0 } }
.ti.a-squeeze { animation: tSq 1.2s ease-in-out infinite; } @keyframes tSq { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(.7, 1.15) } }
.ti.a-press { animation: tPress .9s ease-in-out infinite; } @keyframes tPress { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(.72) translateY(8px) } }
.ti.a-shake { animation: tShake .5s linear infinite; } @keyframes tShake { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-8deg) } 75% { transform: rotate(8deg) } }
.ti.a-spin { animation: tSpin 2s linear infinite; } @keyframes tSpin { to { transform: rotate(360deg) } }
.ti.a-sway { animation: tSway 1.8s ease-in-out infinite; transform-origin: 50% 0; } @keyframes tSway { 0%, 100% { transform: rotate(-12deg) } 50% { transform: rotate(12deg) } }
.ti.a-peek { animation: tPeek 1.6s ease-in-out infinite; } @keyframes tPeek { 0%, 100% { transform: translateX(0) } 40%, 60% { transform: translateX(16px) rotate(10deg) } }
.ti.a-drop { animation: tDrop 1.2s ease-in infinite; } @keyframes tDrop { 0% { transform: translateY(-18px) } 60%, 100% { transform: translateY(6px) } }
.ti.a-glow { animation: tGlow 1.2s ease-in-out infinite; } @keyframes tGlow { 0%, 100% { filter: drop-shadow(0 0 0 #ffe14a) } 50% { filter: drop-shadow(0 0 16px #ffe14a) } }
#tutspot { position: fixed; z-index: 61; left: 0; top: 0; width: var(--s, 92px); height: var(--s, 92px); margin: calc(var(--s, 92px) / -2) 0 0 calc(var(--s, 92px) / -2); pointer-events: none; display: none; }
#tutspot.show { display: block; }
#tutspot::before, #tutspot i { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 5px dashed #ffe14a; box-shadow: 0 0 0 4px rgba(90, 50, 30, .45), 0 0 22px #ffe14a; animation: tutRing 1.1s ease-in-out infinite; }
#tutspot i { border-style: solid; border-width: 3px; opacity: .6; animation: tutRing2 1.1s ease-out infinite; }
#tutspot.edge::before { border-color: #ff9a3a; }
@keyframes tutRing { 0%, 100% { transform: scale(.88) } 50% { transform: scale(1.08) } }
@keyframes tutRing2 { from { transform: scale(.9); opacity: .7 } to { transform: scale(1.6); opacity: 0 } }
#howto .hl { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#pause #howto .hl button { min-height: 78px; display: flex; align-items: center; gap: 12px; text-align: left; padding: 6px 14px; font-size: 19px; }
#howto .hl .ic { font-size: 30px; width: 40px; text-align: center; } #howto .hl small { margin-left: auto; font: 700 13px system-ui, sans-serif; opacity: .65; }
#howto .hl button.unseen { opacity: .6; }
#pause.howto .menu { display: none; }
#howto-back { width: 100%; }

/* ---- readability brief: FPS button only in debug / pause; objective pointer (edge arrow or lane badge) ---- */
#dbgbtn { display: none; }
body.dbg-on #dbgbtn, body.paused #dbgbtn { display: inline-block; }
#objptr { position: fixed; width: 0; height: 0; z-index: 28; pointer-events: none; opacity: 0; transition: opacity .35s; --kc: #ffd23a; --rot: 0deg; }
#objptr.show { opacity: .92; }
#objptr i { position: absolute; left: -22px; top: -16px; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 34px solid #ffd23a;
  filter: drop-shadow(0 0 0 #fff) drop-shadow(0 3px 0 rgba(60, 30, 10, .45)); transform: rotate(var(--rot)); transform-origin: 22px 16px; animation: objPulse 1s ease-in-out infinite; }
#objptr i::after { content: ''; position: absolute; left: -30px; top: -9px; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 18px solid var(--kc); }
#objptr:not(.edge) i { top: -58px; }
#objptr b { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); white-space: nowrap; font: 900 15px system-ui, sans-serif; color: #4a2a1a; background: #fff3d8; border: 3px dashed var(--kc); border-radius: 12px; padding: 2px 8px; }
#objptr b:empty { display: none; }
#objptr:not(.edge) b { top: -98px; }
@keyframes objPulse { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }
/* sun-endlv: the end-of-level scene overlay (tap anywhere to skip); the reward card waits underneath (.held) */
#finish.held { visibility: hidden; pointer-events: none; }
#endlv { position: fixed; inset: 0; z-index: 7; display: none; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#endlv.show { display: block; }
#endcap { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(12px); max-width: min(78vw, 720px); padding: 12px 22px; border-radius: 18px; background: rgba(250,242,222,.95); border: 3px dashed #8a5a3a; color: #3a2618; font: 700 clamp(15px, 2.2vw, 22px)/1.3 "Trebuchet MS", sans-serif; text-align: center; opacity: 0; transition: opacity .3s, transform .3s; box-shadow: 0 5px 0 rgba(40,20,10,.25); }
#endcap.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#endcap .spk { color: #b0502a; }
#endskip { position: absolute; right: calc(14px + env(safe-area-inset-right)); top: calc(14px + env(safe-area-inset-top)); min-width: 96px; min-height: 78px; padding: 0 20px; font: 800 18px "Trebuchet MS", sans-serif; color: #3a2618; background: rgba(250,242,222,.92); border: 3px dashed #8a5a3a; border-radius: 18px; opacity: 0; pointer-events: none; transition: opacity .3s; }
#endskip.show { opacity: 1; pointer-events: auto; }
/* the felt map strip (beat 3): green felt with a stitched border, a dashed thread route and felt-button stops */
#endlv .emap { position: absolute; left: 50%; top: calc(14% + env(safe-area-inset-top)); width: min(86vw, 760px); height: clamp(150px, 34vh, 260px); transform: translate(-50%, -30px) scale(.92); opacity: 0; transition: opacity .45s, transform .45s cubic-bezier(.3,1.5,.5,1);
  border-radius: 26px; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 18%, transparent 19%), radial-gradient(circle at 78% 70%, rgba(0,0,0,.08) 0 22%, transparent 23%), repeating-linear-gradient(35deg, rgba(255,255,255,.05) 0 3px, transparent 3px 7px), linear-gradient(180deg, #8fca6a, #6aa84e);
  border: 4px dashed #f6ecd0; outline: 8px solid #5b8f3e; box-shadow: 0 10px 0 rgba(40,60,20,.35), inset 0 0 30px rgba(30,60,10,.35); }
#endlv.b3 .emap { opacity: 1; transform: translate(-50%, 0) scale(1); }
#endlv.boss .emap { display: none; }
#endlv .etrack, #endlv .etrack svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#endlv .etrack polyline { fill: none; stroke: #fff6dc; stroke-width: 1.4; stroke-dasharray: 3 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-width: 5px; }
#endlv .stop { position: absolute; width: clamp(34px, 6vw, 54px); height: clamp(34px, 6vw, 54px); margin: calc(clamp(34px, 6vw, 54px) / -2); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3d0, #e8c890); border: 3px dashed #8a5a3a; box-shadow: 0 4px 0 rgba(40,20,10,.35); display: flex; align-items: center; justify-content: center; }
#endlv .stop u { text-decoration: none; font: 800 clamp(13px, 2vw, 19px) "Trebuchet MS", sans-serif; color: #5a3a20; }
#endlv .stop.done { background: radial-gradient(circle at 35% 30%, #fff6a8, #f0b830); }
#endlv .stop.done::after { content: '\2605'; position: absolute; top: -16px; right: -10px; font-size: 20px; color: #ffd84a; text-shadow: 0 2px 0 #8a5a3a; }
#endlv .stop.next { animation: endPulse 0.9s ease-in-out infinite; border-color: var(--kc); }
#endlv .stop.landed { animation: endLand .5s ease-out; background: radial-gradient(circle at 35% 30%, #ffffff, #ffe070); }
@keyframes endPulse { 50% { transform: scale(1.14); } }
@keyframes endLand { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
#endlv .etoken { position: absolute; width: 0; height: 0; z-index: 2; transition: none; }
#endlv .etoken b { position: absolute; left: -22px; top: -64px; width: 44px; height: 44px; border-radius: 50% 50% 50% 8px; transform: rotate(-45deg); background: var(--kc); border: 3px solid #fff8e4; box-shadow: 0 5px 0 rgba(30,20,10,.35); display: flex; align-items: center; justify-content: center; font: 800 18px "Trebuchet MS", sans-serif; color: #fff; }
#endlv .etoken b span { transform: rotate(45deg); }
#endlv .enext { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); white-space: nowrap; font: 800 clamp(14px, 2.2vw, 21px) "Trebuchet MS", sans-serif; color: #fff8e4; text-shadow: 0 2px 0 #3f6a2a; }
#endlv.landed .enext { animation: endLand .5s ease-out; }
/* beat 2: Mothley's DRAFT bubble */
#taunt.isdraft::after { content: 'DRAFT'; position: absolute; top: -10px; right: -8px; padding: 1px 6px; border-radius: 6px; background: #d23a2a; color: #fff; font: 800 10px system-ui, sans-serif; letter-spacing: .05em; }
/* the L2-start video slot placeholder (felt sky over Felt Fields, a stitched sun rising) until the film arrives */
#portal.l2s { background: #9fdcff; }
#portal.l2s.fallback #portalfx { background: linear-gradient(180deg, #9fdcff 0, #d6f1fc 58%, #8fca6a 59%, #6aa84e 100%); animation: none; }
#portal.l2s.fallback #portalfx i { left: 50%; top: 60%; width: 26vmin; height: 26vmin; margin: -13vmin; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6b0, #f6c040); border: 6px dashed #fff3c8; box-shadow: 0 0 0 14px rgba(255,230,140,.35); animation: l2sun 3s ease-out forwards; }
#portal.l2s.fallback::after { content: 'L2 start film: coming soon'; position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 6px 14px; border-radius: 12px; background: rgba(250,242,222,.9); border: 2px dashed #8a5a3a; color: #3a2618; font: 700 14px "Trebuchet MS", sans-serif; }
#portal.l2s.fallback::before { content: 'DRAFT'; position: absolute; left: calc(12px + env(safe-area-inset-left)); top: calc(12px + env(safe-area-inset-top)); z-index: 2; padding: 2px 8px; border-radius: 6px; background: #d23a2a; color: #fff; font: 800 12px system-ui, sans-serif; }
@keyframes l2sun { 0% { top: 78%; transform: scale(.7); } 100% { top: 42%; transform: scale(1); } }
/* sun-endlv: play is over during the end scene, so the touch pad, hearts, plan chip and sound button step aside (Skip no longer overlaps them on iPhone) */
body:has(#endlv.show) #touch, body:has(#endlv.show) #hearts, body:has(#endlv.show) #sndbtn, body:has(#endlv.show) #plan { opacity: 0 !important; pointer-events: none !important; transition: opacity .3s; }
/* ---------- sun-modes (Oct 23 2026): play-mode felt cards (title + pause menu) ---------- */
.modecards { display: flex; gap: 12px; justify-content: center; }
.mcard { display: flex; align-items: center; gap: 10px; min-height: 92px; width: min(270px, 30vw); padding: 8px 14px 8px 10px; text-align: left; cursor: pointer; touch-action: manipulation;
  color: #3a2618; background: #fff3d4 radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); border: 3px dashed #b08664; border-radius: 20px;
  box-shadow: 0 5px 0 rgba(40,20,10,.28), inset 0 0 0 4px #fff8ea; transition: transform .15s, box-shadow .15s, border-color .15s; font: 700 14px system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
.mcard .mic { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; background: #f7e3bf; display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(120,70,30,.18); }
.mcard .mic svg { width: 46px; height: 46px; }
.mcard .mtx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mcard .mname { font: 900 18px/1.1 system-ui, sans-serif; color: #3a2618; }
.mcard .mname .draft { font-size: 9px; padding: 2px 4px 1px; margin-left: 4px; }
.mcard .mbl { font: 700 13px/1.2 system-ui, sans-serif; color: #6a4a32; }
.mcard.on { border: 4px solid #2a8f6f; background-color: #eafbe8; box-shadow: 0 5px 0 rgba(20,70,50,.35), inset 0 0 0 4px #fff; transform: translateY(-2px) scale(1.03); }
.mcard.on .mic { background: #cdeecf; }
.mcard.on .mname::after { content: ' \2713'; color: #2a8f6f; }
.mcard:focus-visible { outline: 4px solid #2a6fbf; outline-offset: 3px; }
@media (hover: hover) { .mcard:hover { transform: translateY(-2px); } .mcard.on:hover { transform: translateY(-2px) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .mcard, .mcard.on { transition: none; transform: none; } }
/* title layout with the picker: logo shrinks so the cards fit between it and the buttons */
#titlescreen .logo { height: min(48vw, 58vh, calc(100vh - 290px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
#modepick { position: absolute; left: 0; right: 0; bottom: calc(172px + env(safe-area-inset-bottom)); padding: 0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left)); }
#pause #pzmodes .modecards { flex-direction: column; margin-bottom: 10px; }
#pause .mcard { width: 100%; min-height: 84px; border: 3px dashed #b08664; font: 700 14px system-ui, sans-serif; }
#pause .mcard.on { border: 4px solid #2a8f6f; transform: none; }
#pause.modes .menu { display: none; }
#pzmodes-back { width: 100%; }
#pz-mode { display: flex; align-items: center; justify-content: center; gap: 8px; }
#pz-mode .pmi svg { width: 34px; height: 34px; display: block; }
/* phones in landscape (iPhone 844x390 etc.): logo left, cards in a column on the right (clear of the sound button), one scrolling row of levels */
@media (orientation: landscape) and (max-height: 520px) {
  #titlescreen .logo { left: calc(8px + env(safe-area-inset-left)); transform: none; top: calc(30px + env(safe-area-inset-top)); width: calc(100vw - 400px - env(safe-area-inset-left) - env(safe-area-inset-right)); height: calc(100vh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  #modepick { left: auto; right: calc(104px + env(safe-area-inset-right)); bottom: auto; top: calc(12px + env(safe-area-inset-top)); flex-direction: column; gap: 8px; padding: 0; }
  #modepick .mcard { width: 270px; min-height: 80px; padding: 6px 10px 6px 8px; }
  #modepick .mcard .mic { width: 50px; height: 50px; } #modepick .mcard .mic svg { width: 40px; height: 40px; }
  #modepick .mcard .mname { font-size: 16px; } #modepick .mcard .mbl { font-size: 12px; }
  #modepick .mcard.on { transform: none; }
  #titlescreen .btns { left: calc(8px + env(safe-area-inset-left)); right: calc(392px + env(safe-area-inset-right)); bottom: calc(54px + env(safe-area-inset-bottom)); gap: 10px; }
  #titlescreen .btns button { font-size: 17px; padding: 10px 16px; min-height: 52px; }
}
/* narrow / short screens: the level select is one scrolling row so it never covers the buttons */
@media (max-height: 520px), (max-width: 700px), (orientation: portrait) {
  #levelsel { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; max-width: none; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 4px calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left)); }
  #levelsel::-webkit-scrollbar { display: none; }
  #levelsel button { flex: 0 0 auto; min-height: 34px; }
}
@media (orientation: portrait) {
  #modepick { flex-direction: column; align-items: center; gap: 10px; bottom: auto; top: calc(18vh + 50vw + env(safe-area-inset-top)); }
  #modepick .mcard { width: min(340px, 88vw); }
  #titlescreen .logo { height: 50vw; }
}
/* short landscape screens (iPhone): the pause-menu mode panel is a 2x2 grid so the title, all three cards and Back fit without scrolling */
@media (orientation: landscape) and (max-height: 520px) {
  #pause.modes .card { width: min(660px, 92vw); padding: 12px 16px 14px; }
  #pause.modes h2 { margin-bottom: 8px; font-size: 24px; }
  #pause #pzmodes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #pause #pzmodes[hidden] { display: none; }
  #pause #pzmodes .modecards { display: contents; }
  #pause #pzmodes .mcard, #pause #pzmodes-back { min-height: 84px; margin: 0; }
}