*{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.18 full-viewport exploration + click-to-travel */
#glay{position:relative;display:none;flex:1;min-height:0;padding:0;overflow:hidden}
#lp{position:absolute;inset:0;display:block;min-width:0;min-height:0}
#mc{position:absolute;inset:0;border:0;overflow:hidden;background:#000}
#sb{
  position:absolute;top:8px;right:8px;z-index:12;width:min(340px,calc(100vw - 16px));
  background:rgba(5,5,8,.88);border:1px solid #444;padding:5px 8px;
  grid-template-columns:repeat(3,1fr);box-shadow:0 2px 12px #000;backdrop-filter:blur(2px)
}
#rp{
  position:absolute;right:8px;bottom:8px;z-index:12;width:min(260px,calc(100vw - 16px));
  max-height:calc(100vh - 118px);display:flex;flex-direction:column;gap:4px;min-height:0;
  pointer-events:none
}
#rp>*{pointer-events:auto;background:rgba(5,5,8,.88);box-shadow:0 2px 12px #000;backdrop-filter:blur(2px)}
#log{flex:1;min-height:72px;max-height:160px}
#ap{flex-shrink:0}
#travelintel,#objective,#inv{background:rgba(5,5,8,.88)!important}
#cv{cursor:crosshair;touch-action:none}
#cv.dragging{cursor:grabbing}
#mapnav{left:8px;top:8px}
#travelstatus.traveling{color:#e8c040}
#travelstatus.blocked{color:#e04040}
@media(max-width:760px){
  #sb{left:8px;right:8px;width:auto;grid-template-columns:repeat(4,1fr);font-size:9px}
  #rp{right:6px;bottom:6px;width:min(240px,58vw);max-height:calc(100vh - 126px)}
  #inv,#travelintel{display:none}
  #log{max-height:120px}
}

