/* Pixel HUD skin "Moonlit Town Kit" — designed in Codex (Sprite/ui/UI_PIXEL_SPEC.md,
   mockup Sprite/ui/ui_mockup_v1.png). Frames, round buttons and icons are PNGs
   in assets/ui/, generated by Sprite/tools/gen_pixel_ui.py at 2 screen px per
   art px. House rules: no border-radius, no smooth gradients, no blurred
   shadows — depth comes from hard 2px bands only. */

* { box-sizing: border-box; }

:root {
  --ink: #101626;
  --night: #1B2745;
  --indigo: #2D3E68;
  --slate: #46577A;
  --steel-hi: #8FA6C9;
  --paper: #F3E6C1;
  --muted: #C5B995;
  --brass-hi: #FFE28A;
  --brass: #C9923F;
  --brass-shade: #805028;
  --oak: #4F342B;
  --hp: #D94B4B;
  --sp: #4C91D9;
  --exp: #E7B94E;
  --job: #49B9A7;
  --leaf: #79B95D;

  /* Silkscreen is drawn on an 8px grid: only use it at 8px or 16px */
  --font-pixel: "Silkscreen", "Noto Sans Thai", sans-serif;
  --font-th: "Noto Sans Thai", Tahoma, sans-serif;
  /* 1-art-pixel outline around light text */
  --outline: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink),
             1px 1px var(--ink), -1px 1px var(--ink), 1px -1px var(--ink), -1px -1px var(--ink);
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-th);
  font-weight: 500;
  user-select: none;
  -webkit-font-smoothing: none;
}

button { font-family: inherit; }

#stage { position: fixed; inset: 0; }

#game {
  display: block;
  width: 100%;
  height: 100%;
  background: #2d4a2a;
  image-rendering: pixelated;
  cursor: crosshair;
}

/* HUD floats over the canvas; only the controls capture clicks so the rest of
   the screen stays usable for walking. */
/* Sized as 100%/scale so that, once scaled, it still covers exactly the
   viewport (js/mobile.js setUiScale sets transform + width/height together). */
#hud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#hud button, #hud .window, #hud canvas { pointer-events: auto; }

.hidden { display: none !important; }

/* ---- 9-slice frames ----
   Each frame PNG is 24x26: 6px corners top/left/right, 8px at the bottom
   because the bottom slice carries the 4px hard drop shadow. */
.panel {
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image-slice: 6 6 8 fill;
  border-image-width: 6px 6px 8px;
  border-image-repeat: stretch;
  border-image-source: url("../assets/ui/frame-panel.png");
  background: none;
  border-radius: 0;
}

/* ---- character status ---- */
.status {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 6px 6px;
}

.portrait {
  position: relative;
  width: 60px; height: 62px;
  flex: none;
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-steel-flat.png") 6 6 8 fill / 6px 6px 8px stretch;
  background: none;
}
.portrait::before {
  /* flat sky backdrop behind the face, stepped not blended */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #3B4F80 0 55%, #2D3E68 55% 100%);
}

.portrait .lv {
  position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  min-width: 42px;
  padding: 0 4px;
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-brass.png") 6 6 8 fill / 6px 6px 8px stretch;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 400;
  line-height: 10px;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
}
.portrait .lv span { font-family: var(--font-pixel); }

.meters { display: flex; flex-direction: column; gap: 6px; width: 220px; }

/* bars: 2px ink ring, 2px slate ring, ink track */
.bar, .tgt-bar, .cast-track {
  position: relative;
  height: 14px;
  background: #0A0E19;
  border: 2px solid var(--slate);
  box-shadow: 0 0 0 2px var(--ink);
  overflow: hidden;
  border-radius: 0;
}

.bar .fill, .tgt-bar i, .cast-fill {
  display: block;
  height: 100%;
  width: 100%;
  transition: width 0.24s steps(6, end);
}

.bar.hp .fill, .tgt-bar i {
  background: var(--hp);
  box-shadow: inset 0 2px 0 #FF8A80, inset 0 -2px 0 #8E2E3B;
}
.bar.sp .fill, .cast-fill {
  background: var(--sp);
  box-shadow: inset 0 2px 0 #8FC8FF, inset 0 -2px 0 #275C9C;
}
.bar.xp .fill {
  width: 0%;
  background: var(--exp);
  box-shadow: inset 0 2px 0 var(--brass-hi), inset 0 -2px 0 var(--brass-shade);
}
.bar.job .fill {
  width: 0%;
  background: var(--job);
  box-shadow: inset 0 2px 0 #91E0D1, inset 0 -2px 0 #267C78;
}

.bar span, .tgt-bar span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  color: var(--paper);
  text-shadow: var(--outline);
}

/* ---- currency / location ---- */
.purse {
  position: absolute;
  top: 110px; left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 10px 1px 2px;
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-gold.png") 6 6 8 fill / 6px 6px 8px stretch;
  font-family: var(--font-pixel);
  font-size: 16px;
  font-weight: 400;
  color: var(--brass-hi);
  text-shadow: var(--outline);
}

.chip.place { font-family: var(--font-th); font-size: 12px; font-weight: 600; color: var(--paper); }

/* ---- pixel icons (10x10 art at 2x) ---- */
.ico {
  width: 20px; height: 20px;
  flex: none;
  display: inline-block;
  background: center / 20px 20px no-repeat;
  image-rendering: pixelated;
}
.ico.coin     { background-image: url("../assets/ui/ico-coin.png"); }
.ico.pin      { background-image: url("../assets/ui/ico-pin.png"); }
.ico.map      { background-image: url("../assets/ui/ico-map.png"); }
.ico.stat     { background-image: url("../assets/ui/ico-stat.png"); }
.ico.skill    { background-image: url("../assets/ui/ico-skill.png"); }
.ico.help     { background-image: url("../assets/ui/ico-help.png"); }
.ico.scissors { background-image: url("../assets/ui/ico-scissors.png"); }
.ico.sound    { background-image: url("../assets/ui/ico-sound.png"); }
.ico.mute     { background-image: url("../assets/ui/ico-mute.png"); }
.ico.auto     { background-image: url("../assets/ui/ico-auto.png"); }

/* ---- buffs ---- */
.buff-bar {
  position: absolute;
  top: 184px; left: 12px;
  display: flex; gap: 4px; flex-wrap: wrap;
  width: 220px;
}

.buff {
  position: relative;
  width: 32px; height: 34px;
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-slot.png") 6 6 8 fill / 6px 6px 8px stretch;
  display: flex; align-items: center; justify-content: center;
}

.buff canvas { image-rendering: pixelated; }
/* status list (js/status.js): a row per buff / ailment with its seconds and a draining bar */
#buffBar { flex-direction: column; gap: 3px; width: 190px; pointer-events: none; }
.st-row {
  position: relative; display: flex; align-items: center; gap: 6px; padding: 2px 6px 4px;
  background: rgba(16, 22, 38, 0.86); border: 1px solid var(--brass); font-size: 11px; color: var(--paper);
  text-shadow: var(--outline); overflow: hidden;
}
.st-row.bad { border-color: var(--hp); }
.st-row .st-ico { width: 16px; height: 16px; flex: none; display: inline-flex; }
.st-row .st-ico canvas { image-rendering: pixelated; width: 16px; height: 16px; }
.st-row .st-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-row .st-left { font-family: var(--font-pixel); font-size: 8px; color: var(--brass-hi); }
.st-row .st-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--leaf); }
.st-row.bad .st-bar { background: var(--hp); }
.st-row.ending .st-left { animation: st-blink 0.6s steps(2) infinite; }
@keyframes st-blink { to { opacity: 0.25; } }
.buff b {
  position: absolute; bottom: -6px; right: -4px;
  font-family: var(--font-pixel);
  font-size: 8px; color: var(--brass-hi);
  text-shadow: var(--outline);
}

/* ---- round (octagon) button rails ---- */
.rail { position: absolute; display: flex; gap: 8px; }
/* The menu buttons stay on the left, under the gold chip, but wrapped into a
   compact block instead of one long row stretching across the map. */
.rail.left {
  top: 158px; left: 12px; right: auto;
  display: flex; flex-wrap: wrap; gap: 3px; width: 194px;
  justify-content: flex-start; align-content: flex-start;
}
.rail.left .rail-toggle { display: none; }      /* on a desktop the block always shows */
.rail.left.folded > button:not(.rail-toggle) { display: flex; }
/* a landscape phone has no room for the block next to the thumb buttons, so
   there it folds behind one button and opens over the map */
