:root {
  --pad: clamp(6px, 1.4vw, 14px);
  --gap: clamp(5px, 1vw, 10px);
  --font: clamp(13px, 1.35vw, 18px);
  --small: clamp(10px, 1vw, 13px);
  --button: clamp(12px, 1.3vw, 17px);
  --border: #666;
  --panel: #1b1b1b;
  --panel2: #252525;
  --ink: #eee;
  --dim: #aaa;
}
* { box-sizing: border-box; }
html, body { margin:0; width:100%; min-height:100%; background:#090909; color:var(--ink); }
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}
#game {
  width: min(1000px, 100vw);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: var(--pad);
  display: grid;
  grid-template-rows: minmax(150px, 34%) minmax(120px, 1fr) minmax(210px, 31%);
  gap: var(--gap);
}
#topPane {
  display:grid;
  grid-template-columns: 58% 42%;
  gap:var(--gap);
  min-height:0;
}
#scene, #stats, #log, #controls {
  border:1px solid var(--border);
  background:var(--panel);
  min-height:0;
}
#scene {
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 42%, #3b3b3b 0, #222 44%, #111 100%);
}
#sceneTerrain {
  font-family: Georgia, serif;
  font-size: clamp(78px, 14vw, 170px);
  opacity:.20;
  line-height:1;
  user-select:none;
}
#sceneCaption {
  position:absolute;
  left:0; right:0; bottom:0;
  padding:8px 10px;
  background:rgba(0,0,0,.72);
  font-weight:bold;
  font-size:clamp(12px, 1.2vw, 16px);
}
#stats { padding:10px; overflow:auto; }
.statHead {
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #444; padding-bottom:5px; margin-bottom:6px;
}
#deviceMode { color:var(--dim); font-size:var(--small); text-transform:uppercase; }
.statGrid {
  display:grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap:4px 8px;
  align-items:baseline;
  font-size:clamp(11px, 1.1vw, 15px);
}
.statGrid span { color:#bbb; }
.statGrid b { text-align:right; }
#log {
  padding:10px 12px;
  overflow-y:scroll;
  scrollbar-gutter:stable;
  line-height:1.34;
  background:#101010;
  white-space:normal;
}
.logLine { margin:0 0 7px 0; }
.logLine.system { color:#9a9a9a; font-style:italic; }
.logLine.bad { color:#f3b5b5; }
.logLine.good { color:#bde6b9; }
.logLine.story { color:#f0dfad; }
#controls { padding:var(--gap); }
#buttonGrid {
  height:100%;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(3, 1fr);
  gap:var(--gap);
}
.gameButton {
  min-width:0; min-height:0;
  border:1px solid #777;
  border-radius:5px;
  background:#292929;
  color:#fff;
  font:700 var(--button)/1.12 Arial, Helvetica, sans-serif;
  padding:6px;
  cursor:pointer;
  touch-action:manipulation;
}
.gameButton:hover { background:#373737; }
.gameButton:active { transform:translateY(1px); background:#444; }
.gameButton.center { border-color:#aaa; background:#333; }
.gameButton.disabled { color:#686868; background:#181818; border-color:#333; cursor:default; }
.buttonDir {
  display:block; color:#a9a9a9; font-size:.74em; margin-bottom:2px; font-weight:normal;
}
.buttonSub {
  display:block; color:#bcbcbc; font-size:.72em; margin-top:3px; font-weight:normal;
}

/* Modern device switch. JS adds mobile-ui using UA + coarse pointer + width. */
body.mobile-ui #game {
  width:100vw;
  height:100vh;
  height:100dvh;
  padding:max(5px, env(safe-area-inset-top)) max(5px, env(safe-area-inset-right))
          max(5px, env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
  grid-template-rows: 29% 1fr 38%;
}
body.mobile-ui #topPane { grid-template-columns:54% 46%; }
body.mobile-ui #stats { padding:6px; }
body.mobile-ui .statGrid {
  grid-template-columns:1fr auto 1fr auto;
  gap:2px 5px;
  font-size:clamp(10px, 3vw, 13px);
}
body.mobile-ui #log { padding:7px 8px; font-size:clamp(12px, 3.4vw, 15px); }
body.mobile-ui .gameButton { border-radius:4px; padding:4px; font-size:clamp(11px, 3.35vw, 15px); }
body.mobile-ui #sceneTerrain { font-size:clamp(62px, 23vw, 120px); }

@media (orientation: landscape) and (max-height: 560px) {
  #game, body.mobile-ui #game {
    grid-template-rows: 38% 1fr 43%;
  }
  #sceneTerrain { font-size:70px; }
  #sceneCaption { padding:4px 6px; font-size:11px; }
  #stats { padding:5px; }
  .statGrid { font-size:10px; gap:1px 5px; }
  #log { font-size:11px; padding:5px 7px; }
  .gameButton { font-size:11px; padding:2px; }
}


/* v0.2 desktop-only debug workspace */
#appShell {
  width:min(1320px, 100vw);
  height:100vh;
  height:100dvh;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1000px) minmax(220px, 300px);
  gap:10px;
  align-items:stretch;
  padding-right:6px;
}
#appShell #game {
  width:100%;
  margin:0;
}
#debugPanel {
  margin:var(--pad) 0;
  border:1px solid #555;
  background:#0d0d0d;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#debugHeader {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:7px 8px;
  border-bottom:1px solid #444;
  background:#171717;
  font-size:12px;
}
#debugToggle {
  border:1px solid #666;
  background:#222;
  color:#ddd;
  font:11px Arial, Helvetica, sans-serif;
  padding:3px 7px;
  cursor:pointer;
}
#debugText {
  margin:0;
  padding:8px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  color:#9fd3a8;
  font:11px/1.35 Consolas, "Courier New", monospace;
}
body.debug-hidden #appShell {
  grid-template-columns:minmax(0, 1000px);
  width:min(1000px,100vw);
}
body.debug-hidden #debugPanel { display:none; }

