*{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);z-index:60;pointer-events:auto}
#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}

/* v1.12 animated Avatar + pannable/zoomable exploration map */
#cv{cursor:grab;touch-action:none}
#cv.dragging{cursor:grabbing}
#mapnav{position:absolute;left:7px;top:7px;z-index:7;display:flex;align-items:center;gap:3px;background:rgba(0,0,0,.78);border:1px solid #444;padding:3px;box-shadow:0 1px 8px #000}
#mapnav button{background:#111;border:1px solid #666;color:#e8c040;font:10px 'Courier New',monospace;padding:3px 6px;cursor:pointer;min-width:25px}
#mapnav button:hover{background:#e8c040;color:#000;border-color:#e8c040}
#mapzoomlabel{min-width:34px;text-align:center;color:#aaa;font-size:9px}




/* v1.23 authoritative gameplay layout */
html, body {
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
}
body {
  font-size:15px;
}
#wrap {
  width:100vw;
  height:100vh;
  max-width:none;
  margin:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#title {
  position:absolute;
  inset:0;
  z-index:100;
}
#glay {
  position:relative;
  width:100vw;
  height:100vh;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  grid-template-columns:220px minmax(0,1fr) 220px;
  grid-template-rows:100vh;
  background:#050505;
}
#lp {
  position:relative;
  inset:auto;
  grid-column:2;
  grid-row:1;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
#mc {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border-left:1px solid #555;
  border-right:1px solid #555;
  background:#000;
  overflow:hidden;
}
#cv {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block;
  cursor:crosshair;
  touch-action:none;
}
#cv.dragging { cursor:grabbing; }

.game-sidebar {
  position:relative;
  inset:auto;
  width:auto;
  height:100vh;
  min-width:0;
  min-height:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:9px 7px;
  overflow:hidden;
  background:linear-gradient(180deg,#07090d,#0b0b0f);
  box-shadow:none;
  backdrop-filter:none;
  z-index:12;
}
#leftbar {
  grid-column:1;
  grid-row:1;
  border-right:1px solid #555;
}
#rightbar {
  grid-column:3;
  grid-row:1;
  border-left:1px solid #555;
}
.game-identity {
  flex-shrink:0;
  text-align:center;
  padding:5px 3px 9px;
  border-bottom:1px solid #555;
  line-height:1.15;
}
.game-name {
  color:#e8c040;
  font-size:22px;
  font-weight:bold;
  letter-spacing:4px;
}
.game-subname {
  color:#b9b9b9;
  font-size:11px;
  letter-spacing:1.4px;
  margin-top:3px;
}
.game-version {
  color:#777;
  font-size:12px;
  margin-top:5px;
}
.sidebar-title {
  color:#e8c040;
  font-size:16px;
  letter-spacing:2px;
  text-align:center;
  border-bottom:1px solid #454545;
  padding:3px 0 8px;
  flex-shrink:0;
}
#leftbar #sb {
  position:static;
  width:auto;
  background:#090a0d;
  border:1px solid #333;
  padding:6px 7px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px 8px;
  box-shadow:none;
  flex-shrink:0;
}
#leftbar .sl { font-size:13px; }
#leftbar .sv { font-size:14px; }
#leftbar #swp { font-size:13px !important; }

#leftbar #travelintel,
#leftbar #objective,
#leftbar #inv {
  position:static;
  background:#090a0d !important;
  border:1px solid #333;
  padding:6px 7px;
  box-shadow:none;
  flex-shrink:0;
  font-size:14px;
  line-height:1.5;
}
#leftbar #inv {
  max-height:130px;
  overflow-y:auto;
}
#leftbar .log-title {
  margin:0;
  padding:2px 1px 0;
  flex-shrink:0;
}
#leftbar #log {
  position:static;
  flex:1;
  min-height:80px;
  max-height:none;
  background:#090a0d;
  border:1px solid #333;
  overflow-y:auto;
  font-size:13px;
  line-height:1.55;
}
.it, .log-title {
  font-size:14px;
  letter-spacing:1px;
}
#objtext,#terraintext,#neartext,#waypointtext,#ivl {
  font-size:14px;
  line-height:1.5;
}

#rightbar #ap {
  position:static;
  display:flex;
  flex-direction:column;
  gap:6px;
  height:100%;
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
}
.travel-heading {
  color:#e8c040;
  font-size:15px;
  text-align:center;
  letter-spacing:1px;
  padding:7px;
  border:1px solid #4b4322;
  background:#1d1908;
}
#travelstatus {
  color:#aaa;
  font-size:13px;
  text-align:center;
  line-height:1.5;
  padding:6px 3px;
}
#travelstatus.traveling { color:#e8c040; }
#travelstatus.blocked { color:#e04040; }
.control-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
#rightbar .ab {
  min-height:38px;
  padding:6px 4px;
  font-size:14px;
  width:100%;
}
#rightbar .ab.primary { border-color:#e8c040;color:#e8c040; }
#rightbar .ab.danger { border-color:#804040;color:#e07070; }
#rightbar .camp-btn { border-color:#806020;color:#c08020; }
.control-help {
  margin-top:auto;
  border-top:1px solid #333;
  padding-top:6px;
  color:#777;
  font-size:12px;
  line-height:1.75;
  text-align:center;
  flex-shrink:0;
}
#mapnav {
  position:absolute;
  left:10px;
  top:10px;
  z-index:20;
}
#mapnav button {
  font-size:13px;
  padding:5px 8px;
  min-width:32px;
}
#mapzoomlabel {
  font-size:12px;
  min-width:42px;
}

/* Keep overlays constrained to the actual center viewport. */
#dov, #campov, .ov {
  max-width:100%;
  max-height:100%;
}

/* Smaller screens keep sidebars usable without stealing the whole map. */
@media (max-width:1050px) {
  #glay { grid-template-columns:190px minmax(0,1fr) 190px; }
  .game-sidebar { padding:7px 5px; }
  #rightbar .ab { font-size:12px; min-height:34px; }
  #leftbar #travelintel,#leftbar #objective,#leftbar #inv,
  #objtext,#terraintext,#neartext,#waypointtext,#ivl { font-size:12px; }
  #leftbar #log { font-size:12px; }
}
@media (max-width:760px) {
  #glay { grid-template-columns:160px minmax(0,1fr) 160px; }
  .sidebar-title { font-size:13px; }
  .game-name { font-size:17px; }
  .game-subname { font-size:9px; }
  #leftbar #sb { font-size:11px; gap:2px 6px; }
  #leftbar .sl,#leftbar .sv { font-size:11px; }
  #leftbar #inv { display:none; }
  #leftbar #travelintel,#leftbar #objective,
  #objtext,#terraintext,#neartext,#waypointtext { font-size:11px; }
  #leftbar #log { font-size:11px; min-height:65px; }
  #rightbar .control-grid { grid-template-columns:1fr; }
  #rightbar .ab { font-size:11px; min-height:29px; padding:3px; }
  .control-help { display:none; }
}