:root{
  --p:#6551d9;--d:#3b2f94;--bg:#29235f;--white:#ffffff;--paper:#fffefa;--cream:#fff7df;--belly:#fff3cf;
  --safe-l:max(10px,env(safe-area-inset-left));--safe-r:max(10px,env(safe-area-inset-right));--safe-t:max(8px,env(safe-area-inset-top));--safe-b:max(8px,env(safe-area-inset-bottom));
  font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-size:16px}
body{min-width:280px;min-height:280px;color:var(--white);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0;min-width:44px;min-height:44px;border-radius:15px;font-weight:800;letter-spacing:.01em}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--white);outline-offset:2px;box-shadow:0 0 0 6px var(--d)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--p);color:var(--white);box-shadow:0 6px 0 var(--d),0 10px 22px rgba(0,0,0,.18)}
button.primary:active{transform:translateY(3px);box-shadow:0 3px 0 var(--d)}
button.secondary,.toolBtn,.textBtn,.iconBtn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32)}
button.secondary:hover,.toolBtn:hover,.textBtn:hover,.iconBtn:hover{background:rgba(255,255,255,.2)}
button.big{min-height:52px;font-size:17px}
#app{position:relative;width:100vw;height:100dvh;overflow:hidden;background:
  radial-gradient(circle at 78% 18%,rgba(255,255,255,.08) 0 2px,transparent 3px),
  radial-gradient(circle at 20% 28%,rgba(255,243,207,.08) 0 1px,transparent 2px),
  linear-gradient(180deg,var(--bg),#211c51)}
#ambient{position:absolute;inset:0;pointer-events:none;opacity:.45;background-image:
 radial-gradient(circle at 8% 78%,rgba(255,243,207,.7) 0 1px,transparent 2px),
 radial-gradient(circle at 89% 66%,rgba(255,243,207,.55) 0 1.5px,transparent 2.5px),
 radial-gradient(circle at 61% 12%,rgba(255,255,255,.45) 0 1px,transparent 2px),
 radial-gradient(circle at 36% 89%,rgba(255,255,255,.4) 0 1px,transparent 2px);background-size:250px 190px,310px 260px,210px 240px,330px 200px}
.screen{position:absolute;inset:0;display:none;min-width:0;min-height:0;overflow:hidden}
.screen.active{display:grid}
.safeHeader{padding-left:max(62px,var(--safe-l));padding-right:var(--safe-r);padding-top:var(--safe-t)}
.headerSpacer{width:0;min-width:0}
.srOnly{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Title */
#titleScreen{grid-template-columns:minmax(230px,44vw) minmax(0,560px);justify-content:center;align-items:center;gap:clamp(12px,4vw,54px);padding:calc(var(--safe-t) + 12px) var(--safe-r) var(--safe-b) var(--safe-l)}
.titleScene{position:relative;width:min(42vw,490px);aspect-ratio:1/1;align-self:center;justify-self:end;min-width:0}
.moonGlow{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(255,254,250,.16),rgba(101,81,217,.08) 55%,transparent 70%);filter:blur(.2px)}
.titleBranch{position:absolute;left:0;right:0;bottom:12%;height:18%;border-radius:50% 20% 45% 25%;background:linear-gradient(180deg,#8e603c 0 20%,#70482f 22% 55%,#4c3126 58% 100%);transform:rotate(-4deg);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.titleBranch:before,.branchArt:before{content:"";position:absolute;inset:16% 4%;border-radius:50%;background:repeating-linear-gradient(8deg,transparent 0 12px,rgba(255,255,255,.12) 13px 15px,transparent 16px 30px)}
.titleBranch span{position:absolute;width:24%;height:50%;border-radius:80% 0 80% 0;background:#5f7a43;bottom:55%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.titleBranch span:nth-child(1){left:16%;transform:rotate(-25deg)}.titleBranch span:nth-child(2){left:50%;transform:rotate(14deg)}.titleBranch span:nth-child(3){right:4%;transform:rotate(34deg)}
.whizSpot{position:absolute;inset:8% 11% 12%;display:grid;place-items:center;filter:drop-shadow(0 18px 20px rgba(0,0,0,.28))}
.titlePanel{min-width:0;max-width:560px;padding:8px}
.eyebrow{margin:0 0 6px;font-size:13px;font-weight:900;letter-spacing:.13em;color:var(--belly)}
h1{font-size:clamp(38px,7vw,72px);line-height:.94;margin:0 0 12px;max-width:9ch;text-shadow:0 4px 0 var(--d)}
.teach{font-size:clamp(15px,2vw,20px);line-height:1.35;margin:0 0 18px;max-width:47ch;color:var(--paper);font-weight:700}
.titleActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px}
.titleActions .big{grid-column:auto}.iconText{display:flex;gap:8px;align-items:center;justify-content:center}
.titleFooter{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:13px;font-weight:800}.titleFooter span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18)}

/* Mascot art */
.whizSvg{width:100%;height:100%;overflow:visible}
.whizBody{transform-origin:50% 60%}.whizHappy .whizBody{animation:whizBob .72s ease-out 1}.whizThink .wingR{transform-origin:70% 60%;animation:thinkWing .68s ease-out 1}.whizCelebrate .whizBody{animation:celebrate .65s ease-in-out 2}
@keyframes whizBob{50%{transform:translateY(-2.5%) rotate(1deg)}}@keyframes thinkWing{50%{transform:rotate(-9deg) translate(-2%,2%)}}@keyframes celebrate{30%{transform:translateY(-8%) scale(1.03)}70%{transform:translateY(0) rotate(-3deg)}}

/* Shared headers */
.screenHeader,.gameTop{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;height:56px;min-height:56px;background:rgba(41,35,95,.82);border-bottom:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);z-index:5}
.screenHeader h2,.gameTop strong{margin:0;text-align:center;font-size:clamp(18px,2.6vw,25px)}
.screenHeader .iconBtn,.gameTop .iconBtn{justify-self:end}
.iconBtn{width:44px;padding:0;display:grid;place-items:center;font-size:22px}
.textBtn{padding:0 13px}