.actionSelectWrap {
  width:100%;
  height:100%;
  display:flex;
  align-items:stretch;
}
#actionSelect {
  width:100%;
  height:100%;
  min-height:0;
  border:1px solid #aaa;
  border-radius:5px;
  background:#333;
  color:#fff;
  font:700 var(--button)/1.12 Arial, Helvetica, sans-serif;
  text-align:center;
  text-align-last:center;
  padding:6px 2px;
  cursor:pointer;
}
#actionSelect option {
  background:#222;
  color:#fff;
  text-align:left;
}
body.mobile-ui #appShell {
  display:block;
  width:100vw;
  height:100vh;
  height:100dvh;
  padding:0;
}
body.mobile-ui #debugPanel { display:none !important; }
body.mobile-ui #actionSelect {
  font-size:clamp(11px, 3.35vw, 15px);
  padding:4px 1px;
}
@media (max-width:1080px) {
  body:not(.mobile-ui) #appShell {
    grid-template-columns:minmax(0,1fr) 240px;
  }
}


/* v0.4 left-side text map debugger */
#appShell {
  width:min(1600px, 100vw);
  grid-template-columns:minmax(250px, 320px) minmax(0, 1000px) minmax(220px, 300px);
}
#mapDebugPanel {
  margin:var(--pad) 0;
  border:1px solid #555;
  background:#0d0d0d;
  min-width:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#mapDebugHeader {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:7px 8px;
  border-bottom:1px solid #444;
  background:#171717;
  font-size:12px;
}
#mapDebugToggle {
  border:1px solid #666;
  background:#222;
  color:#ddd;
  font:11px Arial, Helvetica, sans-serif;
  padding:3px 7px;
  cursor:pointer;
}
#mapDebugText {
  margin:0;
  padding:8px;
  overflow:auto;
  white-space:pre;
  color:#b7c8b7;
  font:7px/1 Consolas, "Courier New", monospace;
  letter-spacing:0;
}
.mapPlayer {
  background:#fff;
  color:#000;
  font-weight:900;
}
body.map-debug-hidden #appShell {
  grid-template-columns:minmax(0,1000px) minmax(220px,300px);
  width:min(1320px,100vw);
}
body.map-debug-hidden #mapDebugPanel { display:none; }

body.map-debug-hidden.debug-hidden #appShell {
  grid-template-columns:minmax(0,1000px);
  width:min(1000px,100vw);
}

body.mobile-ui #mapDebugPanel { display:none !important; }

@media (max-width:1350px) {
  body:not(.mobile-ui) #appShell {
    grid-template-columns:250px minmax(0,1fr) 240px;
  }
}


/* v0.6 combat mode */
#buttonGrid.combatMode {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr;
  gap:var(--gap);
}
.combatButton {
  border:1px solid #888;
  border-radius:6px;
  background:#2c2c2c;
  color:#fff;
  font:700 clamp(20px, 2.7vw, 34px)/1 Arial, Helvetica, sans-serif;
  cursor:pointer;
  touch-action:manipulation;
}
.combatButton:active {
  transform:translateY(1px);
  background:#444;
}
body.mobile-ui .combatButton {
  font-size:clamp(22px, 7vw, 34px);
}


