/* KO 1298 layout on a 1024×768 stage.
   Button rectangles follow the plaintext UIF. The paint is original:
   navy panels, gold wire, blue command buttons. Game bitmaps are not used. */

:root {
  --iron-0: #070b14;
  --iron-1: #10182c;
  --iron-2: #1a3058;
  --iron-3: #2a4a78;
  --edge: #e6c36a;
  --ink: #f4f7fb;
  --dim: #c5d0dc;
  --hp: #c41818;
  --hp-dark: #4a0c0c;
  --mp: #1a62d0;
  --mp-dark: #0c2748;
  --exp: #e0b03a;
  --leather: #0c1424;
  --leather-edge: #c4a15a;
  --gold: #e6c36a;
  --gold-dim: #8a6428;
  --navy: #0c1830;
  --slot: #14386a;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #05070a;
  color: var(--ink);
  font: 11px/1.25 Tahoma, "Segoe UI", sans-serif;
  user-select: none;
}

#view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

button, input, select {
  font: inherit;
  color: var(--ink);
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
  filter: grayscale(0.4) brightness(0.7);
}

.dev { display: none !important; }

.quiet { color: var(--dim); margin: 4px 0; }

kbd {
  display: inline-block;
  min-width: 14px;
  padding: 0 3px;
  border: 1px solid #5c6b7c;
  background: #101820;
  color: var(--ink);
  font: 10px/14px Tahoma, sans-serif;
}

/* ---------- gate ---------- */

#gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 20;
  pointer-events: none;
  background: rgba(4, 6, 10, 0.35);
}

#gate[hidden] { display: none; }

.gate-card {
  pointer-events: auto;
  width: min(380px, calc(100vw - 24px));
  padding: 16px 16px 14px;
  color: var(--ink);
  background:
    linear-gradient(#1a3058, #0c1830 40%, #070b14);
  border: 1px solid #070b10;
  box-shadow:
    inset 0 0 0 1px var(--gold),
    inset 0 0 0 4px #10182c,
    0 12px 30px rgba(0, 0, 0, 0.55);
}

.gate-card .kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--dim);
}

.gate-card h1 {
  margin: 2px 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #f6e7a8;
  text-shadow: 0 1px 0 #000;
}

#status { margin: 0 0 8px; color: var(--dim); }
#gate #error { margin: 0 0 8px; color: #ffb0a4; }

#nation-pick[hidden], #create-form[hidden], #gate-back[hidden] { display: none; }

#nation-pick:not([hidden]) { display: flex; gap: 8px; }

#nation-pick button, #create-form button, #characters button, .gate-card a {
  border: 1px solid var(--gold-dim);
  background: linear-gradient(#2a62a8, #14386a 55%, #0c2248);
  box-shadow: inset 0 1px 0 rgba(230, 195, 106, 0.45);
  color: var(--gold);
  padding: 8px 10px;
}

#create-form:not([hidden]) { display: grid; gap: 6px; margin: 8px 0; }
#create-form input, .gate-card input {
  width: 100%;
  box-sizing: border-box;
  background: #0c1218;
  border: 1px solid #5c6b7c;
  color: var(--ink);
  padding: 4px 6px;
}

#characters { display: grid; gap: 6px; }
#characters button { text-align: left; }
#gate-back:not([hidden]) { display: inline-block; margin-top: 10px; color: #f6e7a8; }

.link-note {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  margin: 0;
  padding: 4px 8px;
  background: rgba(8, 12, 18, 0.9);
  border: 1px solid var(--edge);
  color: #f6e7a8;
}

/* ---------- 1024×768 stage ---------- */

#hud {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 1024px;
  height: 768px;
  transform: translate(-50%, -50%) scale(var(--ko, 1));
  transform-origin: center center;
  pointer-events: none;
  z-index: 6;
}

#hud[hidden] { display: none; }

#hud > * { pointer-events: auto; }