/* Map */
#mapScreen{grid-template-rows:56px 1fr}
.mapLayout{min-height:0;display:grid;grid-template-columns:minmax(250px,38%) minmax(0,720px);justify-content:center;gap:14px;padding:12px var(--safe-r) var(--safe-b) var(--safe-l)}
.worldTree,.levelPanel{min-height:0;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);border-radius:24px;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.worldTree{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;align-content:center;background-image:linear-gradient(90deg,transparent 49%,rgba(255,247,223,.18) 50%,transparent 51%)}
.worldBtn{position:relative;min-height:64px;padding:8px 9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);text-align:left;overflow:hidden}.worldBtn[aria-pressed="true"]{background:var(--p);box-shadow:inset 0 0 0 2px var(--white)}.worldBtn span{display:block;font-size:13px;line-height:1.2}.worldBtn strong{display:block;font-size:15px;margin-bottom:2px}.worldBtn .worldNum{position:absolute;right:6px;bottom:-10px;font-size:44px;opacity:.13}
.levelPanel{padding:12px;display:grid;grid-template-rows:auto 1fr;gap:10px}
.worldSummary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.worldSummary h3{font-size:22px;margin:0}.worldSummary p{font-size:13px;margin:2px 0 0;color:var(--belly)}
.miniChick{width:58px;height:48px}
.levelGrid{display:grid;grid-template-columns:repeat(5,minmax(44px,1fr));grid-template-rows:repeat(4,minmax(44px,1fr));gap:7px;min-height:0}
.levelBtn{position:relative;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);font-size:16px}.levelBtn.solved{background:rgba(101,81,217,.7)}.levelBtn.lockedTheme:after{content:"✦";position:absolute;right:4px;top:1px;font-size:11px;color:var(--belly)}.levelStars{display:block;font-size:11px;letter-spacing:-2px;color:var(--belly)}

