/* Yulgang UI kit: tokens and components for every code-built window. Spec: docs/ui-kit.md */
:root {
  /* tokens (keep in step with yg-creator.css and docs/ui-kit.md) */
  --yg-gold-hi: #f5e706;
  --yg-gold: #cfa100;
  --yg-gold-text: #f3c94a;
  --yg-gold-dim: #8b6327;
  --yg-ember: #7b2400;
  --yg-ember-deep: #3a0e00;
  --yg-ink: #1f1311;
  --yg-field: #280600;
  --yg-text: #f2e6c8;
  --yg-text-dim: #c9a77a;
  --yg-danger: #ff6a4d;
  --yg-ok: #8fe07a;
  --yg-font: Tahoma, "Leelawadee UI", sans-serif;
  --yg-fs-s: 11px;
  --yg-fs-m: 12px;
  --yg-fs-l: 13px;
  --yg-fs-title: 15px;
  --yg-gap: 6px;
  --yg-row-h: 22px;
  --yg-btn-h: 26px;
  --yg-frame: url(/ui-kit/frame.png) 34 92 6 92 fill / 34px 92px 6px 92px stretch;
  --yg-panel: url(/ui-kit/panel.png) 6 fill / 6px stretch;
  --yg-field-img: url(/ui-kit/input.png) 4 fill / 4px stretch;
  --yg-btn-img: url(/ui/server_btn_connect.png) 10 / 10px stretch;
  --yg-btn-bg: linear-gradient(#8a3a0c, #4a1503 55%, #2c0b02);
  --yg-btn-bg-hot: linear-gradient(#b5520f, #6a2306 55%, #3a0e00);
  --yg-row-bg: linear-gradient(#2a1510, #1a0c08);
  --yg-row-sel: linear-gradient(#7b2a06, #3a0e00);
  --yg-inner: #1e0a04;
  --yg-inner-hi: #2c1006;
  --yg-text-off: #9a8466;
  --yg-btn-lite-hi: #3a170a;
  --yg-btn-lite-lo: #26100a;
  --yg-frame-edge: url(/ui-kit/frame.png) 34 92 6 92 / 34px 92px 6px 92px stretch;
  --yg-panel-edge: url(/ui-kit/panel.png) 6 / 6px stretch;
}

/* ---- components (class names are the kit API; see docs/ui-kit.md) ---- */
.yg-window {
  position: relative; box-sizing: border-box; min-width: 184px; min-height: 60px;
  border-style: solid; border-image: var(--yg-frame-edge); background: var(--yg-inner) padding-box;
  color: var(--yg-text); font: var(--yg-fs-m)/1.5 var(--yg-font);
  padding: 8px 10px 10px;
}
.yg-window > .yg-title {
  position: absolute; left: 0; right: 0; top: -30px; height: 26px; line-height: 26px; text-align: center;
  color: #fff; font-size: var(--yg-fs-l); text-shadow: 0 1px 0 #000; pointer-events: none;
}
.yg-close {
  position: absolute; right: -2px; top: -32px; width: 22px; height: 22px; padding: 0; border: 0; cursor: pointer;
  background: url(/ui-kit/close.png) center / 22px 22px no-repeat; font-size: 0;
}
.yg-close:hover { filter: brightness(1.25); }
.yg-panel {
  box-sizing: border-box; border-style: solid; border-image: var(--yg-panel-edge); background: var(--yg-inner) padding-box;
  color: var(--yg-text); font: var(--yg-fs-m)/1.5 var(--yg-font); padding: 8px;
}
.yg-label { color: var(--yg-gold-text); font-size: var(--yg-fs-m); }
.yg-heading {
  color: var(--yg-gold-text); font-size: var(--yg-fs-l); text-align: center; margin: 4px 0 6px;
  text-shadow: 0 1px 0 #000;
}
.yg-heading::before, .yg-heading::after { content: " \2756 "; color: var(--yg-gold-dim); }
.yg-btn {
  box-sizing: border-box; min-height: var(--yg-btn-h); padding: 0 12px; cursor: pointer;
  border-style: solid; border-image: var(--yg-btn-img); background: var(--yg-btn-bg) padding-box;
  color: var(--yg-gold-text); font: var(--yg-fs-m) var(--yg-font); text-shadow: 0 1px 0 #000;
}
.yg-btn:hover { background: var(--yg-btn-bg-hot) padding-box; color: #fff3b0; }
.yg-btn:active { filter: brightness(.85); }
.yg-btn:disabled, .yg-btn[aria-disabled=true], .yg-btn--lite:disabled {
  background: linear-gradient(var(--yg-btn-lite-hi), var(--yg-btn-lite-lo)) padding-box; color: var(--yg-text-off); cursor: default;
}
/* light button / small toggle: thin gold line, no ornate edge (the frame is for windows and the primary action) */
.yg-btn--lite {
  box-sizing: border-box; min-height: 24px; padding: 0 10px; cursor: pointer; border: 1px solid var(--yg-gold-dim);
  background: linear-gradient(var(--yg-btn-lite-hi), var(--yg-btn-lite-lo)); color: var(--yg-text);
  font: var(--yg-fs-m) var(--yg-font);
}
.yg-btn--lite:hover { border-color: var(--yg-gold); color: #fff; }
.yg-btn--lite[aria-pressed=true] { border-color: var(--yg-gold); background: var(--yg-row-sel); color: var(--yg-gold-text); }
.yg-hint { color: var(--yg-text-dim); font: var(--yg-fs-m)/1.5 var(--yg-font); }
.yg-btn--primary { min-height: 34px; font-size: var(--yg-fs-l); }
.yg-input {
  box-sizing: border-box; height: 24px; padding: 0 6px; border-style: solid; border-image: var(--yg-field-img);
  background: none; color: #fff; font: var(--yg-fs-m) var(--yg-font); outline: none;
}
.yg-input:focus { filter: brightness(1.25); }
.yg-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--yg-gold-dim); }
.yg-tab {
  flex: 1; min-height: 24px; border: 1px solid var(--yg-gold-dim); border-bottom: 0; cursor: pointer;
  background: linear-gradient(var(--yg-btn-lite-hi), var(--yg-btn-lite-lo)); color: var(--yg-text); font: var(--yg-fs-m) var(--yg-font);
}
.yg-tab[aria-selected=true], .yg-tab.on { background: var(--yg-row-sel); color: var(--yg-gold-text); border-color: var(--yg-gold); }
.yg-list { display: flex; flex-direction: column; gap: 2px; }
.yg-row {
  min-height: var(--yg-row-h); padding: 2px 8px; border: 1px solid #00000080; cursor: pointer; text-align: left;
  background: var(--yg-row-bg); color: var(--yg-text); font: var(--yg-fs-m) var(--yg-font);
}
.yg-row:hover { border-color: var(--yg-gold-dim); }
.yg-row[aria-selected=true], .yg-row.sel { background: var(--yg-row-sel); border-color: var(--yg-gold); color: #fff; }
.yg-tooltip {
  box-sizing: border-box; max-width: 260px; padding: 6px 8px; border: 1px solid var(--yg-gold);
  background: #120806eb; box-shadow: 0 0 0 1px #000, 0 4px 10px #000a;
  color: var(--yg-text); font: var(--yg-fs-s)/1.5 var(--yg-font);
}
.yg-tooltip b, .yg-tooltip .yg-tooltip-title { color: var(--yg-gold-text); font-size: var(--yg-fs-m); }
.yg-progress {
  position: relative; height: 10px; border: 1px solid #000; background: #1a0905; box-shadow: 0 0 0 1px var(--yg-gold-dim);
}
.yg-progress > i { position: absolute; inset: 0 auto 0 0; background: url(/ui/gage_hp.png) left / 100% 100%; }
.yg-progress.mp > i { background-image: url(/ui/gage_mp.png); }
.yg-progress.exp > i { background-image: url(/ui/gage_exp.png); }
.yg-range { accent-color: var(--yg-gold); }
.yg-toast {
  padding: 6px 14px; border: 1px solid var(--yg-gold); background: #120806eb; color: var(--yg-gold-text);
  font: var(--yg-fs-l) var(--yg-font); text-shadow: 0 1px 0 #000;
}

/* ---- skins for screens the client builds in code (selectors from the shipped client) ---- */
/* login: saved accounts, clear cache, version badge, language switch */
#savedAccounts {
  border-style: solid !important; border-image: var(--yg-panel-edge) !important; background: var(--yg-inner) padding-box !important;
  box-shadow: 0 4px 14px #000a !important; border-radius: 0 !important;
}
#savedAccounts .sa-row {
  border-radius: 0 !important; border: 1px solid #00000080 !important; background: var(--yg-row-bg) !important;
  color: var(--yg-text) !important;
}
#savedAccounts .sa-row:hover, #savedAccounts .sa-row:focus-visible { border-color: var(--yg-gold) !important; background: var(--yg-row-sel) !important; }
#savedAccounts .sa-note { color: var(--yg-text-dim) !important; }
#loginClearCache, .web-version-badge, #langSwitch .lang-current {
  border-style: solid !important; border-image: var(--yg-btn-img) !important; border-radius: 0 !important;
  background: var(--yg-btn-bg) padding-box !important; color: var(--yg-gold-text) !important; text-shadow: 0 1px 0 #000;
}
#loginClearCache:hover, #langSwitch .lang-current:hover { background: var(--yg-btn-bg-hot) padding-box !important; }
#langSwitch .lang-menu {
  border-style: solid !important; border-image: var(--yg-panel-edge) !important; border-radius: 0 !important;
  background: var(--yg-inner) padding-box !important;
}
#langSwitch .lang-option { border-radius: 0 !important; color: var(--yg-text) !important; background: transparent !important; }
#langSwitch .lang-option:hover, #langSwitch .lang-option.on { background: var(--yg-row-sel) !important; color: var(--yg-gold-text) !important; }
/* server select: the group row highlight follows the kit row */
#serverGroups .srvGroupRow.sel { border-color: var(--yg-gold) !important; background: var(--yg-row-sel) !important; }
/* ---- in-game touch HUD (html.mobile-hud-on; selectors from the shipped client) ---- */
/* chat log hide/show: hud_chat.py makes the round button left of "Type" toggle #chat.yg-log-off (owner order) */
html.mobile-hud-on #chat.yg-log-off #chatLog { display: none !important; }
/* the round minimize buttons: readable in both states on any scene ("on" = folded, the client dims it to 28% gold),
   36 px drawn, 44 px hit area on touch; margins keep each button centred where the client placed it */
.mobile-hud .mh-menu-hide, .mobile-hud .mh-tracker-hide, .mobile-hud .mh-chat-fold, .mobile-hud .mh-ui-hide {
  width: 36px !important; height: 36px !important; margin: 0 -2px -2px !important; font-size: 12px !important;
  color: var(--yg-gold-text) !important; border-color: var(--yg-gold) !important; background: var(--yg-inner) !important;
  text-shadow: 0 1px 0 #000; opacity: 1 !important;
}
.mobile-hud .mh-menu-hide.on, .mobile-hud .mh-tracker-hide.on, .mobile-hud .mh-ui-hide.on {
  color: var(--yg-gold-text) !important; border-color: var(--yg-gold) !important; background: var(--yg-inner) !important;
  box-shadow: inset 0 0 0 1px #ffe8a866, 0 0 8px #ffd34e80, 0 3px 10px #0009 !important;
}
.mobile-hud .mh-menu-hide::after, .mobile-hud .mh-tracker-hide::after, .mobile-hud .mh-chat-fold::after,
.mobile-hud .mh-ui-hide::after, .mobile-hud .mchat-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.mobile-hud .mchat-icon { position: relative; }
.mobile-hud .mchat-icon::after { inset: -10px -2px -10px -15px; border-radius: 0; } /* 44x46: grows into the empty gap on its left, not over "Type" */
/* touch HUD action buttons (package 8): one Yulgang lacquer-and-gold style for PK, Mob, Concentration, Auto, Menu,
   PT, 3D, swap, attack and voice. Shipped client art where it exists: PK uses /assets/PK1.png (off) and PK2.png (on),
   attack keeps /ui/cursor_attack.png; the others have no icon in the client and keep their translated text label.
   Labels: gold text with a black outline on an opaque dark face (contrast >= 4.5, tested). Every hit area >= 44 px:
   drawn size where the client's layout has room, a transparent ::after ring where it does not. Skill-swap mode
   (.swap-skill, skill icons 6-8 on these buttons) keeps the client's look. */
.mobile-hud .mh-btn:not(.swap-skill), .mobile-hud .mh-combat-hide, .mobile-hud .mh-party-finder,
html.mobile-hud-on #viewModeButton, html.mobile-hud-on #liveVoiceChat .voice-mic {
  color: var(--yg-gold-text) !important; font-weight: 700 !important; font-family: var(--yg-font) !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
  background: radial-gradient(circle at 50% 32%, var(--yg-inner-hi), var(--yg-inner) 72%) !important;
  border: 2px solid var(--yg-gold) !important; opacity: 1 !important;
  box-shadow: inset 0 0 0 1px #00000099, inset 0 2px 4px #ffe8a833, 0 2px 6px #000a !important;
}
.mobile-hud .mh-btn.on:not(.swap-skill) { border-color: var(--yg-gold-hi) !important;
  box-shadow: inset 0 0 0 1px #000, 0 0 10px #ffd34ecc, 0 2px 6px #000a !important; }
.mobile-hud .mh-pk:not(.swap-skill) {
  background: url(/assets/PK1.png) center 6px / 30px 30px no-repeat,
              radial-gradient(circle at 50% 32%, var(--yg-inner-hi), var(--yg-inner) 72%) !important;
  padding-top: 26px !important; font-size: 11px !important; line-height: 1 !important;
}
.mobile-hud .mh-pk.on:not(.swap-skill) {
  background: url(/assets/PK2.png) center 6px / 30px 30px no-repeat,
              radial-gradient(circle at 50% 32%, var(--yg-ember), var(--yg-ember-deep) 72%) !important;
  color: #fff3c4 !important;
}
.mobile-hud .mh-attack:not(.swap-skill) {
  background: radial-gradient(circle at 50% 32%, var(--yg-ember), var(--yg-ember-deep) 72%) !important;
}
.mobile-hud .mh-meditate, .mobile-hud .mh-target, .mobile-hud .mh-pk { font-size: 12px !important; }
.mobile-hud .mh-auto { font-size: 11px !important; height: 28px !important; }
html.mobile-hud-on #viewModeButton { border-radius: 50% !important; min-width: 0 !important; width: 40px !important;
  height: 40px !important; padding: 0 !important; font-size: 12px !important; }