/* v0.7 town + shop modes */
#buttonGrid.townMode,
#buttonGrid.shopMode {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(3, 1fr);
  gap:var(--gap);
}
.townButton,
.shopButton {
  min-width:0;
  min-height:0;
  border:1px solid #777;
  border-radius:5px;
  background:#292929;
  color:#fff;
  font:700 var(--button)/1.12 Arial, Helvetica, sans-serif;
  padding:6px;
  cursor:pointer;
  touch-action:manipulation;
}
.townButton:active,
.shopButton:active {
  transform:translateY(1px);
  background:#444;
}
.townButton.center,
.shopButton.center {
  border-color:#aaa;
  background:#333;
}
body.mobile-ui .townButton,
body.mobile-ui .shopButton {
  font-size:clamp(11px, 3.35vw, 15px);
  padding:4px;
}


/* v0.8 town subareas */
#buttonGrid.subAreaMode {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:repeat(3, 1fr);
  gap:var(--gap);
}
.subAreaButton {
  min-width:0;
  min-height:0;
  border:1px solid #777;
  border-radius:5px;
  background:#292929;
  color:#fff;
  font:700 var(--button)/1.12 Arial, Helvetica, sans-serif;
  padding:6px;
  cursor:pointer;
  touch-action:manipulation;
}
.subAreaButton:active { transform:translateY(1px); background:#444; }
.subAreaButton.center { border-color:#aaa; background:#333; }
body.mobile-ui .subAreaButton {
  font-size:clamp(11px, 3.35vw, 15px);
  padding:4px;
}


/* v0.9 game-over mode */
#buttonGrid.gameOverMode {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr;
  gap:var(--gap);
}
.gameOverButton {
  border:1px solid #999;
  border-radius:6px;
  background:#252525;
  color:#fff;
  font:700 clamp(18px, 2.4vw, 30px)/1 Arial, Helvetica, sans-serif;
  cursor:pointer;
  touch-action:manipulation;
}
.gameOverButton:active {
  transform:translateY(1px);
  background:#444;
}
body.mobile-ui .gameOverButton {
  font-size:clamp(20px, 6.5vw, 32px);
}


/* v1.0 character creation / equipment */
.setupOverlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.94);padding:16px}
.setupOverlay.hidden{display:none}
.setupCard{width:min(520px,94vw);border:1px solid #777;background:#171717;padding:22px;text-align:center}
.setupCard h1{margin:0 0 8px}.setupCard p{color:#bbb;line-height:1.35}.setupChoices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.setupChoices button{min-height:72px;border:1px solid #888;background:#2b2b2b;color:#fff;font:700 20px Arial,sans-serif;cursor:pointer}
#setupPreview{color:#aaa;font:13px/1.5 Consolas,"Courier New",monospace}


/* v1.0.2 intro tweak */
#chooseNeither {
  grid-column:1 / -1;
  min-height:54px;
}

.weatherLine {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: 700;
  padding: 2px 0 8px;
  letter-spacing: .04em;
}

#sceneImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#scene.hasImage #sceneTerrain{ display:none; }


.aboutDialog {
  width:min(420px, calc(100vw - 32px));
  border:1px solid #777;
  padding:0;
  background:#111;
  color:#eee;
  box-shadow:0 12px 50px rgba(0,0,0,.75);
}
.aboutDialog::backdrop {
  background:rgba(0,0,0,.72);
}
.aboutBox {
  padding:24px 26px 20px;
  text-align:center;
  font-family:Arial, Helvetica, sans-serif;
}
.aboutTitle {
  font-family:Georgia, serif;
  font-size:28px;
  letter-spacing:2px;
  margin-bottom:14px;
}
.aboutVersion {
  font-size:16px;
  margin-bottom:20px;
}
.aboutCredit {
  font-size:18px;
  font-weight:bold;
  margin-bottom:26px;
}
.aboutClose {
  width:100%;
  min-height:44px;
  border:1px solid #777;
  background:#222;
  color:#eee;
  font-weight:bold;
  cursor:pointer;
}
.aboutClose:hover {
  background:#303030;
}

/* v1.8.1 optical reconnaissance */
#buttonGrid.lookFarMode{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(5,1fr);
  gap:3px;
}
.lookFarCell,.lookFarDone{
  min-width:0;min-height:0;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  border:1px solid #555;
  border-radius:4px;
  background:#1c1c1c;
  color:#bbb;
  font:700 clamp(9px,1vw,13px)/1.05 Arial,Helvetica,sans-serif;
  padding:2px;
}
.lookFarCell.outer{background:#151515;color:#aaa;border-color:#444}
.lookFarCell.inner{background:#222;color:#ddd}
.lookFarDone{
  background:#333;color:#fff;border-color:#999;cursor:pointer;
}
body.mobile-ui #buttonGrid.lookFarMode{gap:2px}
body.mobile-ui .lookFarCell,body.mobile-ui .lookFarDone{
  font-size:clamp(8px,2.5vw,11px);padding:1px;
}

.debugControls{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px;border-bottom:1px solid #444}.debugControls label{font:11px Arial;color:#bbb}.debugControls input{width:100%;box-sizing:border-box;background:#111;color:#eee;border:1px solid #555;padding:3px}.debugControls button{grid-column:1/-1;background:#292929;color:#fff;border:1px solid #666;padding:5px;cursor:pointer}

.statGrid .statBreak{display:block;height:7px}.statGrid{align-content:start}

#mapDebugRestore{position:fixed;left:4px;bottom:4px;z-index:9999;font-size:10px;padding:3px 5px;opacity:.55;display:none}
body.map-debug-hidden #mapDebugRestore{display:block}
.donationPanel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;align-items:center;width:100%}
.donationPanel input{width:100%;box-sizing:border-box;text-align:center;font-size:18px;padding:8px;background:#111;color:#eee;border:1px solid #777}
.donationPanel button{min-height:42px}

/* 1.13.1 polish / hotfix */
.gameButton:empty,.townButton:empty,.shopButton:empty,.subAreaButton:empty,.combatButton:empty{visibility:hidden;pointer-events:none}
.loadLabel{grid-column:1}
.loadValue{grid-column:2}
.loadBar{grid-column:1 / -1;font-family:Consolas,"Courier New",monospace;letter-spacing:-1px;color:#ddd;white-space:nowrap;overflow:hidden}

/* 1.14.0 debug defaults */
#debugRestore{position:fixed;right:4px;bottom:4px;z-index:9999;font-size:10px;padding:3px 5px;opacity:.55;display:none}
body.debug-hidden #debugRestore{display:block}
body:not(.debug-hidden) #debugRestore{display:none}
.loadLabel,.loadValue,.loadBar{display:none!important}

.debugTeleport{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:6px;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid currentColor}.debugTeleport strong{grid-column:1/-1}.debugTeleport button{grid-column:1/-1}.debugTeleport input{width:70px}

.logLine.actTitle{font-weight:700;}

/* 1.18.1: development controls must not exist visually on mobile/tablet UI. */
body.mobile-ui #debugRestore,
body.mobile-ui #mapDebugRestore,
body.mobile-ui #debugPanel,
body.mobile-ui #mapDebugPanel { display:none !important; }

/* 1.18.2: hard-disable development UI on phone/tablet/coarse-pointer layouts. */
@media (max-width:1100px), (hover:none) and (pointer:coarse) {
  #debugRestore,#mapDebugRestore,#debugPanel,#mapDebugPanel { display:none !important; visibility:hidden !important; pointer-events:none !important; }
}


/* v1.19.1 overworld map */
body.world-map-open{overflow:hidden}
.worldMapOverlay[hidden]{display:none!important}
.worldMapOverlay{
  position:fixed;inset:0;z-index:12000;display:flex;flex-direction:column;
  background:#15120e;color:#eadfca;font-family:Georgia,"Times New Roman",serif;
}
.worldMapHeader{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:58px;padding:10px 14px;box-sizing:border-box;
  background:#211b14;border-bottom:1px solid #5d5140;
}
.worldMapHeader>div{display:flex;flex-direction:column;min-width:0}
.worldMapHeader strong{font-size:18px;letter-spacing:1.5px}
#worldMapClose{
  min-width:94px;min-height:42px;padding:8px 14px;border:1px solid #85765e;border-radius:3px;
  background:#30281e;color:#f1e6cf;font-weight:700;cursor:pointer;
}
#worldMapClose:hover{background:#3b3125}
.worldMapScroller{
  flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  background:#17140f;scrollbar-color:#75654e #211b14;
}
#worldMapCanvas{display:block;image-rendering:auto;background:#17140f}
body.mobile-ui .worldMapHeader{min-height:54px;padding:7px 9px}
body.mobile-ui .worldMapHeader strong{font-size:16px}
body.mobile-ui #worldMapClose{min-width:82px;min-height:44px}