*{box-sizing:border-box;margin:0;padding:0}
body{background:#000;display:flex;justify-content:center;padding:0;margin:0;font-family:'Courier New',monospace;color:#aaa;height:100vh;overflow:hidden}
#wrap{width:100%;height:100vh;display:flex;flex-direction:column;overflow:hidden}
#title{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.tart{color:#e8c040;font-size:11px;line-height:1.2;text-align:center;letter-spacing:2px;white-space:pre}
.tsub{color:#c08020;font-size:13px;letter-spacing:4px}
#title{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.mbtn{background:#111;border:1px solid #e8c040;color:#e8c040;font-family:'Courier New',monospace;font-size:13px;padding:8px 32px;cursor:pointer;letter-spacing:2px}
.mbtn:hover{background:#e8c040;color:#000}
#glay{display:none;flex-direction:row;gap:6px;flex:1;min-height:0;padding:6px}
#lp{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;min-height:0}
#mc{border:1px solid #333;position:relative;overflow:hidden;background:#000;flex:1;min-height:0}
canvas{display:block;image-rendering:pixelated}
#sb{background:#0a0a0a;border:1px solid #333;padding:5px 8px;font-size:10px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px 8px}
.sr{display:flex;justify-content:space-between;gap:4px}
.sl{color:#555}.sv{color:#e8c040;font-weight:bold}
.sv.h{color:#e04040}.sv.m{color:#4080e0}.sv.g{color:#40c040}.sv.sp{color:#c080ff}
#rp{width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;min-height:0}
#log{background:#050508;border:1px solid #333;flex:1;overflow-y:auto;padding:6px;font-size:11px;line-height:1.55;min-height:60px}
.lg{color:#999}.lg.s{color:#e8c040}.lg.c{color:#e04040}.lg.l{color:#40c040}.lg.m{color:#8080ff}.lg.q{color:#ff9040}.lg.sp{color:#c080ff}
#ap{background:#050508;border:1px solid #333;padding:7px;display:flex;flex-direction:column;gap:3px}
.ar{display:flex;gap:3px;justify-content:center}
.ab{background:#111;border:1px solid #444;color:#aaa;font-family:'Courier New',monospace;font-size:11px;padding:4px 7px;cursor:pointer;text-align:center}
.ab:hover{border-color:#e8c040;color:#e8c040;background:#1a1a0a}
.ab.d{font-size:13px;width:38px;height:32px}
.ab.qb{border-color:#ff9040;color:#ff9040;padding:4px 8px}
.ab.qb:hover{background:#1a0a00}
#inv{background:#050508;border:1px solid #333;padding:5px;font-size:11px}
.it{color:#e8c040;margin-bottom:3px;font-size:10px;letter-spacing:1px}
.ii{color:#888;padding:1px 0;display:flex;justify-content:space-between}
.ov{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;overflow-y:auto}
#cov{background:rgba(0,0,0,.93)}
#tov{background:rgba(0,0,0,.95)}
#qov{background:rgba(0,0,0,.97);justify-content:flex-start;padding-top:12px}
#sov{background:rgba(0,0,0,.97);justify-content:flex-start;padding-top:12px}
.ct{color:#e04040;font-size:13px;letter-spacing:2px}
.ea{color:#e04040;font-size:10px;line-height:1.15;text-align:center;white-space:pre}
.hbw{width:110px}
.hbl{font-size:10px;color:#555;margin-bottom:1px}
.hb{height:7px;background:#1a1a1a;border:1px solid #333}
.hbf{height:100%;background:#e04040;transition:width .3s}
.hbf.b{background:#4080e0}.hbf.p{background:#c080ff}
.cbs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.cb{background:#111;border:1px solid #555;color:#ccc;font-family:'Courier New',monospace;font-size:11px;padding:6px 14px;cursor:pointer}
.cb:hover{border-color:#e8c040;color:#e8c040}
.ttn{color:#e8c040;font-size:14px;letter-spacing:3px}
.tds{color:#777;font-size:11px;text-align:center;max-width:260px;line-height:1.6}
.tsh{display:flex;flex-direction:column;gap:4px;width:220px}
.sb2{background:#0a0a0a;border:1px solid #444;color:#ccc;font-family:'Courier New',monospace;font-size:11px;padding:6px 10px;cursor:pointer;display:flex;justify-content:space-between}
.sb2:hover{border-color:#e8c040;color:#e8c040}
.sb2.qs{border-color:#ff904055}
.sb2.qs:hover{border-color:#ff9040;color:#ff9040}
.cl{background:none;border:1px solid #444;color:#666;font-family:'Courier New',monospace;font-size:11px;padding:5px 18px;cursor:pointer;margin-top:3px}
.cl:hover{color:#aaa;border-color:#aaa}
.qot{color:#ff9040;font-size:13px;letter-spacing:3px;margin-bottom:3px}
.qc{width:100%;max-width:300px;border:1px solid #2a2a2a;padding:8px 10px;background:#06040a;margin-bottom:5px}
.qc.ac{border-color:#ff904077}.qc.dn{border-color:#40c04077;opacity:.65}
.qn{color:#ff9040;font-size:11px;letter-spacing:1px;margin-bottom:2px}
.qn.dn{color:#40c040}
.qd{color:#666;font-size:10px;line-height:1.5;margin-bottom:4px}
.qp{font-size:10px;color:#777}
.qr{font-size:10px;color:#40c040;margin-top:2px}
.qs2{font-size:10px;margin-top:2px}
.qs2.dn{color:#40c040}.qs2.ac{color:#ff9040}
.qb2{height:3px;background:#1a1a1a;margin-top:3px}
.qbf{height:100%;background:#ff9040}
.qbf.dn{background:#40c040}
.nq{color:#444;font-size:11px;text-align:center;margin-top:16px}
/* SPECIAL panel */
.spot{color:#c080ff;font-size:13px;letter-spacing:3px;margin-bottom:6px}
.sptbl{width:100%;max-width:300px;font-size:11px;border-collapse:collapse}
.sptbl td{padding:3px 8px;border-bottom:1px solid #1a1a1a}
.sptbl .sn{color:#c080ff}.sptbl .sv2{color:#e8c040;text-align:right}.sptbl .sb3{color:#555;font-size:10px}
.sp-bar{height:3px;background:#1a1a1a;margin-top:2px}
.sp-bf{height:100%;background:#c080ff;transition:width .3s}
.sp-note{color:#555;font-size:10px;text-align:center;max-width:290px;line-height:1.6;margin-top:4px}

/* v1.3 world map + objective enhancements */
#mapov{background:rgba(0,0,0,.985);justify-content:flex-start;padding-top:10px;z-index:18}
.map-title{color:#e8c040;font-size:13px;letter-spacing:3px;margin-bottom:4px}
#mapcv{width:min(78vh,480px);height:min(78vh,480px);max-width:92%;border:1px solid #444;background:#020202;image-rendering:pixelated}
.map-stats{color:#888;font-size:10px;text-align:center}
.map-legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:520px;font-size:9px;color:#777}
.map-you{color:#f8f040}
#objective{background:#050508;border:1px solid #333;padding:5px;font-size:10px;line-height:1.4}
#objtext{color:#ffb060}
@media(max-width:760px){#rp{width:205px}.map-legend{gap:5px}.ab{padding:4px 5px;font-size:10px}}

#travelintel{background:#050508;border:1px solid #333;padding:5px;font-size:10px;line-height:1.45;color:#aaa}
#neartext{color:#b8c8a8;margin-top:2px}


/* v1.5 Britannian Codex */
#codexov{background:rgba(0,0,0,.985);justify-content:flex-start;padding-top:12px;z-index:19}
.codex-title{color:#e8c040;font-size:14px;letter-spacing:3px;margin-bottom:3px}
.codex-summary{color:#888;font-size:10px;margin-bottom:8px;text-align:center}
.codex-columns{width:100%;max-width:660px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.codex-columns section{border:1px solid #333;background:#050508;padding:7px;min-height:150px}
.codex-columns h3{color:#c08020;font-size:10px;letter-spacing:1px;margin:0 0 6px}
.codex-grid{display:flex;flex-direction:column;gap:3px}
.codex-row,.codex-card{display:flex;justify-content:space-between;gap:6px;border-bottom:1px solid #171717;padding:3px 1px;font-size:9px;color:#999}
.codex-card{flex-direction:column;gap:1px}.codex-card b{color:#d0b050;font-size:9px}.codex-card span{color:#666}
.codex-card.locked{opacity:.42}.codex-card.locked b{color:#555}
@media(max-width:760px){.codex-columns{grid-template-columns:1fr;max-width:360px}.codex-columns section{min-height:auto}}

/* v1.6 waypoint navigation */
#waypointtext{color:#60d8ff;margin-top:2px}
.map-hint{color:#506b74;font-size:9px;text-align:center;margin-top:1px}
#mapcv{cursor:crosshair}


/* v1.8 achievements */
#achov{background:rgba(0,0,0,.985);justify-content:flex-start;padding-top:12px;z-index:20}
.ach-title{color:#e8c040;font-size:14px;letter-spacing:3px;margin-bottom:3px}
.ach-summary,.ach-note{color:#777;font-size:10px;text-align:center;max-width:560px;line-height:1.5}
.ach-list{width:100%;max-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:5px 0}
.ach-card{border:1px solid #333;background:#050508;padding:7px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.ach-card div{display:flex;flex-direction:column;gap:2px}.ach-card b{font-size:10px;color:#666;letter-spacing:1px}.ach-card span{font-size:9px;color:#555;line-height:1.4}.ach-card em{font-style:normal;font-size:9px;color:#806020;text-align:right;white-space:nowrap}
.ach-card.unlocked{border-color:#806020}.ach-card.unlocked b{color:#e8c040}.ach-card.unlocked span{color:#999}.ach-card.unlocked em{color:#40c040}
@media(max-width:760px){.ach-list{grid-template-columns:1fr;max-width:360px}}

/* v1.10 campaign arc */
.campaign-panel{width:100%;max-width:300px;border:1px solid #a87818;background:#120d03;padding:9px 10px;margin:0 0 9px;color:#d8c080}
.campaign-panel .cp-kicker{font-size:9px;letter-spacing:2px;color:#f0b840}
.campaign-panel .cp-title{font-size:13px;color:#ffe080;font-weight:bold;margin:3px 0}
.campaign-panel .cp-desc{font-size:10px;line-height:1.4;color:#c8b890}
.campaign-panel .cp-progress{font-size:10px;color:#70d8ff;margin-top:5px}
.campaign-panel.complete{border-color:#50c878;background:#06150b}.campaign-panel.complete .cp-title{color:#80f0a0}

.sb2.npc{border-color:#4e3668;background:#120c18}.sb2.npc:hover{border-color:#8050a8;background:#1c1028}