.mobile-hud .mh-combat-hide::after, .mobile-hud .mh-party-finder::after, .mobile-hud .mh-swap::after,
.mobile-hud .mh-auto::after, html.mobile-hud-on #viewModeButton::after, html.mobile-hud-on #liveVoiceChat .voice-mic::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
}
.mobile-hud .mh-auto::after { inset: -11px -2px; border-radius: 16px; }
.mobile-hud .mh-combat-hide { z-index: 6; overflow: visible !important; }
/* the 3D button (#viewModeButton) sits right above the menu button and owns that strip (measured package 10:
   the menu hit was 25-31 px tall); the menu's touch ring therefore grows downwards, over empty scene */
.mobile-hud .mh-combat-hide::after { inset: -2px -4px -24px; border-radius: 16px; }
/* the menu ring reaches down past the swap button (⇄, below-left): ⇄ stays on top so it keeps its own 47 px ring;
   the menu keeps its centre column, which ⇄'s ring does not reach */
.mobile-hud .mh-swap { z-index: 7; }
/* long labels (en "Concentration" = 91 px in a 51 px button) wrap inside the button and never cover the attack button */
.mobile-hud .mh-meditate { overflow: hidden !important; white-space: normal !important; overflow-wrap: anywhere;
  hyphens: auto; line-height: 1.05 !important; text-align: center; font-size: 10px !important; letter-spacing: -0.2px; }
