:root{--u:calc(min(100vw,177.78vh)/1672);--navy:rgba(18,26,40,.86);--navy2:rgba(30,40,58,.92);--line:rgba(255,255,255,.14);--gold:#ffc93c;--text:#fff;--soft:#c9d6e6;--green:#6fdc3a;--red:#ff6a78;--wood:#8b5a2b}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0d1a14;color:var(--text);font:600 14px/1.35 Inter,"Segoe UI",system-ui,sans-serif;-webkit-text-size-adjust:100%;overflow:hidden}
#app{position:fixed;inset:0;height:100vh;height:100dvh;overflow:hidden}
body.embed-mode #app{height:100vh;height:100dvh}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#gl:focus-visible{box-shadow:inset 0 0 0 3px var(--gold)}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.panel{background:var(--navy);border:1px solid var(--line);border-radius:calc(var(--u)*22);backdrop-filter:blur(6px);box-shadow:0 6px 24px rgba(0,0,0,.35)}
/* logo */
#logo{position:absolute;left:calc(var(--u)*26);top:calc(var(--u)*14);width:calc(var(--u)*620);pointer-events:none;filter:drop-shadow(0 5px 6px rgba(0,0,0,.45))}
#logo .plank{position:relative;background:linear-gradient(#6b4423,#4b2f17);border-radius:calc(var(--u)*30);border:calc(var(--u)*5) solid #3b2410;padding:calc(var(--u)*18) calc(var(--u)*24) calc(var(--u)*30);text-align:center;box-shadow:inset 0 0 0 calc(var(--u)*3) #8a5f35}
#logo .plank::before,#logo .plank::after{content:"";position:absolute;width:calc(var(--u)*62);height:calc(var(--u)*50);background:#3ea533;border-radius:0 80% 0 80%;top:calc(var(--u)*6);box-shadow:inset -4px -4px 0 #2a7a22}
#logo .plank::before{left:calc(var(--u)*-8)}#logo .plank::after{right:calc(var(--u)*-8);transform:scaleX(-1)}
#logo span{display:block;font-family:"Arial Black",Impact,Inter,sans-serif;font-weight:900;letter-spacing:.02em;line-height:.95;}
#logo .l1{white-space:nowrap;font-size:calc(var(--u)*150);background:linear-gradient(#ffe45a,#ffa400 70%,#ff8200);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:0;filter:drop-shadow(0 calc(var(--u)*5) 0 #6b2f06) drop-shadow(0 0 calc(var(--u)*3) #6b2f06) drop-shadow(0 0 calc(var(--u)*3) #6b2f06)}
#logo .l2{font-size:calc(var(--u)*80);white-space:nowrap;background:linear-gradient(#6fd0ff,#1e8cf0 70%,#1a6fd0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;margin-top:calc(var(--u)*-12);filter:drop-shadow(0 calc(var(--u)*5) 0 #0c3c82) drop-shadow(0 0 calc(var(--u)*3) #0c3c82) drop-shadow(0 0 calc(var(--u)*3) #0c3c82)}
/* needs */
#needs{position:absolute;left:calc(var(--u)*26);top:calc(var(--u)*345);width:calc(var(--u)*268);padding:calc(var(--u)*8) calc(var(--u)*14) calc(var(--u)*6) calc(var(--u)*14);--is:calc(var(--u)*58)}
.nrow{display:flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*60)}
.nrow>div{flex:1;min-width:0}
.nrow b{display:block;font-size:max(11px,calc(var(--u)*19));font-weight:700;line-height:1.1;text-shadow:0 1px 2px #000}
.bar{height:calc(var(--u)*20);min-height:8px;background:rgba(255,255,255,.14);border-radius:99px;overflow:hidden;margin-top:calc(var(--u)*3);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.bar u{display:block;height:100%;width:50%;border-radius:99px;background:linear-gradient(90deg,var(--c1,#6fdc3a),var(--c2,#2fa81f));box-shadow:inset 0 3px 0 rgba(255,255,255,.35);transition:width .35s}
.nrow.low .bar{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 3px rgba(255,80,80,.7)}}
/* top bar */
#topbar{position:absolute;right:calc(var(--u)*14);top:calc(var(--u)*22);display:flex;gap:calc(var(--u)*14);align-items:stretch}
.chip{display:flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*72);padding:0 calc(var(--u)*14);background:var(--navy);border:1px solid var(--line);border-radius:calc(var(--u)*18);box-shadow:0 4px 14px rgba(0,0,0,.35);--is:calc(var(--u)*56)}
.chip b{font-size:max(12px,calc(var(--u)*30));font-weight:700;display:block;line-height:1.05}
.chip small{font-size:max(10px,calc(var(--u)*21));font-weight:600;color:var(--soft);display:block}
#chCoin b{font-size:max(14px,calc(var(--u)*36));padding-right:calc(var(--u)*6)}
.plus{width:calc(var(--u)*50);height:calc(var(--u)*50);min-width:26px;min-height:26px;border:0;border-radius:calc(var(--u)*10);background:linear-gradient(#5ee045,#2da81d);color:#fff;font-size:max(16px,calc(var(--u)*40));font-weight:900;line-height:1;box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}
#chLvl b{font-size:max(11px,calc(var(--u)*24))}
.xp{width:calc(var(--u)*130);min-width:50px;height:calc(var(--u)*17);min-height:7px;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden;margin-top:calc(var(--u)*4)}
.xp u{display:block;height:100%;width:70%;background:linear-gradient(90deg,#ffd84a,#ffa800);border-radius:99px}
.gear{width:calc(var(--u)*72);min-width:34px;justify-content:center;padding:0}
/* tasks */
#tasks{position:absolute;right:calc(var(--u)*6);top:calc(var(--u)*118);width:calc(var(--u)*328);padding:calc(var(--u)*18) calc(var(--u)*18) calc(var(--u)*22) calc(var(--u)*20);background:linear-gradient(#f6ead0,#ecd9b3);color:#4a3217;border-radius:calc(var(--u)*14);border:calc(var(--u)*5) solid #9a6a36;box-shadow:0 8px 24px rgba(0,0,0,.45);transform:rotate(.6deg);--is:calc(var(--u)*50)}
#tasks .clip{position:absolute;left:50%;top:calc(var(--u)*-26);width:calc(var(--u)*110);height:calc(var(--u)*34);transform:translateX(-50%);background:linear-gradient(#a8743a,#7a4c22);border-radius:calc(var(--u)*10);border:2px solid #4f2f12}
#tasks h2{margin:calc(var(--u)*6) 0 calc(var(--u)*10);font:900 max(14px,calc(var(--u)*32))/1.1 "Arial Black",Inter,sans-serif;text-align:center;color:#2a1a08}
#tasks ul{list-style:none;margin:0;padding:0}
#tasks li{display:flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*63);border-bottom:1px dashed rgba(90,60,20,.25)}
#tasks li:last-child{border:0}
#tasks li span{flex:1;font-size:max(11px,calc(var(--u)*21));font-weight:700;line-height:1.1}
#tasks li small{display:block;font-size:max(9px,calc(var(--u)*15));font-weight:600;color:#7a5a30}
.chk{width:calc(var(--u)*34);height:calc(var(--u)*34);min-width:16px;min-height:16px;border:calc(var(--u)*3) solid #c3a27a;border-radius:calc(var(--u)*6);background:#fffaf0;position:relative;flex:none}
li.done .chk{border-color:#2fa81f;background:#fff}
li.done .chk::after{content:"";position:absolute;left:24%;top:2%;width:28%;height:58%;border:solid #2fa81f;border-width:0 calc(var(--u)*6) calc(var(--u)*6) 0;transform:rotate(40deg)}
li.done span{text-decoration:line-through;text-decoration-color:rgba(60,120,40,.5)}
#tasksTog{display:none}
/* breath, toast, hint */
#breath{position:absolute;left:50%;top:calc(var(--u)*120);transform:translateX(-50%);width:calc(var(--u)*300);min-width:150px;text-align:center}
#breath small{font-size:12px;color:#d6f3ff;text-shadow:0 1px 2px #000}
#breath u{background:linear-gradient(90deg,#8de3ff,#2a9fe8)}
#toast{position:absolute;left:50%;bottom:calc(var(--u)*190);transform:translateX(-50%);max-width:min(560px,90%);background:rgba(18,26,40,.9);border:1px solid var(--gold);border-radius:14px;padding:8px 14px;text-align:center;font-size:max(12px,calc(var(--u)*20));opacity:0;transition:opacity .25s;pointer-events:none;z-index:6}
#toast.on{opacity:1}
#hint{position:absolute;left:50%;bottom:calc(var(--u)*172);transform:translateX(-50%);font-size:max(10.5px,calc(var(--u)*16));color:#fff;text-shadow:0 1px 3px #000,0 0 6px #000;text-align:center;pointer-events:none;max-width:70%}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .35s}
#flash.on{opacity:.9;transition:none}
#floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fl{position:absolute;font-weight:800;font-size:max(14px,calc(var(--u)*30));color:#ffe27a;text-shadow:0 2px 4px #000;animation:fl 1.6s ease-out forwards}
@keyframes fl{from{transform:translateY(0);opacity:1}to{transform:translateY(-70px);opacity:0}}
/* menu */
#menu{position:absolute;left:calc(var(--u)*78);right:calc(var(--u)*78);bottom:calc(var(--u)*18);display:grid;grid-template-columns:repeat(8,1fr);gap:calc(var(--u)*24);z-index:4}
#menu button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2);height:calc(var(--u)*140);background:linear-gradient(rgba(34,44,62,.94),rgba(18,26,40,.94));border:calc(var(--u)*3) solid rgba(210,150,80,.55);border-radius:calc(var(--u)*20);box-shadow:0 6px 16px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.1);--is:calc(var(--u)*92);padding:0;min-width:0}
#menu button span{font-size:max(10px,calc(var(--u)*25));font-weight:700}
#menu button:hover{border-color:var(--gold);transform:translateY(-2px)}
#menu button[aria-pressed=true],#menu button.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,201,60,.35),0 6px 16px rgba(0,0,0,.4)}
/* sheet */
#sheet{position:absolute;left:50%;bottom:calc(var(--u)*176);transform:translateX(-50%);width:min(620px,94vw);max-height:calc(100% - calc(var(--u)*176) - calc(var(--u)*30));display:flex;flex-direction:column;z-index:5;border-radius:18px;background:var(--navy2)}
#sheet[hidden]{display:none}
#sheet header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 6px;border-bottom:1px solid var(--line)}
#sheet h2{margin:0;font:800 17px Inter,sans-serif;color:var(--gold)}
#sheetX{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.08);font-size:22px;line-height:1}
#sheetBody{overflow:auto;padding:10px 14px 14px;font-size:13px;color:var(--soft);scrollbar-width:thin}
#sheetBody h3{margin:12px 0 4px;font:800 12px Inter;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
#sheetBody p{margin:4px 0}
.card{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:6px 0;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.05);--is:46px}
.card>div{flex:1;min-width:0}.card b{color:#fff;display:block}
.card small{display:block;color:var(--soft);font-weight:500}
.btn{min-height:38px;padding:7px 13px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.1);font-weight:700;color:#fff}
.btn.go{background:linear-gradient(#5ee045,#2da81d);border-color:#2da81d}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[aria-pressed=true]{border-color:var(--gold);background:#3a4a6a}
.pips{display:inline-flex;gap:3px;margin-left:6px}.pips i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2)}.pips i.on{background:var(--gold)}
.row{display:grid;grid-template-columns:120px minmax(0,1fr) 62px;gap:8px;align-items:center;margin:5px 0}
.row label{color:var(--soft)}.row output{font:600 12.5px "JetBrains Mono",monospace;text-align:right;color:#fff}
input[type=range]{width:100%;accent-color:var(--gold);height:26px;min-width:0}
table.ro{width:100%;border-collapse:collapse;font-size:12.5px}
table.ro td{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.08)}
table.ro td:last-child{text-align:right;font:600 12.5px "JetBrains Mono",monospace;color:#fff}
canvas.g{width:100%;height:130px;display:block;background:#0e1626;border:1px solid var(--line);border-radius:10px}
.hintp{font-size:11.5px;color:#9fb3cc;margin:2px 0 6px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.gal figure{margin:0;background:#fffaf0;padding:5px 5px 3px;border-radius:4px;color:#4a3217;font-size:11px;text-align:center;box-shadow:0 3px 8px rgba(0,0,0,.4)}.gal img{width:100%;display:block}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ok{color:#7be05a}.bad{color:#ff8d6b}
details{margin:8px 0;border:1px solid var(--line);border-radius:10px;padding:6px 10px;background:rgba(255,255,255,.04)}
summary{cursor:pointer;font-weight:800;color:#fff}
details p{font-size:12.5px}
code{font:12px "JetBrains Mono",monospace;color:#ffe29a}
/* touch controls */
#bDive{position:absolute;right:calc(var(--u)*30);bottom:calc(var(--u)*184);width:calc(var(--u)*110);height:calc(var(--u)*110);min-width:54px;min-height:54px;border-radius:50%;border:3px solid rgba(255,255,255,.5);background:rgba(30,120,210,.75);font-weight:800;font-size:max(12px,calc(var(--u)*24));z-index:3}
#bDive[aria-pressed=true]{background:rgba(20,80,170,.95);border-color:var(--gold)}
#joy{display:none;position:absolute;left:calc(var(--u)*330);bottom:calc(var(--u)*190);width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);z-index:3;touch-action:none}
#joyKnob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:rgba(255,255,255,.55)}
@media (pointer:coarse){#joy{display:block}}
#sleepVeil{position:absolute;inset:0;background:rgba(5,10,30,.72);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:8;font-size:26px}
#sleepVeil[hidden]{display:none}
#loading{position:absolute;inset:0;background:#0d1a14;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:20;transition:opacity .5s}
#loading.off{opacity:0;pointer-events:none}
/* phones / narrow frames */
@media (max-width:760px),(max-aspect-ratio:1/1){
 :root{--u:calc(100vw/700)}
 #logo{left:6px;top:6px;width:min(40vw,160px)}
 #logo .plank{padding:calc(var(--u)*12) calc(var(--u)*14) calc(var(--u)*22);border-width:3px}
 #logo .plank::before,#logo .plank::after{display:none}
 #logo .l1{font-size:min(8.4vw,34px)}#logo .l2{font-size:min(5vw,20px)}
 #topbar{left:6px;right:6px;top:84px;gap:4px;flex-wrap:nowrap;justify-content:space-between}
 .chip{height:34px;padding:0 6px;gap:4px;border-radius:10px;--is:24px}
 .chip b{font-size:12px}.chip small{font-size:9.5px}
 #chCoin b{font-size:13px;padding:0}.plus{width:20px;height:20px;min-width:20px;min-height:20px;font-size:15px}
 .xp{width:44px;height:6px}#chLvl b{font-size:11px}.gear{width:34px}
 #needs{left:6px;top:auto;bottom:80px;width:min(46vw,190px);padding:4px 7px;--is:24px;border-radius:12px}
 .nrow{height:24px;gap:5px}.nrow b{font-size:10px}.bar{height:7px;margin-top:1px}
 #tasksTog{display:block;position:absolute;right:6px;top:8px;background:#ecd9b3;color:#4a3217;border:2px solid #9a6a36;border-radius:10px;padding:3px 9px;font-size:12px;font-weight:800;min-height:30px}
 #tasks{display:none;right:6px;top:130px;width:min(300px,92vw);--is:34px;padding:12px 14px 14px}
 #tasks.open{display:block}
 #tasks li{height:42px}#tasks li span{font-size:12px}#tasks h2{font-size:15px;margin:2px 0 6px}.chk{width:20px;height:20px}
 #tasks .clip{width:60px;height:18px;top:-14px}
 #menu{left:4px;right:4px;bottom:4px;gap:3px}
 #menu button{height:60px;border-width:2px;border-radius:10px;--is:34px}
 #menu button span{font-size:9.5px}
 #sheet{bottom:70px;max-height:calc(100% - 130px);width:96vw}
 #toast{bottom:150px;font-size:12px}
 #hint{bottom:auto;top:128px;font-size:10.5px;max-width:92%}
 #bDive{right:8px;bottom:74px;width:60px;height:60px}
 #joy{left:auto;right:76px;bottom:70px;width:96px;height:96px}
 #breath{top:130px;width:50%}
 .row{grid-template-columns:96px minmax(0,1fr) 54px}
}