:root{
  --primary:#6551d9;--deep:#3b2f94;--bg:#29235f;--white:#ffffff;--paper:#fffefa;--cream:#fff7df;--cream2:#fff3cf;
  --safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:Inter,ui-rounded,"Trebuchet MS",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--bg);-webkit-text-size-adjust:100%;touch-action:manipulation}
body{user-select:none;-webkit-user-select:none;overscroll-behavior:none}
button{font:inherit;color:inherit}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--deep)}
button{min-width:44px;min-height:44px;border:0;border-radius:14px;font-weight:800;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.45;cursor:default}
p{line-height:1.35}
#bgCanvas,#fxCanvas{position:fixed;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#bgCanvas{z-index:0}#fxCanvas{z-index:50}
#app{position:fixed;inset:0;z-index:1;overflow:hidden}
.screen{position:absolute;inset:0;display:none;min-width:0;min-height:0;padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 10px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 10px)}
.screen.active{display:flex}
.panel-card{background:rgba(255,254,250,.97);border:2px solid rgba(255,255,255,.95);box-shadow:0 18px 48px rgba(41,35,95,.28),inset 0 1px 0 #fff;border-radius:28px}
.eyebrow,.minor{font-size:11px;line-height:1.15;letter-spacing:.09em;text-transform:uppercase;font-weight:900;color:var(--deep)}
.primary{background:var(--primary);color:#fff;box-shadow:0 5px 0 var(--deep)}
.primary:active{transform:translateY(2px);box-shadow:0 3px 0 var(--deep)}
.secondary{background:var(--cream);color:var(--deep);border:2px solid rgba(59,47,148,.24);box-shadow:0 3px 0 rgba(59,47,148,.2)}
.big-btn{min-height:48px;padding:10px 16px;font-size:15px}
.icon-btn{width:44px;height:44px;border-radius:14px;background:var(--cream);color:var(--deep);border:2px solid rgba(59,47,148,.22);display:grid;place-items:center;font-size:19px;line-height:1;flex:0 0 44px}
.text-btn{padding:8px 14px;background:var(--cream);color:var(--deep);border:2px solid rgba(59,47,148,.22)}
.icon-text-btn{padding:8px 13px;background:var(--cream);color:var(--deep);border:2px solid rgba(59,47,148,.22);display:flex;gap:7px;align-items:center;justify-content:center}
.tool-btn{min-width:58px;padding:7px 10px;background:var(--cream);color:var(--deep);border:2px solid rgba(59,47,148,.2)}
.tool-btn.selected,.tool-btn[aria-pressed="true"]{background:var(--deep);color:#fff;border-color:var(--deep)}
.toggle-btn{width:64px;padding:5px 8px;background:var(--cream);border:2px solid rgba(59,47,148,.22);color:var(--deep)}
.toggle-btn[aria-pressed="true"]{background:var(--deep);color:#fff}
.sr-only{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}
.back-safe{width:56px;height:48px;flex:0 0 56px}
.safe-top-row{height:54px;min-height:54px;display:flex;align-items:center;gap:8px;width:100%;padding-right:2px}
.screen-title{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}.screen-title strong{font-size:18px;color:#fff;white-space:normal}
.screen-title .minor{color:var(--cream2)}

/* Whiz: code-drawn DOM mascot */
.whiz-slot{position:relative;display:block;flex:0 0 auto;filter:drop-shadow(0 8px 10px rgba(41,35,95,.18));transform-origin:50% 80%}
.whiz-slot.whiz-xl{width:176px;height:176px}.whiz-slot.whiz-large{width:150px;height:150px}.whiz-slot.whiz-medium{width:116px;height:116px}.whiz-slot.whiz-small{width:54px;height:54px}
.whiz-owl{position:absolute;left:12%;top:9%;width:76%;height:82%;background:linear-gradient(145deg,var(--primary),var(--deep));border:4px solid var(--deep);border-radius:48% 48% 44% 44%;box-shadow:inset 0 5px 0 rgba(255,255,255,.18),inset 0 -7px 0 rgba(41,35,95,.18)}
.whiz-owl:before,.whiz-owl:after{content:"";position:absolute;top:-10%;width:30%;height:25%;background:var(--primary);border:4px solid var(--deep);z-index:-1}
.whiz-owl:before{left:4%;transform:rotate(-26deg);border-radius:90% 10% 40% 10%}.whiz-owl:after{right:4%;transform:rotate(26deg);border-radius:10% 90% 10% 40%}
.whiz-face{position:absolute;left:13%;top:15%;width:74%;height:45%}
.whiz-disc{position:absolute;top:0;width:56%;height:84%;background:var(--cream2);border:3px solid var(--deep);border-radius:50%}.whiz-disc.left{left:0;transform:rotate(13deg)}.whiz-disc.right{right:0;transform:rotate(-13deg)}
.whiz-eye{position:absolute;top:22%;width:27%;aspect-ratio:1;border-radius:50%;background:#fff;border:3px solid var(--deep);z-index:3}.whiz-eye.left{left:18%}.whiz-eye.right{right:18%}
.whiz-eye:after{content:"";position:absolute;width:44%;height:44%;background:var(--bg);border-radius:50%;left:30%;top:30%;box-shadow:-2px -2px 0 0 #fff inset}
.whiz-beak{position:absolute;z-index:4;left:42%;top:57%;width:16%;height:18%;background:#ffc93c;clip-path:polygon(50% 100%,0 0,100% 0);filter:drop-shadow(0 2px 0 var(--deep))}
.whiz-belly{position:absolute;left:27%;bottom:8%;width:46%;height:42%;border-radius:50%;background:var(--cream2);border:3px solid var(--deep);box-shadow:inset 0 3px 0 #fff}
.whiz-wing{position:absolute;top:52%;width:27%;height:33%;background:var(--primary);border:3px solid var(--deep);border-radius:55% 45% 60% 40%}.whiz-wing.left{left:-11%;transform:rotate(19deg)}.whiz-wing.right{right:-11%;transform:scaleX(-1) rotate(19deg)}
.whiz-feather{position:absolute;width:8%;height:10%;border-radius:60%;background:rgba(255,255,255,.25);bottom:18%}.whiz-feather.f1{left:38%;transform:rotate(-18deg)}.whiz-feather.f2{left:48%}.whiz-feather.f3{left:58%;transform:rotate(18deg)}
.whiz-outfit{position:absolute;z-index:8;inset:0;pointer-events:none}.whiz-outfit:before,.whiz-outfit:after{content:"";position:absolute}
.whiz-outfit.outfit-space:before{left:17%;top:3%;width:66%;height:58%;border:4px solid var(--deep);border-radius:50%;background:rgba(255,255,255,.16)}
.whiz-outfit.outfit-ocean:before{left:25%;top:31%;width:24%;height:18%;border:4px solid var(--deep);border-radius:45%;background:rgba(255,255,255,.56);box-shadow:35px 0 0 -4px rgba(255,255,255,.56),35px 0 0 0 var(--deep)}
.whiz-outfit.outfit-night:before{left:12%;top:62%;width:76%;height:22%;border-radius:50% 50% 18% 18%;background:var(--deep)}
.whiz-outfit.outfit-earth:before{left:36%;top:-1%;width:28%;height:18%;border-radius:80% 0 80% 0;background:var(--cream2);border:3px solid var(--deep);transform:rotate(-18deg)}
.whiz-outfit.outfit-bugs:before{left:31%;top:-3%;width:38%;height:18%;border-radius:50%;background:var(--cream2);border:3px solid var(--deep)}
.whiz-outfit.outfit-dino:before{left:20%;top:2%;width:60%;height:18%;background:var(--cream2);border:3px solid var(--deep);border-radius:50% 50% 16% 16%}
.whiz-outfit.outfit-tools:before{left:21%;top:26%;width:58%;height:16%;border:4px solid var(--deep);border-radius:10px;background:rgba(255,255,255,.55)}
.whiz-outfit.outfit-owls:before{left:28%;top:-4%;width:44%;height:24%;background:var(--cream2);clip-path:polygon(0 100%,10% 20%,35% 66%,50% 0,65% 66%,90% 20%,100% 100%);filter:drop-shadow(0 3px 0 var(--deep))}
.whiz-slot.react-happy{animation:whizPop .55s ease}.whiz-slot.react-thinking{animation:whizTilt .7s ease}.whiz-slot.react-surprised{animation:whizHop .5s ease}.whiz-slot.react-celebrate{animation:whizCelebrate .9s ease}
@keyframes whizPop{50%{transform:scale(1.08)}}@keyframes whizTilt{50%{transform:rotate(-6deg)}}@keyframes whizHop{45%{transform:translateY(-7px)}}@keyframes whizCelebrate{30%{transform:rotate(-7deg) translateY(-6px)}60%{transform:rotate(7deg) translateY(-4px)}}

/* first-run age */
#ageScreen{align-items:center;justify-content:center}
.age-card{width:min(880px,calc(100% - 4px));max-height:100%;overflow:auto;padding:18px;display:grid;grid-template-columns:160px 1fr;gap:12px 18px;align-items:center}
.age-card .age-options{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.age-copy h1{margin:3px 0 6px;font-size:clamp(26px,5vw,44px);color:var(--deep)}.age-copy p{margin:0;font-size:14px}
.age-choice{min-height:112px;text-align:left;padding:12px;background:var(--cream);border:2px solid rgba(59,47,148,.22);display:flex;flex-direction:column;justify-content:center;gap:5px}
.age-choice strong{font-size:18px;color:var(--deep)}.age-choice span{font-size:14px;font-weight:800}.age-choice small{font-size:12px;line-height:1.25}

/* title */
#titleScreen{padding-left:max(calc(var(--safe-l) + 10px),10px);padding-right:max(calc(var(--safe-r) + 10px),10px)}
.title-scroll{width:100%;height:100%;overflow:auto;display:grid;place-items:center;padding:2px 0;scrollbar-width:none}.title-scroll::-webkit-scrollbar{display:none}
.hero-card{width:min(1000px,100%);min-height:min(610px,100%);padding:clamp(14px,2.2vw,26px);display:grid;grid-template-columns:minmax(170px,31%) 1fr minmax(210px,28%);gap:clamp(12px,2vw,28px);align-items:center;position:relative;overflow:hidden}
.hero-card:before{content:"";position:absolute;inset:-30% auto auto -7%;width:36%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(101,81,217,.16),rgba(101,81,217,0) 70%);pointer-events:none}
.hero-art{display:grid;place-items:center;gap:8px}.outfit-label{font-size:11px;font-weight:900;color:var(--deep);text-align:center;min-height:14px}
.hero-copy h1{font-size:clamp(40px,7vw,72px);line-height:.95;margin:4px 0 12px;color:var(--deep);letter-spacing:-.04em}.teach-line{font-size:clamp(15px,2vw,19px);font-weight:750;margin:0 0 10px;max-width:620px}.device-controls{font-size:12px;margin:0;color:var(--deep)}
.status-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.status-pills span{font-size:11px;font-weight:900;background:var(--cream);color:var(--deep);padding:5px 8px;border-radius:999px;border:1px solid rgba(59,47,148,.18)}
.title-actions{display:grid;grid-template-columns:1fr;gap:8px;min-width:0}.title-actions button{width:100%}

/* tutorial */
#tutorialScreen{flex-direction:column}
.tutorial-wrap{flex:1;min-height:0;display:grid;place-items:center}
.tutorial-card{width:min(840px,100%);height:min(520px,100%);padding:12px;display:grid;grid-template-columns:minmax(165px,1fr) auto;grid-template-rows:1fr auto auto;gap:10px 14px;align-items:center;overflow:hidden}
.tutorial-side{display:flex;align-items:center;gap:10px;min-width:0}.tutorial-copy{min-width:0}.tutorial-copy p{margin:5px 0;font-size:14px}.tutorial-why{min-height:36px;color:var(--deep);font-weight:800}
.tutorial-board-wrap{position:relative;display:grid;grid-template-columns:44px 220px;grid-template-rows:44px 220px;width:264px;height:264px;flex:0 0 auto}
.tutorial-col-clues{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(5,44px);align-items:end}.tutorial-row-clues{grid-column:1;grid-row:2;display:grid;grid-template-rows:repeat(5,44px);align-items:center;justify-items:end}
.tutorial-col-clues span,.tutorial-row-clues span{display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:var(--deep);padding:2px;text-align:center}
.tutorial-col-clues span{height:44px;align-items:flex-end}.tutorial-row-clues span{width:44px;justify-content:flex-end}
.tutorial-grid{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(5,44px);grid-template-rows:repeat(5,44px);background:var(--paper);border:3px solid var(--deep);border-radius:8px;overflow:hidden}
.tutorial-cell{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:0;border-right:1px solid rgba(59,47,148,.25);border-bottom:1px solid rgba(59,47,148,.25);background:var(--paper);font-size:20px;color:var(--deep);padding:0}.tutorial-cell.fill{background:var(--bg);color:#fff;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 2px,transparent 2px 6px)}.tutorial-cell.mark{background:var(--cream);font-weight:900}.tutorial-cell.glow{box-shadow:inset 0 0 0 4px var(--primary)}
.tutorial-tools{grid-column:1;display:flex;gap:8px;justify-content:flex-start}.tutorial-card>#tutorialNext{grid-column:2;width:100%}

/* collections */
#collectionsScreen{flex-direction:column}
.collection-tabs{display:flex;gap:7px;overflow-x:auto;padding:4px 2px 8px;min-height:52px;scrollbar-width:none}.collection-tabs::-webkit-scrollbar{display:none}.collection-tabs button{flex:0 0 auto;padding:7px 12px;background:rgba(255,254,250,.9);color:var(--deep);border:2px solid rgba(255,255,255,.9)}.collection-tabs button[aria-selected="true"]{background:var(--deep);color:#fff}
.collection-body{flex:1;min-height:0;overflow:auto;background:rgba(255,254,250,.97);border-radius:20px;padding:10px;box-shadow:0 10px 30px rgba(41,35,95,.22);scrollbar-width:thin}
.collection-summary{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-bottom:10px;padding:6px 4px}.collection-summary h2{font-size:20px;margin:0;color:var(--deep)}.collection-summary p{font-size:12px;margin:3px 0}.collection-progress{font-size:12px;font-weight:900;color:var(--deep)}
.level-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;padding-bottom:8px}
.level-node{min-height:84px;text-align:left;padding:10px;background:var(--cream);border:2px solid rgba(59,47,148,.18);display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px;align-items:center}.level-node.poster-node{background:var(--cream2);border-color:var(--deep)}.level-node.locked{opacity:.7}.level-node canvas{width:44px;height:44px;border-radius:8px;background:#fff;border:1px solid rgba(59,47,148,.2)}.level-node strong{font-size:13px;display:block;white-space:normal}.level-node small{font-size:11px;display:block;margin-top:3px}.level-node .stars{letter-spacing:.08em;color:var(--deep)}

/* game */
#gameScreen{padding:0;flex-direction:column;background:transparent}
.game-topbar{min-height:62px;height:62px;padding:calc(var(--safe-t) + 4px) calc(var(--safe-r) + 8px) 4px calc(var(--safe-l) + 2px);display:flex;align-items:center;gap:7px;color:#fff;background:linear-gradient(180deg,rgba(41,35,95,.98),rgba(41,35,95,.88));box-shadow:0 3px 12px rgba(41,35,95,.25);z-index:5}
.game-topbar .back-safe{height:48px}.game-meta{min-width:0;flex:1;display:flex;flex-direction:column}.game-meta .minor{color:var(--cream2);font-size:11px}.game-meta strong{font-size:15px;white-space:normal;line-height:1.05;max-height:34px;overflow:hidden}.top-controls{display:flex;gap:5px}.top-controls .icon-btn{background:rgba(255,254,250,.96)}
.heart-wrap{display:flex;gap:1px;min-width:0;white-space:nowrap}.heart-wrap span{font-size:17px;color:var(--cream2);text-shadow:0 2px 0 var(--deep)}.heart-wrap span.lost{opacity:.28}.timer-wrap{display:flex;gap:4px;align-items:center;font-size:12px;font-weight:900;white-space:nowrap;color:#fff;min-width:0}.timer-wrap.hidden,.heart-wrap.hidden{display:none}
.line-helper{min-height:0;max-height:42px;padding:0 10px;background:rgba(255,254,250,.92);color:var(--deep);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;transition:max-height .18s ease,padding .18s ease;z-index:4}.line-helper:empty{max-height:0;padding-top:0;padding-bottom:0}
.game-main{flex:1;min-height:0;display:flex;padding:6px 8px 5px;position:relative}
.board-stage{position:relative;flex:1;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;border-radius:20px;touch-action:none}
#boardCanvas{display:block;max-width:100%;max-height:100%;border-radius:18px;touch-action:none;outline:none;-webkit-touch-callout:none;user-select:none}
.drag-counter{position:absolute;min-width:38px;min-height:38px;border-radius:999px;background:rgba(255,254,250,.9);border:2px solid var(--deep);color:var(--deep);font-weight:900;display:none;place-items:center;pointer-events:none;z-index:4}.drag-counter.show{display:grid}
.sr-grid{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.game-toolbar{min-height:64px;padding:5px calc(var(--safe-r) + 8px) calc(var(--safe-b) + 5px) calc(var(--safe-l) + 8px);display:flex;gap:7px;align-items:center;justify-content:center;background:rgba(255,254,250,.97);box-shadow:0 -4px 14px rgba(41,35,95,.18);z-index:5}
.pen-group,.zoom-group{display:flex;gap:5px}.game-whiz{width:44px!important;height:44px!important;flex:0 0 44px}.zoom-group .fit-btn{width:54px;font-size:12px}.toolbar-check{min-width:70px;height:44px;padding:5px 10px}.progress-chip{min-width:52px;height:44px;display:grid;place-items:center;padding:0 8px;border-radius:14px;background:var(--deep);color:#fff;font-size:12px;font-weight:900}

/* banners/modal */
.top-banner{position:fixed;z-index:70;top:calc(var(--safe-t) + 8px);left:max(calc(var(--safe-l) + 64px),64px);right:max(calc(var(--safe-r) + 10px),10px);margin:auto;max-width:680px;min-height:44px;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.62);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.85);box-shadow:0 5px 16px rgba(41,35,95,.18);color:var(--deep);font-size:13px;font-weight:900;display:none;align-items:center;justify-content:center;text-align:center;pointer-events:none}.top-banner.show{display:flex}
.modal-root{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:calc(var(--safe-t) + 12px) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px);background:rgba(255,255,255,.45);backdrop-filter:blur(4px)}.modal-root.open{display:flex}.sheet{display:none;width:min(560px,100%);max-height:100%;overflow:auto;background:rgba(255,254,250,.985);border:2px solid #fff;border-radius:24px;box-shadow:0 24px 60px rgba(41,35,95,.30)}.sheet.open{display:block}.wide-sheet{width:min(800px,100%)}.sheet-head{position:sticky;top:0;z-index:2;min-height:58px;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;background:rgba(255,254,250,.98);border-bottom:1px solid rgba(59,47,148,.12)}.sheet-head h2{margin:0;color:var(--deep);font-size:20px;flex:1}.sheet-body{padding:12px}.compact-stack{display:grid;gap:9px}.compact-stack p{font-size:13px;margin:0 0 4px}.how-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.rule-card{background:var(--cream);padding:10px;border-radius:14px;border:1px solid rgba(59,47,148,.14)}.rule-card strong{font-size:14px;color:var(--deep)}.rule-card p{font-size:12px;margin:4px 0 0}.how-replay{grid-column:1/-1}
.settings-list{display:grid;gap:7px}.setting-row{min-height:58px;border-radius:14px;background:var(--cream);padding:8px 10px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.setting-row strong{font-size:13px;color:var(--deep)}.setting-row p{font-size:11px;margin:2px 0 0}.block-row{align-items:start}.segmented{display:flex;gap:4px}.segmented button{min-width:70px;min-height:44px;padding:6px 8px;background:#fff;border:2px solid rgba(59,47,148,.18);color:var(--deep)}.segmented button[aria-pressed="true"]{background:var(--deep);color:#fff}.segmented.three button{min-width:68px}.always-on{font-size:12px;font-weight:900;color:var(--deep)}
.daily-body{display:grid;gap:12px}.daily-stats{display:flex;flex-wrap:wrap;gap:7px}.daily-stats span,.daily-stats strong{padding:6px 9px;border-radius:999px;background:var(--cream);font-size:12px;color:var(--deep)}.daily-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.day-tick{min-height:48px;border-radius:12px;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:var(--deep);border:1px solid rgba(59,47,148,.12)}.day-tick.done:after{content:"✓";font-size:16px}.day-tick.today{box-shadow:inset 0 0 0 3px var(--primary)}
.practice-sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.practice-sizes button{background:var(--cream);color:var(--deep);border:2px solid rgba(59,47,148,.18)}.practice-build{min-height:22px;font-size:12px;color:var(--deep);font-weight:800;text-align:center}
.album-sheet{width:min(960px,100%)}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.album-sticker{min-height:116px;border-radius:14px;background:var(--cream);padding:7px;display:grid;place-items:center;text-align:center;border:1px solid rgba(59,47,148,.12)}.album-sticker canvas{width:70px;height:70px}.album-sticker strong{font-size:11px;line-height:1.15}.album-sticker.unsolved{opacity:.58}
.fact-sheet{width:min(620px,100%);padding:12px}.fact-ribbon{display:inline-block;padding:6px 10px;background:var(--deep);color:#fff;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.08em}.fact-top{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;justify-items:center}.fact-top canvas{width:min(180px,36vw);height:min(180px,36vw);image-rendering:pixelated;border-radius:18px;background:var(--cream);border:2px solid rgba(59,47,148,.15)}.fact-whiz-wrap{position:relative}.reaction-prop{position:absolute;right:-20px;top:6px;width:58px;height:58px}.fact-sheet h2{text-align:center;color:var(--deep);font-size:26px;margin:4px 0 8px}.fact-list{display:grid;gap:7px}.fact-list p{font-size:13px;margin:0;background:var(--cream);padding:9px 11px;border-radius:12px}.fact-list .whoa{background:var(--cream2);font-weight:900;color:var(--deep)}.fact-sheet>.big-btn{width:100%;margin-top:10px}
.reaction-prop.space:before{content:"";position:absolute;left:8px;top:20px;width:42px;height:14px;border-radius:8px;background:var(--deep);transform:rotate(-22deg)}.reaction-prop.space:after{content:"";position:absolute;left:36px;top:12px;width:16px;height:30px;border-radius:50%;border:4px solid var(--deep)}
.reaction-prop.ocean:before,.reaction-prop.ocean:after{content:"";position:absolute;top:18px;width:24px;height:20px;border:4px solid var(--deep);border-radius:45%;background:rgba(101,81,217,.12)}.reaction-prop.ocean:before{left:2px}.reaction-prop.ocean:after{right:2px;box-shadow:-18px 2px 0 -8px var(--deep)}
.reaction-prop.earth:before{content:"";position:absolute;left:12px;top:8px;width:34px;height:44px;background:var(--cream2);border:4px solid var(--deep);border-radius:70% 0 70% 30%;transform:rotate(-25deg)}
.reaction-prop.bugs:before{content:"";position:absolute;left:12px;top:12px;width:34px;height:34px;border-radius:50%;background:var(--cream2);border:4px solid var(--deep);box-shadow:0 -14px 0 -7px var(--primary),12px -8px 0 -7px var(--primary),-12px -8px 0 -7px var(--primary)}
.reaction-prop.dino:before{content:"";position:absolute;left:6px;top:10px;width:46px;height:34px;border:4px solid var(--deep);border-radius:55% 45% 40% 50%;background:var(--cream2)}.reaction-prop.dino:after{content:"";position:absolute;left:38px;top:28px;border-left:16px solid var(--deep);border-top:8px solid transparent;border-bottom:8px solid transparent}
.reaction-prop.tools:before{content:"";position:absolute;left:25px;top:4px;width:10px;height:48px;background:var(--deep);transform:rotate(35deg);border-radius:5px}.reaction-prop.tools:after{content:"";position:absolute;left:8px;top:4px;width:34px;height:14px;background:var(--deep);transform:rotate(35deg);border-radius:5px}
.reaction-prop.night:before{content:"";position:absolute;left:4px;top:18px;width:50px;height:26px;background:var(--deep);clip-path:polygon(0 50%,24% 0,44% 45%,50% 12%,56% 45%,76% 0,100% 50%,76% 42%,82% 100%,50% 66%,18% 100%,24% 42%)}
.reaction-prop.owls:before{content:"";position:absolute;left:9px;top:10px;width:40px;height:40px;border:4px solid var(--deep);border-radius:50%}.reaction-prop.owls:after{content:"";position:absolute;left:26px;top:44px;width:6px;height:14px;background:var(--deep)}
.complete-sheet{text-align:center;padding:16px}.complete-sheet h2{color:var(--deep);margin:2px 0 6px}.star-row{font-size:38px;letter-spacing:.12em;color:var(--deep);min-height:48px}.complete-sheet p{font-size:13px}.complete-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.nap-body{text-align:center;display:grid;gap:9px;justify-items:center}.nap-body h2{color:var(--deep);margin:0}.nap-body p{font-size:13px;margin:0;max-width:420px}

@media(max-width:760px){
  .hero-card{grid-template-columns:132px 1fr;grid-template-rows:auto auto}.hero-art{grid-row:1/3}.title-actions{grid-column:2}.whiz-slot.whiz-xl{width:132px;height:132px}.hero-copy h1{font-size:44px}.title-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.title-actions .primary{grid-column:1/-1}.title-actions .icon-text-btn{grid-column:1/-1}
  .age-card{grid-template-columns:118px 1fr}.age-card .age-options{grid-template-columns:1fr}.whiz-slot.whiz-large{width:112px;height:112px}.age-choice{min-height:76px}
  .tutorial-card{grid-template-columns:minmax(140px,1fr) auto}.tutorial-side{align-items:flex-start;flex-direction:column}.tutorial-side .whiz-slot{width:82px;height:82px}
  .complete-actions{grid-template-columns:1fr 1fr}.complete-actions #completeCollectionsBtn{grid-column:1/-1}
}
@media(max-width:520px){
  .screen{padding-left:max(calc(var(--safe-l) + 8px),8px);padding-right:max(calc(var(--safe-r) + 8px),8px)}
  .hero-card{grid-template-columns:96px 1fr;gap:8px;padding:12px}.whiz-slot.whiz-xl{width:96px;height:96px}.hero-copy h1{font-size:38px;margin-bottom:7px}.teach-line{font-size:14px}.device-controls{font-size:11px}.status-pills{margin-top:6px}.title-actions{gap:6px}.big-btn{min-height:44px;font-size:13px;padding:7px 9px}
  .age-card{grid-template-columns:86px 1fr;padding:12px}.whiz-slot.whiz-large{width:84px;height:84px}.age-copy h1{font-size:28px}.age-copy p{font-size:12px}
  .game-topbar{gap:4px}.game-meta strong{font-size:13px}.top-controls{gap:3px}.top-controls .icon-btn{width:44px}.heart-wrap span{font-size:14px}.timer-wrap{font-size:11px}
  .game-toolbar{gap:4px}.tool-btn{width:44px;min-width:44px;padding:4px}.tool-label{display:none}.zoom-group{gap:3px}.zoom-group .fit-btn{width:44px}.progress-chip{display:none}.toolbar-check{min-width:58px;padding:4px 6px;font-size:12px}
  .how-grid{grid-template-columns:1fr}.how-replay{grid-column:auto}.segmented.three{flex-wrap:wrap;justify-content:flex-end}.segmented.three button{min-width:62px;font-size:11px}
  .setting-row{grid-template-columns:minmax(0,1fr) auto}.album-grid{grid-template-columns:repeat(auto-fill,minmax(82px,1fr))}
}
@media(max-height:620px) and (orientation:landscape){
  .hero-card{min-height:100%;grid-template-columns:104px minmax(180px,1fr) minmax(240px,34%);padding:8px 12px;gap:10px}.whiz-slot.whiz-xl{width:96px;height:96px}.hero-copy h1{font-size:34px;margin:2px 0 6px}.teach-line{font-size:13px;margin-bottom:5px}.device-controls{font-size:11px}.status-pills{margin-top:5px}.title-actions{grid-column:auto;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.title-actions .primary,.title-actions .icon-text-btn{grid-column:1/-1}.title-actions .big-btn,.title-actions .icon-text-btn{min-height:44px;padding:5px 8px;font-size:12px}
  .age-card{height:100%;grid-template-columns:90px 1fr;padding:8px 12px}.whiz-slot.whiz-large{width:82px;height:82px}.age-card .age-options{grid-template-columns:repeat(3,1fr);gap:6px}.age-choice{min-height:72px;padding:6px}.age-choice strong{font-size:14px}.age-choice span{font-size:12px}.age-choice small{font-size:11px}.age-copy h1{font-size:25px;margin:2px 0}.age-copy p{font-size:11px}
  .safe-top-row{height:50px;min-height:50px}.tutorial-card{height:100%;grid-template-columns:minmax(180px,1fr) 264px;grid-template-rows:1fr auto;gap:6px 10px;padding:7px 10px}.tutorial-side{flex-direction:row}.tutorial-side .whiz-slot{width:70px;height:70px}.tutorial-copy p{font-size:12px;margin:2px 0}.tutorial-why{min-height:24px}.tutorial-tools{grid-column:1;align-self:end}.tutorial-card>#tutorialNext{grid-column:2;align-self:end}.tutorial-board-wrap{width:264px;height:264px;transform:scale(.90);transform-origin:center}
  .game-topbar{min-height:54px;height:54px;padding-top:2px;padding-bottom:2px}.line-helper{font-size:11px;max-height:34px}.game-main{padding:2px 7px 0}.game-toolbar{min-height:44px;padding-top:0;padding-bottom:0}.game-toolbar button,.game-toolbar .progress-chip{height:44px;min-height:44px}.game-whiz{width:44px;height:44px}
  .sheet{max-height:96vh}.sheet-head{min-height:50px}.sheet-body{padding:8px}.settings-list{gap:4px}.setting-row{min-height:48px;padding:5px 8px}.setting-row p{display:none}.fact-top canvas{width:104px;height:104px}.fact-sheet{padding:8px}.fact-sheet h2{font-size:20px}.fact-list{grid-template-columns:repeat(3,1fr);gap:5px}.fact-list p{font-size:11px;padding:6px}.fact-top{grid-template-columns:1fr 1fr}.fact-whiz-wrap .whiz-slot{width:88px;height:88px}.star-row{font-size:30px}
}
@media(max-width:620px) and (max-height:380px) and (orientation:landscape){
  .game-meta .minor{display:none}.timer-wrap{display:none!important}.heart-wrap{display:none!important}.line-helper{position:absolute;top:54px;left:64px;right:8px;z-index:6;border-radius:0 0 10px 10px;max-height:30px;pointer-events:none}.game-main{padding-top:2px}.tool-label{display:none}.toolbar-check{font-size:11px;color:transparent;position:relative}.toolbar-check:after{content:"✓";font-size:18px;color:var(--deep);position:absolute;inset:0;display:grid;place-items:center}.progress-chip{display:none}.zoom-group .fit-btn{width:44px;font-size:11px;color:transparent;position:relative}.zoom-group .fit-btn:after{content:"□";font-size:18px;color:var(--deep);position:absolute;inset:0;display:grid;place-items:center}
  .tutorial-board-wrap{transform:scale(.83)}.tutorial-card{grid-template-columns:minmax(170px,1fr) 224px}.tutorial-copy p{font-size:11px}
}
@media(min-width:1400px){.hero-card{max-width:1120px}.level-map{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.game-topbar{padding-left:max(var(--safe-l),10px)}.whiz-slot.whiz-xl{width:190px;height:190px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media(max-width:500px) and (orientation:portrait){
  .tutorial-wrap{align-items:stretch}
  .tutorial-card{width:100%;height:100%;grid-template-columns:1fr;grid-template-rows:auto 264px auto auto;gap:6px;padding:8px;overflow:hidden}
  .tutorial-side{grid-column:1;grid-row:1;flex-direction:row;align-items:center;min-height:72px}
  .tutorial-side .whiz-slot{width:64px;height:64px;flex:0 0 64px}
  .tutorial-copy p{font-size:12px;margin:2px 0}.tutorial-why{min-height:18px}
  .tutorial-board-wrap{grid-column:1;grid-row:2;justify-self:center;transform:none}
  .tutorial-tools{grid-column:1;grid-row:3;justify-content:center}
  .tutorial-card>#tutorialNext{grid-column:1;grid-row:4;width:100%}
}
@media(max-height:620px) and (orientation:landscape){.tutorial-board-wrap{transform:none}}
@media(max-width:620px) and (max-height:380px) and (orientation:landscape){.tutorial-board-wrap{transform:none}.tutorial-card{grid-template-columns:minmax(170px,1fr) 264px}}
@media(max-height:620px) and (orientation:landscape){
  .tutorial-card{grid-template-columns:minmax(270px,1fr) 248px;grid-template-rows:1fr 48px;height:100%;padding:5px 8px;gap:4px 8px;align-items:center}
  .tutorial-board-wrap{grid-column:2;grid-row:1/3;grid-template-columns:28px 220px;grid-template-rows:28px 220px;width:248px;height:248px;align-self:center}
  .tutorial-col-clues span{height:28px;font-size:13px}.tutorial-row-clues span{width:28px;font-size:13px}
  .tutorial-side{grid-column:1;grid-row:1;flex-direction:row;align-items:center;min-height:0}
  .tutorial-side .whiz-slot{width:64px;height:64px;flex:0 0 64px}
  .tutorial-copy p{font-size:11px;line-height:1.22;margin:2px 0}.tutorial-why{min-height:20px}
  .tutorial-tools{grid-column:1;grid-row:2;justify-content:flex-start;align-self:end}
  .tutorial-card>#tutorialNext{grid-column:1;grid-row:2;justify-self:end;align-self:end;width:104px;min-height:44px}
}
@media(max-width:620px) and (max-height:380px) and (orientation:landscape){
  .tutorial-card{grid-template-columns:minmax(270px,1fr) 248px;grid-template-rows:1fr 48px}
}
@media(max-height:620px) and (orientation:landscape){.tutorial-tools{width:max-content;justify-self:start}}

@media(max-width:340px) and (orientation:portrait){
  .game-toolbar{display:grid;grid-template-columns:max-content 44px minmax(58px,1fr);grid-template-rows:44px 44px;min-height:98px;padding:3px max(calc(var(--safe-r) + 8px),8px) calc(var(--safe-b) + 3px) max(calc(var(--safe-l) + 8px),8px);gap:4px 8px}
  .pen-group{grid-column:1;grid-row:1}.game-whiz{grid-column:2;grid-row:1}.toolbar-check{grid-column:3;grid-row:1;justify-self:end}.zoom-group{grid-column:1/4;grid-row:2;justify-self:center}
}

/* r2 protected Owl Whiz player zone: site buttons occupy x 8-52, y 64-160. */
.screen:not(#gameScreen){padding-left:max(calc(var(--safe-l) + 64px),64px)!important}
#gameScreen{left:max(calc(var(--safe-l) + 64px),64px)!important;right:0!important;width:auto!important;padding:0!important}
.safe-top-row .back-safe,.game-topbar .back-safe{display:none!important}
.modal-root{padding-left:max(calc(var(--safe-l) + 64px),64px)!important}

/* Feedback has a permanent row, so it never floats over controls or moves the board. */
.feedback-row{height:48px;min-height:48px;padding:3px 8px;display:flex;align-items:center;justify-content:center;background:transparent;z-index:4}
.top-banner{position:static!important;inset:auto!important;width:min(680px,100%);max-width:680px;min-height:42px;height:42px;margin:0!important;padding:6px 12px;border-radius:13px;background:rgba(255,255,255,.62);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.88);box-shadow:0 4px 13px rgba(41,35,95,.16);color:var(--deep);font-size:13px;font-weight:900;display:flex!important;align-items:center;justify-content:center;text-align:center;pointer-events:none;visibility:hidden;opacity:0;overflow:hidden;transition:opacity .12s ease}
.top-banner.show{visibility:visible;opacity:1}
.line-helper{font-size:13px;min-height:0;max-height:48px;flex:0 0 auto}

/* Current puzzle side vignette uses wide-screen space instead of leaving empty purple. */
.play-side{display:none;width:216px;min-width:216px;align-self:stretch;border-radius:22px;background:rgba(255,254,250,.94);border:2px solid rgba(255,255,255,.92);box-shadow:0 14px 34px rgba(41,35,95,.20);padding:10px;align-items:center;align-content:center;justify-items:center;gap:8px;color:var(--deep)}
.whiz-slot.whiz-side{width:132px;height:132px}
.side-copy{display:grid;gap:3px;text-align:center}.side-copy strong{font-size:17px;line-height:1.15}.side-copy>span:last-child{font-size:12px;font-weight:800}
.play-side canvas{width:144px;height:144px;border-radius:18px;background:var(--cream);border:2px solid rgba(59,47,148,.15)}
@media(min-width:768px){.game-main{gap:8px}.play-side{display:grid}}
@media(min-width:1280px){.play-side{width:244px;min-width:244px;padding:14px}.whiz-slot.whiz-side{width:150px;height:150px}.play-side canvas{width:162px;height:162px}.side-copy strong{font-size:19px}}

/* Unlock celebration. */
.unlock-body{display:grid;gap:9px;justify-items:center;text-align:center;padding:16px}.unlock-body h2{margin:0;color:var(--deep);font-size:25px}.unlock-body p{margin:0;font-size:13px}.unlock-outfit-text{font-weight:900;color:var(--deep)}
.unlock-preview{display:grid;grid-template-columns:180px 120px;gap:10px;align-items:center}.unlock-preview canvas{width:180px;height:180px;border-radius:18px;background:var(--cream);border:2px solid rgba(59,47,148,.16)}
.unlock-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(420px,100%)}

/* Make unlocked Whiz outfits bold enough to read during play. */
.whiz-outfit.outfit-ocean:before{background:rgba(255,255,255,.80);box-shadow:35px 0 0 -4px rgba(255,255,255,.80),35px 0 0 0 var(--deep)}
.whiz-outfit.outfit-night:before{top:58%;height:30%;box-shadow:inset 0 4px 0 rgba(255,255,255,.18)}
.whiz-outfit.outfit-space:before{left:12%;top:-1%;width:76%;height:67%;background:rgba(255,255,255,.24)}
.whiz-outfit.outfit-earth:before{width:34%;height:23%;left:33%;top:-7%}
.whiz-outfit.outfit-bugs:before{left:22%;top:-10%;width:56%;height:28%}
.whiz-outfit.outfit-dino:before{left:12%;top:-2%;width:76%;height:24%}
.whiz-outfit.outfit-tools:before{left:13%;top:22%;width:74%;height:23%;background:rgba(255,255,255,.78)}
.whiz-outfit.outfit-owls:before{left:20%;top:-10%;width:60%;height:30%}

/* Narrow portrait: controls use two rows rather than colliding after the real 64px gutter. */
@media(max-width:520px) and (orientation:portrait){
  .game-topbar{height:98px;min-height:98px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:42px 44px;padding:4px 6px;gap:4px}
  .game-meta{grid-column:1;grid-row:1}.heart-wrap{grid-column:2;grid-row:1}.timer-wrap{grid-column:3;grid-row:1}.top-controls{grid-column:1/-1;grid-row:2;justify-content:flex-end}
  .feedback-row{height:48px;min-height:48px;padding-left:4px;padding-right:4px}
  .line-helper{max-height:52px;padding-left:7px;padding-right:7px}
  .game-main{padding-left:4px;padding-right:4px}
}

/* Short landscape: controls/helper/banner live in a side rail and the board gets full height. */
@media(max-height:430px) and (orientation:landscape){
  #gameScreen.active{display:grid!important;grid-template-columns:236px minmax(0,1fr);grid-template-rows:84px 48px 48px minmax(0,1fr)}
  .game-topbar{grid-column:1;grid-row:1;min-height:84px!important;height:84px!important;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:34px 44px;gap:2px 4px;padding:2px 4px!important;box-shadow:none;border-right:1px solid rgba(255,255,255,.12)}
  .game-meta{grid-column:1;grid-row:1;justify-content:center}.game-meta .minor{display:block!important;font-size:11px}.game-meta strong{font-size:12px;line-height:1;max-height:24px}
  .heart-wrap{grid-column:2;grid-row:1;display:flex!important}.heart-wrap.hidden{display:none!important}.heart-wrap span{font-size:13px}.timer-wrap{grid-column:3;grid-row:1;display:flex!important;font-size:11px}.timer-wrap.hidden{display:none!important}
  .top-controls{grid-column:1/-1;grid-row:2;display:flex;gap:4px;justify-content:flex-start}.top-controls .icon-btn{width:44px;height:44px}
  .line-helper{grid-column:1;grid-row:2;position:static!important;inset:auto!important;width:auto;max-height:48px!important;height:48px;padding:4px 6px!important;border-radius:0;background:rgba(255,254,250,.95);font-size:11px;line-height:1.15;overflow:hidden;pointer-events:none}
  .feedback-row{grid-column:1;grid-row:3;width:100%;height:48px;min-height:48px;padding:3px 4px;background:rgba(255,254,250,.18)}
  .top-banner{height:42px;min-height:42px;font-size:11px;line-height:1.12;padding:4px 6px}
  .game-main{grid-column:2;grid-row:1/5;min-height:0;height:100%;padding:0 3px 0 5px!important;gap:0}
  .board-stage{height:100%;min-height:0;border-radius:14px}
  .play-side{display:none!important}
  .game-toolbar{grid-column:1;grid-row:4;min-height:0!important;height:auto!important;width:100%;display:grid!important;grid-template-columns:132px 96px;grid-template-rows:44px 44px 44px;gap:4px;padding:0 4px 0 4px!important;align-content:end;justify-content:start;box-shadow:none;border-right:1px solid rgba(59,47,148,.14)}
  .pen-group{grid-column:1;grid-row:1;display:flex;gap:4px}.pen-group .tool-btn{width:64px;min-width:64px;height:44px;padding:3px;font-size:11px}.tool-label{display:inline!important}
  .zoom-group{grid-column:1;grid-row:2;display:flex;gap:0;justify-content:space-between}.zoom-group .icon-btn,.zoom-group .fit-btn{width:44px!important;height:44px;font-size:11px;color:var(--deep)!important}.zoom-group .fit-btn:after{content:none!important}
  .toolbar-check{grid-column:1;grid-row:3;width:132px;min-width:132px;height:44px;font-size:12px;color:var(--deep)!important;padding:4px}.toolbar-check:after{content:none!important}
  .game-whiz{grid-column:2!important;grid-row:1/4!important;width:96px!important;height:96px!important;align-self:center;justify-self:center;flex:0 0 96px!important}
  .progress-chip{display:none!important}
  .sheet{max-height:calc(100vh - 8px)}
  .sheet-head{min-height:48px}
  .fact-sheet,.complete-sheet{max-width:calc(100vw - 76px)}
  .fact-top canvas{width:104px;height:104px}
}

@media(max-width:390px){.unlock-preview{grid-template-columns:1fr}.unlock-preview .whiz-slot{justify-self:center}.unlock-actions{grid-template-columns:1fr}}
@media(max-height:430px) and (orientation:landscape){.game-main{padding:0!important}.line-helper,.top-banner{font-size:13px}}

/* r3 layout repairs */
@media(max-width:430px) and (orientation:portrait){
  .game-main{padding-left:0!important;padding-right:0!important}
  .game-toolbar{display:grid!important;grid-template-columns:max-content 44px minmax(58px,1fr);grid-template-rows:44px 44px;min-height:98px!important;padding:3px max(calc(var(--safe-r) + 6px),6px) calc(var(--safe-b) + 3px) max(calc(var(--safe-l) + 6px),6px)!important;gap:4px 6px!important;align-content:center}
  .game-toolbar .pen-group{grid-column:1;grid-row:1}
  .game-toolbar .game-whiz{grid-column:2;grid-row:1}
  .game-toolbar .toolbar-check{grid-column:3;grid-row:1;justify-self:end;min-width:58px}
  .game-toolbar .zoom-group{grid-column:1/4;grid-row:2;justify-self:center}
}

/* Short title: two-column menu fits inside the hero card beside a smaller Whiz. */
@media(max-width:700px) and (max-height:380px) and (orientation:landscape){
  #titleScreen{padding-top:5px;padding-bottom:5px}
  .hero-card{min-height:100%!important;height:100%;grid-template-columns:72px minmax(0,1fr)!important;grid-template-rows:76px minmax(0,1fr)!important;padding:6px 8px!important;gap:4px 8px!important;overflow:hidden}
  .hero-art{grid-column:1!important;grid-row:1/3!important;align-self:center}
  .whiz-slot.whiz-xl{width:68px!important;height:68px!important}
  .hero-copy{grid-column:2;grid-row:1;min-width:0;align-self:start}
  .hero-copy .eyebrow,.status-pills{display:none!important}
  .hero-copy h1{font-size:28px!important;line-height:1;margin:0 0 3px!important}
  .teach-line{font-size:13px!important;line-height:1.18;margin:0 0 2px!important}
  .device-controls{font-size:11px!important;line-height:1.1;white-space:normal}
  .title-actions{grid-column:2!important;grid-row:2!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:44px;gap:4px!important;min-width:0;align-content:start}
  .title-actions .primary,.title-actions .icon-text-btn{grid-column:auto!important}
  .title-actions .big-btn,.title-actions .icon-text-btn{width:100%;min-width:0;min-height:44px!important;height:44px;padding:4px 6px!important;font-size:13px!important;line-height:1.05;white-space:normal;overflow:visible}
}

/* Tutorial: 44px cells stay intact while the clue gutter/card adapt to protected-site-button width. */
#tutorialScreen .safe-top-row{background:rgba(41,35,95,.90);border-radius:14px;padding:3px 5px}
@media(max-width:500px) and (orientation:portrait){
  .tutorial-card{padding:2px!important;gap:4px!important;grid-template-rows:auto 244px 44px 44px!important}
  .tutorial-side{min-width:0!important;min-height:68px!important;padding:0 2px}
  .tutorial-side .whiz-slot{width:58px!important;height:58px!important;flex-basis:58px!important}
  .tutorial-copy{min-width:0;overflow:visible}
  .tutorial-copy p{font-size:13px!important;line-height:1.18;margin:1px 0!important;overflow-wrap:anywhere}
  .tutorial-why{min-height:16px!important}
  .tutorial-board-wrap{width:244px!important;height:244px!important;grid-template-columns:24px 220px!important;grid-template-rows:24px 220px!important;justify-self:center!important}
  .tutorial-col-clues{grid-template-columns:repeat(5,44px)!important}
  .tutorial-row-clues{grid-template-rows:repeat(5,44px)!important}
  .tutorial-col-clues span{height:24px!important;font-size:13px!important}
  .tutorial-row-clues span{width:24px!important;font-size:13px!important;padding-right:1px!important}
  .tutorial-tools{width:100%;justify-content:center!important}
  .tutorial-card>#tutorialNext{width:100%!important}
}
@media(max-width:700px) and (max-height:380px) and (orientation:landscape){
  .tutorial-card{grid-template-columns:minmax(0,1fr) 244px!important;grid-template-rows:minmax(0,1fr) 44px!important;width:100%;height:100%;padding:3px 4px!important;gap:3px 5px!important}
  .tutorial-board-wrap{grid-column:2!important;grid-row:1/3!important;width:244px!important;height:244px!important;grid-template-columns:24px 220px!important;grid-template-rows:24px 220px!important;transform:none!important;align-self:center!important;justify-self:end!important}
  .tutorial-col-clues{grid-template-columns:repeat(5,44px)!important}.tutorial-row-clues{grid-template-rows:repeat(5,44px)!important}
  .tutorial-col-clues span{height:24px!important;font-size:13px!important}.tutorial-row-clues span{width:24px!important;font-size:13px!important}
  .tutorial-side{grid-column:1!important;grid-row:1!important;min-width:0;gap:5px!important;align-items:flex-start!important}
  .tutorial-side .whiz-slot{width:52px!important;height:52px!important;flex:0 0 52px!important}
  .tutorial-copy{min-width:0}.tutorial-copy p{font-size:13px!important;line-height:1.12!important;margin:1px 0!important;overflow-wrap:anywhere}.tutorial-why{min-height:16px!important}
  .tutorial-tools{grid-column:1!important;grid-row:2!important;gap:4px!important;justify-self:start!important}
  .tutorial-tools .tool-btn{min-width:82px;padding:4px 6px;font-size:13px}
  .tutorial-card>#tutorialNext{grid-column:1!important;grid-row:2!important;width:92px!important;justify-self:end!important;min-height:44px!important}
}

/* r3 final: compact portrait title fits beside the permanent site-button gutter. */
@media(max-width:430px) and (orientation:portrait){
  #titleScreen{padding-top:5px;padding-bottom:5px}
  .title-scroll{display:block;padding:0;overflow:hidden}
  .hero-card{width:100%;height:100%;min-height:0!important;grid-template-columns:74px minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important;gap:5px 7px!important;padding:7px!important;align-content:start;overflow:hidden}
  .hero-art{grid-column:1!important;grid-row:1!important;align-self:center;gap:2px}
  .whiz-slot.whiz-xl{width:72px!important;height:72px!important}
  .outfit-label{font-size:11px;line-height:1.05;min-height:11px}
  .hero-copy{grid-column:2!important;grid-row:1!important;min-width:0;align-self:start}
  .hero-copy .eyebrow,.status-pills{display:none!important}
  .hero-copy h1{font-size:30px!important;line-height:.95;margin:0 0 4px!important}
  .teach-line{font-size:13px!important;line-height:1.14;margin:0 0 4px!important}
  .device-controls{font-size:11px!important;line-height:1.12;margin:0!important}
  .title-actions{grid-column:1/-1!important;grid-row:2!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:44px;gap:4px!important;align-content:end;min-width:0}
  .title-actions .primary{grid-column:1/-1!important}
  .title-actions .icon-text-btn{grid-column:auto!important}
  .title-actions .big-btn,.title-actions .icon-text-btn{width:100%;min-width:0;min-height:44px!important;height:44px;padding:4px 5px!important;font-size:13px!important;line-height:1.05;white-space:normal;overflow:visible}
}

/* r3 final QA: scrollable choice rows wrap before a control can be partially clipped. */
@media(max-width:760px){
  .collection-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));overflow-x:visible;gap:6px;padding-bottom:8px}
  .collection-tabs button{width:100%;min-width:0;white-space:normal;line-height:1.08}
}
@media(max-width:430px){
  .practice-sizes{grid-template-columns:repeat(3,minmax(44px,1fr))}
}

/* Keep every collection tab wholly visible at every tested width. */
.collection-tabs{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(112px,1fr))!important;overflow-x:visible!important;gap:6px!important}
.collection-tabs button{width:100%;min-width:0;white-space:normal;line-height:1.08}