html.mobile-hud-on #liveVoiceChat .voice-mic { position: relative; width: 40px !important; height: 40px !important; }
/* rolling server announcement (owner: grey bar top-left): readable band in the empty strip between the vitals and
   the menu icons; independent of the chat minimize buttons (it is server news, not chat), the client's own option
   rollingAnnouncements still turns it off. 100cqw = the band width, so the text still crosses the whole band. */
html.mobile-hud-on .screen-announcement-rolling { left: 25% !important; right: 42% !important; top: 8px !important;
  height: 24px !important; container-type: inline-size;
  background: linear-gradient(90deg, #0000, #000c 10% 90%, #0000) !important; }
html.mobile-hud-on .screen-announcement-rolling-text { color: var(--yg-gold-text) !important; font-size: 13px !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important; }
html.mobile-hud-on .screen-announcement-rolling.show .screen-announcement-rolling-text { animation-name: yg-roll !important; }
@keyframes yg-roll { 0% { transform: translate(0); } to { transform: translate(calc(-100cqw - 100%)); } }
/* map loading screen: tip and percent on a dark band so white text reads on the bright key art */
#loadTip, #loadPct { color: var(--yg-text) !important; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important; }
#loadTip { box-sizing: border-box !important; max-width: 100% !important; background: linear-gradient(90deg, #0000, #000000c0 12% 88%, #0000) !important; padding: 3px 12% !important;
  font-size: 12px !important; line-height: 16px !important; height: auto !important; }
#loadPct { color: var(--yg-gold-text) !important; font-weight: 700 !important; }