body.touch .rail.left .rail-toggle { display: flex; order: -1; }
body.touch .rail.left.folded { width: auto; }
body.touch .rail.left.folded > button:not(.rail-toggle) { display: none; }
body.touch .rail.left:not(.folded) {
  padding: 4px; border-style: solid; border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-panel.png") 6 6 8 fill / 6px 6px 8px stretch;
}
.rail.left .round {
  width: 40px; height: 40px; margin: 1px; padding: 0; transform: none;
  background: linear-gradient(#2a2118, #140f0b);
  border: 2px solid #b8862e; border-radius: 6px;
  box-shadow: inset 0 0 0 1px #f2cf7a, inset 0 -6px 10px rgba(0,0,0,.45), 0 2px 0 #3a2a12, 0 0 0 1px #1a120a;
  image-rendering: auto;
}
.rail.left .round:hover, .rail.left .round:focus-visible { border-color: #f6d87a; background: linear-gradient(#3a2d1e, #1c150e); }
.rail.left .round:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px #f2cf7a, 0 0 0 #3a2a12; }
.rail.left .round .ico { width: 24px; height: 24px; filter: drop-shadow(0 1px 0 #000); }
.rail.left .round[data-key]::before {            /* the hotkey, gold on a dark chip */
  content: attr(data-key); position: absolute; right: -3px; bottom: -4px;
  min-width: 13px; height: 13px; padding: 0 2px; font-family: var(--font-pixel); font-size: 8px; line-height: 13px;
  color: #f6d87a; background: #1a120a; border: 1px solid #b8862e; border-radius: 3px; text-align: center;
}
.rail.left .round.alert::after { top: -4px; right: -4px; }
/* help and settings close the block whatever order the scripts added them in */
.rail.left #helpBtn { order: 8; }
.rail.left .settings-rail { order: 9; }
.rail.right { top: 12px; right: 14px; }

.round {
  position: relative;
  width: 44px; height: 48px;
  padding: 0 0 4px;
  border: 0;
  background: url("../assets/ui/round.png") 0 0 / 44px 48px no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  image-rendering: pixelated;
}

.round:hover, .round:focus-visible { background-image: url("../assets/ui/round-hover.png"); outline: none; }
.round:active {
  background-image: url("../assets/ui/round-hover-flat.png");
  transform: translateY(2px);
}
.round .ico { width: 20px; height: 20px; }
.round:active .ico { transform: translateY(0); }

/* A pip on the button is how an unspent stat or skill point makes itself known
   without another popup. Square pixel pip, blinks in hard steps. */
.round.alert::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 12px; height: 12px;
  background: var(--hp);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 #FF8A80;
  animation: pip 1s steps(1, end) infinite;
}
@keyframes pip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* ---- target info ---- */
.target {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  padding: 4px 10px 6px;
  font-size: 12px;
  border-image-source: url("../assets/ui/frame-gold.png");
}

.tgt-name { font-weight: 700; color: var(--brass-hi); text-shadow: var(--outline); }
.tgt-name small { font-weight: 500; color: var(--muted); margin-left: 6px; font-size: 11px; }

.tgt-bar { height: 14px; margin: 6px 2px 5px; }

.tgt-meta { font-size: 11px; color: var(--muted); }
.tgt-meta .agg { color: #FF8A80; }

/* ---- cast bar ---- */
.cast {
  position: absolute;
  bottom: 132px; left: 50%;
  transform: translateX(-50%);
  width: 220px;
  text-align: center;
}

.cast-name { font-size: 12px; font-weight: 700; color: var(--brass-hi); text-shadow: var(--outline); }
.cast-track { height: 12px; margin-top: 4px; }
.cast-fill { width: 0%; }

/* ---- toast ---- */
.toast {
  position: absolute;
  top: 100px; left: 50%;
  transform: translate(-50%, -4px);
  padding: 4px 18px 4px;
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-gold.png") 6 6 8 fill / 6px 6px 8px stretch;
  font-size: 13px;
  font-weight: 700;
  color: var(--brass-hi);
  text-shadow: var(--outline);
  opacity: 0;
  transition: opacity 0.16s steps(3, end), transform 0.16s steps(2, end);
  white-space: nowrap;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- hotbar ---- */
.hotbar {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 4px;
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-panel.png") 6 6 8 fill / 6px 6px 8px stretch;
}

.slot {
  position: relative;
  width: 52px; height: 54px;
  padding: 0;
  overflow: hidden;
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-slot.png") 6 6 8 fill / 6px 6px 8px stretch;
  background: none;
  cursor: pointer;
}

.slot::after {
  content: attr(data-key);
  position: absolute;
  top: -3px; left: -1px;
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 400;
  color: var(--brass-hi);
  z-index: 3;
  text-shadow: var(--outline);
}

.slot:hover, .slot:focus-visible { border-image-source: url("../assets/ui/frame-hover.png"); outline: none; }
.slot.filled { border-image-source: url("../assets/ui/frame-button.png"); }
.slot.filled:hover { border-image-source: url("../assets/ui/frame-hover.png"); }
.slot:active { border-image-source: url("../assets/ui/frame-hover-flat.png"); }
.slot canvas { display: block; margin: 1px auto 0; image-rendering: pixelated; }

.slot-count {
  position: absolute;
  bottom: -3px; right: -1px;
  font-family: var(--font-pixel);
  font-size: 8px; font-weight: 400;
  color: var(--paper);
  text-shadow: var(--outline);
  z-index: 3;
}

.slot-cd {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 0%;
  background: rgba(16, 22, 38, 0.72);
  z-index: 2;
  pointer-events: none;
}

/* ---- controls hint / tooltip ---- */
.log {
  position: absolute;
  bottom: 96px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  background: rgba(16, 22, 38, 0.85);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px rgba(70, 87, 122, 0.7);
  font-size: 12px;
  color: var(--muted);
  text-shadow: var(--outline);
  white-space: nowrap;
}
.log:empty { display: none; }

.point-hint {
  position: fixed;
  padding: 3px 9px;
  background: var(--night);
  border: 2px solid var(--ink);
  box-shadow: inset 0 2px 0 var(--brass), 0 2px 0 var(--ink);
  font-size: 11.5px;
  color: var(--paper);
  text-shadow: var(--outline);
  opacity: 0;
  transition: opacity 0.1s steps(2, end);
  white-space: nowrap;
  z-index: 40;
}
.point-hint.show { opacity: 1; }

/* ---- floating windows ---- */
.window {
  position: absolute;
  width: 340px;
  max-height: 72vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 20;
}

#statWindow { top: 230px; left: 12px; }
#skillWindow { top: 80px; right: 16px; width: 390px; }
#dialogWindow { bottom: 104px; left: 50%; transform: translateX(-50%); width: 480px; }
#minimapWindow { top: 90px; left: 50%; transform: translateX(-50%); width: auto; }

.win-title {
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
  padding: 3px 4px 3px 10px;
  background: var(--indigo);
  box-shadow: inset 0 2px 0 var(--brass), 0 2px 0 var(--ink);
  font-size: 14px;
  font-weight: 700;
  color: var(--brass-hi);
  text-shadow: var(--outline);
}

.win-title:active { cursor: grabbing; }

.win-close {
  width: 24px; height: 26px;
  padding: 0 0 2px;
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-red.png") 6 6 8 fill / 6px 6px 8px stretch;
  background: none;
  color: var(--paper);
  font-family: var(--font-pixel);
  font-size: 8px;
  font-weight: 400;
  line-height: 1;
  text-shadow: var(--outline);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.win-close:active { border-image-source: url("../assets/ui/frame-red-flat.png"); transform: translateY(2px); }

.win-body { padding: 12px 10px 10px; margin-top: 2px; overflow-y: auto; font-size: 12px; }
.win-body::-webkit-scrollbar { width: 10px; }
.win-body::-webkit-scrollbar-thumb { background: var(--slate); border: 2px solid var(--ink); box-shadow: inset 0 2px 0 var(--steel-hi); }
.win-body::-webkit-scrollbar-track { background: var(--ink); }

.win-head {
  font-weight: 700;
  color: var(--brass-hi);
  text-shadow: var(--outline);
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--slate);
}
.win-head.sub { margin-top: 12px; color: var(--muted); }
.win-head b { color: #A5D97A; }

.hint { font-size: 11px; color: var(--muted); margin-bottom: 8px; line-height: 1.4; }
.points { margin-bottom: 8px; color: var(--paper); }
.points b { font-family: var(--font-pixel); color: #A5D97A; font-size: 16px; text-shadow: var(--outline); }

/* ---- shared small buttons (+, stat +, skill +) ---- */
.stat-plus, .skill-plus {
  flex: none;
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-leaf.png") 6 6 8 fill / 6px 6px 8px stretch;
  background: none;
  color: var(--paper);
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  text-shadow: var(--outline);
  cursor: pointer;
  padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.stat-plus { width: 30px; height: 32px; }
.skill-plus { width: 28px; height: 30px; }
.stat-plus:active, .skill-plus:active { border-image-source: url("../assets/ui/frame-leaf-flat.png"); transform: translateY(2px); }
.stat-plus small { display: block; font-family: var(--font-pixel); font-size: 8px; color: var(--paper); }
.stat-plus.off, .skill-plus.off {
  border-image-source: url("../assets/ui/frame-dim-flat.png");
  color: var(--muted);
  cursor: default;
  transform: none;
}

/* ---- stat sheet ---- */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }

.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 7px;
  background: var(--indigo);
  border: 2px solid var(--ink);
  box-shadow: inset 0 2px 0 #3B4F80;
}

.stat-name { flex: 1; font-weight: 700; color: var(--paper); }
.stat-name small { display: block; font-size: 9px; font-weight: 500; color: var(--muted); }
.stat-val { font-family: var(--font-pixel); min-width: 38px; text-align: right; font-weight: 400; font-size: 16px; text-shadow: var(--outline); }
.stat-val em { color: #A5D97A; font-size: 10px; font-style: normal; margin-left: 2px; }

.derived {
  margin-top: 10px;
  padding: 8px;
  background: var(--ink);
  border: 2px solid var(--slate);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
  font-size: 11px;
  color: var(--muted);
}
.derived b { font-family: var(--font-pixel); font-size: 8px; font-weight: 400; line-height: 16px; color: var(--paper); float: right; }

/* ---- skill tree ---- */
.skill-list { display: flex; flex-direction: column; gap: 4px; }

.skill-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px;
  background: var(--indigo);
  border: 2px solid var(--ink);
  box-shadow: inset 0 2px 0 #3B4F80;
  cursor: pointer;
}
.skill-row:nth-child(even) { background: #263559; }
.skill-row:hover { background: var(--slate); }
.skill-row.sel { border-color: var(--brass-hi); box-shadow: inset 0 0 0 2px var(--brass-shade); background: #3B4F80; }
.skill-row.unlearned { opacity: 0.6; }

.skill-ico-wrap { flex: none; width: 30px; height: 30px; display: block; }
.skill-ico-wrap canvas { image-rendering: pixelated; border: 2px solid var(--ink); }

.skill-text { flex: 1; min-width: 0; line-height: 1.35; }
.skill-text b { color: var(--paper); font-size: 12px; }
.skill-text i { color: var(--muted); font-style: normal; font-size: 10.5px; }
.skill-text small { display: block; font-size: 10px; color: var(--muted); }
.skill-text em { font-style: normal; font-size: 10px; color: #8FC8FF; }

.skill-lv { flex: none; font-family: var(--font-pixel); font-weight: 400; color: #A5D97A; font-size: 16px; text-shadow: var(--outline); }

/* ---- dialogue ---- */
.dialog-lines p {
  margin: 0 0 7px;
  line-height: 1.6;
  font-size: 13px;
  color: var(--paper);
}

.dialog-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.wood-btn, .cr-btn {
  padding: 3px 12px 3px;
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-brass.png") 6 6 8 fill / 6px 6px 8px stretch;
  background: none;
  color: var(--ink);
  font-family: var(--font-th);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.wood-btn:active, .cr-btn:active { border-image-source: url("../assets/ui/frame-brass-flat.png"); transform: translateY(2px); }
.wood-btn:focus-visible, .cr-btn:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.wood-btn.ghost, .cr-btn {
  border-image-source: url("../assets/ui/frame-button.png");
  color: var(--paper);
  text-shadow: var(--outline);
}
.wood-btn.ghost:hover, .cr-btn:hover { border-image-source: url("../assets/ui/frame-hover.png"); }
.wood-btn.ghost:active, .cr-btn:active { border-image-source: url("../assets/ui/frame-hover-flat.png"); }
.wood-btn:not(.ghost):hover { border-image-source: url("../assets/ui/frame-gold.png"); color: var(--brass-hi); text-shadow: var(--outline); }

/* ---- minimap ---- */
#minimap {
  display: block;
  image-rendering: pixelated;
  border: 2px solid var(--steel-hi);
  box-shadow: 0 0 0 2px var(--ink);
  background: var(--night);
}

.map-legend {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.map-legend .k {
  width: 8px; height: 8px;
  display: inline-block;
  margin-left: 6px;
  box-shadow: 0 0 0 2px var(--ink);
}
.map-legend .k.you { background: var(--paper); margin-left: 2px; }
.map-legend .k.mob { background: var(--hp); }
.map-legend .k.npc { background: var(--job); }
.map-legend .k.warp { background: var(--brass-hi); }

/* ---- character creator / barber ---- */
.portrait canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
}

.creator {
  position: fixed; inset: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  /* 2px checker dither instead of blur */
  background:
    repeating-conic-gradient(rgba(16, 22, 38, 0.5) 0 25%, transparent 0 50%) 0 0 / 4px 4px,
    rgba(16, 22, 38, 0.6);
}

.creator-card {
  width: min(880px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}

.creator-head { padding: 10px 16px 8px; background: var(--indigo); box-shadow: inset 0 2px 0 var(--brass), 0 2px 0 var(--ink); }
.creator-head h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--brass-hi); text-shadow: var(--outline), 2px 3px 0 var(--ink); }
.creator-head p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

.creator-body {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: 16px;
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
}

.creator-stage {
  align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 8px;
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-steel.png") 6 6 8 fill / 6px 6px 8px stretch;
}

/* Sky-to-meadow backdrop lives on the canvas itself so the horizon always
   sits behind the character's feet whatever height the column grows to.
   Stepped colour bands only. */
#crPreview {
  width: 240px; height: 300px;
  image-rendering: pixelated;
  cursor: grab;
  touch-action: none;
  border: 2px solid var(--ink);
  background:
    radial-gradient(ellipse 60% 14% at 50% 90%, #A5D97A 0 60%, transparent 60%),
    linear-gradient(180deg, #8FC8FF 0 24%, #A9D6FF 24% 48%, #C9E6FF 48% 74%,
                    #79B95D 74% 86%, #5E9A48 86% 100%);
}
#crPreview:active { cursor: grabbing; }

.stage-controls { display: flex; align-items: center; gap: 6px; }
.chips { display: flex; gap: 4px; }

.creator-options { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.creator-options section { display: flex; flex-direction: column; gap: 6px; }

.cr-label { font-size: 13px; font-weight: 700; color: var(--brass-hi); text-shadow: var(--outline); }
.cr-value { font-weight: 500; color: var(--muted); margin-left: 6px; }

.cr-input {
  font: inherit; font-size: 15px;
  padding: 7px 10px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: inset 2px 2px 0 var(--muted), 0 0 0 2px var(--slate);
  border-radius: 0;
  outline: none;
}
.cr-input:focus { box-shadow: inset 2px 2px 0 var(--muted), 0 0 0 2px var(--brass-hi); }

.cr-btn { font-size: 13px; }
.cr-btn.on { border-image-source: url("../assets/ui/frame-brass.png"); color: var(--ink); text-shadow: none; }
.cr-btn.icon { width: 38px; padding: 3px 0; }
.cr-btn.chip { padding: 2px 8px; font-size: 12px; }
.cr-btn.primary { border-image-source: url("../assets/ui/frame-leaf.png"); padding: 5px 22px; font-size: 15px; color: var(--paper); }
.cr-btn.primary:active { border-image-source: url("../assets/ui/frame-leaf-flat.png"); }

.seg { display: flex; gap: 6px; }
.seg .cr-btn { flex: 1; max-width: 120px; }

.hair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
}

.hair-opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 2px 0 1px;
  font: inherit; font-size: 11px; color: var(--muted);
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-button.png") 6 6 8 fill / 6px 6px 8px stretch;
  background: none;
  cursor: pointer;
}
.hair-opt canvas { width: 64px; height: 60px; image-rendering: pixelated; }
.hair-opt:hover { border-image-source: url("../assets/ui/frame-hover.png"); }
.hair-opt.on { border-image-source: url("../assets/ui/frame-gold.png"); color: var(--brass-hi); text-shadow: var(--outline); }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 28px; height: 28px;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* pixel octagon, with an ink ring drawn by the drop-shadow filter */
  clip-path: polygon(6px 0, 22px 0, 28px 6px, 28px 22px, 22px 28px, 6px 28px, 0 22px, 0 6px);
  box-shadow: inset 0 0 0 2px var(--ink), inset 4px 4px 0 rgba(255, 255, 255, 0.28), inset -4px -4px 0 rgba(0, 0, 0, 0.25);
}
.swatch.on { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--brass-hi), inset 0 0 0 6px var(--ink); }

.creator-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 12px;
  border-top: 2px solid var(--slate);
}
.creator-foot .spacer { flex: 1; }

/* ---- character select (js/charselect.js) ---- */
.cs-card { width: min(760px, 100%); }
.cs-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 16px;
}
.cs-slot {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 190px;
  padding: 8px 6px 10px;
  font: inherit; color: var(--paper);
  border-style: solid;
  border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-button.png") 6 6 8 fill / 6px 6px 8px stretch;
  background: none;
  cursor: pointer;
}
.cs-slot:hover { border-image-source: url("../assets/ui/frame-hover.png"); }
.cs-slot.on { border-image-source: url("../assets/ui/frame-gold.png"); }
.cs-slot canvas {
  width: 96px; height: 112px;
  image-rendering: pixelated;
  background: radial-gradient(ellipse 40% 10% at 50% 92%, rgba(20, 40, 20, 0.35) 0 60%, transparent 62%);
}
.cs-slot b { font-size: 15px; color: var(--brass-hi); text-shadow: var(--outline); }
.cs-slot span { font-size: 12px; color: var(--paper); }
.cs-slot small { font-size: 11px; color: var(--muted); }
.cs-slot.empty { justify-content: center; color: var(--muted); }
.cs-slot .cs-plus, .cs-slot.empty .cs-plus { font-size: 34px; line-height: 1; color: var(--brass-hi); text-shadow: var(--outline); }
.cs-slot.empty span { font-size: 14px; color: var(--paper); }
.cs-arrow { display: flex; align-items: center; gap: 6px; }
.cs-arrow .hair-grid { flex: 1; }
.cs-error { font-size: 13px; color: #ff8a7a; text-shadow: var(--outline); }
.cr-btn.danger { border-image-source: url("../assets/ui/frame-red.png"); color: var(--paper); }
.cr-btn[disabled] { opacity: 0.45; cursor: default; }
.cs-preview {
  width: 240px; height: 300px;
  image-rendering: pixelated;
  cursor: grab;
  touch-action: none;
  border: 2px solid var(--ink);
  background:
    radial-gradient(ellipse 60% 14% at 50% 90%, #A5D97A 0 60%, transparent 60%),
    linear-gradient(180deg, #8FC8FF 0 24%, #A9D6FF 24% 48%, #C9E6FF 48% 74%,
                    #79B95D 74% 86%, #5E9A48 86% 100%);
}
.ico.castle { background-image: url("../assets/ui/ico-castle.png"); }
.ico.board  { background-image: url("../assets/ui/ico-board.png"); }
.ico.chat   { background-image: url("../assets/ui/ico-chat.png"); }

/* ---- online: chat box, chat log, online chip (js/net.js) ---- */
.chat-panel {
  position: absolute; left: 12px; bottom: 196px;
  width: min(340px, 46vw);
  background: rgba(16, 22, 38, 0.72);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px rgba(120, 100, 60, 0.5);
  pointer-events: auto;
}
.chat-tabs { display: flex; gap: 2px; padding: 3px 3px 0; }
.chat-tabs button {
  flex: 1; font: inherit; font-size: 11px; padding: 3px 0;
  color: var(--muted); background: rgba(10, 14, 26, 0.7);
  border: 1px solid var(--ink); cursor: pointer;
}
.chat-tabs button.on { color: var(--paper); background: rgba(60, 76, 120, 0.85); }
.chat-tabs .chat-hide, .chat-tabs .chat-say { flex: 0 0 26px; }
.chat-tabs .chat-say { color: var(--brass-hi); }
.chat-panel.gone .chat-say { display: none; }
.chat-log { cursor: pointer; }
.chat-panel.folded .chat-log { display: none; }
.chat-panel.folded { width: min(220px, 40vw); background: rgba(16, 22, 38, 0.5); }
.chat-panel.gone .chat-log, .chat-panel.gone .chat-tabs button:not(.chat-hide) { display: none; }
.chat-panel.gone { width: auto; background: none; border: 0; box-shadow: none; }
.chat-panel.gone .chat-tabs { padding: 0; }
.chat-panel.gone .chat-hide { flex: 0 0 34px; height: 30px; font-size: 15px; background: rgba(16, 22, 38, 0.8); }
.chat-panel.unread .chat-hide { color: var(--brass-hi); background: rgba(120, 90, 30, 0.75); }
.chat-log {
  height: 104px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px; font-size: 13px;
}
.chat-log[data-tab="party"] .chat-line:not(.ch-party),
.chat-log[data-tab="guild"] .chat-line:not(.ch-guild) { display: none; }
.chat-line {
  padding: 1px 4px;
  color: var(--paper);
  text-shadow: var(--outline);
  overflow-wrap: anywhere;
}
.whisper-win {
  position: absolute; left: 12px; bottom: 330px;
  width: min(300px, 44vw); padding: 0;
  display: flex; flex-direction: column;
  pointer-events: auto; z-index: 21;
}
.whisper-win.hidden { display: none; }
.ww-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 6px; font-size: 12px; color: var(--paper);
  background: rgba(70, 40, 90, 0.85);
}
.ww-head b { color: #f0b4ff; }
.ww-x { font: inherit; color: var(--paper); background: none; border: 0; cursor: pointer; }
.ww-log { height: 84px; overflow-y: auto; padding: 4px; font-size: 13px; }
.ww-input {
  font: inherit; font-size: 13px; padding: 5px 8px; margin: 0 4px 4px;
  color: var(--ink); background: var(--paper); border: 1px solid var(--ink); outline: none;
}
.chat-line b { color: #bfe4ff; font-weight: 700; }
.chat-line.mine b { color: var(--brass-hi); }
.chat-box {
  position: absolute; left: 50%; bottom: 96px;
  transform: translateX(-50%);
  width: min(460px, 80vw);
  z-index: 20;
}
.chat-box { display: flex; gap: 6px; }
.chat-box input {
  flex: 1; min-width: 0; box-sizing: border-box;
  font: inherit; font-size: 15px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px var(--brass-hi);
  outline: none;
}
.chat-box.hidden { display: none; }
.chat-box .chat-send, .chat-box .chat-close {
  font: inherit; font-size: 14px; padding: 6px 12px;
  color: var(--ink); background: var(--brass-hi);
  border: 2px solid var(--ink); cursor: pointer;
}
.chat-box .chat-close { background: var(--paper); padding: 6px 10px; }
.net-chips {
  position: absolute; top: 12px; right: 12px;
  display: flex; gap: 6px; justify-content: flex-end;
  pointer-events: auto;
}
.online-chip, .ping-chip { pointer-events: auto; }
.ping-chip .txt { color: #5ee07a; font-size: 11px; }
.ping-chip.warn .txt { color: var(--brass-hi); }
.ping-chip.bad .txt { color: #ff7a6a; }
.ping-chip.off .txt { color: var(--muted); }
.online-chip .dot {
  width: 9px; height: 9px; margin: 0 4px 0 2px;
  background: #5ee07a;
  box-shadow: 0 0 0 2px var(--ink), 0 0 6px #5ee07a;
}
.online-chip.off .dot { background: #8a8a8a; box-shadow: 0 0 0 2px var(--ink); }
.online-chip.off .txt { color: var(--muted); }
@media (max-width: 720px) {
  .cs-slots { grid-template-columns: 1fr; }
  .cs-slot { min-height: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .cs-preview { width: 192px; height: 240px; }
}

@media (max-width: 720px) {
  .creator { padding: 8px; }
  .creator-body { grid-template-columns: 1fr; padding: 12px; }
  .creator-stage { align-self: center; width: 100%; max-width: 300px; }
  #crPreview { width: 192px; height: 240px; }
}

/* ---- signposts over warp points and street exits (painted maps) ---- */
.path-label {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 1px 8px 2px;
  background: rgba(16, 22, 38, 0.82);
  border: 2px solid var(--ink);
  box-shadow: inset 0 2px 0 var(--brass), 0 2px 0 var(--ink);
  font-size: 12px;
  font-weight: 700;
  color: var(--brass-hi);
  text-shadow: var(--outline);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

/* ---- pixel mouse cursors (painted maps set data-cursor on #game) ---- */
#game { cursor: url("../assets/ui/cursor.png") 0 0, auto; }
#game[data-cursor="talk"] { cursor: url("../assets/ui/cursor_talk.png") 14 10, pointer; }
#game[data-cursor="attack"] { cursor: url("../assets/ui/cursor_attack.png") 0 0, crosshair; }
#game[data-cursor="warp"] { cursor: url("../assets/ui/cursor_warp.png") 0 0, pointer; }
#hud button, .path-label, .mini-map canvas { cursor: url("../assets/ui/cursor.png") 0 0, pointer; }
.path-label { pointer-events: auto; }
.path-label:hover { color: #fff3c4; box-shadow: inset 0 2px 0 var(--brass-hi), 0 2px 0 var(--ink); }

/* ---- minimap, top right like Ragnarok ---- */
/* Top-right dock: the side rail (sound, joystick) stands to the left of the
   minimap, the way a classic MMO client keeps its system buttons by the map. */
.mm-dock {
  position: absolute;
  top: 46px; right: 12px;
  display: flex; align-items: flex-start; gap: 6px;
  pointer-events: none;
}
.rail.side { position: static; flex-direction: column; gap: 4px; }
.mini-map {
  position: relative;
  padding: 4px 6px 6px;
  pointer-events: auto;
}
.mini-map canvas { display: block; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--slate); }
.mm-title, .mm-coords {
  font-size: 11px; font-weight: 700; color: var(--brass-hi); text-shadow: var(--outline);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 226px;
}
.mm-title { margin-bottom: 4px; }
.mm-coords { margin-top: 3px; font-family: var(--font-pixel); font-size: 8px; color: var(--muted); text-align: right; }
.rail.right { display: none; }   /* help moved into the menu block */

/* ---- world map (painted maps: the M window) ---- */
.window.world-map-mode, #minimapWindow.world-map-mode { width: min(1180px, 96vw) !important; }
.world-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #d8c39a;
  /* aged-paper vignette on top of the chart */
  box-shadow: inset 0 0 70px 18px rgba(70, 45, 20, 0.45);
}
.wm-art { display: block; width: 100%; height: 100%; object-fit: cover; }
/* clouds over regions that are not open yet (fog of war), drifting a little */
.wm-cloud { position: absolute; transform: translate(-50%, -50%); image-rendering: pixelated; pointer-events: none;
  opacity: 0.94; filter: drop-shadow(0 3px 2px rgba(40, 30, 20, 0.35)); animation: wm-drift 7s ease-in-out infinite; }
@keyframes wm-drift { 0%, 100% { margin-left: 0; } 50% { margin-left: 1.2%; } }
.wm-pin {
  position: absolute;
  transform: translate(-50%, 0);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.1;
  padding: 2px 7px 3px; border: 2px solid #4a3418; border-radius: 3px;
  background: rgba(40, 28, 16, 0.82); color: #f4e6c4;
  text-shadow: 0 1px 0 #000;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.wm-pin small { font-size: 9px; font-weight: 600; color: #e8c86a; }
.wm-pin::after {                 /* small marker pointing at the exact spot */
  content: ''; position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
  width: 7px; height: 7px; background: #f4e6c4; border: 2px solid #4a3418; border-radius: 50%;
}
.wm-pin.town { background: rgba(62, 40, 20, 0.88); }
.wm-pin.locked { color: #cbbfa8; background: rgba(40, 32, 26, 0.7); border-color: #5a4a3a; }
.wm-pin.locked small { color: #b9a77e; }
.wm-pin.locked::after { background: #9a8a70; }
.wm-pin:hover { border-color: var(--brass-hi); color: #fff; }
.wm-pin.here { border-color: var(--brass-hi); box-shadow: 0 0 0 2px rgba(232, 200, 106, 0.35), 0 2px 0 rgba(0, 0, 0, 0.45); }
.wm-pin.here b::before { content: '★ '; color: var(--brass-hi); }
@media (max-width: 700px) { .wm-pin { font-size: 10px; padding: 2px 6px 3px; } .wm-pin small { font-size: 8px; } }

/* ---- inventory (I) and shop windows ---- */
.ico.bag { background-image: url("../assets/ui/ico-bag.png"); }
#invWindow { top: 90px; left: 50%; transform: translateX(-50%); width: 560px; }
#shopWindow { top: 80px; right: 250px; width: 380px; }
#game[data-cursor="pick"] { cursor: url("../assets/ui/cursor_warp.png") 0 0, pointer; }
.inv-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 10px; }
.inv-equip { display: flex; flex-direction: column; gap: 3px; }
.inv-eq {
  display: flex; align-items: center; gap: 6px; padding: 2px 4px;
  background: var(--indigo); border: 2px solid var(--ink); box-shadow: inset 0 2px 0 #3B4F80; cursor: pointer;
}
.inv-eq:not(.on) { opacity: 0.7; }
.inv-eq:hover { border-color: var(--brass-hi); }
.inv-eq-name { font-size: 11.5px; color: var(--paper); line-height: 1.15; }
.inv-eq-name small { display: block; font-size: 9.5px; color: var(--muted); }
.inv-ico { width: 32px; height: 32px; flex: none; display: inline-block; background: #0A0E19; box-shadow: inset 0 0 0 2px var(--ink); }
.inv-ico canvas { display: block; image-rendering: pixelated; }
.inv-stats { margin-top: 4px; font-size: 10.5px; color: var(--brass-hi); text-shadow: var(--outline); }
.inv-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.inv-tabs button {
  flex: 1; font: inherit; font-size: 12px; font-weight: 700; padding: 3px 0;
  background: var(--night); color: var(--muted); border: 2px solid var(--ink); cursor: pointer;
}
.inv-tabs button.on { background: var(--indigo); color: var(--brass-hi); box-shadow: inset 0 2px 0 var(--brass); text-shadow: var(--outline); }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, 38px); gap: 4px; min-height: 130px; align-content: start; }
.inv-cell {
  position: relative; width: 38px; height: 38px; padding: 1px; border: 2px solid var(--ink);
  background: var(--indigo); cursor: pointer;
}
.inv-cell:hover { border-color: var(--brass-hi); }
.inv-cell.cant canvas { opacity: 0.4; filter: grayscale(0.7); }
.inv-cant { color: #e0776a; }
.inv-cell b, .inv-cell i {
  position: absolute; font-style: normal; font-size: 10px; font-weight: 700; color: var(--paper); text-shadow: var(--outline);
}
.inv-cell b { right: 2px; bottom: 0; }
.inv-cell i { left: 2px; top: 0; color: var(--brass-hi); }
.inv-empty { grid-column: 1 / -1; color: var(--muted); font-size: 12px; padding: 8px; }
.inv-info { margin-top: 6px; min-height: 48px; font-size: 11px; color: var(--muted); line-height: 1.35; }
.inv-info b { color: var(--paper); }
.inv-money { font-size: 12px; font-weight: 700; color: var(--brass-hi); text-shadow: var(--outline); text-align: right; }
.shop-list { display: flex; flex-direction: column; gap: 3px; max-height: 52vh; overflow-y: auto; }
.shop-row {
  display: flex; align-items: center; gap: 8px; padding: 3px 6px; text-align: left; font: inherit;
  background: var(--indigo); border: 2px solid var(--ink); box-shadow: inset 0 2px 0 #3B4F80; cursor: pointer;
}
.shop-row:hover { border-color: var(--brass-hi); }
.shop-name { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--paper); text-shadow: var(--outline); }
.shop-name small { display: block; font-size: 10px; font-weight: 500; color: var(--muted); text-shadow: none; }
.shop-price { font-size: 12px; font-weight: 700; color: var(--brass-hi); text-shadow: var(--outline); white-space: nowrap; }
.shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.shop-sellall { font: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px; background: var(--brass); color: var(--ink); border: 2px solid var(--ink); cursor: pointer; }
.shop-sellall:disabled { opacity: 0.45; cursor: default; }
.shop-qmax { font-size: 11px; padding: 0 6px; }
/* the picked row and the confirm line under the list (quantity + total) */
.shop-row.on { border-color: var(--brass-hi); background: #3B4F80; }
.shop-confirm {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding: 6px 8px;
  background: var(--night); border: 2px solid var(--brass); font-size: 12px; color: var(--paper);
}
.shop-confirm-what { flex: 1; min-width: 120px; }
.shop-confirm-what b { color: var(--brass-hi); text-shadow: var(--outline); }
.shop-qty { display: flex; align-items: center; gap: 6px; }
.shop-qty b { font-size: 14px; min-width: 24px; text-align: center; color: var(--brass-hi); text-shadow: var(--outline); }
.shop-qbtn, .shop-ok, .shop-cancel {
  font: inherit; font-size: 12px; font-weight: 700; padding: 3px 10px; border: 2px solid var(--ink); cursor: pointer;
}
.shop-qbtn { background: var(--indigo); color: var(--paper); min-width: 28px; }
.shop-total { font-weight: 700; color: var(--brass-hi); text-shadow: var(--outline); white-space: nowrap; }
.shop-ok { background: var(--leaf); color: var(--ink); }
.shop-cancel { background: var(--indigo); color: var(--paper); }

/* ---- the sky island: edit-mode button and the storage chest window ---- */
.island-edit {
  position: absolute; right: 14px; top: 300px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--ink); background: var(--brass); border: 2px solid var(--ink); cursor: pointer; pointer-events: auto;
}
body.island-editing .island-edit { background: var(--leaf); }
body.island-editing #game { cursor: move; }
/* the hoe (till / fill a soil plot) sits under the arrange button while arranging the lawn */
.island-edit.hoe { top: 340px; background: var(--brass); }
body.island-hoe .island-edit.hoe { background: var(--job); }
body.island-hoe #game { cursor: cell; }
.plant-row.on { border-color: var(--brass-hi); background: var(--night); }
#storageWindow { top: 120px; left: 240px; width: 470px; }
.storage-wrap { display: flex; gap: 12px; }
.storage-col { flex: 1; min-width: 0; }
.storage-col .inv-grid { max-height: 46vh; overflow-y: auto; }
/* which seed goes into a plot; the bed's rest / save-point choice */
#plantWindow { top: 150px; left: 300px; width: 300px; }
#bedWindow { top: 150px; left: 280px; width: 340px; }
.plant-list { display: flex; flex-direction: column; gap: 6px; }
.plant-row {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; font: inherit; text-align: left;
  color: var(--paper); background: var(--indigo); border: 2px solid var(--ink); cursor: pointer;
}
.plant-row:hover { border-color: var(--brass-hi); }
.plant-row .inv-ico { width: 32px; height: 32px; flex: none; }
.plant-row small { display: block; color: var(--muted); }
.plant-none { color: var(--muted); font-size: 12px; padding: 6px 0; }

/* ---- auto panel: which monster kinds to hunt on this map ---- */
.auto-mobs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 8px; }
.auto-mob { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--paper); cursor: pointer; }
.auto-mob small { color: var(--muted); font-size: 10px; }
.auto-mob.off span { opacity: .55; text-decoration: line-through; }
.auto-none { color: var(--muted); font-size: 11px; }

/* ---- dragging a skill from the skill window onto a slot ---- */
.skill-row { touch-action: none; cursor: grab; }
.skill-ghost {
  position: absolute; z-index: 60; pointer-events: none; transform: translate(-50%, -50%);
  padding: 4px; background: var(--night); border: 2px solid var(--brass-hi); opacity: .92;
}
.skill-ghost canvas, .skill-ghost img { display: block; image-rendering: pixelated; }
.skill-dragging .hotbar .slot, .skill-dragging .tc-skill { outline: 2px dashed var(--brass-hi); outline-offset: 2px; }
.skill-dragging .drop-hover { outline: 3px solid var(--brass-hi); outline-offset: 2px; }

/* ---- auto-potion setting (bag window) ---- */
.autopot-box {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding: 5px 6px;
  background: var(--night); border: 2px solid var(--ink); font-size: 11.5px; color: var(--paper);
}
.autopot-box input[type=range] { flex: 1; min-width: 90px; accent-color: var(--brass); }
.autopot-box b { color: var(--brass-hi); text-shadow: var(--outline); min-width: 34px; }

/* ---- touch controls (mobile) ---- */
.touch-ui { display: none; }
body.touch .touch-ui { display: block; }
body.touch #stage, body.touch #game { touch-action: none; }
body.touch { -webkit-user-select: none; -webkit-touch-callout: none; }
.joy {
  position: absolute; left: 22px; bottom: 26px; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle, rgba(27,39,69,0.35) 0 55%, rgba(27,39,69,0.6) 56% 100%);
  border: 3px solid rgba(255,226,138,0.55); box-shadow: 0 0 0 3px rgba(16,22,38,0.6);
  pointer-events: auto; touch-action: none;
}
.joy-knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #c9923f 70%); border: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink); pointer-events: none;
}
.tc { position: absolute; right: 16px; bottom: 16px; width: 240px; height: 236px; pointer-events: none; }
.tc-btn {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; border: 3px solid #c99a3c; pointer-events: auto; touch-action: none;
  font: inherit; font-weight: 700; color: #f4e6c4; text-shadow: var(--outline);
  background: radial-gradient(circle at 35% 30%, #3a2f24, #120d0a 72%);
  box-shadow: 0 3px 0 #3a2a12, 0 0 0 2px #1a120a, inset 0 0 0 2px #f2cf7a, inset 0 -8px 12px rgba(0,0,0,.5);
}
.tc-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #3a2a12, 0 0 0 2px #1a120a, inset 0 0 0 2px #f2cf7a; }
.tc-btn small { font-size: 9px; color: var(--muted); }
.tc-btn canvas { image-rendering: pixelated; pointer-events: none; }
.tc-btn b {
  position: absolute; right: 2px; bottom: 2px; font-size: 10px; font-weight: 700;
  color: #f6d87a; text-shadow: var(--outline);
}

/* the big attack button sits in the corner; everything else circles it: a
   wide gold ring with an ember-red heart, like the reference client */
.tc-attack {
  right: 4px; bottom: 4px; width: 100px; height: 100px; font-size: 18px; border-width: 5px; border-color: #d9a93e;
  background: radial-gradient(circle at 38% 30%, #a43a2a, #4a140e 70%);
  box-shadow: 0 5px 0 #3a2a12, 0 0 0 3px #1a120a, 0 0 0 5px #7a4e14, inset 0 0 0 3px #f6d87a, inset 0 0 22px rgba(0,0,0,.6), 0 0 16px rgba(255,170,80,.3);
}
.tc-attack:active { box-shadow: 0 0 0 #3a2a12, 0 0 0 3px #1a120a, 0 0 0 5px #7a4e14, inset 0 0 0 3px #f6d87a; }

/* four skill slots on a quarter circle around the attack button: square gold
   frames with the key number, the icon inside */
.tc-skill { width: 56px; height: 56px; border-radius: 10px; }
.tc-skill b { right: 3px; bottom: 1px; font-family: var(--font-pixel); font-size: 9px; }
.tc-skill.s0 { right: 122px; bottom: 22px; }
.tc-skill.s1 { right: 108px; bottom: 70px; }
.tc-skill.s2 { right: 70px; bottom: 108px; }
.tc-skill.s3 { right: 22px; bottom: 122px; }
.tc-skill.empty { opacity: .5; }
.tc-skill.nosp canvas { filter: grayscale(.8) brightness(.7); }
.tc-cd {
  position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
}

/* the two potion slots, further out on the same arc */
.tc-pot { width: 50px; height: 50px; }
.tc-pot.hp { right: 176px; bottom: 26px; background: radial-gradient(circle at 35% 30%, #7a2a2a, #2a0d0d 72%); }
.tc-pot.sp { right: 162px; bottom: 82px; background: radial-gradient(circle at 35% 30%, #2a4a7a, #0d1a2e 72%); }
.tc-pot.empty { opacity: .45; }
.tc-pot.out b { color: #ff8f8f; }

/* auto / pick-up / sit ride along the top of the cluster */
.tc-small { width: 44px; height: 44px; font-size: 11px; }
.tc-small small { color: #d9a93e; }
.tc-auto { right: 10px; bottom: 174px; }
.tc-pick { right: 64px; bottom: 174px; }
.tc-sit { right: 116px; bottom: 166px; }
body.auto-on .tc-auto {
  background: radial-gradient(circle at 35% 30%, #fff3c4, #c9923f 70%); color: #2a1a08; text-shadow: none;
  animation: autoPulse 1.2s ease-in-out infinite;
}
body.auto-on .tc-auto small { color: var(--ink); }
@keyframes autoPulse { 50% { box-shadow: 0 3px 0 #3a2a12, 0 0 0 6px rgba(255,226,138,0.35), inset 0 0 0 2px #f2cf7a; } }

/* on touch screens: hotbar moves up between the thumbs, menus go top-right */
body.touch .hotbar, body.touch .itembar { display: none; }   /* the thumb cluster replaces them */
body.touch .log { display: none; }
body.touch .rail.left { bottom: auto; right: auto; left: 12px; }
@media (max-height: 520px) {
  body.touch .status { transform: scale(0.82); transform-origin: top left; }
  body.touch .purse { top: 88px; transform: scale(0.85); transform-origin: top left; }
  body.touch .mm-dock { transform: scale(0.72); transform-origin: top right; }
  body.touch .rail.left { top: 140px; transform: scale(0.8); transform-origin: top left; }
  body.touch .rail.right { display: none; }
  body.touch .joy { left: 16px; bottom: 16px; transform: scale(0.9); transform-origin: bottom left; }
  body.touch .tc { transform: scale(0.85); transform-origin: bottom right; }
  body.touch .hotbar { transform: translateX(-50%) scale(0.75); }
}

/* ---- joystick toggle icon, item shortcut bar, minimap fold ---- */
.ico.joy-ico { background-image: url("../assets/ui/ico-joy.png"); }
.itembar {
  position: absolute; bottom: 14px; left: 50%; margin-left: 196px;
  display: flex; gap: 4px; padding: 4px;
  border-style: solid; border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-panel.png") 6 6 8 fill / 6px 6px 8px stretch;
  pointer-events: auto;
}
.itembar .slot canvas { margin-top: 3px; }
.itembar .slot.empty-stock canvas { opacity: 0.35; }
.inv-cell .inv-bind {
  position: absolute; left: -2px; bottom: -3px; font-size: 11px; line-height: 1;
  padding: 1px; cursor: pointer; filter: drop-shadow(0 1px 0 #101626);
}
.inv-cell .inv-bind:hover { transform: scale(1.3); }
.mini-map { padding-right: 26px; }
.mm-toggle {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 18px; padding: 0;
  font: inherit; font-size: 10px; line-height: 1; color: var(--brass-hi);
  background: var(--night); border: 2px solid var(--ink); cursor: pointer;
}
.mini-map.folded canvas, .mini-map.folded .mm-coords { display: none; }
body.touch .itembar { margin-left: 150px; transform: scale(0.9); transform-origin: bottom left; }
@media (max-height: 520px) {
  body.touch .itembar { margin-left: 115px; transform: scale(0.75); }
}

/* ---- rail icons: the drawn set (Sprite/ui/rail_icons_gpt.png, cut by
   Sprite/tools/cut_rail_icons.py). Only the octagon buttons use them; the
   10x10 kit icons stay for chips, minimap markers and window furniture. ---- */
.round .ico { width: 28px; height: 28px; background-size: 28px 28px; }
.round .ico.bag     { background-image: url("../assets/ui/rail-bag.png"); }
.round .ico.map     { background-image: url("../assets/ui/rail-map.png"); }
.round .ico.stat    { background-image: url("../assets/ui/rail-stat.png"); }
.round .ico.skill   { background-image: url("../assets/ui/rail-skill.png"); }
.round .ico.auto    { background-image: url("../assets/ui/rail-auto.png"); }
.round .ico.chat    { background-image: url("../assets/ui/rail-chat.png"); }
.round .ico.help    { background-image: url("../assets/ui/rail-help.png"); }
.round .ico.gear    { background-image: url("../assets/ui/rail-gear.png"); }
.round .ico.joy-ico { background-image: url("../assets/ui/rail-joy.png"); }
.round .ico.sound   { background-image: url("../assets/ui/rail-sound.png"); }
.round .ico.mute    { background-image: url("../assets/ui/rail-mute.png"); }
.round .ico.home    { background-image: url("../assets/ui/rail-home.png"); }

/* ---- settings (gear) window ---- */
#settingsWindow { top: 150px; left: 224px; width: 300px; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px; padding: 6px 8px;
  background: var(--night); border: 2px solid var(--ink); font-size: 12px; color: var(--paper);
}
.set-name { font-weight: 600; }
.set-btn {
  padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--paper);
  background: var(--indigo); border: 2px solid var(--ink); cursor: pointer; min-width: 34px;
}
.set-btn:hover { background: var(--slate); }
.set-btn.on { background: var(--leaf); color: var(--ink); border-color: var(--brass-hi); cursor: default; }
.set-size { display: flex; align-items: center; gap: 8px; }
.set-size b { font-family: var(--font-pixel); font-size: 8px; min-width: 36px; text-align: center; }
.ico.gear { background-image: url("../assets/ui/ico-gear.png"); }

/* ---- sound settings window ---- */
#soundWindow { bottom: 76px; left: 16px; width: 300px; }
.vol-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px 8px;
  background: var(--night); border: 2px solid var(--ink); font-size: 12px; color: var(--paper);
}
.vol-row .vol-name { width: 86px; flex: none; font-weight: 600; }
.vol-row input[type=range] { flex: 1; min-width: 0; accent-color: var(--brass); cursor: pointer; }
.vol-row .vol-val { width: 38px; flex: none; text-align: right; color: var(--brass-hi); text-shadow: var(--outline); }
.vol-row.off { opacity: 0.5; }
.vol-mute {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 2px;
  padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--slate); color: var(--paper); border: 2px solid var(--ink); box-shadow: inset 0 2px 0 var(--steel-hi);
}
.vol-mute:hover { background: var(--indigo); }
.vol-mute.on { background: var(--hp); box-shadow: inset 0 2px 0 #F08A8A; }
body.touch #soundWindow { left: 12px; top: 220px; bottom: auto; }

/* the map's name lives in the minimap's title, not under the purse */
.chip.place { display: none; }
/* foldable tool rail */
.rail.left .rail-toggle { font-size: 13px; color: var(--paper); font-family: var(--font-pixel, sans-serif); }
.rail.left.folded > button:not(.rail-toggle) { display: none; }

/* ---- party list ---- */
.party-box {
  position: absolute; left: 12px; top: 200px;
  width: 168px; padding: 4px 6px 6px;
  font-size: 12px;
}
.party-box.hidden { display: none; }
.pt-head { display: flex; justify-content: space-between; align-items: center; color: var(--brass-hi); }
.pt-leave { font: inherit; font-size: 10px; color: var(--paper); background: rgba(60,76,120,.85);
  border: 1px solid var(--ink); cursor: pointer; padding: 1px 6px; }
.pt-row { display: grid; grid-template-columns: 1fr auto; gap: 1px 4px; margin-top: 4px; color: var(--paper); }
.pt-row.me b { color: var(--brass-hi); }
.pt-row small { color: var(--muted); font-size: 10px; grid-column: 1 / -1; }
.pt-hp { grid-column: 1 / -1; height: 5px; background: rgba(0,0,0,.5); border: 1px solid var(--ink); }
.pt-hp i { display: block; height: 100%; background: linear-gradient(#7de08a, #35a04a); }
.invite-line button {
  font: inherit; font-size: 11px; margin-left: 4px; padding: 1px 6px; cursor: pointer;
  color: var(--ink); background: var(--brass-hi); border: 1px solid var(--ink);
}

/* ---- tap a player: invite / whisper ---- */
.tap-menu {
  position: absolute; z-index: 40; min-width: 96px; padding: 4px 5px 5px;
  display: flex; flex-direction: column; gap: 3px; font-size: 12px;
}
.tap-menu.hidden { display: none; }
.tap-menu b { color: var(--brass-hi); text-align: center; }
.tap-menu button {
  font: inherit; font-size: 12px; padding: 4px 8px; cursor: pointer;
  color: var(--paper); background: rgba(60,76,120,.9); border: 1px solid var(--ink);
}
.tap-menu button:hover { background: rgba(86,106,158,.95); }

/* ---- trade window ---- */
#tradeWindow { width: 340px; top: 110px; left: 50%; transform: translateX(-50%); }
.trade-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trade-side h4, .trade-bag h4 { margin: 0 0 4px; color: var(--brass-hi); font-size: 12px; font-weight: 600; }
.trade-side h4 small, .trade-bag h4 small { color: var(--muted); font-weight: 400; }
.trade-grid { display: grid; grid-template-columns: repeat(auto-fill, 38px); gap: 4px; min-height: 84px; align-content: start; }
.trade-grid.bag { min-height: 46px; }
.trade-bag { grid-column: 1 / -1; border-top: 1px solid var(--ink); padding-top: 6px; }
.trade-money { display: block; margin-top: 6px; color: var(--paper); font-size: 12px; }
.trade-money input { width: 86px; margin-left: 4px; font: inherit; font-size: 12px; padding: 2px 4px;
  color: var(--paper); background: rgba(0,0,0,.45); border: 1px solid var(--ink); }
.trade-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--ink); padding-top: 6px; }
.trade-foot .t-state { flex: 1; color: var(--muted); font-size: 11px; }
.trade-foot button { font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer;
  color: var(--paper); background: rgba(60,76,120,.9); border: 1px solid var(--ink); }
.trade-foot .t-ok { background: var(--brass-hi); color: var(--ink); }
.trade-foot button[disabled] { opacity: .45; cursor: default; }

/* ---- auto panel ---- */
#autoWindow { width: 290px; top: 96px; right: 16px; }
.auto-wrap { display: flex; flex-direction: column; gap: 8px; }
.auto-wrap h5 {
  margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--brass-hi);
  border-bottom: 1px solid var(--slate); padding-bottom: 3px;
}
.auto-wrap h5 small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.auto-main {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--paper); text-shadow: var(--outline);
  background: linear-gradient(var(--indigo), var(--night)); border: 2px solid var(--ink);
}
.auto-main small { margin-left: auto; color: var(--muted); font-size: 10px; }
.auto-main .auto-dot {
  width: 10px; height: 10px; border: 1px solid var(--ink); background: var(--slate);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.auto-main.on { background: linear-gradient(#3a5a3c, #22351f); border-color: var(--leaf); }
.auto-main.on .auto-dot { background: #8ef08a; box-shadow: 0 0 6px #8ef08a; }
.auto-row { display: flex; gap: 8px; align-items: flex-start; }
.auto-row-main { flex: 1; min-width: 0; }
.auto-head { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--paper); cursor: pointer; }
.auto-head b { color: var(--brass-hi); }
.auto-row small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 1px; }
.auto-range { width: 100%; margin: 2px 0 0; }
.auto-row.hp .auto-range { accent-color: var(--hp); }
.auto-row.sp .auto-range { accent-color: var(--sp); }
.auto-slot {
  position: relative; width: 42px; height: 42px; flex: none; padding: 0; cursor: pointer;
  background: rgba(0,0,0,.45); border: 2px solid var(--slate);
  display: flex; align-items: center; justify-content: center;
}
.auto-slot:hover { border-color: var(--brass-hi); }
.auto-slot.filled { border-color: var(--brass); }
.auto-row.hp .auto-slot.filled { border-color: var(--hp); }
.auto-row.sp .auto-slot.filled { border-color: var(--sp); }
.auto-slot i { color: var(--slate); font-size: 18px; font-style: normal; }
.auto-slot b {
  position: absolute; right: 1px; bottom: 0; font-size: 10px; color: var(--paper); text-shadow: var(--outline);
}
.auto-slot b.out { color: #ff8f8f; }
.auto-slot canvas { image-rendering: pixelated; }
.auto-skills { display: flex; gap: 6px; }
.auto-skills .auto-slot { flex: 1 1 0; width: auto; height: 48px; }
.auto-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--paper); cursor: pointer; }
.auto-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.auto-mode {
  font: inherit; font-size: 12px; padding: 5px 6px; cursor: pointer;
  color: var(--paper); background: rgba(60,76,120,.9); border: 1px solid var(--ink);
}
.auto-mode:hover { background: rgba(86,106,158,.95); }
.auto-mode.on { background: linear-gradient(#3a5a3c, #22351f); border-color: var(--leaf); color: #eaffdf; }
.auto-mode-desc { color: var(--muted); font-size: 10.5px; margin-top: -4px; }
.auto-warn { color: #ffb36b; font-size: 11px; margin-top: -4px; }
.auto-follow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--paper); }
.auto-follow small { color: var(--muted); font-size: 10.5px; }
.auto-skills .auto-slot.off { opacity: .4; border-style: dashed; }
.autopot-open {
  font: inherit; font-size: 11.5px; padding: 4px 8px; cursor: pointer; width: 100%;
  color: var(--paper); background: var(--indigo); border: 1px solid var(--ink);
}
.pick-pop {
  position: absolute; z-index: 60; min-width: 150px; max-height: 240px; overflow-y: auto;
  padding: 4px; display: flex; flex-direction: column; gap: 2px;
}
.pick-pop.hidden { display: none; }
.pick-pop button {
  display: flex; align-items: center; gap: 6px; text-align: left; cursor: pointer;
  font: inherit; font-size: 12px; padding: 3px 6px;
  color: var(--paper); background: transparent; border: 1px solid transparent;
}
.pick-pop button:hover { background: rgba(255,226,138,.15); border-color: var(--brass); }
.pick-pop canvas { image-rendering: pixelated; }
body.auto-on .auto-rail { filter: drop-shadow(0 0 4px #8ef08a); }

/* ---- phones play in landscape ---- */
.rotate-note { display: none; }
body.touch .rotate-note {
  position: fixed; inset: 0; z-index: 200; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(16,22,38,.96); color: var(--paper); text-align: center; padding: 24px;
  pointer-events: auto; font-size: 15px;
}
@media (orientation: portrait) {
  body.touch .rotate-note { display: flex; }
}
.rotate-note .phone {
  width: 58px; height: 96px; border: 4px solid var(--brass-hi); border-radius: 8px;
  animation: rotateHint 2s ease-in-out infinite;
}
.rotate-note b { color: var(--brass-hi); font-size: 17px; }
@keyframes rotateHint { 40%, 100% { transform: rotate(90deg); } 0%, 20% { transform: none; } }

/* landscape phone: the chat sits between the thumbs, like a mobile MMO */
body.touch .chat-panel { left: 170px; bottom: 126px; width: min(300px, 38vw); }
@media (max-height: 420px) {
  body.touch .chat-panel { width: min(260px, 34vw); bottom: 92px; }
  body.touch .chat-log { max-height: 76px; }
  body.touch .mini-map { transform: scale(0.62); transform-origin: top right; }
}
.tc-pot.auto-armed::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(126,240,138,.55); pointer-events: none;
}

/* ---- zoom / fullscreen buttons ---- */
.ico.glyph {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: 15px; font-weight: 700; color: var(--paper); text-shadow: var(--outline);
}

/* in fullscreen the HUD keeps clear of a notch */
body.fullscreen .status, body.fullscreen .purse { padding-left: env(safe-area-inset-left, 0); }
body.fullscreen .joy { left: calc(22px + env(safe-area-inset-left, 0px)); }
body.fullscreen .tc { right: calc(16px + env(safe-area-inset-right, 0px)); }

/* ---- shortcut bar (F1-F9, two rows) ---- */
.hotbar, .itembar { display: none !important; }   /* replaced by the shortcut bar */
.shortbar {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 5px; padding: 5px 6px;
  border-style: solid; border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-panel.png") 6 6 8 fill / 6px 6px 8px stretch;
  pointer-events: auto;
}
.shortbar.picking { box-shadow: 0 0 0 2px var(--brass-hi); }
.sb-row {
  width: 30px; height: 44px; padding: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--brass-hi); text-shadow: var(--outline);
  background: var(--indigo); border: 2px solid var(--ink);
}
.sb-row small { display: block; font-size: 9px; color: var(--muted); }
.sb-slots { display: flex; gap: 4px; }
.sb-slot {
  position: relative; width: 44px; height: 44px; padding: 0; cursor: pointer; overflow: hidden;
  background: rgba(0,0,0,.45); border: 2px solid var(--slate);
  display: flex; align-items: center; justify-content: center;
}
.sb-slot.filled { border-color: var(--brass); }
.sb-slot.over { border-color: var(--brass-hi); background: rgba(255,226,138,.18); }
.sb-slot canvas { image-rendering: pixelated; pointer-events: none; }
.sb-slot.nosp canvas { filter: grayscale(.8) brightness(.7); }
.sb-key {
  position: absolute; left: 2px; top: 0; font-size: 8px; font-style: normal;
  font-family: var(--font-pixel); color: var(--muted); text-shadow: var(--outline);
}
.sb-num {
  position: absolute; right: 2px; bottom: 1px; font-size: 10px;
  color: var(--paper); text-shadow: var(--outline);
}
.sb-slot.out .sb-num { color: #ff8f8f; }
.sb-cd {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 0;
  background: rgba(8,12,22,.66); pointer-events: none;
}
/* on a phone the bar sits between the thumbs, a little smaller */
body.touch .shortbar { bottom: 62px; transform: translateX(-50%) scale(0.82); transform-origin: bottom center; }
@media (max-height: 420px) {
  body.touch .shortbar { bottom: 36px; transform: translateX(-50%) scale(0.7); }
}

/* the menu block follows the minimap when it is scaled down or folded */
body.touch .rail.left { top: 150px; }
@media (max-height: 420px) {
  body.touch .rail.left { top: 140px; transform: scale(0.85); transform-origin: top left; }
}

/* ---- add to home screen (js/pwa.js) ---- */
.a2hs {
  position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom));
  transform: translate(-50%, 120%);
  display: flex; align-items: center; gap: 10px;
  width: min(92vw, 420px); padding: 8px 10px;
  border-style: solid; border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-gold.png") 6 6 8 fill / 6px 6px 8px stretch;
  color: var(--brass-hi); text-shadow: var(--outline);
  z-index: 60; transition: transform .28s steps(4, end);
}
.a2hs.show { transform: translate(-50%, 0); }
.a2hs-ico { width: 40px; height: 40px; image-rendering: pixelated; border-radius: 8px; }
.a2hs-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.a2hs-txt b { font-size: 14px; }
.a2hs-txt span { font-size: 11px; opacity: .85; }
.a2hs-go { font: inherit; font-weight: 700; padding: 6px 12px; border: 0; border-radius: 6px;
  background: #c9a24a; color: #1a1408; text-shadow: none; }
.a2hs-x { font: inherit; background: none; border: 0; color: inherit; opacity: .7; padding: 4px; }
.a2hs-howto { position: fixed; inset: 0; z-index: 61; background: rgba(6, 9, 18, .72);
  display: flex; align-items: center; justify-content: center; }
.a2hs-card { width: min(92vw, 380px); padding: 12px 16px 14px;
  border-style: solid; border-width: 6px 6px 8px;
  border-image: url("../assets/ui/frame-gold.png") 6 6 8 fill / 6px 6px 8px stretch;
  color: var(--brass-hi); text-shadow: var(--outline); font-size: 13px; }
.a2hs-card h3 { margin: 0 0 8px; font-size: 15px; }
.a2hs-card ol { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
.a2hs-card .k { display: inline-block; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; }
.a2hs-ok { font: inherit; font-weight: 700; width: 100%; padding: 8px; border: 0; border-radius: 6px;
  background: #c9a24a; color: #1a1408; text-shadow: none; }
body.standalone .a2hs { display: none; }
.ico.glyph.lang { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 0; }

/* ---- login / title screen (js/login.js) ---- */
body.login-on #hud { visibility: hidden; }   /* only the painting shows behind the title screen */
.login {
  position: fixed; inset: 0;
  z-index: 60;
  overflow: hidden;
  background: var(--ink);
  transition: opacity 0.25s steps(4);
}
.login.leaving { opacity: 0; }
.login.hidden { display: none; }
.login-scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 60%;
  image-rendering: pixelated;
  animation: login-drift 40s ease-in-out infinite alternate;    /* slow breathing zoom, like a camera on a crane */
}
@keyframes login-drift { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1.5%); } }
.login-sky { position: absolute; inset: 0; height: 45%; pointer-events: none; }
.login-sky i {
  position: absolute; width: 4px; height: 4px; background: var(--paper);
  animation: login-twinkle 2.4s steps(2) infinite;
}
.login-sky i:nth-child(1) { left: 12%; top: 18%; }
.login-sky i:nth-child(2) { left: 28%; top: 9%;  animation-delay: 0.6s; }
.login-sky i:nth-child(3) { left: 66%; top: 12%; animation-delay: 1.1s; }
.login-sky i:nth-child(4) { left: 84%; top: 24%; animation-delay: 0.3s; }
.login-sky i:nth-child(5) { left: 8%;  top: 62%; animation-delay: 1.6s; }
.login-sky i:nth-child(6) { left: 90%; top: 70%; animation-delay: 0.9s; }
@keyframes login-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.login-hero {
  position: absolute; left: 50%; top: max(12px, 3vh); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: min(640px, 92vw);
}
.login-logo {
  width: 100%; max-height: 38vh; object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(16, 22, 38, 0.6));
  animation: login-float 3s steps(6) infinite;
}
@keyframes login-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.login-sub { font-size: 15px; font-weight: 700; color: var(--paper); text-shadow: var(--outline); letter-spacing: 2px; }

/* RO-style login box: a small glossy panel below the logo — the one place the
   pixel-UI "no border-radius" rule is waived, by request */
.login-box {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  width: 400px; max-width: 94vw;
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: start;
  margin: 0; padding: 12px 14px 10px;
  background: rgba(238, 242, 250, 0.92);
  border: 2px solid #7e8aa8;
  border-radius: 14px 40px 14px 14px;
  box-shadow: 0 6px 0 rgba(16, 22, 38, 0.35), inset 0 1px 0 #fff;
  font-family: var(--font-th);
  transition: opacity 0.2s, transform 0.2s;
}
.login.boxless .login-box { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(16px); }
.login-reopen {
  position: absolute; left: 50%; top: 62%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font: inherit; font-size: 20px; font-weight: 700; padding: 8px 22px 8px 12px;
  color: #fff; background: linear-gradient(#8fc8ff, #4c91d9 55%, #2d6bb8);
  border: 3px solid #fff; border-radius: 999px; cursor: pointer;
  box-shadow: 0 0 0 2px #5a7bb0, 0 6px 0 rgba(16, 22, 38, 0.35);
}
.login-reopen.hidden { display: none; }
.login.boxless .login-reopen.hidden { display: flex; }
.login-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.login-col-go { align-items: center; position: relative; padding-top: 10px; }
.login-select, .login-field {
  font: inherit; font-size: 14px; font-weight: 600;
  width: 100%; padding: 6px 10px;
  color: #22304f; background: #fff;
  border: 1px solid #9aa6c0; border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  outline: none;
}
.login-select { text-align: center; text-align-last: center; }
.login-field::placeholder { color: #a9b2c6; }
.login-field:focus, .login-select:focus { border-color: var(--sp); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(76, 145, 217, 0.4); }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.login-remember { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #4a5678; cursor: pointer; }
.login-remember input { width: 14px; height: 14px; margin: 0; accent-color: var(--sp); }
.login-small {
  font: inherit; font-size: 13px; font-weight: 700; padding: 4px 14px;
  color: #22304f; background: linear-gradient(#fff, #dfe5f0);
  border: 1px solid #8b97b3; border-radius: 6px; cursor: pointer;
  box-shadow: 0 2px 0 #b2bccf;
}
.login-small:active { transform: translateY(2px); box-shadow: none; }
.login-error { min-height: 14px; font-size: 12px; color: #d33; }
/* Google sign-in (js/account.js): Google's own button, or the signed-in account */
.login-google { min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; }
.login-google.hidden, .login-signed.hidden { display: none; }
.login-google.flash { animation: login-flash 0.9s ease 2; }
@keyframes login-flash { 50% { box-shadow: 0 0 0 4px rgba(76, 145, 217, 0.55); } }
.login-signed { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: #fff; border: 1px solid #9aa6c0; border-radius: 8px; }
.login-tick { color: #2e9a52; font-weight: 700; }
.login-email { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #22304f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-note { flex: 1; min-width: 0; font-size: 11px; color: #4a5678; line-height: 1.3; }
#loginRegister { white-space: nowrap; flex: none; }
.login-go {
  position: relative;
  width: 108px; height: 108px; padding: 0; margin-top: 6px;
  font: inherit; font-size: 28px; font-weight: 800; letter-spacing: 0.5px;
  color: #fff; -webkit-text-stroke: 1px #2d6bb8; text-shadow: 0 2px 0 #2d6bb8;
  background: radial-gradient(circle at 50% 30%, #cfe9ff 0 18%, #8fc8ff 19% 45%, #4c91d9 46% 80%, #2d6bb8 100%);
  border: 4px solid #fff; border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 3px #9fb3d8, 0 6px 0 rgba(16, 22, 38, 0.3), inset 0 -8px 0 rgba(0, 0, 0, 0.12);
}
.login-go span { position: relative; z-index: 1; display: block; padding-top: 22px; }
.login-go:hover { filter: brightness(1.08); }
.login-go:active { transform: translateY(3px); box-shadow: 0 0 0 3px #9fb3d8, 0 2px 0 rgba(16, 22, 38, 0.3); }
/* our dewdrop slime peeks over the button: idle row of assets/fx/slime_idle.png (8 frames x 48px), shown at 2x */
.login-pet {
  position: absolute; left: 50%; top: -58px; transform: translateX(-50%);
  width: 96px; height: 96px;
  background: url("../assets/fx/slime_idle.png") 0 0 / 800% 800% no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  animation: login-pet 1.6s steps(8) infinite;
}
@keyframes login-pet { from { background-position-x: 0; } to { background-position-x: -768px; } }
.login-reopen .login-pet { position: static; transform: none; width: 48px; height: 48px; animation-name: login-pet-small; }
@keyframes login-pet-small { from { background-position-x: 0; } to { background-position-x: -384px; } }
.login-close {
  position: absolute; right: -6px; top: 6px;
  width: 26px; height: 26px; padding: 0;
  font: inherit; font-size: 18px; font-weight: 700; line-height: 1;
  color: #5a4a8a; background: linear-gradient(#fff, #e6e0f4);
  border: 2px solid #a495d0; border-radius: 50%; cursor: pointer;
}
.login-guest {
  grid-column: 1 / -1; justify-self: start;
  font: inherit; font-size: 12px; font-weight: 700; padding: 3px 14px;
  color: #fff; background: linear-gradient(#ff7a7a, #d63b3b);
  border: 1px solid #a02828; border-radius: 6px; cursor: pointer;
  box-shadow: 0 2px 0 #8a2020;
}
.login-guest:active { transform: translateY(2px); box-shadow: none; }

.login-foot {
  position: absolute; left: 0; right: 0; bottom: max(10px, env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 14px;
  font-size: 12px; color: var(--paper); text-shadow: var(--outline);
}
.login-chip { display: inline-flex; align-items: center; gap: 6px; }
.login-chip i { width: 8px; height: 8px; background: var(--muted); box-shadow: 0 0 0 2px var(--ink); }
.login-chip.on i { background: var(--leaf); }
.login-chip.off i { background: var(--hp); }

/* community buttons, bottom-right above the version line */
.login-social {
  position: absolute; right: 14px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 24px);
  display: flex; gap: 8px;
}
.login-soc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 8px;
  font: inherit; font-size: 13px; font-weight: 700; text-decoration: none;
  color: #fff; border: 2px solid #fff; border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(16, 22, 38, 0.5), 0 4px 0 rgba(16, 22, 38, 0.35);
}
.login-soc svg { width: 20px; height: 20px; }
.login-soc.discord { background: linear-gradient(#7c8cff, #5865f2 55%, #3f4bc7); }
.login-soc.facebook { background: linear-gradient(#5c9cff, #1877f2 55%, #0f5bc4); }
.login-soc:hover { filter: brightness(1.1); }
.login-soc:active { transform: translateY(3px); box-shadow: 0 0 0 2px rgba(16, 22, 38, 0.5), 0 1px 0 rgba(16, 22, 38, 0.35); }

/* phone landscape: logo top-left, box lower-right, nothing scrolls */
@media (max-height: 460px) {
  .login-hero { top: 6px; width: min(340px, 46vw); left: 26%; }
  .login-box { left: auto; right: 4vw; top: auto; bottom: 26px; transform: none; width: 360px; padding: 8px 12px 8px; gap: 4px 10px; }
  .login.boxless .login-box { transform: translateY(16px); }
  .login-go { width: 84px; height: 84px; font-size: 22px; margin-top: 2px; }
  .login-pet { top: -46px; width: 72px; height: 72px; animation-name: login-pet-phone; }
  @keyframes login-pet-phone { from { background-position-x: 0; } to { background-position-x: -576px; } }
  .login-select, .login-field { font-size: 13px; padding: 4px 8px; }
  .login-error { min-height: 0; }
  .login-foot { bottom: 4px; }
  .login-social { right: auto; left: 12px; bottom: 22px; flex-direction: column; gap: 5px; }
  .login-soc { padding: 3px 9px 3px 6px; font-size: 12px; }
  .login-soc svg { width: 16px; height: 16px; }
}

/* ---- death: the panel when you fall, and the bar while you lie there ---- */
.death-panel {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  width: 250px; padding: 14px 16px 12px; text-align: center;
  pointer-events: auto; z-index: 40;
}
.death-panel.hidden { display: none; }
.death-panel h3 { margin: 0; color: #ff8f8f; font-size: 18px; text-shadow: var(--outline); }
.death-panel .dp-note { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.death-panel button {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border: 1px solid var(--brass); border-radius: 6px; cursor: pointer;
  background: linear-gradient(#3a4a6a, #263352); color: #fff; font-weight: 600; font-size: 14px;
}
.death-panel button small { font-size: 11px; font-weight: 400; color: var(--muted); text-shadow: none; }
.death-panel .dp-home { background: linear-gradient(#5a4a2a, #3a2e18); }
.death-panel button:hover { border-color: var(--brass-hi); }

/* lying dead with the panel closed: the way home stays one tap away */
.dead-bar {
  position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px;
  background: rgba(20, 14, 24, 0.82); border: 1px solid var(--brass);
  border-radius: 999px; color: #f0d8d8; font-size: 12px; white-space: nowrap;
  pointer-events: auto; z-index: 30;
}
.dead-bar.hidden { display: none; }
.dead-bar button {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--brass-hi);
  background: linear-gradient(#5a4a2a, #3a2e18); color: #fff; font-weight: 600; font-size: 12px; cursor: pointer;
}
.dead-bar button:hover { filter: brightness(1.15); }

/* ---- RO-style character select (js/charselect.js, mode "select") ---- */
.creator.cs-ro { background: var(--ink); padding: 0; }
.creator.cs-ro .login-scene { animation: none; filter: brightness(0.85); }
.cs-ro-wrap {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px;
  background: rgba(238, 242, 250, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0 6px 0 rgba(16, 22, 38, 0.3);
  font-family: var(--font-th);
}
.cs-ro-slots { display: grid; grid-template-columns: repeat(3, 120px); gap: 10px; }
.cs-ro .cs-slot {
  min-height: 170px; padding: 6px 4px 8px; gap: 4px;
  border: 2px solid #b9c3d8; border-image: none; border-radius: 6px;
  background: linear-gradient(#f4f6fb, #d9dfec);
  color: #22304f; box-shadow: 0 3px 0 #9fa9c0;
}
.cs-ro .cs-slot:hover { border-color: #4c91d9; }
.cs-ro .cs-slot.on { border-color: #4c91d9; background: linear-gradient(#fff, #e6f0ff); box-shadow: 0 0 0 2px rgba(76, 145, 217, 0.5), 0 3px 0 #9fa9c0; }
.cs-ro .cs-slot canvas { width: 96px; height: 112px; background: radial-gradient(ellipse 40% 10% at 50% 92%, rgba(60, 80, 120, 0.25) 0 60%, transparent 62%); }
.cs-ro .cs-slot b { font-size: 13px; color: #22304f; text-shadow: none; }
.cs-ro .cs-slot small { font-size: 10px; letter-spacing: 2px; color: #a9b2c6; }
.cs-ro .cs-slot.empty { color: #a9b2c6; }
.cs-ro .cs-slot .cs-plus { font-size: 30px; color: #c3cbdc; text-shadow: none; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: #e7ebf4; }
.cs-ro-info {
  width: 132px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 8px 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #b9c3d8; border-radius: 6px;
}
.cs-ro-logo { width: 100px; image-rendering: pixelated; }
.cs-ro-stats { width: 100%; border-collapse: collapse; font-size: 10px; }
.cs-ro-stats th { width: 40px; white-space: nowrap; padding: 1px 4px; text-align: left; color: #fff; background: #4c91d9; font-weight: 700; }
.cs-ro-stats td { padding: 1px 4px; color: #22304f; background: #eef2fa; white-space: nowrap; overflow: hidden; max-width: 80px; text-overflow: ellipsis; }
.cs-ro-stats tr:nth-child(even) td { background: #fff; }
.cs-ro-del {
  font: inherit; font-size: 11px; font-weight: 700; width: 100%; padding: 3px 0;
  color: #22304f; background: linear-gradient(#fff, #dfe5f0);
  border: 1px solid #8b97b3; border-radius: 4px; cursor: pointer;
}
.cs-ro-del[disabled] { opacity: 0.45; cursor: default; }
.cs-ro-del.danger { color: #fff; background: linear-gradient(#ff7a7a, #d63b3b); border-color: #a02828; }
.cs-ro-play {
  position: relative; width: 96px; height: 96px; margin-top: 44px; padding: 0;
  font: inherit; font-size: 20px; font-weight: 800;
  color: #fff; -webkit-text-stroke: 1px #2d6bb8; text-shadow: 0 2px 0 #2d6bb8;
  background: radial-gradient(circle at 50% 30%, #cfe9ff 0 18%, #8fc8ff 19% 45%, #4c91d9 46% 80%, #2d6bb8 100%);
  border: 4px solid #fff; border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 0 3px #9fb3d8, 0 6px 0 rgba(16, 22, 38, 0.3), inset 0 -8px 0 rgba(0, 0, 0, 0.12);
}
.cs-ro-play span { position: relative; z-index: 1; display: block; padding-top: 20px; }
.cs-ro-play:active { transform: translateY(3px); box-shadow: 0 0 0 3px #9fb3d8, 0 2px 0 rgba(16, 22, 38, 0.3); }
.cs-ro-play .login-pet { top: -44px; width: 64px; height: 64px; animation-name: login-pet-cs; }
@keyframes login-pet-cs { from { background-position-x: 0; } to { background-position-x: -512px; } }
.cs-ro-count { font-size: 10px; color: #4a5678; }
@media (max-height: 460px) {
  .cs-ro-wrap { padding: 8px; gap: 8px; }
  .cs-ro-slots { grid-template-columns: repeat(3, 100px); gap: 6px; }
  .cs-ro .cs-slot { min-height: 120px; }
  .cs-ro .cs-slot canvas { width: 72px; height: 84px; }
  .cs-ro-logo { display: none; }
  .cs-ro-info { width: 200px; }
  .cs-ro-stats, .cs-ro-stats tbody { display: block; font-size: 9px; }
  .cs-ro-stats tr { display: inline-flex; width: 50%; }
  .cs-ro-stats th { width: 30px; flex: none; }
  .cs-ro-stats td { flex: 1; max-width: none; }
  .cs-ro-play { width: 76px; height: 76px; font-size: 16px; margin-top: 6px; }
  .cs-ro-play .login-pet { top: -40px; width: 60px; height: 60px; animation-name: login-pet-cs-s; }
  @keyframes login-pet-cs-s { from { background-position-x: 0; } to { background-position-x: -480px; } }
}

/* ---- loading screen (js/loading.js) ---- */
.loading {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(45, 62, 104, 0.35), transparent 70%),
    repeating-conic-gradient(rgba(255, 255, 255, 0.025) 0 25%, transparent 0 50%) 0 0 / 6px 6px,
    #0c1120;
  color: var(--paper);
  font-family: var(--font-th);
}
.loading.on { display: flex; }
.loading-inner { width: min(540px, 80vw); display: flex; flex-direction: column; align-items: center; }
.loading-runner {
  position: relative; align-self: stretch; height: 60px;
  left: 0; transition: left 0.25s linear;
}
.loading-slime {
  position: absolute; left: 0; bottom: 0; transform: translateX(-50%);
  width: 96px; height: 96px;
  background: url("../assets/fx/slime_move.png") 0 -192px / 800% 800% no-repeat;   /* row 2: facing east (rows 5-7 face west) */
  image-rendering: pixelated;
  animation: loading-hop 0.55s steps(8) infinite;
}
@keyframes loading-hop { from { background-position-x: 0; } to { background-position-x: -768px; } }
.loading-bar {
  position: relative; width: 100%; height: 14px;
  background: #16223f;
  clip-path: polygon(0 50%, 8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%);
  box-shadow: inset 0 0 0 2px #2a3b66;
}
.loading-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(#8ff5ff, #1fc8e8 55%, #12a6c6);
  clip-path: polygon(0 50%, 8px 0, 100% 0, 100% 100%, 8px 100%);
  transition: width 0.25s linear;
}
.loading-pct { position: absolute; right: 14px; top: 18px; font-size: 12px; font-weight: 700; color: #8fe8ff; }
.loading-tips-head {
  margin-top: 26px; display: flex; align-items: center; gap: 8px;
  font-family: Georgia, "Times New Roman", serif; font-variant: small-caps; font-size: 16px; letter-spacing: 2px;
  color: #cfe2ff;
}
.loading-tips-head span { color: #4c91d9; font-size: 10px; }
.loading-tips-head::before, .loading-tips-head::after { content: ""; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, #3f5a8f); }
.loading-tips-head::after { background: linear-gradient(90deg, #3f5a8f, transparent); }
.loading-tip { margin-top: 14px; min-height: 22px; text-align: center; font-size: 14px; color: #a9c8ff; }
.loading-orn { margin-top: 22px; color: #3f5a8f; font-size: 18px; }
.loading-orn::before, .loading-orn::after { content: "———"; letter-spacing: -2px; margin: 0 8px; color: #2a3b66; }
@media (max-height: 460px) {
  .loading-runner { height: 48px; }
  .loading-slime { width: 72px; height: 72px; background-position-y: -144px; animation-name: loading-hop-s; }
  @keyframes loading-hop-s { from { background-position-x: 0; } to { background-position-x: -576px; } }
  .loading-tips-head { margin-top: 14px; }
  .loading-orn { margin-top: 10px; }
}

/* ---- gold pictograms (Sprite/town/work/icons/gold_icons_sheet_source.png, GPT) ---- */
.rail.left .ico.bag   { background-image: url("../assets/ui/gico-bag.png"); }
.rail.left .ico.map   { background-image: url("../assets/ui/gico-map.png"); }
.rail.left .ico.stat  { background-image: url("../assets/ui/gico-stat.png"); }
.rail.left .ico.skill { background-image: url("../assets/ui/gico-skill.png"); }
.rail.left .ico.chat  { background-image: url("../assets/ui/gico-chat.png"); }
.rail.left .ico.gear  { background-image: url("../assets/ui/gico-gear.png"); }
.rail.left .ico.help  { background-image: url("../assets/ui/gico-help.png"); }
.rail.left .ico.auto  { background-image: url("../assets/ui/gico-auto.png"); }
.rail.left .ico.board { background-image: url("../assets/ui/gico-board.png"); }
.rail.left .ico.sound { background-image: url("../assets/ui/gico-sound.png"); }
.rail.left .ico.castle{ background-image: url("../assets/ui/gico-home.png"); }
.rail.left .round .ico { background-size: 24px 24px; image-rendering: auto; }
/* the thumb cluster's round buttons carry a pictogram above their word */
.tc-attack::before, .tc-pick::before, .tc-sit::before, .tc-auto::before {
  content: ''; display: block; background: center / contain no-repeat; pointer-events: none;
}
.tc-attack::before { width: 40px; height: 40px; margin-bottom: -2px; background-image: url("../assets/ui/gico-attack-32.png"); filter: drop-shadow(0 1px 0 #000); }
.tc-attack span { font-size: 13px; }
.tc-pick::before { width: 20px; height: 20px; background-image: url("../assets/ui/gico-pick.png"); }
.tc-sit::before { width: 20px; height: 20px; background-image: url("../assets/ui/gico-sit.png"); }
.tc-auto::before { width: 18px; height: 18px; background-image: url("../assets/ui/gico-auto.png"); }
.tc-small span { font-size: 9px; line-height: 1; }
.tc-auto small { display: none; }

/* hilltop lookout (far_lands.js showLandVista): a painted view over the game */
.land-vista { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .72); z-index: 400; cursor: pointer; }
.land-vista.open { display: flex; }
.land-vista .lv-box { max-width: min(1100px, 94vw); background: #2b2118; border: 3px solid #c9a24a; border-radius: 6px; padding: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.land-vista img { display: block; width: 100%; max-height: 70vh; object-fit: contain; image-rendering: pixelated; }
.land-vista .lv-cap { color: #f3e6c4; font-size: 15px; line-height: 1.5; padding: 10px 6px 2px; text-align: center; }
.land-vista .lv-hint { color: #a8916a; font-size: 12px; text-align: center; padding-bottom: 4px; }

/* ---- thrown out of the server (name already online) ---- */
.net-kick {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(8, 6, 14, .72); pointer-events: auto;
}
.net-kick-box {
  max-width: 340px; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-th); font-size: 14px; text-align: center;
}
.net-kick-box b { color: var(--brass-hi); text-shadow: var(--outline); font-size: 16px; }
.net-kick-box p { margin: 0; line-height: 1.5; }
.net-kick-box button {
  font: inherit; padding: 6px 12px; cursor: pointer;
  color: var(--paper); background: rgba(60,76,120,.9); border: 1px solid var(--ink);
}
.net-kick-box button:hover { background: rgba(86,106,158,.95); }

/* ---- quests (js/quests.js): the tracker under the minimap and the journal (J) ---- */
.qt {
  position: absolute; right: 12px; top: 250px; width: 216px; padding: 4px 8px 6px; pointer-events: auto;
  background: rgba(16, 22, 38, 0.84); border: 1px solid var(--brass); font-size: 11px; color: var(--paper); text-shadow: var(--outline);
}
.qt.hidden { display: none; }
.qt-head { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; font-size: 12px; color: var(--brass-hi); }
.qt-head span { flex: 1; }
.qt-fold { font: inherit; background: none; border: 0; color: var(--brass-hi); cursor: pointer; padding: 0 2px; }
.qt.folded .qt-body { display: none; }
.qt-title { margin-top: 3px; font-weight: 700; color: #ffe9a8; }
.qt-obj { display: flex; align-items: center; gap: 6px; margin: 2px 0 0 6px; line-height: 1.35; }
.qt-obj span { flex: 1; min-width: 0; }
.qt-obj.done { color: var(--leaf); }
.qt-obj.turn { color: var(--brass-hi); font-weight: 700; }
.qt-go {
  flex: none; font: inherit; font-size: 10px; font-weight: 700; padding: 0 6px; line-height: 16px; text-shadow: none;
  color: var(--ink); background: var(--brass); border: 1px solid var(--ink); cursor: pointer;
}
.qt-go:hover { background: var(--brass-hi); }
.qt-daily { margin-top: 5px; padding-top: 3px; border-top: 1px dashed rgba(201, 146, 63, 0.55); }
#questWindow { top: 90px; left: 240px; width: 430px; }
.qj h4 { margin: 6px 0 4px; font-size: 13px; color: var(--brass-hi); }
.qj h4 small { font-weight: 400; color: var(--muted); font-size: 11px; }
.qj-list { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.qj-list li { padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 12px; }
.qj-list li.done { color: var(--muted); }
.qj-list li.locked { color: #6b7590; }
.qj-list li.cur { background: rgba(201, 146, 63, 0.12); border: 1px solid var(--brass); }
.qj-list li p { margin: 2px 0; }
.qj-list li small { display: block; color: var(--muted); }
.qj-list .qt-obj { margin-left: 0; }
.round .ico.quest { background-image: url("../assets/ui/rail-quest.png"); }