:root {
  --panel: rgb(28 20 14 / 0.86);
  --panel-2: rgb(44 32 22 / 0.92);
  --gold: #e8c26a;
  --gold-2: #b8893a;
  --gold-dark: #6b4a1e;
  --ink: #2a1c10;
  --parch: #f4e6c4;
  --parch-2: #e9d4a4;
  --text: #f6ecd6;
  --muted: #cbb893;
  --good: #7fe07a;
  --bad: #ff7a6a;
  --blue: #6ab8ff;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --frame: 0 0 0 1px #140c06, 0 0 0 3px var(--gold-2), 0 0 0 4px #140c06, 0 8px 24px rgb(0 0 0 / 0.45);
  font: 14px/1.35 var(--sans);
  color: var(--text);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #9fd0f0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body { overscroll-behavior: none; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 0 4px;
  border: 1px solid var(--gold-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgb(0 0 0 / 0.35);
  color: var(--gold);
  font: 700 11px/1.4 var(--sans);
  text-align: center;
}
canvas#world { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; z-index: 0; cursor: default; }
canvas#world.pointer { cursor: pointer; }
canvas#world.placing { cursor: crosshair; }
.noscript { position: fixed; inset: 0; margin: auto; height: fit-content; text-align: center; color: #222; font: 18px var(--serif); }

/* --- Logo and loading ---------------------------------------------------------- */

.logo {
  margin: 0;
  font: 700 clamp(46px, 9vw, 92px)/0.95 var(--serif);
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff6d0 0%, #f5d27a 45%, #c98a2c 55%, #f2c65a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px #3a220c;
  filter: drop-shadow(0 3px 0 #3a220c) drop-shadow(0 8px 16px rgb(0 0 0 / 0.45));
}
.logo.small { font-size: 44px; }

#loading {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, #6fb8e6, #2c6a9a 70%, #1d3a5a);
  transition: opacity 0.8s;
}
#loading.gone { opacity: 0; pointer-events: none; }
.loading-card { text-align: center; }
.spinner {
  width: 46px;
  height: 46px;
  margin: 22px auto 12px;
  border: 4px solid rgb(255 255 255 / 0.25);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-text { font: 18px var(--serif); color: #fff8e0; text-shadow: 0 2px 4px rgb(0 0 0 / 0.5); }

/* --- Title screen -------------------------------------------------------------- */

#title {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: start center;
  padding: max(16px, 5vh) 16px 16px;
  background: radial-gradient(ellipse at 50% 55%, rgb(0 0 0 / 0) 30%, rgb(10 20 30 / 0.45));
}
.title-card { max-width: 640px; text-align: center; animation: rise 1s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
.crest { font: 64px/1 var(--emoji); filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.4)); }
.tagline {
  margin: 14px auto 10px;
  max-width: 520px;
  font: italic 18px/1.4 var(--serif);
  color: #fffbe8;
  text-shadow: 0 2px 4px rgb(0 0 0 / 0.7), 0 0 12px rgb(0 0 0 / 0.4);
}
.save-info { min-height: 1.3em; margin: 4px 0 12px; font: 15px var(--serif); color: #fff3c8; text-shadow: 0 1px 3px #000; }
.title-buttons { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.title-lang { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.title-foot { margin-top: 18px; font-size: 13px; color: #f4ecd8; text-shadow: 0 1px 3px #000; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 240px;
  padding: 11px 26px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #a8321e, #7a1e12);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 0 0 1px #1a0a04, 0 0 0 3px var(--gold-2), 0 0 0 4px #1a0a04, 0 6px 14px rgb(0 0 0 / 0.4);
  color: #ffe9b0;
  font: 700 18px var(--serif);
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px #000;
  transition: filter 0.15s, transform 0.1s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: linear-gradient(180deg, #4a3a28, #2e2216); min-width: 200px; font-size: 16px; }
.btn.small { min-width: 0; padding: 6px 12px; font-size: 14px; }
.chip-btn {
  padding: 4px 12px;
  border: 1px solid var(--gold-2);
  border-radius: 999px;
  background: rgb(20 12 6 / 0.7);
  color: var(--text);
}
.chip-btn.on { background: var(--gold-2); color: #1a0e04; font-weight: 700; }

/* --- HUD: resources ------------------------------------------------------------ */

#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud > * { pointer-events: auto; }
#resbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 250px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  pointer-events: none;
}
.res {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 92px;
  padding: 3px 9px 3px 5px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px #140c06, 0 0 0 2px rgb(184 137 58 / 0.7);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.15s;
}
.res:hover { filter: brightness(1.15); }
.res .ic { font: 18px/1 var(--emoji); }
.res .v { font: 700 14px/1.1 var(--serif); color: #fff4d8; font-variant-numeric: tabular-nums; }
.res .r { display: block; font: 600 10.5px/1.1 var(--sans); color: var(--good); }
.res .r.neg { color: var(--bad); }
.res .r.zero { color: var(--muted); opacity: 0.6; }
.res.gold .v { color: #ffd766; }
.res.pulse { transform: scale(1.1); }
.res.new { animation: newres 1.2s ease-out; }
@keyframes newres { from { box-shadow: 0 0 0 1px #140c06, 0 0 0 2px #fff, 0 0 18px 6px #ffe08a; } }
.res.shards .v { color: #d9b8ff; }

/* --- HUD: top right ------------------------------------------------------------ */

#topright {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 232px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
#topright > * { pointer-events: auto; }
#zone-name {
  font: 700 15px var(--serif);
  color: #ffe6a0;
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
  pointer-events: none;
}
.minimap-frame {
  position: relative;
  width: 196px;
  height: 196px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #140c06, 0 0 0 6px var(--gold-2), 0 0 0 7px #140c06, 0 0 0 9px #6b4a1e, 0 6px 18px rgb(0 0 0 / 0.5);
}
#minimap { width: 196px; height: 196px; border-radius: 50%; display: block; }
#clock {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel-2);
  box-shadow: 0 0 0 2px var(--gold-2);
  font: 18px/1 var(--emoji);
}
.mm-btn {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--panel-2);
  box-shadow: 0 0 0 2px var(--gold-2);
  font: 17px/1 var(--emoji);
}
.mini-buttons { display: flex; gap: 5px; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px #140c06, 0 0 0 2px rgb(184 137 58 / 0.7);
  font: 15px/1 var(--emoji);
  text-decoration: none;
}
.icon-btn:hover { filter: brightness(1.3); }
.icon-btn.off { opacity: 0.45; }

#tracker { width: 232px; pointer-events: auto; }
.quest {
  padding: 8px 10px 9px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgb(28 20 14 / 0.78), rgb(28 20 14 / 0.6));
  box-shadow: 0 0 0 1px rgb(184 137 58 / 0.5);
}
.quest h3 { margin: 0 0 3px; font: 700 14px var(--serif); color: #ffd35a; text-shadow: 0 1px 2px #000; }
.quest p { margin: 0 0 6px; font-size: 12.5px; color: #f2e6cc; }
.quest .bar { position: relative; height: 12px; border-radius: 6px; background: rgb(0 0 0 / 0.5); overflow: hidden; box-shadow: inset 0 0 0 1px rgb(184 137 58 / 0.5); }
.quest .bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #d9a03a, #ffe07a); transition: width 0.3s; }
.quest .bar span { position: relative; display: block; text-align: center; font: 700 9.5px/12px var(--sans); color: #fff; text-shadow: 0 1px 1px #000; }
.quest .reward { margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.quest.done { animation: questdone 1s ease-out; }
@keyframes questdone { 0% { box-shadow: 0 0 0 1px #fff, 0 0 20px 6px #ffe08a; } }
.quest .compass { float: right; font: 16px/1 var(--emoji); transition: transform 0.2s; }

/* --- HUD: center ---------------------------------------------------------------- */

#zone-banner {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s;
  white-space: nowrap;
}
#zone-banner.show { opacity: 1; }
#zone-banner .z1 { font: 700 44px var(--serif); color: #ffe6a0; text-shadow: 0 2px 0 #3a220c, 0 0 18px rgb(0 0 0 / 0.6); letter-spacing: 0.04em; }
#zone-banner .z2 { font: italic 17px var(--serif); color: #fff7de; text-shadow: 0 1px 3px #000; }
#zone-banner .rule { width: 60%; height: 2px; margin: 6px auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

#buffs { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); pointer-events: none; }
.buff {
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe07a, #d99a2a);
  color: #3a2008;
  font: 700 14px var(--serif);
  box-shadow: 0 0 0 2px #3a2008, 0 0 20px #ffd04a;
  animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow { to { box-shadow: 0 0 0 2px #3a2008, 0 0 34px #ffe07a; } }

#prompt {
  position: absolute;
  bottom: 118px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px rgb(184 137 58 / 0.7);
  font: 600 14px var(--serif);
  pointer-events: none;
  white-space: nowrap;
}
#prompt .hp { display: inline-block; width: 60px; height: 6px; margin-left: 8px; border-radius: 3px; background: rgb(0 0 0 / 0.5); vertical-align: middle; overflow: hidden; }
#prompt .hp i { display: block; height: 100%; background: #8ce07a; }

#placing {
  position: absolute;
  bottom: 118px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--panel-2);
  box-shadow: var(--frame);
  white-space: nowrap;
}
#placing .name { font: 700 15px var(--serif); color: var(--gold); }
#placing .ok { color: var(--good); font-weight: 600; }
#placing .bad { color: var(--bad); font-weight: 600; }

/* --- Action bar and build palette ------------------------------------------------ */

#actionbar {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 10px;
  background: linear-gradient(180deg, #3a2a1a, #1e150c);
  box-shadow: var(--frame);
}
.action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 74px;
  padding: 6px 4px 5px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #5a4430, #33251a);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px #0e0804;
}
.action:hover { filter: brightness(1.25); }
.action.on { background: linear-gradient(180deg, #8a6a3a, #5a3e1e); box-shadow: inset 0 0 0 1px var(--gold), 0 0 12px rgb(232 194 106 / 0.5); }
.action .ic { font: 24px/1.1 var(--emoji); }
.action .lb { font: 600 12px var(--serif); color: #f4e2b8; }
.action kbd { position: absolute; top: 2px; right: 3px; font-size: 9px; min-width: 1.2em; padding: 0 2px; }
.action .badge {
  position: absolute;
  top: -5px;
  left: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: #d8402f;
  color: #fff;
  font: 700 11px/18px var(--sans);
  box-shadow: 0 0 0 2px #1a0a04;
}

#build-panel {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, calc(100% - 16px));
  padding: 10px 12px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  box-shadow: var(--frame);
  animation: pop 0.18s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
.panel-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.panel-title span { font: 700 18px var(--serif); color: var(--gold); }
.panel-title small { color: var(--muted); font-size: 12px; }
#build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 7px; max-height: 42vh; overflow-y: auto; }
.bcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 8px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #4a3826, #2c2016);
  box-shadow: 0 0 0 1px #0e0804, inset 0 1px 0 rgb(255 255 255 / 0.1);
  text-align: left;
}
.bcard:hover:not(:disabled) { filter: brightness(1.2); box-shadow: 0 0 0 1px var(--gold), inset 0 1px 0 rgb(255 255 255 / 0.1); }
.bcard .top { display: flex; align-items: center; gap: 6px; padding-right: 20px; }
body.touch .bcard kbd, body.compact .bcard kbd { display: none; }
body.compact .bcard .top { padding-right: 0; gap: 4px; }
body.compact .bcard .ic { font-size: 20px; }
body.compact .bcard .nm { font-size: 12px; }
body.compact .bcard .n { top: auto; bottom: 4px; }
.bcard .ic { font: 24px/1 var(--emoji); }
.bcard .nm { font: 700 13px/1.15 var(--serif); color: #f8e8c0; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.bcard .n { position: absolute; top: 4px; right: 6px; font-size: 10px; color: var(--muted); }
.bcard.locked { filter: grayscale(0.9) brightness(0.7); }
.bcard.poor .costs { opacity: 0.9; }
.bcard .why { font-size: 11px; color: var(--muted); }
.costs { display: flex; flex-wrap: wrap; gap: 3px 7px; font: 600 12px var(--sans); }
.cost { white-space: nowrap; }
.cost .e { font-family: var(--emoji); }
.cost.no { color: var(--bad); }

/* --- Inspector ------------------------------------------------------------------ */

#inspect {
  position: absolute;
  left: 10px;
  top: 96px;
  width: 310px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  padding: 12px 14px 14px;
  border-radius: 10px;
  background: var(--panel-2);
  box-shadow: var(--frame);
  animation: slide 0.2s ease-out;
}
@keyframes slide { from { opacity: 0; transform: translateX(-12px); } }
#inspect .x { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted); font-size: 16px; }
.ins-head { display: flex; align-items: center; gap: 10px; }
.ins-head .ic { font: 34px/1 var(--emoji); filter: drop-shadow(0 2px 3px #000); }
.ins-head h2 { margin: 0; font: 700 20px var(--serif); color: var(--gold); }
.ins-head .lvl { font: 600 13px var(--serif); color: #fff1c8; }
.stars { color: #ffd24a; letter-spacing: 1px; }
.ins-desc { margin: 8px 0; color: #e6d6b4; font-size: 12.5px; }
.ins-row { display: flex; justify-content: space-between; gap: 8px; margin: 3px 0; font-size: 13px; }
.ins-row b { color: #fff4d8; }
.ins-sec { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgb(184 137 58 / 0.35); }
.ins-sec h4 { margin: 0 0 5px; font: 700 13px var(--serif); color: var(--gold); }
.meter { height: 8px; margin: 4px 0; border-radius: 4px; background: rgb(0 0 0 / 0.5); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #6ab84a, #b8e07a); }
.meter.warn i { background: linear-gradient(90deg, #d9803a, #ffc05a); }
.upg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.ubtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, #3f7a2e, #24501a);
  box-shadow: 0 0 0 1px #0e0804, inset 0 1px 0 rgb(255 255 255 / 0.18);
  color: #f4ffe8;
}
.ubtn b { font: 700 14px var(--serif); }
.ubtn .costs { justify-content: center; font-size: 10.5px; }
.ubtn:disabled { background: linear-gradient(180deg, #4a4038, #2e2620); color: #a89880; }
.ubtn:not(:disabled):hover { filter: brightness(1.2); }
.row-btns { display: flex; gap: 6px; margin-top: 10px; }
.row-btns button { flex: 1; }
.mini {
  padding: 5px 8px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #5a4430, #33251a);
  box-shadow: 0 0 0 1px #0e0804;
  font-size: 12px;
}
.mini:hover:not(:disabled) { filter: brightness(1.25); }
.mini.danger { background: linear-gradient(180deg, #8a2a1e, #5a160e); }
.mini.gold { background: linear-gradient(180deg, #c9942e, #8a5a14); color: #1a0e04; font-weight: 700; }
.sell-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.sell {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  border: 0;
  border-radius: 5px;
  background: rgb(0 0 0 / 0.3);
  box-shadow: 0 0 0 1px rgb(184 137 58 / 0.3);
  font-size: 12px;
  text-align: left;
}
.sell.on { background: rgb(80 140 40 / 0.45); box-shadow: 0 0 0 1px #8ce07a; }
.sell .e { font-family: var(--emoji); }
.sell .chk { margin-left: auto; font-size: 11px; }
.note { font-size: 11.5px; color: var(--muted); }

/* --- Log ------------------------------------------------------------------------- */

#log {
  position: absolute;
  left: 10px;
  bottom: 12px;
  width: min(380px, 40vw);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  font: 600 13px/1.3 var(--sans);
}
#log div { padding: 2px 6px; border-radius: 4px; background: rgb(0 0 0 / 0.35); text-shadow: 0 1px 2px #000; transition: opacity 1s; }
#log .gold { color: #ffd766; }
#log .quest { color: #ffe07a; }
#log .good { color: #9fef8a; }
#log .magic { color: #d9b0ff; }
#log .warn { color: #ffae8a; }
#log .fade { opacity: 0; }

/* --- Floating text ---------------------------------------------------------------- */

.float-layer { position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.float {
  position: absolute;
  left: 0;
  top: 0;
  font: 700 16px var(--serif);
  color: #fff;
  text-shadow: 0 2px 0 #2a1a08, 0 0 6px rgb(0 0 0 / 0.6);
  white-space: nowrap;
  will-change: transform, opacity;
}
.float.gold { color: #ffd766; }
.float.crit { color: #ffeb7a; font-size: 22px; }
.float.small { font-size: 13px; }
.float.magic { color: #d9b8ff; }
.float.big { font-size: 26px; color: #fff0a0; }

/* --- Modal ----------------------------------------------------------------------- */

#modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgb(10 8 6 / 0.45);
  animation: fadein 0.15s;
}
@keyframes fadein { from { opacity: 0; } }
.modal-card {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  overflow-y: auto;
  padding: 20px 22px 22px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 0%, rgb(255 255 255 / 0.5), transparent 60%),
    linear-gradient(180deg, var(--parch), var(--parch-2));
  color: var(--ink);
  box-shadow: 0 0 0 1px #2a1606, 0 0 0 4px var(--gold-2), 0 0 0 5px #2a1606, 0 0 0 8px #6b4a1e, 0 16px 40px rgb(0 0 0 / 0.55);
  animation: pop2 0.2s ease-out;
}
.modal-card.wide { width: min(1000px, 100%); }
@keyframes pop2 { from { opacity: 0; transform: scale(0.96); } }
.modal-card .close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 20px; color: #5a3a1a; }
.modal-card h2 { margin: 0 0 4px; font: 700 28px var(--serif); color: #5a2a0a; }
.modal-card .sub { margin: 0 0 14px; font: italic 15px var(--serif); color: #6b4a2a; }
.modal-card .costs { color: #3a2410; }
.modal-card .cost.no { color: #b8281a; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgb(255 250 235 / 0.65);
  box-shadow: 0 0 0 1px #b89a64, 0 2px 4px rgb(80 50 10 / 0.15);
}
.card.owned { background: rgb(210 235 190 / 0.7); box-shadow: 0 0 0 1px #6a9a4a; }
.card.locked { opacity: 0.55; }
.card .hd { display: flex; align-items: center; gap: 8px; }
.card .hd .e { font: 26px/1 var(--emoji); }
.card .hd b { font: 700 16px var(--serif); color: #3a1e08; }
.card .fx { font-size: 13px; color: #3a5a1a; font-weight: 600; }
.card .ds { font-size: 12.5px; color: #5a4028; }
.card .buy {
  margin-top: auto;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(180deg, #3f7a2e, #24501a);
  color: #f4ffe8;
  font: 700 14px var(--serif);
  box-shadow: 0 0 0 1px #1a3010;
}
.card .buy:disabled { background: #b8a888; color: #6a5a40; box-shadow: none; }
.card .buy.red { background: linear-gradient(180deg, #a8321e, #7a1e12); box-shadow: 0 0 0 1px #3a0a04; }
.group-title { margin: 16px 0 8px; font: 700 17px var(--serif); color: #6b3a0a; border-bottom: 1px solid #c9a86a; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; font-size: 14px; }
.kv b { text-align: right; }
.gains { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 12px 0; }
.gain { padding: 6px 8px; border-radius: 6px; background: rgb(255 250 235 / 0.7); box-shadow: 0 0 0 1px #c9a86a; font: 700 15px var(--serif); }
.gain .e { font-family: var(--emoji); }
.gain.locked { opacity: 0.55; }
.gain small { font: 600 12px var(--sans); color: #6b4a2a; }
.kv b.neg { color: #b8281a; }
.center { text-align: center; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.settings { display: grid; gap: 10px; }
.settings .line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; background: rgb(255 250 235 / 0.6); }
.settings .opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opt { padding: 5px 12px; border: 1px solid #a88a54; border-radius: 999px; background: #fff8e6; color: #3a2410; }
.opt.on { background: #6b4a1e; color: #ffe9b0; border-color: #6b4a1e; }
.help-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; font-size: 14px; }
.help-grid kbd { color: #3a2410; background: #fff8e6; border-color: #a88a54; }
.help-list { margin: 12px 0 0; padding-left: 20px; font-size: 14px; }
.help-list li { margin: 4px 0; }

#map-wrap { position: relative; width: 100%; aspect-ratio: 1; max-height: 72vh; margin: 0 auto; }
#bigmap { width: 100%; height: 100%; border-radius: 8px; box-shadow: 0 0 0 2px #6b4a1e, 0 4px 12px rgb(0 0 0 / 0.3); cursor: default; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; color: #5a4028; }

#fade { position: fixed; inset: 0; z-index: 40; background: #fff8e0; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
#fade.on { opacity: 1; }

/* --- Touch ----------------------------------------------------------------------- */

#touch-buttons { display: none; }
body.touch #touch-buttons {
  position: absolute;
  right: 14px;
  bottom: 96px;
  display: grid;
  grid-template-columns: repeat(2, 64px);
  gap: 10px;
}
#touch-buttons button {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 0 0 2px var(--gold-2);
  font: 26px/1 var(--emoji);
}
#touch-act { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 76px !important; height: 76px !important; }
#stick {
  position: fixed;
  z-index: 12;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.2);
  box-shadow: 0 0 0 2px rgb(232 194 106 / 0.6);
  pointer-events: none;
}
#stick-knob { position: absolute; left: 30px; top: 30px; width: 50px; height: 50px; border-radius: 50%; background: rgb(232 194 106 / 0.8); }

/* --- Small screens: body.compact is set from the viewport size --------------- */

body.compact #resbar { right: 136px; gap: 3px; }
body.compact .res { min-width: 0; padding: 2px 6px 2px 4px; }
body.compact .res .ic { font-size: 15px; }
body.compact .res .v { font-size: 12px; }
body.compact .res .r { font-size: 9.5px; }
body.compact #topright { width: 124px; right: 6px; top: 6px; gap: 4px; }
body.compact #zone-name { font-size: 12px; }
body.compact .minimap-frame, body.compact #minimap { width: 108px; height: 108px; }
body.compact #clock { width: 28px; height: 28px; font-size: 14px; }
body.compact .mm-btn { width: 28px; height: 28px; font-size: 13px; }
body.compact .mini-buttons { gap: 3px; }
body.compact .mini-buttons .icon-btn { width: 23px; height: 23px; font-size: 12px; }
body.compact #tracker { position: fixed; left: 6px; top: 54px; width: min(230px, 42%); }
body.compact .quest { padding: 5px 8px 6px; }
body.compact .quest h3 { font-size: 12.5px; }
body.compact .quest p { font-size: 11px; margin-bottom: 4px; }
body.compact .quest .reward { display: none; }
body.compact #actionbar { bottom: 6px; gap: 4px; padding: 5px 6px; }
body.compact .action { width: 54px; padding: 4px 2px; }
body.compact .action .ic { font-size: 19px; }
body.compact .action .lb { font-size: 10px; }
body.compact .action kbd { display: none; }
body.compact #inspect { top: auto; bottom: 74px; left: 6px; right: 6px; width: auto; max-height: 48%; }
body.compact #log { display: none; }
body.compact #zone-banner { top: 22%; }
body.compact #zone-banner .z1 { font-size: 28px; }
body.compact #zone-banner .z2 { font-size: 13px; }
body.compact #build-panel { bottom: 70px; width: calc(100% - 12px); padding: 8px; }
body.compact #build-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); max-height: 38vh; }
body.compact #prompt, body.compact #placing { bottom: 74px; font-size: 12px; }
body.compact #placing { flex-wrap: wrap; justify-content: center; max-width: calc(100% - 12px); white-space: normal; }
body.compact .modal-card { padding: 14px 14px 16px; }
body.compact .modal-card h2 { font-size: 22px; }
body.compact .cards { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
body.touch.compact #touch-buttons { bottom: 72px; right: 8px; grid-template-columns: repeat(2, 54px); gap: 8px; }
body.touch.compact #touch-buttons button { width: 54px; height: 54px; font-size: 22px; }
body.touch.compact #touch-act { width: 64px !important; height: 64px !important; }

#hover-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 15;
  padding: 3px 9px;
  border-radius: 5px;
  background: rgb(20 14 8 / 0.88);
  box-shadow: 0 0 0 1px rgb(184 137 58 / 0.8);
  color: #fff1c8;
  font: 600 13px var(--serif);
  pointer-events: none;
  white-space: nowrap;
}
body.touch.compact #inspect:not([hidden]) ~ #touch-buttons,
body.touch.compact #build-panel:not([hidden]) ~ #touch-buttons { display: none; }

.ledger { width: 100%; border-collapse: collapse; font-size: 13px; }
.ledger td { padding: 5px 6px; border-bottom: 1px solid #d9c49a; vertical-align: middle; }
.ledger tr:hover td { background: rgb(255 250 235 / 0.6); }
.ledger tr.paused td { opacity: 0.55; }
.ledger tr.group td { background: rgb(201 168 106 / 0.18); }
.ledger tr.group small { font: 600 12px var(--sans); color: #6b4a2a; }
.ledger .e { font-family: var(--emoji); }
.ledger .out .cost { color: #2a5a14; font-weight: 700; }
.ledger .btns { white-space: nowrap; text-align: right; }
.ledger .mini { color: #f6ecd6; margin-left: 3px; }
.ledger .mini:disabled { opacity: 0.4; }

.action.nudge, .bcard.nudge { animation: nudge 1.1s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { box-shadow: 0 0 0 1px #0e0804, 0 0 0 0 rgb(255 216 106 / 0); }
  50% { box-shadow: 0 0 0 2px #ffd86a, 0 0 18px 4px rgb(255 216 106 / 0.75); }
}