/* v1.19 dual-sidebar full-viewport interface */
#glay{position:relative;display:none;flex:1;min-height:0;padding:0;overflow:hidden}
#lp{position:absolute;inset:0;display:block;min-width:0;min-height:0;z-index:1}
#mc{position:absolute;inset:0;border:0;overflow:hidden;background:#000}
.game-sidebar{
  position:absolute;top:0;bottom:0;z-index:12;width:248px;
  display:flex;flex-direction:column;gap:6px;padding:10px 9px;
  background:linear-gradient(180deg,rgba(3,5,8,.94),rgba(5,5,8,.86));
  border-color:#3b3b3b;box-shadow:0 0 20px rgba(0,0,0,.75);backdrop-filter:blur(3px);
  overflow:hidden
}
#leftbar{left:0;border-right:1px solid #555}
#rightbar{right:0;border-left:1px solid #555}
.sidebar-title{color:#e8c040;font-size:12px;letter-spacing:2px;text-align:center;border-bottom:1px solid #454545;padding:1px 0 6px;flex-shrink:0}
#leftbar #sb{position:static;width:auto;background:rgba(5,5,8,.72);border:1px solid #333;padding:6px 7px;display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;box-shadow:none;backdrop-filter:none;flex-shrink:0}
#leftbar #travelintel,#leftbar #objective,#leftbar #inv{position:static;background:rgba(5,5,8,.72)!important;border:1px solid #333;box-shadow:none;backdrop-filter:none;flex-shrink:0}
#leftbar #inv{max-height:150px;overflow-y:auto}
#leftbar .log-title{margin:0;padding:2px 1px 0;flex-shrink:0}
#leftbar #log{position:static;flex:1;min-height:90px;max-height:none;background:rgba(5,5,8,.72);border:1px solid #333;box-shadow:none;backdrop-filter:none;overflow-y:auto}
#rightbar #ap{position:static;display:flex;flex-direction:column;gap:7px;background:transparent;border:0;padding:0;box-shadow:none;backdrop-filter:none;height:100%}
.travel-heading{color:#e8c040;font-size:11px;text-align:center;letter-spacing:1px;padding:4px;border:1px solid #4b4322;background:rgba(30,25,5,.62)}
#travelstatus{color:#777;font-size:10px;text-align:center;line-height:1.45;padding:4px 2px}
#travelstatus.traveling{color:#e8c040}
#travelstatus.blocked{color:#e04040}
.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#rightbar .ab{min-height:38px;padding:6px 5px;font-size:11px;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:8px;color:#666;font-size:10px;line-height:1.65;text-align:center;flex-shrink:0}
#mapnav{left:258px;top:8px}
#cv{cursor:crosshair;touch-action:none}
#cv.dragging{cursor:grabbing}
@media(max-width:820px){
  .game-sidebar{width:205px;padding:7px 6px;gap:4px}
  #leftbar #sb{grid-template-columns:1fr 1fr;font-size:9px;gap:2px 7px}
  #leftbar #inv{display:none}
  #leftbar #log{min-height:70px;font-size:10px}
  #rightbar .ab{font-size:10px;min-height:34px}
  #mapnav{left:214px}
}
@media(max-width:560px){
  .game-sidebar{width:158px;padding:5px 4px}
  #leftbar #travelintel,#leftbar #inv{display:none!important}
  #leftbar #objective{font-size:9px}
  #leftbar #log{font-size:9px;line-height:1.35}
  #rightbar .control-grid{grid-template-columns:1fr}
  #rightbar .ab{min-height:28px;padding:3px;font-size:9px}
  .control-help{display:none}
  #mapnav{left:166px}
}


/* v1.20 true three-column viewport + larger typography */
html,body{width:100%;height:100%;overflow:hidden}
body{font-size:15px}
#wrap{height:100vh;min-height:0}
#glay{
  position:relative;display:none;flex:1;min-height:0;overflow:hidden;
  grid-template-columns:290px minmax(0,1fr) 290px;
  grid-template-rows:minmax(0,1fr);
  background:#050505;
}
#glay.active-layout{display:grid}
#lp{
  position:relative;inset:auto;grid-column:2;grid-row:1;
  min-width:0;min-height:0;display:block;z-index:1;overflow:hidden
}
#mc{position:absolute;inset:0;border-left:1px solid #555;border-right:1px solid #555;overflow:hidden;background:#000}
.game-sidebar{
  position:relative;inset:auto;top:auto;bottom:auto;left:auto;right:auto;
  width:auto;min-width:0;height:auto;z-index:12;
  padding:12px 11px;gap:8px;overflow:hidden;box-sizing:border-box;
  background:linear-gradient(180deg,#07090d,#0b0b0f);
  box-shadow:none;backdrop-filter:none
}
#leftbar{grid-column:1;grid-row:1;border-right:1px solid #555}
#rightbar{grid-column:3;grid-row:1;border-left:1px solid #555}
.sidebar-title{font-size:16px;letter-spacing:2px;padding:3px 0 8px}
#leftbar #sb{
  font-size:14px;padding:8px 9px;gap:5px 12px;
  grid-template-columns:1fr 1fr
}
#leftbar .sl{font-size:13px}
#leftbar .sv{font-size:14px}
#leftbar #swp{font-size:13px!important}
#leftbar #travelintel,#leftbar #objective,#leftbar #inv{
  font-size:14px;line-height:1.5;padding:8px 9px
}
#leftbar #inv{max-height:180px}
.it,.log-title{font-size:14px;letter-spacing:1px}
#objtext,#terraintext,#neartext,#waypointtext,#ivl{font-size:14px;line-height:1.5}
#leftbar #log{font-size:13px;line-height:1.55;min-height:110px}
.travel-heading{font-size:15px;padding:7px}
#travelstatus{font-size:13px;line-height:1.5;padding:6px 3px}
#rightbar #ap{gap:9px}
.control-grid{gap:8px}
#rightbar .ab{min-height:44px;padding:8px 6px;font-size:14px}
.control-help{font-size:12px;line-height:1.75;padding-top:10px}
#mapnav{left:10px;top:10px}
#mapnav button{font-size:13px;padding:5px 8px;min-width:32px}
#mapzoomlabel{font-size:12px;min-width:42px}
#title .tsub{font-size:18px}
#title .mbtn,.mbtn{font-size:14px;padding:9px 14px}
.ov{font-size:14px}
.cl{font-size:13px;padding:7px 12px}
@media(max-width:1050px){
  #glay{grid-template-columns:250px minmax(0,1fr) 250px}
  .game-sidebar{padding:9px 8px;gap:6px}
  #rightbar .ab{font-size:12px;min-height:39px}
  #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:205px minmax(0,1fr) 205px}
  .sidebar-title{font-size:13px}
  #leftbar #sb{font-size:11px;gap:3px 7px}
  #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:70px}
  #rightbar .control-grid{grid-template-columns:1fr}
  #rightbar .ab{font-size:11px;min-height:31px;padding:4px}
  .control-help{display:none}
}


/* v1.21 larger center map viewport */
#glay{
  grid-template-columns:220px minmax(0,1fr) 220px;
}
.game-sidebar{
  padding:9px 7px;
  gap:6px;
}
#leftbar #sb{padding:6px 7px;gap:3px 8px}
#leftbar #travelintel,#leftbar #objective,#leftbar #inv{padding:6px 7px}
#leftbar #inv{max-height:130px}
#rightbar #ap{gap:6px}
.control-grid{gap:5px}
#rightbar .ab{min-height:38px;padding:6px 4px}
.control-help{padding-top:6px}
@media(min-width:1400px){
  #glay{grid-template-columns:230px minmax(0,1fr) 230px}
}
@media(max-width:1050px){
  #glay{grid-template-columns:190px minmax(0,1fr) 190px}
}
@media(max-width:760px){
  #glay{grid-template-columns:165px minmax(0,1fr) 165px}
}