/* Graphite and orange: shared surfaces and interaction states. Game artwork and
   semantic bonus / damage colours remain defined by metin2.css. */
:root {
  --text: #e5e2dd;
  --title: #f0f6fc;
  --muted: #aaa6a0;
  --ui-gold: #e99445;
  --ui-gold-soft: rgba(233, 148, 69, .12);
  --ui-line: #3d3e41;
  --ui-text: #e5e2dd;
  --ui-dim: #aaa6a0;
  --armory-panel: #202123;
  --armory-field: #151618;
  --armory-accent: #e99445;
  --armory-selected: #453024;
  --ui-glass-line: #3d3e41;
  --ui-glass: #1c1d1f;
  --ui-glass-strong: #262729;
}
html { background-color: #111213; }
body {
  background: radial-gradient(ellipse at 30% 0, #292826 0, transparent 60%), #111213;
  color: var(--text);
}
body .taskbar {
  background: #18191b;
  border-color: var(--armory-accent);
  box-shadow: 0 4px 18px #0005;
}
body .taskbar .views { background: var(--armory-field); }
body .view-tab { }
body .view-tab.active { background: var(--armory-selected); color: #f0f6fc; box-shadow: inset 0 -2px var(--armory-accent); }
body .sub-tabs, .site-footer, .build-row, .sim-credit { background: #1c1d1f; }
body .sub-tab.active { color: #f7ceaa; }
body .taskbar .tb-right, .skillbar, .devbar, .equipment-dock {
  background: var(--armory-panel);
  border-color: var(--ui-line);
}
body .taskbar .tb-right { background: transparent; }
body .build-row, body .sim-credit, body .affect-bar {
  background: #1c1d1f; color: var(--text); box-shadow: none;
}
body .build-card, body .bc-act { border-color: #525356; box-shadow: none; }
body .build-bar .m2-btn.share-btn, .m2-btn.share-btn:hover {
  background: #804315; color: #f0f6fc; border-color: #e99445; box-shadow: none;
}
body.compact-desktop #equipment-dock {
  background: linear-gradient(145deg, #252628, #202123); border-color: #494a4d;
}
body.compact-desktop #equipment-dock > .skillbar { border-color: var(--ui-line); }
.saved-note, .sk-name, .bb-total, .rank-lbl, .rank-caret { color: var(--ui-dim); }
.sim-credit a, .sim-credit-icon, .sim-credit-tip { color: #f0bf91; text-shadow: none; }
.rank-cur, .class-row { background: #151618; border-color: #525356; color: var(--ui-dim); }
.rank-cur:hover, .rank-dd.open .rank-cur, .class-row.on {
  background: #453024; border-color: #e99445; color: var(--text); box-shadow: none;
}
.race-label, .race-switch:hover .race-label { background: #804315; color: #e7f2fc; border-color: #e99445; }
.race-switch.pulse, .rank-dd.pulse { }
.race-arrow { color: #f0bf91; }
.qm-chip, .scroll-cue, .swipe-hint { background: #262729; border-color: #e99445; color: #f0bf91; }
.swipe-hint svg { stroke: #f0bf91; }
.panel-scroll-cue { background: #262729; color: #f0bf91; box-shadow: 0 0 0 1px #e99445; }
.ds-ring { background: radial-gradient(circle, #453024, #151618 70%); border-color: #525356; }
.dg-gate, .dg-requirements, .dg-diagram, .dg-space { background: #1c1d1f; border-color: #525356; color: var(--text); }
.dg-gate.selected, .dg-space.filled { background: #453024; border-color: #e99445; color: #f7ceaa; box-shadow: none; }
.dg-detail h2 { color: #f0bf91; }
.board:not(.ds-window) {
  background: linear-gradient(145deg, #252628, var(--armory-panel) 55%);
  border-color: #494a4d;
  box-shadow: 0 8px 24px #0005, inset 0 1px #ffffff08;
}
.board:not(.ds-window) .titlebar {
  color: #e7f2fc;
  border-color: var(--armory-accent);
  border-bottom-color: var(--ui-line);
}
.board .tabs { background: var(--armory-field); }
.board .tab { color: var(--ui-dim); }
.board .tab:hover { color: var(--title); }
.board .tab.active, #editor-window .upgrade-row .tab.active,
body .tb-windows .m2-btn[data-toggle].active, .race-row.on {
  background: var(--armory-selected);
  color: #f7ceaa;
  border-color: var(--armory-accent);
  box-shadow: inset 0 -2px var(--armory-accent);
}
.board .section, .board .info-bar, .lv-exp::before, .lv-exp .exp-text,
.stat-btn::before, .combo-arr, .dv-head, .bb-head, .newchar-title,
.site-footer .footer-top b, .site-footer .footer-top a, .set-fx-list b,
body .tb-right #tour-start { color: #f0bf91; }
.m2-btn, .m2-btn.big, .board .m2-btn, .bb-clear, .stat-btn,
.stat-btn.minus, .titlebar .close, .confirm-box .m2-btn,
.item-sheet .m2-btn, .gallery-edit-bar .m2-btn, #devbar .m2-btn {
  background: #2b2c2e;
  color: #e5e2dd;
  border-color: #525356;
}
.m2-btn:hover:not(:disabled), .board .m2-btn:hover:not(:disabled),
.stat-btn:hover, .titlebar .close:hover, .bb-clear:hover {
  background: #443429;
  border-color: var(--armory-accent);
  color: #f0f6fc;
}
.m2-btn:active:not(:disabled), .titlebar .close:active { background: #65402a; }
.m2-btn.primary, .m2-btn.big, .board .m2-btn.share-btn {
  background: #804315;
  color: #f0f6fc;
  border-color: #e99445;
}
.m2-btn.danger { color: #ffaea3; border-color: #92594f; }
body .tb-windows .m2-btn[data-toggle], .race-row, .race-row-sex { color: var(--ui-dim); }
.board input:not([type="checkbox"]):not([type="radio"]), .board select,
input, select, .slot-input, .slot-text, .cat-cur, .combo-input,
.char-row .lv-exp, .lv-exp .lv-input {
  background-color: var(--armory-field);
  border-color: #525356;
  color: var(--text);
}
input[type="checkbox"] { border-color: #525356; }
input[type="checkbox"]:checked { background-color: #804315; border-color: var(--armory-accent); }
input[type="range"] { accent-color: var(--armory-accent); }
input:focus-visible, select:focus-visible, button:focus-visible,
.item:focus-visible { outline-color: var(--armory-accent); }
.tooltip, .combo-list, .toast, .cat-menu, .race-menu, .sk-menu,
.newchar-box, .confirm-box, .item-sheet, .tour-bubble {
  background: #262729;
  border-color: #525356;
  color: var(--text);
}
.cat-opt:hover, .cat-opt.on, .combo-opt:hover, .combo-opt.on,
.newchar-race:hover { background: var(--armory-selected); color: #e7f2fc; }
.newchar-race { background: var(--armory-field); border-color: var(--ui-line); }
.equip-bg, .costume-bg { background: #151618; }
.slot, .inv-cell, .trash, .cons-cell, #sim-character .sim-items .item,
.weapon-picker button, .bb-slot, .sk-slot, .sk-slot.off {
  background-color: #2b2c2e;
  box-shadow: inset 0 0 0 1px #525356;
}
.slot:empty::before { filter: grayscale(1) brightness(1.65); }
.bb-slot.on { box-shadow: inset 0 0 0 2px var(--armory-accent); }
.slot.drop-ok, .inv-cell.drop-ok { box-shadow: inset 0 0 0 2px #7fe07f; }
.slot.drop-bad, .inv-cell.drop-bad { box-shadow: inset 0 0 0 2px #e05050; }
.build-card, .build-card.on, .build-select { background: var(--armory-field); border-color: #525356; color: var(--text); }
.build-card.on { border-color: var(--armory-accent); }
.bc-name, .bc-act, .sim-credit-title, .sim-credit-diff, .dv-name,
.bb-head small, .bb-section summary { color: #f0bf91; }
.bb-section summary, #editor-window .bonus-row { border-color: var(--ui-line); }
#editor-window .bonus-row:has(select option:checked:not([value=""])) {
  border-color: #8c6644; background: #382b21;
}
#editor-window .bonus-row select, #editor-window .bonus-row input.bonus-combo { color: var(--text); }
#editor-window .bonus-row.invalid { border-color: #b33; background: rgba(120, 20, 20, .3); }
#editor-window .custom-hint, .catalog-hint, .set-fx-list {
  background: #382b21; border-color: var(--armory-accent);
}
#editor-window .custom-hint p, #editor-window .rows-hint, .catalog-hint { color: #f0bf91; }
#editor-window .rows-hint { border-color: var(--armory-accent); }
@media (max-width: 819px) {
  body .taskbar .tb-right { background: #262729; }
  body .bottom-nav, body[data-sub="equip"] .skill-fab,
  body[data-view="simulator"] .skill-fab { background: #18191b; color: var(--ui-dim); }
  body .bottom-nav .bn-tab { color: var(--ui-dim); }
  body .bottom-nav .bn-tab.active, body.skills-open .skill-fab {
    background: #453024; color: #f7ceaa; border-color: var(--armory-accent);
  }
  body[data-sub="equip"] .skillbar, body[data-view="simulator"] .skillbar { background: #1c1d1f; border-color: var(--ui-line); }
  .menu-btn span { background: #f0bf91; }
}


/* Item editor surfaces use the same palette as the surrounding builder. */
#editor-window .titlebar {
  background-color: var(--armory-panel);
  box-shadow: 0 -7px 0 var(--armory-panel), -8px -7px 0 var(--armory-panel), 8px -7px 0 var(--armory-panel);
}
.edit-values-hint {
  background: var(--armory-selected);
  border-color: var(--armory-accent);
  color: var(--text);
}
.edit-values-hint strong { color: #f0bf91; }
.set-pick-lbl, .elem-pick .elem-num, #editor-window .bonus-row .hint { color: var(--ui-dim); }
.set-pick .cat-cur { border-color: #525356; color: #f0bf91; }

/* Warm ivory item titles in tooltips and item editors. */
.tooltip, #editor-window { --special: #f5eade; }

/* Account controls follow the graphite/orange palette. */
.acct-btn { background: #804315; color: #f5eade; border-color: #e99445; }
.acct-btn:hover { background: #65402a; }
.acct-btn.signed { background: #2b2c2e; color: #e5e2dd; border-color: #525356; }
.acct-pic.initial { background: #453024; color: #f5eade; }
.acct-menu { background: #262729; border-color: #525356; }

/* Gallery and shared dialogs use the same surfaces and states as the builder. */
.gal-score, .gal-atk-dmg, .gal-bar-dmg, .gal-name, .shared-name { color: #f5eade; }
.gal-notes, .gal-info, .gal-edit-text, .gal-atk, .gal-bar-row { color: var(--text); }
.gal-more, .gal-atk-head, .gal-admin { color: var(--ui-dim); }
.gal-more:hover, .gal-vs, .confirm-title { color: #f0bf91; }
.gal-in, textarea { background: var(--armory-field); color: var(--text); border-color: #525356; }
.gal-row, .gal-attacks { background: var(--armory-field); border-color: var(--ui-line); }
.gal-atk.on { background: var(--armory-selected); box-shadow: inset 0 0 0 1px var(--armory-accent); }
.gal-badge { background: var(--armory-selected); color: #f5eade; border-color: var(--armory-accent); }
.gal-pic:not(.boss):not(.poly) { box-shadow: 0 0 0 1px #000, 0 0 0 2px #525356; }
.gal-bar-fill { background: #525356; }
.gal-bar-row.on .gal-bar-fill { background: var(--armory-accent); }
.gal-bar-row.on .gal-bar-name { color: #f0bf91; }
.confirm-ic { background: var(--armory-selected); color: #f0bf91; border-color: var(--armory-accent); }
.dlg-btn { background: #2b2c2e; color: var(--text); border-color: #525356; }
.dlg-btn.dlg-ok:not(.danger) { background: #804315; color: #f5eade; border-color: var(--armory-accent); }
.dlg-btn:hover { background: #443429; }
.sticky-toolbar { background: #111213; }

.dlg-btn.dlg-ok:not(.danger):hover { background: #65402a; }
.confirm-ic.danger { color: #ff8f80; background: rgba(255, 90, 70, .12); border-color: rgba(255, 110, 90, .45); }