:root{--panel:rgba(14,20,26,.78);--line:rgba(255,255,255,.14);--tx:#f2f6fa;--mu:#a9b6c4;--gr:#2f9d2f;--bl:#3aa0ff;--or:#f0902a;--rd:#e0503c}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#0c1218;color:var(--tx);font:14px/1.35 Inter,Segoe UI,system-ui,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
#app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}
canvas#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.35) 100%)}
.hud{position:absolute;z-index:5}
.glass{background:var(--panel);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 18px rgba(0,0,0,.35)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,canvas:focus-visible{outline:2px solid var(--bl);outline-offset:2px}
svg.ic{width:1.25em;height:1.25em;fill:currentColor;vertical-align:middle}

/* logo */
#logo{left:2%;top:0;width:min(23%,300px);min-width:150px;text-align:center;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
#logo svg{width:46%;display:block;margin:0 auto -4%}
#logo .l1{font:900 clamp(22px,3.6vw,50px)/1 Georgia,'Times New Roman',serif;letter-spacing:.02em;color:#f5e8c8;-webkit-text-stroke:2px #3a2a18;paint-order:stroke fill;text-shadow:0 3px 0 #3a2a18}
#logo .l2{margin-top:-2%}
#logo .l2 span{display:inline-block;padding:.1em .45em;font:900 clamp(16px,2.6vw,36px)/1.1 Impact,'Arial Black',sans-serif;letter-spacing:.06em;color:#f0902a;background:linear-gradient(#5a3b1e,#3d2711);border:2px solid #2a1a0b;border-radius:6px;text-shadow:0 2px 0 #2a1a0b;box-shadow:0 3px 0 #1f1309}

/* profile + chips */
#profile{left:22.6%;top:1.4%;width:min(17.2%,250px);min-width:170px;display:flex;gap:.6em;padding:.45em .6em;align-items:center}
.avatar{width:clamp(34px,4.2vw,56px);aspect-ratio:1;border-radius:8px;flex:none;background:linear-gradient(#caa27a,#7a5236);overflow:hidden;position:relative}
.avatar:after{content:"";position:absolute;left:18%;right:18%;top:22%;bottom:0;border-radius:40% 40% 10% 10%;background:#b07a58;box-shadow:0 -10px 0 -3px #5b3a21}
.pinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.pinfo b{font-size:1.05em}.pinfo span{color:var(--mu);font-size:.9em}
.xpbar{position:relative;height:1.1em;border-radius:3px;background:#0b1118;overflow:hidden;border:1px solid var(--line)}
.xpbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#3ab0ff,#1f78d6);width:47%}
.xpbar em{position:absolute;inset:0;font:600 .72em/1.5 inherit;text-align:center;font-style:normal;text-shadow:0 1px 2px #000}
#chips{left:40.5%;top:1.6%;display:flex;gap:.5%;width:37.5%}
.chip{flex:1;display:flex;align-items:center;gap:.35em;padding:.3em .35em .3em .4em;min-width:0;height:clamp(32px,4.6vh,44px)}
.chip .ci{width:1.6em;height:1.6em;flex:none;display:grid;place-items:center}
.chip b{flex:1;font-size:.95em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .plus{width:1.5em;height:1.5em;flex:none;border-radius:5px;background:rgba(255,255,255,.1);font-size:1.15em;line-height:1;font-weight:700}
.chip .plus:hover{background:rgba(255,255,255,.22)}
#topbtns{right:1.9%;top:1.5%;display:flex;gap:.7em}
.ibtn{width:clamp(36px,4.6vw,62px);aspect-ratio:1;border-radius:10px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;font-size:clamp(14px,1.7vw,24px);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ibtn:hover{background:rgba(40,56,70,.9)}.ibtn svg.ic{width:1.5em;height:1.5em}

/* menu buttons */
#menu{left:1.5%;top:26.2%;width:min(16.4%,240px);min-width:150px;display:flex;flex-direction:column;gap:.4em}
#menu button{display:flex;align-items:center;gap:.8em;padding:.62em .9em;font-size:clamp(13px,1.35vw,18px);font-weight:500;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,.35)}
#menu button:hover{background:rgba(44,60,74,.92)}
#menu button.go{background:linear-gradient(#2f9d2f,#1f7a1f);border:2px solid #6be06b;font-weight:600;padding:.8em .9em}
#menu svg.ic{width:1.5em;height:1.5em}

/* explore card */
#explore{right:.8%;top:12.4%;width:min(26.5%,420px);min-width:230px;display:flex;align-items:center;gap:.7em;padding:.35em;text-align:left}
.eimg{width:34%;aspect-ratio:1.1;border-radius:7px;background:#223 center/cover}
.etxt{flex:1;display:flex;flex-direction:column;gap:.2em}.etxt b{font-size:clamp(13px,1.5vw,20px);line-height:1.15}.etxt span{color:var(--mu);font-size:.82em}
.chev{width:2em;height:2em;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid var(--line);display:grid;place-items:center;font-style:normal;flex:none}

/* mode tiles */
#tilewrap{left:1.5%;right:1.5%;bottom:2%;height:19.4%;min-height:84px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
#tiles{display:flex;gap:1.1%;height:100%;min-width:640px}
.tile{flex:1;min-width:92px;position:relative;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.18);background:#101820 center/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;box-shadow:0 5px 14px rgba(0,0,0,.45)}
.tile .tl{background:rgba(10,16,22,.9);padding:.35em .2em;border-top:1px solid var(--line)}
.tile .tl b{display:block;font-size:clamp(11px,1.3vw,18px);letter-spacing:.02em}
.tile .tl span{display:block;color:var(--mu);font-size:clamp(9px,.95vw,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.sel{border-color:#4db3ff;box-shadow:0 0 0 2px rgba(77,179,255,.5),0 0 22px rgba(77,179,255,.7)}
.tile:hover{transform:translateY(-2px)}
#modeline{left:1.5%;bottom:22.2%;right:50%;color:#fff;font-size:clamp(11px,1.1vw,15px);text-shadow:0 1px 3px #000,0 0 6px #000;max-width:46%;pointer-events:none}

/* in-game HUD */
#gh,#clock,#quests,#hotbar,#mini,#menubtn,#touch,#stealth,#fish,#bpanel,#prompt{display:none}
#app.play #gh,#app.play #clock,#app.play #quests,#app.play #hotbar,#app.play #mini,#app.play #menubtn{display:block}
#app.play #logo,#app.play #menu,#app.play #explore,#app.play #tilewrap,#app.play #modeline,#app.play #profile,#app.play #avatar{display:none}
#app.play #chips{left:50%;transform:translateX(-50%);width:min(520px,60%);top:1%}
#app.play #chips .chip{height:32px}
#app.play #topbtns{display:none}
#gh{left:1.2%;top:1.4%;width:min(210px,32%);padding:.5em .6em}
.vit label{display:flex;justify-content:space-between;font-size:.72em;color:var(--mu);margin-top:.35em}
.vit label b{color:var(--tx)}
.bar{position:relative;height:.7em;border-radius:3px;background:#0a1016;border:1px solid var(--line);overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;width:50%;transition:width .2s}
.bar.hp i{background:linear-gradient(#ff6a5a,#c9302c)}.bar.fd i{background:linear-gradient(#ffb347,#d8861a)}.bar.wt i{background:linear-gradient(#5ec8ff,#1f87d6)}.bar.st i{background:linear-gradient(#9be36a,#4aa82c)}
.bar.tmp i{background:linear-gradient(90deg,#4aa0ff,#7ee08a,#ffb347,#ff5a4a)}
.bar.tmp s{position:absolute;top:0;bottom:0;width:2px;background:#fff;left:50%}
#clock{right:1.5%;top:1.4%;padding:.45em .7em;text-align:right;min-width:150px}
#ck1{font-weight:700;font-size:1.05em}#ck2{color:var(--mu);font-size:.82em}
.wind{display:flex;gap:.4em;align-items:center;justify-content:flex-end;color:var(--mu);font-size:.8em}.wind svg{width:1.5em;height:1.5em}
#quests{left:1.2%;top:26%;width:min(230px,34%);padding:.5em .65em;font-size:.82em}
#quests h4{font-size:.95em;margin-bottom:.3em;color:#ffd48a}
.q{display:flex;justify-content:space-between;gap:.5em;padding:.18em 0;border-top:1px solid rgba(255,255,255,.07)}.q.done{color:#7be07b;text-decoration:line-through}.q em{font-style:normal;color:var(--mu)}
#hotbar{left:50%;transform:translateX(-50%);bottom:1.6%;display:none;gap:.4em;padding:.35em}
#app.play #hotbar{display:flex}
#hotbar button{min-width:clamp(46px,6vw,74px);padding:.35em .4em;border-radius:7px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:.78em;text-align:center}
#hotbar button b{display:block;font-size:1.25em}#hotbar button.on{border-color:#4db3ff;background:rgba(77,179,255,.2)}
#prompt{left:50%;transform:translateX(-50%);bottom:15%;padding:.45em .9em;border-radius:20px;background:rgba(10,16,22,.88);border:1px solid var(--line);font-size:.95em;pointer-events:none;white-space:nowrap}
#prompt .pb{display:block;height:5px;margin-top:4px;background:#1b2630;border-radius:3px;overflow:hidden}#prompt .pb i{display:block;height:100%;background:#7be07b;width:0}
#mini{right:1.5%;bottom:2%;width:clamp(110px,14vw,180px);aspect-ratio:1;padding:3px;border-radius:50%;overflow:hidden}
#mini canvas{width:100%;height:100%;border-radius:50%;display:block}
#menubtn{left:50%;top:calc(1% + 40px);transform:translateX(-50%);gap:.5em;display:none}
#app.play #menubtn{display:flex}#menubtn .ibtn{width:34px;font-size:15px;border-radius:8px}
#stealth{right:1.5%;top:calc(1.4% + 78px);width:min(190px,30%);padding:.4em .6em;font-size:.72em}
#stealth span{color:var(--mu)}
#fish{left:50%;transform:translateX(-50%);top:18%;width:min(340px,80%);padding:.6em .8em;text-align:center;font-size:.85em}
#fish .bar{height:.9em;margin:.4em 0}#fish .bar i{background:#4db3ff}
.bar.tens i{background:linear-gradient(90deg,#7be07b,#ffd24a,#ff5a4a)}.bar.tens s{position:absolute;top:0;bottom:0;width:2px;background:#fff}.bar.tens s.lo{left:25%}.bar.tens s.hi{left:80%}
#bpanel{left:1.2%;top:26%;width:min(250px,48%);max-height:62%;overflow:auto;padding:.5em;font-size:.82em}
#bpanel button.bp{display:block;width:100%;text-align:left;padding:.35em .5em;margin:.15em 0;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
#bpanel button.bp.sel{border-color:#4db3ff;background:rgba(77,179,255,.2)}#bpanel button.bp small{display:block;color:var(--mu)}
#bpanel button.bp.no{opacity:.5}
#toast{left:50%;transform:translateX(-50%);top:15%;display:flex;flex-direction:column;gap:.3em;align-items:center;pointer-events:none;width:90%}
#toast div{background:rgba(10,16,22,.92);border:1px solid var(--line);padding:.4em .9em;border-radius:18px;font-size:.88em;animation:tin .25s,tout .5s 3.3s forwards}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}}@keyframes tout{to{opacity:0}}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9}#flash.on{animation:fl .35s}
@keyframes fl{0%{opacity:.9}100%{opacity:0}}
#touch{left:0;right:0;bottom:2%;pointer-events:none}
#touch .pad{position:absolute;left:2%;bottom:0;display:grid;grid-template-columns:repeat(3,48px);gap:4px;pointer-events:auto}
#touch .acts{position:absolute;right:2%;bottom:0;display:grid;grid-template-columns:repeat(2,52px);gap:6px;pointer-events:auto}
#touch button{height:48px;border-radius:12px;background:rgba(14,20,26,.72);border:1px solid var(--line);font-weight:700;touch-action:none}
#app.play.touchy #touch{display:block}
#app.play.touchy #hotbar{bottom:calc(2% + 160px)}#app.play.touchy #prompt{bottom:calc(2% + 220px)}#app.play.touchy #mini{bottom:calc(2% + 120px)}

#loading{position:absolute;inset:0;z-index:30;background:#0c1218;display:grid;place-items:center;text-align:center;transition:opacity .6s}#loading.off{opacity:0;pointer-events:none}
#loading b{display:block;font-size:1.2em;margin:.8em 0 .2em}#loading span{color:var(--mu)}
.spin{width:44px;height:44px;margin:0 auto;border:4px solid rgba(255,255,255,.15);border-top-color:#4db3ff;border-radius:50%;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}

/* modals */
.modal{position:absolute;inset:0;z-index:20;display:none;place-items:center;background:rgba(0,0,0,.5);padding:2%}
.modal.on{display:grid}
.box{width:min(900px,100%);max-height:92%;overflow:auto;padding:1em 1.2em;background:rgba(12,18,24,.96)}
.box h2{display:flex;justify-content:space-between;align-items:center;gap:1em;font-size:1.25em;margin-bottom:.6em}
.box h3{font-size:1em;margin:.9em 0 .3em;color:#ffd48a}
.btn{display:inline-block;padding:.4em .8em;border-radius:7px;background:rgba(255,255,255,.1);border:1px solid var(--line);font-size:.9em;margin:.12em .1em}
.btn:hover{background:rgba(255,255,255,.2)}.btn.pri{background:#2f8f2f;border-color:#6be06b}.btn.sel{border-color:#4db3ff;background:rgba(77,179,255,.25)}.btn[disabled]{opacity:.4;cursor:default}
.box p,.box li{color:#d6dee7;font-size:.9em;margin:.25em 0}.box ul{padding-left:1.2em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1em}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em}
table.t{width:100%;border-collapse:collapse;font-size:.85em}table.t td,table.t th{padding:.25em .4em;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}table.t th{color:var(--mu);font-weight:600}
.ok{color:#7be07b}.bad{color:#ff7a6a}.mut{color:var(--mu)}
canvas.gr{width:100%;height:150px;background:#0a1016;border:1px solid var(--line);border-radius:6px;display:block}
.slot{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.5em .7em;margin:.3em 0;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.04)}
.row{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.3em 0;border-bottom:1px solid rgba(255,255,255,.07)}
.eq{font-family:JetBrains Mono,Consolas,monospace;font-size:.82em;background:#0a1016;border:1px solid var(--line);padding:.35em .5em;border-radius:5px;margin:.3em 0;overflow-x:auto;color:#cfe3ff}
canvas.map{width:100%;aspect-ratio:1;max-height:70vh;border-radius:8px;border:1px solid var(--line);background:#0a1016;display:block;margin:auto}

@media (max-width:760px){
  #logo{width:34%;left:1%}#profile{left:36%;top:1%;width:62%;min-width:0}
  #chips{left:1%;right:1%;width:auto;top:calc(1% + 56px);flex-wrap:wrap;gap:4px}.chip{flex:1 1 22%;height:32px}
  #topbtns{right:1%;top:auto;bottom:calc(21% + 4px);gap:6px}.ibtn{width:38px}
  #menu{top:30%;width:46%;gap:3px}#menu button{padding:.45em .6em;font-size:13px}#menu button.go{padding:.55em .6em}
  #explore{display:none}#tilewrap{height:17%;left:1%;right:1%}.tile{min-width:98px}
  #modeline{bottom:19%;max-width:96%;right:auto}
  #app.play #chips{width:94%;top:calc(1% + 0px)}#app.play #gh{top:calc(1% + 42px)}#app.play #clock{top:calc(1% + 42px)}#app.play #quests{display:none}
  #menubtn{top:auto;bottom:auto;left:auto;right:1%;transform:none;top:calc(1% + 112px);flex-direction:column}
  #stealth{top:calc(1% + 160px)}#toast{top:25%}
  .grid2,.grid3{grid-template-columns:1fr}.box{padding:.8em}
}
@media (max-width:760px) and (max-height:640px){#logo .l1{font-size:20px}}

@media (max-width:760px){
  #logo .l1{font-size:17px;-webkit-text-stroke:1px #3a2a18}#logo .l2 span{font-size:12px}
  .chip{padding:.15em .25em;gap:.2em}.chip b{font-size:.78em}.chip .plus{width:1.3em;height:1.3em;font-size:.95em}.chip .ci{width:1.3em;height:1.3em}
  #bpanel{max-height:34%}#profile{padding:.3em .4em}.pinfo b{font-size:.9em}
}
canvas#c:focus-visible{outline:2px solid #3aa0ff;outline-offset:-3px}