/* Game */
#gameScreen{grid-template-rows:56px minmax(0,1fr)}
.gameTop{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto auto;gap:6px}
.gameIdentity{min-width:0;display:flex;align-items:baseline;justify-content:center;gap:7px;white-space:nowrap;overflow:hidden}.gameIdentity strong,.gameIdentity span{overflow:hidden;text-overflow:clip}.gameIdentity span{font-size:12px;color:var(--belly);font-weight:800}
.topStats{display:flex;gap:5px;min-width:0}.statPill{min-width:44px;min-height:32px;padding:6px 8px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:12px;font-weight:900;white-space:nowrap}
.playLayout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:12px;max-width:1320px;width:100%;justify-self:center;padding:10px var(--safe-r) var(--safe-b) var(--safe-l)}
.boardStage{position:relative;min-width:0;min-height:0;display:grid;place-items:center;padding:8px 8px 18px}
.branchArt{position:absolute;left:4%;right:3%;bottom:2%;height:18%;background:linear-gradient(180deg,#9a6842,#70472e 48%,#4d3022);border-radius:50% 45% 55% 35%;transform:rotate(-1deg);box-shadow:0 10px 22px rgba(0,0,0,.32);overflow:hidden}.branchArt i{position:absolute;width:17%;height:40%;background:#617d43;border-radius:100% 0 100% 0;top:-20%}.branchArt i:nth-child(1){left:8%;transform:rotate(-35deg)}.branchArt i:nth-child(2){left:55%;transform:rotate(14deg)}.branchArt i:nth-child(3){right:7%;transform:rotate(38deg)}
.boardWrap{position:relative;width:min(100%,calc(100dvh - 96px),720px);aspect-ratio:1;z-index:2;filter:drop-shadow(0 14px 22px rgba(0,0,0,.24))}
.board{position:absolute;inset:0;display:grid;border:2px solid #6f4b30;border-radius:18px;background:var(--cream);overflow:hidden;box-shadow:inset 0 0 0 1px #a57b55,0 0 0 3px #6f4b30,0 0 0 5px rgba(255,243,207,.22)}
.cell{position:relative;min-width:0;min-height:0;border:1px solid rgba(59,47,148,.26);background-color:rgba(255,254,250,.93);display:grid;place-items:center;padding:0;font-weight:900;border-radius:0;color:var(--d);overflow:visible}
.cell:focus-visible{z-index:15;outline-offset:-4px}.cell.pattern0{background-image:linear-gradient(135deg,rgba(101,81,217,.05) 25%,transparent 25%,transparent 75%,rgba(101,81,217,.05) 75%)}.cell.pattern1{background-image:radial-gradient(circle at 30% 30%,rgba(59,47,148,.08) 0 1.2px,transparent 1.7px)}.cell.pattern2{background-image:repeating-linear-gradient(45deg,rgba(101,81,217,.06) 0 2px,transparent 2px 8px)}.cell.pattern3{background-image:linear-gradient(90deg,rgba(59,47,148,.05) 50%,transparent 50%)}
.cell.rowHi,.cell.colHi{background-color:#fffaf0}.cell.nestHi{box-shadow:inset 0 0 0 999px rgba(101,81,217,.08)}.cell.selected{z-index:10;box-shadow:inset 0 0 0 4px var(--p),0 0 0 2px var(--white)}
.cell.conflict:after{content:"!";position:absolute;right:3px;bottom:3px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--d);color:var(--white);font-size:12px;border:2px dashed var(--white)}.cell.conflict{outline:2px dashed var(--d);outline-offset:-5px}
.cell.hintCell{animation:hintPulse 1s ease-in-out 2;box-shadow:inset 0 0 0 4px var(--p),inset 0 0 0 7px var(--white)}@keyframes hintPulse{50%{filter:brightness(1.08);transform:scale(.97)}}
.value{font-size:clamp(23px,calc(var(--cell-size,60px)*.55),54px);line-height:1;transform:translateY(4%);text-shadow:0 1px 0 var(--white)}
.notes{position:absolute;left:7%;right:7%;bottom:7%;display:grid;grid-template-columns:repeat(3,1fr);gap:0;font-size:max(11px,calc(var(--cell-size,60px)*.16));line-height:1;color:var(--d);opacity:.82}.note{min-height:11px;text-align:center}.notesDot{position:absolute;right:7px;bottom:7px;width:7px;height:7px;border-radius:50%;background:var(--d);box-shadow:0 0 0 2px var(--white)}
.cageLabel{position:absolute;left:4px;top:3px;z-index:5;min-width:27px;max-width:70%;height:21px;padding:1px 5px;border-radius:10px 10px 10px 3px;background:#f2e4b9;color:#3d2c22;border:1px solid #a27d50;font-size:max(13px,calc(var(--cell-size,60px)*.19));line-height:17px;font-weight:950;display:block;text-align:left;white-space:nowrap;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.cageLabel.completedTag{background:#fff3cf}.cageLabel.completedTag:after{content:"✓";margin-left:2px;color:#3b2f94}.cageLabel.hatched{transform:rotate(-5deg) scale(.92);opacity:.5}.hatchChick{position:absolute;right:3px;top:3px;width:19px;height:19px;border-radius:52% 52% 46% 46%;background:#fff3cf;border:2px solid #3b2f94;z-index:9;box-shadow:0 2px 4px rgba(0,0,0,.15);animation:chickPop .32s ease-out}.hatchChick:before{content:"";position:absolute;left:3px;top:5px;width:3px;height:3px;border-radius:50%;background:#29235f;box-shadow:7px 0 0 #29235f}.hatchChick i{position:absolute;left:6px;top:9px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid #ffc93c}@keyframes chickPop{0%{transform:scale(.2) rotate(-12deg)}70%{transform:scale(1.18) rotate(5deg)}100%{transform:scale(1)}}
.cageBorderT{border-top:4px solid #6f4b30}.cageBorderR{border-right:4px solid #6f4b30}.cageBorderB{border-bottom:4px solid #6f4b30}.cageBorderL{border-left:4px solid #6f4b30}
.cageBorderT:before{content:"";position:absolute;left:0;right:0;top:1px;border-top:1px dashed rgba(255,247,223,.55);pointer-events:none}
.equationFloat{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.8);padding:8px 12px;border-radius:999px;background:rgba(255,254,250,.96);color:var(--d);font-weight:950;font-size:17px;opacity:0;pointer-events:none;z-index:30;box-shadow:0 8px 18px rgba(0,0,0,.18)}.equationFloat.show{animation:eqPop 1.25s ease forwards}@keyframes eqPop{15%{opacity:1;transform:translate(-50%,-68%) scale(1.05)}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-115%) scale(.95)}}
.controlPanel{min-width:0;min-height:0;display:grid;grid-template-rows:auto auto auto auto auto;align-content:center;gap:8px;padding:7px;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.whizCoach{min-width:0;display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;align-items:center;padding:4px 8px;background:rgba(255,255,255,.08);border-radius:18px}.coachWhiz{width:56px;height:52px}.coachText{min-width:0}.coachText strong,.coachText span{display:block}.coachText strong{font-size:14px}.coachText span{font-size:13px;line-height:1.25;color:var(--paper)}
.selectedNotes{font-size:12px;min-height:20px;text-align:center;color:var(--belly);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:clip}
.numberPad{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(44px,1fr);gap:6px}.numKey{background:var(--paper);color:var(--d);border:2px solid var(--belly);font-size:22px;box-shadow:0 4px 0 rgba(59,47,148,.55)}.numKey:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(59,47,148,.55)}
.modeRow,.utilityRow{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:6px}.toolBtn{padding:4px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:12px}.toolBtn>span:first-child:not(:only-child){font-size:17px}.toolBtn[aria-pressed="true"]{background:var(--p);box-shadow:inset 0 0 0 2px var(--white)}.smallText{font-size:12px;flex-direction:row}

/* Tutorial */
#tutorialScreen{grid-template-rows:56px 1fr}
.tutorialLayout{min-height:0;display:grid;grid-template-columns:minmax(160px,320px) minmax(0,620px);align-items:center;justify-content:center;gap:22px;padding:12px var(--safe-r) var(--safe-b) var(--safe-l)}
.tutorialWhiz{width:min(28vw,280px);aspect-ratio:1;justify-self:end}.tutorialCard{min-width:0;max-height:100%;background:var(--paper);color:var(--d);border-radius:28px;padding:clamp(14px,2.6vw,24px);box-shadow:0 16px 36px rgba(0,0,0,.28);display:grid;gap:10px;align-content:center}.stepPips{display:flex;gap:5px}.stepPips span{width:22px;height:7px;border-radius:999px;background:rgba(59,47,148,.18)}.stepPips span.on{background:var(--p)}.tutorialCard h3{font-size:clamp(22px,4vw,30px);margin:0}.tutorialCard p{font-size:14px;line-height:1.35;margin:0;font-weight:700}.tutorialDemo{min-height:96px;border-radius:18px;background:var(--cream);border:2px solid rgba(59,47,148,.14);display:grid;place-items:center;padding:10px}.miniGrid{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:2px}.miniGrid span{display:grid;place-items:center;background:var(--white);border:1px solid rgba(59,47,148,.22);font-size:20px;font-weight:900}.miniGrid .miniTarget{position:relative}.miniGrid .miniTarget:before{content:attr(data-label);position:absolute;left:2px;top:1px;font-size:11px;color:#3d2c22}.dotArray{display:grid;grid-template-columns:repeat(4,15px);gap:7px;padding:8px}.dotArray i{width:15px;height:15px;border-radius:50%;background:var(--p);box-shadow:inset 0 -2px 0 var(--d)}.tutorialChoices{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.tutorialChoices button{background:var(--p);padding:0 16px}.tutorialChoices button.correct{box-shadow:0 0 0 3px var(--d)}.tutorialNav{display:flex;justify-content:space-between;gap:10px}.tutorialNav button{min-width:96px;padding:0 15px;color:var(--d)}.tutorialNav .primary{color:var(--white)}

/* Banner and sheets */
.banner{position:fixed;z-index:80;top:calc(var(--safe-t) + 7px);left:max(66px,calc(var(--safe-l) + 56px));right:max(10px,var(--safe-r));margin:auto;max-width:650px;min-height:44px;padding:10px 14px;border-radius:16px;background:rgba(255,254,250,.58);color:var(--d);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(12px);box-shadow:0 8px 20px rgba(0,0,0,.14);font-size:13px;font-weight:900;text-align:center;pointer-events:none;opacity:0;transform:translateY(-10px);transition:opacity .15s ease,transform .15s ease}.banner.show{opacity:1;transform:none}.backdrop{position:fixed;inset:0;z-index:90;background:rgba(255,255,255,.45);backdrop-filter:blur(3px)}
.sheet{position:fixed;z-index:91;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100vw - 20px));max-height:calc(100dvh - 20px);background:rgba(255,254,250,.98);color:var(--d);border-radius:26px;box-shadow:0 18px 50px rgba(41,35,95,.35);border:2px solid rgba(59,47,148,.14);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}.sheet[hidden],.backdrop[hidden]{display:none}.sheetHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 8px 18px;border-bottom:1px solid rgba(59,47,148,.12)}.sheetHead h2{font-size:22px;margin:0}.sheetHead .iconBtn{color:var(--d);border-color:rgba(59,47,148,.2);background:rgba(101,81,217,.08)}.sheetBody{min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 18px 18px;font-size:14px;line-height:1.4}.sheetBody h3{font-size:17px;margin:14px 0 6px}.sheetBody p{margin:6px 0}.sheetBody button{color:var(--d)}.sheetBody .primary{color:var(--white)}
.sheetActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}.sheetActions button{padding:0 10px}.settingsGrid{display:grid;gap:9px}.settingRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(59,47,148,.1)}.switchBtn{min-width:90px;padding:0 10px;background:rgba(101,81,217,.1);border:1px solid rgba(59,47,148,.2)}.switchBtn[aria-pressed="true"]{background:var(--p);color:var(--white)}
.bandGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bandCard{min-height:108px;padding:10px;background:rgba(101,81,217,.08);border:2px solid rgba(59,47,148,.14);color:var(--d);text-align:left}.bandCard strong,.bandCard span{display:block}.bandCard strong{font-size:16px}.bandCard span{font-size:12px;margin-top:5px;line-height:1.3}.bandCard.selected{background:var(--p);color:var(--white)}
.comboList{display:grid;gap:6px}.combo{padding:8px 10px;border-radius:12px;background:rgba(101,81,217,.08);font-weight:800}.combo.clash{text-decoration:line-through;opacity:.5}.hintExplain{padding:10px;border-radius:14px;background:var(--cream);border-left:5px solid var(--p)}
.mathGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mathCard{padding:12px;border-radius:16px;background:var(--cream);border:1px solid rgba(59,47,148,.12)}.mathCard strong{font-size:18px}.factFamily{display:grid;place-items:center;min-height:86px;margin-top:8px;border-radius:12px;background:var(--white);font-size:15px;font-weight:900;text-align:center}
.dailyCal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:10px 0}.dayTick{min-height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(101,81,217,.08);font-size:11px;font-weight:900}.dayTick.done{background:var(--p);color:var(--white)}
.winHero{text-align:center}.winChick{height:120px}.starsBig{font-size:38px;letter-spacing:3px;color:#6a501f;text-shadow:0 2px 0 var(--belly)}.rewardPill{display:inline-block;padding:7px 10px;border-radius:999px;background:var(--cream);font-weight:900;margin:4px}.confettiLayer{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden}.confettiPiece{position:absolute;top:-16px;width:9px;height:16px;border-radius:4px;background:var(--p);animation:confettiFall 1.5s linear forwards}.confettiPiece:nth-child(3n){background:#ffca45}.confettiPiece:nth-child(3n+1){background:#ff8b66}.confettiPiece:nth-child(4n){background:#57cda5}@keyframes confettiFall{to{transform:translate(var(--dx),110dvh) rotate(520deg)}}


.cell.rejectCell{animation:rejectWobble .34s ease-in-out;box-shadow:inset 0 0 0 4px var(--d)}
@keyframes rejectWobble{0%,100%{transform:translateX(0)}25%{transform:translateX(-5%)}50%{transform:translateX(5%)}75%{transform:translateX(-3%)}}
body.themeMoon .boardStage{background-image:radial-gradient(circle at 12% 20%,rgba(255,255,255,.2) 0 1px,transparent 2px),radial-gradient(circle at 82% 28%,rgba(255,243,207,.22) 0 1px,transparent 2px),radial-gradient(circle at 73% 82%,rgba(255,255,255,.16) 0 1px,transparent 2px);background-size:90px 80px,120px 110px,140px 100px;border-radius:28px}
body.themeMoon .board{box-shadow:inset 0 0 0 1px #a57b55,0 0 0 3px #6f4b30,0 0 0 6px rgba(255,243,207,.32),0 0 30px rgba(255,255,255,.12)}

@media(max-width:760px) and (orientation:portrait){
  #titleScreen{grid-template-columns:1fr;grid-template-rows:minmax(145px,38%) 1fr;gap:0;padding:calc(var(--safe-t) + 8px) var(--safe-r) var(--safe-b) var(--safe-l)}.titleScene{width:min(68vw,290px);height:100%;justify-self:center}.whizSpot{inset:0 14% 6%}.titleBranch{bottom:3%}.titlePanel{text-align:center;justify-self:center;width:min(100%,500px);padding:0 6px}.titlePanel h1{max-width:none;font-size:clamp(36px,13vw,55px);margin-bottom:8px}.teach{font-size:14px;margin:0 auto 10px;max-width:35ch}.eyebrow{font-size:11px;margin-bottom:3px}.titleActions{gap:7px}.titleActions button{min-height:44px}.titleActions button.big{min-height:48px}.titleFooter{justify-content:center;margin-top:8px}
  .mapLayout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:8px;padding-top:8px}.worldTree{grid-template-columns:repeat(3,1fr);padding:6px;gap:5px}.worldBtn{min-height:52px;padding:5px}.worldBtn span{display:none}.worldBtn strong{font-size:12px}.worldBtn .worldNum{font-size:30px}.levelPanel{padding:8px;gap:6px}.worldSummary h3{font-size:18px}.miniChick{height:36px;width:44px}.levelGrid{gap:5px}
  .playLayout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:3px;padding:4px var(--safe-r) var(--safe-b) var(--safe-l)}.boardStage{padding:2px 4px 11px}.boardWrap{width:min(calc(100vw - var(--safe-l) - var(--safe-r) - 8px),calc(100dvh - 250px),430px)}.controlPanel{border-radius:18px;gap:4px;padding:4px}.whizCoach{display:none}.selectedNotes{min-height:16px;font-size:11px}.numberPad{gap:4px}.modeRow,.utilityRow{gap:4px}.toolBtn{min-height:44px}.gameIdentity{justify-content:flex-start}.gameTop{grid-template-columns:minmax(0,1fr) auto auto;}.gameTop .headerSpacer{display:none}.gameIdentity strong{font-size:14px}.gameIdentity span{font-size:11px}.statPill{padding:4px 6px}.topStats #timerLabel{display:none}
  .tutorialLayout{grid-template-columns:1fr;padding:8px var(--safe-r) var(--safe-b) var(--safe-l)}.tutorialWhiz{display:none}.tutorialCard{width:min(100%,560px);justify-self:center;padding:12px;gap:7px}.tutorialDemo{min-height:84px}.tutorialCard h3{font-size:21px}.tutorialCard p{font-size:13px}
}
@media(max-width:520px){.iconText span:last-child{display:none}.titleFooter{font-size:11px}.topStats{gap:3px}.gameTop{padding-left:max(60px,var(--safe-l));gap:4px}.gameIdentity span{display:none}.screenHeader h2{font-size:18px}}

