:root{--bg:#2B2560;--indigo:#3B2F8F;--purple:#6C5CE7;--cream:#FFF4D6;--yellow:#FFC93C;--coral:#FF7A6B;--mint:#5ED6B0;--ink:#24204d;--gap:clamp(5px,1.5vw,9px);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--cream)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none}body{touch-action:manipulation;user-select:none;-webkit-user-select:none}button{font:inherit;min-width:44px;min-height:44px;border:0;border-radius:14px;cursor:pointer;color:var(--ink);font-weight:800}button:focus-visible,#nest:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}#app{height:100dvh;padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));display:flex;flex-direction:column;max-width:1100px;margin:auto}header{height:56px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}.brand{display:flex;align-items:center;gap:8px}.brand b{display:block;font-size:18px}.brand small{display:block;opacity:.75;font-weight:700}.miniOwl{width:42px;height:42px;border-radius:50% 50% 44% 44%;background:linear-gradient(145deg,var(--purple),var(--indigo));position:relative;border:3px solid #211b55}.miniOwl:before,.miniOwl:after{content:"";position:absolute;width:13px;height:15px;top:8px;background:var(--cream);border-radius:50%}.miniOwl:before{left:6px}.miniOwl:after{right:6px}.miniOwl i{position:absolute;width:9px;height:7px;background:var(--yellow);clip-path:polygon(0 0,100% 0,50% 100%);left:14px;top:21px;z-index:2}.stats{display:flex;gap:6px}.stats>div{background:#201b50;padding:5px 10px;border-radius:12px;text-align:center;min-width:65px}.stats span{display:block;font-size:10px;opacity:.7;text-transform:uppercase;font-weight:800}.stats b{font-size:16px;color:var(--yellow)}main{flex:1;min-height:0;display:flex;justify-content:center;gap:10px}.gameWrap{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;flex:1;max-width:620px}.toolbar{display:flex;width:100%;gap:5px;margin:2px 0 6px}.toolbar button{flex:1;background:#40377c;color:white;font-size:14px;padding:0 6px}.toolbar button span{display:none}.toolbar button em{font-style:normal;background:var(--yellow);color:var(--ink);border-radius:10px;padding:1px 5px;margin-left:2px}.toolbar button[aria-pressed=true]{background:var(--mint);color:var(--ink)}.nest{width:min(100%,calc(100dvh - 154px));aspect-ratio:1;max-height:calc(100dvh - 154px);position:relative;border-radius:24px;padding:clamp(12px,3vw,20px);background:repeating-radial-gradient(ellipse at center,#9d6538 0 7px,#784726 8px 14px,#b77842 15px 20px);box-shadow:inset 0 0 0 7px #d59a59,inset 0 0 0 13px #6c3e25,0 10px 24px #15113b;touch-action:none;overflow:hidden}.grid{height:100%;display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);gap:var(--gap);background:rgba(54,31,23,.28);border-radius:14px;padding:var(--gap)}.cell{background:rgba(255,239,202,.16);border-radius:14px;position:relative;display:flex;align-items:center;justify-content:center;min-width:0}.tile{position:absolute;inset:4px;border-radius:13px;background:var(--tile,#fff4d6);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 3px 0 rgba(34,24,70,.25);animation:pop .16s ease-out;overflow:hidden}.tile.merged{animation:merge .22s ease-out}.tile .art{width:58%;height:58%;position:relative;display:flex;align-items:center;justify-content:center}.tile .num{font-weight:950;font-size:clamp(11px,3.4vw,22px);line-height:1;background:rgba(255,255,255,.72);padding:2px 7px;border-radius:999px;z-index:5}.tile .next{font-size:clamp(7px,2vw,11px);font-weight:900;margin-top:2px;opacity:.72}.egg{width:66%;height:82%;background:#fff9e7;border:3px solid #554b7d;border-radius:50% 50% 45% 45%}.cracked:after{content:"";position:absolute;width:42%;height:38%;top:29%;left:29%;background:linear-gradient(135deg,transparent 42%,#66577d 43% 52%,transparent 53%) }.owlArt{width:82%;height:78%;border-radius:48% 48% 42% 42%;background:linear-gradient(145deg,var(--purple),var(--indigo));border:2px solid #302668;position:relative}.owlArt:before,.owlArt:after{content:"";position:absolute;width:35%;height:38%;top:17%;background:var(--cream);border-radius:50%;box-shadow:inset 0 0 0 1px #ddd0ad}.owlArt:before{left:14%}.owlArt:after{right:14%}.eyes{position:absolute;inset:0}.eyes:before,.eyes:after{content:"";position:absolute;width:9%;aspect-ratio:1;background:#24204d;border-radius:50%;top:31%;z-index:3}.eyes:before{left:31%}.eyes:after{right:31%}.owlArt i{position:absolute;width:18%;height:15%;left:41%;top:45%;background:var(--yellow);clip-path:polygon(0 0,100% 0,50% 100%);z-index:4}.owlArt b{position:absolute;width:48%;height:32%;left:26%;bottom:6%;background:var(--cream);border-radius:50% 50% 42% 42%;opacity:.95}.owlArt .cap{position:absolute;top:-12%;left:12%;width:76%;height:26%;background:#24204d;clip-path:polygon(0 55%,50% 0,100% 55%,50% 100%)}.owlArt .crown{position:absolute;top:-24%;left:19%;width:62%;height:35%;background:var(--yellow);clip-path:polygon(0 100%,0 20%,25% 55%,50% 0,75% 55%,100% 20%,100% 100%)}#mergeText{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.7);background:#fff;color:var(--indigo);padding:8px 14px;border-radius:999px;font-weight:950;font-size:clamp(16px,5vw,27px);opacity:0;pointer-events:none;z-index:20;white-space:nowrap}#mergeText.show{animation:sum .75s ease}.tip{font-size:12px;font-weight:800;opacity:.8;padding-top:6px}.ladder{display:none;width:180px;background:#201b50;border-radius:18px;padding:10px;overflow:hidden}.ladder h2{font-size:14px;margin:0 0 5px;color:var(--yellow)}#ladderList{display:flex;flex-direction:column;gap:2px}.ladderItem{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;opacity:.35;padding:3px 5px;border-radius:8px}.ladderItem.reached{opacity:1;background:#393172}.ladderItem .dot{width:17px;height:17px;border-radius:50%;background:var(--mint);display:grid;place-items:center;color:var(--ink);font-size:8px}.arrowPad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,44px);gap:4px;margin-top:6px}.arrowPad button{background:#40377c;color:white}.arrowPad button[data-dir=up]{grid-column:2}.arrowPad button[data-dir=left]{grid-column:1;grid-row:2}.arrowPad button[data-dir=down]{grid-column:2;grid-row:2}.arrowPad button[data-dir=right]{grid-column:3;grid-row:2}.hidden{display:none!important}.overlay{position:fixed;inset:0;background:rgba(24,18,69,.84);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));z-index:100;overflow:auto}.overlay.show{display:flex}.modal{width:min(94vw,480px);max-height:96dvh;overflow:auto;background:#fff8e7;color:var(--ink);border-radius:28px;padding:clamp(16px,4vw,28px);text-align:center;box-shadow:0 20px 70px #120d3d}.modal h1{margin:4px 0;font-size:clamp(28px,8vw,42px);color:var(--indigo)}.modal h2{color:var(--indigo);margin:8px 0}.teach{font-weight:850;margin:6px auto 14px}.heroOwl{width:96px;height:92px;margin:0 auto;position:relative;background:linear-gradient(145deg,var(--purple),var(--indigo));border-radius:50% 50% 43% 43%;animation:fly 2.4s ease-in-out infinite}.heroOwl .face{position:absolute;left:14px;top:15px;width:68px;height:43px;background:var(--cream);border-radius:50%}.heroOwl .eye{position:absolute;width:21px;height:21px;background:white;border:5px solid #27204f;border-radius:50%;top:8px}.heroOwl .e1{left:9px}.heroOwl .e2{right:9px}.heroOwl .beak{position:absolute;width:15px;height:13px;left:27px;top:28px;background:var(--yellow);clip-path:polygon(0 0,100% 0,50% 100%)}.heroOwl .belly{position:absolute;width:48px;height:39px;left:24px;bottom:4px;background:var(--cream);border-radius:50% 50% 42% 42%}.heroOwl .wing{position:absolute;width:31px;height:47px;top:35px;background:var(--purple);border-radius:70% 20% 70% 30%;z-index:-1}.heroOwl .wing:after{content:"";position:absolute;width:12px;height:17px;bottom:0;background:var(--coral);border-radius:50%}.heroOwl .l{left:-18px;transform:rotate(35deg)}.heroOwl .r{right:-18px;transform:scaleX(-1) rotate(35deg)}.heroOwl .r:after{background:var(--mint)}.modePick{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode{background:#e8e1ff;padding:10px}.mode.active{background:var(--mint);box-shadow:inset 0 0 0 3px var(--indigo)}.mode b,.mode small{display:block}.mode small{font-size:11px;margin-top:3px}.how{background:#fff;border:2px dashed #c9baf4;border-radius:16px;padding:10px;margin:12px 0;text-align:left;font-size:13px}.how p{margin:5px 0}.primary,.secondary{width:100%;padding:11px 16px;margin-top:7px}.primary{background:var(--yellow);box-shadow:0 4px 0 #d59d18}.secondary{background:#ded5ff;color:var(--indigo)}.compact{max-width:390px}.pauseOwl{font-size:42px;color:var(--indigo)}.celebrateOwl{font-size:58px}#toast{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-20px);width:min(90vw,430px);background:#fff8e7;color:var(--ink);padding:10px 14px;border-radius:16px;box-shadow:0 8px 28px #15113b;text-align:center;font-weight:850;opacity:0;pointer-events:none;z-index:80}#toast.show{animation:toast 2.8s ease}.tile.v2{--tile:#fff4d6}.tile.v4{--tile:#ffe8b2}.tile.v8{--tile:#ffd990}.tile.v16{--tile:#baf0de}.tile.v32{--tile:#8de2c7}.tile.v64{--tile:#bfc0ff}.tile.v128{--tile:#a59bf5}.tile.v256{--tile:#ffb6aa}.tile.v512{--tile:#ff9283}.tile.v1024{--tile:#d9dde8}.tile.v2048{--tile:#ffd24d}.tile.v4096{--tile:#fff08a}@keyframes pop{from{transform:scale(.5);opacity:.4}}@keyframes merge{50%{transform:scale(1.14)}}@keyframes sum{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}20%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-65%) scale(1)}}@keyframes toast{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}12%,82%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0}}@keyframes fly{50%{transform:translateY(-6px) rotate(2deg)}}
@media(min-width:760px){.ladder{display:block}.toolbar button span{display:inline}.nest{width:min(100%,calc(100dvh - 154px),600px)}.tip{font-size:13px}}@media(max-height:590px) and (orientation:landscape){#app{padding-top:4px;padding-bottom:4px}header{height:44px}.brand small{display:none}main{gap:6px}.toolbar{position:absolute;right:8px;top:4px;width:auto;z-index:4}.toolbar button{flex:none;width:46px}.toolbar button span,.toolbar button em{display:none}.nest{height:calc(100dvh - 56px);width:auto;max-height:none}.tip{display:none}.ladder{height:calc(100dvh - 56px);overflow:auto}.arrowPad{position:absolute;right:8px;bottom:8px}.modal{max-width:560px}.heroOwl{width:70px;height:67px}.modePick{max-width:420px;margin:auto}.how{margin:7px 0;padding:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.motionLayer{position:absolute;inset:0;pointer-events:none;z-index:12}.motionLayer.active{display:block}.grid.tiles-hidden .tile{visibility:hidden}.movingTile{position:absolute;inset:auto;margin:0;animation:none!important;transition:transform 120ms ease-in-out;will-change:transform;pointer-events:none}.movingTile.go{transform:translate(var(--tx),var(--ty))}.endWhiz{margin-bottom:10px;transform:scale(.82)}
@media(prefers-reduced-motion:reduce){.movingTile{transition:none!important}}

/* Short phone landscape overlays: keep primary actions visible without scrolling. */
@media (orientation:landscape) and (max-height:520px){
  .overlay{
    padding:8px 8px 8px 48px;
    overflow:hidden;
  }
  .overlay .modal{
    max-height:calc(100dvh - 16px);
    overflow:hidden;
    padding:12px 16px;
    border-radius:22px;
  }

  #startModal{
    width:min(650px,calc(100vw - 64px));
    display:grid;
    grid-template-columns:minmax(150px,.9fr) minmax(250px,1.25fr);
    grid-template-areas:
      "owl modes"
      "title modes"
      "tagline play"
      "tagline resume";
    column-gap:18px;
    row-gap:5px;
    align-items:center;
  }
  #startModal .heroOwl{
    grid-area:owl;
    width:66px;
    height:63px;
    margin:0 auto;
  }
  #startModal h1{
    grid-area:title;
    margin:0;
    font-size:clamp(25px,6.2vh,32px);
    line-height:1;
  }
  #startModal .teach{
    grid-area:tagline;
    margin:0;
    font-size:12px;
    line-height:1.25;
    align-self:start;
  }
  #startModal .modePick{
    grid-area:modes;
    width:100%;
    max-width:none;
    margin:0;
    gap:7px;
  }
  #startModal .mode{
    min-height:58px;
    padding:7px 8px;
  }
  #startModal .mode small{
    font-size:10px;
    line-height:1.15;
  }
  #startModal .how{display:none;}
  #startModal #play{
    grid-area:play;
    min-height:44px;
    margin-top:2px;
    padding:8px 12px;
  }
  #startModal #resume{
    grid-area:resume;
    min-height:44px;
    margin-top:2px;
    padding:8px 12px;
  }

  #pauseOverlay .modal,
  #endOverlay .modal,
  #confirmOverlay .modal{
    width:min(430px,calc(100vw - 64px));
    padding:10px 16px 12px;
  }
  #pauseOverlay .pauseOwl,
  #confirmOverlay .pauseOwl{font-size:30px;line-height:1;}
  #endOverlay .endWhiz{
    width:58px;
    height:56px;
    margin:0 auto 2px;
    transform:none;
  }
  #pauseOverlay h2,
  #endOverlay h2,
  #confirmOverlay h2{margin:3px 0;font-size:22px;line-height:1.05;}
  #pauseOverlay p,
  #endOverlay p,
  #confirmOverlay p{margin:4px 0;font-size:13px;line-height:1.2;}
  #pauseOverlay button,
  #endOverlay button,
  #confirmOverlay button{
    min-height:44px;
    padding:7px 12px;
    margin-top:5px;
  }
}