*{box-sizing:border-box}
button,input{font-family:"Nunito Sans",system-ui,sans-serif}
html,body{margin:0;height:100%;overflow:hidden;background:#141a2b;color:#f1ebe0;font-family:"Nunito Sans",system-ui,sans-serif}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
.topbar{position:fixed;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;z-index:30;pointer-events:none}
.topbar>*{pointer-events:auto}
.pill{background:#10162acc;border:1px solid #ffffff30;color:#f1ebe0;border-radius:20px;padding:6px 14px;font:600 13px "Nunito Sans",system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(4px)}
.pill:hover{background:#1c2540dd}
.pill.on{background:#e9c58a;color:#1b1f2e;border-color:#e9c58a}
#langs{display:flex;gap:6px}
#hud{position:fixed;top:52px;right:12px;z-index:20;background:#10162acc;border:1px solid #ffffff25;border-radius:10px;padding:8px 12px;font-size:13px;display:none;backdrop-filter:blur(4px)}
#hud b{font-weight:700;color:#e9c58a}
#dlg{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(780px,94vw);background:linear-gradient(#141b30f2,#0e1324f2);border:1px solid #ffffff2a;border-radius:14px;padding:16px 20px 18px;z-index:25;display:none;box-shadow:0 10px 40px #0008;cursor:pointer}
#who{font:600 14px "Nunito Sans",system-ui,sans-serif;color:#e9c58a;letter-spacing:.4px;margin-bottom:6px;min-height:4px}
#txt{font:400 18px/1.55 Lora,serif;min-height:56px}
#txt.narr{font-style:italic;color:#d9d2c5}
#ch{display:flex;flex-direction:column;gap:8px;margin-top:12px}
#ch button,.btn{font:600 15px "Nunito Sans",system-ui,sans-serif;text-align:left;background:#ffffff10;color:#f1ebe0;border:1px solid #ffffff30;border-radius:10px;padding:10px 14px;cursor:pointer}
#ch button:hover,.btn:hover{background:#e9c58a22;border-color:#e9c58a}
#nx{position:absolute;right:16px;bottom:10px;font-size:13px;color:#e9c58aaa;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
#pn{position:fixed;inset:0;z-index:29;display:none;align-items:flex-start;justify-content:center;padding:60px 12px 12px;overflow:auto}
#pn.on{display:flex}
#pnb{width:min(720px,96vw);background:linear-gradient(#18203aF5,#11172bF5);border:1px solid #ffffff30;border-radius:16px;padding:20px 22px;box-shadow:0 12px 50px #000a;margin-bottom:200px}
#pnb h2{margin:0 0 6px;font:600 21px Lora,Georgia,serif;color:#f3d9a8}
#pnb p{margin:6px 0 10px;line-height:1.5;color:#ddd5c8;font-size:15px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:560px){.grid{grid-template-columns:1fr}#txt{font-size:16px}}
.card{background:#ffffff0d;border:1px solid #ffffff2a;border-radius:10px;padding:10px 12px;font:400 15px/1.4 Lora,serif;cursor:pointer;transition:.15s}
.card:hover{border-color:#e9c58a}
.card.ok{background:#5f9b7a33;border-color:#7fc39c;cursor:default}
.card.no{background:#c9915233;border-color:#d9a060;cursor:default}
.card small{display:block;font:600 11.5px "Nunito Sans",system-ui,sans-serif;margin-top:4px;color:#cfc6b6;letter-spacing:.3px}
.row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{font:600 12.5px "Nunito Sans",system-ui,sans-serif;background:#ffffff12;border:1px solid #ffffff30;color:#f1ebe0;border-radius:8px;padding:5px 10px;cursor:pointer}
.tag:hover{border-color:#e9c58a}
.fb{min-height:22px;margin-top:10px;font-size:14.5px;color:#f0d9ae;line-height:1.45}
.go{margin-top:14px;background:#e9c58a;color:#1b1f2e;border:0;border-radius:10px;padding:10px 18px;font:700 15px "Nunito Sans",system-ui,sans-serif;cursor:pointer}
.go:disabled{opacity:.35;cursor:default}
.go.sec{background:#ffffff18;color:#f1ebe0}
input[type=text]{width:100%;font:400 17px "Nunito Sans",system-ui,sans-serif;padding:10px 12px;border-radius:10px;border:1px solid #ffffff40;background:#0b1020;color:#fff}
input[type=range]{width:100%;accent-color:#e9c58a}
.scale{display:flex;justify-content:space-between;font-size:12px;color:#bdb4a5;margin-top:2px}
.opt{display:flex;gap:8px;flex-wrap:wrap}
.opt button{flex:1;min-width:120px}
.opt button.sel{background:#e9c58a;color:#1b1f2e;border-color:#e9c58a}
.dis{opacity:.4;cursor:not-allowed!important}
.msg{background:#0b1020;border:1px solid #ffffff25;border-radius:10px;padding:12px 14px;font:400 15.5px/1.55 Lora,serif;margin:6px 0}
.part{border-radius:4px;padding:1px 3px}
.legend{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px;margin-top:6px}
.legend span{padding:2px 8px;border-radius:6px}
#breath{display:block;margin:6px auto;max-width:100%}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
@media(max-width:560px){.tools{grid-template-columns:1fr}}
.tool{background:#ffffff0c;border:1px solid #e9c58a55;border-radius:10px;padding:10px 12px}
.tool b{color:#f3d9a8;font-family:Lora,serif;font-size:16px}
.tool div{font-size:13.5px;color:#d7cfc1;margin-top:3px;line-height:1.4}
#title{position:fixed;inset:0;z-index:28;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
#tbox{width:min(560px,96vw);background:#0f1528e8;border:1px solid #ffffff2a;border-radius:18px;padding:28px 30px;box-shadow:0 14px 60px #000b;backdrop-filter:blur(6px)}
#tbox h1{margin:0;font:600 40px Lora,serif;color:#f3d9a8;letter-spacing:.5px}
#tbox .sub{color:#cfc5b4;margin:4px 0 18px;font:italic 16px Lora,serif}
#tbox label{display:block;font:700 13px "Nunito Sans",system-ui,sans-serif;color:#e9c58a;margin:14px 0 6px;letter-spacing:.4px}
.note{font-size:12.5px;color:#a9a091;line-height:1.5;margin-top:16px}
#quest{position:fixed;top:52px;left:50%;transform:translateX(-50%);z-index:20;background:#10162add;border:1px solid #e9c58a66;border-radius:12px;padding:8px 16px;text-align:center;display:none;max-width:min(560px,92vw);backdrop-filter:blur(4px)}
#quest b{color:#f3d9a8;font:600 15px Lora,Georgia,serif}
#quest .h{font-size:12.5px;color:#cfc6b6;margin-top:3px}
#quest .tip{font-size:13.5px;color:#ffe2a6;margin-top:5px}
#jump{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:21;display:none;font-size:15px;padding:12px 26px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#pnb.ns,#pnb.ns *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lg{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #ffffff14}
.lg b{font-family:Lora,Georgia,serif;color:#f3d9a8;font-size:16px}
.lg div div{font-size:13.5px;color:#d7cfc1;line-height:1.4}
.tabs{display:flex;gap:6px;margin:6px 0 10px;flex-wrap:wrap}
.tabs button{background:#ffffff10;border:1px solid #ffffff30;color:#f1ebe0;border-radius:18px;padding:6px 14px;font-weight:600;cursor:pointer}
.tabs button.on{background:#e9c58a;color:#1b1f2e;border-color:#e9c58a}
.tool.lock{opacity:.4}
#hud .meter{height:8px;width:180px;background:#ffffff1a;border-radius:4px;margin-top:6px;overflow:hidden}
#hud .meter i{display:block;height:100%;border-radius:4px;transition:width .8s,background .8s}
#hud .dl{font-weight:700;margin-left:6px}
.fly{position:fixed;z-index:45;font:800 26px "Nunito Sans",system-ui,sans-serif;color:#fff;background:#3f9a63;border:2px solid #b9f0cc;border-radius:22px;padding:4px 14px;box-shadow:0 6px 22px #000a;pointer-events:none;will-change:transform,opacity}
.fly.bad{background:#b8483a;border-color:#ffc3b6}
.pp{position:fixed;z-index:41;font:700 16px "Nunito Sans",system-ui,sans-serif;color:#ffe2a6;pointer-events:none;animation:up 1.4s forwards}
@keyframes up{0%{opacity:0;transform:translateY(6px)}20%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}
#toast{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:#e9c58a;color:#1b1f2e;font:700 14px "Nunito Sans",system-ui,sans-serif;padding:8px 16px;border-radius:20px;z-index:40;display:none;box-shadow:0 6px 20px #0007}

/* arena: own weather, action bar, in-world breathing */
#ownw{position:fixed;top:52px;left:12px;z-index:20;background:#10162acc;border:1px solid #ffffff25;border-radius:10px;padding:8px 12px;font-size:13px;display:none;backdrop-filter:blur(4px)}
#ownw .meter{height:8px;width:160px;background:#ffffff1a;border-radius:4px;margin-top:6px;overflow:hidden}
#ownw .meter i{display:block;height:100%;border-radius:4px;transition:width .4s,background .6s}
#vig{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(ellipse at center,rgba(20,24,40,0) 42%,rgba(28,32,48,.55) 75%,rgba(14,16,28,.92) 100%)}
#abar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:21;display:none;gap:8px;user-select:none;-webkit-user-select:none}
#abar .pill{font-size:14px;padding:10px 16px;touch-action:manipulation}
#prm{position:fixed;bottom:74px;left:50%;transform:translateX(-50%);z-index:21;display:none;background:#e9c58a;color:#1b1f2e;font:700 14px "Nunito Sans",system-ui,sans-serif;padding:7px 14px;border-radius:16px;box-shadow:0 6px 20px #0007;max-width:92vw;text-align:center}
#brz{position:fixed;right:28px;bottom:110px;z-index:21;display:none;width:150px;height:170px;pointer-events:none}
#brz .rg{position:absolute;left:5px;top:0;width:140px;height:140px;border-radius:50%;border:3px solid #f3d9a8cc;box-sizing:border-box}
#brz .pf{position:absolute;left:5px;top:0;width:140px;height:140px;border-radius:50%}
#brz .tx{position:absolute;bottom:0;left:-40px;right:-40px;text-align:center;font:700 14px "Nunito Sans",system-ui,sans-serif;color:#f3d9a8;text-shadow:0 1px 4px #000}

/* touch: no loupe, no selection on controls */
button,#pnb,#dlg,#abar,#brz,#prm,#quest,#hud,#ownw,canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input{-webkit-user-select:text;user-select:text}
.hold-btn{width:96px;height:96px;border-radius:50%;border:2px solid #f3d9a8;background:#e9c58a;color:#1b1f2e;font:700 16px "Nunito Sans",system-ui,sans-serif;touch-action:none;box-shadow:0 6px 24px #0008;cursor:pointer}
.hold-btn:active{transform:scale(.96);background:#f3d9a8}
#abar{align-items:center}
#prm{cursor:pointer}
html.touch #prm{pointer-events:auto;font-size:15px;padding:10px 16px}

/* narrow screens: compact top bar, panels stacked so they don't overlap */
@media (max-width:560px){
  .topbar{top:8px;left:6px;right:6px}
  .topbar .pill{font-size:12px;padding:6px 9px}
  #score{white-space:nowrap}
  #hud{top:46px;right:6px;max-width:47vw;padding:6px 9px;font-size:12px}
  #hud .meter{width:100%}
  #ownw{top:46px;left:6px;max-width:47vw;padding:6px 9px;font-size:12px}
  #ownw .meter{width:100%}
  #quest{top:112px;padding:6px 12px}
  #quest b{font-size:14px}
}

/* joystick and jump button: touch screens only */
#joy{position:fixed;left:22px;bottom:28px;width:130px;height:130px;border-radius:50%;background:#10162a66;border:2px solid #f3d9a855;z-index:22;display:none;touch-action:none;backdrop-filter:blur(2px)}
#joyk{position:absolute;left:35px;top:35px;width:56px;height:56px;border-radius:50%;background:#e9c58acc;box-shadow:0 4px 14px #0008;pointer-events:none}
html:not(.touch) #joy,html:not(.touch) #jump{display:none!important}
html.touch #jump{left:auto;right:26px;transform:none;bottom:46px;width:86px;height:86px;border-radius:50%;padding:0;font-size:15px}
html.touch #abar{left:auto;right:12px;transform:none;flex-direction:column;align-items:flex-end;bottom:24px}
html.touch #brz{right:auto;left:50%;transform:translateX(-50%);bottom:170px}
html.touch #prm{bottom:180px}

/* own-weather gauge: easier to see */
#ownw{border-color:#e9c58a88;font-size:14px;padding:9px 13px;box-shadow:0 6px 20px #0006}
#ownw .meter{height:11px}
#ownw.pulse{animation:ownp .6s ease-out}
@keyframes ownp{0%{box-shadow:0 0 0 0 #e0745acc}100%{box-shadow:0 0 0 14px #e0745a00}}

/* zoom buttons */
#zoom{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:21;display:none;flex-direction:column;gap:8px}
#zoom .pill{width:42px;height:42px;padding:0;font:700 22px/1 "Nunito Sans",system-ui,sans-serif;border-radius:50%}
/* breathing instructions */
#brz{width:220px;height:auto}
#brz .rg,#brz .pf{left:40px}
#brz .tx{position:relative;margin-top:150px;left:0;right:0}
#brz .tx b{display:block;font:700 19px "Nunito Sans",system-ui,sans-serif;color:#fff2d6}
#brz .tx span{display:block;font-size:13px;color:#e9dcc4;margin-top:3px}
#brz .tx .n{font-size:12px;color:#c9bfae}
.hold-btn.out{background:#5b6f8f;color:#fff;border-color:#9fb4d6}
html:not(.touch) #brz{right:auto;left:50%;transform:translateX(-50%);bottom:90px}

#brz .rg,#brz .pf{width:96px;height:96px;left:62px}
#brz .tx{margin-top:104px}

/* foldable top panels */
#quest{padding-right:34px}
#quest .qx{position:absolute;top:4px;right:6px;width:26px;height:26px;border-radius:50%;border:none;background:#ffffff14;color:#f3d9a8;font-size:13px;cursor:pointer;line-height:26px;padding:0}
#quest.min{padding:5px 12px;cursor:pointer;border-radius:16px}
#quest .qtab{font:700 13px "Nunito Sans",system-ui,sans-serif;color:#f3d9a8;white-space:nowrap}
#quest .qdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#e0745a;vertical-align:middle;margin-left:4px}
#hud,#ownw{cursor:pointer}
#hud.mini,#ownw.mini{padding:6px 8px}
#hud.mini .ht,#hud.mini .hs,#ownw.mini .ht{display:none}
#hud.mini .meter,#ownw.mini .meter{width:70px;margin-top:0}

/* pause and sound buttons, pause screen */
.pill.ico{width:34px;padding:6px 0;display:inline-flex;align-items:center;justify-content:center;gap:3px;font-size:15px}
#pau i{display:block;width:4px;height:12px;background:currentColor;border-radius:1px}
#snd.off{opacity:.45;text-decoration:line-through}
#pauseov{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:#0b0f1ccc;backdrop-filter:blur(3px)}
#pauseov .pbox{background:#141b30;border:1px solid #ffffff2a;border-radius:16px;padding:24px 28px;text-align:center;max-width:86vw}
#pauseov h2{margin:0 0 8px;font:600 24px Lora,Georgia,serif;color:#f3d9a8}
#pauseov p{margin:0 0 16px;color:#d9d1c2;font-size:14px}
/* breathing: keyboard key, watch-only option */
#brz .tx kbd{display:inline-block;font:800 15px "Nunito Sans",system-ui,sans-serif;background:#f3d9a8;color:#1b1f2e;border-radius:7px;padding:4px 14px;margin:0 4px;box-shadow:0 3px 0 #b39a6a,0 6px 14px #0007;letter-spacing:.06em}
#brz .tx span{font-size:15px;color:#fff2d6;margin-top:8px}
.hold-btn.auto{opacity:.55}
@media (max-width:560px){ .pill.ico{width:30px} }

#brz{width:min(440px,94vw)}
#brz .rg,#brz .pf{width:70px;height:70px;left:calc(50% - 35px)}
#brz .tx{margin-top:78px}
html:not(.touch) #brz{bottom:150px}
html.touch #brz{bottom:200px}
/* narrow screens: sound and pause move to the right edge, above zoom, so the top bar fits */
@media (max-width:560px){
  #snd,#pau{position:fixed;right:12px;width:42px;height:42px;border-radius:50%;padding:0}
  #pau{top:calc(50% - 100px)} #snd{top:calc(50% - 150px)}
}

/* credits */
.credit{margin-top:14px;font-size:12px;line-height:1.6;color:#bdb4a5;text-align:center}
.credit a,.about a{color:#e9c58a}