@media(orientation:landscape) and (max-height:520px){
  .screenHeader,.gameTop{height:48px;min-height:48px;padding-top:2px}.screenHeader h2{font-size:18px}
  #titleScreen{grid-template-columns:minmax(170px,34%) minmax(300px,550px);gap:12px;padding:6px var(--safe-r) 6px var(--safe-l)}.titleScene{width:min(31vw,245px);height:min(92dvh,295px);justify-self:end}.titlePanel{padding:4px}.titlePanel h1{font-size:clamp(33px,6.2vw,50px);margin-bottom:5px}.eyebrow{font-size:11px;margin-bottom:2px}.teach{font-size:13px;line-height:1.25;margin-bottom:7px;max-width:54ch}.titleActions{grid-template-columns:repeat(3,1fr);gap:5px}.titleActions button,.titleActions button.big{min-height:44px;font-size:13px}.titleFooter{margin-top:6px;font-size:11px}.titleBranch{bottom:2%}.whizSpot{inset:3% 11% 5%}
  #mapScreen{grid-template-rows:48px 1fr}.mapLayout{grid-template-columns:minmax(210px,32%) minmax(340px,690px);gap:7px;padding:5px var(--safe-r) 5px var(--safe-l)}.worldTree{grid-template-columns:repeat(2,1fr);gap:4px;padding:5px}.worldBtn{min-height:44px;padding:4px 6px}.worldBtn strong{font-size:12px}.worldBtn span{font-size:11px}.levelPanel{padding:5px;gap:4px}.worldSummary h3{font-size:16px}.worldSummary p{font-size:11px}.miniChick{width:40px;height:30px}.levelGrid{gap:4px}.levelBtn{font-size:13px}
  #gameScreen{grid-template-rows:48px minmax(0,1fr)}.playLayout{grid-template-columns:minmax(260px,1fr) minmax(270px,42%);gap:5px;padding:3px var(--safe-r) 4px var(--safe-l)}.boardStage{padding:0 4px 8px}.boardWrap{width:min(calc(100dvh - 52px),calc(58vw - var(--safe-l)),520px)}.branchArt{height:16%;bottom:0}.controlPanel{gap:3px;padding:4px;grid-template-rows:auto auto auto auto auto}.whizCoach{grid-template-columns:42px minmax(0,1fr);padding:2px 5px;gap:5px}.coachWhiz{width:40px;height:38px}.coachText strong{font-size:12px}.coachText span{font-size:11px;line-height:1.1}.selectedNotes{font-size:11px;min-height:14px}.numberPad,.modeRow,.utilityRow{gap:3px}.numKey,.toolBtn{min-height:44px}.toolBtn{font-size:11px}.toolBtn>span:first-child:not(:only-child){font-size:14px}.gameIdentity{justify-content:flex-start}.gameTop strong{font-size:14px}.gameIdentity span{font-size:11px}.statPill{min-height:30px;padding:4px 6px}.topStats{gap:3px}
  #tutorialScreen{grid-template-rows:48px 1fr}.tutorialLayout{grid-template-columns:minmax(110px,23%) minmax(380px,650px);gap:8px;padding:5px var(--safe-r) 5px var(--safe-l)}.tutorialWhiz{width:min(20vw,150px)}.tutorialCard{padding:8px 12px;gap:5px;border-radius:20px}.tutorialCard h3{font-size:18px}.tutorialCard p{font-size:12px;line-height:1.2}.tutorialDemo{min-height:68px;padding:4px}.miniGrid{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px)}.tutorialChoices button{min-height:44px}.tutorialNav button{min-width:80px}
  .sheet{max-height:calc(100dvh - 10px);width:min(680px,calc(100vw - 18px));border-radius:18px}.sheetHead{padding:5px 8px 4px 12px}.sheetHead h2{font-size:18px}.sheetBody{padding:7px 12px 10px;font-size:12px;line-height:1.25}.sheetBody h3{font-size:14px;margin:6px 0 3px}.sheetBody p{margin:3px 0}.sheetActions{margin-top:7px;gap:5px}.bandCard{min-height:82px;padding:6px}.bandCard strong{font-size:13px}.bandCard span{font-size:11px}.settingRow{padding:4px 0}.mathCard{padding:7px}.factFamily{min-height:54px}.winChick{height:70px}.starsBig{font-size:27px}.dailyCal{margin:5px 0}.dayTick{min-height:28px}
}
@media(min-width:1400px){.playLayout{grid-template-columns:minmax(0,820px) 390px;gap:24px}.boardWrap{width:min(720px,70dvh)}.titlePanel{max-width:620px}.teach{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confettiLayer{display:none!important}}
body.reduceMotion *,body.reduceMotion *:before,body.reduceMotion *:after{animation:none!important;transition:none!important}
.cell.smallCells .notes{display:none}


/* Pushback 1 fixes: finite mascot reactions, safe transient-message space, tree map, responsive tutorial, and desktop controls. */
body.motionPaused *,body.motionPaused *:before,body.motionPaused *:after{animation-play-state:paused!important}

/* Leaf targets size to their text and remain a compact top-left tag. */
.cageLabel{width:max-content;min-width:0;max-width:calc(100% - 8px);height:auto;min-height:20px;padding:2px 6px 1px;font-size:clamp(13px,calc(var(--cell-size,60px)*.11),17px);line-height:1.05;display:inline-flex;align-items:center;justify-content:flex-start;pointer-events:none}
.cageLabel.completedTag:after{flex:0 0 auto}

/* The banner owns a temporary strip rather than covering headers, boards, or controls. */
.banner{top:60px;left:max(62px,var(--safe-l));right:var(--safe-r);max-width:620px;min-height:42px;padding:8px 12px;transform:translateY(-4px)}
body.bannerOpen #gameScreen{grid-template-rows:56px 56px minmax(0,1fr)}
body.bannerOpen #gameScreen .playLayout{grid-row:3}
body.bannerOpen #mapScreen{grid-template-rows:56px 56px minmax(0,1fr)}
body.bannerOpen #mapScreen .mapLayout{grid-row:3}
body.bannerOpen #tutorialScreen{grid-template-rows:56px 56px minmax(0,1fr)}
body.bannerOpen #tutorialScreen .tutorialLayout{grid-row:3}

/* Illustrated family tree map. Only this panel scrolls. */
.mapLayout{grid-template-columns:minmax(0,980px);grid-template-rows:minmax(0,1fr);max-width:1040px;width:100%;justify-self:center;padding:10px var(--safe-r) var(--safe-b) var(--safe-l)}
.worldTree{position:relative;display:block;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding:22px clamp(10px,3vw,34px) 34px;border-radius:28px;background:
 radial-gradient(circle at 14% 8%,rgba(255,243,207,.14) 0 2px,transparent 3px),
 radial-gradient(circle at 83% 12%,rgba(255,255,255,.12) 0 2px,transparent 3px),
 linear-gradient(90deg,transparent calc(50% - 18px),rgba(112,72,47,.96) calc(50% - 18px),rgba(142,96,60,.98) 50%,rgba(76,49,38,.98) calc(50% + 18px),transparent calc(50% + 18px));
 background-size:190px 170px,230px 200px,100% 100%;border:1px solid rgba(255,255,255,.2);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.levelPanel{display:none!important}
.treeWorld{position:relative;z-index:1;min-height:168px;margin:0 auto 18px;padding:10px 12px 16px;border-radius:24px;background:rgba(255,254,250,.075);border:1px solid rgba(255,255,255,.13)}
.treeWorld:before{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:76px;height:24px;border-radius:55% 45% 52% 48%;background:linear-gradient(180deg,#9a6842,#70472f 55%,#4c3126);box-shadow:0 7px 13px rgba(0,0,0,.23);transform:rotate(-1deg)}
.treeWorld.branchRight:before{transform:rotate(1deg)}
.treeWorld:after{content:"";position:absolute;z-index:-1;width:52px;height:24px;top:67px;background:#70472f;border-radius:50%}
.treeWorld.branchLeft:after{right:46%;transform:rotate(22deg)}.treeWorld.branchRight:after{left:46%;transform:rotate(-22deg)}
.treeWorldHead{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:0 4px 6px}
.treeWorldHead h3{margin:1px 0 0;font-size:19px;line-height:1.05}.treeWorldHead p{margin:3px 0 0;font-size:12px;color:var(--belly);font-weight:800}.worldBadge{display:inline-block;padding:3px 7px;border-radius:999px;background:rgba(101,81,217,.72);font-size:11px;font-weight:900;color:var(--white)}
.treeChick{width:54px;height:46px;flex:0 0 auto}.treeChick.waiting{opacity:.42;filter:saturate(.25)}.treeChick.hatched{opacity:1}
.treeBranch{position:relative;display:grid;grid-template-columns:repeat(10,minmax(44px,1fr));gap:8px;align-items:center;padding:12px 4px 4px}
.treeBranch:before{content:"";position:absolute;left:2%;right:2%;top:50%;height:5px;border-radius:999px;background:rgba(255,243,207,.38);box-shadow:0 0 0 2px rgba(76,49,38,.55);z-index:-1}
.nestNode{position:relative;min-width:44px;min-height:48px;border-radius:50% 50% 46% 46%;padding:3px 2px;background:rgba(255,254,250,.9);color:var(--d);border:3px solid #70472f;box-shadow:inset 0 -4px 0 rgba(59,47,148,.08),0 3px 0 rgba(41,35,95,.35);overflow:visible}
.nestNode:before,.nestNode:after{content:"";position:absolute;width:40%;height:3px;top:4px;background:#70472f;border-radius:999px}.nestNode:before{left:-6%;transform:rotate(22deg)}.nestNode:after{right:-6%;transform:rotate(-22deg)}
.nestNode.solved{background:var(--belly);box-shadow:inset 0 0 0 2px var(--p),0 3px 0 rgba(41,35,95,.35)}
.nodeNumber{display:block;font-size:14px;font-weight:950;line-height:1}.levelStars{display:block;min-height:12px;font-size:11px;letter-spacing:-2px;line-height:1;color:var(--d)}
.currentNode{box-shadow:0 0 0 3px var(--white),0 0 0 6px var(--p),0 4px 0 rgba(41,35,95,.35)}
.mapWhiz{position:absolute;width:44px;height:44px;left:50%;bottom:34px;transform:translateX(-50%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));pointer-events:none}

/* Hints live in the coach and leave the puzzle interactive. */
.controlPanel.hinting .whizCoach{background:rgba(255,254,250,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.controlPanel.hinting .coachText span{color:var(--white)}

/* Tutorial: safe header and compact portrait; landscape explicitly splits demo and teaching. */
#tutorialScreen .screenHeader{grid-template-columns:0 minmax(0,1fr) auto}
#tutorialScreen .screenHeader h2{min-width:0;white-space:normal;line-height:1.05}
#skipTutorialBtn{justify-self:end;max-width:72px}

/* Large screens use the right panel instead of leaving a tall empty column. */
@media(min-width:1000px) and (min-height:650px){
  .playLayout{grid-template-columns:minmax(560px,780px) minmax(400px,470px);gap:22px;max-width:1300px;align-items:center;padding-top:14px;padding-bottom:14px}
  .boardWrap{width:min(100%,700px,calc(100dvh - 112px))}
  .controlPanel{align-self:center;padding:15px;gap:11px;border-radius:28px}
  .whizCoach{grid-template-columns:92px minmax(0,1fr);min-height:116px;padding:9px 12px}.coachWhiz{width:88px;height:88px}.coachText strong{font-size:18px}.coachText span{font-size:15px;line-height:1.35}
  .selectedNotes{font-size:13px;min-height:22px}.numberPad{gap:8px}.numKey{min-height:62px;font-size:28px;border-radius:18px}.modeRow,.utilityRow{gap:8px}.toolBtn{min-height:60px;font-size:13px;border-radius:17px}.toolBtn>span:first-child:not(:only-child){font-size:20px}
}

@media(max-width:760px) and (orientation:portrait){
  .controlPanel.hinting .whizCoach{display:grid;grid-template-columns:48px minmax(0,1fr);min-height:54px;padding:3px 7px;gap:5px}.controlPanel.hinting .coachWhiz{width:46px;height:46px}.controlPanel.hinting .coachText strong{font-size:13px}.controlPanel.hinting .coachText span{font-size:12px;line-height:1.15}.controlPanel.hinting .selectedNotes{display:none}
  .treeWorld{min-height:250px;padding-left:8px;padding-right:8px}.treeWorld:before{top:78px;left:4%;right:4%}.treeBranch{grid-template-columns:repeat(5,minmax(44px,1fr));grid-template-rows:repeat(4,48px);gap:8px 7px}.treeBranch:before{top:50%;height:5px}.mapWhiz{width:38px;height:38px;bottom:31px}
}

@media(orientation:landscape) and (max-height:520px){
  .banner{top:51px;left:max(62px,var(--safe-l));right:var(--safe-r);min-height:40px;padding:6px 10px}
  body.bannerOpen #gameScreen,body.bannerOpen #mapScreen,body.bannerOpen #tutorialScreen{grid-template-rows:48px 52px minmax(0,1fr)}
  body.bannerOpen #gameScreen .boardWrap{width:min(calc(100dvh - 100px),calc(58vw - var(--safe-l)),520px)}
  .mapLayout{grid-template-columns:minmax(0,1fr);padding:4px var(--safe-r) 4px var(--safe-l)}.worldTree{padding:10px 12px 18px}.treeWorld{min-height:136px;margin-bottom:10px;padding:5px 8px 8px}.treeWorldHead{min-height:44px}.treeWorldHead h3{font-size:15px}.treeWorldHead p{font-size:11px}.treeChick{width:42px;height:34px}.treeWorld:before{top:55px;height:19px}.treeWorld:after{top:49px}.treeBranch{grid-template-columns:repeat(10,minmax(44px,1fr));gap:5px;padding-top:8px}.nestNode{min-height:44px}.mapWhiz{width:34px;height:34px;bottom:29px}
  #tutorialScreen .tutorialLayout{grid-template-columns:minmax(0,1fr);padding:4px var(--safe-r) 4px var(--safe-l);gap:0}.tutorialWhiz{display:none}.tutorialCard{width:100%;height:100%;max-width:760px;justify-self:center;align-self:stretch;padding:6px 8px;gap:5px;border-radius:18px;display:grid;grid-template-columns:minmax(150px,36%) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:"demo pips" "demo title" "demo text" "demo choices" "demo nav";align-content:stretch}.tutorialDemo{grid-area:demo;min-height:0;height:100%;padding:5px}.stepPips{grid-area:pips}.tutorialCard h3{grid-area:title;font-size:18px;line-height:1.05}.tutorialCard p{grid-area:text;font-size:13px;line-height:1.18;align-self:center}.tutorialChoices{grid-area:choices;gap:5px;align-self:end}.tutorialChoices button{min-height:44px;padding:0 11px}.tutorialNav{grid-area:nav;align-self:end}.tutorialNav button{min-width:76px;min-height:44px}.miniGrid{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px)}.miniGrid span{font-size:17px}.dotArray{grid-template-columns:repeat(4,13px);gap:5px;padding:4px}.dotArray i{width:13px;height:13px}
}
/* Keep child-facing coach and sheet copy readable even in short landscape. */
.controlPanel.hinting .coachText span{font-size:13px}
@media(orientation:landscape) and (max-height:520px){
  .coachText strong{font-size:13px}.coachText span{font-size:13px;line-height:1.12}
  .sheetBody{font-size:13px}
}

/* Keep large cell numbers clear of the leaf target in a nest starter cell. */
.cell.cageFirst .value{position:relative;top:clamp(4px,calc(17px - var(--cell-size,60px)*.1),11px)}
@media(max-width:760px) and (orientation:portrait){.playLayout{gap:8px}}
@media(max-width:760px) and (orientation:portrait){
  body.bannerOpen #gameScreen .boardWrap{width:min(calc(100vw - var(--safe-l) - var(--safe-r) - 8px),calc(100dvh - 298px),430px)}
  body.bannerOpen #gameScreen .modeRow .toolBtn{height:44px;min-height:44px}
}

/* Fix round 2: real site controls, stable feedback, branch paths, compact tags. */
/* Transient banner lives inside the header band, never changes layout geometry. */
.banner{top:6px;left:64px;right:64px;max-width:620px;min-height:40px;max-height:44px;padding:5px 10px;transform:translateY(-3px);overflow:hidden;line-height:1.18}
body.bannerOpen .gameTop .gameIdentity,body.bannerOpen .gameTop .topStats,body.bannerOpen .screenHeader h2{visibility:hidden}
body.bannerOpen #gameScreen{grid-template-rows:56px minmax(0,1fr)}
body.bannerOpen #mapScreen{grid-template-rows:56px minmax(0,1fr)}
body.bannerOpen #tutorialScreen{grid-template-rows:56px minmax(0,1fr)}
body.bannerOpen #gameScreen .playLayout,body.bannerOpen #mapScreen .mapLayout,body.bannerOpen #tutorialScreen .tutorialLayout{grid-row:auto}

/* Coach height is invariant, so hints and notes cannot move or resize the board. */
.whizCoach{height:76px;min-height:76px;max-height:76px;overflow:hidden}
.coachText{max-height:68px;overflow:auto;overscroll-behavior:contain;padding-right:2px}
.controlPanel.hinting .whizCoach{height:76px;min-height:76px;max-height:76px}

/* Whole leaf tag is the deliberate Combo Book tap target; the cell centre remains plain selection. */
.cageLabel{left:2px;top:1px;width:max-content;min-width:0;max-width:calc(100% - 4px);height:16px;min-height:16px;padding:0 2px;font-size:clamp(12px,calc(var(--cell-size,60px)*.16),15px);line-height:13px;letter-spacing:-.35px;pointer-events:auto;cursor:pointer;border-radius:8px 8px 8px 2px}
.cell.cageFirst .value{top:clamp(5px,calc(18px - var(--cell-size,60px)*.1),11px)}

/* Tree map: worlds are scenes, not cards; 20 nodes ride a single drawn zig-zag branch. */
.treeWorld{min-height:336px;margin:0 auto 16px;padding:8px 10px 12px;background:transparent;border:0;box-shadow:none}
.treeWorld:before,.treeWorld:after,.treeBranch:before{display:none}
.treeWorldHead{min-height:62px;padding:0 4px 2px}
.treeBranch{position:relative;display:block;width:100%;max-width:620px;height:252px;margin:0 auto;padding:0}
.branchPath{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.branchStroke{fill:none;stroke:#70472f;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 5px 3px rgba(0,0,0,.22))}
.nestNode{position:absolute;left:var(--x);top:var(--y);width:46px;height:46px;min-width:46px;min-height:46px;transform:translate(-50%,-50%);z-index:2}
.mapWhiz{width:40px;height:40px;left:50%;bottom:36px}

/* Keep the real Owl Whiz site controls' x=0..60, y=56..168 rectangle clear. */
@media(max-width:1120px){
  .mapLayout{padding-top:112px}
  #tutorialScreen .tutorialLayout{padding-left:max(64px,var(--safe-l))}
  .sheetHead{padding-left:66px}
  .sheetBody{padding-left:66px}
}
@media(min-width:761px) and (max-width:1399px){
  #gameScreen .playLayout{padding-left:max(64px,var(--safe-l))}
}

@media(max-width:760px) and (orientation:portrait){
  #gameScreen .playLayout{padding-left:var(--safe-l);padding-right:var(--safe-r);gap:3px}
  .boardStage{padding-left:54px;padding-right:4px}
  .boardWrap{width:min(calc(100vw - 78px),calc(100dvh - 318px),430px)}
  .whizCoach,.controlPanel.hinting .whizCoach{display:grid;height:76px;min-height:76px;max-height:76px;grid-template-columns:48px minmax(0,1fr);padding:3px 7px;gap:5px}
  .coachWhiz{width:46px;height:46px}.coachText strong{font-size:13px}.coachText span{font-size:12px;line-height:1.15}.coachText{max-height:68px}
  .treeWorld{min-height:332px;padding-left:6px;padding-right:6px}.treeBranch{height:252px}.mapWhiz{width:38px;height:38px;bottom:34px}
}
@media(max-width:420px) and (orientation:portrait){
  .bandGrid{grid-template-columns:1fr}
  .bandCard{min-height:82px}
}

@media(orientation:landscape) and (max-height:520px){
  .banner{top:3px;left:64px;right:64px;min-height:40px;max-height:42px;padding:4px 8px}
  body.bannerOpen #gameScreen,body.bannerOpen #mapScreen,body.bannerOpen #tutorialScreen{grid-template-rows:48px minmax(0,1fr)}
  .mapLayout{padding-top:120px;padding-left:var(--safe-l);padding-right:var(--safe-r)}
  #tutorialScreen .tutorialLayout{padding-left:64px;padding-right:var(--safe-r)}
  #gameScreen .playLayout{grid-template-columns:minmax(252px,46%) minmax(0,1fr);gap:4px;padding:3px var(--safe-r) 4px 64px}
  .boardStage{padding:0 2px 8px}.boardWrap{width:min(100%,calc(100dvh - 56px),374px)}
  .whizCoach,.controlPanel.hinting .whizCoach{height:54px;min-height:54px;max-height:54px;grid-template-columns:40px minmax(0,1fr);padding:2px 4px;gap:4px}
  .coachWhiz{width:38px;height:38px}.coachText{max-height:49px}.coachText strong{font-size:12px}.coachText span,.controlPanel.hinting .coachText span{font-size:12px;line-height:1.08}
  .selectedNotes{display:none}
  .numberPad.pad6{grid-template-columns:repeat(3,minmax(44px,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:3px}
  .treeWorld{min-height:324px;margin-bottom:8px}.treeWorldHead{min-height:54px}.treeBranch{height:252px}.treeChick{width:42px;height:34px}
}
@media(min-width:1000px) and (min-height:650px){
  .whizCoach,.controlPanel.hinting .whizCoach{height:116px;min-height:116px;max-height:116px}
  .coachText{max-height:104px}
}
@media(max-width:760px) and (orientation:portrait){
  .controlPanel.hinting .selectedNotes{display:block}
}
@media(max-width:760px) and (orientation:portrait){
  body.bannerOpen #gameScreen .boardWrap{width:min(calc(100vw - 78px),calc(100dvh - 318px),430px)}
}
@media(orientation:landscape) and (max-height:520px){
  body.bannerOpen #gameScreen .boardWrap{width:min(100%,calc(100dvh - 56px),374px)}
}
/* r2 final: keep compact leaf tags wholly above the cell's central digit hit area. */
.cageLabel{top:-1px;height:14px;min-height:14px;line-height:12px;padding:0 2px;font-size:clamp(12px,calc(var(--cell-size,60px)*.145),14px)}
.cageLabel{top:-5px}
.cageLabel{pointer-events:none}
@media(max-width:760px) and (orientation:portrait){
  #gameScreen .modeRow .toolBtn,#gameScreen .utilityRow .toolBtn{height:44px;min-height:44px;max-height:44px}
}
@media(min-width:1000px) and (max-width:1199px) and (min-height:650px){
  #gameScreen .playLayout{grid-template-columns:minmax(0,1fr) minmax(330px,360px);gap:14px;max-width:100%;padding-left:max(64px,var(--safe-l));padding-right:var(--safe-r)}
  #gameScreen .boardWrap{width:min(100%,calc(100dvh - 112px),560px)}
  #gameScreen .controlPanel{padding:12px;gap:8px}
  #gameScreen .numberPad{gap:6px}
  #gameScreen .numKey{min-height:58px}
  #gameScreen .modeRow,#gameScreen .utilityRow{gap:6px}
  #gameScreen .toolBtn{min-height:56px}
}

/* Fix round 3: separated branch nodes, non-covering feedback slots, fitted tags, and nest-only cell lines. */
.bannerSlot{position:relative;min-width:0;pointer-events:none}
.titleBannerSlot{height:34px;min-height:34px;margin:0 0 6px}
.mapLayout{grid-template-columns:minmax(0,980px);grid-template-rows:34px minmax(0,1fr);align-content:stretch}
.mapBannerSlot{grid-row:1;height:34px;min-height:34px}
.worldTree{grid-row:2}
.whizCoach{position:relative}
.gameBannerSlot{position:absolute;inset:3px;z-index:7;min-height:0}
.whizCoach.noticeActive .coachWhiz,.whizCoach.noticeActive .coachText{visibility:hidden}
.tutorialStatus{position:relative;min-height:34px;height:34px;display:flex;align-items:center}
.tutorialStatus .stepPips{width:100%}
.tutorialBannerSlot{position:absolute;inset:0;z-index:3}
.tutorialStatus.noticeActive .stepPips{visibility:hidden}
.banner{position:absolute;inset:0;top:0;left:0;right:0;width:100%;height:100%;max-width:none;min-height:0;max-height:none;margin:0;padding:4px 9px;border-radius:999px;background:rgba(255,254,250,.72);font-size:13px;line-height:1.14;display:flex;align-items:center;justify-content:center;overflow:hidden;transform:translateY(-3px)}
.banner.show{transform:none}
body.bannerOpen .gameTop .gameIdentity,body.bannerOpen .gameTop .topStats,body.bannerOpen .screenHeader h2{visibility:visible}
body.bannerOpen #gameScreen{grid-template-rows:56px minmax(0,1fr)}
body.bannerOpen #mapScreen{grid-template-rows:56px minmax(0,1fr)}
body.bannerOpen #tutorialScreen{grid-template-rows:56px minmax(0,1fr)}
body.bannerOpen #gameScreen .playLayout,body.bannerOpen #mapScreen .mapLayout,body.bannerOpen #tutorialScreen .tutorialLayout{grid-row:auto}

/* Twenty 46 px nest nodes follow a tall zig-zag branch; the map panel alone scrolls. */
.treeWorld{min-height:712px;margin-bottom:20px;padding:8px 10px 14px}
.treeWorldHead{min-height:70px;padding-bottom:6px}
.treeBranch{height:620px;max-width:620px}
.nestNode{width:46px;height:46px;min-width:46px;min-height:46px}
.mapWhiz{position:absolute;top:50%;bottom:auto;left:calc(100% + 5px);width:38px;height:38px;transform:translateY(-50%);z-index:5;pointer-events:none}
.mapWhiz.leftSide{left:auto;right:calc(100% + 5px)}

/* Compact target tags stay inside their leaf box and above the digit. */
.cageLabel{top:-4px;left:2px;width:max-content;max-width:calc(100% - 2px);height:18px;min-height:18px;padding:1px 2px 0;font-size:clamp(12px,calc(var(--cell-size,60px)*.13),14px);line-height:14px;letter-spacing:-.45px;overflow:hidden;white-space:nowrap}
.cageLabel.completedTag:after{font-size:10px;line-height:10px;margin-left:1px}
.cell.cageFirst .value{top:clamp(5px,calc(19px - var(--cell-size,60px)*.1),12px)}

/* Thin lilac separators exist only between cells that belong to the same nest. */
.cell{border:0}
.cell.innerLineR{border-right:1px solid rgba(59,47,148,.26)}
.cell.innerLineB{border-bottom:1px solid rgba(59,47,148,.26)}
.cell.cageBorderT{border-top:4px solid #6f4b30}
.cell.cageBorderR{border-right:4px solid #6f4b30}
.cell.cageBorderB{border-bottom:4px solid #6f4b30}
.cell.cageBorderL{border-left:4px solid #6f4b30}

@media(max-width:760px) and (orientation:portrait){
  .treeWorld{min-height:712px}.treeBranch{height:620px}
  .titleBannerSlot{height:32px;min-height:32px;margin-bottom:4px}
}
@media(orientation:landscape) and (max-height:520px){
  .banner{font-size:13px;padding:3px 7px}
  body.bannerOpen #gameScreen{grid-template-rows:48px minmax(0,1fr)}
  body.bannerOpen #mapScreen{grid-template-rows:48px minmax(0,1fr)}
  body.bannerOpen #tutorialScreen{grid-template-rows:48px minmax(0,1fr)}
  .mapLayout{grid-template-rows:30px minmax(0,1fr)}
  .mapBannerSlot{height:30px;min-height:30px}
  .treeWorld{min-height:704px}.treeBranch{height:620px}
  .tutorialStatus{grid-area:pips;height:30px;min-height:30px}
}
/* r3 tag box final fit: line box stays wholly inside the leaf, including the completion tick. */
.cageLabel{height:20px;min-height:20px;line-height:14px;padding-top:2px;padding-bottom:1px}
.cageLabel{height:21px;min-height:21px}
@media(max-width:340px) and (orientation:portrait){
  .titlePanel{padding-top:7px}
}
/* Keep the entire deliberate tag hit box above a 6x6 cell centre, even on 320px phones. */
.cageLabel{top:-6px;height:18px;min-height:18px;padding:1px 2px 0;font-size:12px;line-height:12px;letter-spacing:-.35px}
.cageLabel{padding-top:0;padding-bottom:0}
@media(orientation:landscape) and (max-height:520px){
  /* Use the allowed 60px left gutter instead of sacrificing 120px of map height. */
  .mapLayout{padding-top:4px;padding-left:64px;padding-right:var(--safe-r);grid-template-rows:30px minmax(0,1fr)}
}