:root{--primary:#6551d9;--deep:#3b2f94;--bg:#29235f;--paper:#fffefa;--cream:#fff7df;--cream2:#fff3cf;--shadow:0 10px 28px rgba(41,35,95,.28);--focus:0 0 0 3px #fff,0 0 0 6px #3b2f94;--safeL:max(10px,env(safe-area-inset-left));--safeR:max(10px,env(safe-area-inset-right));--safeT:max(8px,env(safe-area-inset-top));--safeB:max(8px,env(safe-area-inset-bottom));font-family:ui-rounded,"SF Pro Rounded","Trebuchet MS",system-ui,sans-serif;color:#29235f;background:#29235f}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#29235f;overscroll-behavior:none}body{height:100vh;height:100dvh;-webkit-text-size-adjust:100%;touch-action:manipulation}.app{width:100vw;height:100vh;height:100dvh;overflow:hidden;position:relative;background:#29235f}.sr-only{position:fixed!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
button,.button{font:inherit;color:inherit;border:0;min-width:44px;min-height:44px;border-radius:16px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,.button:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus)}button:disabled{opacity:.5;cursor:default}.btn{background:var(--primary);color:#fff;font-weight:900;padding:10px 16px;box-shadow:0 5px 0 var(--deep),0 9px 20px rgba(41,35,95,.24);transition:transform .12s}.btn:active{transform:translateY(2px);box-shadow:0 3px 0 var(--deep),0 5px 12px rgba(41,35,95,.2)}.btn.secondary{background:#fff;color:var(--deep);box-shadow:inset 0 0 0 2px rgba(59,47,148,.18),0 5px 0 rgba(255,255,255,.34),0 8px 18px rgba(41,35,95,.18)}.btn.ghost{background:rgba(255,255,255,.13);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}.icon-btn{background:#fff;color:var(--deep);display:grid;place-items:center;font-size:22px;font-weight:900;box-shadow:0 4px 14px rgba(41,35,95,.2)}.icon-btn.dark{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.screen{position:absolute;inset:0;overflow:hidden}.scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#fff7df 0%,#fff3cf 46%,#6551d9 160%)}.scene:before,.scene:after{content:"";position:absolute;pointer-events:none}.scene:before{left:-10%;right:-10%;bottom:-13%;height:44%;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 30% 10%,rgba(255,255,255,.8) 0 3%,transparent 4%),radial-gradient(ellipse at 66% 14%,rgba(255,255,255,.65) 0 2%,transparent 3%),linear-gradient(180deg,#fff3cf,#6551d9 220%);box-shadow:inset 0 14px 30px rgba(255,255,255,.35)}.scene:after{inset:0;background-image:radial-gradient(circle at 14% 22%,rgba(255,255,255,.8) 0 2px,transparent 3px),radial-gradient(circle at 80% 16%,rgba(101,81,217,.18) 0 2px,transparent 3px),radial-gradient(circle at 36% 70%,rgba(255,255,255,.7) 0 1px,transparent 2px);background-size:180px 160px,220px 190px,120px 140px;opacity:.7}.scene.world-2{background:linear-gradient(180deg,#fff7df 0%,#fff3cf 35%,#3b2f94 150%)}.scene.world-2:before{height:70%;bottom:-22%;background:repeating-linear-gradient(90deg,transparent 0 8%,rgba(59,47,148,.18) 8% 11%,transparent 11% 20%),linear-gradient(180deg,transparent,#6551d9 180%)}.scene.world-3:before{height:46%;bottom:-8%;background:radial-gradient(ellipse at 50% 80%,rgba(255,255,255,.88) 0 23%,rgba(101,81,217,.2) 24% 40%,transparent 41%),linear-gradient(180deg,transparent,#6551d9 160%)}.scene.world-4{background:linear-gradient(180deg,#fffefa,#fff3cf 44%,#3b2f94 170%)}.scene.world-4:before{height:60%;clip-path:polygon(0 100%,0 72%,16% 38%,25% 57%,42% 19%,55% 60%,70% 30%,100% 75%,100% 100%);background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(101,81,217,.42))}.scene.world-5{background:linear-gradient(180deg,#fffefa 0%,#fff7df 52%,#6551d9 180%)}.scene.world-5:before{height:56%;clip-path:polygon(0 100%,0 67%,19% 38%,28% 55%,44% 14%,58% 61%,73% 24%,100% 70%,100% 100%);background:linear-gradient(180deg,#fff,rgba(255,255,255,.48))}.scene.world-6{background:radial-gradient(circle at 50% 90%,#6551d9 0,#3b2f94 35%,#29235f 80%)}.scene.world-6:after{background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 2px),radial-gradient(circle,rgba(255,243,207,.9) 0 1.5px,transparent 2.5px);background-size:70px 80px,110px 130px;animation:twinkle 4s ease-in-out infinite alternate}.reduced-motion .scene.world-6:after{animation:none}@keyframes twinkle{from{opacity:.45}to{opacity:.9}}
.title-screen{display:grid;place-items:center;padding:calc(var(--safeT) + 10px) var(--safeR) var(--safeB) var(--safeL);color:#fff}.title-card{position:relative;z-index:2;width:min(760px,94vw);max-height:calc(100dvh - 20px);display:grid;grid-template-columns:minmax(210px,.9fr) minmax(260px,1.1fr);gap:20px;align-items:center;background:rgba(41,35,95,.84);border:2px solid rgba(255,255,255,.2);border-radius:32px;padding:clamp(18px,3vw,30px);box-shadow:0 24px 60px rgba(41,35,95,.4);backdrop-filter:blur(10px)}.hero-copy h1{font-size:clamp(34px,6vw,62px);line-height:.95;margin:8px 0 10px;color:#fff;text-shadow:0 4px 0 #3b2f94}.hero-copy .teach{font-size:clamp(15px,2vw,20px);line-height:1.35;color:#fff7df;margin:0 0 16px}.title-actions{display:grid;gap:10px}.title-actions .btn{width:100%;min-height:52px}.tiny-note{font-size:12px;color:#fff3cf;opacity:.92;margin-top:8px}.hero-art{display:grid;place-items:center;min-height:260px}.whiz-svg{width:min(260px,80%);height:auto;filter:drop-shadow(0 16px 18px rgba(41,35,95,.35));transform-origin:50% 80%}.whiz-svg.react{animation:whizPop .38s cubic-bezier(.2,1.8,.4,1)}.reduced-motion .whiz-svg.react{animation:none}@keyframes whizPop{0%{transform:scale(.92) rotate(-3deg)}60%{transform:scale(1.06) rotate(2deg)}100%{transform:scale(1)}}
.topbar{position:relative;z-index:6;display:flex;align-items:center;gap:8px;min-width:0;padding:var(--safeT) var(--safeR) 6px max(64px,var(--safeL));height:62px}.topbar>*{min-width:0}.topbar-title{flex:1;text-align:center;font-weight:1000;color:var(--deep);font-size:clamp(17px,3vw,24px);white-space:nowrap;overflow:hidden;text-overflow:clip}.topbar .icon-btn{flex:0 0 44px}.play-screen{display:flex;flex-direction:column}.play-body{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;padding:0 var(--safeR) var(--safeB) var(--safeL);gap:7px}.rule-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:720px;width:100%;margin:0 auto}.rule-chip{min-height:44px;background:rgba(255,254,250,.92);border-radius:15px;padding:7px 10px;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;font-weight:900;font-size:13px;line-height:1.08;box-shadow:0 4px 12px rgba(41,35,95,.13);border:1px solid rgba(59,47,148,.13)}.rule-chip .r-icon{font-size:19px;flex:0 0 auto}.play-main{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}.board-zone{display:flex;align-items:center;justify-content:center;gap:8px;min-height:0;max-width:100%}.board-frame{position:relative;padding:6px;background:linear-gradient(145deg,#fff7df,#fff3cf);border:3px solid rgba(59,47,148,.72);border-radius:18px;box-shadow:0 10px 24px rgba(41,35,95,.25),inset 0 0 0 2px rgba(255,255,255,.8);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;aspect-ratio:1}.board{display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);width:100%;height:100%;overflow:hidden;border-radius:11px;background:#fff}.cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;border:1px solid rgba(41,35,95,.08);overflow:hidden}.cell:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:var(--pat);background-size:8px 8px}.cell.edge-t{border-top:3px solid var(--deep)}.cell.edge-b{border-bottom:3px solid var(--deep)}.cell.edge-l{border-left:3px solid var(--deep)}.cell.edge-r{border-right:3px solid var(--deep)}.cell.cursor{z-index:2;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px var(--deep)}.cell.hint{z-index:1;animation:hintGlow 1s ease-in-out infinite alternate;box-shadow:inset 0 0 0 4px rgba(255,255,255,.92),inset 0 0 0 7px var(--primary)}.reduced-motion .cell.hint{animation:none}@keyframes hintGlow{from{filter:brightness(1)}to{filter:brightness(1.14)}}.cell.conflict{z-index:3;outline:3px dashed #fff;outline-offset:-4px;box-shadow:inset 0 0 0 7px rgba(255,255,255,.62)}.xmark,.auto-x{position:absolute;inset:20%;display:grid;place-items:center;font-weight:1000;line-height:1;color:var(--deep);font-size:clamp(17px,4.2vmin,34px);text-shadow:0 1px 0 #fff}.auto-x{opacity:.46;font-size:clamp(14px,3.2vmin,26px);font-weight:700}.auto-x:after{content:"×";border:2px dotted var(--deep);border-radius:50%;width:70%;height:70%;display:grid;place-items:center}.owl-piece{position:absolute;width:84%;height:84%;filter:drop-shadow(0 2px 2px rgba(41,35,95,.26));transform-origin:50% 80%}.owl-piece.pop{animation:piecePop .26s cubic-bezier(.2,1.7,.4,1)}.owl-piece.worried .eye{transform-origin:center;transform:scaleY(.72)}.reduced-motion .owl-piece.pop{animation:none}@keyframes piecePop{0%{transform:scale(.4) rotate(-8deg)}75%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1)}}.board-celebrate .owl-piece{animation:hootRow .55s ease-in-out both}.reduced-motion .board-celebrate .owl-piece{animation:none}@keyframes hootRow{50%{transform:translateY(-12%) scale(1.12)}}
.play-side{width:min(720px,100%);display:flex;align-items:center;justify-content:center;gap:7px;min-height:50px}.progress-pill{height:44px;min-width:96px;border-radius:16px;background:rgba(255,254,250,.95);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:1000;color:var(--deep);box-shadow:0 4px 12px rgba(41,35,95,.14);padding:4px 10px}.mini-whiz{width:32px;height:32px}.tool-row{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;flex-wrap:nowrap}.tool-row button{font-size:13px;font-weight:900;white-space:nowrap;padding:7px 10px}.pen-group{display:flex;background:rgba(255,254,250,.92);border-radius:16px;padding:3px;gap:2px}.pen-group button{background:transparent;color:var(--deep);box-shadow:none;min-width:44px}.pen-group button[aria-pressed=true]{background:var(--primary);color:#fff}.hearts{font-weight:1000;color:var(--deep);background:rgba(255,254,250,.92);border-radius:15px;min-height:44px;display:flex;align-items:center;padding:5px 10px}.timer{font-variant-numeric:tabular-nums;font-weight:1000;background:rgba(255,254,250,.92);border-radius:15px;min-height:44px;display:flex;align-items:center;padding:5px 10px}
.banner{position:fixed;z-index:50;left:50%;top:max(64px,calc(env(safe-area-inset-top) + 58px));transform:translate(-50%,-12px);width:min(520px,calc(100vw - 120px));min-height:44px;padding:10px 16px;background:rgba(255,254,250,.58);color:var(--deep);font-weight:900;text-align:center;border:1px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 8px 22px rgba(41,35,95,.15);backdrop-filter:blur(8px);pointer-events:none;opacity:0;transition:opacity .18s,transform .18s}.banner.show{opacity:1;transform:translate(-50%,0)}
.sheet-backdrop{position:absolute;inset:0;z-index:30;background:rgba(255,254,250,.45);display:grid;place-items:center;padding:calc(var(--safeT) + 8px) var(--safeR) var(--safeB) var(--safeL)}.sheet{width:min(760px,96vw);max-height:min(88dvh,820px);background:rgba(255,254,250,.985);border-radius:26px;box-shadow:0 22px 60px rgba(41,35,95,.32);border:2px solid rgba(59,47,148,.15);display:flex;flex-direction:column;overflow:hidden;color:var(--deep)}.sheet-head{display:flex;align-items:center;gap:8px;padding:12px 12px 8px 18px;border-bottom:1px solid rgba(59,47,148,.12);min-height:58px}.sheet-head h2{margin:0;flex:1;font-size:clamp(20px,4vw,30px);line-height:1.05}.sheet-body{padding:14px 18px 18px;overflow:auto;overscroll-behavior:contain;min-height:0}.sheet-foot{padding:10px 14px 14px;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.choice-card{min-height:146px;padding:14px;background:#fff7df;border:2px solid transparent;color:var(--deep);text-align:left;box-shadow:0 6px 16px rgba(41,35,95,.1)}.choice-card strong{display:block;font-size:18px;margin-bottom:4px}.choice-card.selected{border-color:var(--primary);box-shadow:inset 0 0 0 2px #fff,0 6px 16px rgba(41,35,95,.16)}.setting-row{min-height:58px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(59,47,148,.1)}.setting-row:last-child{border:0}.setting-row .label{flex:1}.switch{width:56px;height:32px;min-width:56px;min-height:44px;border-radius:20px;background:rgba(59,47,148,.16);padding:6px;display:flex;align-items:center;justify-content:flex-start}.switch:after{content:"";width:22px;height:22px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(41,35,95,.22)}.switch[aria-pressed=true]{background:var(--primary);justify-content:flex-end}.seg{display:flex;gap:4px;background:rgba(59,47,148,.08);padding:3px;border-radius:15px}.seg button{background:transparent;box-shadow:none}.seg button[aria-pressed=true]{background:var(--primary);color:#fff}
.map-sheet{width:min(940px,97vw);height:min(90dvh,860px)}.world-section{margin-bottom:22px;padding:14px;border-radius:22px;background:#fff7df;border:1px solid rgba(59,47,148,.12)}.world-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.world-head h3{margin:0;flex:1;font-size:20px}.level-path{display:grid;grid-template-columns:repeat(10,minmax(44px,1fr));gap:8px}.level-node{position:relative;min-width:44px;min-height:52px;background:#fff;color:var(--deep);border:2px solid rgba(59,47,148,.16);border-radius:18px;font-weight:1000;padding:4px}.level-node.locked{opacity:.48}.level-node.nest{background:var(--cream2);border-color:var(--deep)}.node-stars{display:block;font-size:10px;letter-spacing:-1px;color:var(--deep)}
.tutorial{display:grid;grid-template-rows:auto 1fr auto;gap:12px}.tutorial-copy{font-size:16px;line-height:1.35}.mini-board{display:grid;grid-template-columns:repeat(var(--n),1fr);aspect-ratio:1;width:min(300px,70vw,48dvh);margin:auto;border:5px solid var(--deep);border-radius:16px;overflow:hidden;background:#fff}.mini-cell{display:grid;place-items:center;border:1px solid rgba(41,35,95,.12);font-size:24px;font-weight:1000;min-width:0;min-height:0;background:var(--mini-bg,#fff7df)}.mini-cell.target{box-shadow:inset 0 0 0 4px var(--primary);cursor:pointer}.tutorial-step{font-weight:1000;color:var(--primary);font-size:13px;text-transform:uppercase;letter-spacing:.04em}.arrow-note{text-align:center;color:var(--deep);font-weight:900}.strategy-list{display:grid;gap:10px}.strategy-card{background:#fff7df;border-radius:18px;padding:12px}.strategy-card.locked{opacity:.55}.strategy-card h3{margin:0 0 5px}.strategy-demo{height:64px;border-radius:12px;background:repeating-linear-gradient(45deg,rgba(101,81,217,.12) 0 7px,rgba(255,255,255,.6) 7px 14px);display:flex;align-items:center;justify-content:center;font-weight:1000;margin-top:8px}.hint-card{background:#fff7df;border-radius:18px;padding:14px;font-size:16px;line-height:1.4}.hint-rule{display:inline-block;background:var(--primary);color:#fff;border-radius:999px;padding:5px 10px;font-weight:1000;margin-bottom:8px}.hint-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.owl-card-btn{min-height:160px;padding:8px;background:#fff7df;color:var(--deep);border:2px solid rgba(59,47,148,.14);box-shadow:none}.owl-card-btn.locked{background:rgba(59,47,148,.08)}.species-art{height:94px;display:grid;place-items:center}.species-art svg{height:88px;width:88px}.species-name{font-size:12px;font-weight:1000;line-height:1.15}.fact-card{display:grid;grid-template-columns:150px 1fr;gap:16px}.fact-card .species-art{height:auto}.fact-card .species-art svg{width:140px;height:140px}.fact-card h3{font-size:26px;margin:0 0 4px}.fact-card p{margin:5px 0;line-height:1.35}.science-note{background:#fff7df;padding:12px;border-radius:16px;margin-top:10px}.win-stars{font-size:44px;text-align:center;letter-spacing:4px;color:var(--primary);text-shadow:0 2px 0 #fff}.win-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.stat-card{background:#fff7df;border-radius:16px;padding:10px;text-align:center}.stat-card strong{display:block;font-size:18px}.confetti{position:absolute;inset:0;z-index:25;pointer-events:none;overflow:hidden}.confetti i{position:absolute;width:8px;height:14px;background:var(--primary);border-radius:3px;animation:fall 1.8s ease-in forwards}.reduced-motion .confetti{display:none}@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(105dvh) rotate(520deg);opacity:0}}
.daily-card{background:#fff7df;border-radius:18px;padding:14px}.daily-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:10px}.day-dot{min-height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}.day-dot.done{background:var(--primary);color:#fff}.reward-strip{display:flex;gap:8px;overflow:auto;padding-bottom:4px}.reward-pill{flex:0 0 auto;min-height:44px;background:#fff7df;border-radius:999px;padding:8px 12px;font-weight:900}
@media(max-width:680px){.title-card{grid-template-columns:1fr;width:min(94vw,430px);gap:8px;text-align:center}.hero-art{min-height:150px}.whiz-svg{width:min(170px,55%)}.hero-copy h1{font-size:42px}.choice-grid{grid-template-columns:1fr}.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.level-path{grid-template-columns:repeat(5,minmax(44px,1fr))}.rule-chip .rule-text{display:none}.rule-chip{padding:5px;cursor:pointer}.play-body{gap:5px}.board-frame{border-radius:15px}.tool-row button .wide-label{display:none}.topbar-title{font-size:18px}.fact-card{grid-template-columns:1fr;text-align:center}.fact-card .species-art svg{width:120px;height:120px}.banner{width:calc(100vw - 120px);font-size:13px}}
@media(orientation:portrait){.board-frame{width:min(92vw,calc(100dvh - 246px),540px);min-width:min(92vw,306px)}.play-main{justify-content:center}.play-side{flex-wrap:wrap}.topbar{height:58px}.rule-strip{flex:0 0 auto}.tool-row{max-width:100%}}
@media(orientation:landscape) and (max-height:520px){.play-screen{display:grid;grid-template-columns:auto minmax(236px,1fr);padding:var(--safeT) var(--safeR) var(--safeB) var(--safeL);gap:8px}.play-screen .scene{grid-column:1/-1}.topbar{grid-column:2;grid-row:1;height:48px;padding:0 0 0 0;align-self:start}.topbar .topbar-title{text-align:left}.play-body{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:auto minmax(236px,1fr);padding:0;gap:8px;min-height:0}.rule-strip{grid-column:2;grid-row:1;margin-top:52px;align-self:start;max-width:none}.play-main{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:auto minmax(236px,1fr);gap:8px;align-items:center;justify-content:stretch}.board-zone{grid-column:1;grid-row:1;align-self:center}.board-frame{width:min(calc(100dvh - var(--safeT) - var(--safeB) - 8px),calc(100vw - 252px - var(--safeL) - var(--safeR)),470px);min-width:min(calc(100dvh - 10px),306px)}.play-side{grid-column:2;grid-row:1;margin-top:104px;width:100%;align-self:start;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.progress-pill{grid-column:1/2;width:100%}.hearts,.timer{justify-content:center}.tool-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:5px}.tool-row .pen-group{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}.tool-row button{padding:5px 7px;font-size:12px}.rule-chip{font-size:11px;min-height:44px}.rule-chip .rule-text{display:none}.topbar-title{font-size:16px}.banner{top:max(8px,var(--safeT));left:calc(50% + 116px);width:min(360px,calc(100vw - 330px));font-size:12px}.sheet{max-height:96dvh}.sheet-body{padding:10px 14px}.sheet-head{min-height:48px;padding:6px 10px 5px 14px}.sheet-head h2{font-size:20px}.title-card{grid-template-columns:minmax(140px,.72fr) minmax(250px,1.28fr);max-height:96dvh;padding:12px 18px;width:min(820px,94vw)}.hero-art{min-height:0}.whiz-svg{width:min(180px,74%)}.hero-copy h1{font-size:34px}.hero-copy .teach{font-size:14px;margin-bottom:8px}.title-actions{grid-template-columns:repeat(2,1fr);gap:7px}.title-actions .btn{min-height:44px;padding:6px 10px}.tiny-note{display:none}.choice-card{min-height:100px;padding:9px}.tutorial{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto}.tutorial-copy{font-size:14px}.mini-board{width:min(42dvh,260px)}.tutorial .tutorial-copy{grid-column:1}.tutorial .mini-board{grid-column:2;grid-row:1/3}.tutorial .arrow-note{grid-column:1}.collection-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.owl-card-btn{min-height:122px}.species-art{height:70px}.species-art svg{height:66px;width:66px}.win-stars{font-size:34px}}
@media(min-width:1300px){.title-card{width:860px}.board-frame{max-width:620px}.play-side{max-width:820px}.rule-strip{max-width:820px}.sheet{font-size:16px}}
.cell.conflict{outline:3px dashed #d9503f}.cell.conflict:after{content:"!";position:absolute;right:2px;top:1px;width:15px;height:15px;border-radius:50%;background:#fff;color:#d9503f;font-size:11px;font-weight:1000;display:grid;place-items:center;z-index:5}.scene.reward-bg-moon{filter:saturate(.9) brightness(.92)}.scene.reward-bg-moon:after{opacity:.9}.strategy-demo{position:relative;overflow:hidden}.strategy-demo:after{content:"";width:20px;height:20px;border-radius:50%;background:#6551d9;box-shadow:0 0 0 4px #fff3cf;animation:strategyMove 1.7s ease-in-out infinite alternate;margin-left:10px}.reduced-motion .strategy-demo:after{animation:none}@keyframes strategyMove{from{transform:translateX(-8px) scale(.9)}to{transform:translateX(8px) scale(1.08)}}
@media(max-width:340px) and (orientation:portrait){.play-body{padding-left:2px;padding-right:2px}.board-zone{width:100%}.dense-board .board-frame{max-width:316px}.dense-board .rule-strip,.dense-board .play-side{padding-left:8px;padding-right:8px}}
@media(orientation:landscape) and (max-height:520px){
  .play-screen{grid-template-columns:minmax(236px,1fr) auto}
  .topbar{grid-column:1;padding-left:56px}
  .play-body{grid-template-columns:minmax(236px,1fr) auto}
  .rule-strip{grid-column:1}
  .play-main{grid-template-columns:minmax(236px,1fr) auto}
  .board-zone{grid-column:2}
  .play-side{grid-column:1}
  .board-frame{width:min(calc(100dvh - var(--safeT) - var(--safeB) - 4px),calc(100vw - 248px - var(--safeL) - var(--safeR)),470px)}
  .dense-board .board-frame{padding:2px;border-width:2px}
  .banner{left:calc(50% - 116px);width:min(360px,calc(100vw - 330px))}
}
.node-stars{font-size:11px}.species-name{font-size:13px}
@media(orientation:landscape) and (max-height:520px){.tool-row button{font-size:13px}}
@media(orientation:landscape) and (max-height:520px){
  .play-screen{grid-template-columns:minmax(220px,1fr) auto;padding:max(4px,env(safe-area-inset-top)) var(--safeR) max(4px,env(safe-area-inset-bottom)) var(--safeL)}
  .play-body,.play-main{grid-template-columns:minmax(220px,1fr) auto}
  .board-frame{width:min(calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc(100vw - 232px - var(--safeL) - var(--safeR)),470px)}
}
@media(orientation:landscape) and (max-height:520px){.dense-board .board-frame{padding:1px;border-width:2px}}
@media(orientation:landscape) and (max-height:520px){
  .topbar{width:100%;max-width:100%;min-width:0;overflow:hidden;justify-self:stretch}
}
@media(orientation:landscape) and (max-height:520px) and (max-width:700px){
  .topbar-title{display:none}
}
@media(orientation:landscape) and (max-height:520px){
  .topbar{position:absolute;left:var(--safeL);top:max(4px,env(safe-area-inset-top));width:160px;max-width:160px;height:48px;padding:0 0 0 56px;display:flex;justify-content:flex-end;overflow:visible}
  .topbar-title{display:none}
}
@media(max-width:680px) and (orientation:portrait){
  .play-side{width:100%}
  .tool-row{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));width:100%;gap:5px}
  .tool-row .pen-group{display:contents}
  .tool-row button{width:100%;padding:5px 6px}
}
@media(orientation:landscape) and (max-height:520px){
  .rule-strip{width:auto;max-width:none;min-width:0;justify-self:stretch}
}
@media(orientation:landscape) and (max-height:520px){.rule-strip{margin:52px 0 0 0;width:100%;justify-self:stretch}}
@media(orientation:landscape) and (max-height:520px){
  .rule-strip{position:absolute;left:0;top:52px;width:220px!important;margin:0;z-index:5}
}
.board-frame{background:repeating-linear-gradient(90deg,#c58b59 0 12px,#b97b4d 12px 23px,#cc9462 23px 34px);box-shadow:0 10px 24px rgba(41,35,95,.25),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(90,52,31,.18)}
.mini-whiz.react{animation:whizPop .38s cubic-bezier(.2,1.8,.4,1)}.reduced-motion .mini-whiz.react{animation:none}
.board-celebrate .cell{animation:treeGlow .9s ease-in-out both;animation-delay:calc(var(--g) * .035s)}.reduced-motion .board-celebrate .cell{animation:none}@keyframes treeGlow{50%{filter:brightness(1.18);box-shadow:inset 0 0 16px rgba(255,255,255,.85)}}
/* Final compact-state hardening */
@media(orientation:landscape) and (max-height:520px){
  .mini-board{width:230px;max-width:230px}
}
@media(max-width:680px) and (orientation:portrait){
  .title-card{padding:14px 16px;gap:5px;max-height:calc(100dvh - 16px)}
  .hero-art{min-height:96px}
  .whiz-svg{width:min(126px,43%)}
  .hero-copy h1{font-size:34px;margin:3px 0 5px}
  .hero-copy .teach{font-size:14px;line-height:1.25;margin:0 0 8px}
  .title-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .title-actions .btn{min-height:44px;padding:6px 8px}
  .tiny-note{margin-top:4px;font-size:11px}
}
@media(max-width:340px) and (orientation:portrait){
  .hero-art{min-height:84px}
  .whiz-svg{width:min(112px,40%)}
  .hero-copy h1{font-size:31px}
  .hero-copy .teach{font-size:13px}
}

/* Owl Roost v1 pushback hardening and richer game art */
.board-frame{--board-size:min(92vw,calc(100dvh - 238px),540px);width:var(--board-size);height:var(--board-size);inline-size:var(--board-size);block-size:var(--board-size);aspect-ratio:1/1;flex:0 0 auto;align-self:center}
.dense-board .board-frame{padding:1px;border-width:2px}
.play-screen .scene.world-6 + .topbar .topbar-title{color:#fff;text-shadow:0 2px 3px rgba(41,35,95,.9)}
.auto-x{inset:24%;border:2px dotted rgba(59,47,148,.8);border-radius:50%;opacity:.54;font-size:clamp(14px,3.2vmin,26px);font-weight:800}
.auto-x:after{display:none!important;content:none!important}

/* Layered illustrated scenes. They move only while the capped game loop changes --pulse. */
.scene{isolation:isolate}
.scene:after{animation:none!important}
.scene-depth,.scene-sparkles{position:absolute;inset:0;pointer-events:none;will-change:transform,opacity}
.scene-far{z-index:0;transform:translateY(calc((var(--pulse,.5) - .5)*2px));transition:transform .12s linear}
.scene-mid{z-index:1;transform:translateY(calc((var(--pulse,.5) - .5)*4px));transition:transform .12s linear}
.scene-near{z-index:2;transform:translateY(calc((var(--pulse,.5) - .5)*6px));transition:transform .12s linear}
.scene-sparkles{z-index:3}
.scene-sparkles i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff3cf;box-shadow:0 0 12px rgba(255,255,255,.9);opacity:calc(.35 + var(--pulse,.5)*.55)}
.scene-sparkles i:nth-child(1){left:12%;top:24%}.scene-sparkles i:nth-child(2){left:26%;top:62%;width:3px;height:3px}.scene-sparkles i:nth-child(3){left:48%;top:18%}.scene-sparkles i:nth-child(4){left:67%;top:52%;width:4px;height:4px}.scene-sparkles i:nth-child(5){left:82%;top:28%;width:3px;height:3px}.scene-sparkles i:nth-child(6){left:91%;top:70%}
.world-1 .scene-far{background:radial-gradient(ellipse at 12% 86%,#bfe3a8 0 22%,transparent 23%),radial-gradient(ellipse at 45% 90%,#c8dda1 0 28%,transparent 29%),radial-gradient(ellipse at 82% 84%,#bfe3a8 0 25%,transparent 26%)}
.world-1 .scene-mid{background:radial-gradient(circle at 12% 72%,#fff 0 3px,#f7d983 4px 7px,transparent 8px),radial-gradient(circle at 35% 83%,#fff 0 3px,#e8b2c4 4px 7px,transparent 8px),radial-gradient(circle at 74% 76%,#fff 0 3px,#9ed8e8 4px 7px,transparent 8px);background-size:180px 130px,210px 150px,240px 170px}
.world-1 .scene-near{top:auto;height:22%;background:repeating-linear-gradient(78deg,transparent 0 17px,rgba(101,81,217,.18) 18px 21px,transparent 22px 37px);clip-path:polygon(0 58%,8% 45%,16% 62%,25% 42%,36% 63%,46% 43%,58% 61%,70% 40%,82% 64%,92% 44%,100% 58%,100% 100%,0 100%)}
.world-2 .scene-far{background:radial-gradient(circle at 18% 12%,rgba(191,227,168,.7) 0 12%,transparent 13%),radial-gradient(circle at 68% 8%,rgba(200,221,161,.72) 0 16%,transparent 17%),radial-gradient(circle at 92% 20%,rgba(191,227,168,.65) 0 14%,transparent 15%)}
.world-2 .scene-mid{background:repeating-linear-gradient(90deg,transparent 0 8%,rgba(89,63,43,.34) 8% 10%,transparent 10% 17%),linear-gradient(180deg,transparent 0 28%,rgba(59,47,148,.12) 100%)}
.world-2 .scene-near{top:auto;height:27%;background:radial-gradient(ellipse at 10% 100%,rgba(101,81,217,.34) 0 17%,transparent 18%),radial-gradient(ellipse at 55% 110%,rgba(59,47,148,.28) 0 26%,transparent 27%),radial-gradient(ellipse at 88% 105%,rgba(101,81,217,.3) 0 18%,transparent 19%)}
.world-3 .scene-far{background:radial-gradient(ellipse at 15% 74%,rgba(191,227,168,.7) 0 22%,transparent 23%),radial-gradient(ellipse at 85% 72%,rgba(200,221,161,.72) 0 25%,transparent 26%)}
.world-3 .scene-mid{top:42%;background:linear-gradient(168deg,transparent 0 31%,rgba(158,216,232,.75) 32% 52%,rgba(255,255,255,.72) 53% 55%,rgba(158,216,232,.48) 56% 72%,transparent 73%);filter:drop-shadow(0 7px 12px rgba(41,35,95,.15))}
.world-3 .scene-near{top:auto;height:25%;background:radial-gradient(ellipse at 20% 100%,rgba(101,81,217,.26) 0 26%,transparent 27%),radial-gradient(ellipse at 76% 104%,rgba(59,47,148,.22) 0 28%,transparent 29%)}
.world-4 .scene-far{top:24%;background:linear-gradient(145deg,transparent 0 31%,rgba(216,199,163,.54) 32% 43%,transparent 44%),linear-gradient(215deg,transparent 0 34%,rgba(169,197,232,.55) 35% 49%,transparent 50%)}
.world-4 .scene-mid{top:34%;background:linear-gradient(150deg,transparent 0 35%,rgba(101,81,217,.34) 36% 49%,transparent 50%),linear-gradient(210deg,transparent 0 38%,rgba(59,47,148,.3) 39% 53%,transparent 54%);filter:blur(.2px)}
.world-4 .scene-near{background:linear-gradient(180deg,transparent 42%,rgba(255,255,255,.25) 52%,transparent 63%),linear-gradient(180deg,transparent 58%,rgba(255,255,255,.28) 68%,transparent 78%)}
.world-5 .scene-far{top:20%;background:linear-gradient(145deg,transparent 0 30%,rgba(255,255,255,.96) 31% 43%,rgba(169,197,232,.5) 44% 45%,transparent 46%),linear-gradient(215deg,transparent 0 35%,rgba(255,255,255,.92) 36% 50%,rgba(169,197,232,.45) 51% 52%,transparent 53%)}
.world-5 .scene-mid{top:auto;height:32%;background:radial-gradient(ellipse at 20% 100%,#fff 0 27%,transparent 28%),radial-gradient(ellipse at 57% 110%,#fff 0 31%,transparent 32%),radial-gradient(ellipse at 88% 105%,#fff 0 24%,transparent 25%)}
.world-5 .scene-near{background:radial-gradient(circle at 10% 18%,rgba(255,255,255,.9) 0 2px,transparent 3px),radial-gradient(circle at 60% 24%,rgba(255,255,255,.85) 0 2px,transparent 3px),radial-gradient(circle at 83% 12%,rgba(255,255,255,.8) 0 1px,transparent 2px);background-size:130px 150px,190px 170px,160px 130px}
.world-6 .scene-far{background:radial-gradient(circle at 16% 18%,rgba(255,255,255,.95) 0 1px,transparent 2px),radial-gradient(circle at 72% 22%,rgba(255,243,207,.9) 0 1.5px,transparent 2.5px),radial-gradient(circle at 46% 56%,rgba(255,255,255,.82) 0 1px,transparent 2px);background-size:72px 83px,111px 127px,92px 103px}
.world-6 .scene-mid{top:46%;background:radial-gradient(ellipse at 20% 100%,rgba(101,81,217,.42) 0 28%,transparent 29%),radial-gradient(ellipse at 68% 105%,rgba(59,47,148,.62) 0 36%,transparent 37%)}
.world-6 .scene-near{top:auto;height:18%;background:linear-gradient(8deg,rgba(41,35,95,.72),rgba(59,47,148,.34));clip-path:polygon(0 60%,13% 47%,27% 66%,42% 41%,57% 63%,71% 45%,84% 64%,100% 48%,100% 100%,0 100%)}
.reduced-motion .scene-depth{transform:none!important;transition:none!important}.reduced-motion .scene-sparkles i{opacity:.58}

/* Tutorial boards show actual trees, illustrated owls, and the exact reason a cell is ruled out. */
.tutorial-sheet{width:min(760px,96vw)}
.tutorial-coach{display:flex;align-items:center;gap:12px}.tutorial-whiz{flex:0 0 82px;width:82px;height:96px;display:grid;place-items:center}.tutorial-whiz .whiz-svg{width:82px;max-width:none}
.tutorial-board{box-shadow:0 10px 24px rgba(41,35,95,.22),inset 0 0 0 2px rgba(255,255,255,.8)}
.mini-cell{position:relative;background:var(--mini-bg);overflow:hidden}.mini-cell:before{content:"";position:absolute;inset:0;background-image:var(--mini-pat);background-size:8px 8px;opacity:.2;pointer-events:none}.mini-cell .owl-piece{width:78%;height:78%;z-index:2}.tutorial-x{position:relative;z-index:2;color:#3b2f94;font-size:clamp(20px,5vmin,32px)}
.mini-edge-t{border-top:3px solid #3b2f94}.mini-edge-b{border-bottom:3px solid #3b2f94}.mini-edge-l{border-left:3px solid #3b2f94}.mini-edge-r{border-right:3px solid #3b2f94}
.mini-cell.reasoned:after{content:"";position:absolute;inset:5%;border:2px dashed rgba(59,47,148,calc(.36 + var(--pulse,.5)*.46));border-radius:8px;background:rgba(255,255,255,calc(.08 + var(--pulse,.5)*.14));z-index:1}.mini-cell.target{z-index:3;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px #6551d9}.mini-cell.target:after{border-style:solid;border-width:3px}
.reason-key{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:900;color:#3b2f94;background:#fff7df;border-radius:999px;padding:7px 10px;width:max-content;max-width:100%}.reason-swatch{width:24px;height:18px;border-radius:7px;border:2px dashed #6551d9;background:rgba(101,81,217,.12)}

/* Strategy Book illustrated mini boards */
.strategy-card{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:14px;align-items:center;min-height:150px}.strategy-card p{margin:5px 0;line-height:1.35}.strategy-look{font-weight:800;color:#3b2f94}.strategy-board{width:128px;height:128px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);border:4px solid #3b2f94;border-radius:14px;overflow:hidden;background:#fff}.strategy-cell{position:relative;display:grid;place-items:center;background:var(--sb);border:1px solid rgba(41,35,95,.12)}.strategy-cell:before{content:"";position:absolute;inset:0;background-image:var(--sp);opacity:.18;background-size:7px 7px}.strategy-cell.focus{box-shadow:inset 0 0 0 calc(2px + var(--pulse,.5)*2px) #6551d9;z-index:2}.strategy-cell .owl-piece{width:85%;height:85%}.strategy-x{position:relative;z-index:2;font-size:24px;font-weight:1000;color:#3b2f94}.strategy-lock{height:110px;display:grid;place-items:center;font-size:42px;border-radius:16px;background:rgba(59,47,148,.08)}

/* Winding forest map with roost stops */
.world-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#fffefa,#fff7df)}.world-section:before{content:"";position:absolute;inset:50px 0 0;pointer-events:none;opacity:.55}.world-path.world-1:before{background:radial-gradient(ellipse at 20% 100%,#bfe3a8 0 24%,transparent 25%),radial-gradient(ellipse at 70% 105%,#c8dda1 0 30%,transparent 31%)}.world-path.world-2:before{background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(89,63,43,.18) 9% 11%,transparent 11% 18%)}.world-path.world-3:before{background:linear-gradient(170deg,transparent 40%,rgba(158,216,232,.5) 41% 55%,transparent 56%)}.world-path.world-4:before{background:linear-gradient(150deg,transparent 40%,rgba(169,197,232,.46) 41% 55%,transparent 56%)}.world-path.world-5:before{background:radial-gradient(ellipse at 30% 100%,#fff 0 28%,transparent 29%),radial-gradient(ellipse at 76% 100%,#fff 0 32%,transparent 33%)}.world-path.world-6{background:linear-gradient(180deg,#3b2f94,#29235f);color:#fff}.world-path.world-6 .world-head h3,.world-path.world-6 .world-head strong{color:#fff}.world-path.world-6:before{background:radial-gradient(circle,#fff 0 1px,transparent 2px);background-size:42px 47px;opacity:.38}.world-badge{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(41,35,95,.16)}
.level-path{position:relative;display:grid!important;grid-template-columns:repeat(5,minmax(52px,1fr))!important;grid-template-rows:repeat(4,70px);gap:14px 8px;padding:10px 14px 16px;min-height:350px}.path-trail{position:absolute;inset:7px 7%;width:86%;height:92%;overflow:visible;z-index:0}.path-trail polyline{fill:none;stroke:#6551d9;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 2px 0 rgba(255,255,255,.75))}.world-6 .path-trail polyline{stroke:#fff3cf}.level-node{z-index:2;justify-self:center;align-self:center;width:56px;height:56px;min-width:56px;min-height:56px;border-radius:50%;box-shadow:0 4px 0 rgba(59,47,148,.23),0 7px 16px rgba(41,35,95,.18);display:grid;place-items:center;padding:2px}.level-node.nest{width:62px;height:62px;border-radius:44% 44% 50% 50%;background:#fff3cf;box-shadow:0 5px 0 #3b2f94,0 8px 16px rgba(41,35,95,.2)}.node-roost{font-size:15px;line-height:1}.node-stars{line-height:1}.map-tree,.map-nest{position:absolute;z-index:1;pointer-events:none;color:#3b2f94;opacity:.22;font-size:34px}.tree-a{left:2%;top:29%}.tree-b{right:3%;top:58%}.map-nest{left:44%;bottom:2%;font-size:28px}.world-6 .map-tree,.world-6 .map-nest{color:#fff3cf;opacity:.35}

.hint-layout{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:start}.hint-whiz{width:88px;height:100px;display:grid;place-items:center}.hint-whiz .whiz-svg{width:86px;max-width:none}.hint-layout .hint-card{min-height:110px}

@media(orientation:portrait){
  .board-frame{--board-size:min(calc(100vw - 8px),calc(100dvh - 238px),540px);width:var(--board-size)!important;height:var(--board-size)!important;inline-size:var(--board-size)!important;block-size:var(--board-size)!important}
}
@media(orientation:landscape) and (max-height:520px){
  .board-frame{--board-size:min(calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc(100vw - 232px - var(--safeL) - var(--safeR)),470px);width:var(--board-size)!important;height:var(--board-size)!important;inline-size:var(--board-size)!important;block-size:var(--board-size)!important;min-width:0!important}
  .tutorial-whiz{width:72px;height:82px}.tutorial-whiz .whiz-svg{width:70px}.hint-whiz{width:72px;height:82px}.hint-whiz .whiz-svg{width:70px}
  .strategy-card{grid-template-columns:minmax(0,1fr) 104px}.strategy-board{width:100px;height:100px}
}
@media(orientation:landscape) and (min-height:521px){
  .board-frame{--board-size:min(calc(100dvh - 190px),calc(100vw - 80px),620px);width:var(--board-size)!important;height:var(--board-size)!important;inline-size:var(--board-size)!important;block-size:var(--board-size)!important;min-width:0!important}
  .play-main{justify-content:center}.board-zone{flex:0 0 auto}
}
@media(max-width:680px){
  .strategy-card{grid-template-columns:minmax(0,1fr) 104px;gap:9px}.strategy-board{width:100px;height:100px}.level-path{grid-template-columns:repeat(5,minmax(44px,1fr))!important;gap:10px 4px;padding:8px 5px 12px}.level-node{width:50px;height:50px;min-width:50px;min-height:50px}.level-node.nest{width:54px;height:54px}.map-sheet .sheet-body{padding-left:8px;padding-right:8px}.hint-layout{grid-template-columns:76px minmax(0,1fr)}.hint-whiz{width:72px}.hint-whiz .whiz-svg{width:70px}
}
@media(max-width:390px) and (orientation:portrait){
  .tutorial-coach{gap:8px}.tutorial-whiz{flex-basis:72px;width:72px;height:84px}.tutorial-whiz .whiz-svg{width:70px}.tutorial-copy{font-size:14px}.mini-board{width:min(292px,84vw,45dvh)}
}
.reduced-motion .mini-cell.reasoned:after,.reduced-motion .strategy-cell.focus{transition:none}

/* Owl Whiz site layout rule (CHANGES-owl-roost-r2.md #1): keep the rule chips clear of the site's floating Back button (x 8-52, y 64-108) */
@media(max-width:900px) and (orientation:portrait),(orientation:landscape) and (max-height:520px){.play-screen .rule-strip{padding-left:48px;box-sizing:border-box}}