#plate {
  position: absolute;
  left: 8px;
  top: 6px;
  width: 318px;
  height: 86px;
  padding: 6px 8px 4px;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, #243e68 0%, #12243f 46%, #0a1428 100%);
  border: 1px solid #05080c;
  box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 3px #10182c;
}

.plate-head { display: flex; gap: 6px; align-items: center; height: 28px; }
.plate-head p { margin: 0; }
#char-name { color: #f6e7a8; font-weight: 700; font-size: 13px; }
.plate-head .sub { color: var(--dim); }
.np { margin-left: auto; color: #f6e7a8; }

.badge {
  width: 22px;
  height: 22px;
  border: 1px solid var(--edge);
  background: #101820;
  box-shadow: inset 0 0 0 2px #243140;
}
.badge.karus { background: radial-gradient(circle at 40% 40%, #d7dce4, #5d6b7c 60%, #1b2430); }
.badge.elmorad { background: radial-gradient(circle at 40% 40%, #f0d78a, #8a6230 62%, #2a1c10); }

.gauge {
  position: relative;
  height: 14px;
  margin-top: 3px;
  background: #070b10;
  border: 1px solid #05080c;
  box-shadow: inset 0 0 0 1px #3a4654;
  overflow: hidden;
}
.gauge b { display: block; height: 100%; width: 0; }
.gauge span {
  position: absolute;
  inset: 0;
  text-align: center;
  line-height: 14px;
  font-size: 10px;
  text-shadow: 0 1px 0 #000;
}
.gauge.hp b { background: linear-gradient(#f06058, var(--hp) 40%, #7a1010); }
.gauge.mp b { background: linear-gradient(#7eb6ff, var(--mp) 45%, #0c3f86); }
.gauge.exp { height: 8px; }
.gauge.exp b { background: linear-gradient(#ffe08a, var(--exp) 50%, #8a6410); }
.gauge.exp span { line-height: 8px; font-size: 9px; }
.gauge.thin { height: 12px; }
.gauge.thin span { line-height: 12px; }

#target-frame {
  position: absolute;
  left: 348px;
  top: 6px;
  width: 300px;
  height: 48px;
  padding: 4px 8px;
  box-sizing: border-box;
  background: linear-gradient(#1a3058, #0c1830);
  border: 1px solid #05080c;
  box-shadow: inset 0 0 0 1px var(--gold-dim);
}
#target-frame[hidden] { display: none; }
.target-head { margin: 0 0 2px; color: #f6e7a8; }
#target-kind { color: var(--dim); font-weight: 400; }
#target-frame.hostile .target-head { color: #ffb0a4; }

#minimap-box {
  position: absolute;
  left: 848px;
  top: 4px;
  width: 168px;
  height: 196px;
}
#minimap-box[hidden] { display: none; }
.map-ring {
  width: 156px;
  height: 156px;
  margin: 0 auto;
  border-radius: 50%;
  padding: 4px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 45%, #c4a574, #8a6840 58%, #3a2c18 70%, #e6c36a 73%, #1a140c 78%, #0c1218);
  box-shadow: 0 0 0 2px #05080c, inset 0 0 0 2px #0c1218;
}
#minimap {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: block;
  background: #101810;
}
.map-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: #f6e7a8;
  font-size: 10px;
}
#map-in, #map-out {
  position: absolute;
  top: 132px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #05080c;
  background: linear-gradient(#4a5c70, #1c2836);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#map-out { left: 8px; }
#map-in { right: 8px; }

#msg-box {
  position: absolute;
  left: 8px;
  top: 556px;
  width: 300px;
  height: 52px;
  overflow: hidden;
  padding: 3px 6px;
  box-sizing: border-box;
  background: rgba(8, 14, 28, 0.72);
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 1px rgba(230, 195, 106, 0.35);
}
#msg-log { height: 100%; overflow: hidden; }
#msg-log p { margin: 0; color: #d7e4c8; font-size: 11px; }
#msg-log .error { color: #ffb0a4; }

#chat {
  position: absolute;
  left: 8px;
  top: 612px;
  width: 300px;
  height: 94px;
  display: flex;
  flex-direction: column;
  background: rgba(8, 14, 28, 0.82);
  border: 1px solid #05080c;
  box-shadow: inset 0 0 0 1px var(--gold-dim);
}
#chat-tabs { display: flex; gap: 2px; padding: 2px; }
#chat-tabs button {
  border: 1px solid #1a2430;
  background: #1a2430;
  color: var(--dim);
  padding: 1px 6px;
}
#chat-tabs button.on { color: #f6e7a8; background: #2c3c4e; }
#chat-log { flex: 1; overflow: auto; padding: 0 4px; }
#chat-log p { margin: 0; }
#chat-log .general { color: #f4f7fb; }
#chat-log .party { color: #9fd4ff; }
#chat-log .clan { color: #b6e7a4; }
#chat-log .shout { color: #ffd27a; }
#chat-log .whisper { color: #e4b6ff; }
#chat-log .war { color: #ffb0a4; }
#chat-log .system { color: #d7e4c8; }
#chat-log .error { color: #ffb0a4; }
#chat-form { display: flex; gap: 2px; padding: 2px; }
#chat-form select, #chat-form input {
  background: #0c1218;
  border: 1px solid #3a4654;
  color: var(--ink);
  padding: 1px 3px;
}
#chat-form input { flex: 1; min-width: 0; }
#chat-form button {
  border: 1px solid #05080c;
  background: #243140;
  color: var(--ink);
  padding: 1px 6px;
}

#skills {
  position: absolute;
  left: 318px;
  top: 654px;
  width: 400px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 4px;
}
#hotkey-prev, #hotkey-next {
  width: 16px;
  height: 42px;
  padding: 0;
  border: 1px solid #05080c;
  background: linear-gradient(#4a5c70, #1a2430);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
#hotkey-page { width: 14px; text-align: center; color: #f6e7a8; }
#skill-bar { display: flex; gap: 3px; }
#skill-bar button {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--gold-dim);
  background:
    linear-gradient(#3a78c4, #1a4a90 42%, #102848);
  box-shadow: inset 0 0 0 1px #e6c36a, inset 0 0 0 3px #0c1830;
}
#skill-bar button .key {
  position: absolute;
  left: 2px;
  top: 0;
  font-size: 9px;
  color: #f6e7a8;
  text-shadow: 0 1px 0 #000;
}
#skill-bar button .glyph { width: 26px; height: 26px; margin-top: 8px; }
#skill-bar button .sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(rgba(0, 0, 0, 0.72) calc(var(--p) * 360deg), transparent 0);
}
#skill-bar button.blocked { filter: saturate(0.4) brightness(0.75); }
#skill-bar button.ready { box-shadow: inset 0 0 0 1px #d7e4c8, inset 0 0 0 3px #1a2430; }

#menu {
  position: absolute;
  left: 0;
  top: 710px;
  width: 1024px;
  height: 58px;
  box-sizing: border-box;
  background:
    linear-gradient(#1a3a68, #0e2244 28%, #0a1830 70%, #070e1c);
  border-top: 2px solid var(--gold);
  box-shadow: inset 0 1px 0 #f0d898, inset 0 -2px 0 #6a4e20, 0 -8px 16px rgba(0, 0, 0, 0.35);
}
#menu button {
  position: absolute;
  margin: 0;
  padding: 0 2px;
  border: 1px solid var(--gold-dim);
  border-radius: 10px;
  background: linear-gradient(#3a78c8, #1a4e96 46%, #102848);
  box-shadow: inset 0 1px 0 rgba(230, 195, 106, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.45);
  color: var(--gold);
  text-shadow: 0 1px 0 #000;
  font-size: 11px;
}
#menu button.on { color: #fff4d0; background: linear-gradient(#6a5430, #3a2c18 50%, #241c12); }
#map-toggle { left: 29px; top: 8px; width: 65px; height: 42px; }
#inventory-toggle { left: 102px; top: 13px; width: 88px; height: 37px; }
#character-toggle { left: 201px; top: 13px; width: 88px; height: 37px; }
#skilltree-toggle { left: 301px; top: 12px; width: 88px; height: 43px; }
#loot-nearest { left: 392px; top: 17px; width: 32px; height: 28px; font-size: 9px; }
#attack { left: 427px; top: 17px; width: 42px; height: 28px; }
#btn-move { left: 470px; top: 17px; width: 42px; height: 28px; }
#btn-sit { left: 513px; top: 17px; width: 42px; height: 28px; }
#btn-camera { left: 557px; top: 17px; width: 42px; height: 28px; font-size: 9px; }
#help-toggle { left: 634px; top: 12px; width: 89px; height: 43px; }
#party-toggle { left: 734px; top: 13px; width: 89px; height: 37px; }
#options-toggle { left: 834px; top: 13px; width: 87px; height: 37px; }
#exit-toggle { left: 929px; top: 7px; width: 68px; height: 43px; }

#toasts {
  position: absolute;
  left: 318px;
  top: 500px;
  width: 300px;
  pointer-events: none;
}
#toasts p {
  margin: 2px 0;
  padding: 2px 6px;
  background: rgba(8, 12, 18, 0.85);
  border: 1px solid #3a4654;
}
#toasts .bad { color: #ffb0a4; }
#toasts .good { color: #d7e4c8; }

#dead-box {
  position: absolute;
  left: 362px;
  top: 280px;
  width: 300px;
  padding: 12px;
  text-align: center;
  background: linear-gradient(#2a2028, #140e14);
  border: 1px solid #05080c;
  box-shadow: inset 0 0 0 1px #a06060;
}
#dead-box[hidden] { display: none; }
#dead-box h2 { margin: 0 0 6px; color: #ffb0a4; }
#regene {
  border: 1px solid #05080c;
  background: linear-gradient(#6a3030, #2a1418);
  color: var(--ink);
  padding: 6px 12px;
}

/* ---------- windows ---------- */

.ko-window {
  position: absolute;
  box-sizing: border-box;
  padding: 8px;
  color: var(--ink);
  background:
    linear-gradient(#16325c, #0c1830 18%, #070b14);
  border: 1px solid #07080a;
  box-shadow:
    inset 0 0 0 1px var(--gold),
    inset 0 0 0 4px #10182c,
    0 10px 24px rgba(0, 0, 0, 0.45);
}
.ko-window[hidden] { display: none !important; }
.ko-window h2 {
  margin: 0 28px 6px 0;
  font-size: 13px;
  color: #f6e7a8;
  text-shadow: 0 1px 0 #000;
}
.ko-window h3 { margin: 8px 0 4px; font-size: 12px; color: #f6e7a8; }
.ko-window .close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #05080c;
  background: linear-gradient(#6a3030, #2a1414);
  color: var(--ink);
}
.ko-window button, .ko-window select, .ko-window input {
  background: #0c1830;
  border: 1px solid var(--gold-dim);
  color: var(--ink);
  padding: 2px 6px;
}
.ko-window .row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ko-window .list { max-height: 120px; overflow: auto; }
.ko-window dl { display: grid; grid-template-columns: 80px 1fr; gap: 2px 8px; margin: 6px 0; }
.ko-window dt { color: var(--dim); }
.ko-window dd { margin: 0; }

.ko-window.inv {
  left: 728px;
  top: 206px;
  width: 372px;
  height: 560px;
  padding: 0;
  transform: scale(0.78);
  transform-origin: top left;
  background: #05070c;
  box-shadow:
    inset 0 0 0 1px var(--gold),
    inset 0 0 0 3px #1a1408,
    0 10px 24px rgba(0, 0, 0, 0.45);
}
.ko-window.shop { left: 8px; top: 100px; width: 300px; height: 448px; overflow: auto; }
.ko-window.char, .ko-window.tree, .ko-window.party, .ko-window.clan,
.ko-window.trade, .ko-window.quest, .ko-window.opts, .ko-window.exit,
.ko-window.help, .ko-window.sys {
  left: 320px;
  top: 120px;
  width: 300px;
  max-height: 420px;
  overflow: auto;
}
.ko-window.trade { width: 300px; }

.doll {
  position: absolute;
  left: 18px;
  top: 48px;
  width: 168px;
  height: 250px;
  border: 1px solid var(--gold-dim);
  border-radius: 80px 80px 8px 8px;
  box-shadow: inset 0 0 0 1px rgba(230, 195, 106, 0.25);
  opacity: 0.9;
}

#equipment, #inventory { position: absolute; inset: 0; pointer-events: none; }
#equipment button, #inventory button, #shop-list button {
  position: absolute;
  width: 45px;
  height: 45px;
  padding: 1px;
  pointer-events: auto;
  overflow: hidden;
  border: 1px solid var(--gold-dim);
  background: #070b14;
  box-shadow: inset 0 0 0 1px #e6c36a, inset 0 0 0 3px #101018;
  color: #f6e7a8;
  font-size: 9px;
  line-height: 1.05;
  text-align: center;
}
#equipment button.empty, #inventory button.empty { color: transparent; }
#equipment button.filled, #inventory button.filled, #shop-list button {
  color: #f4f7fb;
}
#equipment button.selected, #inventory button.selected {
  box-shadow: inset 0 0 0 1px #f6e7a8, inset 0 0 0 3px #1a120c;
}
#inventory button .count, #shop-list button .count {
  position: absolute;
  right: 2px;
  bottom: 1px;
  color: #f6e7a8;
  font-size: 10px;
  text-shadow: 0 1px 0 #000;
}

