*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1d2340;font-family:"Trebuchet MS",system-ui,sans-serif;color:#fff;
 touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}
#game{position:fixed;inset:0;width:100%;height:100%;display:block}
.screen{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(20,24,52,.92);
 padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#intro{background:#000}
#sbStage{position:absolute;inset:0;background:#000}
#sbStage img,#sbStage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
#sbVideo{opacity:0;transition:opacity .25s}
#sbVideo.ready{opacity:1}
#sbCaption{position:absolute;z-index:2;left:0;right:0;bottom:0;text-align:center;pointer-events:none;
 padding:28px calc(16px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
 background:linear-gradient(transparent,rgba(0,0,0,.72) 30%,rgba(0,0,0,.85))}
#sbText{margin:0 auto;max-width:1000px;font-size:clamp(22px,min(5.4vw,6vh),42px);line-height:1.3;font-weight:bold;text-shadow:0 2px 4px #000}
#sbText b{font-weight:900}
.n-emmett{color:#a6ec6e}.n-sarah{color:#5fe3d4}.n-daphne{color:#ff9f86}.n-mothley{color:#d3a4ff}
#sbHint{margin-top:8px;font-size:clamp(13px,3.4vw,17px);opacity:.75;animation:sbPulse 1.6s ease-in-out infinite}
@keyframes sbPulse{50%{opacity:.35}}
#sbTitle{position:absolute;z-index:2;left:0;right:0;top:calc(4vh + env(safe-area-inset-top));text-align:center;pointer-events:none;font-size:clamp(40px,min(10vw,13vh),88px)}
#sbDots{position:absolute;z-index:2;left:calc(16px + env(safe-area-inset-left));top:calc(26px + env(safe-area-inset-top));display:flex;gap:6px;pointer-events:none}
#sbDots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)}
#sbDots i.on{background:#ffd75e}
@media (orientation:portrait){   /* phone upright: picture letterboxed in the middle, caption sits right under it, bigger */
 #sbCaption{bottom:auto;top:calc(50% + 28.125vw + 6px);background:none;padding-top:10px}
 #sbText{font-size:clamp(22px,7vw,40px)}
 #sbTitle{top:auto;bottom:calc(50% + 28.125vw + 10px)}
}
.hidden{display:none!important}
.center{text-align:center;position:relative;z-index:2}
.panel{background:rgba(255,255,255,.08);border-radius:22px;padding:18px 22px;max-width:min(680px,94vw);max-height:92dvh;overflow:auto}
h1{font-size:clamp(32px,7vw,64px);margin:6px 0 12px;color:#ffd75e;text-shadow:0 4px 0 #b0752a}
h2{font-size:clamp(22px,5vw,36px);margin:4px 0 10px;color:#ffd75e}
p{font-size:clamp(16px,3.6vw,22px);line-height:1.4}
.help{font-size:13px;opacity:.75}
button{font-family:inherit;cursor:pointer;border:0;color:#2a1d05}
.big{font-size:clamp(20px,4.5vw,28px);padding:12px 30px;border-radius:40px;background:#ffd75e;box-shadow:0 5px 0 #b0752a;margin:8px}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #b0752a}
.skip{position:absolute;z-index:3;right:calc(16px + env(safe-area-inset-right));top:calc(16px + env(safe-area-inset-top));font-size:20px;padding:10px 20px;border-radius:30px;background:rgba(255,255,255,.85)}
.portraits{display:flex;gap:10px;justify-content:center;margin:6px 0}
.portraits img{width:clamp(64px,16vw,110px);height:clamp(64px,16vw,110px);border-radius:50%;object-fit:cover;border:4px solid #ffd75e}
.levels{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:10px 0}
.levels button{font-size:16px;padding:9px 14px;border-radius:14px;background:#8fd3ff}
.levels button:disabled{background:#556;color:#99a;cursor:default}
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.topbar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left))}
#levelName{flex:1;font-size:clamp(14px,3.5vw,22px);font-weight:bold;text-shadow:0 2px 3px #000}
.hbtn{pointer-events:auto;width:44px;height:44px;border-radius:50%;font-size:22px;background:rgba(255,255,255,.85)}
#who{position:absolute;left:calc(10px + env(safe-area-inset-left));top:calc(60px + env(safe-area-inset-top));display:flex;align-items:center;gap:8px;font-weight:bold;text-shadow:0 2px 3px #000}
#who img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:3px solid #ffd75e}
#toast{position:absolute;left:50%;transform:translateX(-50%);top:calc(70px + env(safe-area-inset-top));max-width:90vw;background:rgba(0,0,0,.6);padding:10px 18px;border-radius:16px;font-size:clamp(15px,3.4vw,20px);text-align:center;opacity:0;transition:opacity .3s}
#toast.show{opacity:1}
#touch{position:absolute;left:0;right:0;bottom:0;display:none;justify-content:space-between;align-items:flex-end;
 padding:0 calc(12px + env(safe-area-inset-right)) calc(78px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}
body.touch #touch{display:flex}
.tleft,.tright{display:flex;gap:12px;align-items:flex-end}
.tbtn{pointer-events:auto;width:clamp(62px,17vw,86px);height:clamp(62px,17vw,86px);border-radius:50%;background:rgba(255,255,255,.55);font-size:clamp(24px,6vw,34px);font-weight:bold;touch-action:none}
.tbtn.small{width:clamp(52px,13vw,70px);height:clamp(52px,13vw,70px)}
.tbtn.jump{background:rgba(255,215,94,.75)}
.tbtn.on{background:rgba(255,255,255,.9)}

#card{background:rgba(20,24,52,.75);z-index:12}
.card h2{font-size:clamp(30px,7vw,52px);margin:4px 0}
.mothley{width:clamp(64px,16vw,110px);height:clamp(64px,16vw,110px);border-radius:50%;border:4px solid #ffd75e;background:#7a3aa0;display:flex;align-items:center;justify-content:center;font-size:clamp(36px,9vw,64px)}