:root{--bg:#0c120e;--panel:rgba(14,19,16,.84);--line:rgba(255,255,255,.12);--text:#f1f5ef;--muted:#a9b8a8;--g:#46e05a;--gold:#f6a91c;--bad:#ff6b5f;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;color:var(--text);font:14px/1.4 Inter,system-ui,Segoe UI,Arial,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer}
.app{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;background:#0b1410}
body.embed-mode .app{height:100vh;height:100dvh}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.38) 100%)}
.grid{position:absolute;inset:0;pointer-events:none;display:none;background:linear-gradient(90deg,transparent 33.2%,rgba(255,255,255,.4) 33.3%,transparent 33.5%,transparent 66.5%,rgba(255,255,255,.4) 66.6%,transparent 66.8%),linear-gradient(0deg,transparent 33.2%,rgba(255,255,255,.4) 33.3%,transparent 33.5%,transparent 66.5%,rgba(255,255,255,.4) 66.6%,transparent 66.8%)}
.grid.on{display:block}
/* title */
.title{position:absolute;left:1.4%;top:1.2%;pointer-events:none;display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 .8vw;max-width:48%}
.emblem{width:clamp(70px,13vw,230px);height:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.logo{display:flex;flex-direction:column;line-height:.86;font-family:Impact,'Arial Black','Haettenschweiler',sans-serif;font-weight:900;letter-spacing:.01em;margin-top:.4vw}
.logo .l1{font-size:clamp(32px,6.4vw,112px);color:#fff;-webkit-text-stroke:clamp(1px,.18vw,3px) #1a2433;text-shadow:0 4px 0 #2b3b52,0 8px 14px rgba(0,0,0,.55)}
.logo .l2{font-size:clamp(30px,5.6vw,98px);background:linear-gradient(#ffd14a,#f19a12 60%,#d97a08);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:clamp(1px,.16vw,3px) #3a2306;filter:drop-shadow(0 4px 0 #6b3d08) drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.tag{flex-basis:100%;margin:.2vw 0 0 clamp(60px,12.5vw,225px);font-size:clamp(7px,.95vw,17px);letter-spacing:.34em;color:#e9f0e4;text-shadow:0 2px 6px #000,0 0 10px #000;font-weight:600;white-space:nowrap}
.tag i{font-style:normal;color:var(--gold);margin:0 .3em}
/* left menu */
.menu{position:absolute;left:1.2%;top:25%;width:clamp(150px,13.4vw,236px);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:3px;backdrop-filter:blur(6px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.menu button{display:flex;align-items:center;gap:.9vw;width:100%;padding:clamp(7px,.95vw,16px) .9vw;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.07);border-radius:0;text-align:left;font-size:clamp(12px,1.18vw,20px);font-weight:500;color:#eaf0e6}
.menu button:last-child{border-bottom:0}
.menu button svg{width:clamp(18px,2.2vw,38px);height:clamp(18px,2.2vw,38px);flex:none;stroke:#f1f5ef;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu button:hover{background:rgba(255,255,255,.07)}
.menu button.on{background:linear-gradient(#1f6a2e,#164a21);border:1px solid var(--g);border-radius:9px;box-shadow:0 0 14px rgba(70,224,90,.55),inset 0 0 12px rgba(70,224,90,.25)}
.menubtn{position:absolute;left:10px;top:10px;display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--panel);font-size:22px}
body.play .menubtn{display:block}
body.play .title,body.play .menu,body.play .biomes{display:none}
/* top right */
.stats{position:absolute;right:clamp(105px,12.6vw,220px);top:2%;display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.3vw .5vw;backdrop-filter:blur(6px)}
.st{display:flex;align-items:center;gap:.5vw;padding:.4vw 1vw;border-right:1px solid var(--line)}
.st svg{width:clamp(18px,2.4vw,40px);height:clamp(18px,2.4vw,40px)}
.st b{font-size:clamp(14px,1.8vw,30px);font-weight:600;min-width:2.1ch;font-variant-numeric:tabular-nums}
.st.low b{color:var(--bad)}
.clock{display:flex;align-items:center;gap:.5vw;background:none;border:0;padding:.3vw .9vw}
.clock svg{width:clamp(22px,3vw,48px);height:clamp(22px,3vw,48px)}
.clock span{display:flex;flex-direction:column;text-align:left;line-height:1.15}.clock b{font-size:clamp(11px,1.2vw,20px);font-weight:500}.clock em{font-style:normal;font-size:clamp(12px,1.3vw,22px);color:#dfe8da}
.compass{position:absolute;right:.5%;top:1.6%;width:clamp(96px,10.5vw,190px);aspect-ratio:1;border-radius:50%;pointer-events:auto}
.compass canvas{width:100%;height:100%;display:block;cursor:pointer}
.side{position:absolute;right:.6%;top:28%;width:clamp(108px,9.4vw,168px);background:var(--panel);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(6px)}
.sea{display:flex;align-items:center;gap:.5vw;padding:.7vw .8vw;border-bottom:1px solid var(--line)}
.sea svg{width:clamp(30px,3.6vw,60px);height:clamp(30px,3.6vw,60px);flex:none}
.sea span{display:flex;flex-direction:column;line-height:1.15}.sea b{font-weight:500;font-size:clamp(12px,1.25vw,21px)}.sea em{font-style:normal;font-size:clamp(14px,1.55vw,26px);font-weight:600}
.side>button{display:flex;align-items:center;gap:.6vw;width:100%;padding:.75vw .9vw;background:none;border:0;border-bottom:1px solid var(--line);font-size:clamp(11px,1.05vw,18px);text-align:left}
.side>button:last-of-type{border-bottom:0}.side>button svg{width:clamp(22px,2.7vw,44px);height:clamp(22px,2.7vw,44px);flex:none}.side>button:hover{background:rgba(255,255,255,.07)}
.pop{position:absolute;right:102%;top:0;min-width:170px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px;display:none;z-index:6}
.pop.on{display:block}.pop button{display:block;width:100%;text-align:left;background:none;border:0;padding:7px 10px;border-radius:7px;font-size:13px}.pop button:hover,.pop button.cur{background:rgba(70,224,90,.18)}
/* biome cards */
.biomes{position:absolute;left:1.2%;right:1.2%;bottom:1.3%;display:grid;grid-template-columns:repeat(7,1fr);gap:1.1%;height:17.5%;min-height:92px}
.bc{position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden;background:#101712;border:1px solid rgba(255,255,255,.18);border-radius:11px;text-align:left}
.bc .im{flex:1;min-height:0;background-size:cover;background-position:center}
.bc .nm{display:flex;align-items:center;gap:.7vw;padding:.4vw .9vw;background:rgba(10,14,12,.94);font-size:clamp(11px,1.2vw,20px);height:30%;min-height:26px}
.bc .nm svg{width:clamp(14px,1.8vw,30px);height:clamp(14px,1.8vw,30px);fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bc.on{border:2px solid var(--g);box-shadow:0 0 16px rgba(70,224,90,.7),inset 0 0 10px rgba(70,224,90,.3)}
.bc:hover{filter:brightness(1.12)}
/* panels */
.panel{position:absolute;left:calc(1.2% + clamp(150px,13.4vw,236px) + 14px);top:7%;width:min(620px,calc(100% - 2.4% - clamp(150px,13.4vw,236px) - clamp(108px,9.4vw,168px) - 40px));max-height:calc(100% - 7% - 21%);display:flex;flex-direction:column;background:rgba(12,17,14,.92);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(8px);box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:5}
body.play .panel{left:62px;max-height:calc(100% - 14%)}
.panel header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.panel h2{margin:0;font-size:17px;font-weight:600}.x{background:none;border:0;font-size:26px;line-height:1;color:var(--muted)}
#panelBody{padding:12px 14px;overflow:auto;font-size:13px}
#panelBody h4{margin:12px 0 6px;font-size:13px;color:var(--gold);text-transform:uppercase;letter-spacing:.06em}
#panelBody p{margin:6px 0;color:#d4dfd1}.muted{color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.card{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.card h5{margin:0 0 3px;font-size:14px}.card small{display:block;color:var(--muted);line-height:1.5}
.btn{background:linear-gradient(#2a8a3a,#1b5f27);border:1px solid #58e06c;border-radius:8px;padding:6px 12px;font-weight:600;font-size:13px}.btn.alt{background:rgba(255,255,255,.08);border-color:var(--line)}
.btn:hover{filter:brightness(1.15)}.btn[disabled]{opacity:.4;cursor:default}
.row{display:flex;align-items:center;gap:10px;margin:7px 0;flex-wrap:wrap}.row label{min-width:120px;color:#cfdbca}.row input[type=range]{flex:1;min-width:120px;accent-color:#46e05a}.row output{min-width:52px;text-align:right;font-variant-numeric:tabular-nums;color:var(--gold)}
select{background:#16201a;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:5px 8px}
table{width:100%;border-collapse:collapse;font-size:12.5px}td,th{padding:3px 6px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}th{color:var(--muted);font-weight:500}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.ok{color:#66e07a}.fail{color:var(--bad)}
canvas.ch{width:100%;height:170px;background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:8px;display:block}
canvas.map{width:100%;aspect-ratio:1;max-height:56vh;background:#000;border:1px solid var(--line);border-radius:10px;display:block;cursor:crosshair;margin:0 auto}
details{margin:8px 0;border:1px solid var(--line);border-radius:9px;padding:6px 10px;background:rgba(255,255,255,.03)}summary{cursor:pointer;font-weight:600}
code,.mono{font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:12px;color:#ffe9b0}
.bar2{height:8px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}.bar2 i{display:block;height:100%;background:linear-gradient(90deg,#2fb34a,#8be05a)}
/* misc overlays */
.prompt{position:absolute;left:50%;bottom:calc(19.5% + 6px);transform:translateX(-50%);background:var(--panel);border:1px solid var(--g);border-radius:999px;padding:7px 18px;font-weight:600;box-shadow:0 0 14px rgba(70,224,90,.45)}
body.play .prompt{bottom:14%}
.prompt kbd{background:#fff;color:#111;border-radius:5px;padding:1px 7px;margin-right:6px;font-weight:700}
.toast{position:absolute;left:50%;top:14%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:8}
.toast div{background:rgba(10,15,12,.88);border:1px solid var(--line);border-radius:10px;padding:7px 14px;animation:tin .25s,tout .5s 3.6s forwards;max-width:80vw;text-align:center}
.toast .mission{border-color:var(--gold);color:#ffe7a8}.toast .kill{border-color:#ff8d6a}.toast .fish{border-color:#5cc6ff}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}}@keyframes tout{to{opacity:0}}
.tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}.tags span{position:absolute;transform:translate(-50%,-100%);font-size:11px;background:rgba(10,15,12,.7);padding:1px 6px;border-radius:6px;white-space:nowrap;border:1px solid rgba(255,255,255,.18)}
.journal{position:absolute;left:62px;top:10px;max-width:min(320px,60vw);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 11px;text-align:left;font-size:12.5px}
.journal b{display:block;font-size:12.5px}.journal .bar2{margin-top:5px}
body:not(.play) .journal{display:none}
.photobar{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:9px 14px;max-width:96%;z-index:7}
.photobar label{display:flex;align-items:center;gap:6px;font-size:12px;color:#cfdbca}.photobar input[type=range]{width:96px;accent-color:#46e05a}
body.photo .stats,body.photo .compass,body.photo .side,body.photo .journal,body.photo .prompt,body.photo .menubtn,body.photo .touch{display:none}
body.photo .photobar{display:flex}
.touch{position:absolute;inset:auto 0 0 0;height:0;pointer-events:none;z-index:4}
.joy{position:absolute;left:18px;bottom:calc(19.5% + 24px);width:112px;height:112px;border-radius:50%;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.3);pointer-events:auto;touch-action:none}
.joy i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(255,255,255,.45)}
body.play .joy{bottom:24px}body.play .tb{bottom:24px}
.tb{position:absolute;right:18px;bottom:calc(19.5% + 24px);display:flex;flex-direction:column;gap:10px;pointer-events:auto}
.tb button{width:70px;height:70px;border-radius:50%;background:rgba(30,90,40,.6);border:2px solid rgba(120,255,140,.55);font-weight:700;touch-action:none}
.loading{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#16301f,#07100a);display:flex;align-items:center;justify-content:center;z-index:20;text-align:center;transition:opacity .5s}
.loading.hide{opacity:0;pointer-events:none}.loading b{font-size:26px}.bar{width:260px;height:8px;border-radius:5px;background:rgba(255,255,255,.14);margin:10px auto 0;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--g);transition:width .2s}
.over{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:12}.over[hidden]{display:none}.over>div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 26px;max-width:min(440px,90vw);text-align:center}
.over button{margin:6px;background:linear-gradient(#2a8a3a,#1b5f27);border:1px solid #58e06c;border-radius:8px;padding:8px 14px;font-weight:600}
[hidden]{display:none!important}
@media (max-width:760px){
  .title{max-width:62%}.emblem{width:62px}.tag{margin-left:0;letter-spacing:.14em;font-size:6.5px}.logo .l1{font-size:30px}.logo .l2{font-size:27px}
  .menu{top:22%;width:50px}.menu button{padding:9px 0;justify-content:center}.menu button span{display:none}.menu button svg{width:26px;height:26px}
  .stats{right:84px;top:8px;padding:2px 3px}.st{padding:3px 6px;gap:3px}.st svg{width:17px;height:17px}.st b{font-size:13px}.clock{padding:2px 5px}.clock svg{width:22px;height:22px}.clock b{font-size:10px}.clock em{font-size:11px}
  .compass{width:78px;top:6px;right:4px}.side{top:26%;width:92px}.side>button{padding:6px 8px;font-size:10.5px}.side>button svg{width:20px;height:20px}.sea{padding:5px 6px}.sea svg{width:24px;height:24px}.sea b{font-size:10px}.sea em{font-size:12px}
  .biomes{grid-template-columns:repeat(7,minmax(78px,1fr));overflow-x:auto;height:18%;gap:6px;left:6px;right:6px}.bc .nm{font-size:10px;gap:4px;padding:2px 5px}.bc .nm svg{width:12px;height:12px}
  .panel{left:58px!important;right:6px;width:auto;top:9%;max-height:62%}body.play .panel{left:58px}
  .journal{top:62px;left:8px;max-width:58vw}.prompt{bottom:calc(19.5% + 6px);font-size:12px}.joy{width:96px;height:96px}.tb button{width:60px;height:60px}
}