#gold-text {
  position: absolute;
  left: 200px;
  top: 318px;
  width: 150px;
  margin: 0;
  text-align: right;
  color: #f6e7a8;
}
.weight {
  position: absolute;
  left: 12px;
  top: 318px;
  width: 170px;
  margin: 0;
  color: var(--dim);
  font-size: 10px;
}
#item-note {
  position: absolute;
  left: 8px;
  top: 538px;
  width: 250px;
  margin: 0;
  font-size: 10px;
}
#item-actions {
  position: absolute;
  left: 8px;
  top: 16px;
  display: flex;
  gap: 2px;
  align-items: center;
}
#item-actions select, #item-actions button { font-size: 10px; padding: 1px 3px; }
#item-confirm, #item-confirm-yes { position: absolute; left: 8px; top: 36px; margin: 0; font-size: 10px; }

#npc-list { display: flex; flex-direction: column; gap: 2px; max-height: 72px; overflow: auto; }
#npc-list button {
  text-align: left;
  background: #1a120c;
  border: 1px solid #6a4a2c;
  color: var(--ink);
  padding: 2px 4px;
}
#npc-list button.merchant { color: #f6e7a8; }
#shop-list { position: relative; height: 210px; margin-top: 4px; }
#shop-list button { width: 44px; height: 44px; }
.shop-pages { display: flex; gap: 6px; align-items: center; }

#skill-tree { display: flex; flex-direction: column; gap: 3px; }
#skill-tree button {
  display: flex;
  justify-content: space-between;
  text-align: left;
  padding: 3px 6px;
}
#skill-tree button.locked { color: #8a8070; }

#party-list p, #clan-list p, #loot-list button {
  margin: 2px 0;
  padding: 2px 4px;
  background: #1a120c;
  border: 1px solid #3a2a1c;
}

#item-tip {
  position: fixed;
  z-index: 40;
  max-width: 220px;
  padding: 6px 8px;
  pointer-events: none;
  background: #10161c;
  border: 1px solid var(--edge);
  box-shadow: inset 0 0 0 1px #1c2836, 0 6px 16px rgba(0, 0, 0, 0.5);
  color: var(--ink);
  font: 11px/1.35 Tahoma, sans-serif;
  white-space: pre-line;
}
#item-tip[hidden] { display: none; }

#help-table { width: 100%; border-collapse: collapse; }
#help-table td { padding: 2px 4px; vertical-align: top; border-bottom: 1px solid #3a2a1c; }