:root{--u:calc(min(100vw,177.7dvh)/1672);--ink:#2a1a0e;--gold:#ffc43a;--panel:rgba(24,26,30,.82);--edge:rgba(255,255,255,.14)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#7fb5e6;overflow:hidden;font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#fff;user-select:none;-webkit-user-select:none}
body.embed-mode{height:100vh;height:100dvh;overflow:hidden}
#stage{position:fixed;inset:0}
#stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,rgba(255,230,160,.05) 0%,rgba(255,230,160,0) 55%,rgba(20,40,10,.38) 100%)}
#c{width:100%;height:100%;display:block;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
#loading{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:linear-gradient(#7fc1f2,#cfe8c0);transition:opacity .5s}
#loading.done{opacity:0;pointer-events:none}
.ld-card{text-align:center;color:#2a1a0e;font-weight:700}
.ld-paw{font-size:56px;animation:bob 1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.ld-bar{width:min(260px,60vw);height:10px;border-radius:9px;background:#fff8;margin:10px auto 0;overflow:hidden}
.ld-bar i{display:block;height:100%;width:5%;background:#ff9d1c;border-radius:9px;transition:width .2s}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hud>*{pointer-events:auto}
#hud #toast,#hud #logo{pointer-events:none}

/* logo */
#logo{position:absolute;left:calc(var(--u)*18);top:calc(var(--u)*20);width:calc(var(--u)*640);height:calc(var(--u)*290);filter:drop-shadow(0 calc(var(--u)*6) calc(var(--u)*10) rgba(0,0,0,.45))}
#logo .wood{position:absolute;left:calc(var(--u)*50);top:calc(var(--u)*120);width:calc(var(--u)*560);height:calc(var(--u)*165);border-radius:calc(var(--u)*34);transform:rotate(-3deg);background:repeating-linear-gradient(97deg,#6b4220 0 calc(var(--u)*14),#7a4c26 calc(var(--u)*14) calc(var(--u)*30),#5e3a1b calc(var(--u)*30) calc(var(--u)*38)),#6b4220;border:calc(var(--u)*7) solid #4a2d14;box-shadow:inset 0 0 calc(var(--u)*18) rgba(0,0,0,.45)}
#logo b{position:absolute;font-family:"Arial Rounded MT Bold","Nunito","Trebuchet MS",system-ui,sans-serif;font-weight:900;letter-spacing:.01em;line-height:1;white-space:nowrap}
#logo b u,#logo b s{text-decoration:none;display:block}
#logo b u{position:absolute;left:0;top:0;color:#3a1d08;-webkit-text-stroke:calc(var(--u)*16) #3a1d08;text-shadow:0 calc(var(--u)*9) 0 #3a1d08,0 calc(var(--u)*14) calc(var(--u)*10) rgba(0,0,0,.5)}
#logo b s{position:relative}
#logo .l-dog{left:calc(var(--u)*128);top:calc(var(--u)*10);font-size:calc(var(--u)*200);transform:rotate(-2deg)}
#logo .l-dog s{background:linear-gradient(#ffe066 8%,#ffb21c 55%,#ff8a00 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#logo .l-sim{left:calc(var(--u)*76);top:calc(var(--u)*152);font-size:calc(var(--u)*112);transform:rotate(-2deg)}
#logo .l-sim u{color:#122a6b;-webkit-text-stroke:calc(var(--u)*15) #122a6b;text-shadow:0 calc(var(--u)*8) 0 #122a6b,0 calc(var(--u)*12) calc(var(--u)*8) rgba(0,0,0,.5)}
#logo .l-sim s{background:linear-gradient(#7fdcff 8%,#2e8cf5 55%,#1c63d8 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#logo .leaf{position:absolute;font-size:calc(var(--u)*54);filter:saturate(1.3)}
#logo .l1{left:calc(var(--u)*48);top:calc(var(--u)*92)}#logo .l2{left:calc(var(--u)*540);top:calc(var(--u)*118);transform:scaleX(-1)}
#logo .pawm{position:absolute;left:calc(var(--u)*78);top:calc(var(--u)*196);font-size:calc(var(--u)*46);opacity:.5}
#logo .bone-ic{position:absolute;left:calc(var(--u)*18);top:calc(var(--u)*166);font-size:calc(var(--u)*56);transform:rotate(-20deg)}

/* top bar */
#topbar{position:absolute;right:calc(var(--u)*14);top:calc(var(--u)*16);display:flex;gap:calc(var(--u)*14);align-items:stretch}
.pill{display:flex;align-items:center;gap:calc(var(--u)*12);height:calc(var(--u)*84);padding:0 calc(var(--u)*16);background:linear-gradient(#34383f,#1d2025);border:calc(var(--u)*3) solid rgba(255,255,255,.18);border-radius:calc(var(--u)*20);box-shadow:0 calc(var(--u)*5) calc(var(--u)*10) rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);font-weight:800}
.pill b{font-size:calc(var(--u)*30);line-height:1.05;display:block}.pill span{display:block;font-size:calc(var(--u)*26);font-weight:700;line-height:1.1}
.sun{width:calc(var(--u)*56);height:calc(var(--u)*56)}
#p-day{min-width:calc(var(--u)*214)}
#p-coin{min-width:calc(var(--u)*222)}#p-coin b{font-size:calc(var(--u)*38);flex:1}
.coin{width:calc(var(--u)*48);height:calc(var(--u)*48);border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe98a,#f5a912 70%,#c77a05);border:calc(var(--u)*3) solid #ffd75a;display:grid;place-items:center;font-style:normal;font-weight:900;color:#a85d00;font-size:calc(var(--u)*28);box-shadow:inset 0 0 0 calc(var(--u)*3) rgba(255,255,255,.25)}
.plus{width:calc(var(--u)*52);height:calc(var(--u)*52);border-radius:calc(var(--u)*13);border:calc(var(--u)*3) solid #c8f0b0;background:linear-gradient(#4be25c,#18a032);font-size:calc(var(--u)*46);line-height:1;font-weight:900;padding:0;color:#fff}
#p-lvl{min-width:calc(var(--u)*240)}
.bone-img{width:calc(var(--u)*78);height:calc(var(--u)*64);object-fit:contain}
.lv{flex:1}.lv b{font-size:calc(var(--u)*27)}
.xpbar{display:block;height:calc(var(--u)*19);margin-top:calc(var(--u)*4);border-radius:calc(var(--u)*10);background:rgba(255,255,255,.14);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.xpbar i{display:block;height:100%;width:60%;background:linear-gradient(#6df06d,#22b52f);border-radius:calc(var(--u)*10)}
.pill.sq{width:calc(var(--u)*84);justify-content:center;padding:0}.pill.sq svg{width:calc(var(--u)*50);height:calc(var(--u)*50)}

/* stats */
#stats{position:absolute;left:calc(var(--u)*16);top:calc(var(--u)*348);width:calc(var(--u)*256);padding:calc(var(--u)*10) calc(var(--u)*12) calc(var(--u)*6) calc(var(--u)*12);background:var(--panel);border:calc(var(--u)*3) solid var(--edge);border-radius:calc(var(--u)*26);box-shadow:0 calc(var(--u)*8) calc(var(--u)*18) rgba(0,0,0,.45);backdrop-filter:blur(3px);cursor:pointer}
.st{display:flex;align-items:center;gap:calc(var(--u)*12);height:calc(var(--u)*64)}
.st .ic{width:calc(var(--u)*54);height:calc(var(--u)*54);flex:none;display:grid;place-items:center}
.st .ic svg,.st .ic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.st .tx{flex:1;min-width:0}.st .nm{font-size:calc(var(--u)*21);font-weight:800;line-height:1.1}
.bar{height:calc(var(--u)*19);border-radius:calc(var(--u)*10);background:rgba(255,255,255,.16);overflow:hidden;margin-top:calc(var(--u)*5);border:1px solid rgba(255,255,255,.1)}
.bar i{display:block;height:100%;border-radius:calc(var(--u)*10);transition:width .4s,background .4s;box-shadow:inset 0 calc(var(--u)*4) 0 rgba(255,255,255,.3)}

/* tasks board */
#tasks{position:absolute;right:calc(var(--u)*16);top:calc(var(--u)*128);width:calc(var(--u)*330);padding:calc(var(--u)*36) calc(var(--u)*26) calc(var(--u)*16);background:linear-gradient(#f6eed5,#ecdfbd);color:#2a1a0e;border:calc(var(--u)*12) solid #8a5a2c;border-radius:calc(var(--u)*10);box-shadow:0 calc(var(--u)*10) calc(var(--u)*20) rgba(0,0,0,.5),inset 0 0 calc(var(--u)*30) rgba(120,80,30,.25);transform:rotate(1.4deg)}
#tasks .clip{position:absolute;left:50%;top:calc(var(--u)*-44);width:calc(var(--u)*96);height:calc(var(--u)*50);margin-left:calc(var(--u)*-48);background:linear-gradient(#a9743a,#7b4d22);border-radius:calc(var(--u)*14) calc(var(--u)*14) 0 0;display:grid;place-items:center;font-size:calc(var(--u)*34);border:calc(var(--u)*3) solid #5a3817}
#tasks h3{margin:0 0 calc(var(--u)*10);text-align:center;font-size:calc(var(--u)*33);font-weight:900;font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif}
#task-list{list-style:none;margin:0;padding:0}
#task-list li{display:flex;align-items:center;gap:calc(var(--u)*12);height:calc(var(--u)*53);font-size:calc(var(--u)*19.5);font-weight:800;cursor:pointer}
#task-list li .ti{width:calc(var(--u)*50);height:calc(var(--u)*50);flex:none;display:grid;place-items:center}
#task-list li .ti img{width:100%;height:100%;object-fit:contain}
#task-list li .tn{flex:1;line-height:1.05}
#task-list li .ck{width:calc(var(--u)*36);height:calc(var(--u)*36);border-radius:calc(var(--u)*8);border:calc(var(--u)*3) solid #b8a584;background:#f3ead0;display:grid;place-items:center;font-size:calc(var(--u)*30);color:#fff;font-weight:900;flex:none}
#task-list li.done .ck{background:linear-gradient(#35c84a,#14902a);border-color:#0e6d1f}
#task-list li small{display:block;font-size:calc(var(--u)*15);font-weight:700;color:#6b5a3a}
.tasks-toggle{display:none}

/* action bar */
#actions{position:absolute;left:0;right:0;bottom:calc(var(--u)*34);display:flex;justify-content:center;gap:calc(var(--u)*20);padding:0 calc(var(--u)*80)}
.ab-btn{width:calc(var(--u)*140);height:calc(var(--u)*140);flex:none;border-radius:calc(var(--u)*24);background:linear-gradient(#3a3d44,#1e2126);border:calc(var(--u)*5) solid #8a5a2c;border-color:#a8703a #7a4d22 #6a4119 #a8703a;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:calc(var(--u)*6) 0 calc(var(--u)*8);box-shadow:0 calc(var(--u)*8) calc(var(--u)*14) rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.15);font-weight:900;font-size:calc(var(--u)*27);position:relative;transition:transform .12s,filter .12s}
.ab-btn img{width:calc(var(--u)*100);height:calc(var(--u)*90);object-fit:contain;margin-top:calc(var(--u)*-2);filter:drop-shadow(0 calc(var(--u)*4) calc(var(--u)*3) rgba(0,0,0,.45))}
.ab-btn:hover{transform:translateY(calc(var(--u)*-5));filter:brightness(1.15)}
.ab-btn:active{transform:translateY(0) scale(.97)}
.ab-btn.on{box-shadow:0 0 0 calc(var(--u)*5) #ffd23c,0 0 calc(var(--u)*24) #ffb41e}
.ab-btn .ph{font-size:calc(var(--u)*60);line-height:1.2}
.ab-btn:disabled{filter:grayscale(.8) brightness(.7);cursor:not-allowed}
#toast{position:absolute;left:50%;top:calc(var(--u)*130);transform:translate(-50%,-14px);padding:calc(var(--u)*14) calc(var(--u)*30);border-radius:calc(var(--u)*30);background:rgba(20,22,26,.9);border:calc(var(--u)*3) solid var(--gold);font-size:calc(var(--u)*30);font-weight:800;opacity:0;transition:.3s;max-width:70vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
#actbar{position:absolute;left:50%;bottom:calc(var(--u)*195);transform:translateX(-50%);display:none;align-items:center;gap:calc(var(--u)*16);padding:calc(var(--u)*10) calc(var(--u)*22);background:var(--panel);border:calc(var(--u)*3) solid var(--edge);border-radius:calc(var(--u)*30);font-size:calc(var(--u)*26);font-weight:800;white-space:nowrap}
#actbar.show{display:flex}
.ab{display:block;width:calc(var(--u)*260);height:calc(var(--u)*18);border-radius:10px;background:rgba(255,255,255,.18);overflow:hidden}.ab i{display:block;height:100%;width:0;background:linear-gradient(#ffd23c,#ff9d1c)}
#act-next{background:linear-gradient(#ffb43a,#f08a10);color:#2a1a0e;border:0;border-radius:calc(var(--u)*14);padding:calc(var(--u)*5) calc(var(--u)*18);font-size:calc(var(--u)*24);font-weight:900}
#act-next[hidden]{display:none}
#act-cancel{background:#6b2a22;border:1px solid #c45;border-radius:calc(var(--u)*14);padding:calc(var(--u)*4) calc(var(--u)*16);font-size:calc(var(--u)*22)}

/* modal */
#modal{position:fixed;inset:0;z-index:20;background:rgba(10,14,20,.55);display:flex;align-items:center;justify-content:center;padding:12px;backdrop-filter:blur(2px)}
#modal[hidden]{display:none}
.m-card{position:relative;width:min(760px,100%);max-height:min(92dvh,760px);overflow:auto;background:linear-gradient(#2a2d33,#1b1d22);border:3px solid #8a5a2c;border-radius:22px;padding:22px 24px;box-shadow:0 18px 50px rgba(0,0,0,.6);font-size:16px;line-height:1.45}
.m-x{position:absolute;right:10px;top:8px;width:38px;height:38px;border-radius:50%;border:0;background:#3b3f47;font-size:26px;line-height:1}
.m-card h2{margin:0 0 4px;font-size:24px;color:#ffd23c;font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif}
.m-card h3{margin:16px 0 6px;font-size:18px;color:#9fd8ff}
.m-sub{color:#b9c0cc;font-size:14px;margin:0 0 12px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.opt{background:#33373f;border:2px solid #4b505a;border-radius:14px;padding:10px 12px;text-align:left;display:flex;gap:10px;align-items:center}
.opt:hover:not(:disabled){border-color:#ffd23c;background:#3c414b}
.opt:disabled{opacity:.45;cursor:not-allowed}
.opt img,.opt .em{width:46px;height:46px;object-fit:contain;font-size:36px;flex:none;text-align:center}
.opt b{display:block;font-size:16px}.opt small{display:block;color:#b9c0cc;font-size:12.5px;line-height:1.3}
.price{margin-left:auto;font-weight:900;color:#ffd23c;white-space:nowrap;font-size:15px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0}
.btn{background:linear-gradient(#ffb43a,#f08a10);color:#2a1a0e;border:0;border-radius:12px;padding:9px 16px;font-weight:900}
.btn.alt{background:#3b3f47;color:#fff}.btn:disabled{opacity:.5}
.tabs{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}.tabs button{background:#33373f;border:0;border-radius:10px;padding:7px 14px;font-weight:700}.tabs button.on{background:#ffb43a;color:#2a1a0e}
.mbar{height:12px;border-radius:7px;background:#ffffff22;overflow:hidden;min-width:90px;flex:1}.mbar i{display:block;height:100%;background:linear-gradient(#6df06d,#22b52f)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin:8px 0}
.kv div{background:#272a30;border-radius:10px;padding:8px 10px}.kv b{display:block;font-size:19px;color:#fff}.kv span{font-size:12px;color:#aab2c0}
canvas.plot{width:100%;height:190px;background:#20232a;border-radius:12px;display:block}
.chk{display:flex;gap:8px;font-size:13.5px;padding:5px 0;border-bottom:1px solid #ffffff14}.chk i{font-style:normal;font-weight:900;color:#5be16b}.chk i.bad{color:#ff6b6b}
details.sci{background:#23262c;border-radius:12px;padding:8px 12px;margin:8px 0}details.sci summary{cursor:pointer;font-weight:800;color:#ffd23c}
code,.eq{font-family:"JetBrains Mono",Consolas,monospace;background:#16181c;border-radius:6px;padding:1px 6px;color:#ffe9b0;font-size:13px}
.eq{display:block;margin:6px 0;padding:6px 10px;overflow-x:auto}
input[type=range]{width:100%;accent-color:#ffb43a}
label.sl{display:block;font-size:13.5px;margin:6px 0}label.sl b{color:#ffd23c}
select{background:#33373f;color:#fff;border:2px solid #4b505a;border-radius:10px;padding:6px 8px;font:inherit}

@media (max-width:760px){
  :root{--u:calc(100vw/430)}
  #logo{left:calc(var(--u)*8);top:calc(var(--u)*58);width:calc(var(--u)*200);height:calc(var(--u)*80)}
  #logo .wood{left:calc(var(--u)*14);top:calc(var(--u)*30);width:calc(var(--u)*176);height:calc(var(--u)*46);border-width:calc(var(--u)*3);border-radius:calc(var(--u)*12)}
  #logo .l-dog{left:calc(var(--u)*40);top:calc(var(--u)*0);font-size:calc(var(--u)*56)}
  #logo b u{-webkit-text-stroke:calc(var(--u)*5) #3a1d08;text-shadow:0 calc(var(--u)*2) 0 #3a1d08}
  #logo .l-sim{left:calc(var(--u)*22);top:calc(var(--u)*43);font-size:calc(var(--u)*32)}
  #logo .l-sim u{-webkit-text-stroke:calc(var(--u)*5) #122a6b;text-shadow:0 calc(var(--u)*2) 0 #122a6b}
  #logo .leaf,#logo .pawm,#logo .bone-ic{display:none}
  #topbar{left:calc(var(--u)*6);right:calc(var(--u)*6);top:calc(var(--u)*6);gap:calc(var(--u)*5)}
  .pill{height:calc(var(--u)*46);padding:0 calc(var(--u)*7);gap:calc(var(--u)*5);border-radius:calc(var(--u)*12)}
  .pill b{font-size:calc(var(--u)*15)}.pill span{font-size:calc(var(--u)*13)}
  .sun{width:calc(var(--u)*28);height:calc(var(--u)*28)}
  #p-day{min-width:0}#p-coin{min-width:0;flex:1}#p-coin b{font-size:calc(var(--u)*17)}#p-lvl{min-width:0;flex:1.1}
  .coin{width:calc(var(--u)*26);height:calc(var(--u)*26);font-size:calc(var(--u)*15)}
  .plus{width:calc(var(--u)*26);height:calc(var(--u)*26);font-size:calc(var(--u)*22);border-radius:calc(var(--u)*7)}
  .bone-img{width:calc(var(--u)*30);height:calc(var(--u)*26)}.lv b{font-size:calc(var(--u)*13)}.xpbar{height:calc(var(--u)*9)}
  .pill.sq{width:calc(var(--u)*40)}.pill.sq svg{width:calc(var(--u)*24);height:calc(var(--u)*24)}
  #stats{left:calc(var(--u)*6);top:calc(var(--u)*148);width:calc(var(--u)*126);padding:calc(var(--u)*5) calc(var(--u)*6);border-radius:calc(var(--u)*14)}
  .st{height:calc(var(--u)*30);gap:calc(var(--u)*5)}.st .ic{width:calc(var(--u)*24);height:calc(var(--u)*24)}.st .nm{display:none}
  .bar{height:calc(var(--u)*10);margin-top:0}
  .tasks-toggle{display:grid;place-items:center;position:absolute;right:calc(var(--u)*6);top:calc(var(--u)*58);width:calc(var(--u)*42);height:calc(var(--u)*42);border-radius:calc(var(--u)*12);border:2px solid var(--edge);background:var(--panel);font-size:calc(var(--u)*22)}
  #tasks{display:none;right:calc(var(--u)*6);top:calc(var(--u)*118);width:calc(var(--u)*250);padding:calc(var(--u)*24) calc(var(--u)*14) calc(var(--u)*8);border-width:calc(var(--u)*7)}
  #tasks.open{display:block}
  #tasks .clip{width:calc(var(--u)*56);height:calc(var(--u)*28);margin-left:calc(var(--u)*-28);top:calc(var(--u)*-26);font-size:calc(var(--u)*18)}
  #tasks h3{font-size:calc(var(--u)*18)}
  #task-list li{height:calc(var(--u)*34);font-size:calc(var(--u)*13);gap:calc(var(--u)*7)}#task-list li .ti{width:calc(var(--u)*28);height:calc(var(--u)*28)}#task-list li .ck{width:calc(var(--u)*22);height:calc(var(--u)*22);font-size:calc(var(--u)*17)}#task-list li small{display:none}
  #actions{bottom:calc(var(--u)*8);justify-content:flex-start;overflow-x:auto;gap:calc(var(--u)*7);padding:calc(var(--u)*6) calc(var(--u)*8);scrollbar-width:none}
  #actions::-webkit-scrollbar{display:none}
  .ab-btn{width:calc(var(--u)*70);height:calc(var(--u)*76);border-radius:calc(var(--u)*13);font-size:calc(var(--u)*13);border-width:calc(var(--u)*3)}
  .ab-btn img{width:calc(var(--u)*50);height:calc(var(--u)*46)}.ab-btn .ph{font-size:calc(var(--u)*30)}
  #toast{top:calc(var(--u)*100);font-size:calc(var(--u)*14);padding:calc(var(--u)*8) calc(var(--u)*16);border-width:2px}
  #actbar{bottom:calc(var(--u)*92);font-size:calc(var(--u)*13);padding:calc(var(--u)*6) calc(var(--u)*12);gap:calc(var(--u)*8)}.ab{width:calc(var(--u)*110);height:calc(var(--u)*10)}#act-next{background:linear-gradient(#ffb43a,#f08a10);color:#2a1a0e;border:0;border-radius:calc(var(--u)*14);padding:calc(var(--u)*5) calc(var(--u)*18);font-size:calc(var(--u)*24);font-weight:900}
#act-next[hidden]{display:none}
#act-cancel{font-size:calc(var(--u)*12)}
  .m-card{padding:16px 14px;font-size:15px}
}