:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-synthesis:none;background:#071322;color:#ebf4fb}
*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden}
button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.37;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ffce81;outline-offset:3px}
#world{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;background:radial-gradient(circle at 42% 30%,#1a435d,#071322)}
.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,13,26,.55),transparent 42%,rgba(2,13,27,.3)),linear-gradient(180deg,rgba(4,13,26,.65),transparent 28%,transparent 75%,rgba(3,10,20,.9))}
.shell{position:relative;z-index:2;display:flex;flex-direction:column;height:100dvh;padding:18px clamp(12px,2vw,32px) 20px;pointer-events:none;gap:14px}
.shell button,.shell input,.shell select,.shell [role=tab],.shell .panel,.shell .scroll{pointer-events:auto}
.header{display:flex;align-items:center;gap:20px;min-height:60px}
.brand{display:flex;align-items:center;gap:12px;min-width:195px}
.mark{display:grid;place-items:center;width:42px;height:42px;border:1px solid #ecc77d79;border-radius:12px;background:linear-gradient(145deg,#334d4d,#10263a);color:#f6ca76;font-size:29px;box-shadow:0 0 24px #dfb46824}
.brand h1{margin:0;font-size:18px;letter-spacing:.13em;font-weight:800}.brand small{font-size:10px;color:#c4d2da;letter-spacing:.26em}
.status{display:flex;align-items:center;gap:7px;background:#132c40bd;padding:8px 12px;border:1px solid #85b3bc30;border-radius:100px;font-size:11px;color:#accad8;white-space:nowrap}
.status i{width:7px;height:7px;background:#f6c878;border-radius:50%;box-shadow:0 0 10px #f6c878}
.resources{display:flex;flex-wrap:wrap;gap:7px;margin-left:auto;justify-content:flex-end}
.resource{min-width:91px;border-radius:12px;background:#0b2235df;box-shadow:inset 0 0 0 1px #a2e8ef20;padding:9px 12px;display:flex;align-items:center;gap:10px}
.resource .symbol{font-size:21px}.resource span:last-child{display:flex;flex-direction:column;line-height:1.25}
.resource strong{font-size:14px;letter-spacing:.01em}.resource small{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#9db7c4}
.middle{display:flex;align-items:stretch;justify-content:space-between;flex:1;min-height:0;gap:16px}
.leftstack{display:flex;flex-direction:column;justify-content:space-between;max-width:300px;min-width:250px;padding-top:20px}
.eyebrow{letter-spacing:.24em;font-size:10px;font-weight:800;text-transform:uppercase;color:#e4c87e}
.location h2{margin:9px 0;font-family:Georgia,serif;font-size:clamp(25px,3.4vw,46px);line-height:1.06;text-shadow:0 3px 28px #020b19}
.subtext{max-width:245px;font-size:12px;color:#a3bfcb;line-height:1.7}
.chapter{margin-top:12px;display:inline-block;border-bottom:1px solid #d6af6570;padding-bottom:7px;color:#f6d38b;font-size:11px;letter-spacing:.08em}
.legend{border-left:1px solid #eabf7158;padding-left:14px;margin-bottom:36px}.legend strong{font-size:13px}.legend p{font-size:11px;color:#a6bcc7;line-height:1.7;margin:6px 0 0}
.panel{display:flex;flex-direction:column;width:min(368px,33vw);min-width:310px;max-height:100%;background:linear-gradient(165deg,rgba(12,34,52,.95),rgba(7,21,37,.92));border:1px solid #a9c9dd2b;border-radius:19px;box-shadow:0 18px 60px #0007,inset 0 1px 0 #f7e5b51c;backdrop-filter:blur(20px);overflow:hidden}
.paneltop{padding:22px 21px 14px;border-bottom:1px solid #ffffff14}
.paneltop h2{font-family:Georgia,serif;font-size:25px;margin:7px 0 0;font-weight:500}
.scroll{flex:1;overflow:auto;min-height:0;padding:18px 20px 20px}
.scroll::-webkit-scrollbar{width:5px}.scroll::-webkit-scrollbar-thumb{background:#7995a466;border-radius:10px}
.card{border:1px solid #c0dfdc25;border-radius:13px;padding:13px 14px;margin-bottom:10px;background:#17354a80}
.card strong{font-size:14px}.card p{color:#a8c1cb;font-size:11px;line-height:1.6;margin:6px 0 0}
.card header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tag{display:inline-flex;font-size:10px;color:#ffdfa4;border:1px solid #cfac6170;border-radius:40px;padding:3px 8px}
.card.active{border-color:#e7c67c99;background:#6b5b3840}
.card .cost{font-size:11px;letter-spacing:.02em;color:#e0c99c;margin:11px 0}
.btn{display:inline-flex;justify-content:center;align-items:center;border-radius:9px;border:1px solid #c7d7df3d;background:#22455d;color:#f1f8fb;padding:10px 13px;font-weight:700;font-size:12px;transition:.15s}
.btn:hover:enabled{background:#315a71;transform:translateY(-1px)}
.btn.gold{color:#172a32;border:1px solid #ffde9c;background:linear-gradient(115deg,#f5c977,#fff0bb);box-shadow:0 6px 22px #f3bd6a33}
.btn.gold:hover:enabled{background:#fff1c5}
.btn.block{display:flex;width:100%;margin-top:8px}.btn.ghost{background:transparent}
.row{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:11px;font-size:12px}
.row select,.row input,.field{min-width:0;width:100%;background:#0d2437;color:#f4f4f3;border:1px solid #a9c9dd50;padding:10px 12px;border-radius:8px}
.formlabel{display:block;color:#b9cbd3;font-size:11px;margin:11px 0 6px}
.activity{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.activity div{font-size:11px;color:#b6cdd2;border-left:2px solid #a2cdb468;padding-left:11px;line-height:1.4}
.dock{align-self:center;display:flex;gap:7px;max-width:100%;overflow-x:auto;border-radius:17px;background:#061829e8;padding:8px;border:1px solid #9cbfd03a;box-shadow:0 12px 40px #0007;pointer-events:auto}
.dock button{display:flex;gap:5px;align-items:center;flex-direction:column;border:0;background:transparent;color:#94afbc;padding:9px 15px;border-radius:10px;min-width:70px;font-size:10px;font-weight:650}
.dock button span:first-child{font-size:21px}.dock button[aria-selected=true]{background:linear-gradient(135deg,#38556b,#2b475a);color:#ffdb94;box-shadow:inset 0 0 0 1px #f6cd793d}
#toast{position:absolute;z-index:20;left:50%;top:95px;transform:translate(-50%,-10px);background:#213a44;border:1px solid #f7d18d86;border-radius:11px;padding:12px 20px;color:#fff0c0;font-size:13px;opacity:0;pointer-events:none;transition:.25s;max-width:min(85vw,510px);text-align:center}
#toast.visible{opacity:1;transform:translate(-50%,0)}
.badgeline{display:flex;justify-content:space-between;align-items:center;gap:9px;font-size:11px;color:#a5c7cd}
.mini{font-size:10px;color:#8caab6}.progress{height:6px;background:#142a3b;border-radius:4px;overflow:hidden;margin:10px 0}.progress>i{display:block;height:100%;background:linear-gradient(90deg,#43c49c,#f9ca79)}
.battlebar{display:flex;gap:6px}.battlebar>*{flex:1}
dialog{border:1px solid #e0b97950;background:#0e2535;color:#f1f8fb;border-radius:16px;box-shadow:0 22px 60px #000b;padding:25px;max-width:min(90vw,440px)}
dialog::backdrop{background:#020c18a8}
@media(max-width:960px){.status{display:none}.leftstack{min-width:155px;max-width:185px}.legend{display:none}.panel{width:330px;min-width:310px}.header{gap:8px}.resource{min-width:70px;padding:6px 8px}.resource .symbol{font-size:17px}}
@media(max-width:700px){.shell{padding:10px 9px;gap:8px}.header{flex-wrap:wrap;min-height:unset;gap:6px}.brand{min-width:0;margin-right:auto}.brand h1{font-size:15px}.brand small{font-size:8px}.mark{width:34px;height:34px;font-size:22px}.resources{flex-wrap:nowrap;width:100%;justify-content:space-between;order:2}.resource{flex:1;min-width:0;gap:5px;padding:6px}.resource strong{font-size:12px}.resource small{font-size:8px}.middle{flex-direction:column;justify-content:space-between}.leftstack{padding:5px 5px 0;max-width:unset;min-width:0}.location h2{font-size:24px;margin:2px 0}.eyebrow{font-size:9px}.subtext,.chapter{display:none}.panel{align-self:center;width:100%;min-width:0;max-height:38dvh;border-radius:13px}.paneltop{padding:10px 14px 8px}.paneltop h2{font-size:18px;margin:3px 0}.scroll{padding:10px 13px}.dock{width:100%;justify-content:space-between;border-radius:13px}.dock button{min-width:55px;padding:7px;font-size:9px}.dock button span:first-child{font-size:18px}#toast{top:102px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}