:root{--bg:#2B2560;--ind:#3B2F8F;--vio:#6C5CE7;--cream:#FFF4D6;--yellow:#FFC93C;--coral:#FF7A6B;--mint:#5ED6B0;--ink:#25204f;--panel:#fffaf0;--grey:#817aa8;--sheet-h:clamp(190px,38dvh,230px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,#app{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--cream)}
body{overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}
button{font:inherit;border:0;border-radius:16px;min-height:44px;cursor:pointer;font-weight:800;color:var(--ink);background:var(--cream);box-shadow:0 4px 0 #17133d}
button:focus-visible{outline:4px solid white;outline-offset:3px}.primary{background:var(--yellow)}
#world{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.hud{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));display:flex;align-items:center;gap:8px;z-index:3;pointer-events:none}
.hud>div,.hud>button{pointer-events:auto;background:#17133dcc;border:2px solid #756bd0;border-radius:14px;padding:7px 10px;color:white;box-shadow:none;min-height:44px}.hud small{opacity:.8}
.health{display:grid!important;grid-template-columns:auto 72px 28px;align-items:center;gap:6px;flex:1;max-width:330px;font-size:12px}.meter{height:10px;background:#484173;border-radius:9px;overflow:hidden}.meter i{display:block;height:100%;width:50%;background:var(--mint);transition:width .4s}
.sun{position:absolute;z-index:2;width:84px;height:84px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 8px #ffc93c33,0 7px 0 #d99c12;display:grid;place-items:center;touch-action:none}.sun span{font-size:45px;line-height:35px}.sun small{font-size:11px}.sun.pop{animation:pop .12s}
.bottom{position:absolute;z-index:4;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));display:flex;gap:8px}.bottom button{background:#17133dcc;color:white;box-shadow:none;border:2px solid #756bd0;padding:8px 12px}
.shop{position:absolute;z-index:3;background:#17133ee;border:2px solid #756bd0;backdrop-filter:blur(8px);overflow:hidden}.shopHead{height:52px;display:grid;grid-template-columns:1fr auto;align-items:end;padding:15px 12px 8px;position:relative}.shopHead>b{justify-self:start}.shopHead>span:last-child{color:var(--mint);font-size:12px;justify-self:end}.grab{position:absolute;top:6px;left:50%;width:46px;height:5px;border-radius:999px;background:#a8a0e5;transform:translateX(-50%)}
.shopItems{display:flex;gap:8px;padding:6px 8px 10px;overflow:auto;scrollbar-width:none}.shopItems::-webkit-scrollbar{display:none}.item{flex:0 0 126px;min-height:74px;padding:7px;background:#fffaf0;color:var(--ink);box-shadow:none;border:3px solid transparent;text-align:left;position:relative}.item:disabled{opacity:.48}.item.sel{border-color:var(--yellow)}.item .ico{font-size:22px}.item .name{font-size:12px;display:block}.item .cost{font-size:11px;color:var(--ind)}.item .count{position:absolute;right:7px;top:7px;background:var(--mint);padding:2px 6px;border-radius:9px;font-size:10px}.item.locked{filter:saturate(.3)}
#toast{position:absolute;z-index:5;left:50%;transform:translateX(-50%);max-width:min(88vw,480px);padding:9px 13px;border-radius:14px;background:#fffaf0;color:var(--ink);font-weight:700;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;text-align:center}#toast.on{opacity:1}
.modal{position:absolute;inset:0;z-index:10;background:#17133de8;display:none;place-items:center;padding:18px max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));touch-action:pan-y}.modal.show{display:grid}.confirmModal{z-index:20}
.card{width:min(520px,100%);max-height:92dvh;overflow:auto;background:var(--panel);color:var(--ink);border-radius:28px;padding:22px;text-align:center;border:4px solid #8b7df1;box-shadow:0 14px 40px #0006}.card h1,.card h2{margin:4px 0 10px;color:var(--ind)}.card p{line-height:1.4}.card button{width:100%;margin-top:9px}.card small{display:block;margin-top:13px;color:#696286}.teach{font-weight:900;background:#e9e5ff;padding:10px;border-radius:14px}.controls{background:#fff0bf;padding:9px;border-radius:14px;font-weight:800}.miniOwl,.bigOwl{font-size:52px}.factCard{text-align:left}.factCard h2{text-align:center}#factsList{display:grid;gap:8px}.fact{padding:10px;border-radius:14px;background:#eeeaff}.fact.lock{opacity:.45}.fact b{display:block;color:var(--ind)}.confirmCard{max-width:430px}
@keyframes pop{50%{transform:translate(-50%,-50%) scale(.88)}}
@media (orientation:portrait){
  .shop{left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom));height:var(--sheet-h);border-radius:22px 22px 0 0}
  .shopItems{height:calc(100% - 52px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(58px,auto);gap:7px;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;padding:5px 8px 12px}
  .item{min-width:0;width:100%;height:auto;min-height:58px;flex:none;padding:5px 6px}.item .ico{font-size:18px}.item .name{font-size:11px}.item .cost{font-size:10px}.item .count{right:5px;top:5px}
  .sun{left:50%;top:28dvh;transform:translate(-50%,-50%)}
  #toast{top:auto;bottom:calc(var(--sheet-h) + 70px + env(safe-area-inset-bottom))}
  .bottom{right:max(8px,env(safe-area-inset-right));justify-content:center}.bottom button{flex:1;max-width:180px}
}
@media (orientation:portrait) and (max-width:350px){.shopItems{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(60px,auto)}.item{min-height:60px}}
@media (orientation:landscape){.shop{top:64px;right:max(8px,env(safe-area-inset-right));bottom:8px;width:min(260px,32vw);border-radius:22px}.shopItems{height:calc(100% - 52px);display:grid;grid-template-columns:1fr 1fr;overflow:auto;touch-action:pan-y}.item{min-width:0;width:100%;height:84px}.bottom{right:calc(min(260px,32vw) + 18px);left:auto}.sun{left:4%;top:22%}#toast{top:76px;left:calc((100% - min(260px,32vw))/2);max-width:calc(100% - min(260px,32vw) - 32px)}}
@media(max-width:380px){.hud{gap:4px}.hud>div,.hud>button{padding:5px 7px}.health span{display:none}.health{grid-template-columns:1fr 26px}.sun{width:72px;height:72px}.sun span{font-size:38px}.hud small{display:none}}
@media(max-height:590px) and (orientation:portrait){:root{--sheet-h:clamp(188px,38dvh,216px)}.shopHead{height:48px;padding-top:13px}.shopItems{height:calc(100% - 48px)}.sun{top:28dvh}#toast{font-size:12px;padding:7px 10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Short phone landscape: keep the welcome card fully visible and clear of the site's left Back tab. */
@media (orientation:landscape) and (max-height:520px){
  #start{padding:8px max(10px,env(safe-area-inset-right)) 8px max(48px,env(safe-area-inset-left))}
  #start .card{
    width:min(760px,100%);
    max-height:calc(100dvh - 16px);
    overflow:hidden;
    padding:10px 14px;
    border-radius:20px;
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-areas:
      "logo controls"
      "teach intro"
      "privacy start";
    column-gap:14px;
    row-gap:6px;
    align-items:center;
    text-align:left;
  }
  #start .logo{grid-area:logo;display:flex;align-items:center;justify-content:center;gap:8px}
  #start .miniOwl{font-size:34px;line-height:1}
  #start .card h1{font-size:clamp(22px,4.6vw,30px);margin:0}
  #start .teach{grid-area:teach;margin:0;padding:7px 9px;font-size:12px;line-height:1.25;text-align:center}
  #start .controls{grid-area:controls;margin:0;padding:7px 9px;font-size:12px;line-height:1.25;text-align:center}
  #start .card>p:not(.teach){grid-area:intro;margin:0;font-size:12px;line-height:1.28}
  #start #startBtn{grid-area:start;margin:0;min-height:44px}
  #start .card>small{grid-area:privacy;margin:0;font-size:10px;line-height:1.2;text-align:center}
}