@font-face {
  font-family: "FVF Fernando 08";
  src: url("../assets/fonts/FVF Fernando 08.ttf?v=9954a134f5a3") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --ink:        #1c1610;
  --ink-soft:   #3a2e22;
  --ink-light:      #ece1c9;
  --ink-light-soft: #d9cab0;
  --parchment:  #e7dabb;
  --parchment-2:#d6c49f;
  --wood:       #392b1e;
  --wood-dark:  #241a12;
  --gold:       #c9a45c;
  --jade:       #7aa887;
  --blood:      #a3453b;
  --qi:         #6ba3c4;
  --shadow:     0 8px 28px rgba(0, 0, 0, 0.55);
  --font-serif: "Noto Serif", "Times New Roman", Georgia, "Segoe UI", serif;
  --font-ui:    "Segoe UI", "Noto Sans", Tahoma, Arial, sans-serif;
  --ui-scale: 1;
  --ui-vw: 100vw;
  --ui-vh: 100vh;
  --hud-w: min(660px, calc(var(--ui-vw) - 24px));
  --hud-h: min(400px, calc(var(--ui-vh) - 140px));
}
#hud, #touch-ui, .overlay, #map-loading, #downed-badge, #skill-test-panel {
  zoom: var(--ui-scale);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0d0b09;
  color: var(--parchment);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
#app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100%;
  overflow: hidden;
}
.hidden { display: none !important; }
#game-canvas {
  position: absolute;
  top: 0; left: 0;
  display: block;
  background: #12100d;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  touch-action: none;            
}
#loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, #1e2620 0%, #0d0b09 75%);
  z-index: 500;
}
#loading h1 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 5vw, 44px);
  letter-spacing: 0.16em;
  color: var(--parchment);
  margin: 0 0 12px;
  text-shadow: 0 2px 0 #000;
}
#loading p { color: var(--jade); letter-spacing: 0.1em; margin: 0; }
.load-box { text-align: center; width: min(420px, 82vw); }
#loading.fading { opacity: 0; transition: opacity 0.34s ease; }
#load-bar {
  margin: 22px 0 8px;
  height: 10px;
  border: 1px solid rgba(201, 164, 92, 0.5);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
#load-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #4f7a5c, var(--jade) 55%, var(--gold));
  box-shadow: 0 0 10px rgba(122, 168, 135, 0.55);
  transition: width 0.12s linear;
}
#load-bar-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  animation: load-sheen 1.5s linear infinite;
}
#load-bar-fill { position: relative; }
@keyframes load-sheen {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.load-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--parchment-2);
  opacity: 0.85;
}
#load-pct { font-variant-numeric: tabular-nums; color: var(--gold); }
#load-detail { color: var(--parchment-2); opacity: 0.7; }
#load-tip {
  margin-top: 26px !important;
  min-height: 2.6em;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em !important;
  color: var(--parchment-2) !important;
  opacity: 0.6;
}
#loading.failed #load-bar-fill { background: var(--blood); animation: none; }
#loading.failed #load-phase { color: #e0a08f; }
#map-loading {
  position: absolute;
  left: 50%; bottom: 12%;
  transform: translateX(-50%);
  z-index: 420;                 
  pointer-events: none;
}
.map-load-box {
  min-width: min(280px, calc(var(--ui-vw) * 0.7));
  padding: 8px 14px 10px;
  text-align: center;
  background: linear-gradient(180deg, rgba(35, 26, 18, 0.92), rgba(20, 15, 10, 0.95));
  border: 1px solid rgba(201, 164, 92, 0.45);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
#map-load-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px; letter-spacing: 0.12em;
  color: var(--parchment);
  margin-bottom: 7px;
}
#map-load-bar {
  height: 5px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  overflow: hidden;
}
#map-load-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--jade), var(--gold));
  transition: width 0.12s linear;
}
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 100; }
body.chat-open #hud { z-index: 1000; }
.panel {
  background: radial-gradient(ellipse at 50% 0, rgba(190,155,96,.095), transparent 62%),
    linear-gradient(155deg, rgba(65,50,35,.97), rgba(37,28,20,.98) 66%, rgba(30,23,17,.98));
  border: 1px solid rgba(184,150,90,.68);
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(8,5,3,.46), inset 0 0 0 1px rgba(10,7,4,.72), inset 0 1px 0 rgba(238,213,166,.10);
  padding: 8px 10px;
  color: #e4d6b9;
}
.panel.pulse { animation: panel-pulse 0.5s ease-out; }
@keyframes panel-pulse {
  0%   { box-shadow: var(--shadow), 0 0 0 1px var(--gold), 0 0 10px 2px var(--gold); }
  100% { box-shadow: var(--shadow), inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
}
.tay-trai { position: absolute; left: 0; top: 0; bottom: 0; z-index: 30; pointer-events: none; }
body.tay-trai-mo #hud { z-index: 1000; }
.tt-cot {
  position: absolute; left: 0; top: 0; bottom: 0; width: 86px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 16px 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  background: linear-gradient(90deg, rgba(52, 37, 23, 0.97), rgba(36, 26, 16, 0.94));
  border-right: 2px solid rgba(201, 164, 92, 0.75);
  box-shadow: 4px 0 14px rgba(0, 0, 0, 0.45);
  transform: translateX(-100%); visibility: hidden;
  transition: transform 160ms ease, visibility 0s linear 160ms;
  pointer-events: auto;
}
.tt-cot::-webkit-scrollbar { display: none; }
.tay-trai.mo .tt-cot { transform: none; visibility: visible; transition: transform 160ms ease; }
.tt-mo {
  position: absolute; left: 0; top: 50%; width: 20px; height: 56px; margin-top: -28px; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(90deg, rgba(58, 42, 26, 0.95), rgba(92, 68, 38, 0.95));
  border: 1px solid rgba(214, 180, 108, 0.85); border-left: 0; border-radius: 0 7px 7px 0;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.45);
  transition: left 160ms ease;
  pointer-events: auto;
}
.tt-mo span {
  width: 0; height: 0;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 9px solid #f0d48a;
}
.tay-trai.mo .tt-mo { left: 86px; }
.tay-trai.mo .tt-mo span { border-left: 0; border-right: 9px solid #f0d48a; }
.tt-mo:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.tt-nut {
  display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none;
  width: 100%; padding: 0; cursor: pointer; background: none; border: 0;
  color: #f6e8c8; font-family: var(--font-serif); font-size: 11px; line-height: 1.2;
  text-shadow: 0 1px 2px #000;
}
.tt-tron {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 36% 30%, #e0554a, #9c231a 62%, #6e140e);
  border: 2px solid #f0d48a;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: filter 120ms ease, transform 70ms ease;
}
.tt-tron svg {
  width: 26px; height: 26px;
  fill: none; stroke: #fff4dc; stroke-linecap: round; stroke-linejoin: round;
}
.tt-tron .tt-vai { stroke-width: 1.6; }
.tt-nut:hover .tt-tron { filter: brightness(1.15); }
.tt-nut:active .tt-tron { transform: translateY(1px); }
.tt-nut:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.tt-kethu {
  width: 100%; flex: none; margin-top: 4px; padding-top: 8px;
  border-top: 1px solid rgba(201, 164, 92, 0.45);
}
.tt-kethu h3 {
  margin: 0 0 6px; text-align: center; color: #f0d48a;
  font-family: var(--font-serif); font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000;
}
.tt-kethu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tt-kt-trong { text-align: center; color: rgba(246, 232, 200, 0.55); font-size: 10px; }
.tt-kt-dong {
  display: flex; align-items: center; gap: 5px; width: 100%; padding: 3px 2px;
  background: rgba(0, 0, 0, 0.22); border: 0; border-radius: 5px; cursor: pointer; text-align: left;
  color: #f6e8c8; font-family: var(--font-serif);
}
.tt-kt-dong:hover { background: rgba(0, 0, 0, 0.38); }
.tt-kt-cham { width: 7px; height: 7px; flex: none; border-radius: 50%; box-shadow: 0 0 3px rgba(0, 0, 0, 0.6); }
.tt-kt-cham.on  { background: #4cd964; }
.tt-kt-cham.off { background: #e0453a; }
.tt-kt-chu { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tt-kt-ten { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.tt-kt-cap { font-size: 9px; color: rgba(246, 232, 200, 0.65); }
#hud-left {
  position: absolute; top: 12px; left: 12px;
  width: var(--hud-col-w);
  pointer-events: auto;
  cursor: pointer;                 
  touch-action: manipulation;
  transition: filter 0.15s ease, border-color 0.15s ease;
}
#hud-left:hover,
#hud-left:focus-visible {
  filter: brightness(1.12);
  border-color: var(--gold);
}
#hud-left:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#hud-left:active { filter: brightness(0.95); }
.hud-id {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 2px 7px;
  padding: 0 0 5px;
  border-bottom: 1px solid rgba(201, 164, 92, 0.3);
}
.hud-id .face-frame { display: none; }
.hud-info { display: block; flex: 1 1 auto; min-width: 0; }
.hud-wallet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 22px;
  padding: 2px 7px;
  background: rgba(24, 29, 20, 0.82);
  border: 1px solid rgba(201, 164, 92, 0.38);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
  color: #cdf1ff;
  font-size: 12px;
  line-height: 1;
}
.hud-wallet .stone-mark {
  color: #8fe0e6;
  text-shadow: 0 0 6px rgba(143, 224, 230, 0.55);
}
.hud-wallet strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
.wallet {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; padding-top: 5px;
  border-top: 1px solid rgba(201, 164, 92, 0.28);
  font-size: 11px; color: rgba(231, 218, 187, 0.75);
}
.wallet .stone-mark { color: #8fe0e6; text-shadow: 0 0 6px rgba(143, 224, 230, 0.55); }
.wallet .wallet-label { flex: 1; letter-spacing: 0.04em; }
.wallet strong {
  color: #cdf1ff; font-variant-numeric: tabular-nums; letter-spacing: 0.03em;
}
#hud {
  --hud-col-w: 230px;
  --hud-btns-top: calc(12px + var(--hud-left-h, 138px) + 6px);
}
#hud-btns {
  position: absolute; top: var(--hud-btns-top); left: 12px;
  width: var(--hud-col-w);
  display: flex; gap: 5px;
  pointer-events: auto;
}
#hud-btns button { margin: 0; flex: 1 1 0; min-width: 0; position: relative; display: grid; place-items: center; width: auto; height: 35px; min-height: 35px; padding: 3px 6px; color: #ead9b5; background: linear-gradient(180deg, rgba(103,78,48,.98), rgba(48,36,25,.99)); border: 1px solid #ad8a53; border-radius: 3px; box-shadow: inset 0 1px rgba(255,238,198,.26), inset 0 -1px rgba(8,5,3,.72), 0 3px 7px rgba(5,3,2,.42); text-shadow: 0 -1px rgba(255,245,221,.3), 0 1px 2px #100b07; transition: filter .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease; }
#hud-journal {
  position: absolute; top: calc(var(--hud-btns-top) + 30px + 8px); left: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
#quest-tracker, #hud-buffs, #ht-dot-pha #breakthrough-widget { pointer-events: auto; }
.hud-buffs { display: flex; flex-wrap: wrap; gap: 4px; max-width: 280px; }
.buff-chip {
  display: flex; align-items: center; gap: 3px;
  padding: 1px 5px 1px 2px;
  background: rgba(24, 20, 14, 0.72);
  border: 1px solid rgba(201, 164, 92, 0.45); border-radius: 3px;
}
.buff-chip canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.buff-chip b {
  font-size: 11px; font-weight: 700; color: #bff3d8;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
:root {
  --tm-dong-cao: 46px;
  --tm-dk-so: 46%;
}
#mate-menu {
  position: fixed; z-index: 40; zoom: var(--ui-scale);
  min-width: 132px; max-width: 240px; padding: 6px 7px 7px;
  color: var(--parchment); background: rgba(38, 30, 20, 0.97);
  border: 1px solid rgba(201, 164, 92, 0.75); border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  font-family: var(--font-serif);
}
#mate-menu.hidden { display: none; }
.mate-x {
  position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #ffe3dd; background: #a3352b;
  border: 1px solid #5d1a14; border-radius: 50%;
  font-size: 11px; line-height: 1; cursor: pointer;
}
.mate-x:hover { background: #c8443a; }
.mate-head {
  display: flex; flex-direction: column; gap: 1px;
  padding: 0 2px 5px; margin-bottom: 5px;
  border-bottom: 1px solid rgba(201, 164, 92, 0.3);
}
#mate-name { color: var(--gold); font-size: 13px; letter-spacing: 0.03em; }
.mate-sub { font-size: 10px; opacity: 0.75; }
#mate-acts button {
  display: block; width: 100%; margin: 3px 0; padding: 5px 8px;
  color: var(--parchment); text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, #46604b, #2c3f31);
  border: 1px solid var(--wood); border-radius: 2px;
  font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.04em;
}
#mate-acts button:hover { filter: brightness(1.15); }
#mate-acts button:active { transform: translateY(1px); }
#mate-acts button[disabled] { opacity: 0.42; cursor: not-allowed; }
#mate-acts .mm-mau {
  display: inline-block; width: 12px; height: 9px; margin: 0 7px -1px 0;
  border: 1px solid #1a120a; border-radius: 1px; vertical-align: baseline;
}
#mate-acts button.mm-on[disabled] { opacity: 1; cursor: default; border-color: var(--gold); }
#quest-tracker {
  position: static; width: 230px; max-width: calc(var(--ui-vw) - 24px);
  padding: 5px 6px 6px;
  text-shadow: 0 -1px rgba(255,242,215,.22), 0 1px 2px rgba(0,0,0,.9);
  color: #dbcaa9;
}
.quest-head {
  display: flex; align-items: stretch; gap: 3px; margin-bottom: 4px;
}
#quest-open {
  display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0;
  padding: 3px 4px; margin: 0;
  background: none; border: 0; border-bottom: 1px solid rgba(201, 164, 92, 0.32);
  color: var(--gold); font-family: var(--font-serif); font-size: 12px;
  letter-spacing: 0.03em; text-align: left; cursor: pointer;
}
#quest-open:hover, #quest-open:focus-visible { color: #ffe9b0; }
#quest-open .q-stage {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#quest-open .q-more { flex: 0 0 auto; opacity: 0.75; font-size: 11px; }
#quest-stage .q-stage-short { display: none; }
.q-collapse {
  flex: 0 0 25px; width: 25px; height: 25px; padding: 0;
  color: var(--gold); background: rgba(73, 52, 29, 0.28);
  border: 1px solid rgba(201, 164, 92, 0.38); border-radius: 2px;
  font-size: 13px; line-height: 1; cursor: pointer;
}
.q-collapse:hover, .q-collapse:focus-visible { color: #ffe9b0; background: rgba(110, 79, 38, 0.46); }
.q-collapse:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#quest-tracker.collapsed #quest-objectives { display: none; }
#quest-tracker.collapsed .quest-head { margin-bottom: 0; }
#quest-tracker.collapsed #quest-stage .q-stage-full { display: none; }
#quest-tracker.collapsed #quest-stage .q-stage-short { display: inline; }
#quest-tracker.collapsed #quest-open .q-more { display: none; }
#quest-objectives {
  max-height: 5.4em; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0; list-style: none;
  font-size: 11px; line-height: 1.2em; color: #d8c8a8;
  scrollbar-width: thin; scrollbar-color: rgba(201, 164, 92, 0.5) transparent;
  opacity: 1;
}
#quest-objectives::-webkit-scrollbar { width: 5px; }
#quest-objectives::-webkit-scrollbar-thumb {
  background: rgba(201, 164, 92, 0.5); border-radius: 3px;
}
#quest-objectives li {
  padding: 1px 2px; white-space: normal; word-break: break-word;
  color: #d8c8a8;
  opacity: 1;
}
#quest-objectives li.done { color: #bfd0a7; }
#quest-objectives li.sub { padding-left: 14px; font-size: 0.92em; opacity: 1; color: #d8c8a8; }
#quest-objectives li.hd { color: #ecd28f; font-style: italic; }
#btn-breakthrough {
  display: flex; align-items: center; gap: 8px;
  min-height: 38px; max-width: min(292px, calc(var(--ui-vw) - 24px));
  padding: 6px 9px;
  color: var(--parchment); background: rgba(48, 35, 23, 0.94);
  border: 1px solid rgba(201, 164, 92, 0.75); border-radius: 3px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.45);
  font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.035em;
  cursor: pointer; touch-action: manipulation;
}
#btn-breakthrough:hover, #btn-breakthrough:focus-visible { filter: brightness(1.13); }
#btn-breakthrough:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#btn-breakthrough.ready { border-color: #a8d7a9; box-shadow: 0 0 0 1px rgba(168, 215, 169, 0.24), 0 5px 16px rgba(0, 0, 0, 0.45); }
#breakthrough-button-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#breakthrough-badge {
  flex: none; margin-left: auto; padding: 2px 5px;
  color: #ead28e; background: #241a12; border: 1px solid rgba(201, 164, 92, 0.4);
  font-family: var(--font-ui); font-size: 10px; letter-spacing: 0.04em;
}
#breakthrough-badge.ready { color: #d9f0d6; border-color: rgba(122, 168, 135, 0.75); }
.scroll-icon {
  position: relative; flex: none; width: 19px; height: 23px;
  background: #dfcd9f; border: 1px solid #7e6030; box-shadow: inset 2px 0 #f2e5bf;
}
.scroll-icon::before, .scroll-icon::after {
  content: ''; position: absolute; left: -3px; width: 23px; height: 4px;
  background: #b99555; border: 1px solid #6f5028; border-radius: 3px;
}
.scroll-icon::before { top: -2px; }
.scroll-icon::after { bottom: -2px; }
.scroll-icon i, .scroll-icon i::before, .scroll-icon i::after {
  position: absolute; content: ''; left: 4px; width: 9px; height: 1px; background: #735b35;
}
.scroll-icon i { top: 7px; }
.scroll-icon i::before { top: 4px; left: 0; }
.scroll-icon i::after { top: 8px; left: 0; width: 6px; }
.breakthrough-sheet {
  width: min(292px, calc(var(--ui-vw) - 24px)); margin-top: 7px; padding: 13px 14px 12px;
  color: #342819;
  background:
    linear-gradient(90deg, rgba(111, 79, 35, 0.13), transparent 12%, transparent 88%, rgba(111, 79, 35, 0.13)),
    #e5d3a8;
  border: 2px solid #9b7841; border-radius: 2px;
  box-shadow: inset 0 0 0 1px #f2e5bf, 0 9px 24px rgba(0, 0, 0, 0.5);
}
.breakthrough-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sheet-kicker { display: block; color: #e8ddc7; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; }
.sheet-kicker:empty { display: none; }
.breakthrough-sheet .sheet-kicker { color: #8b5f2b; }
#breakthrough-panel .breakthrough-head h2 {
  margin: 2px 0 0; color: #251a10;
  font-family: var(--font-serif); font-size: 14px; line-height: 1.15; letter-spacing: 0.025em;
}
#breakthrough-close {
  flex: none; width: 28px; height: 28px; padding: 0;
  color: #5d4225; background: transparent; border: 1px solid rgba(94, 66, 35, 0.45);
  font-size: 22px; line-height: 24px; cursor: pointer;
}
#breakthrough-close:hover, #breakthrough-close:focus-visible { color: #281b0f; border-color: #5d4225; }
.breakthrough-route {
  margin: 9px 0 10px; padding: 6px 7px;
  color: #62401f; background: rgba(255, 247, 218, 0.48);
  border-block: 1px solid rgba(111, 80, 40, 0.28);
  font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.breakthrough-requirement { margin: 9px 0; }
.requirement-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.requirement-top span { min-width: 0; }
.requirement-top b { flex: none; color: #75451e; font-size: 12px; font-variant-numeric: tabular-nums; }
.breakthrough-requirement.done .requirement-top { color: #355b35; }
.breakthrough-progress {
  height: 9px; margin-top: 4px; overflow: hidden;
  background: #b7a47a; border: 1px solid #765b32; box-shadow: inset 0 1px 2px rgba(49, 34, 15, 0.35);
}
.breakthrough-progress i {
  display: block; height: 100%; min-width: 0;
  background: linear-gradient(90deg, #9a6332, #d09b4e);
}
.breakthrough-requirement.done .breakthrough-progress i { background: linear-gradient(90deg, #416d43, #79a76f); }
.breakthrough-status {
  margin-top: 11px; padding: 7px 8px;
  color: #7a2f25; background: rgba(136, 52, 39, 0.08); border: 1px solid rgba(122, 47, 37, 0.35);
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-align: center;
}
.breakthrough-status.ready { color: #315c35; background: rgba(59, 104, 61, 0.09); border-color: rgba(49, 92, 53, 0.4); }
.breakthrough-status.blocked { text-align: left; line-height: 1.45; font-weight: 600; letter-spacing: 0; }
.breakthrough-place { margin-top: 7px; color: #654c2d; font-size: 11px; line-height: 1.4; text-align: center; }
#ht-dot-pha { padding-right: 2px; }
#ht-dot-pha #breakthrough-widget { width: 100%; }
#ht-dot-pha #btn-breakthrough,
#ht-dot-pha .breakthrough-sheet { width: 100%; max-width: none; }
#hud-target {
  position: absolute; top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 176px;
}
.t-head {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-bottom: 4px;
}
#target-name {
  font-family: var(--font-serif);
  font-size: 13px; color: #e5ce9b;
}
#target-level {
  font-family: var(--font-serif);
  font-size: 12px; color: var(--gold);
  letter-spacing: 0.04em;
}
#hud-target.doi-thu #target-name { color: #ff6a58; }
#hud-target.doi-thu #target-level { color: #d99a8f; }
#hud-target.dao-huu #target-name { color: #bfe0ff; }
#hud-target.dao-huu #target-level { color: #9fb59a; }
@media (max-width: 760px) {
  #hud-target {
    z-index: 9;
    box-sizing: border-box;
    width: min(250px, calc(100vw - 24px));
    padding: 6px 8px;
  }
  #hud-target .t-head {
    justify-content: flex-start;
    gap: 5px;
    margin-bottom: 3px;
  }
  #target-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }
  #target-level { flex: none; font-size: 10px; }
  #hud-target .bar { height: 10px; margin-top: 0; }
  #hud-target .bar > span { font-size: 9px; line-height: 10px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  #hud-target {
    top: auto;
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 276px);
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  #hud-target {
    top: 8px;
    bottom: auto;
    left: calc(50% + 24px);
    width: min(200px, calc(var(--ui-vw) - 540px));
  }
}
#invite-hud {
  position: absolute;
  top: 104px; left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  width: min(350px, calc(var(--ui-vw) - 24px));
  padding: 9px 12px 10px;
  text-align: center;
  pointer-events: auto;
}
#invite-hud.hidden { display: none; }
.invite-kicker {
  color: var(--gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.invite-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}
.invite-head strong {
  color: var(--parchment);
  font-family: var(--font-serif);
  font-size: 14px;
}
#invite-from {
  max-width: 50%;
  overflow: hidden;
  color: var(--jade);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#invite-text {
  margin: 5px 0 8px;
  color: var(--parchment-2);
  font-size: 11px;
  line-height: 1.35;
}
.invite-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.invite-action {
  min-width: 86px;
  min-height: 30px;
  padding: 5px 12px;
  color: var(--parchment);
  font: 700 11px/1 var(--font-ui);
  cursor: pointer;
  border: 1px solid rgba(201, 164, 92, 0.55);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(83, 62, 37, 0.9), rgba(34, 25, 17, 0.95));
}
.invite-action:hover,
.invite-action:focus-visible { border-color: var(--gold); }
.invite-action.accept {
  color: #20170d;
  background: linear-gradient(180deg, #e0bd71, #b98c45);
  border-color: #f0d18c;
}
.invite-action.accept:hover,
.invite-action.accept:focus-visible { background: linear-gradient(180deg, #f0d18c, #c99a50); }
.invite-action.decline { color: #e7c9ba; }
.face-frame {
  width: 48px; height: 48px;
  border: 1px solid var(--gold);
  background: #1b2119;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
  flex: none;
}
#hud-face { display: block; width: 48px; height: 48px; image-rendering: pixelated; }
.hud-info { flex: 1; min-width: 0; }
#hud-name {
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 800; line-height: 1.15;
  color: #f0dfbd;
  letter-spacing: 0.05em;
  text-shadow: 0 -1px rgba(255,242,215,.22), 0 1px 2px rgba(0,0,0,.9);
}
#hud-realm {
  font-size: 12px; font-weight: 800; line-height: 1.2;
  color: #dbcaa9; margin-top: 2px; margin-bottom: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 -1px rgba(255,242,215,.22), 0 1px 2px rgba(0,0,0,.9);
}
.bar {
  position: relative;
  height: 12px; margin-top: 3px;
  background: #140f0a;
  border: 1px solid rgba(0, 0, 0, 0.7);
  overflow: hidden;
  border-color: rgba(213,188,140,.24);
}
.bar.thin { height: 6px; }
.bar .fill {
  position: absolute; inset: 0 auto 0 0;
  display: block; width: 100%;
  transition: width 0.25s ease;
}
.fill.hp { background: linear-gradient(180deg, #c25a4d, #7d2f27); }
.fill.mp { background: linear-gradient(180deg, #6fa8c8, #35617d); }
.fill.sp { background: linear-gradient(180deg, #a06ac0, #593573); }
.fill.bp { background: linear-gradient(180deg, #e08327, #9a430d); }
.fill.xp {
  background: linear-gradient(180deg, #dcff79, #79d61d);
  box-shadow: 0 0 5px rgba(184, 255, 72, 0.48);
}
.bar > span {
  position: absolute; inset: 0;
  font-size: 10px; line-height: 12px; text-align: center;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 1px #000;
  letter-spacing: 0.08em;
}
#row-xp > span {
  color: #dfff8a;
  text-shadow: 0 1px 1px #102008, 0 0 4px rgba(171, 255, 55, 0.5);
}
.bar.thin span { display: none; }
#row-xp.thin { height: 11px; }
#row-xp.thin > span {
  display: block;
  font-size: 9px; line-height: 11px; letter-spacing: 0.02em;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.resource-bar { overflow: visible; border-color: rgba(213,188,140,.24); }
.resource-bar .fill { overflow: hidden; }
.resource-bar .bar-label {
  left: 20px; right: 64px;
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resource-bar .bar-value {
  position: absolute; z-index: 2; top: 0; right: 4px;
  font-size: 9px; line-height: 12px; color: #fff1d2;
  font-weight: 700; text-shadow: 0 1px 1px #000;
}
.resource-bar .resource-icon {
  z-index: 2; width: 18px; right: auto;
  display: grid; place-items: center;
  color: #fff; font-size: 10px; line-height: 12px;
  background: rgba(15, 10, 8, 0.58);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 1px #000;
}
.resource-bar .hp-icon { color: #ffd1cd; }
.resource-bar .mp-icon { color: #cceeff; }
.resource-bar .sp-icon { color: #ead5ff; }
.resource-bar .bp-icon { color: #ffe0b0; }
.resource-bar.locked .bar-label,
.resource-bar.locked .bar-value { color: rgba(255, 255, 255, 0.5); }
#hud-right {
  position: absolute; top: 12px; right: 12px;
  display: flex; flex-direction: column; align-items: center;
  width: 168px; padding: 5px 4px 6px;
  box-sizing: border-box;
  text-align: center; pointer-events: auto;
  background: rgba(24, 29, 20, 0.96);
  border: 1px solid rgba(201, 164, 92, 0.72);
  border-radius: 4px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.46), inset 0 0 0 1px rgba(0, 0, 0, 0.62);
}
#party-hud {
  position: absolute;
  top: 218px;
  right: 12px;
  width: 112px;
  padding: 0;
  pointer-events: auto;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.party-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-bottom: 2px;
  font-family: var(--font-ui);
}
.party-head > span { display: none; }
.party-head b {
  color: #fff4d0;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
#party-hud.active-run .party-head b::after {
  content: ' · BÍ CẢNH';
  color: var(--jade);
  font-size: 8px;
}
.party-manage {
  width: 20px; height: 18px; padding: 0; cursor: pointer;
  color: var(--parchment); background: rgba(20, 15, 10, 0.72);
  border: 1px solid rgba(201, 164, 92, 0.55); border-radius: 3px;
  font-size: 11px; line-height: 16px;
}
.party-manage:hover { background: rgba(60, 45, 25, 0.9); }
.party-manage:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.party-member { padding: 0 0 4px; }
.party-member.away { opacity: 0.6; }
.party-member.downed { filter: grayscale(0.8); }
.party-member-top {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 14px;
}
.party-leader-mark {
  flex: none;
  color: var(--gold);
  font-size: 10px;
  margin-right: 2px;
  text-shadow: 0 1px 2px #000;
}
.party-leader-mark:empty { display: none; }
.party-member-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #ffffff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000, 0 1px 2px #000;
}
.party-member.self .party-member-name { color: #ffe08a; }
.party-vital {
  position: relative;
  height: 7px;
  margin-top: 1px;
  overflow: hidden;
  border: 2px solid #1a1612;
  background: #3a332b;
}
.party-vital-fill {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 0;
  background: #5e8a4f;
  transition: width 0.2s ease;
}
.party-vital-fill.mid { background: #d99a2b; }
.party-vital-fill.low { background: #ec3b1c; }
#minimap {
  display: block; margin: 0 auto 3px;
  width: 160px; height: 120px;
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
  border: 1px solid rgba(201, 164, 92, 0.36);
  background: #182116;
}
#hud-map {
  font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.06em;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 -1px rgba(255,242,215,.22), 0 1px 2px rgba(0,0,0,.9);
  color: #dbcaa9;
}
.dim { font-size: 11px; color: rgba(231, 218, 187, 0.5); }
.hud-btns button {
  margin-top: 6px; margin-left: 4px;
  width: 34px; height: 30px;
  background: rgba(60, 45, 30, 0.9);
  border: 1px solid var(--gold);
  color: var(--parchment);
  font-size: 15px; cursor: pointer;
  border-radius: 3px;
}
.hud-btns .hud-icon {
  display: block; width: 24px; height: 24px;
  object-fit: contain; image-rendering: pixelated;
  pointer-events: none;
}
.hud-btns .hud-sect-mark {
  display: block; color: #e3c778; font-family: var(--font-serif);
  font-size: 20px; font-weight: 700; line-height: 24px; pointer-events: none;
}
.hud-btns button:hover { background: rgba(90, 68, 42, 0.95); }
.hud-btns button.active { border-color: var(--jade); background: rgba(58, 122, 74, 0.4); }
#hud-btns #btn-chat-compose {
  width: auto; min-width: 64px; padding: 0 12px; flex: 2 1 0;
  font-size: 11px; font-weight: 700; letter-spacing: .035em;
}
#hud-btns #btn-fishing-stop {
  flex: 2 1 0;
  min-width: 58px;
  padding: 0 7px;
  color: #ffd4b9;
  background: rgba(96, 42, 31, 0.92);
  border-color: rgba(220, 126, 90, 0.82);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
#hud-btns #btn-fishing-stop:hover { background: rgba(125, 52, 37, 0.96); }
.world-chat-banner {
  position: absolute; top: 128px; left: 50%; z-index: 5;
  width: min(620px, calc(var(--ui-vw) - 320px));
  transform: translateX(-50%);
  overflow: hidden; pointer-events: none;
  padding: 6px 0;
  color: var(--parchment); font: 700 16px/1.25 var(--font-ui);
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  background: rgba(24, 17, 10, 0.5);
  border: 1px solid rgba(201, 164, 92, 0.55);
  border-radius: 3px;
}
.world-chat-banner.hidden { display: none; }
#world-chat-line {
  display: inline-block; min-width: max-content; padding-left: 100%;
  white-space: nowrap;
}
#world-chat-line.run {
  animation: world-chat-marquee var(--world-chat-duration, 16s) linear both;
}
@keyframes world-chat-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
#quick-chat {
  position: absolute; left: 50%; bottom: 190px; z-index: 4;
  transform: translateX(-50%);
  width: min(540px, calc(var(--ui-vw) - 40px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: stretch; gap: 6px;
  padding: 7px; pointer-events: auto;
}
#quick-chat.hidden { display: none; }
.quick-chat-channels {
  grid-column: 1 / -1;
  display: flex; gap: 4px;
}
.quick-chat-channel {
  flex: 1 1 0; height: 25px; cursor: pointer;
  color: rgba(231, 218, 187, 0.78); font: 700 11px/1 var(--font-ui);
  background: rgba(12, 8, 5, 0.74);
  border: 1px solid rgba(201, 164, 92, 0.36); border-radius: 3px;
}
.quick-chat-channel:hover { border-color: var(--gold); color: var(--parchment); }
.quick-chat-channel.on {
  color: #1b1208; background: var(--gold); border-color: #e0bd71;
}
#quick-chat-input {
  min-width: 0; height: 36px; padding: 0 11px;
  color: #f2e8d2; font: 13px/1.2 var(--font-ui);
  background: rgba(12, 8, 5, 0.82);
  border: 1px solid rgba(201, 164, 92, 0.5); border-radius: 3px;
}
#quick-chat-input::placeholder { color: #c6b99e; }
#quick-chat-input:focus { outline: 2px solid rgba(201, 164, 92, 0.38); border-color: var(--gold); }
.quick-chat-action {
  flex: 0 0 auto; min-width: 58px; padding: 0 13px;
  color: #1b1208; font: 700 12px/1 var(--font-ui); cursor: pointer;
  background: var(--gold); border: 1px solid #e0bd71; border-radius: 3px;
}
.quick-chat-action:hover { background: #dfbd77; }
.quick-chat-action:focus-visible { outline: 2px solid var(--parchment); outline-offset: 2px; }
.quick-chat-action.secondary {
  color: #e4d6bc; background: linear-gradient(180deg, #51402c, #33271c);
  border-color: rgba(201,164,92,.56);
  opacity: .9;
}
.quick-chat-action.secondary:hover { background: rgba(90, 68, 42, 0.98); }
@media (max-width: 760px) {
  .world-chat-banner {
    top: 96px; width: calc(100% - 24px); font-size: 15px;
  }
  #quick-chat {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(132px, calc(env(safe-area-inset-bottom) + 124px));
    width: auto; transform: none;
  }
  #quick-chat-input { font-size: 16px; }
}
@media (orientation: landscape) and (max-height: 480px) {
  #quick-chat {
    left: 50%; right: auto; bottom: 116px;
    transform: translateX(-50%);
    width: min(520px, calc(var(--ui-vw) - 400px));
  }
}
#game-clock {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: rgba(214, 196, 156, 0.62);
  text-shadow: 0 1px 2px rgba(8, 5, 3, 0.95), 0 0 3px rgba(8, 5, 3, 0.8);
}
#game-clock.tam { opacity: 0.45; font-style: italic; }
#game-clock.lech { color: rgba(224, 168, 92, 0.92); }
#hud-foot {
  position: absolute;
  left: max(8px, env(safe-area-inset-left));
  bottom: max(3px, env(safe-area-inset-bottom));
  z-index: 130;                 
  pointer-events: none;
  display: flex; align-items: baseline; gap: 10px;
  white-space: nowrap;
}
#hud-where {
  font-size: 11px; line-height: 1.2;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: rgba(214, 196, 156, 0.55);
  text-shadow: 0 1px 2px rgba(8, 5, 3, 0.95), 0 0 3px rgba(8, 5, 3, 0.8);
}
#hud-keys {
  position: absolute; left: 50%; bottom: 10px;
  transform: translateX(-50%);
  font-size: 11px; padding: 5px 12px;
  white-space: nowrap; overflow: hidden; max-width: max(360px, calc(var(--ui-vw) - 560px));
  color: #b5a78c;
}
#hud-keys b { color: var(--gold); font-weight: 600; }
@media (pointer: coarse) {
  #hud-keys { display: none; }
}
#touch-ui { position: absolute; inset: 0; pointer-events: none; z-index: 120; }
#dpad, #joystick {
  transform: translate(var(--move-x, 0px), var(--move-y, 0px))
             scale(calc(var(--move-base, 1) * var(--move-k, 1)));
  transform-origin: left bottom;
}
#move-edit {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(10, 7, 4, 0.35); touch-action: none;
}
#move-edit.hidden { display: none; }
.move-edit-khung {
  position: absolute; border: 2px dashed #e8cc8b; border-radius: 12px;
  background: rgba(232, 204, 139, 0.12); cursor: move; touch-action: none;
}
.move-edit-bang {
  position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top));
  transform: translateX(-50%); width: min(340px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: 10px;
  background: rgba(30, 22, 15, 0.94); border: 1px solid rgba(221, 183, 105, 0.75);
  color: #f1e3c0; font: 13px/1.4 var(--font-ui); text-align: center;
}
.move-edit-bang input[type=range] { width: 100%; margin: 6px 0 8px; }
.move-edit-nut { display: flex; gap: 8px; justify-content: center; }
.move-edit-nut button { flex: 1; }
#dpad {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 160px; height: 160px;
  transform-origin: left bottom;
  pointer-events: auto; touch-action: none;
  filter: drop-shadow(0 5px 5px rgba(13, 8, 5, 0.6));
}
.dpad-btn, .dpad-run {
  position: absolute; width: 52px; height: 52px; padding: 0;
  color: rgba(255, 239, 196, 0.9);
  background: linear-gradient(180deg, rgba(83, 62, 37, 0.84), rgba(34, 25, 17, 0.9));
  border: 1px solid rgba(221, 183, 105, 0.75);
  box-shadow: inset 0 0 0 1px rgba(15, 9, 5, 0.7), inset 0 3px 5px rgba(255, 231, 171, 0.1);
  font-family: var(--font-ui); font-size: 20px; cursor: pointer;
  touch-action: none; user-select: none;
  transition: transform 70ms ease, filter 100ms ease;
}
.dpad-btn.up    { left: 54px; top: 0; }
.dpad-btn.left  { left: 0; top: 54px; }
.dpad-btn.right { right: 0; top: 54px; }
.dpad-btn.down  { left: 54px; bottom: 0; }
.dpad-run {
  left: 54px; top: 54px; color: #dfc98e; font-size: 10px; letter-spacing: 0.08em;
  background: radial-gradient(circle, rgba(83, 66, 41, 0.94), rgba(29, 21, 14, 0.96));
}
.dpad-btn.pressed { transform: scale(0.88); filter: brightness(1.35); }
.dpad-run.active { color: #d6f0c8; border-color: #8fc88e; filter: brightness(1.25); }
#joystick {
  position: absolute;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 160px; height: 160px;
  overflow: visible;
  pointer-events: auto; touch-action: none; user-select: none;
  filter: drop-shadow(0 5px 5px rgba(13, 8, 5, 0.6));
}
.joystick-ring {
  position: absolute; inset: 5px; z-index: 1;
  border: 2px solid rgba(221, 183, 105, 0.72); border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(99, 80, 49, 0.62), rgba(27, 22, 16, 0.86) 72%),
    rgba(30, 22, 15, 0.78);
  box-shadow:
    inset 0 0 0 2px rgba(15, 9, 5, 0.82),
    inset 0 0 0 10px rgba(221, 183, 105, 0.08),
    inset 0 0 22px rgba(0, 0, 0, 0.46);
}
.joystick-ring::before {
  content: ''; position: absolute; inset: 18px;
  border: 1px dashed rgba(221, 183, 105, 0.28); border-radius: 50%;
  pointer-events: none;
}
.joystick-thumb {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 58px; height: 58px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle at 36% 28%, rgba(120, 101, 64, 0.98), rgba(42, 31, 20, 0.98) 72%);
  border: 2px solid rgba(232, 204, 139, 0.86);
  box-shadow: inset 0 0 0 2px rgba(15, 9, 5, 0.82), 0 3px 8px rgba(0, 0, 0, 0.58);
  transition: filter 100ms ease;
}
.joystick-run {
  position: absolute; left: 50%; top: -58px; z-index: 3;
  width: 54px; height: 54px; padding: 0;
  transform: translateX(-50%);
  color: #dfc98e; font: 700 10px/1 var(--font-ui); letter-spacing: 0.06em;
  background: radial-gradient(circle, rgba(83, 66, 41, 0.96), rgba(29, 21, 14, 0.98));
  border: 1px solid rgba(232, 204, 139, 0.9); border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(15, 9, 5, 0.76), 0 2px 6px rgba(0, 0, 0, 0.56);
  cursor: pointer; touch-action: none;
}
.joystick-run.active {
  color: #d6f0c8; border-color: #8fc88e;
  box-shadow: inset 0 0 0 2px rgba(15, 9, 5, 0.76), 0 0 9px rgba(143, 200, 142, 0.5);
}
#joystick.dragging .joystick-thumb { filter: brightness(1.22); }
#touch-buttons {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 210px; height: 262px;
  transform: scale(1);
  transform-origin: bottom right;
  pointer-events: auto;
}
.tbtn {
  position: absolute; width: 58px; height: 58px; padding: 0;
  border-radius: 8px; border: 2px solid #b49a66;
  background:
    radial-gradient(circle at 38% 30%, rgba(117, 94, 57, 0.86), rgba(30, 22, 15, 0.96) 70%);
  color: #f2ecdc;
  font-family: var(--font-ui); font-size: 12px;
  box-shadow: 0 5px 10px rgba(12, 7, 4, 0.66), inset 0 0 0 1px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  touch-action: none; user-select: none;
  transition: transform 70ms ease, filter 100ms ease, border-color 140ms ease;
}
.tbtn .skill-key {
  position: absolute; left: 3px; top: 2px; z-index: 2;
  color: #d6c08b; font: 700 8px/1 var(--font-ui); letter-spacing: 0;
}
.tbtn .skill-glyph {
  position: absolute; inset: 3px 3px 13px;
  display: grid; place-items: center;
  color: #f5e5b5; font-family: Georgia, serif; font-size: 25px; line-height: 1;
  text-shadow: 0 2px 2px #000;
}
.pntt-mini-icon {
  display: block; flex: none; width: 16px; height: 16px;
  image-rendering: pixelated; pointer-events: none;
}
.combat-icon {
  width: 16px; height: 16px;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}
.tbtn .hud-icon {
  position: absolute; top: 1px; left: 50%; z-index: 1;
  display: block; width: 32px; height: 32px;
  transform: translateX(-50%);
  object-fit: contain; image-rendering: pixelated;
  pointer-events: none;
}
.tbtn .skill-name {
  position: absolute; left: 2px; right: 2px; bottom: 2px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: #efe2c2; font-size: 8px; line-height: 10px; letter-spacing: 0;
  text-shadow: 0 1px 1px #000;
}
.tbtn.skill { border-radius: 50%; }
.tbtn.skill .skill-key { left: 7px; top: 5px; }
.tbtn.skill .skill-glyph { inset: 5px 5px 15px; font-size: 23px; }
.tbtn.skill .skill-name { bottom: 5px; }
.tbtn.attack-touch {
  right: 0; bottom: 0; width: 90px; height: 90px; z-index: 3;
  border-radius: 50%; border-color: #e0bf70;
  background: radial-gradient(circle at 38% 30%, #76663e, #322319 68%, #17100c);
}
.attack-touch .attack-slash {
  position: absolute; left: 25px; top: 13px; width: 12px; height: 48px;
  transform: rotate(42deg); border-radius: 100% 0;
  background: linear-gradient(90deg, transparent, #fff2bc 48%, #ad7537 52%, transparent);
  filter: drop-shadow(0 0 3px #f0c36f);
}
.attack-touch .skill-name { bottom: 8px; font-size: 10px; color: #fff0bd; }
.attack-touch .skill-key { left: 8px; top: 8px; }
.attack-touch.hoi {
  border-color: var(--jade, #7fc0a0);
  background: radial-gradient(circle at 38% 30%, #3f6a55, #1b332a 68%, #0d1a15);
}
.attack-touch.hoi .attack-slash { display: none; }
.attack-touch.hoi::after {
  content: '?';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 10px;              
  font-size: 40px; font-weight: 700; line-height: 1;
  color: #dff3e4;
  text-shadow: 0 0 6px rgba(127, 192, 160, 0.75), 0 2px 3px rgba(8, 5, 3, 0.9);
  pointer-events: none;
}
.attack-touch.hoi .skill-name { color: #dff3e4; }
.attack-touch.forge-action {
  border-color: #f0bd68;
  background: radial-gradient(circle at 38% 30%, #80613a, #3c2a1b 68%, #1d120b);
}
.attack-touch.forge-action::after {
  content: '⚒';
  color: #ffe3a0;
  text-shadow: 0 0 6px rgba(255, 190, 88, 0.8), 0 2px 3px rgba(8, 5, 3, 0.9);
}
.attack-touch.forge-action .skill-name {
  color: #ffe9b5;
  font-size: 9px;
}
.qs-pos-0 { right: 144px; bottom: 16px;  z-index: 4; }   
.qs-pos-1 { right: 140px; bottom: 80px;  z-index: 4; }   
.qs-pos-2 { right: 80px;  bottom: 127px; z-index: 4; }   
.qs-pos-3 { right: 16px;  bottom: 144px; z-index: 4; }   
.qs-o .qs-img {
  position: absolute; left: 50%; top: 45%; width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  object-fit: contain; image-rendering: pixelated; pointer-events: none;
}
.qs-o.dim { opacity: 0.45; filter: grayscale(0.6); }
.qs-o.trong { border-style: dashed; }
#joystick .joystick-ring, #joystick .joystick-thumb,
#dpad .dpad-btn,
.joystick-run, .dpad-run {
  opacity: 0.5;
  transition: opacity 120ms ease;
}
#joystick.dragging .joystick-ring, #joystick.dragging .joystick-thumb,
#dpad .dpad-btn.pressed, #dpad .dpad-btn:active {
  opacity: 1;
}
.joystick-run.active, .joystick-run:active,
.dpad-run.active, .dpad-run:active {
  opacity: 0.9;
}
.qs-o.trong .skill-glyph { color: #b7ac95; font-size: 20px; }
.qs-o.aiming { border-color: #ffe08a; box-shadow: 0 0 12px rgba(255, 210, 110, 0.75); }
.qs-o.dang-van { border-color: #8ff0bf; box-shadow: 0 0 10px rgba(110, 240, 170, 0.55); }
.tbtn .skill-count {
  position: absolute; right: 6px; top: 4px; z-index: 6;
  color: #ffd978; font: 700 9px/1 var(--font-ui); text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.qs-edit {
  position: absolute; right: 87px; bottom: 87px; z-index: 5;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  color: #f0d27a; font: 700 14px/1 var(--font-ui);
  background: rgba(30, 22, 15, 0.9); border: 1px solid rgba(201, 164, 92, 0.75);
  box-shadow: 0 3px 6px rgba(12, 7, 4, 0.6); cursor: pointer; touch-action: none;
}
#touch-buttons.qs-editing .qs-edit { color: #10200f; background: #9fe0a2; border-color: #d6f5d0; }
#touch-buttons.qs-editing .qs-o {
  opacity: 1; filter: none;
  border-style: dashed; border-color: #f0d27a;
  animation: qs-rung 0.9s ease-in-out infinite;
}
#touch-buttons.qs-editing .qs-o:nth-of-type(2n) { animation-delay: -0.45s; }
#touch-buttons.qs-editing .qs-o.qs-chon { box-shadow: 0 0 0 3px rgba(240, 210, 122, 0.85); animation: none; }
#touch-buttons.qs-editing .qs-o.qs-keo { opacity: 0.6; animation: none; }
#touch-buttons.qs-editing .qs-o.qs-drop { box-shadow: 0 0 0 3px #9fe0a2; transform: scale(1.08); animation: none; }
@keyframes qs-rung { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.qs-picker {
  position: absolute; z-index: 6;
  right: calc(max(12px, env(safe-area-inset-right)) + 222px);
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 300px; max-height: calc(var(--ui-vh, 100vh) - 28px); overflow-y: auto;
  padding: 8px 10px 10px; pointer-events: auto;
  color: #eadbb7; background: rgba(20, 16, 12, 0.96);
  border: 1px solid rgba(201, 164, 92, 0.7); border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
  font-family: var(--font-ui);
}
.qs-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.qs-picker-head strong { color: #f0d27a; font-size: 14px; letter-spacing: 0.03em; }
.qs-picker-x {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  color: #eadbb7; background: transparent; border: 1px solid rgba(201, 164, 92, 0.45); border-radius: 6px;
}
.qs-picker-group { margin: 8px 0 4px; color: #aa9b7c; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.qs-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qs-cand {
  position: relative; min-height: 62px; padding: 6px 3px 5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #eadbb7; background: rgba(58, 45, 31, 0.72);
  border: 1px solid rgba(201, 164, 92, 0.3); border-radius: 6px; font: inherit;
}
.qs-cand:hover { filter: brightness(1.15); }
.qs-cand.dang { border-color: #f0d27a; background: rgba(96, 72, 38, 0.9); }
.qs-cand-hinh { display: grid; place-items: center; width: 28px; height: 28px; font-size: 20px; line-height: 1; }
.qs-cand-hinh img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.qs-cand-hinh .pntt-mini-icon { width: 16px; height: 16px; }
.qs-cand-ten { font-size: 10px; line-height: 1.15; text-align: center; }
.qs-cand-so { position: absolute; right: 4px; top: 3px; color: #ffd978; font-size: 9px; }
.qs-cand-phim {
  position: absolute; left: 4px; top: 3px; font-style: normal;
  color: #10200f; background: #f0d27a; border-radius: 3px; padding: 0 3px; font: 700 9px/12px var(--font-ui);
}
.qs-picker-foot { display: flex; gap: 6px; margin-top: 10px; }
.qs-picker-foot button {
  flex: 1; min-height: 36px; cursor: pointer; font: 700 12px var(--font-ui);
  color: #eadbb7; background: #3a2d1f; border: 1px solid #8b7240; border-radius: 5px;
}
.qs-picker-foot button.chinh { color: #10200f; background: #c9a45c; border-color: #f0d27a; }
.qs-picker-foot button:disabled { opacity: 0.4; cursor: default; }
.qs-picker-note { margin: 8px 0 0; color: #aa9b7c; font-size: 10px; line-height: 1.35; }
@media (max-width: 620px) {
  .qs-picker {
    left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
    top: max(10px, env(safe-area-inset-top)); bottom: auto; width: auto;
    max-height: calc(var(--ui-vh, 100vh) - 360px); min-height: 180px;
  }
}
.qs-chips { display: flex; align-items: stretch; gap: 6px; margin: 10px 0 4px; }
.qs-chips-nhan { align-self: center; font-size: 12px; opacity: 0.8; white-space: nowrap; }
.qs-chip {
  flex: 1; min-width: 0; min-height: 44px; padding: 4px 3px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: inherit; background: rgba(127, 110, 80, 0.12);
  border: 1px solid rgba(139, 114, 64, 0.6); border-radius: 6px; font: inherit;
}
.qs-chip b { font-size: 15px; line-height: 1; }
.qs-chip small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; opacity: 0.8; }
.qs-chip.dang { background: rgba(201, 164, 92, 0.35); border-color: #c9a45c; border-width: 2px; }
.tbtn.utility   { width: 48px; height: 48px; bottom: 212px; }
.target-touch   { right: 54px; }
.fly-touch      { right: 108px; }
.auto-touch     { right: 162px; }
.fishing-stop-touch {
  right: 216px;
  border-color: #d17d5b;
  background: linear-gradient(180deg, rgba(104, 48, 35, 0.96), rgba(57, 26, 22, 0.96));
}
.fishing-stop-touch .skill-glyph { color: #ffd0b7; font-size: 22px; line-height: 1; }
.fishing-stop-touch .skill-name { color: #ffd8c8; }
.meditate-touch { right: 0; }
.dosat-touch {
  border-color: #7a1a12;
  background: linear-gradient(180deg, rgba(58, 12, 9, 0.92), rgba(28, 8, 7, 0.94));
  overflow: hidden;
}
.dosat-touch .skill-glyph { color: #ff6a52; }
.dosat-touch .skill-name  { color: #ffb3a3; }
.dosat-touch.locked { opacity: 0.4; filter: grayscale(0.8); }
.dosat-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, rgba(255, 74, 45, 0.28), rgba(255, 45, 26, 0.62));
  pointer-events: none; z-index: 1;
}
.dosat-touch .skill-glyph,
.dosat-touch .skill-name { position: relative; z-index: 2; }
.dosat-touch.holding { border-color: #ff3a22; box-shadow: 0 0 10px rgba(255, 58, 34, 0.5); }
.dosat-touch.active {
  border-color: #ff2d1a;
  background: linear-gradient(180deg, rgba(120, 14, 8, 0.95), rgba(70, 10, 8, 0.96));
  animation: dosat-tho 1.1s ease-in-out infinite;
}
.dosat-touch.active .skill-glyph { color: #fff0ec; }
@keyframes dosat-tho {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 45, 26, 0.45); }
  50%      { box-shadow: 0 0 14px rgba(255, 45, 26, 0.85); }
}
.tbtn.utility .skill-key { display: none; }
.tbtn.utility .skill-glyph { inset: 2px 2px 11px; font-size: 17px; }
.tbtn.utility .skill-name { font-size: 8px; }
.skill-cooldown {
  position: absolute; inset: -2px; z-index: 5; border-radius: inherit;
  display: grid; place-items: center;
  color: #eaf6ff;
  background: conic-gradient(rgba(6, 10, 14, 0.76) calc(var(--cd, 0) * 360deg),
                             rgba(6, 10, 14, 0.14) 0);
  font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px #000;
}
#row-xp.full .fill.xp {
  background: linear-gradient(90deg, #e59a1c, #ffd45a 55%, #fff1b0);
  box-shadow: 0 0 7px rgba(255, 196, 64, 0.8);
  animation: xp-dinh-glow 1.8s ease-in-out infinite;
}
#row-xp.full > span {
  z-index: 2;
  color: #3a1f02;
  text-shadow: 0 0 2px rgba(255, 246, 204, 0.9), 0 1px 0 rgba(255, 240, 180, 0.7);
  letter-spacing: 0.04em;
}
#row-xp.full::after {
  content: ''; position: absolute; z-index: 1;
  top: 0; bottom: 0; left: 0; width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%,
              rgba(255, 255, 255, 0) 20%, rgba(255, 255, 240, 0.85) 50%,
              rgba(255, 255, 255, 0) 80%, transparent 100%);
  transform: translateX(-120%);
  animation: xp-dinh-song 2.2s ease-in-out infinite;
}
@keyframes xp-dinh-song {
  0%       { transform: translateX(-120%); }
  60%, 100% { transform: translateX(260%); }
}
@keyframes xp-dinh-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 196, 64, 0.6); }
  50%      { box-shadow: 0 0 10px rgba(255, 214, 90, 0.95); }
}
@media (prefers-reduced-motion: reduce) {
  #row-xp.full::after, #row-xp.full .fill.xp { animation: none; }
  #row-xp.full::after { display: none; }
}
#btn-target { border-color: #f7c822; color: #ffeaa0; }
.qs-o[data-hinh="loi_chuong"] {
  border-color: #5bd6e8; color: #eafcff;
  background: radial-gradient(circle at 35% 30%, rgba(46, 143, 176, 0.85), rgba(18, 44, 58, 0.92));
}
.qs-o[data-hinh="hoa_cau"] {
  border-color: #ff9a3c; color: #ffe7c2;
  background: radial-gradient(circle at 35% 30%, rgba(176, 63, 30, 0.88), rgba(58, 20, 12, 0.94));
}
.qs-o[data-hinh="phong_nhan"] {
  border-color: #9ff0c8; color: #e6fff2;
  background: radial-gradient(circle at 35% 30%, rgba(46, 130, 98, 0.86), rgba(16, 44, 33, 0.94));
}
.qs-o[data-hinh="bang_thau"] {
  border-color: #a9e4ff; color: #eafaff;
  background: radial-gradient(circle at 35% 30%, rgba(44, 116, 164, 0.86), rgba(15, 38, 56, 0.94));
}
.qs-o[data-hinh="dia_thich"] {
  border-color: #d9c08a; color: #f7ecd2;
  background: radial-gradient(circle at 35% 30%, rgba(122, 88, 52, 0.88), rgba(44, 30, 18, 0.94));
}
.qs-o[data-hinh="phu"] { border-color: rgba(255, 217, 120, 0.6); }
.qs-o[data-hinh="tran"] { border-color: rgba(240, 150, 90, 0.7); }
.qs-o.cooling {
  border-color: #5a5850; color: #b3aea2;
  background: radial-gradient(circle at 35% 30%, rgba(58, 56, 50, 0.85), rgba(24, 23, 20, 0.92));
}
#skill-test-panel {
  position: absolute; z-index: 150; top: 8px; left: 50%;
  width: min(760px, calc(100% - 190px)); transform: translateX(-50%);
  padding: 7px 9px 6px;
  color: #eadfbe; background: rgba(20, 17, 12, 0.94);
  border: 1px solid #8b7240; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  font-family: var(--font-ui); text-align: center;
}
.skill-test-title {
  margin-bottom: 5px; color: #f0d27a;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
}
.skill-test-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.skill-test-buttons button {
  padding: 5px 8px; color: #e9dfc6; background: #33291d;
  border: 1px solid #655237; cursor: pointer; font: inherit; font-size: 11px;
}
.skill-test-buttons button:hover { filter: brightness(1.22); }
.skill-test-buttons button.active {
  color: #21170e; background: #f0d27a; border-color: #fff0ac;
}
.skill-test-buttons button.active.cooling {
  color: #d8c9a4; background: #29241c; border-color: #8b7240;
  box-shadow: inset 0 -2px 0 rgba(240, 210, 122, 0.18);
}
.skill-test-buttons [data-passive-label] {
  display: inline-block; min-width: 58px; font-variant-numeric: tabular-nums;
}
.skill-test-buttons kbd {
  display: inline-grid; min-width: 17px; min-height: 17px; place-items: center;
  color: inherit; background: rgba(0, 0, 0, 0.18); border: 1px solid currentColor;
}
#skill-test-panel small {
  display: block; margin-top: 5px; color: #b9aa88; font-size: 10px;
}
.tbtn.pressed { transform: scale(0.9); filter: brightness(1.3); }
.tbtn.active { border-color: var(--jade); filter: brightness(1.3); }
.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: transparent;
  backdrop-filter: none;
  z-index: 200;
  overflow: auto;
}
.scroll-panel {
  position: relative;
  width: min(920px, 100%);
  max-height: calc(var(--ui-vh) * 0.94);
  overflow: auto;
  padding: 22px 26px 26px;
  color: #e6dac2 !important;
  background: radial-gradient(ellipse at 50% 0, rgba(186,151,93,.14), transparent 70%),
    linear-gradient(160deg, #403226, #30251b 70%, #292017) !important;
  border: 1px solid #a5844f !important;
  border-radius: 3px !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.56), inset 0 0 0 3px #1d150e, inset 0 0 0 4px rgba(188,151,91,.38) !important;
  border-color: #c2a36b !important;
}
.scroll-panel.narrow { width: min(460px, 100%); text-align: center; }
#menu {
  padding: max(12px, env(safe-area-inset-top))
           max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom))
           max(12px, env(safe-area-inset-left));
  background: transparent;
  backdrop-filter: none;
}
#menu > .menu-panel {
  width: min(560px, calc(100% - 8px));
  max-height: min(720px, calc(100% - 8px));
  overflow: auto;
  padding: 18px;
  color: #e7dac0;
  background: radial-gradient(ellipse at 50% 0, rgba(189,153,91,.10), transparent 70%),
    linear-gradient(155deg,#403225,#2a2119 76%);
  border: 1px solid rgba(201, 164, 92, 0.9);
  border-radius: 3px;
  box-shadow: 0 14px 36px rgba(0,0,0,.54), inset 0 0 0 1px rgba(13,9,6,.78), inset 0 1px rgba(240,216,173,.1);
  border-color: rgba(184,150,90,.75);
}
#menu > .menu-panel::before,
#menu > .menu-panel::after { display: none; }
#menu .menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 12px;
  border-bottom: 1px solid rgba(201, 164, 92, 0.35);
  border-color: rgba(190,157,100,.34);
}
#menu .menu-head h2 {
  margin: 0 0 4px;
  color: #f0d68f;
  font-size: clamp(20px, 4vw, 27px);
  letter-spacing: 0.12em;
}
#menu .menu-player {
  margin: 0;
  color: #bcd3bd;
  font-size: 12px;
  letter-spacing: 0.04em;
}
#menu .menu-hint {
  flex: none;
  padding: 4px 7px;
  color: #c9a45c;
  border: 1px solid rgba(201, 164, 92, 0.5);
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
}
#menu #menu-resume {
  min-height: 52px;
  margin: 14px 0 12px;
  border-radius: 5px;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}
#menu .menu-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#menu .menu-settings-grid .btn-sub {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 10px 12px;
  color: #f2ead6;
  background: rgba(22,16,11,.40);
  border-color: rgba(201, 164, 92, 0.56);
  border-radius: 5px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-align: left;
}
#menu .menu-settings-grid .btn-sub:hover,
#menu .menu-settings-grid .btn-sub:focus-visible {
  background: rgba(76, 103, 79, 0.96);
  border-color: #c9a45c;
}
#menu .menu-logout {
  min-height: 44px;
  margin: 12px 0 0;
  color: #ffd7cf;
  background: rgba(91, 35, 29, 0.9);
  border-color: rgba(211, 107, 92, 0.78);
  border-radius: 5px;
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
}
#menu .menu-logout:hover,
#menu .menu-logout:focus-visible {
  color: #fff0eb;
  background: rgba(117, 43, 35, 0.98);
  border-color: #e08a79;
}
#menu .account-email-link { margin: 10px 0 0; color: #e8dcc4; }
#menu .account-email-open { width: 100%; }
#menu .account-email-done {
  margin: 0;
  padding: 9px 12px;
  color: #a9e0b5;
  font-size: 12px;
  background: rgba(22, 16, 11, .38);
  border: 1px solid rgba(201, 164, 92, .45);
  border-radius: 5px;
}
#menu .account-email-form {
  margin: 0;
  padding: 10px 12px 11px;
  background: rgba(22, 16, 11, .38);
  border: 1px solid rgba(201, 164, 92, .45);
  border-radius: 5px;
}
#menu .account-email-help {
  margin: 0 0 8px;
  color: #c8b99f;
  font-size: 11px;
  line-height: 1.45;
}
#menu .account-email-row { display: flex; gap: 8px; margin: 0 0 8px; }
#menu .account-email-row input { flex: 1 1 auto; min-width: 0; }
#menu .account-email-row .btn-sub { flex: 0 0 112px; width: 112px; }
#menu .account-email-form input {
  display: block;
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  padding: 7px 9px;
  color: #f5ead2;
  background: rgba(8, 7, 5, .55);
  border: 1px solid rgba(201, 164, 92, .55);
  border-radius: 3px;
  font: inherit;
  font-size: 12px;
}
#menu .account-email-form > input { margin: 0 0 8px; }
#menu .account-email-form input:focus {
  outline: 2px solid rgba(200, 168, 100, .5);
  outline-offset: 1px;
}
#menu .account-email-form .btn-sub {
  min-height: 38px;
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
}
#menu .account-email-form input.hidden { display: none; }
#menu .account-email-msg {
  min-height: 0;
  margin: 6px 0 0;
  color: #d8c6a5;
  font-size: 11px;
  line-height: 1.4;
}
#menu .account-email-msg:empty { display: none; }
#menu .account-email-msg.is-ok { color: #a9e0b5; }
#menu .account-email-msg.is-error { color: #f0aaa0; }
#menu .account-email-link.is-busy { opacity: .8; }
@media (max-width: 520px) {
  #menu > .menu-panel { padding: 14px; }
  #menu .menu-settings-grid { gap: 6px; }
  #menu .menu-settings-grid .btn-sub {
    min-height: 52px;
    padding: 9px 10px;
    font-size: 11px;
  }
}
.scroll-panel::before,
.scroll-panel::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 7px;
  background: linear-gradient(90deg, var(--wood-dark), var(--wood) 45%, var(--wood-dark));
}
.scroll-panel::before { left: 0; }
.scroll-panel::after  { right: 0; }
.overlay.trong { background: none; backdrop-filter: none; }
.overlay.trong > .scroll-panel { box-shadow: var(--shadow), 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(201, 164, 92, 0.6); }
.overlay.choice-only {
  padding: 12px;
  background: transparent;
  backdrop-filter: none;
  pointer-events: auto;
}
.overlay.choice-only > .scroll-panel {
  width: min(430px, calc(100% - 24px));
  padding: 10px;
  pointer-events: auto;
  background: rgba(24, 17, 10, 0.95);
  border: 1px solid rgba(201, 164, 92, 0.72);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.62),
              inset 0 0 0 1px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(255, 242, 190, 0.08);
}
.overlay.choice-only > .scroll-panel::before,
.overlay.choice-only > .scroll-panel::after,
.overlay.choice-only #dialog-title,
.overlay.choice-only #dialog-text,
.overlay.choice-only #dialog-reward,
.overlay.choice-only #dialog-action,
.overlay.choice-only #dialog-close {
  display: none !important;
}
.overlay.choice-only #dialog-choices { margin: 0; }
.overlay.choice-only .dlg-choices .btn-choice {
  position: relative;
  min-height: 66px;
  margin: 4px 0;
  padding: 11px 34px 11px 12px;
  gap: 10px;
  color: var(--parchment);
  background: linear-gradient(135deg, rgba(70, 96, 75, 0.99), rgba(38, 57, 44, 0.99));
  border-color: rgba(201, 164, 92, 0.78);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 245, 205, 0.11),
              0 3px 8px rgba(0, 0, 0, 0.24);
  transition: filter 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.overlay.choice-only .dlg-choices .btn-choice::after {
  content: '›';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-54%);
  color: #e8d49c;
  font-size: 25px;
  line-height: 1;
  opacity: 0.82;
}
.overlay.choice-only .dlg-choices .btn-choice:first-child {
  background: linear-gradient(135deg, rgba(92, 61, 55, 0.99), rgba(53, 38, 34, 0.99));
  border-color: rgba(215, 157, 111, 0.86);
}
.overlay.choice-only .dlg-choices .btn-choice:nth-child(2) {
  background: linear-gradient(135deg, rgba(70, 96, 75, 0.99), rgba(38, 57, 44, 0.99));
}
.overlay.choice-only .dlg-choices .btn-choice:hover {
  filter: brightness(1.14);
  box-shadow: inset 0 1px 0 rgba(255, 245, 205, 0.16),
              0 5px 12px rgba(0, 0, 0, 0.32);
}
.overlay.choice-only .dlg-choices .btn-choice:focus-visible {
  outline: 2px solid #f1d47f;
  outline-offset: 2px;
}
.overlay.choice-only .dlg-choices .btn-choice canvas {
  width: 34px;
  height: 34px;
}
.overlay.choice-only .dlg-choices .btn-choice > span:not(.c-note) {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  letter-spacing: 0.045em;
  line-height: 1.25;
}
.overlay.choice-only .dlg-choices .btn-choice .c-note {
  flex: 0 1 48%;
  margin: 0;
  color: #c4d9c4;
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
  opacity: 0.94;
  font-variant-numeric: tabular-nums;
}
.overlay.choice-only .dlg-choices .btn-choice[disabled] {
  opacity: 0.48;
  filter: saturate(0.55);
  box-shadow: none;
}
.overlay.choice-only .dlg-choices .btn-choice[disabled]::after {
  content: '×';
  color: #d0b6a6;
}
@media (max-width: 520px) {
  .overlay.choice-only .dlg-choices .btn-choice .c-note {
    flex: 1 1 100%;
    margin-left: 44px;
    text-align: left;
  }
}
.hanh-trang-panel {
  width: var(--hud-w); height: var(--hud-h); max-height: var(--hud-h);
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; overflow: hidden;
}
.panel-x {
  position: absolute; top: 8px; right: 10px; z-index: 3;
  width: 26px; height: 26px; padding: 0; line-height: 1;
  color: #d9c7a4; background: rgba(12,9,6,.28);
  border: 1px solid rgba(75, 49, 25, 0.35); border-radius: 3px;
  font-size: 13px; cursor: pointer;
  border-color: rgba(189,155,98,.52);
}
.panel-x:hover { color: var(--blood); border-color: var(--blood); }
.panel-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bag-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 0 34px 8px 5px; border-bottom: 1px solid rgba(75, 49, 25, 0.28);
  border-color: rgba(194,160,102,.34);
  position: relative;
  background: linear-gradient(180deg, rgba(62,47,32,.98), rgba(48,37,26,.97));
  border-bottom-color: rgba(197,168,110,.58);
}
.bag-head h2 { margin-bottom: 0; font-size: 18px; color: #f0dfba; text-shadow: 0 -1px 0 rgba(255,244,214,.46), 0 1px 0 #20160d, 0 2px 2px rgba(0,0,0,.78), 0 0 12px rgba(196,157,87,.16); }
.bag-head-stats { display: flex; align-items: flex-start; gap: 8px; flex: none; font-size: 13px !important; }
.bag-head-stats .wallet {
  margin: 4px 0 0; padding: 4px 7px;
  color: #e0d1b5; background: rgba(73, 52, 29, 0.08);
  border: 1px solid rgba(75, 49, 25, 0.28); border-radius: 2px;
  white-space: nowrap;
  background-color: rgba(18,13,9,.40);
  border-color: rgba(177,143,86,.40);
}
.bag-head-stats .wallet .wallet-label { flex: none; }
.bag-head-stats .wallet strong { color: #f2dfb5; }
.bag-count {
  flex: none; margin-top: 4px; padding: 4px 7px;
  color: #e0d1b5 !important; background: #4b3724; border: 1px solid #8f6b38;
  font-size: 13px !important; font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
  background-color: rgba(18,13,9,.40) !important;
  border-color: rgba(177,143,86,.40) !important;
}
.ht-than {
  display: flex; gap: 12px; margin-top: 12px; align-items: stretch;
  flex: 1 1 auto; min-height: 0;
  font-size: 13px !important;
  background-color: rgba(18,13,9,.40);
  border-color: rgba(177,143,86,.40);
  color: #d2c1a0;
}
.ht-rail { flex: 0 0 118px; display: flex; flex-direction: column; gap: 4px; }
.ht-muc {
  width: 100%; min-height: 34px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 7px 9px; text-align: left; cursor: pointer;
  font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.05em;
  color: #e5d6ba; background: linear-gradient(180deg, rgba(84,65,44,.74), rgba(46,35,24,.88));
  border: 1px solid rgba(75, 49, 25, 0.28); border-radius: 2px;
  border-color: rgba(192,158,98,.48);
  text-shadow: 0 -1px rgba(255,239,205,.28), 0 1px 2px rgba(0,0,0,.82);
}
.ht-muc:hover { background: linear-gradient(180deg, rgba(111,87,55,.9), rgba(59,45,29,.96)); color: #fff0ca; }
.ht-muc.on {
  color: #fff0c9; background: linear-gradient(180deg, #75613d, #4b3925);
  border-color: #c6a667;
  box-shadow: inset 0 1px rgba(255,241,207,.23), 0 2px 5px rgba(0,0,0,.38);
}
.ht-muc:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; color: #fff0ca; background: linear-gradient(180deg, rgba(111,87,55,.9), rgba(59,45,29,.96)); }
.ht-zalo {
  margin-top: 10px; text-decoration: none;
}
.ht-menu { margin-top: 0; }
.ht-rail > .ht-muc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-chinh {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(75, 49, 25, 0.4) transparent;
}
.td-uu-tien { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.td-uu-tien button {
  flex: 1 1 0; min-width: 64px; min-height: 30px; padding: 4px 8px;
  font-family: var(--font-serif); font-size: 12px; cursor: pointer;
  color: #e8d6ab; background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(201, 164, 92, 0.35); border-radius: 3px;
}
.td-uu-tien button:hover:not(.on) { background: rgba(201, 164, 92, 0.2); color: #fff3d4; }
.td-uu-tien button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.td-uu-tien button.on {
  color: #2a1a08; background: linear-gradient(180deg, #e9c877, #c9a45c);
  border-color: #f0d48a; font-weight: 700;
}
.td-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.td-o {
  position: relative; min-height: 86px; padding: 14px 6px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: pointer; color: var(--parchment);
  background: linear-gradient(180deg, rgba(62, 48, 33, 0.95), rgba(32, 24, 17, 0.97));
  border: 1px solid rgba(201, 164, 92, 0.5); border-radius: 4px;
  transition: filter 120ms ease, transform 70ms ease, opacity 120ms ease;
}
.td-o:hover { filter: brightness(1.15); }
.td-o:active { transform: translateY(1px); }
.td-o:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.td-hotbar-toggle {
  position: absolute; top: 4px; right: 4px; z-index: 1;
  min-width: 30px; height: 24px; padding: 0 4px;
  color: #fff3d6; background: rgba(96, 70, 32, 0.95);
  border: 1px solid rgba(201, 164, 92, 0.7); border-radius: 3px;
  font-family: var(--font-serif); font-size: 10px; line-height: 1; cursor: pointer;
}
.td-hotbar-toggle:hover { background: rgba(151, 113, 56, 0.95); color: #fff3d4; }
.td-hotbar-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.td-hotbar-toggle:disabled { opacity: 0; pointer-events: none; }
.td-hinh { font-size: 24px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.td-ten {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; color: #f3e6c6;
}
.td-nhan {
  margin-top: 2px; padding: 1px 6px; border-radius: 8px;
  font-size: 9px; letter-spacing: 0.04em; white-space: nowrap;
  color: #d6c49f; background: rgba(0, 0, 0, 0.3);
}
.td-o.dung { border-color: #6fbf7a; box-shadow: inset 0 0 0 1px rgba(111, 191, 122, 0.35); }
.td-o.dung .td-nhan { color: #10240f; background: #8fe39a; }
.td-o.bo { opacity: 0.8; border-color: rgba(154, 163, 173, 0.45); }
.td-o.bo .td-hinh { color: #9aa3ad !important; }
.td-o.bo::after {
  content: ''; position: absolute; left: 10px; right: 10px; top: 42%;
  height: 1px; background: rgba(214, 196, 159, 0.5);
}
.td-o.an-thanh { border-color: rgba(155, 132, 91, 0.55); opacity: 0.85; }
.td-o.an-thanh .td-hotbar-toggle { color: #ffe4a3; background: rgba(82, 61, 32, 0.95); }
.td-doi {
  display: flex; gap: 4px; width: 100%; margin-top: 5px;
  padding-top: 5px; border-top: 1px solid rgba(201, 164, 92, 0.18);
}
.td-doi-nut {
  flex: 1 1 0; min-height: 24px; padding: 0;
  font-size: 11px; line-height: 1; cursor: pointer;
  color: #e8d6ab; background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(201, 164, 92, 0.35); border-radius: 3px;
}
.td-doi-nut:hover:not(:disabled) { background: rgba(201, 164, 92, 0.25); color: #fff3d4; }
.td-doi-nut:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.td-doi-nut:disabled { opacity: 0.25; cursor: default; }
.td-o[draggable="true"] { cursor: grab; }
.td-o.dang-keo { opacity: 0.35; cursor: grabbing; }
.td-o.dich { outline: 2px dashed var(--gold); outline-offset: 2px; filter: brightness(1.2); }
.td-thao-tac { display: flex; justify-content: flex-end; margin-top: 8px; }
.td-goc {
  padding: 4px 10px; font-size: 11px; cursor: pointer;
  color: #e7ceb1; background: rgba(201, 164, 92, 0.25);
  border: 1px solid rgba(75, 49, 25, 0.35); border-radius: 3px;
}
.td-goc:hover:not(:disabled) { background: rgba(201, 164, 92, 0.45); }
.td-goc:disabled { opacity: 0.4; cursor: default; }
.td-o.khoa { opacity: 0.4; cursor: default; }
.td-o.khoa .td-hinh { color: #6b6152 !important; }
.td-o.trong { opacity: 0.3; cursor: default; border-style: dashed; }
@media (max-width: 520px) {
  .td-list { gap: 6px; }
  .td-o { min-height: 74px; padding: 12px 3px 6px; }
  .td-hinh { font-size: 20px; }
  .td-ten { font-size: 10px; }
  .td-nhan { padding: 1px 4px; letter-spacing: 0; font-size: 8px; }
  .td-doi-nut { min-height: 28px; font-size: 12px; }
}
.ht-chinh::-webkit-scrollbar { width: 6px; }
.ht-chinh::-webkit-scrollbar-thumb { background: rgba(75, 49, 25, 0.35); border-radius: 3px; }
.ht-rail {
  align-self: stretch; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; touch-action: pan-y;
  scrollbar-width: none;
}
.ht-rail::-webkit-scrollbar { display: none; }
@media (min-width: 761px) { .ht-rail > .ht-muc { flex-shrink: 0; } }
@media (orientation: landscape) and (max-height: 520px) and (min-width: 761px) {
  .ht-rail > .ht-muc { min-height: 30px; padding: 5px 8px; font-size: 12px; }
  .ht-zalo { margin-top: 6px; }
}
.bag-shell {
  display: grid; grid-template-columns: minmax(190px, 0.78fr) minmax(230px, 1.22fr);
  gap: 12px; margin: 0 0 8px;
}
.equipment-pane, .inventory-pane { min-width: 0; }
.equipment-pane h3, .inventory-pane h3 { font-size: 13px; letter-spacing: 0.08em; }
.inventory-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.inventory-head span { color: #7d6748; font-size: 10px; }
.equipment-board {
  position: relative; height: 222px; margin-top: 6px; overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(93, 125, 88, 0.28), transparent 45%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 4px),
    #2d241b;
  border: 2px solid #6f5432;
  box-shadow: inset 0 0 0 1px #15100b, inset 0 0 24px rgba(0, 0, 0, 0.55);
}
#equipment-avatar {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: 54px; height: 81px; transform: translate(-50%, -50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.65));
}
.equip-slot {
  position: absolute; z-index: 2; width: 44px; height: 44px; padding: 0;
  color: #e0d1b5; background: linear-gradient(180deg, #3e3021, #201811);
  border: 2px solid #705632; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #17100b, 0 3px 7px rgba(0, 0, 0, 0.45);
  cursor: pointer; transition: filter 140ms ease, transform 80ms ease;
  background-color: rgba(18,13,9,.40);
  border-color: rgba(177,143,86,.40);
}
.equip-slot:hover { filter: brightness(1.25); }
.equip-slot:active { transform: translateY(1px); }
.equip-slot:focus-visible { outline: 2px solid #d5b56d; outline-offset: 2px; }
.equip-slot canvas { width: 35px; height: 35px; image-rendering: pixelated; }
.equip-slot small {
  position: absolute; left: -4px; right: -4px; bottom: -13px;
  color: #f0e3c7; font-size: 10px; line-height: 12px; white-space: nowrap;
  text-shadow: 0 1px 1px #000;
}
.equip-slot .slot-mark { color: #d6c39f; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; }
.equip-vu_khi   { left: 10px;  top: 6px; }
.equip-giap     { left: 10px;  top: 82px; }
.equip-phap_boi { left: 10px;  top: 158px; }
.equip-phi_hanh { right: 10px; top: 6px; }
.equip-ao       { right: 10px; top: 82px; }
.equip-nhan     { right: 10px; top: 158px; }
.equip-mu   { left: 50%; top: 6px; transform: translateX(-50%); }
.equip-giay { left: 50%; top: 158px; transform: translateX(-50%); }
.equip-mu:active, .equip-giay:active { transform: translateX(-50%) translateY(1px); }
.equip-slot.grade-fine, .bag-slot.grade-fine { border-color: #79a477; }
.equip-slot.grade-spirit, .bag-slot.grade-spirit { border-color: #5bb4bd; }
.equip-slot.grade-earth, .bag-slot.grade-earth { border-color: #8b65b5; }
.equipment-summary {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 6px;
}
.equipment-summary span {
  padding: 3px 1px; text-align: center; color: #d8c8aa;
  background: rgba(73, 52, 29, 0.08); border: 1px solid rgba(73, 52, 29, 0.22);
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.equipment-summary i { display: block; font-style: normal; color: #c4b08a; }
.equipment-summary b { display: block; margin-top: 1px; color: #a9c38e; }
.bag-filters {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  margin: 6px 0 8px;
}
.bag-filter {
  min-width: 0; padding: 5px 2px; cursor: pointer;
  color: #e0d1b5; background: rgba(73, 52, 29, 0.08);
  border: 1px solid rgba(75, 49, 25, 0.35); border-radius: 2px;
  font-family: var(--font-serif); font-size: 13px !important; font-weight: 700;
  white-space: nowrap;
  background-color: rgba(18,13,9,.40);
  border-color: rgba(177,143,86,.40);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, filter .16s ease;
}
.bag-filter:hover { background: rgba(73, 52, 29, 0.17); }
.bag-filter.on { color: #f2dfb5; background: rgba(103,119,91,.46) !important; border-color: #ab9869 !important; }
.bag-filter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bag-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin: 6px 0;
}
.bag-slot {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  color: #e0d1b5;
  font: inherit;
  background: linear-gradient(180deg, rgba(57, 43, 30, 0.12), rgba(57, 43, 30, 0.24));
  border: 1px solid var(--wood);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background-color: rgba(18,13,9,.40) !important;
  border-color: rgba(177,143,86,.40) !important;
}
.bag-slot.empty { cursor: default; opacity: 0.45; }
.bag-slot:hover    { border-color: var(--gold); }
.bag-slot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bag-slot.selected { border-color: var(--jade); box-shadow: inset 0 0 0 1px var(--jade); }
.bag-slot canvas   { width: 100%; height: 100%; image-rendering: pixelated; }
.bag-qty {
  position: absolute; right: 2px; bottom: 1px;
  font-size: 9px; font-weight: 700; line-height: 1.3;
  color: var(--parchment);
  background: rgba(28, 22, 16, 0.85);
  padding: 0 3px; border-radius: 2px;
}
.bag-detail {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding: 14px; text-align: left;
  background: rgba(23, 18, 12, 0.6);
}
.bag-detail-card {
  position: relative; width: min(370px, 100%); max-height: 100%;
  overflow-y: auto; padding: 18px;
  color: #e0d1b5; background: var(--parchment);
  border: 2px solid var(--wood); border-radius: 3px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(201,164,92,0.6);
  background-color: rgba(18,13,9,.40);
  border-color: rgba(177,143,86,.40);
}
.bag-detail-head { display: flex; align-items: center; gap: 12px; padding-right: 25px; }
.bag-detail-icon {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center;
  background: #2d241b; border: 2px solid #705632; border-radius: 3px;
}
.bag-detail-icon.grade-fine { border-color: #79a477; }
.bag-detail-icon.grade-spirit { border-color: #5bb4bd; }
.bag-detail-icon.grade-earth { border-color: #8b65b5; }
.bag-detail-icon.grade-fine { border-color: #79a477; }
.bag-detail-icon.grade-spirit { border-color: #5bb4bd; }
.bag-detail-icon.grade-earth { border-color: #8b65b5; }
.bag-detail-icon canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.bag-detail h3 { margin: 0; font-family: var(--font-serif); font-size: 19px; line-height: 1.2; }
.bag-detail-meta { color: #d2c1a0; font-size: 11px; line-height: 1.5; }
.bag-detail p { margin: 12px 0; color: #d2c1a0; font-size: 12px; line-height: 1.55; }
.bag-detail .item-bonuses { margin-top: 10px; color: #c4d0a7; font-size: 12px; font-weight: 700; }
.bag-detail .item-require { margin-top: 6px; color: #edb5a3; font-size: 12px; font-weight: 700; }
.bag-detail .item-require.met { color: #badec2; }
.bag-detail .item-require.item-bound { color: #cbb7e1; }
.bag-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.equip-action {
  flex: 1 1 95px; min-height: 34px; padding: 5px 8px;
  cursor: pointer;
  color: #f5e8c9; background: linear-gradient(180deg, #5d7b56, #38513c);
  border: 1px solid #29432f; border-radius: 2px;
  font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.06em;
}
.equip-action.secondary { color: #4b3724; background: #e0d3b4; border-color: #927954; }
.equip-action.danger { color: #f5e8c9; background: #805044; border-color: #683a31; }
.equip-action:disabled { opacity: 0.55; cursor: default; }
.equip-action:hover { filter: brightness(1.12); }
.equip-action:active { transform: translateY(1px); }
.bag-detail-note { font-size: 11px; color: #e1c0b7; }
#bag { z-index: 210; }
#skill-pop { z-index: 220; }
.skill-list { margin: 0; text-align: left; }
.skill-group {
  margin: 14px 2px 6px; padding-bottom: 4px;
  color: var(--blood); font-size: 12px; letter-spacing: 0.16em;
  border-bottom: 1px solid rgba(75, 49, 25, 0.28);
}
.skill-group:first-child { margin-top: 0; }
.skill-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin: 5px 0; padding: 8px 10px;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  background: rgba(18, 13, 9, 0.34);
  border: 1px solid rgba(75, 49, 25, 0.32); border-radius: 3px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}
.skill-row:hover { border-color: var(--gold); background: rgba(18, 13, 9, 0.42); }
.skill-row:active { transform: translateY(1px); }
.skill-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.skill-row.equipped { border-color: var(--jade); box-shadow: inset 0 0 0 1px var(--jade); }
.skill-row.unready { background: rgba(216, 178, 106, 0.16); }
.skill-row.locked { opacity: 0.55; }
.skill-row-icon {
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #4a3a26, #1d160f 72%);
  border: 1px solid #705632; border-radius: 3px;
  font-family: Georgia, serif; font-size: 21px; line-height: 1;
  text-shadow: 0 0 6px currentColor;
}
.skill-row-icon .skill-art-icon {
  width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated;
}
.skill-row-icon canvas.skill-art-icon { width: 32px; height: 32px; }
.skill-row.locked .skill-row-icon { filter: grayscale(0.85); }
.skill-row-main { flex: 1 1 auto; min-width: 0; }
.skill-row-main b {
  display: block; font-family: var(--font-serif); font-size: 15px; color: var(--ink-light);
}
.skill-row-main em {
  margin-left: 7px; font-style: normal; font-size: 10px; letter-spacing: 0.08em;
  color: var(--ink-light-soft);
}
.skill-row-main small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  margin-top: 2px; overflow: hidden;
  color: var(--ink-light-soft); font-size: 11px; line-height: 1.4;
}
.skill-row.unready .skill-row-main small { color: #e8b877; }
.skill-row-side {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.skill-row-side kbd {
  display: inline-grid; min-width: 20px; min-height: 18px; place-items: center;
  padding: 0 4px;
  color: #f3e6c6; background: #4b3724; border: 1px solid #8f6b38; border-radius: 2px;
  font: 700 10px/1 var(--font-ui);
}
.skill-row-side i {
  font-style: normal; font-size: 10px; letter-spacing: 0.05em; color: var(--ink-light-soft);
}
.skill-row.equipped .skill-row-side i { color: #badec2; font-weight: 700; }
.skill-tick {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 3px 7px; border: 1px solid #8f6b38; border-radius: 3px;
  background: rgba(75, 55, 36, 0.55);
  font-size: 11px; color: #f3e6c6; user-select: none;
}
.skill-tick input { width: 15px; height: 15px; margin: 0; accent-color: #7fbf8a; cursor: pointer; }
.skill-row.equipped .skill-tick { border-color: var(--jade); color: #badec2; font-weight: 700; }
.skill-tick.off { opacity: 0.5; cursor: not-allowed; }
.skill-tick.off input { cursor: not-allowed; }
.scroll-panel.skill-pop-panel { text-align: left; }
.skill-pop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.skill-pop-glyph {
  flex: none; width: 52px; height: 52px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #4a3a26, #1d160f 72%);
  border: 2px solid #705632; border-radius: 4px;
  font-family: Georgia, serif; font-size: 28px; line-height: 1;
  text-shadow: 0 0 8px currentColor;
}
.skill-pop-glyph .skill-art-icon {
  width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated;
}
.skill-pop-glyph canvas.skill-art-icon { width: 40px; height: 40px; }
.skill-pop-head h2 { margin-bottom: 2px; font-size: 20px; }
.skill-pop-tags { margin: 0; color: var(--blood); font-size: 11px; letter-spacing: 0.06em; }
.skill-pop-desc { margin: 0 0 10px; }
.skill-stats {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  margin: 0 0 10px; padding: 9px 11px;
  background: rgba(57, 43, 30, 0.1); border: 1px solid rgba(75, 49, 25, 0.28);
}
.skill-stats dt { color: #826843; font-size: 11px; letter-spacing: 0.05em; }
.skill-stats dd {
  margin: 0; color: var(--ink-light); font-size: 12px; font-variant-numeric: tabular-nums;
}
.skill-pop-warn {
  margin: 0 0 8px; padding: 7px 9px;
  color: #8a5a22; background: rgba(216, 178, 106, 0.2);
  border-left: 3px solid #c9a45c; font-size: 12px; line-height: 1.5;
}
.skill-pop-note { margin: 0 0 12px; color: var(--ink-light-soft); font-size: 11px; line-height: 1.5; }
#downed {
  z-index: 260;
  background:
    radial-gradient(ellipse at center, rgba(74, 8, 8, 0.26), rgba(6, 4, 3, 0.62) 72%);
  backdrop-filter: none;
}
.downed-panel {
  width: min(270px, calc(100% - 24px));
  padding: 11px 12px 10px;
  text-align: center;
  color: #e8dcc8;
  background: linear-gradient(180deg, rgba(38, 20, 18, 0.94), rgba(19, 12, 11, 0.96));
  border: 1px solid #7d2b2b;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(224, 120, 120, 0.18);
}
.downed-mark {
  margin-bottom: 0;
  color: #c0392b; font-size: 20px; line-height: 0.9;
  text-shadow: 0 0 18px rgba(192, 57, 43, 0.75);
}
#downed-title {
  margin: 0 0 6px;
  font-family: var(--font-serif); font-size: 16px; letter-spacing: 0.12em;
  color: #e8695e;
  text-shadow: 0 1px 0 #000, 0 0 14px rgba(192, 57, 43, 0.38);
}
.downed-tale {
  display: none;
}
.downed-timer {
  margin: 0 0 8px; padding: 4px 2px;
  color: #9a8a72; font-size: 10px; letter-spacing: 0.02em;
  border-top: 1px solid rgba(125, 43, 43, 0.5);
  border-bottom: 1px solid rgba(125, 43, 43, 0.5);
}
.downed-timer b {
  color: #f0b26a; font-variant-numeric: tabular-nums; font-size: 11px;
}
.downed-btn {
  display: block; width: 100%; margin: 4px 0; padding: 7px 9px;
  text-align: center; cursor: pointer;
  color: #e9dcc4;
  background: linear-gradient(180deg, rgba(72, 40, 33, 0.95), rgba(41, 24, 20, 0.96));
  border: 1px solid #8a4a38; border-radius: 3px;
  transition: filter 0.15s ease, transform 0.08s ease, border-color 0.15s ease;
}
.downed-btn b {
  display: block;
  font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.04em;
}
.downed-btn small {
  display: none;
}
.downed-btn:hover { filter: brightness(1.18); border-color: #c9a45c; }
.downed-btn:active { transform: translateY(1px); }
.downed-btn:disabled { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; transform: none; }
.downed-btn:focus-visible { outline: 2px solid #c9a45c; outline-offset: 2px; }
.downed-btn.primary {
  color: #f2ead6;
  background: linear-gradient(180deg, #4b6b52, #2c4535);
  border-color: #6d9070;
}
.downed-btn.primary small { color: #bcd3bd; }
.downed-btn.ghost {
  background: rgba(0, 0, 0, 0.28); border-color: #5d4a40; color: #b6a48d;
}
.downed-btn.ghost small { color: #86735f; }
#downed-badge {
  position: absolute; z-index: 250;
  left: 50%; top: max(10px, env(safe-area-inset-top));
  transform: translateX(-50%);
  padding: 6px 14px;
  color: #ffd7cf;
  background: linear-gradient(180deg, rgba(122, 30, 30, 0.95), rgba(58, 14, 14, 0.96));
  border: 1px solid #c0392b; border-radius: 3px;
  font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  animation: downed-pulse 1.9s ease-in-out infinite;
}
#downed-badge.hidden { display: none; }
#downed-badge:hover { filter: brightness(1.2); }
@keyframes downed-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
.scroll-panel h1, .scroll-panel h2, .scroll-panel h3 {
  font-family: var(--font-serif);
  color: var(--ink-light);
  margin: 0;
}
.scroll-panel h2 { font-size: 22px; letter-spacing: 0.1em; margin-bottom: 10px; color: #e6ce9c; }
.scroll-panel p  { color: var(--ink-light-soft); line-height: 1.65; font-size: 14px; }
#dialog-text { white-space: pre-line; text-align: left; margin: 6px 4px 18px; }
#dialog > .scroll-panel {
  width: min(520px, calc(100% - 24px));
  padding: 20px 22px 16px;
}
#dialog > .scroll-panel::before,
#dialog > .scroll-panel::after { display: none; }
#dialog #dialog-title { margin-bottom: 8px; }
#dialog #dialog-text {
  margin: 0 auto 16px;
  max-width: 48ch;
  text-align: center;
  line-height: 1.45;
  color: #e5dac2;
}
#dialog .dlg-choices {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
}
#dialog .dlg-choices .btn-choice {
  min-height: 54px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 5px;
  color: #f0e6d2;
  text-shadow: 0 1px 2px rgba(0,0,0,.82);
}
#dialog #dialog-close { margin-top: 8px; color: #302114; background: linear-gradient(180deg, #e4d5b1, #cbb78a); border-color: #8c7045; opacity: 1; font-weight: 700; text-shadow: none; }
#dialog.dialog-action-first > .scroll-panel {
  display: flex;
  flex-direction: column;
}
#dialog.dialog-action-first #dialog-title { order: 1; }
#dialog.dialog-action-first #dialog-text { order: 2; }
#dialog.dialog-action-first #dialog-reward { order: 3; }
#dialog.dialog-action-first #dialog-action {
  order: 4;
  position: relative;
  margin: 2px 0 10px;
  border-color: #9ab27b;
  color: #fff0cb;
  background: linear-gradient(180deg, #52785a, #34523d);
  box-shadow: 0 0 0 1px rgba(255, 236, 154, 0.46),
              0 0 14px rgba(246, 204, 96, 0.62),
              inset 0 1px 0 rgba(255, 249, 200, 0.36);
  animation: dialog-turn-in-pulse 1.8s ease-in-out infinite;
  opacity: 1;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.95);
}
#dialog.dialog-action-first #dialog-choices { order: 5; }
#dialog.dialog-action-first #dialog-close { order: 6; }
@keyframes dialog-turn-in-pulse {
  0%, 100% { filter: brightness(1); transform: translateY(0); }
  50% { filter: brightness(1.12); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  #dialog.dialog-action-first #dialog-action { animation: none; }
}
@media (max-width: 520px) {
  #dialog { padding: 12px; }
  #dialog > .scroll-panel {
    width: min(480px, calc(100vw - 24px));
    padding: 18px 16px 14px;
  }
  #dialog .dlg-choices .btn-choice {
    min-height: 52px;
    font-size: 13px;
  }
}
.btn-main, .btn-sub, .btn-enter {
  font-family: var(--font-serif);
  cursor: pointer;
  border-radius: 2px;
  transition: filter 0.15s ease, transform 0.08s ease;
}
.btn-main {
  display: block; width: 100%;
  margin: 6px 0;
  padding: 11px 18px;
  font-size: 15px; letter-spacing: 0.12em;
  color: var(--parchment);
  background: linear-gradient(180deg, #4b6b52, #2f4735);
  border: 1px solid var(--wood);
}
.btn-sub {
  display: block; width: 100%;
  margin: 6px 0; padding: 9px 16px;
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--ink);
  background: linear-gradient(180deg, #dccfae, #c6b48e);
  border: 1px solid var(--wood);
}
.btn-main:hover, .btn-sub:hover { filter: brightness(1.1); }
.btn-main:active, .btn-sub:active { transform: translateY(1px); }
.menu-player {
  margin: -3px 0 10px;
  color: var(--jade); font-size: 12px; letter-spacing: 0.06em;
}
.menu-logout { color: #f0c1b8; border-color: rgba(163, 69, 59, 0.7); }
.menu-logout:hover { color: #ffe0d9; border-color: #d36b5c; }
.menu-logout:disabled { opacity: 0.55; cursor: wait; }
.menu-delete-account { color: var(--ink-light-soft); border-color: rgba(163, 69, 59, 0.7); }
.menu-delete-account:hover { color: var(--ink-light); border-color: #e08a79; }
.menu-delete-account:disabled { opacity: 0.55; cursor: wait; }
.dlg-choices { margin: 4px 0 10px; }
.dlg-choices .btn-choice {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; margin: 5px 0; padding: 8px 12px;
  font-family: var(--font-serif); font-size: 14px; letter-spacing: 0.06em;
  text-align: left; cursor: pointer;
  color: var(--parchment);
  background: linear-gradient(180deg, #46604b, #2c3f31);
  border: 1px solid var(--wood); border-radius: 2px;
  transition: filter 0.15s ease, transform 0.08s ease;
}
.dlg-choices .btn-choice:hover { filter: brightness(1.15); }
.dlg-choices .btn-choice:active { transform: translateY(1px); }
.dlg-choices .btn-choice[disabled] { opacity: 0.45; cursor: not-allowed; }
.dlg-choices .btn-choice canvas {
  width: 28px; height: 28px; flex: none; image-rendering: pixelated;
}
.dlg-choices .btn-choice > span:not(.c-note) { flex: 1 1 auto; min-width: 0; }
.dlg-choices .btn-choice .c-note {
  flex: 1 1 100%; margin-left: 36px;
  font-size: 12px; opacity: 0.75; white-space: normal; line-height: 1.35;
}
.dlg-choices .btn-choice > span.c-stats {
  flex: none; margin-left: auto;
  font-size: 12px; letter-spacing: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: #f0d27a;
}
.dlg-choices .btn-choice .c-note.c-desc { opacity: 0.9; font-style: italic; }
#appearance-shop { z-index: 225; padding: 12px; }
.appearance-panel {
  width: min(760px, 96vw); max-height: min(620px, calc(var(--ui-vh) * 0.94));
  display: flex; flex-direction: column; overflow: hidden;
  color: #efe0bd; background: #241a12;
  border: 2px solid #6b4d2d; border-radius: 8px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.62);
}
.appearance-head {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid rgba(201, 164, 92, 0.35);
}
.appearance-head h2 {
  flex: 1; min-width: 0; margin: 0; color: #f1e3c4; font: 700 18px/1.2 var(--font-serif);
  letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appearance-wallet { flex: none; color: #bca981; font-size: 11px; }
.appearance-wallet strong { color: #f1d17f; font-size: 14px; font-variant-numeric: tabular-nums; }
.appearance-x {
  flex: none; width: 32px; height: 32px; padding: 0; cursor: pointer; color: #d8c6a2;
  background: transparent; border: 1px solid rgba(216, 198, 162, 0.3); border-radius: 6px;
}
.appearance-x:hover { color: #fff3d5; border-color: #c9a45c; }
.appearance-categories {
  flex: none; min-width: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr);
  gap: 4px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid rgba(201, 164, 92, 0.2);
}
.appearance-categories::-webkit-scrollbar { display: none; }
.appearance-category {
  min-height: 34px; padding: 4px 6px; cursor: pointer; white-space: nowrap;
  color: #d8c6a2; background: #2f2419; border: 1px solid #4a3826; border-radius: 6px;
  font: 700 12px/1.2 var(--font-serif);
}
.appearance-category:hover { border-color: #8a6c43; color: #f1e3c4; }
.appearance-category.active { color: #f4e7ca; background: #3b5744; border-color: #5d8466; }
.appearance-body {
  flex: 1 1 auto; min-height: 0; min-width: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr);
}
.appearance-preview-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 10px; border-right: 1px solid rgba(201, 164, 92, 0.2);
}
#appearance-preview {
  width: 132px; height: 178px; image-rendering: pixelated; image-rendering: crisp-edges;
  background: radial-gradient(ellipse at 50% 88%, rgba(201, 164, 92, 0.18) 0 30%, transparent 31%);
}
#appearance-preview-name {
  max-width: 100%; text-align: center; color: #f1e3c4; font: 700 14px/1.25 var(--font-serif);
}
#appearance-preview-state { display: none; }
#appearance-preview-state.trying {
  display: inline-block; padding: 1px 7px; color: #3a2a12; background: #d9c27a;
  border-radius: 999px; font-size: 10px; font-weight: 700;
}
.appearance-actions { width: 100%; margin-top: 6px; display: grid; gap: 5px; }
.appearance-actions button { width: 100%; min-height: 36px; cursor: pointer; border-radius: 6px; }
.appearance-apply {
  color: #f7ecd5; background: #3b5744; border: 1px solid #5d8466;
  font: 700 13px/1.2 var(--font-serif);
}
.appearance-apply:not(:disabled):hover { filter: brightness(1.15); }
.appearance-apply:disabled { cursor: default; color: #9c8a6a; background: #2f2419; border-color: #4a3826; }
.appearance-reset { color: #bca981; background: transparent; border: 1px solid #4a3826; font-size: 12px; }
.appearance-reset[hidden] { display: none; }
.appearance-status { min-height: 14px; text-align: center; color: #bca981; font-size: 11px; line-height: 1.35; }
.appearance-status.success { color: #9fd29a; }
.appearance-status.error { color: #e79a8c; }
.appearance-status.working { color: #d9c27a; }
.appearance-options {
  min-height: 0; overflow-y: auto; padding: 10px 12px; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px;
}
.appearance-option {
  position: relative; min-height: 40px; padding: 6px 22px 6px 10px; cursor: pointer; text-align: left;
  color: #e6d6b2; background: #2f2419; border: 1px solid #4a3826; border-radius: 6px;
}
.appearance-option:not(:disabled):hover { border-color: #8a6c43; background: #382b1e; }
.appearance-option-name {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 13px/1.25 var(--font-serif);
}
.appearance-option-badge {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  color: #9fd29a; font-size: 12px; font-weight: 700;
}
.appearance-option.current { border-color: #5d8466; }
.appearance-option.selected { color: #fff3d7; background: #4a3a22; border-color: #d9c27a; }
.appearance-option:disabled { cursor: default; opacity: 0.6; }
.appearance-x:focus-visible, .appearance-category:focus-visible, .appearance-option:focus-visible,
.appearance-apply:focus-visible, .appearance-reset:focus-visible { outline: 2px solid #d49e36; outline-offset: 1px; }
@media (max-width: 620px) {
  #appearance-shop { padding: 6px; }
  .appearance-panel { width: 100%; max-width: 100%; max-height: calc(var(--ui-vh) * 0.98); }
  .appearance-category { font-size: 11px; padding: 4px 2px; }
  .appearance-categories { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 8px; }
  .appearance-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .appearance-preview-card {
    display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto auto 1fr;
    column-gap: 10px; align-items: start; justify-items: start;
    border-right: 0; border-bottom: 1px solid rgba(201, 164, 92, 0.2); padding: 8px 10px;
  }
  #appearance-preview { grid-row: 1 / 5; width: 84px; height: 114px; }
  #appearance-preview-name { text-align: left; }
  .appearance-actions { grid-template-columns: 1.4fr 1fr; margin-top: 2px; }
  .appearance-status { text-align: left; }
  .appearance-options { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
}
.creator-head { text-align: center; margin-bottom: 14px; }
.creator-head h1 {
  font-size: clamp(22px, 4vw, 32px);
  letter-spacing: 0.22em;
}
.creator-head .sub {
  margin: 4px 0 0;
  font-size: 12px; letter-spacing: 0.1em;
  color: #decfba;
}
.creator-body {
  display: flex; gap: 22px; align-items: flex-start;
}
.preview-wrap { flex: none; width: 216px; text-align: center; }
.preview-stage {
  background:
    radial-gradient(ellipse at 50% 82%, #4a5c40 0%, #26301f 55%, #171c14 100%);
  border: 2px solid var(--wood);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.7);
  padding: 10px 0 4px;
}
#preview {
  display: block; margin: 0 auto;
  width: 128px; height: 192px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#preview-dirs { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
#preview-dirs button {
  width: 34px; height: 28px;
  background: #cfbd97; color: var(--ink);
  border: 1px solid var(--wood);
  cursor: pointer; font-size: 12px;
}
#preview-dirs button.active { background: var(--jade); color: #fff; }
#preview-actions { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
#preview-actions button {
  padding: 5px 9px; font: inherit; font-size: 12px;
  border: 1px solid var(--wood); background: #cfbd97; color: var(--ink); cursor: pointer;
}
#preview-actions button.active { background: var(--jade); color: #fff; }
@media (min-width: 721px) {
  .preview-wrap { position: sticky; top: 0; }
  #creator .options { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  #creator .options section:first-child,
  #creator .options section:nth-child(2),
  #creator .options section:last-child { grid-column: 1 / -1; }
}
.realm-tag {
  margin-top: 10px; font-size: 12px;
  color: #dfceb9; letter-spacing: 0.06em;
}
.realm-tag b { color: var(--blood); }
.desc {
  margin-top: 8px !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  color: #decfba !important;
  min-height: 56px;
  text-align: left;
}
.options { flex: 1; min-width: 0; }
.options section { margin-bottom: 13px; }
.options h3 {
  font-size: 13px; letter-spacing: 0.14em;
  color: #decfba;
  border-bottom: 1px solid rgba(58, 46, 34, 0.3);
  padding-bottom: 3px; margin-bottom: 7px;
}
.row { display: flex; flex-wrap: wrap; gap: 6px; }
.opt-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink);
  background: linear-gradient(180deg, #ded1b1, #c9b791);
  border: 1px solid #8c7a5c;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.opt-btn:hover { background: linear-gradient(180deg, #ece0c3, #d7c6a1); }
.opt-btn.active {
  background: linear-gradient(180deg, #5f8a6b, #3d5c46);
  border-color: var(--wood);
  color: #f4efe1;
  box-shadow: 0 0 0 1px var(--gold) inset;
}
.opt-btn .chip {
  width: 14px; height: 14px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  flex: none;
}
.name-row { display: flex; gap: 8px; }
#opt-name {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  font-family: var(--font-ui); font-size: 14px;
  color: var(--ink);
  background: #f2ead4;
  border: 1px solid #8c7a5c;
  border-radius: 2px;
  outline: none;
}
#opt-name:focus { border-color: var(--jade); box-shadow: 0 0 0 2px rgba(122, 168, 135, 0.3); }
#opt-name.invalid { border-color: var(--blood); background: #f6e2df; }
.name-row .btn-sub { width: auto; margin: 0; white-space: nowrap; }
#name-hint {
  display: block; margin-top: 5px;
  font-size: 12px; color: #6f8a72;
}
#name-hint.warn { color: var(--blood); }
.btn-enter {
  display: block; width: 100%;
  margin-top: 18px; padding: 15px;
  font-size: 18px; letter-spacing: 0.3em;
  color: #f7f1e0;
  background: linear-gradient(180deg, #5a7f63, #33502f 60%, #24391f);
  border: 2px solid var(--wood);
  box-shadow: 0 0 0 1px var(--gold) inset, 0 4px 0 rgba(0, 0, 0, 0.25);
}
.btn-enter:hover:not(:disabled) { filter: brightness(1.15); }
.btn-enter:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 1px var(--gold) inset; }
.btn-enter:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); }
#fade {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.42s ease;
  z-index: 400;
}
#fade.on { opacity: 1; pointer-events: auto; }
@media (max-width: 760px) {
  #skill-test-panel {
    top: 4px; width: calc(100% - 8px); padding: 5px;
  }
  .skill-test-buttons { gap: 3px; }
  .skill-test-buttons button { flex: 1; padding: 5px 2px; font-size: 9px; }
  #skill-test-panel small { font-size: 8px; }
  .creator-body { flex-direction: column; align-items: center; }
  .preview-wrap { width: 100%; max-width: 320px; }
  .desc { text-align: center; min-height: 0; }
  .scroll-panel { padding: 16px 18px 20px; }
  #hud-keys { display: none; }
  #hud-left { width: 180px; transform: scale(var(--hud-left-scale)); transform-origin: top left; }
  #hud {
    --hud-left-scale: 0.70;
    --hud-btns-top: calc(12px + var(--hud-left-h, 138px) * var(--hud-left-scale) + 6px);
  }
  #hud-btns {
    left: 12px; width: 180px; gap: 3px;
    transform: scale(var(--hud-left-scale));
    transform-origin: top left;
  }
  #hud-btns #btn-chat-compose { min-width: 0; padding: 0 4px; }
  #hud-journal {
    top: calc(var(--hud-btns-top) + 26px);
    left: 12px;
  }
  #invite-hud {
    top: 82px;
    width: min(310px, calc(var(--ui-vw) - 24px));
    padding: 8px 10px 9px;
  }
  .invite-head strong { font-size: 13px; }
  #invite-text { margin: 4px 0 7px; font-size: 10px; }
  #btn-breakthrough, .breakthrough-sheet { width: min(264px, calc(var(--ui-vw) - 16px)); }
  #hud-right { transform: scale(0.92); transform-origin: top right; }
  #party-hud { top: 202px; transform: scale(0.92); transform-origin: top right; }
  .hanh-trang-panel { padding: 14px 14px 16px; }
  .bag-shell { grid-template-columns: 1fr; }
  .equipment-board { height: 222px; }
  .bag-list { grid-template-columns: repeat(5, 1fr); }
  .bag-detail-card { padding: 14px; }
  .ht-than { flex-direction: column; gap: 8px; }
  .ht-rail { flex: none; flex-direction: row; width: 100%; overflow: visible; touch-action: auto; }
  .ht-muc { flex: 1 1 0; justify-content: center; text-align: center; font-size: 12px; padding: 6px 4px; }
  .ht-zalo { margin-top: 0; }
  .ht-chinh { width: 100%; }
  .skill-list { max-height: none; }
  .skill-row-main small { font-size: 10px; -webkit-line-clamp: 3; }
}
@media (max-width: 420px) {
  #dpad, #joystick { left: max(8px, env(safe-area-inset-left)); --move-base: 0.88; }
  #touch-buttons { right: max(8px, env(safe-area-inset-right)); transform: scale(0.92); }
  #hud-journal { width: min(210px, calc(100vw - 180px)); }
  #quest-tracker { width: 100%; max-width: 100%; }
  #hud-target {
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 257px);
  }
  .bag-head { align-items: flex-start; }
  .bag-head h2 { font-size: 17px; letter-spacing: 0.04em; }
  .bag-count { font-size: 8px; }
  .equipment-summary { grid-template-columns: repeat(5, 1fr); }
}
@media (orientation: landscape) and (max-height: 520px) {
  .hanh-trang-panel {
    height: min(400px, calc(var(--ui-vh) - 16px));
    max-height: min(400px, calc(var(--ui-vh) - 16px));
    padding: 10px 12px 10px;
  }
  .hanh-trang-panel .panel-x { top: 6px; right: 8px; }
  .bag-head { padding-bottom: 6px; }
  .bag-head h2 { font-size: 16px; }
  .ht-than { flex-direction: row; gap: 10px; margin-top: 8px; }
  .ht-rail {
    flex: 0 0 108px; flex-direction: column; width: auto;
    overflow-y: auto; touch-action: pan-y;
  }
  .ht-rail > .ht-muc {
    flex: 0 0 auto; min-height: 30px; padding: 5px 8px;
    justify-content: flex-start; text-align: left; font-size: 12px;
  }
  .ht-zalo { margin-top: 6px; }
  .bag-shell { grid-template-columns: 190px minmax(0, 1fr); gap: 10px; }
}
@media (orientation: landscape) and (max-height: 340px) {
  .hanh-trang-panel .bag-head .sheet-kicker { display: none; }
  .hanh-trang-panel { padding-bottom: 6px; }
  .hanh-trang-panel .ht-than { margin-top: 6px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .hanh-trang-panel {
    height: min(760px, calc(var(--ui-vh) - 24px));
    max-height: min(760px, calc(var(--ui-vh) - 24px));
  }
  .bag-head { flex-wrap: wrap; row-gap: 6px; }
  .bag-title-row { flex: 1 1 100%; }
  .bag-head-stats { flex: 1 1 100%; }
  .bag-head-stats .wallet,
  .bag-count { margin-top: 0; }
  .ht-rail {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  }
  .ht-rail > .ht-muc { min-height: 32px; padding: 5px 4px; }
}
@media (max-height: 480px) {
  #touch-buttons { transform: scale(0.92); transform-origin: right bottom; }
  #dpad, #joystick { --move-base: 0.88; }
  #party-hud { max-height: 240px; overflow-y: auto; }
  .scroll-panel { max-height: calc(var(--ui-vh) * 0.96); padding: 12px 16px 16px; }
  .creator-head h1 { font-size: 20px; }
  .btn-enter { padding: 11px; font-size: 15px; margin-top: 12px; }
}
#auth-gate {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: safe center;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 32%, rgba(47, 68, 53, 0.7) 0%, transparent 46%),
    #101510;
  z-index: 600;
}
#auth-gate.hidden { display: none; }
#auth-gate.busy { pointer-events: none; opacity: 0.75; }
.auth-box {
  width: min(400px, 100%);
  background: linear-gradient(180deg, rgba(38, 29, 20, 0.98), rgba(20, 16, 11, 0.98));
  border: 1px solid rgba(201, 164, 92, 0.52);
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(4, 8, 5, 0.5), inset 0 1px 0 rgba(255, 239, 199, 0.05);
  padding: 30px 26px 26px;
  text-align: center;
}
#auth-title {
  font-family: var(--font-serif);
  font-size: clamp(27px, 7vw, 34px); letter-spacing: 0.055em;
  line-height: 1.1;
  color: var(--parchment);
  margin: 0 0 8px;
  text-shadow: 0 2px 0 #000;
}
.auth-sub {
  color: var(--jade);
  font-size: 13px; line-height: 1.5;
  margin: 0 0 24px;
  text-wrap: balance;
}
.auth-field { display: block; text-align: left; margin-bottom: 14px; }
.auth-field span {
  display: block;
  color: var(--parchment-2);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.auth-field input {
  width: 100%; box-sizing: border-box;
  min-height: 48px; padding: 11px 13px;
  font-family: var(--font-ui); font-size: 15px;
  color: var(--parchment);
  background: rgba(12, 9, 7, 0.85);
  border: 1px solid rgba(201, 164, 92, 0.35);
  border-radius: 5px;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.auth-field input::placeholder { color: rgba(217, 207, 183, 0.42); }
.auth-field input:focus {
  border-color: var(--gold);
  background: rgba(12, 9, 7, 0.98);
  box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.14);
}
.auth-terms-check {
  display: flex; align-items: flex-start; gap: 9px; text-align: left;
  margin: 4px 0 8px; color: rgba(231, 218, 184, 0.86);
  font-size: 11px; line-height: 1.45;
}
.auth-terms-check input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--gold); }
.auth-terms-check a { color: var(--gold); }
.auth-terms-details { margin: 0 0 12px; text-align: left; color: rgba(231, 218, 184, 0.68); font-size: 10px; line-height: 1.45; }
.auth-terms-details summary { color: var(--parchment-2); cursor: pointer; }
.auth-terms-details p { margin: 6px 0 0; }
.auth-msg {
  min-height: 17px;
  margin: 0 0 10px;
  font-size: 12px; line-height: 1.4;
  color: var(--jade);
}
.auth-msg.warn { color: #e0a06a; }
.auth-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.auth-btn {
  width: 100%;
  min-height: 50px; padding: 11px 8px;
  font-family: var(--font-serif); font-size: 15px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--parchment-2);
  background: rgba(11, 9, 7, 0.7);
  border: 1px solid rgba(201, 164, 92, 0.42);
  border-radius: 5px;
  cursor: pointer;
  transition: transform 160ms ease, filter 180ms ease, background 180ms ease,
    color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.auth-btn.is-active {
  color: var(--ink);
  background: linear-gradient(180deg, #e1c783, #b58b3f);
  border-color: #dfbe72;
  box-shadow: inset 0 1px 0 rgba(255, 246, 210, 0.42), 0 5px 14px rgba(8, 6, 3, 0.28);
}
.auth-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.auth-btn:disabled { filter: grayscale(0.6); cursor: wait; transform: none; }
.auth-guest {
  display: block; width: 100%; margin: 14px 0 0; padding: 11px 14px;
  color: var(--parchment-2); background: rgba(20, 16, 11, 0.72);
  border: 1px solid rgba(201, 164, 92, 0.42); border-radius: 5px;
  font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.04em;
  cursor: pointer; transition: filter 180ms ease, border-color 180ms ease,
    background 180ms ease, transform 160ms ease;
}
.auth-guest:hover { filter: brightness(1.12); border-color: var(--gold); background: rgba(38, 29, 20, 0.9); transform: translateY(-1px); }
.auth-guest:active { transform: translateY(1px); }
.auth-guest:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.auth-guest:disabled { opacity: 0.55; cursor: wait; }
.auth-guest-note {
  margin: 7px 0 0; color: rgba(231, 218, 184, 0.68);
  font-size: 11px; line-height: 1.45; letter-spacing: 0.02em;
}
body.orientation-blocked { overflow: hidden; touch-action: none; }
#orientation-lock {
  position: fixed; inset: 0; z-index: 2147483647;
  display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  color: var(--parchment);
  background: #171310;
  text-align: center;
  pointer-events: auto;
}
#orientation-lock[hidden] { display: none; }
.orientation-lock-card { width: min(330px, 100%); }
.orientation-lock-icon {
  display: block; margin-bottom: 14px;
  color: var(--gold); font-size: 54px; line-height: 1;
}
.orientation-lock-title {
  margin: 0; color: #fff6df;
  font-family: var(--font-serif); font-size: 20px; line-height: 1.3;
}
.orientation-lock-copy {
  margin: 9px 0 0; color: var(--parchment-2);
  font-size: 13px; line-height: 1.5;
}
@media (orientation: landscape) {
  #orientation-lock { display: none !important; }
}
.auth-tai {
  width: min(400px, 100%);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.auth-tai.hidden { display: none; }
.auth-community {
  width: min(400px, 100%);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.auth-tai-nut {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 8px 10px; box-sizing: border-box;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  color: var(--parchment-2); text-decoration: none;
  background: rgba(20, 16, 11, 0.72);
  border: 1px solid rgba(201, 164, 92, 0.32); border-radius: 6px;
  transition: transform 160ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.auth-tai-nut svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.auth-zalo-nut svg { stroke: #75b8ef; }
.auth-tai-nut:hover { color: var(--parchment); border-color: var(--gold); background: rgba(38, 29, 20, 0.9); transform: translateY(-1px); }
.auth-zalo-nut:hover { border-color: #75b8ef; }
.auth-tai-nut:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.auth-tai-nut[aria-disabled="true"] { opacity: 0.5; cursor: default; pointer-events: none; }
.auth-tai-nut small {
  position: absolute; top: -8px; right: 8px; padding: 1px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink); background: var(--parchment-2); border-radius: 8px;
}
@media (max-width: 420px) {
  .auth-tai-nut { font-size: 13px; gap: 6px; }
  .auth-box { padding: 26px 18px 22px; }
  .auth-actions { gap: 8px; }
}
@media (max-height: 430px) {
  .auth-box { padding: 18px 24px 16px; }
  #auth-title { font-size: 27px; }
  .auth-sub { margin-bottom: 14px; }
  .auth-field { margin-bottom: 9px; }
  .auth-field input { min-height: 42px; padding-block: 8px; }
  .auth-msg { min-height: 14px; margin-bottom: 5px; }
  .auth-btn { min-height: 44px; padding-block: 8px; }
  #auth-gate { gap: 10px; justify-content: safe center; overflow-y: auto; }
  .auth-tai-nut { min-height: 40px; }
}
#hud-online {
  color: var(--qi);
  font-size: 11px; letter-spacing: 0.06em;
  margin-top: 2px;
}
#hud-online.hidden { display: none; }
#auth-gate {
  isolation: isolate;
  background: #0b100c;
}
#auth-scenery {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#auth-scenery-canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  image-rendering: pixelated;
}
#auth-scenery::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 8, 6, 0.34), rgba(5, 8, 6, 0.06) 48%, rgba(5, 8, 6, 0.32)),
    linear-gradient(180deg, rgba(5, 8, 6, 0.34), transparent 24%, transparent 72%, rgba(5, 8, 6, 0.52)),
    radial-gradient(ellipse at center, rgba(5, 8, 6, 0.08), rgba(5, 8, 6, 0.3) 88%);
}
#auth-gate > :not(#auth-scenery) {
  position: relative;
  z-index: 1;
}
.auth-box {
  background: linear-gradient(180deg, rgba(38, 29, 20, 0.9), rgba(20, 16, 11, 0.92));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.auth-seo-copy {
  margin-top: 18px; padding-top: 13px;
  border-top: 1px solid rgba(201, 164, 92, 0.24);
  color: rgba(233, 224, 201, 0.78);
  font-size: 11px; line-height: 1.55;
  text-align: left;
}
.auth-seo-copy h2 {
  margin: 0 0 5px;
  color: var(--parchment-2);
  font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.035em;
  text-align: center;
}
.auth-seo-copy p { margin: 0; }
.auth-seo-copy .auth-seo-goal {
  margin-top: 5px; color: var(--jade); text-align: center;
}
.hotbar {
  position: absolute;
  left: 50%; bottom: 44px;
  transform: translateX(-50%);
  display: flex; gap: 5px;
  padding: 5px 6px;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(28, 21, 14, 0.72), rgba(16, 12, 8, 0.82));
  border: 1px solid rgba(201, 164, 92, 0.35);
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.hotbar:not(:has(> .hb-o:not(.hidden))),
.phu-bar:not(:has(> .phu-o:not(.hidden))) {
  display: none !important;
  pointer-events: none;
}
.hb-o {
  position: relative;
  width: 46px; height: 46px; padding: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  cursor: pointer;
  color: var(--parchment);
  background: linear-gradient(180deg, rgba(62, 48, 33, 0.9), rgba(32, 24, 17, 0.95));
  border: 1px solid rgba(201, 164, 92, 0.5);
  border-radius: 4px;
  transition: filter 120ms ease, transform 70ms ease, opacity 120ms ease;
}
.hb-o:hover { filter: brightness(1.2); }
.hb-o:active { transform: translateY(1px); }
.hb-o:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hb-so {
  position: absolute; top: 1px; left: 3px;
  font-size: 9px; font-weight: 700; line-height: 1;
  color: var(--gold); text-shadow: 0 1px 1px #000;
}
.hb-hinh { font-size: 19px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.hb-ten {
  max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 8px; line-height: 1; color: rgba(214, 196, 159, 0.75);
}
.hb-o.tu-dong::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #8fe39a; box-shadow: 0 0 3px rgba(143, 227, 154, 0.8);
}
.hb-hoi {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #d8e6ef;
  background: rgba(10, 14, 20, 0.62);
  border-radius: 3px;
}
.hb-o.nguoi .hb-hinh, .hb-o.nguoi .hb-ten { opacity: 0.35; }
@media (max-width: 760px) {
  .hotbar {
    left: max(6px, env(safe-area-inset-left));
    right: auto;
    bottom: 250px;
    transform: none;
    flex-wrap: wrap; width: max-content; max-width: 88px;
    gap: 3px; padding: 4px;
  }
  .hb-o { width: 36px; height: 36px; }
  .hb-hinh { font-size: 16px; }
  .hb-ten { display: none; }
}
@media (max-width: 420px) {
  .hotbar { gap: 2px; padding: 3px; max-width: 78px; bottom: 236px; }
  .hb-o { width: 32px; height: 32px; }
}
@media (max-height: 480px) and (min-width: 761px) {
  .hotbar { bottom: 10px; }
}
.phu-bar {
  position: absolute;
  left: 50%; bottom: 110px;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  padding: 4px 5px;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(28, 21, 14, 0.66), rgba(16, 12, 8, 0.78));
  border: 1px solid rgba(201, 164, 92, 0.28);
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.phu-o {
  position: relative;
  width: 40px; height: 40px; padding: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  cursor: pointer;
  color: var(--parchment);
  background: linear-gradient(180deg, rgba(70, 56, 34, 0.9), rgba(36, 27, 17, 0.95));
  border: 1px solid rgba(201, 164, 92, 0.45);
  border-radius: 4px;
  transition: filter 120ms ease, transform 70ms ease, opacity 120ms ease;
}
.phu-o:hover { filter: brightness(1.2); }
.phu-o:active { transform: translateY(1px); }
.phu-o:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.phu-hinh { font-size: 17px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.phu-ten {
  max-width: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 7px; line-height: 1; color: rgba(214, 196, 159, 0.75);
}
.phu-so {
  position: absolute; top: 1px; right: 3px;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--gold); text-shadow: 0 1px 1px #000;
}
.phu-o.chon {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(240, 210, 122, 0.55), 0 0 8px rgba(240, 210, 122, 0.3);
}
.phu-hoi {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #d8e6ef;
  background: rgba(10, 14, 20, 0.62);
  border-radius: 3px;
}
.phu-o.nguoi .phu-hinh, .phu-o.nguoi .phu-ten { opacity: 0.35; }
@media (max-width: 760px) {
  .phu-bar {
    left: max(6px, env(safe-area-inset-left));
    right: auto;
    bottom: 420px;
    transform: none;
    flex-wrap: wrap; width: max-content; max-width: 88px;
    gap: 3px; padding: 4px;
  }
  .phu-o { width: 36px; height: 36px; }
  .phu-ten { display: none; }
}
@media (max-width: 420px) {
  .phu-bar { gap: 2px; padding: 3px; max-width: 78px; bottom: 396px; }
  .phu-o { width: 32px; height: 32px; }
}
@media (max-height: 480px) and (min-width: 761px) {
  .phu-bar { bottom: 70px; }
}
#thu {
  position: absolute;
  left: 50%; top: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: var(--hud-w);
  height: var(--hud-h);
  padding: 0;
  display: none;                 
  flex-direction: column;
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(32, 24, 16, 0.96), rgba(18, 13, 9, 0.97));
  color: #eee3cc;
}
#thu.mo { display: flex; }
.thu-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(201, 164, 92, 0.28);
}
.thu-nhan { font-size: 14px; color: #f0d99f; line-height: 1; }
.thu-danh { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.thu-title {
  font-size: 13px; font-weight: 600; color: #f0d99f;
  letter-spacing: 0.04em;
}
.thu-note {
  font-size: 11px; color: #cdbf9f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thu-close {
  flex: 0 0 auto; width: 24px; height: 22px; padding: 0; line-height: 1;
  color: #d9c7a4; background: rgba(12,9,6,.28);
  border: 1px solid rgba(201, 164, 92, 0.3); border-radius: 3px; cursor: pointer;
  border-color: rgba(189,155,98,.52);
}
.thu-close:hover { color: var(--parchment); border-color: var(--gold); }
.thu-chan { width: auto; padding: 0 6px; margin-right: 4px; font-size: 11px; }
.thu-chan-list {
  max-height: 140px; overflow-y: auto; padding: 4px 8px;
  background: rgba(12,9,6,.55); border-bottom: 1px solid rgba(189,155,98,.35);
}
.thu-chan-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 3px 0; font-size: 12px; color: #d9c7a4;
}
.thu-than { display: flex; flex: 1 1 auto; min-height: 0; }
.thu-rail {
  flex: 0 0 158px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 5px; overflow-y: auto; overflow-x: hidden;
  border-right: 1px solid rgba(201, 164, 92, 0.22);
  scrollbar-width: thin; scrollbar-color: rgba(201, 164, 92, 0.4) transparent;
}
.thu-rail::-webkit-scrollbar { width: 6px; }
.thu-rail::-webkit-scrollbar-thumb {
  background: rgba(201, 164, 92, 0.35); border-radius: 3px;
}
.thu-muc {
  position: relative;
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; padding: 5px 22px 5px 7px;
  text-align: left; cursor: pointer;
  font-family: var(--font-ui);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid transparent; border-radius: 3px;
}
.thu-muc:hover { background: rgba(201, 164, 92, 0.1); }
.thu-muc.on {
  background: rgba(201, 164, 92, 0.16);
  border-color: rgba(201, 164, 92, 0.5);
}
.thu-muc-ten {
  font-size: 12px; font-weight: 600; color: #eee1c7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thu-muc-phu {
  font-size: 10px; color: #cdbf9f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thu-muc.k-invite { border-color: rgba(201, 164, 92, 0.45); }
.thu-muc.k-invite .thu-muc-ten { color: var(--gold); }
.thu-muc.k-whisper .thu-muc-ten { color: #c7d7b3; }
.thu-cham {
  position: absolute; top: 5px; right: 5px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #1b1208; background: var(--gold); border-radius: 8px;
}
.thu-chinh { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.thu-log {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 6px 9px;
  font-size: 12px; line-height: 1.5;
  scrollbar-width: thin; scrollbar-color: rgba(201, 164, 92, 0.4) transparent;
  color: #e9dfca;
}
.thu-log::-webkit-scrollbar { width: 6px; }
.thu-log::-webkit-scrollbar-thumb {
  background: rgba(201, 164, 92, 0.35); border-radius: 3px;
}
.chat-line { word-break: break-word; margin: 1px 0; }
.chat-line .chat-who { color: var(--gold); font-weight: 600; cursor: pointer; }
.chat-line .chat-who:hover { text-decoration: underline; }
.chat-line.mine .chat-who { color: #e6d29a; cursor: default; }
.chat-line .chat-text { color: var(--parchment-2); }
.chat-line-actions { display: inline-flex; gap: 4px; margin-left: 7px; opacity: 0.72; }
.chat-line-action { border: 0; padding: 1px 4px; color: rgba(231, 218, 184, 0.78); background: rgba(20, 16, 11, 0.72); font: 10px var(--font-ui); cursor: pointer; }
.chat-line-action:hover { color: var(--gold); text-decoration: underline; }
.chat-line.whisper .chat-who { color: var(--jade); }
.chat-line.whisper .chat-text { color: #cfe3d3; }
.chat-line.clan .chat-who { color: #c9a45c; }
.chat-line.clan.r-tong_chu .chat-who { color: #f0c552; }
.chat-line.clan.r-tong_chu.phe-ma_dao .chat-who { color: #e0605f; }
.chat-line.clan.r-truong_lao .chat-who { color: #7fb9de; }
.chat-line.clan.r-truong_lao.phe-ma_dao .chat-who { color: #c489d6; }
.chat-line.clan.r-truyen_nhan .chat-who { color: #e3dac4; }
.chat-line.clan .chat-text { color: #ddd2b6; }
.chat-line.clan-sys .chat-text { color: #dc9b4a; font-style: italic; }
.chat-line.sys .chat-text { color: rgba(214, 196, 159, 0.55); font-style: italic; }
.thu-invite {
  margin: 7px 0 9px; padding: 9px 10px;
  color: #e9dfca;
  background: rgba(12, 20, 16, 0.82);
  border: 1px solid rgba(201, 164, 92, 0.42);
  border-radius: 3px;
}
.thu-invite.da-dong { border-color: rgba(201, 164, 92, 0.2); }
.thu-invite-tieu-de { color: #f0d394; font-weight: 700; }
.thu-invite-noi-dung { margin-top: 4px; line-height: 1.45; color: #e9dfca; }
.thu-invite-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.thu-invite-trang-thai { margin-top: 5px; color: #d6c49f; font-size: 11px; }
.thu-act {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 6px 9px; border-top: 1px solid rgba(201, 164, 92, 0.22);
}
.thu-viec {
  padding: 4px 12px; font-size: 12px; font-family: var(--font-ui);
  color: var(--parchment); cursor: pointer;
  background: linear-gradient(180deg, rgba(83, 62, 37, 0.8), rgba(34, 25, 17, 0.9));
  border: 1px solid rgba(201, 164, 92, 0.45); border-radius: 3px;
}
.thu-viec:hover { border-color: var(--gold); }
.thu-viec.chinh { color: var(--gold); border-color: rgba(201, 164, 92, 0.7); }
.thu-row {
  display: flex; align-items: stretch; gap: 5px;
  padding: 6px; border-top: 1px solid rgba(201, 164, 92, 0.25);
}
#thu-input {
  flex: 1 1 auto; min-width: 0;
  padding: 6px 8px; font-size: 12px;
  color: #f2e8d2; font-family: var(--font-ui);
  background: rgba(12, 8, 5, 0.6);
  border: 1px solid rgba(201, 164, 92, 0.3); border-radius: 3px;
}
#thu-input:focus { outline: none; border-color: var(--gold); }
#thu-input::placeholder { color: #c6b99e; }
#thu-input:disabled { opacity: 0.5; cursor: not-allowed; }
.thu-send {
  flex: 0 0 auto; padding: 0 12px; font-size: 11px; font-weight: 600;
  color: #1b1208; font-family: var(--font-ui);
  background: linear-gradient(180deg, rgba(83, 62, 37, 0.8), rgba(34, 25, 17, 0.9));
  border: 1px solid rgba(201, 164, 92, 0.45); border-radius: 3px; cursor: pointer;
  text-shadow: none;
  border-color: rgba(201,164,92,.68);
  opacity: .82;
}
.thu-send:hover { border-color: var(--gold); }
.thu-send:disabled { opacity: .9; cursor: not-allowed; color: #f4ead4; text-shadow: none; border-color: rgba(201,164,92,.56); background: linear-gradient(180deg, #51402c, #33271c); }
#btn-chat { position: relative; }
#btn-chat.co-tin { border-color: var(--gold); color: var(--gold); }
#btn-chat.co-tin::after {
  content: attr(data-chua-doc);
  position: absolute; top: -4px; right: -4px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #1b1208; background: var(--gold); border-radius: 8px;
}
@media (max-width: 760px) {
  #thu {
    left: 50%; right: auto; top: 50%; bottom: auto;
    width: min(560px, calc(var(--ui-vw) - 32px));
    height: min(360px, calc(var(--ui-vh) - 96px));
    transform: translate(-50%, -50%);
    box-shadow: var(--shadow), 0 -8px 24px rgba(0, 0, 0, 0.5);
  }
  .thu-rail { flex-basis: 128px; }
}
.daihoi-panel {
  width: min(480px, calc(var(--ui-vw) - 32px));
  padding: 28px;
  text-align: left;
  color: #e8ddc7;
  background: linear-gradient(160deg, #403226, #30251b 70%, #292017);
  border: 1px solid #a5844f;
  border-radius: 3px;
  box-shadow: 0 16px 44px rgba(0,0,0,.56), inset 0 0 0 3px #1d150e, inset 0 0 0 4px rgba(188,151,91,.38);
}
.daihoi-panel::before,
.daihoi-panel::after { display: none; }
.daihoi-panel button { font-family: var(--font-ui); }
.daihoi-panel .sheet-kicker {
  color: #cfc6b4;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.dh-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 18px; padding-bottom: 18px;
  border-bottom: 1px solid #eae8e2;
}
.dh-head h2 {
  margin: 6px 0 0;
  color: #e8ddc7;
  font-size: clamp(25px, 5vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.dh-clock {
  display: block;
  flex: none;
  font-family: var(--font-serif);
  font-size: clamp(32px, 7vw, 44px); line-height: 0.95; color: #f0d08a;
  font-variant-numeric: tabular-nums;   
  letter-spacing: -0.04em;
  text-shadow: none;
  text-align: right;
}
.dh-clock::before {
  content: 'Còn lại';
  display: block;
  margin-bottom: 6px;
  color: #cfc6b4;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: right;
}
.dh-phase {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 14px;
  padding: 5px 9px;
  color: #d8e6d2;
  background: #334a38;
  border: 1px solid #647d5b;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.dh-info {
  padding: 13px 15px;
  color: #e8ddc7;
  background: #30261d;
  border: 1px solid #65523a;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
}
.dh-info div + div {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #65523a;
}
.dh-msg {
  margin: 12px 0 10px; padding: 9px 11px;
  color: #ffd5cc;
  background: #482923;
  border: 1px solid #79473b;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
#daihoi .btn-main,
#daihoi .btn-sub {
  margin: 10px 0 0;
  border-radius: 6px;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.08s ease, opacity 0.2s ease;
}
#daihoi .btn-main {
  color: #fff0ca;
  background: #2f4a3a;
  border: 1px solid #6f8f67;
  box-shadow: none;
}
#daihoi .btn-main:hover,
#daihoi .btn-main:focus-visible { background: #3b5c47; filter: none; }
#daihoi .btn-sub {
  color: #423321;
  background: linear-gradient(#dfd0ad, #c8b58e);
  border: 1px solid #8c7045;
}
#daihoi .btn-sub:hover,
#daihoi .btn-sub:focus-visible { background: #eadcb8; filter: none; }
#daihoi .btn-main:active,
#daihoi .btn-sub:active { transform: scale(0.985); }
#daihoi .btn-main:focus-visible,
#daihoi .btn-sub:focus-visible {
  outline: 2px solid #6a8f73;
  outline-offset: 2px;
}
#dh-act[disabled] { opacity: 0.5; cursor: default; filter: none; }
@media (max-width: 520px) {
  .daihoi-panel {
    width: min(480px, calc(var(--ui-vw) - 24px));
    padding: 22px 18px 18px;
  }
  .dh-head { gap: 12px; padding-bottom: 15px; }
  .dh-head h2 { font-size: clamp(24px, 8vw, 30px); }
  .dh-clock { font-size: clamp(28px, 9vw, 38px); }
  .dh-info { padding: 12px; font-size: 12px; }
}
.gacha-panel {
  width: min(540px, calc(var(--ui-vw) - 24px));
  height: min(330px, calc(var(--ui-vh) - 24px));
  max-height: calc(var(--ui-vh) - 24px);
  padding: 12px 14px 11px;
  display: flex; flex-direction: column; gap: 6px; overflow: hidden;
}
.gacha-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  min-height: 34px; padding: 0 34px 5px 2px;
  border-bottom: 1px solid rgba(75, 49, 25, 0.28);
}
.gacha-head h2 { margin: 0; font-size: 22px; line-height: 1.15; }
.gacha-stones {
  flex: none; padding: 3px 9px;
  font-size: 12px; color: #e5d0b3; white-space: nowrap;
  background: rgba(201, 164, 92, 0.28);
  border: 1px solid rgba(75, 49, 25, 0.35); border-radius: 3px;
}
.gacha-pools {
  flex: none; display: flex; gap: 6px; padding: 0 2px;
}
.gacha-pool-tab {
  flex: 1 1 0; min-width: 0; padding: 5px 8px;
  color: #e0cdb8; background: rgba(115, 82, 42, 0.09);
  border: 1px solid rgba(75, 49, 25, 0.32); border-radius: 3px;
  font: inherit; font-size: 11px; cursor: pointer;
}
.gacha-pool-tab.active {
  color: #e5d0b3; background: rgba(201, 164, 92, 0.32);
  border-color: rgba(75, 49, 25, 0.62);
  box-shadow: inset 0 -2px 0 var(--gold);
}
.gacha-pool-tab:disabled { opacity: 0.5; cursor: default; }
.gacha-grid {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: grid; gap: 6px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  padding: 4px 2px;
  perspective: 900px;
  min-height: 142px;
}
.gacha-card {
  position: relative;
  min-height: 0;
  --glow: #e8dfa0;
}
.gacha-card-in {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.gacha-card.flip .gacha-card-in { transform: rotateY(180deg); }
.gacha-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px;
  border: 1px solid rgba(75, 49, 25, 0.5); border-radius: 4px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  text-align: center;
}
.gacha-back {
  color: rgba(201, 164, 92, 0.75);
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.16) 0 3px, rgba(0, 0, 0, 0) 3px 7px),
    linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
  box-shadow: inset 0 0 0 1px rgba(201, 164, 92, 0.28);
}
.gacha-seal { font-size: 20px; opacity: 0.85; }
.gacha-front {
  transform: rotateY(180deg);
  color: var(--ink);
  background: linear-gradient(180deg, #f2e7cb 0%, var(--parchment-2) 100%);
}
.gacha-front b { font-size: 11px; line-height: 1.25; }
.gacha-front small { font-size: 10px; color: #6b543a; }
.gacha-icon { width: 24px; height: 24px; image-rendering: pixelated; }
.gacha-card.lit .gacha-face {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 164, 92, 0.8), 0 0 14px 2px rgba(201, 164, 92, 0.55);
}
.gacha-card.lit { transform: translateY(-2px); }
.gacha-card.won .gacha-front {
  border-color: var(--glow);
  box-shadow: 0 0 0 2px var(--glow), 0 0 22px 6px color-mix(in srgb, var(--glow) 55%, transparent);
}
.gacha-burst {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}
.gacha-card.burst .gacha-burst {
  background: radial-gradient(circle, color-mix(in srgb, var(--glow) 85%, transparent) 0%,
                              transparent 65%);
  animation: gachaBurst 0.75s ease-out;
}
@keyframes gachaBurst {
  0%   { opacity: 0.95; transform: scale(0.35); }
  100% { opacity: 0;    transform: scale(2.4); }
}
.gacha-card.thunder.won .gacha-front {
  box-shadow: 0 0 0 2px #dff4ff, 0 0 30px 10px rgba(143, 227, 255, 0.85);
  animation: gachaThunder 0.6s steps(2) 2;
}
.gacha-card.thunder.burst .gacha-burst { animation-duration: 1s; }
@keyframes gachaThunder {
  0%, 100% { filter: none; }
  50%      { filter: brightness(2.1) saturate(0.6); }
}
.gacha-say {
  flex: none; margin: 0; min-height: 28px; max-height: 34px; overflow: hidden;
  font-size: 11.5px; line-height: 1.45; color: var(--ink-light-soft);
}
.gacha-haul {
  flex: none; height: 40px;
  display: flex; flex-wrap: nowrap; gap: 4px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 0;
}
.gacha-chip {
  --glow: #e8dfa0;
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 4px;
  padding: 2px 6px 2px 3px;
  font-size: 11px; color: var(--ink);
  background: linear-gradient(180deg, #f2e7cb, var(--parchment-2));
  border: 1px solid var(--glow); border-radius: 3px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--glow) 40%, transparent);
  opacity: 0;
  animation: gachaChip 0.3s ease-out forwards;
}
.gacha-chip canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.gacha-chip.dup { filter: grayscale(0.6); border-color: rgba(75, 49, 25, 0.4); box-shadow: none; }
.gacha-chip.thunder { box-shadow: 0 0 12px rgba(143, 227, 255, 0.9); }
@keyframes gachaChip {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.gacha-foot {
  flex: none; display: flex; gap: 8px; align-items: center;
  padding-top: 5px; border-top: 1px solid rgba(75, 49, 25, 0.28);
}
.gacha-foot .btn-main,
.gacha-foot .btn-sub { width: auto; margin: 0; }
.gacha-foot .btn-main { flex: 1 1 auto; white-space: nowrap; padding: 8px 10px; font-size: 13px; }
.gacha-foot .btn-sub  { flex: 0 0 auto; white-space: nowrap; padding: 8px 10px; }
.gacha-foot .btn-main[disabled] { opacity: 0.45; cursor: default; filter: grayscale(0.6); }
@media (max-width: 560px) {
  .gacha-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gacha-pool-tab { font-size: 10px; padding-inline: 4px; }
  .gacha-head { gap: 6px; }
  .gacha-head h2 { font-size: 17px; white-space: nowrap; }
  .gacha-stones { padding-inline: 5px; font-size: 10px; }
  .gacha-say { font-size: 10.5px; }
  .gacha-foot { flex-wrap: wrap; }
  .gacha-foot .btn-sub { margin-left: 0; }
}
#huyet-sac-hud {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 5px; padding: 0;
  color: rgba(237, 219, 181, 0.74); font-size: 10px; line-height: 1;
  pointer-events: auto;
}
#huyet-sac-hud[hidden] { display: none; }
#huyet-sac-hud span { display: inline-block; margin: 0; font-variant-numeric: tabular-nums; }
#huyet-sac-hud span::before { content: '·'; margin-right: 6px; color: rgba(237, 219, 181, 0.42); }
#huyet-sac-hud button {
  color: #eddbb5; background: transparent; border: 0;
  padding: 1px 0; cursor: pointer; font: inherit; text-decoration: underline;
  text-underline-offset: 2px;
}
#huyet-sac-hud.urgent span { color: #ff9181; }
#huyet-collapse {
  position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 40;
  pointer-events: none; text-align: center; color: #ffe2a8;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8);
}
#huyet-collapse[hidden] { display: none; }
#huyet-collapse small { display: block; font-size: 13px; letter-spacing: 0.06em; }
#huyet-collapse b { display: block; font-size: 38px; line-height: 1.05; font-variant-numeric: tabular-nums; }
#huyet-collapse.urgent { color: #ff8a73; animation: huyet-collapse-pulse 1s ease-in-out infinite; }
@keyframes huyet-collapse-pulse { 50% { opacity: 0.55; } }
#lam-lang-hud {
  display: block; width: 100%; margin-top: 6px; padding: 5px 6px 4px;
  border-top: 1px solid rgba(190, 120, 255, 0.28);
  color: rgba(237, 219, 181, 0.86); font-size: 10px; line-height: 1.25;
  pointer-events: auto;
}
#lam-lang-hud[hidden] { display: none; }
#lam-lang-hud header { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
#lam-lang-hud header b { color: #e0b8ff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lam-lang-hud .ll-gio { font-variant-numeric: tabular-nums; color: #ffe2a8; }
#lam-lang-hud .ll-menh {
  position: relative; height: 12px; margin: 4px 0 3px;
  background: #2a1030; border: 1px solid #5a2a70; border-radius: 2px; overflow: hidden;
}
#lam-lang-hud .ll-menh i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(#c890ff, #7a3ad0); transition: width 0.35s ease;
}
#lam-lang-hud .ll-menh.nguy i { background: linear-gradient(#ff9a8a, #c0304a); }
#lam-lang-hud .ll-menh span {
  position: relative; display: block; text-align: center; font-size: 9px; line-height: 12px;
  color: #fff; text-shadow: 0 1px 0 #000; font-variant-numeric: tabular-nums;
}
#lam-lang-hud .ll-muc { list-style: none; margin: 0; padding: 0; }
#lam-lang-hud .ll-muc li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#lam-lang-hud .ll-muc li.xong { color: #a8e8a0; }
#lam-lang-hud footer { display: flex; justify-content: space-between; gap: 6px; margin-top: 3px; }
#lam-lang-hud footer button {
  color: #eddbb5; background: transparent; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; text-decoration: underline; text-underline-offset: 2px;
  min-height: 22px;
}
#lam-lang-hud footer button:disabled { text-decoration: none; opacity: 0.7; cursor: default; }
#lam-lang-banner {
  position: fixed; left: 50%; top: 11%; transform: translateX(-50%); z-index: 41;
  pointer-events: none; text-align: center; color: #f0d8ff; max-width: 92vw;
  padding: 6px 16px 7px; border-radius: 6px;
  background: rgba(22, 8, 34, 0.62); border: 1px solid rgba(190, 120, 255, 0.35);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(120, 40, 200, 0.85);
}
#lam-lang-banner[hidden] { display: none; }
#lam-lang-banner b { display: block; font-size: 30px; line-height: 1.1; letter-spacing: 0.04em; }
#lam-lang-banner small { display: block; margin-top: 4px; font-size: 13px; color: #ffe2a8; }
#lam-lang-banner.hien { animation: lam-lang-banner 3.6s ease-out both; }
@keyframes lam-lang-banner {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.96); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 520px) {
  #lam-lang-banner b { font-size: 22px; }
  #lam-lang-banner small { font-size: 11px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #hud-keys { display: none; }
  #hud-left {
    width: 240px;
    transform: scale(var(--hud-left-scale));
    transform-origin: top left;
  }
  #hud-realm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #hud {
    --hud-left-scale: 0.68;
    --hud-btns-top: calc(12px + var(--hud-left-h, 138px) * var(--hud-left-scale) + 6px);
  }
  #hud-btns {
    left: 12px;
    width: 240px;
    gap: 4px;
    transform: scale(var(--hud-left-scale));
    transform-origin: top left;
  }
  #hud-btns button {
    height: 34px;
    font-size: 16px;
  }
  #hud-journal {
    top: 12px;
    left: 184px;
    width: min(240px, calc(var(--ui-vw) - 399px));
    max-height: calc(var(--ui-vh) - 24px);
    gap: 6px;
    overflow: hidden;
  }
  #breakthrough-widget,
  #quest-tracker,
  #btn-breakthrough,
  .breakthrough-sheet {
    width: 100%;
    max-width: 100%;
  }
  #hud-right {
    top: 8px;
    right: max(8px, env(safe-area-inset-right));
    width: 132px;
    padding: 4px 3px 5px;
    transform: none;
  }
  #hud-map {
    font-size: 11px;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #minimap {
    width: 120px;
    height: 84px;
    margin: 0 auto 2px;
  }
  #hud-right .dim { font-size: 9px; }
  #hud-online { display: none; }
  #party-hud {
    top: 170px;
    left: 184px;
    right: auto;
    width: min(240px, calc(var(--ui-vw) - 399px));
    max-height: 80px;
    overflow-y: auto;
    transform: none;
  }
  .hotbar {
    left: 50%;
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: max-content;
    max-width: min(520px, calc(var(--ui-vw) - 412px));
    max-height: 52px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 4px;
    transform: translateX(-50%);
    scrollbar-width: none;
  }
  .hotbar::-webkit-scrollbar,
  .phu-bar::-webkit-scrollbar { display: none; }
  .hb-o {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }
  .phu-bar {
    left: 50%;
    right: auto;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 52px + 10px);
    width: max-content;
    max-width: min(520px, calc(var(--ui-vw) - 412px));
    max-height: 52px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 4px;
    transform: translateX(-50%);
    scrollbar-width: none;
  }
  .phu-o {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }
  #btn-target.target-touch {
    right: 26px;
    bottom: 100px;
    width: 38px;
    height: 38px;
    z-index: 5;
  }
  #btn-target.target-touch .hud-icon {
    top: 50%;
    width: 26px;
    height: 26px;
    transform: translate(-50%, -50%);
  }
  #btn-target.target-touch .skill-name { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) and (max-width: 720px) {
  #hud-journal { max-height: calc(var(--ui-vh) - 269px); }
}
@media (orientation: landscape) and (max-height: 400px) {
  #minimap { width: 80px; height: 60px; }
  #hud-right .dim { display: none; }
}
@media (orientation: landscape) and (max-height: 360px) {
  #hud-right {
    display: flex;
    padding: 2px 2px 3px;
  }
  #hud-map { display: none; }
  #hud-btns button {
    height: 30px;
    font-size: 14px;
  }
}
@media (orientation: landscape) and (max-height: 330px) {
  #hud-right { display: none; }
  #hud-left { transform: scale(0.58); }
  #hud { --hud-left-scale: 0.58; }
  #hud-btns { gap: 3px; }
  #hud-btns button { height: 26px; font-size: 12px; }
  #dpad, #joystick { --move-base: 0.72; }
  #hud-journal {
    left: 162px;
    width: min(220px, calc(var(--ui-vw) - 475px));
    max-height: calc(var(--ui-vh) - 150px);
  }
  #party-hud { left: 162px; width: min(220px, calc(var(--ui-vw) - 475px)); }
}
@media (max-width: 760px), (pointer: coarse) {
  #party-hud {
    top: 145px;
    left: auto;
    right: max(8px, env(safe-area-inset-right));
    width: 100px;
    max-height: none;
    overflow: visible;
    transform: none;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  #party-hud {
    top: 8px;
    left: auto;
    width: 100px;
    max-height: none;
    overflow: visible;
  }
}
#encyclopedia {
  z-index: 260;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.encyclopedia-panel {
  width: min(1140px, 96vw);
  height: min(750px, calc(var(--ui-vh, 100vh) * 0.94));
  min-height: 460px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink-light);
  background:
    radial-gradient(circle at 86% 12%, rgba(49, 39, 27, 0.30), transparent 28%),
    linear-gradient(135deg, rgba(47, 36, 23, 0.60), rgba(44, 33, 20, 0.60));
  border: 10px solid var(--wood-dark);
  border-radius: 4px;
  box-shadow: var(--shadow), 0 18px 45px rgba(20, 12, 7, 0.58),
    inset 0 0 0 1px rgba(201, 164, 92, 0.78);
}
.encyclopedia-head {
  min-height: 104px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px 18px;
  color: #f3e7c7;
  background:
    linear-gradient(115deg, rgba(61, 45, 31, 0.98), rgba(35, 26, 18, 0.98)),
    var(--wood);
  border-bottom: 3px solid var(--gold);
}
.encyclopedia-head h2 {
  margin: 4px 0 3px;
  color: #f7e9c6;
  font-family: var(--font-serif);
  font-size: clamp(25px, 3vw, 36px);
  letter-spacing: 0.04em;
}
.encyclopedia-head p {
  max-width: 620px;
  margin: 0;
  color: rgba(243, 231, 199, 0.75);
  font-size: 13px;
}
.encyclopedia-head-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}
.encyclopedia-sync {
  padding: 6px 9px;
  color: #d9e7cd;
  border: 1px solid rgba(122, 168, 135, 0.58);
  border-radius: 999px;
  background: rgba(33, 30, 18, 0.30);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.encyclopedia-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0 0 3px;
  color: #f3e7c7;
  border: 1px solid rgba(243, 231, 199, 0.42);
  border-radius: 50%;
  background: rgba(18, 13, 9, 0.08);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}
.encyclopedia-close:hover,
.encyclopedia-close:focus-visible {
  color: #fff8e6;
  border-color: var(--gold);
  background: rgba(42, 29, 15, 0.30);
}
.encyclopedia-body {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
}
.encyclopedia-rail {
  min-height: 0;
  overflow-y: auto;
  padding: 12px 9px;
  background: linear-gradient(180deg, #334333, #263328);
  border-right: 1px solid rgba(26, 19, 13, 0.5);
  scrollbar-color: rgba(201, 164, 92, 0.55) transparent;
}
.encyclopedia-category {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0;
  padding: 10px 9px;
  color: rgba(240, 235, 214, 0.76);
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.encyclopedia-category:hover,
.encyclopedia-category:focus-visible {
  color: #fff5d9;
  background: rgba(18, 13, 9, 0.07);
}
.encyclopedia-category.is-active {
  color: #e4dac4;
  border-color: rgba(237, 213, 158, 0.88);
  background: linear-gradient(100deg, rgba(46, 35, 21, 0.9), rgba(42, 31, 18, 0.9));
  box-shadow: 0 3px 8px rgba(12, 19, 13, 0.2);
}
.encyclopedia-category-glyph {
  width: 22px;
  flex: 0 0 22px;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 17px;
  text-align: center;
}
.encyclopedia-category.is-active .encyclopedia-category-glyph {
  color: #e4dac4;
}
.encyclopedia-category-label {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 1.25;
}
.encyclopedia-category-count {
  display: block;
  margin-top: 2px;
  opacity: 0.64;
  font-size: 10px;
  font-weight: 400;
}
.encyclopedia-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: rgba(18, 13, 9, 0.42);
}
.encyclopedia-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(57, 43, 30, 0.22);
}
.encyclopedia-search {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  color: var(--ink-light-soft);
  border: 1px solid rgba(57, 43, 30, 0.42);
  border-radius: 3px;
  background: rgba(18, 13, 9, 0.42);
  box-shadow: inset 0 1px 3px rgba(57, 43, 30, 0.08);
}
.encyclopedia-search > span {
  color: #e4dac4;
  font-size: 24px;
  line-height: 1;
}
.encyclopedia-search input {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  color: var(--ink-light);
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
}
.encyclopedia-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(201, 164, 92, 0.2);
}
.encyclopedia-count {
  flex: 0 0 auto;
  color: #ded5c0;
  font-size: 11px;
  white-space: nowrap;
}
.encyclopedia-content {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(250px, 0.78fr) minmax(330px, 1.22fr);
  gap: 13px;
  padding: 13px 16px 16px;
}
.encyclopedia-list-wrap,
.encyclopedia-detail {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(57, 43, 30, 0.25);
  border-radius: 3px;
  background: rgba(18, 13, 9, 0.42);
}
.encyclopedia-list {
  height: 100%;
  overflow-y: auto;
  padding: 5px;
  scrollbar-color: rgba(128, 99, 53, 0.58) transparent;
}
.encyclopedia-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  color: var(--ink-light);
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.encyclopedia-row + .encyclopedia-row {
  margin-top: 2px;
}
.encyclopedia-row:hover,
.encyclopedia-row:focus-visible {
  border-color: rgba(201, 164, 92, 0.52);
  background: rgba(42, 29, 15, 0.30);
}
.encyclopedia-row.is-selected {
  border-color: rgba(128, 99, 53, 0.5);
  background: linear-gradient(90deg, rgba(42, 29, 15, 0.30), rgba(42, 29, 15, 0.30));
  box-shadow: inset 3px 0 0 #927342;
}
.encyclopedia-row:active {
  transform: translateY(1px);
}
.encyclopedia-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  color: #e4dac4;
  border: 1px solid rgba(128, 99, 53, 0.42);
  border-radius: 3px;
  background: rgba(18, 13, 9, 0.42);
}
.encyclopedia-icon.is-large {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
  border-color: rgba(201, 164, 92, 0.75);
  background: rgba(18, 13, 9, 0.42);
  box-shadow: 0 3px 10px rgba(57, 43, 30, 0.12);
}
.encyclopedia-icon canvas {
  image-rendering: pixelated;
}
.encyclopedia-glyph {
  font-family: var(--font-serif);
  font-size: 19px;
}
.encyclopedia-icon.is-large .encyclopedia-glyph {
  font-size: 30px;
}
.encyclopedia-row-copy {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
}
.encyclopedia-row-name {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.encyclopedia-row-meta,
.encyclopedia-detail-eyebrow {
  color: #ddd4bf;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.encyclopedia-detail {
  overflow-y: auto;
  padding: 17px 18px 24px;
  scrollbar-color: rgba(128, 99, 53, 0.58) transparent;
}
.encyclopedia-detail-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(57, 43, 30, 0.2);
}
.encyclopedia-detail-heading {
  min-width: 0;
}
.encyclopedia-detail-heading h3 {
  margin: 3px 0 0;
  color: #e2cab6;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.08;
}
.encyclopedia-detail-block {
  margin-top: 17px;
}
.encyclopedia-detail-block h4 {
  margin: 0 0 7px;
  color: #e7d1b1;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.03em;
}
.encyclopedia-detail-block p {
  margin: 0 0 5px;
  color: #e2d8c2;
  font-size: 13px;
  line-height: 1.52;
}
.encyclopedia-stats {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1.25fr);
  margin: 0;
  border-top: 1px solid rgba(57, 43, 30, 0.14);
}
.encyclopedia-stats dt,
.encyclopedia-stats dd {
  margin: 0;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(57, 43, 30, 0.12);
  font-size: 12px;
}
.encyclopedia-stats dt {
  color: #ded4c0;
}
.encyclopedia-stats dd {
  color: #e4c8b4;
  font-weight: 600;
  text-align: right;
}
.encyclopedia-empty {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: 30px;
  color: #dcd3bf;
  font-family: var(--font-serif);
  font-size: 16px;
  text-align: center;
}
.encyclopedia-detail-empty {
  min-height: 260px;
}
@media (max-width: 760px) {
  .encyclopedia-panel {
    width: 100%;
    height: calc(var(--ui-vh, 100vh) * 0.98);
    min-height: 0;
    border-width: 6px;
  }
  .encyclopedia-head {
    min-height: 88px;
    padding: 14px 14px 12px;
  }
  .encyclopedia-head p,
  .encyclopedia-sync {
    display: none;
  }
  .encyclopedia-head-meta {
    gap: 7px;
  }
  .encyclopedia-body {
    display: flex;
    flex-direction: column;
  }
  .encyclopedia-rail {
    flex: 0 0 auto;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 7px;
    border-right: 0;
    border-bottom: 1px solid rgba(26, 19, 13, 0.5);
  }
  .encyclopedia-category {
    width: auto;
    flex: 0 0 auto;
    gap: 6px;
    margin: 0;
    padding: 7px 9px;
    white-space: nowrap;
  }
  .encyclopedia-category-glyph {
    width: auto;
    flex-basis: auto;
  }
  .encyclopedia-category-count {
    display: inline;
    margin: 0 0 0 4px;
  }
  .encyclopedia-main {
    min-height: 0;
  }
  .encyclopedia-toolbar {
    padding: 9px 10px;
  }
  .encyclopedia-content {
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 9px 10px 10px;
  }
  .encyclopedia-list-wrap {
    min-height: 170px;
    max-height: 34vh;
  }
  .encyclopedia-detail {
    max-height: 43vh;
  }
}
#ritual-caption {
  position: fixed;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  z-index: 60;
  max-width: min(80vw, 640px);
  padding: 10px 22px;
  background: none;
  opacity: 0.5;
  color: #f3e6c4;
  font: 600 18px/1.4 "Noto Serif", serif;
  text-align: center;
  white-space: pre-line;
  text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000, 0 1px 3px #000;
  pointer-events: none;
  animation: cap-in 0.28s ease-out both;
}
#ritual-caption.cap-out { animation: cap-out 0.7s ease-in forwards; }
@keyframes cap-in {
  from { opacity: 0;   transform: translate(-50%, -50%) translateY(10px); }
  to   { opacity: 0.5; transform: translate(-50%, -50%); }
}
@keyframes cap-out {
  from { opacity: 0.5; transform: translate(-50%, -50%); }
  to   { opacity: 0;   transform: translate(-50%, -50%) translateY(-30px); }
}
#tut-ring {
  position: fixed;
  z-index: 159;
  pointer-events: none;
  border: 2px solid #f7c822;
  box-shadow: 0 0 0 3px rgba(247, 200, 34, 0.25), 0 0 18px 4px rgba(247, 200, 34, 0.45);
  animation: tut-ring 1.2s ease-in-out infinite;
  transition: left 0.15s, top 0.15s, width 0.15s, height 0.15s;
}
@keyframes tut-ring {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.06); }
}
#fly-hint-ring {
  position: fixed;
  z-index: 159;
  pointer-events: none;
  border: 2px solid #9fe3ff;
  box-shadow: 0 0 0 3px rgba(159, 227, 255, 0.25), 0 0 18px 4px rgba(159, 227, 255, 0.5);
  animation: tut-ring 1.2s ease-in-out infinite;
}
#fly-hint-arrow {
  position: fixed;
  z-index: 160;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  color: #dff6ff;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  animation: fly-hint-bob 0.9s ease-in-out infinite;
}
#fly-hint-arrow b { font-size: 22px; line-height: 1; color: #9fe3ff; }
@keyframes fly-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
#fly-hint-chip {
  position: fixed;
  z-index: 160;
  pointer-events: none;
  left: 50%; bottom: 92px;
  transform: translateX(-50%);
  padding: 7px 14px;
  color: #eaf8ff;
  background: rgba(18, 36, 44, 0.9);
  border: 1px solid #9fe3ff;
  border-radius: 6px;
  font-family: var(--font-ui); font-size: 13px;
  box-shadow: 0 0 14px rgba(159, 227, 255, 0.35);
  animation: tut-ring 1.2s ease-in-out infinite;
}
#fly-hint-chip kbd {
  padding: 0 5px; border: 1px solid #9fe3ff; border-radius: 3px;
  font-family: inherit; font-weight: 700;
}
#fly-hint-ring[hidden], #fly-hint-arrow[hidden], #fly-hint-chip[hidden] { display: none; }
#tut-card {
  position: fixed;
  z-index: 160;
  width: min(300px, calc(100vw - 16px));
  padding: 10px 12px 10px;
  color: #efe2c2;
  font: 13px/1.5 var(--font-ui);
  pointer-events: none;
  background: linear-gradient(180deg, #2a1f15, #19120c);
  box-shadow: var(--shadow), 0 0 0 1px rgba(247, 200, 34, 0.35);
  transition: left 0.15s, top 0.15s;
}
#tut-card button { pointer-events: auto; }
#tut-card .tut-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--gold); letter-spacing: 0.04em;
}
#tut-card .tut-skip {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: rgba(239, 226, 194, 0.55); font: 11px var(--font-ui);
  text-decoration: underline;
}
#tut-card .tut-skip:hover { color: #efe2c2; }
#tut-card .tut-title {
  margin: 2px 0 4px;
  font: 600 16px/1.3 var(--font-serif);
  color: #ffe9b0;
}
#tut-card.tut-ok .tut-title { color: #9fe0a8; }
#tut-card .tut-body b { color: #ffe9b0; }
#tut-card kbd {
  display: inline-block; min-width: 1.5em; margin: 0 1px; padding: 0 5px;
  border: 1px solid rgba(201, 164, 92, 0.6); border-bottom-width: 2px;
  border-radius: 3px; background: rgba(0, 0, 0, 0.35);
  font: 600 11px/1.6 var(--font-ui); text-align: center; color: #ffe9b0;
}
#tut-card .tut-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; min-height: 22px;
}
#tut-card .tut-dots i {
  display: inline-block; width: 7px; height: 7px; margin-right: 5px;
  border-radius: 50%; background: rgba(201, 164, 92, 0.25);
}
#tut-card .tut-dots i.on  { background: var(--gold); }
#tut-card .tut-dots i.cur { background: #f7c822; box-shadow: 0 0 6px #f7c822; }
#tut-card .tut-ack { width: auto; flex: none; margin: 0; padding: 3px 12px; font-size: 12px; }
#tut-card .tut-ack[hidden] { display: none; }
#tut-card .tut-dots { display: flex; flex: none; }
@media (max-height: 480px) {
  #tut-card { width: min(250px, calc(100vw - 16px)); padding: 6px 9px; font-size: 12px; line-height: 1.4; }
  #tut-card .tut-title { font-size: 14px; margin: 0 0 2px; }
  #tut-card .tut-foot { margin-top: 4px; min-height: 18px; }
  #tut-card kbd { font-size: 10px; }
}
#hint-ring {
  position: fixed;
  z-index: 229;
  pointer-events: none;
  border: 2px solid #f7c822;
  box-shadow: 0 0 0 3px rgba(247, 200, 34, 0.25), 0 0 18px 4px rgba(247, 200, 34, 0.45);
  animation: tut-ring 1.2s ease-in-out infinite;
  transition: left 0.15s, top 0.15s, width 0.15s, height 0.15s;
}
#hint-card {
  position: fixed;
  z-index: 230;
  width: min(280px, calc(100vw - 16px));
  padding: 9px 12px 9px;
  color: #efe2c2;
  font: 13px/1.5 var(--font-ui);
  pointer-events: none;
  background: linear-gradient(180deg, #2a1f15, #19120c);
  box-shadow: var(--shadow), 0 0 0 1px rgba(247, 200, 34, 0.35);
  transition: left 0.15s, top 0.15s;
}
#hint-card button { pointer-events: auto; }
#hint-card .tut-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--gold); letter-spacing: 0.04em;
}
#hint-card .tut-skip {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: rgba(239, 226, 194, 0.55); font: 11px var(--font-ui);
  text-decoration: underline;
}
#hint-card .tut-skip:hover { color: #efe2c2; }
#hint-card .tut-title { margin: 2px 0 4px; font: 600 15px/1.3 var(--font-serif); color: #ffe9b0; }
#hint-card.tut-ok .tut-title { color: #9fe0a8; }
#hint-card .tut-body b { color: #ffe9b0; }
#hint-card kbd {
  display: inline-block; min-width: 1.5em; margin: 0 1px; padding: 0 5px;
  border: 1px solid rgba(201, 164, 92, 0.6); border-bottom-width: 2px;
  border-radius: 3px; background: rgba(0, 0, 0, 0.35);
  font: 600 11px/1.6 var(--font-ui); text-align: center; color: #ffe9b0;
}
#hint-card .tut-foot { display: flex; align-items: center; justify-content: flex-end; margin-top: 6px; }
#hint-card .tut-ack { width: auto; flex: none; margin: 0; padding: 3px 12px; font-size: 12px; }
#hint-card .tut-ack[hidden] { display: none; }
#hint-card .tut-foot:has(.tut-ack[hidden]) { display: none; }
#hint-ring[hidden], #hint-card[hidden] { display: none; }
@media (max-height: 480px) {
  #hint-card { width: min(240px, calc(100vw - 16px)); padding: 6px 9px; font-size: 12px; line-height: 1.4; }
  #hint-card .tut-title { font-size: 13px; margin: 0 0 2px; }
  #hint-card kbd { font-size: 10px; }
}
#hint-card.in-bag {
  position: relative;
  left: auto !important; top: auto !important;
  z-index: auto;
  flex: none;
  width: auto;
  margin: 8px 0 0;
  padding: 5px 44px 6px 10px;
  font-size: 12px; line-height: 1.4;
  box-shadow: inset 0 0 0 1px rgba(247, 200, 34, 0.45);
  transition: none;
}
#hint-card.in-bag .tut-head { position: absolute; top: 3px; right: 6px; }
#hint-card.in-bag .tut-count { display: none; }
#hint-card.in-bag .tut-title { margin: 0 0 1px; font-size: 13px; }
#hint-card.in-bag .tut-foot { margin-top: 4px; }
.dh-toast {
  position: fixed; z-index: 40;
  top: 12px; right: 190px;
  width: 196px;
  font-family: var(--font-serif, serif);
  pointer-events: auto;
}
.dh-toast-card {
  padding: 6px 7px 7px;
  color: #f1e3c0;
  background: linear-gradient(180deg, rgba(52, 36, 22, 0.96), rgba(28, 19, 12, 0.96));
  border: 1px solid #b98a3e;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  animation: dh-toast-in 220ms ease-out;
}
@keyframes dh-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.dh-toast-head { display: flex; align-items: center; gap: 6px; }
.dh-toast-icon {
  display: grid; place-items: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%;
  color: #2a1a0c; background: radial-gradient(circle at 35% 30%, #ffe39a, #c98f2c);
  font-size: 11px; line-height: 1;
}
.dh-toast-title { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.dh-toast-title strong { color: #f6d98a; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-toast-title small { color: #cdb88f; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dh-toast-clock {
  flex: none; color: #ffe08a; font-size: 17px; font-variant-numeric: tabular-nums;
}
.dh-toast-min {
  flex: none; width: 20px; height: 20px; padding: 0;
  color: #f1e3c0; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(201, 164, 92, 0.45); border-radius: 4px;
  font-size: 14px; line-height: 16px; cursor: pointer;
}
.dh-toast-min:hover { background: rgba(255, 255, 255, 0.14); }
.dh-toast-msg { margin: 4px 0 0; color: #ffb4a0; font-size: 10px; line-height: 1.3; }
.dh-toast-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 5px; margin-top: 6px; }
.dh-toast-btn {
  min-height: 26px; padding: 3px 5px; cursor: pointer;
  color: #f1e3c0; background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 164, 92, 0.5); border-radius: 4px;
  font-family: inherit; font-size: 12px; font-weight: 700;
}
.dh-toast-btn:hover:not(:disabled) { filter: brightness(1.15); }
.dh-toast-btn:active:not(:disabled) { transform: translateY(1px); }
.dh-toast-btn.main { color: #20140a; background: linear-gradient(180deg, #ffd978, #d39a36); border-color: #f2c76a; }
.dh-toast-btn.done { color: #bfe7b8; background: rgba(80, 140, 80, 0.22); border-color: rgba(140, 200, 130, 0.5); }
.dh-toast-btn:disabled { cursor: default; opacity: 0.85; }
.dh-toast-btn:focus-visible, .dh-toast-min:focus-visible, .dh-toast-pill:focus-visible {
  outline: 2px solid #ffe08a; outline-offset: 2px;
}
.dh-toast-pill {
  display: flex; align-items: center; gap: 5px; margin-left: auto;
  padding: 2px 8px 2px 2px; cursor: pointer;
  color: #f1e3c0; background: rgba(34, 23, 14, 0.94);
  border: 1px solid #b98a3e; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
  font-family: inherit; font-size: 11px; font-weight: 700;
}
.dh-toast-pill b { color: #ffe08a; font-variant-numeric: tabular-nums; }
.dh-toast.min { width: auto; }
.dh-toast.urgent #dh-toast-clock, .dh-toast.urgent .dh-toast-pill b { color: #ff9f7a; }
#dh-dem-nguoc {
  position: fixed; left: 50%; top: 38%; z-index: 300;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--font-serif, serif); font-weight: 700;
  font-size: 96px; line-height: 1; color: #ffe08a;
  text-shadow: 0 0 18px rgba(255, 170, 60, 0.75), 0 4px 0 #3a2410, 0 0 4px #000;
}
#dh-dem-nguoc.go { font-size: 56px; color: #ff8a5a; }
#dh-sat {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 96px);
  transform: translateX(-50%); z-index: 30; pointer-events: none;
  display: grid; grid-template-columns: auto minmax(120px, 34vw) auto; align-items: center;
  column-gap: 6px; font: 700 12px/1 system-ui, sans-serif; text-shadow: 0 1px 2px #000;
}
#dh-sat.hidden { display: none; }
#dh-sat .dh-sat-so.me  { color: #8fe3ff; text-align: right; min-width: 2.5em; }
#dh-sat .dh-sat-so.foe { color: #ff9a8a; min-width: 2.5em; }
#dh-sat .dh-sat-thanh {
  height: 5px; border-radius: 3px; overflow: hidden;
  background: #b8433a; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
#dh-sat .dh-sat-thanh i { display: block; height: 100%; width: 50%; background: #3fb4e6; transition: width 0.25s; }
#dh-sat .dh-sat-gio {
  grid-column: 2; justify-self: center; margin-top: 3px;
  color: #f2e2b8; font-size: 11px; font-variant-numeric: tabular-nums;
}
#dh-sat.urgent .dh-sat-gio { color: #ff8a73; }
#dh-xem {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 8px);
  transform: translateX(-50%); z-index: 40;
  width: min(420px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 6px 10px 8px; border-radius: 10px;
  background: rgba(20, 14, 8, 0.86); border: 1px solid #d9c26a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  color: #f2e2b8; font: 600 12px/1.25 system-ui, sans-serif;
}
#dh-xem.hidden { display: none; }
#dh-xem .dh-xem-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
#dh-xem .dh-xem-tag {
  background: #c0392b; color: #fff; border-radius: 4px; padding: 1px 6px;
  font-size: 10px; letter-spacing: 0.4px;
}
#dh-xem .dh-xem-vong { flex: 1; color: #fff3b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dh-xem .dh-xem-gio { font-variant-numeric: tabular-nums; color: #f2e2b8; }
#dh-xem.urgent .dh-xem-gio { color: #ff8a73; }
#dh-xem .dh-xem-roi {
  border: 1px solid #d9c26a; background: #3a2410; color: #fff3b0;
  border-radius: 12px; padding: 3px 10px; font: inherit; cursor: pointer;
}
#dh-xem .dh-xem-doi { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; }
#dh-xem .dh-xem-ben { min-width: 0; }
#dh-xem .dh-xem-ben.b { text-align: right; }
#dh-xem .dh-xem-ten { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dh-xem .dh-xem-ben.a .dh-xem-ten { color: #8fe3ff; }
#dh-xem .dh-xem-ben.b .dh-xem-ten { color: #ff9a8a; }
#dh-xem .dh-xem-ben.thang .dh-xem-ten { color: #ffe08a; }
#dh-xem .dh-xem-ben.thua .dh-xem-ten { color: #8a8a8a; text-decoration: line-through; }
#dh-xem .dh-xem-mau {
  height: 6px; margin-top: 3px; border-radius: 3px; overflow: hidden;
  background: #3b1d18; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
#dh-xem .dh-xem-mau i { display: block; height: 100%; width: 100%; background: #5fd06a; transition: width 0.25s; }
#dh-xem .dh-xem-ben.b .dh-xem-mau i { margin-left: auto; }
#dh-xem .dh-xem-vs { font-size: 11px; color: #bfae80; text-align: center; font-variant-numeric: tabular-nums; }
#dh-dem-nguoc.pop { animation: dh-dem-pop 420ms ease-out; }
@keyframes dh-dem-pop {
  from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.tmc-toast .tmc-clock {
  flex: none; color: #ffe08a; font-size: 17px; font-variant-numeric: tabular-nums;
}
.tmc-toast.urgent .tmc-clock, .tmc-toast.urgent .dh-toast-pill b { color: #ff9f7a; }
#tmc-tran {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 96px);
  transform: translateX(-50%); z-index: 30; pointer-events: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  column-gap: 8px; width: min(520px, calc(100vw - 32px));
  padding: 5px 8px; border-radius: 6px;
  color: #f1e3c0; background: rgba(28, 19, 12, 0.82);
  border: 1px solid rgba(185, 138, 62, 0.7);
  font: 700 11px/1.2 var(--font-serif, serif); text-shadow: 0 1px 2px #000;
}
#tmc-tran.hidden { display: none; }
#tmc-tran .tmc-ben {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; column-gap: 6px; min-width: 0;
}
#tmc-tran .tmc-ten { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #f6d98a; }
#tmc-tran .tmc-dung { color: #cdb88f; font-weight: 400; font-size: 10px; }
#tmc-tran .tmc-thanh {
  grid-column: 1 / -1; height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(0, 0, 0, 0.55); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
#tmc-tran .tmc-thanh i { display: block; height: 100%; width: 0; background: #c95b48; transition: width 0.25s; }
#tmc-tran .tmc-ben.minh .tmc-thanh i { background: #3fb4e6; }
#tmc-tran .tmc-ben.minh .tmc-ten { color: #8fe3ff; }
#tmc-tran .tmc-mau { grid-column: 1 / -1; font-size: 10px; color: #e9d8b0; font-variant-numeric: tabular-nums; }
#tmc-tran .tmc-ben.b { text-align: right; }
#tmc-tran .tmc-ben.b .tmc-thanh { transform: scaleX(-1); }
#tmc-tran .tmc-giua {
  display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; max-width: 180px;
}
#tmc-tran .tmc-tran-ten, #tmc-tran .tmc-ket { font-weight: 400; font-size: 10px; color: #cdb88f; }
#tmc-tran .tmc-gio { font-size: 15px; color: #ffe08a; font-variant-numeric: tabular-nums; }
#tmc-tran.urgent .tmc-gio { color: #ff8a73; }
#tmc-dem {
  position: fixed; left: 50%; top: 38%; z-index: 300;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--font-serif, serif); font-weight: 700;
  font-size: 96px; line-height: 1; color: #ffe08a;
  text-shadow: 0 0 18px rgba(255, 170, 60, 0.75), 0 4px 0 #3a2410, 0 0 4px #000;
}
#tmc-dem.hidden { display: none; }
#tmc-dem.go { font-size: 56px; color: #ff8a5a; }
#tmc-dem.pop { animation: dh-dem-pop 420ms ease-out; }
.tmc-panel { width: min(400px, calc(var(--ui-vw, 100vw) - 24px)); }
.tmc-panel .tmc-h { margin: 10px 0 4px; font-size: 13px; }
.tmc-ds { display: flex; flex-direction: column; gap: 2px; }
.tmc-dong {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline;
  padding: 3px 6px; border-radius: 4px; background: rgba(57, 43, 30, 0.07); font-size: 12px;
  text-align: left;
}
.tmc-dong.minh { background: rgba(211, 154, 54, 0.22); font-weight: 600; }
.tmc-dong-hang { min-width: 1.4em; text-align: right; color: #d8c7a6; font-variant-numeric: tabular-nums; }
.tmc-dong-ten { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tmc-dong-so { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.tmc-dong.hai { grid-template-columns: minmax(0, 1fr) auto; }
.tmc-luat { margin: 10px 0 6px; font-size: 11px; line-height: 1.45; opacity: 0.85; }
@media (max-width: 560px) {
  #tmc-tran { top: calc(env(safe-area-inset-top, 0px) + 112px); font-size: 10px; }
  #tmc-tran .tmc-giua { max-width: 110px; }
}
.inspect-panel { width: min(340px, calc(var(--ui-vw, 100vw) - 24px)); }
.inspect-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.inspect-head h2 { margin: 2px 0 0; }
.inspect-head small { color: #e1d0b7; font-size: 12px; font-weight: 700; }
.inspect-x {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  color: #e3cbb5; background: rgba(73, 52, 29, 0.1);
  border: 1px solid rgba(75, 49, 25, 0.4); border-radius: 4px; font-size: 14px;
}
.inspect-x:hover { background: rgba(73, 52, 29, 0.2); }
#inspect-avatar {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: 54px; height: 81px; transform: translate(-50%, -50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.65));
}
.inspect-board .equip-slot:disabled { cursor: default; }
.inspect-item {
  display: flex; flex-direction: column; gap: 1px;
  margin: 6px 0 0; padding: 5px 8px;
  background: rgba(73, 52, 29, 0.08); border: 1px solid rgba(73, 52, 29, 0.22); border-radius: 3px;
}
.inspect-item b { color: #e6cdb2; font-size: 12px; }
.inspect-item small { color: #e1d0b7; font-size: 10px; }
.inspect-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
.inspect-stat {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 8px; font-size: 11px; color: #e2ceb6;
  background: rgba(73, 52, 29, 0.08); border-left: 3px solid #8a7050; border-radius: 2px;
}
.inspect-stat b { color: #e4cfb4; font-size: 13px; font-variant-numeric: tabular-nums; }
.inspect-stat.hp { border-left-color: #c24a3c; }
.inspect-stat.mp { border-left-color: #3f7fb8; }
.inspect-stat.sp { border-left-color: #8a55c2; }
.inspect-stat.bp { border-left-color: #d0822a; }
.inspect-stat.atk { border-left-color: #b89430; grid-column: 1 / -1; }
html.gfx-sieu-lo .dosat-touch.active,
html.gfx-sieu-lo #row-xp.full .fill.xp,
html.gfx-sieu-lo #downed-badge {
  animation: none;
}
html.gfx-sieu-lo #row-xp.full::after { display: none; }
#dialog-choices.forge-box { display: block; }
.forge-grid {
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px; margin: 10px 0 2px;
}
.forge-slot { min-width: 0; border-width: 2px; }
#dialog .hongty-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#dialog .hongty-tabs .bag-filter {
  overflow: hidden; text-overflow: ellipsis; padding: 5px 2px;
  font-size: clamp(11px, 3.1vw, 13px) !important; letter-spacing: 0;
}
#dialog .hongty-detail .bag-detail-card { background: #1e1711; border-color: #b18f56; }
.hongty-than.co-thu { display: flex; gap: 10px; align-items: flex-start; }
.hongty-than.co-thu .forge-grid { flex: 1; min-width: 0; }
.hongty-thu { flex: 0 0 120px; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 4px; text-align: center;
  background: rgba(0,0,0,.28); border: 1px solid rgba(177,143,86,.5); border-radius: 3px; }
.hongty-thu[hidden] { display: none; }
.hongty-thu canvas { width: 112px; height: 168px; image-rendering: pixelated; cursor: pointer; }
.hongty-thu b { font-size: 12px; color: #f0dfb2; }
.hongty-thu small { font-size: 10px; line-height: 1.35; color: #cdb993; }
.forge-slot.on { outline: 2px solid #f0d27a; outline-offset: -2px; }
.hongty-stones { margin-top: 8px; text-align: right; font-size: 12px; color: #d9c27a; }
.forge-slot canvas { width: 80%; height: 80%; }
.bag-slot.grade-common { border-color: var(--wood); }
.forge-tag { font-size: 9px; letter-spacing: 0.02em; }
  .forge-tag.ready { background: rgba(56, 81, 60, 0.95); color: #e9f5de; }
  .forge-tag.recipe { background: rgba(94, 74, 34, 0.94); color: #f5e3ab; }
  .forge-tag.reward { background: rgba(153, 111, 20, 0.97); color: #fff1a8; }
  .forge-tag.drop  { background: rgba(80, 60, 110, 0.92); color: #efe3ff; }
#dialog .forge-detail { position: fixed; z-index: 260; color: #e5dac2; }
.forge-detail .forge-section {
  margin-top: 12px; color: #e7d0b1; font-family: var(--font-serif);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.forge-detail .forge-mats, .forge-detail .forge-how {
  margin: 4px 0 0; padding-left: 0; list-style: none;
  font-size: 12px; line-height: 1.6; color: var(--ink-light-soft);
}
.forge-detail .forge-mats li { color: var(--blood); font-weight: 700; }
.forge-detail .forge-mats li.met { color: #badec2; }
.forge-detail .forge-how li::before { content: '· '; color: #8a6420; }
.forge-detail .equip-action:disabled { flex-basis: 100%; }
@media (max-width: 520px) {
  .forge-grid { grid-template-columns: repeat(5, 1fr); }
}
.market-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
  margin: 2px 0 4px; font-size: 12px; color: var(--ink-light-soft);
  font-variant-numeric: tabular-nums;
}
.market-purse { color: #e8d4aa; font-weight: 700; }
.market-tabs { margin-bottom: 2px; }
#dialog > .scroll-panel:has(.market-box) { width: min(640px, calc(100vw - 24px)); }
.market-groups.an { visibility: hidden; pointer-events: none; }
.market-box .market-body {
  height: min(380px, calc(var(--ui-vh, 100vh) - 320px));
  min-height: 200px;
  overflow-y: auto; overscroll-behavior: contain;
}
#dialog:not(.choice-only) .dlg-choices.market-box { overflow: visible; }
.market-bar { display: flex; gap: 6px; align-items: center; margin: 2px 0 6px; }
.market-sort {
  flex: 1 1 auto; min-width: 0; min-height: 30px; padding: 3px 6px;
  color: var(--ink); background: #efe4c8;
  border: 1px solid rgba(75, 49, 25, 0.45); border-radius: 2px;
  font-family: var(--font-serif); font-size: 12px;
}
.market-bar .equip-action { flex: none; min-height: 30px; }
.market-list { display: flex; flex-direction: column; gap: 4px; }
.market-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 4px 8px 4px 4px; text-align: left; cursor: pointer;
  color: #e7ddc9; font: inherit;
  background: rgba(73, 52, 29, 0.07);
  border: 1px solid rgba(75, 49, 25, 0.3); border-radius: 2px;
}
.market-row:hover { border-color: var(--gold); background: rgba(73, 52, 29, 0.14); }
.market-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.market-row.mine { border-left: 3px solid #38513c; }
.market-icon { flex: none; width: 40px; height: 40px; cursor: inherit; }
.market-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.market-name {
  font-family: var(--font-serif); font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.market-meta { font-size: 11px; color: #d2c5ac; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-price {
  flex: none; color: #f3e4c3; font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.market-price::after { content: ' LT'; font-size: 10px; color: #a58a5a; }
.market-empty, .market-hint { padding: 10px 4px; font-size: 12px; color: #826843; text-align: center; }
.market-hint { padding: 2px 4px 0; text-align: left; font-size: 11px; }
.market-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 2px; }
.market-pager .equip-action { flex: 0 0 auto; min-height: 30px; }
.market-page { font-size: 12px; color: #d2c5ac; font-variant-numeric: tabular-nums; }
.market-cho {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  font-size: 12px; color: #e7ddc9; font-weight: 700;
  background: rgba(61, 101, 70, 0.1); border: 1px dashed #3d6546; border-radius: 2px;
}
.market-cho span { flex: 1 1 auto; }
.market-cho .equip-action { flex: none; min-height: 30px; }
.market-detail .market-facts {
  margin: 10px 0 0; padding: 0; list-style: none;
  font-size: 12px; line-height: 1.7; color: var(--ink-light-soft);
}
.market-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.market-field { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #d2c5ac; }
.market-field.hidden { display: none; }
.market-field > span { flex: 0 0 70px; }
.market-field input {
  flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 4px 8px;
  color: var(--ink); background: #fbf4e2;
  border: 1px solid #927954; border-radius: 2px;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.market-field input:focus { outline: 2px solid rgba(201, 164, 92, 0.5); border-color: var(--gold); }
.market-field .market-max { flex: 0 0 auto; min-height: 32px; }
.market-calc { font-size: 12px; color: #c4d6ad; font-weight: 700; }
.market-warn:empty { display: none; }
.khu-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  padding: 16px;
}
.khu-overlay.hidden { display: none; }
.khu-scroll {
  position: relative;
  width: min(420px, 100%);
  padding: 18px 26px 16px;
  background: linear-gradient(#f3e3bf, #e6cf9f);
  border: 3px solid #8a5a32;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #f8ecd0, 0 8px 24px rgba(0, 0, 0, 0.45);
  font-family: var(--font-ui);
}
.khu-scroll::before,
.khu-scroll::after {
  content: ''; position: absolute; top: -8px; bottom: -8px; width: 14px;
  background: linear-gradient(90deg, #b7864f, #e9cf9c 45%, #a8753f);
  border: 2px solid #6b4424; border-radius: 8px;
}
.khu-scroll::before { left: -10px; }
.khu-scroll::after  { right: -10px; }
.khu-head {
  display: flex; align-items: center; justify-content: center; position: relative;
  height: 34px; margin: 0 0 16px;
  background: #e8a84c; border-radius: 3px;
  color: #d0281c; font-weight: 700; font-size: 18px;
}
.khu-x {
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #fff; background: #e33a3a; color: #fff;
  font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
}
.khu-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  justify-items: center;
}
.khu-o {
  width: 46px; height: 46px; cursor: pointer;
  border: 2px solid #3b2f25; border-radius: 6px;
  background: linear-gradient(#6f6254, #4d4338);
  box-shadow: inset 0 0 0 2px #8b7c6a;
  color: #58e04a; font-size: 17px; font-weight: 700;
  text-shadow: 0 1px 0 #000;
}
.khu-o.vang { color: #58e04a; }
.khu-o.dong { color: #ffa53a; }
.khu-o.day  { color: #ff4a3a; }
.khu-o.dang {
  background: linear-gradient(#c9b39a, #a8927a);
  box-shadow: inset 0 0 0 2px #efe0c8, 0 0 0 2px #f2c14e;
  color: #ffd54a;
}
.khu-o:active { transform: translateY(1px); }
.khu-note {
  margin-top: 14px; text-align: center;
  color: #e8cbb0; font-size: 12px;
}
@media (max-width: 380px) {
  .khu-grid { gap: 8px; }
  .khu-o { width: 40px; height: 40px; }
}
#encyclopedia .encyclopedia-panel {
  width: min(980px, 94vw);
  height: min(670px, calc(var(--ui-vh, 100vh) * 0.92));
  min-height: 400px;
  border-width: 5px;
  border-radius: 7px;
  box-shadow: 0 14px 36px rgba(20, 12, 7, 0.5),
    inset 0 0 0 1px rgba(201, 164, 92, 0.72);
}
#encyclopedia .encyclopedia-head {
  min-height: 82px;
  padding: 14px 17px 12px;
  gap: 14px;
}
#encyclopedia .encyclopedia-head h2 {
  margin: 2px 0 2px;
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: 0.02em;
}
#encyclopedia .encyclopedia-head p {
  font-size: 12px;
}
#encyclopedia .encyclopedia-body {
  grid-template-columns: 164px minmax(0, 1fr);
}
#encyclopedia .encyclopedia-rail {
  padding: 8px 7px;
}
#encyclopedia .encyclopedia-category {
  gap: 7px;
  margin: 1px 0;
  padding: 8px 7px;
  border-radius: 5px;
}
#encyclopedia .encyclopedia-category-label {
  font-size: 11px;
}
#encyclopedia .encyclopedia-toolbar {
  min-height: 49px;
  padding: 8px 11px;
}
#encyclopedia .encyclopedia-search input {
  padding: 8px 0;
  font-size: 12px;
}
#encyclopedia .encyclopedia-hint {
  flex: 0 0 auto;
  color: #dcd3bf;
  font-size: 10px;
  white-space: nowrap;
}
#encyclopedia .encyclopedia-content {
  grid-template-columns: minmax(0, 1.12fr) minmax(286px, 0.88fr);
  gap: 10px;
  padding: 10px 11px 11px;
}
#encyclopedia .encyclopedia-list-wrap {
  overflow: hidden;
}
#encyclopedia .encyclopedia-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  align-content: start;
  gap: 7px;
  padding: 7px;
}
#encyclopedia .encyclopedia-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding: 4px 4px 5px;
  border-bottom: 1px solid rgba(128, 99, 53, 0.4);
}
#encyclopedia .encyclopedia-group:first-child { margin-top: 0; }
#encyclopedia .encyclopedia-group-title {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #e8d0b0;
}
#encyclopedia .encyclopedia-group-count {
  font-size: 0.8em;
  color: #e0d6c1;
}
#encyclopedia .encyclopedia-tile {
  min-width: 0;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 5px 6px;
  color: var(--ink-light);
  border: 1px solid rgba(128, 99, 53, 0.34);
  border-radius: 6px;
  background: rgba(18, 13, 9, 0.42);
  text-align: center;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease,
    background-color 140ms ease, box-shadow 140ms ease;
}
#encyclopedia .encyclopedia-tile:hover,
#encyclopedia .encyclopedia-tile:focus-visible {
  border-color: rgba(128, 99, 53, 0.78);
  background: rgba(42, 29, 15, 0.30);
  outline: none;
  transform: translateY(-1px);
}
#encyclopedia .encyclopedia-tile.is-selected {
  border-color: #927342;
  background: linear-gradient(145deg, rgba(46, 35, 21, 0.60),
    rgba(42, 29, 15, 0.30));
  box-shadow: inset 0 0 0 2px rgba(146, 115, 66, 0.58),
    0 3px 8px rgba(57, 43, 30, 0.12);
}
#encyclopedia .encyclopedia-tile .encyclopedia-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-color: rgba(128, 99, 53, 0.34);
  border-radius: 5px;
  background: rgba(18, 13, 9, 0.42);
}
#encyclopedia .encyclopedia-tile .encyclopedia-row-copy {
  width: 100%;
  align-items: center;
  gap: 2px;
}
#encyclopedia .encyclopedia-tile .encyclopedia-row-name {
  width: 100%;
  font-size: 10px;
  line-height: 1.18;
}
#encyclopedia .encyclopedia-tile .encyclopedia-row-meta {
  width: 100%;
  overflow: hidden;
  font-size: 8px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#encyclopedia .encyclopedia-list > .encyclopedia-empty {
  grid-column: 1 / -1;
}
#encyclopedia .encyclopedia-detail {
  padding: 14px 15px 19px;
}
#encyclopedia .encyclopedia-detail-head {
  gap: 11px;
  padding-bottom: 11px;
}
#encyclopedia .encyclopedia-icon.is-large {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}
#encyclopedia .encyclopedia-detail-heading h3 {
  font-size: clamp(20px, 2vw, 27px);
}
#encyclopedia .encyclopedia-detail-block {
  margin-top: 13px;
}
#encyclopedia .encyclopedia-detail-block h4 {
  margin-bottom: 5px;
  font-size: 13px;
}
#encyclopedia .encyclopedia-detail-block p,
#encyclopedia .encyclopedia-stats dt,
#encyclopedia .encyclopedia-stats dd {
  font-size: 12px;
}
#encyclopedia .encyclopedia-stats dt,
#encyclopedia .encyclopedia-stats dd {
  padding: 6px 7px;
}
@media (max-height: 460px) {
  #encyclopedia .encyclopedia-panel {
    min-height: 0;
    height: calc(var(--ui-vh, 100vh) - 12px);
  }
}
@media (max-width: 760px) {
  #encyclopedia .encyclopedia-panel {
    width: calc(100vw - 12px);
    height: calc(var(--ui-vh, 100vh) - 12px);
    min-height: 0;
    border-width: 4px;
  }
  #encyclopedia .encyclopedia-head {
    min-height: 68px;
    padding: 10px 11px;
  }
  #encyclopedia .encyclopedia-head h2 {
    font-size: 22px;
  }
  #encyclopedia .encyclopedia-body {
    display: flex;
    flex-direction: column;
  }
  #encyclopedia .encyclopedia-rail {
    padding: 6px;
  }
  #encyclopedia .encyclopedia-category {
    padding: 6px 8px;
  }
  #encyclopedia .encyclopedia-content {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }
  #encyclopedia .encyclopedia-hint {
    display: none;
  }
  #encyclopedia .encyclopedia-list-wrap {
    min-height: 158px;
    max-height: 35vh;
  }
  #encyclopedia .encyclopedia-list {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
    padding: 6px;
  }
  #encyclopedia .encyclopedia-tile {
    min-height: 78px;
  }
  #encyclopedia .encyclopedia-detail {
    max-height: 45vh;
  }
}
.cb-panel { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.cb-head {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.cb-me {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 8px 10px;
  background: rgba(57, 43, 30, 0.08);
  border: 1px solid rgba(57, 43, 30, 0.25);
  border-radius: 6px;
}
.cb-label { font-size: 10px; letter-spacing: 0.06em; color: #dfd3bd; text-transform: uppercase; }
.cb-rank { font-size: 17px; color: var(--ink-light); font-variant-numeric: tabular-nums; }
.cb-clock { color: #f0d08a; }
.cb-note, .cb-history { margin: 0; font-size: 12px; line-height: 1.45; color: #deceba; }
.cb-history { color: #dfd3bd; }
.cb-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: min(46vh, 420px); overflow-y: auto; padding-right: 2px;
}
.cb-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(18, 13, 9, 0.42);
  border: 1px solid rgba(57, 43, 30, 0.18);
  border-radius: 5px;
}
.cb-row.is-top .cb-pos { color: #f0d08a; }
.cb-row.is-me { background: rgba(122, 168, 135, 0.28); border-color: rgba(58, 110, 72, 0.6); }
.cb-pos { font-weight: 700; color: #dfd3bd; font-variant-numeric: tabular-nums; }
.cb-name { display: flex; flex-direction: column; min-width: 0; }
.cb-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f0e3ca; font-size: 13px; }
.cb-name small { color: #dfd3bd; font-size: 11px; }
.cb-fight {
  min-height: 32px; padding: 4px 10px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--parchment);
  background: linear-gradient(135deg, #7a3b22, #4e2414);
  border: 1px solid rgba(201, 164, 92, 0.78); border-radius: 5px;
  cursor: pointer;
}
.cb-fight:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 520px) {
  .cb-head { grid-template-columns: 1fr 1fr; }
  .cb-head .cb-me:last-child { grid-column: span 2; }
  .cb-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
}
.lb-box { display: flex; flex-direction: column; gap: 9px; text-align: left; }
.lb-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.lb-tab {
  min-height: 34px; padding: 6px 4px; color: #d9c9a8; background: rgba(37, 28, 19, .72);
  border: 1px solid rgba(201, 164, 92, .58); border-radius: 4px; cursor: pointer;
  font: inherit; font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.lb-tab.is-active { color: #fff4d6; background: #287454; border-color: #d8b75c; }
.lb-note { margin: 0; min-height: 16px; color: #cfc2ab; font-size: 11px; }
.lb-list {
  display: flex; flex-direction: column; gap: 4px; max-height: min(49vh, 440px);
  overflow-y: auto; padding: 1px 2px 1px 0;
}
.lb-list.is-loading { opacity: .62; }
.lb-row {
  display: grid; grid-template-columns: 27px 28px minmax(0, 1fr) auto; align-items: center;
  gap: 7px; min-height: 42px; padding: 5px 8px; background: rgba(16, 12, 8, .46);
  border: 1px solid rgba(201, 164, 92, .16); border-radius: 4px;
}
.lb-row.is-top { border-color: rgba(212, 168, 77, .48); }
.lb-row.is-me { background: rgba(83, 132, 89, .35); border-color: rgba(160, 205, 146, .7); }
.lb-rank {
  display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%;
  color: #e6d8ba; background: rgba(201, 183, 143, .48); font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.lb-row:nth-child(1) .lb-rank { color: #39270e; background: #e2b644; }
.lb-row:nth-child(2) .lb-rank { color: #263035; background: #b8bec2; }
.lb-row:nth-child(3) .lb-rank { color: #3d2517; background: #bb7b4d; }
.lb-icon { color: #78bb92; font-size: 17px; text-align: center; }
.lb-who { display: flex; flex-direction: column; min-width: 0; }
.lb-who b { overflow: hidden; color: #f3e7cc; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.lb-who small { overflow: hidden; color: #c7baa4; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lb-value { color: #f1d48d; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-empty { margin: 16px 0; color: #cfc2ab; text-align: center; font-size: 12px; }
@media (max-width: 520px) {
  .lb-row { grid-template-columns: 25px 24px minmax(0, 1fr) auto; gap: 5px; padding-inline: 6px; }
  .lb-value { font-size: 11px; }
}
.tm-panel {
  --tm-phe: #6b5b45;
  --tm-phe-nhat: rgba(107, 91, 69, 0.14);
  display: flex; flex-direction: column; gap: 10px; text-align: left;
}
.tm-panel.tm-phe-chinh_dao { --tm-phe: #2e6f96; --tm-phe-nhat: rgba(46, 111, 150, 0.13); }
.tm-panel.tm-phe-ma_dao    { --tm-phe: #93304a; --tm-phe-nhat: rgba(147, 48, 74, 0.13); }
.tm-loi-mo { margin: 0; font-size: 12px; line-height: 1.5; color: #e1d6c1; }
.tm-muc-de { margin: 4px 0 0; font-size: 12px; letter-spacing: 0.06em;
             text-transform: uppercase; color: #dccfbc; }
.tm-ngay   { margin: 0; font-size: 11px; line-height: 1.45; color: #e1d6c1; }
.tm-trong  { margin: 10px 0; font-size: 12px; color: #e1d6c1; text-align: center; }
.tm-canh-bao {
  margin: 0; padding: 7px 9px; font-size: 12px; line-height: 1.45;
  color: #e8b7b0; background: rgba(163, 69, 59, 0.12);
  border: 1px solid rgba(163, 69, 59, 0.4); border-radius: 5px;
}
.tm-loi { margin: 0; min-height: 15px; font-size: 12px; color: #f0aaa0; }
.tm-head {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--tm-phe-nhat);
  border: 1px solid var(--tm-phe); border-radius: 6px;
}
.tm-head-dau {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--tm-phe); border-radius: 5px;
}
.tm-dau-anh { display: block; image-rendering: pixelated; }
.tm-head-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-head-info b { font-size: 15px; color: #f0e4cd; }
.tm-head-info small { font-size: 11px; color: #e1d6c1; }
.tm-head-vai {
  padding: 3px 8px; font-size: 11px; white-space: nowrap;
  color: var(--parchment); background: var(--tm-phe); border-radius: 4px;
}
.tm-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-tab {
  min-height: 30px; padding: 4px 10px;
  font: inherit; font-size: 12px; color: #e3d6bd;
  background: rgba(57, 43, 30, 0.07);
  border: 1px solid rgba(57, 43, 30, 0.2);
  border-bottom-color: transparent; border-radius: 5px 5px 0 0;
  cursor: pointer;
}
.tm-tab:hover { background: rgba(57, 43, 30, 0.13); }
.tm-tab.on {
  color: var(--ink); font-weight: 600;
  background: var(--tm-phe-nhat);
  border-color: var(--tm-phe); border-bottom-color: var(--tm-phe);
}
.tm-than { display: flex; flex-direction: column; gap: 10px; }
.tm-o-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tm-o-nho {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 7px 9px;
  background: rgba(57, 43, 30, 0.08);
  border: 1px solid rgba(57, 43, 30, 0.22); border-radius: 6px;
}
.tm-label { font-size: 10px; letter-spacing: 0.05em; color: #e1d6c1; text-transform: uppercase; }
.tm-o-nho strong { font-size: 14px; color: #f0e4cd; font-variant-numeric: tabular-nums; }
.tm-dieu-kien { display: flex; flex-direction: column; gap: 5px; }
.tm-dieu-kien h4 {
  margin: 0; font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; color: #dccfbc;
}
.tm-dk-list { display: flex; flex-direction: column; gap: 3px; }
.tm-dk {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) minmax(0, var(--tm-dk-so));
  align-items: center; gap: 7px;
  min-height: var(--tm-dong-cao); box-sizing: border-box;
  padding: 4px 7px; font-size: 12px;
  background: rgba(18, 13, 9, 0.42);
  border: 1px solid rgba(57, 43, 30, 0.16); border-radius: 4px;
}
.tm-dk.du .tm-dk-dau   { color: #3a6e48; }
.tm-dk.thieu .tm-dk-dau { color: #f0aaa0; }
.tm-dk.thieu { background: rgba(163, 69, 59, 0.09); border-color: rgba(163, 69, 59, 0.3); }
.tm-dk-ten { color: #e1d6c1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-dk-so  {
  color: #e1d6c1; font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tm-dk-buff { grid-template-columns: 16px minmax(0, 1fr); }
.tm-dk-buff .tm-dk-ten { white-space: normal; overflow: visible; line-height: 1.45; }
.tm-dong-mo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 8px; width: 100%;
  min-height: var(--tm-dong-cao); box-sizing: border-box;
  padding: 6px 8px; text-align: left; cursor: pointer;
  font-family: inherit;
  background: rgba(18, 13, 9, 0.42);
  border: 1px solid rgba(57, 43, 30, 0.18); border-radius: 5px;
}
.tm-dong-mo:hover { background: rgba(18, 13, 9, 0.42); }
.tm-dong-mo.du { border-color: var(--tm-phe, #3a6e48); }
.tm-dong-mo.du .tm-row-so { color: #3a6e48; }
.tm-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: min(38vh, 340px); overflow-y: auto; padding-right: 2px;
}
.tm-log {
  display: flex; flex-direction: column; gap: 2px;
  max-height: min(42vh, 380px); overflow-y: auto; padding-right: 2px;
}
.tm-log-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px;
  align-items: center;
  min-height: var(--tm-dong-cao); box-sizing: border-box;
  padding: 3px 6px; font-size: 12px;
  border-bottom: 1px dotted rgba(57, 43, 30, 0.16);
}
.tm-log-gio  { color: #e1d6c1; font-variant-numeric: tabular-nums; }
.tm-log-text { color: #e1d6c1; }
.tm-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  min-height: var(--tm-dong-cao); box-sizing: border-box;
  padding: 6px 8px;
  background: rgba(18, 13, 9, 0.42);
  border: 1px solid rgba(57, 43, 30, 0.18); border-radius: 5px;
}
.tm-row.la-toi { background: var(--tm-phe-nhat); border-color: var(--tm-phe); }
.tm-row-dau  { font-size: 19px; color: #a9c990; }
.tm-row > .tm-dau-anh { width: 16px; height: 16px; }
.tm-row-vai  {
  min-width: 66px; font-size: 11px; color: #e1d6c1; text-align: center;
  padding: 2px 5px; background: rgba(57, 43, 30, 0.1); border-radius: 4px;
}
.tm-row.tm-vai-tong_chu   .tm-row-vai { color: #e8d7b0; background: rgba(201, 164, 92, 0.32); }
.tm-row.tm-vai-truong_lao .tm-row-vai { color: #b0d2e8; background: rgba(107, 163, 196, 0.25); }
.tm-row-giua { display: flex; flex-direction: column; min-width: 0; }
.tm-row-giua b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                 color: var(--ink-light); font-size: 13px; }
.tm-row-giua small { color: #e1d6c1; font-size: 11px; }
.tm-row-slogan { font-style: italic; }
.tm-row-so { color: #e1d6c1; font-variant-numeric: tabular-nums; }
.tm-row.tm-phe-chinh_dao { --tm-phe: #2e6f96; }
.tm-row.tm-phe-ma_dao    { --tm-phe: #93304a; }
.tm-phe-ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tm-phe {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 9px 10px; font: inherit; cursor: pointer;
  background: rgba(18, 13, 9, 0.42);
  border: 1px solid rgba(57, 43, 30, 0.24); border-radius: 6px;
}
.tm-phe:hover { background: rgba(18, 13, 9, 0.42); }
.tm-phe.tm-phe-chinh_dao.chon { border-color: #2e6f96; background: rgba(46, 111, 150, 0.14); }
.tm-phe.tm-phe-ma_dao.chon    { border-color: #93304a; background: rgba(147, 48, 74, 0.14); }
.tm-phe-ten  { font-size: 15px; font-weight: 700; color: #f0e4cd; }
.tm-phe-cham { font-size: 12px; font-style: italic; color: #e1d6c1; }
.tm-phe-mo   { font-size: 11px; line-height: 1.45; color: #e1d6c1; }
.tm-phe-chuc { font-size: 11px; color: #e1d6c1; }
.tm-phe-buff { font-size: 11px; color: #e1d6c1; }
.tm-o { display: flex; flex-direction: column; gap: 4px; }
.tm-o-nhan { font-size: 11px; letter-spacing: 0.04em; color: #e1d6c1; }
.tm-input {
  min-height: 32px; padding: 5px 9px;
  font: inherit; font-size: 13px; color: var(--ink-light);
  background: rgba(18, 13, 9, 0.42);
  border: 1px solid rgba(57, 43, 30, 0.32); border-radius: 5px;
}
.tm-input:focus { outline: none; border-color: var(--tm-phe); }
.tm-select { min-width: 140px; }
.tm-check { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #e1d6c1; }
.tm-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tm-loc .tm-input { flex: 1 1 140px; min-width: 0; }
.tm-nop { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-nop .tm-input { flex: 1 1 140px; min-width: 0; }
.tm-cho {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 7px 9px; font-size: 12px; color: #deceba;
  background: rgba(201, 164, 92, 0.16);
  border: 1px solid rgba(201, 164, 92, 0.5); border-radius: 5px;
}
.tm-dau-ds { display: flex; flex-wrap: wrap; gap: 5px; }
.tm-dau {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: rgba(18, 13, 9, 0.42);
  border: 1px solid rgba(57, 43, 30, 0.26); border-radius: 5px; cursor: pointer;
}
.tm-dau.chon { color: var(--parchment); background: var(--tm-phe); border-color: var(--tm-phe); }
.tm-hang-nut { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-hang-doc { display: flex; flex-direction: column; gap: 5px; }
.tm-nut {
  min-height: 34px; padding: 5px 12px;
  font: inherit; font-size: 13px; font-weight: 600; color: #3a2e22;
  background: linear-gradient(180deg, rgba(255, 252, 240, 0.9), rgba(214, 196, 159, 0.8));
  border: 1px solid rgba(57, 43, 30, 0.35); border-radius: 5px; cursor: pointer;
}
.tm-nut:hover:not(:disabled) { background: rgba(18, 13, 9, 0.42); }
.tm-nut:disabled { opacity: 1; cursor: default; color: #f4ead4; background: linear-gradient(180deg, #65523a, #463725); border-color: rgba(201,164,92,.48); text-shadow: 0 1px 2px rgba(0,0,0,.95); }
.tm-nut.chinh {
  color: var(--parchment);
  background: linear-gradient(135deg, var(--tm-phe), rgba(36, 26, 18, 0.9));
  border-color: rgba(201, 164, 92, 0.75);
}
.tm-nut.nguy {
  color: #fdeee9;
  background: linear-gradient(135deg, #8a3126, #4e1a12);
  border-color: rgba(201, 164, 92, 0.6);
}
.tm-nut.nho { min-height: 28px; padding: 3px 9px; font-size: 12px; font-weight: 500; }
@media (max-width: 520px) {
  .tm-o-grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-phe-ds  { grid-template-columns: 1fr; }
  .tm-head    { grid-template-columns: 38px minmax(0, 1fr); }
  .tm-head-vai { grid-column: 2; justify-self: start; }
  .tm-log-row { grid-template-columns: 82px minmax(0, 1fr); }
  .tm-row-vai { min-width: 54px; font-size: 10px; }
}
#creator {
  align-items: center;
  padding: clamp(10px, 2.6vw, 30px);
  background: rgba(5, 9, 9, 0.76);
  backdrop-filter: blur(7px);
}
#creator > .scroll-panel {
  width: min(1080px, 100%);
  max-height: calc(var(--ui-vh) * 0.96);
  padding: clamp(18px, 3vw, 30px);
  color: #e9eadf;
  background:
    radial-gradient(circle at 12% 0%, rgba(191, 150, 77, 0.13), transparent 31%),
    linear-gradient(145deg, #1b2320 0%, #111716 62%, #0d1211 100%);
  border: 1px solid rgba(219, 179, 101, 0.72);
  border-radius: 16px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 241, 194, 0.14),
    inset 0 0 0 1px rgba(0, 0, 0, 0.48);
}
#creator > .scroll-panel::before,
#creator > .scroll-panel::after { display: none; }
#creator .creator-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 22px;
  text-align: left;
}
#creator .creator-eyebrow,
#creator .creator-step {
  display: block;
  color: #d9ad5f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.2;
}
#creator .creator-head h1 {
  margin-top: 6px;
  color: #e6d4b0;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.035em;
  line-height: 1;
}
#creator .creator-head .sub {
  max-width: 480px;
  margin: 8px 0 0;
  color: #c4b69b;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1.5;
}
#creator .creator-realm {
  flex: none;
  margin-top: 4px;
  padding: 7px 9px;
  color: #e0c58d;
  background: rgba(24,18,12,.60);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  border: 1px solid rgba(184,150,90,.65);
}
#creator .creator-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(16px, 2.4vw, 26px);
  align-items: start;
}
#creator .preview-wrap {
  position: sticky;
  top: 0;
  width: auto;
  padding: 12px;
  text-align: left;
  background: linear-gradient(155deg,rgba(58,44,30,.94),rgba(34,26,19,.96));
  border: 1px solid rgba(219, 179, 101, 0.26);
  border-radius: 3px;
  border-color: rgba(184,150,90,.42);
  box-shadow: inset 0 0 0 1px rgba(10,7,4,.46), inset 0 1px rgba(239,218,177,.05);
}
#creator .preview-wrap::before {
  content: 'XEM TRƯỚC';
  display: block;
  margin: 0 2px 8px;
  color: #9eb5a1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
#creator .preview-stage {
  min-height: 318px;
  padding: 10px 0 0;
  background: radial-gradient(ellipse at 50% 86%, #6c6748 0%, #403b2b 44%, #28251d 78%, #1e1b16 100%);
  border: 1px solid rgba(219, 179, 101, 0.6);
  border-radius: 2px;
  box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.58);
  border-color: rgba(184,150,90,.58);
}
#creator #preview {
  width: 150px;
  height: 225px;
}
#creator #preview-dirs,
#creator #preview-actions {
  gap: 6px;
  margin-top: 9px;
}
#creator #preview-dirs button,
#creator #preview-actions button {
  color: #dce7da;
  background: #202d28;
  border: 1px solid rgba(213, 177, 102, 0.42);
  border-radius: 6px;
  transition: background 160ms ease, border-color 160ms ease, transform 100ms ease;
}
#creator #preview-dirs button {
  width: 36px;
  height: 30px;
  color: #e0d2b6;
  background: linear-gradient(#493a29,#33271c);
  border-color: rgba(184,150,90,.46);
  border-radius: 2px;
}
#creator #preview-actions button {
  min-height: 30px;
  padding: 5px 10px;
  color: #e0d2b6;
  background: linear-gradient(#493a29,#33271c);
  border-color: rgba(184,150,90,.46);
  border-radius: 2px;
}
#creator #preview-dirs button:hover,
#creator #preview-actions button:hover {
  background: #2c3d34;
  border-color: rgba(238, 199, 119, 0.8);
}
#creator #preview-dirs button:active,
#creator #preview-actions button:active { transform: translateY(1px); }
#creator #preview-dirs button.active,
#creator #preview-actions button.active {
  color: #1c160d;
  background: #d9ad5f;
  border-color: #f0cf82;
}
#creator .realm-tag {
  margin-top: 14px;
  color: #c4b69b;
  font-size: 11px;
  letter-spacing: 0.05em;
}
#creator .realm-tag b { color: #e3b85f; }
#creator .desc {
  min-height: 0;
  margin: 7px 2px 2px !important;
  color: #c4b69b;
  font-size: 12px !important;
  line-height: 1.5 !important;
}
#creator .options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
#creator .options > section,
#creator .creator-options-heading {
  min-width: 0;
  margin: 0;
}
#creator .options > section {
  padding: 12px;
  background: linear-gradient(155deg,rgba(58,44,30,.94),rgba(34,26,19,.96));
  border: 1px solid rgba(157, 180, 155, 0.2);
  border-radius: 3px;
  border-color: rgba(184,150,90,.42);
  box-shadow: inset 0 0 0 1px rgba(10,7,4,.46), inset 0 1px rgba(239,218,177,.05);
}
#creator .options > section:first-child,
#creator .options > section:nth-child(2),
#creator .options > section:last-child { grid-column: auto; }
#creator .creator-name-section,
#creator .creator-options-heading { grid-column: 1 / -1; }
#creator .creator-name-section {
  padding: 16px;
  background: linear-gradient(155deg,rgba(58,44,30,.94),rgba(34,26,19,.96));
  border-color: rgba(184,150,90,.42);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(10,7,4,.46), inset 0 1px rgba(239,218,177,.05);
}
#creator .creator-section-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
#creator .creator-section-top h2,
#creator .creator-options-heading h2 {
  margin: 4px 0 0;
  color: #f2e6cb;
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
#creator .creator-help,
#creator .creator-options-heading p {
  margin: 5px 0 0;
  color: #a9b9ab;
  font-size: 12px;
  line-height: 1.45;
}
#creator .creator-status {
  flex: none;
  padding: 5px 7px;
  color: #eccb83;
  border: 1px solid rgba(236, 203, 131, 0.46);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
#creator .creator-name-section .name-row { margin-top: 14px; }
#creator #opt-name {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  color: #eee1c6;
  background: rgba(18,13,9,.68);
  border: 1px solid rgba(225, 188, 111, 0.66);
  border-radius: 2px;
  font-size: 16px;
  outline: none;
  border-color: rgba(184,150,90,.65);
}
#creator #opt-name::placeholder { color: #b9a98a; }
#creator #opt-name:focus {
  border-color: #f0c776;
  box-shadow: 0 0 0 3px rgba(240, 199, 118, 0.18);
}
#creator #opt-name.invalid {
  color: #ffe1d8;
  background: rgba(91, 35, 31, 0.55);
  border-color: #d27660;
}
#creator #name-hint {
  margin-top: 7px;
  color: #b9a98a;
  font-size: 11px;
}
#creator #name-hint.warn { color: #efaa93; }
#creator .creator-options-heading {
  padding: 4px 2px 0;
}
#creator .options h3 {
  margin: 0 0 9px;
  padding: 0;
  color: #cbb27c;
  border: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#creator .row { gap: 7px; }
#creator .opt-btn {
  min-height: 36px;
  padding: 7px 11px;
  color: #e0d2b6;
  background: linear-gradient(#493a29,#33271c);
  border: 1px solid rgba(160, 185, 157, 0.25);
  border-radius: 2px;
  font-size: 12.5px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 100ms ease;
  border-color: rgba(184,150,90,.46);
}
#creator .opt-btn:hover {
  color: #fff1d0;
  background: #2c3d34;
  border-color: rgba(225, 188, 111, 0.62);
}
#creator .opt-btn:active { transform: translateY(1px); }
#creator .opt-btn.active {
  color: #f0d79e;
  background: linear-gradient(#59482e,#43331f);
  border-color: #c7a45f;
  box-shadow: none;
}
#creator .opt-btn .chip {
  width: 14px;
  height: 14px;
  border-color: rgba(0, 0, 0, 0.48);
  border-radius: 4px;
}
#creator .btn-enter {
  min-height: 52px;
  margin-top: 18px;
  padding: 13px 18px;
  color: #f0ddb4;
  background: linear-gradient(#57442b,#382a1c);
  border: 1px solid #f5d894;
  border-radius: 2px;
  box-shadow: inset 0 1px rgba(244,222,177,.14), 0 4px 12px rgba(8,5,3,.35);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: filter 160ms ease, transform 100ms ease, box-shadow 100ms ease;
  border-color: #b8965a;
}
#creator .btn-enter:hover:not(:disabled) { filter: brightness(1.08) saturate(1.05); }
#creator .btn-enter:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(57, 31, 12, 0.5), inset 0 1px 0 rgba(255, 249, 218, 0.5);
}
#creator .btn-enter:disabled {
  color: #a69d8a;
  background: #313630;
  border-color: #50574c;
  box-shadow: none;
  filter: none;
  opacity: 1;
}
#creator .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 860px) {
  #creator .creator-body { grid-template-columns: 1fr; }
  #creator .preview-wrap {
    position: relative;
    top: auto;
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
  }
  #creator .preview-stage { min-height: 272px; }
  #creator #preview { width: 132px; height: 198px; }
}
@media (max-width: 560px) {
  #creator { padding: 8px; }
  #creator > .scroll-panel { padding: 16px; border-radius: 12px; }
  #creator .creator-head { margin-bottom: 16px; }
  #creator .creator-head h1 { font-size: 30px; }
  #creator .creator-head .sub { font-size: 12px; }
  #creator .creator-realm { padding: 6px 7px; font-size: 8px; }
  #creator .options { grid-template-columns: 1fr; gap: 9px; }
  #creator .creator-name-section,
  #creator .creator-options-heading { grid-column: 1; }
  #creator .options > section { padding: 11px; }
  #creator .preview-stage { min-height: 250px; }
  #creator #preview { width: 118px; height: 177px; }
  #creator .desc { font-size: 11px !important; }
  #creator .btn-enter { margin-top: 14px; font-size: 14px; }
}
#creator > .scroll-panel {
  padding: clamp(14px, 2vw, 22px);
}
#creator .creator-head { margin-bottom: 14px; }
#creator .creator-head h1 { font-size: clamp(24px, 3.2vw, 34px); }
#creator .creator-head .sub { margin-top: 5px; font-size: 11px; }
#creator .creator-body {
  grid-template-columns: minmax(188px, 0.56fr) minmax(0, 1.44fr);
  gap: 14px;
}
#creator .preview-wrap { padding: 9px; }
#creator .preview-stage { min-height: 252px; }
#creator #preview { width: 126px; height: 189px; }
#creator .desc {
  margin-top: 6px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}
#creator .options { gap: 8px; }
#creator .options > section { padding: 9px; }
#creator .options h3 { margin-bottom: 6px; font-size: 10px; }
#creator .opt-btn {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 11.5px;
}
#creator .creator-name-section { padding: 12px; }
#creator .creator-section-top h2,
#creator .creator-options-heading h2 { font-size: 18px; }
#creator .creator-help,
#creator .creator-options-heading p { font-size: 11px; }
#creator .creator-name-section .name-row { margin-top: 10px; }
#creator #opt-name { min-height: 42px; padding: 9px 11px; font-size: 15px; }
#creator #name-hint { margin-top: 6px; font-size: 10px; }
#creator .btn-enter {
  min-height: 46px;
  margin-top: 12px;
  padding: 11px 16px;
  font-size: 15px;
}
@media (max-width: 860px) {
  #creator > .scroll-panel {
    display: flex;
    flex-direction: column;
    padding: 12px;
    overflow: hidden;
  }
  #creator .creator-head { flex: none; margin-bottom: 11px; }
  #creator .creator-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  #creator .preview-wrap {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 6px 10px;
    align-items: center;
    padding: 9px;
  }
  #creator .preview-wrap::before {
    grid-column: 1 / -1;
    margin: 0;
  }
  #creator .preview-stage {
    grid-column: 1;
    grid-row: 2 / span 4;
    display: grid;
    min-height: 186px;
    padding: 0;
    place-items: center;
  }
  #creator #preview { width: 96px; height: 144px; }
  #creator #preview-dirs {
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    margin: 0;
  }
  #creator #preview-actions {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-start;
    margin: 0;
    flex-wrap: wrap;
  }
  #creator .realm-tag {
    grid-column: 2;
    grid-row: 4;
    margin: 0;
  }
  #creator .desc {
    grid-column: 2;
    grid-row: 5;
    margin: 0 !important;
  }
  #creator .options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #creator .options > section.creator-name-section,
  #creator .creator-options-heading { grid-column: 1 / -1; }
  #creator .btn-enter { flex: none; }
}
@media (max-width: 560px) {
  #creator { padding: 4px; }
  #creator > .scroll-panel {
    max-height: calc(var(--ui-vh) * 0.99);
    padding: 10px;
    border-radius: 10px;
  }
  #creator .creator-head {
    align-items: center;
    margin-bottom: 9px;
  }
  #creator .creator-head h1 { margin-top: 3px; font-size: 24px; }
  #creator .creator-head .sub { display: none; }
  #creator .creator-eyebrow { font-size: 9px; }
  #creator .creator-realm { padding: 5px 7px; font-size: 8px; }
  #creator .preview-wrap {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 5px 8px;
  }
  #creator .preview-stage { min-height: 164px; }
  #creator #preview { width: 82px; height: 123px; }
  #creator #preview-dirs button { width: 30px; height: 28px; }
  #creator #preview-actions button { min-height: 28px; padding: 4px 8px; font-size: 11px; }
  #creator .desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  #creator .options { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  #creator .options > section { padding: 8px; border-radius: 8px; }
  #creator .options h3 {
    margin-bottom: 5px;
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  #creator .row { gap: 5px; }
  #creator .opt-btn {
    min-height: 38px;
    flex: 1 1 auto;
    justify-content: center;
    padding: 5px 6px;
    font-size: 11px;
  }
  #creator .creator-name-section { padding: 10px; }
  #creator .creator-section-top h2,
  #creator .creator-options-heading h2 { font-size: 16px; }
  #creator .creator-help,
  #creator .creator-options-heading p { display: none; }
  #creator .creator-status { padding: 4px 6px; font-size: 8px; }
  #creator .creator-name-section .name-row { margin-top: 8px; }
  #creator #opt-name { min-height: 42px; font-size: 14px; }
  #creator #name-hint { margin-top: 5px; font-size: 10px; }
  #creator .btn-enter { min-height: 44px; margin-top: 8px; font-size: 13px; letter-spacing: 0.05em; }
}
@media (max-width: 380px) {
  #creator .preview-wrap { grid-template-columns: 84px minmax(0, 1fr); }
  #creator .preview-stage { min-height: 150px; }
  #creator #preview { width: 74px; height: 111px; }
  #creator #preview-dirs { gap: 3px; }
  #creator #preview-dirs button { width: 26px; height: 26px; padding: 0; }
  #creator #preview-actions { gap: 4px; }
  #creator #preview-actions button { padding: 4px 6px; }
  #creator .creator-head h1 { font-size: 22px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #creator { padding: 4px max(4px, env(safe-area-inset-right)) 4px max(4px, env(safe-area-inset-left)); }
  #creator > .scroll-panel {
    display: flex;
    flex-direction: column;
    max-height: calc(var(--ui-vh) - 8px);
    padding: 8px 12px 10px;
    overflow: hidden;
  }
  #creator .creator-head { flex: none; align-items: center; margin-bottom: 6px; }
  #creator .creator-eyebrow { font-size: 9px; }
  #creator .creator-head h1 { margin-top: 2px; font-size: 20px; }
  #creator .creator-head .sub { display: none; }
  #creator .creator-realm { padding: 5px 7px; font-size: 8px; }
  #creator .creator-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px;
  }
  #creator .preview-wrap {
    display: block;
    position: sticky;
    top: 0;
    padding: 6px;
    text-align: center;
  }
  #creator .preview-wrap::before { display: none; }
  #creator .preview-stage { display: grid; place-items: center; min-height: 120px; padding: 0; }
  #creator #preview { width: 72px; height: 108px; }
  #creator #preview-dirs,
  #creator #preview-actions { justify-content: center; gap: 4px; margin: 6px 0 0; }
  #creator #preview-dirs button { width: 29px; height: 26px; padding: 0; }
  #creator #preview-actions button { min-height: 26px; padding: 3px 7px; font-size: 11px; }
  #creator .realm-tag { margin: 6px 0 0; font-size: 10px; }
  #creator .desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 3px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    text-align: left;
  }
  #creator .options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #creator .options > section.creator-name-section,
  #creator .creator-options-heading { grid-column: 1 / -1; }
  #creator .creator-name-section { padding: 9px 10px; }
  #creator .creator-section-top h2,
  #creator .creator-options-heading h2 { font-size: 16px; }
  #creator .creator-help,
  #creator .creator-options-heading p { display: none; }
  #creator .creator-name-section .name-row { margin-top: 7px; }
  #creator #opt-name { min-height: 38px; padding: 7px 10px; font-size: 14px; }
  #creator .options > section { padding: 8px; }
  #creator .btn-enter {
    flex: none;
    position: static;
    min-height: 42px;
    margin-top: 8px;
    padding: 8px 14px;
    font-size: 14px;
    box-shadow: inset 0 1px rgba(244,222,177,.14), 0 4px 12px rgba(8,5,3,.35);
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .tbtn.utility { width: 44px; height: 44px; }
  .fly-touch          { right: 50px; }
  .auto-touch         { right: 100px; }
  .fishing-stop-touch { right: 150px; }
  .tbtn.utility .skill-name { display: none; }
  .tbtn.utility .hud-icon {
    top: 50%; width: 30px; height: 30px;
    transform: translate(-50%, -50%);
  }
  .fishing-stop-touch .skill-glyph { inset: 0; }
  #touch-buttons .skill-key { display: none; }
  .tbtn.skill.qs-o .skill-name { display: none; }
  .tbtn.skill .skill-glyph { inset: 5px; }
  .tbtn.attack-touch .skill-name { display: none; }
  #hud-right .dim { display: none; }
  #hud-right { padding-bottom: 3px; }
  #hud-journal { width: min(200px, calc(var(--ui-vw) - 369px)); }
  #quest-tracker { padding: 3px 5px 4px; }
  .quest-head { margin-bottom: 2px; }
  #quest-open { font-size: 11px; padding: 2px 3px; }
  #quest-stage .q-stage-full { display: none; }
  #quest-stage .q-stage-short { display: inline; }
  .q-collapse { flex-basis: 22px; width: 22px; height: 22px; font-size: 11px; }
  #quest-objectives { font-size: 10px; max-height: 3.6em; }
  #quest-objectives li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #dialog { padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
  #dialog:not(.choice-only) > .scroll-panel {
    display: flex; flex-direction: column;
    width: min(620px, calc(var(--ui-vw) - 24px));
    max-height: calc(var(--ui-vh) - 16px);
    padding: 10px 14px 10px;
    overflow: hidden;
  }
  #dialog #dialog-title { flex: none; margin: 0 0 4px; font-size: 17px; }
  #dialog #dialog-text {
    flex: 0 1 auto; min-height: 1.4em; overflow-y: auto;
    max-width: none; margin: 0 0 8px;
    font-size: 12.5px; line-height: 1.4;
  }
  #dialog #dialog-reward { flex: none; }
  #dialog:not(.choice-only) .dlg-choices {
    flex: 1 1 auto; min-height: 44px; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #dialog .dlg-choices:not(.forge-box) {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 6px; margin: 0 0 6px;
  }
  #dialog .dlg-choices .btn-choice {
    min-height: 40px; padding: 6px 10px; gap: 2px 8px;
    font-size: 13px; letter-spacing: 0.03em; line-height: 1.25;
  }
  #dialog .dlg-choices .btn-choice canvas { width: 24px; height: 24px; }
  #dialog .dlg-choices .btn-choice .c-note { font-size: 11px; line-height: 1.25; margin-left: 32px; }
  #dialog .dlg-choices .btn-choice:not(:has(canvas)) .c-note { margin-left: 0; }
  #dialog #dialog-action,
  #dialog #dialog-close { flex: none; margin-top: 4px; padding-top: 7px; padding-bottom: 7px; }
}
#dialog .dlg-choices.gopy-box,
.dlg-choices.gopy-box,
#dialog .dlg-choices.giftcode-box,
.dlg-choices.giftcode-box {
  display: flex; flex-direction: column; gap: 8px;
  grid-template-columns: none;
}
.gopy-vung {
  width: 100%; box-sizing: border-box;
  min-height: 96px; resize: vertical;
  font-family: inherit; line-height: 1.5;
}
.gopy-hang { display: flex; align-items: center; gap: 8px; }
.gopy-dem {
  flex: 1; font-size: 11px; color: #dccfbc;
  font-variant-numeric: tabular-nums;
}
.gopy-dem-day { color: #f0aaa0; font-weight: 600; }
.gopy-loi { margin: 0; font-size: 12px; line-height: 1.45; color: #f0aaa0; }
.giftcode-o {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  font: 700 16px/1.2 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase;
}
#dialog .giftcode-box .giftcode-nhan { margin: 0; min-height: 38px; }
.bag-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bag-title-row h2 {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hanh-trang-panel .bag-title-row .sheet-kicker { display: none; }
.bag-giftcode {
  flex: none; padding: 4px 10px; min-height: 28px;
  font: 700 12px/1 var(--font-ui); letter-spacing: 0.02em; cursor: pointer;
  color: #fff0c9; background: linear-gradient(180deg, #75613d, #4b3925);
  border: 1px solid #c6a667; border-radius: 3px;
  box-shadow: inset 0 1px rgba(255,241,207,.23), 0 2px 5px rgba(0,0,0,.38);
}
.bag-giftcode:hover, .bag-giftcode:focus-visible { filter: brightness(1.15); }
.bag-giftcode:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#dialog .gopy-hang .gopy-gui,
.overlay .gopy-hang .gopy-gui {
  flex: 0 0 auto; width: auto; margin: 0;
  min-height: 36px; padding: 7px 20px;
}
.gopy-gui[disabled] { opacity: 0.5; cursor: default; }
.auth-legal,
#menu .menu-legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px;
  font-family: var(--font-ui); font-size: 12px;
}
#menu .menu-legal { margin-top: 12px; }
.auth-legal a,
#menu .menu-legal a {
  color: rgba(231, 218, 187, 0.78);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 6px 2px;              
}
.auth-legal a:hover,
#menu .menu-legal a:hover { color: var(--parchment); }
#legal {
  position: fixed; inset: 0; z-index: 2000;   
  display: flex; align-items: center; justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(8, 10, 8, 0.72);
}
#legal.hidden { display: none; }
#legal .legal-panel {
  display: flex; flex-direction: column;
  width: min(760px, 100%); max-height: 100%;
  background: #fff9ea; color: #2d241b;
  border: 1px solid #b78332; border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#legal .legal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid #d7bd8a; background: #f3e8ca;
}
#legal .legal-head h2 { margin: 0; font: 700 18px/1.2 var(--font-serif); color: #4b2f17; }
#legal .legal-head .btn-sub { width: auto; margin: 0; min-height: 36px; padding: 6px 16px; }
#legal .legal-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 20px 24px;
  font: 15px/1.7 system-ui, "Segoe UI", sans-serif;
  user-select: text; -webkit-user-select: text;
}
#legal .legal-body h1 { display: none; }                 
#legal .legal-body h2 { margin: 22px 0 6px; font: 700 18px/1.25 var(--font-serif); color: #4b2f17; }
#legal .legal-body ul { padding-left: 22px; }
#legal .legal-body a { color: #16634d; }
#legal .legal-body .privacy-brand,
#legal .legal-body .privacy-footer a[href="/"],
#legal .legal-body a[href="gioi-thieu.html"] { display: none; }
#legal .legal-body .privacy-meta { color: #7b5c32; font-size: 13px; }
#legal .legal-body .privacy-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.panel:not(#hud-left):not(#hud-right)::before,
#hud-left::before,
#hud-right::before,
#party-hud::before,
#hud-target::before,
#invite-hud::before,
#thu::before {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border: 1px solid rgba(185,151,93,.22);
  border-radius: 1px;
}
.menu-head h2 { color: #e5ce9b !important; }
.hud-info #hud-realm { color: #c0b398 !important; }
.thu-log .chat-line .chat-text { color: #e9dfca !important; }
.thu-log .chat-who { color: #f0d394 !important; }
#quick-chat-send,
#quick-chat-send:disabled {
  color: #1b1208 !important;
  text-shadow: none !important;
  border-color: rgba(201,164,92,.68) !important;
  opacity: .82 !important;
}
.quick-chat-action.secondary:disabled {
  color: #e4d6bc !important;
  background: linear-gradient(180deg, #51402c, #33271c) !important;
  border-color: rgba(201,164,92,.56) !important;
  opacity: .9 !important;
}
.tm-nut.chinh:disabled,
.tm-nut.nguy:disabled {
  color: #f4ead4 !important;
  background: linear-gradient(180deg, #65523a, #463725) !important;
  border-color: rgba(201,164,92,.48) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.95) !important;
}
.menu-settings-grid .btn-sub:disabled {
  color: #d7c9af !important;
  opacity: .82 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.75) !important;
}
#dialog .dlg-close:disabled,
#dialog .btn-sub:disabled,
#dialog .dlg-choices button:disabled {
  color: #f4ead4 !important;
  background: linear-gradient(180deg, #65523a, #463725) !important;
  border-color: rgba(201,164,92,.48) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.95) !important;
}
#dialog #dialog-reward,
#dialog .dh-info > div,
#dialog .tmc-h,
#dialog .tmc-luat,
#dialog .market-head,
#dialog .market-hint,
#dialog .market-empty,
#dialog .market-facts,
#dialog .reward-row,
#dialog .forge-detail p,
#dialog .forge-detail small { color: #e5dac2 !important; }
#dialog .overlay .dlg-choices .btn-choice {
  color: #f0e6d2 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.82) !important;
}
#dialog .dlg-choices .btn-choice .c-note,
#dialog .dlg-choices .btn-choice .c-stats,
#dialog .dlg-choices .btn-choice .c-desc {
  color: #d9d1bf !important;
  opacity: 1 !important;
}
#dialog .dlg-choices .btn-choice:disabled,
#dialog .dlg-choices .btn-choice[disabled] {
  color: #e6dcc9 !important;
  opacity: 1 !important;
  filter: saturate(.55) brightness(.88) !important;
}
#dialog .dlg-choices .btn-choice:disabled .c-note,
#dialog .dlg-choices .btn-choice:disabled .c-stats,
#dialog .dlg-choices .btn-choice[disabled] .c-note,
#dialog .dlg-choices .btn-choice[disabled] .c-stats { color: #d0c7b4 !important; }
#dialog .market-sort,
#dialog .market-sort:focus,
#dialog .market-field input,
#dialog .market-field select {
  color: #f0e5ce !important;
  background-color: #21180f !important;
  border-color: rgba(201,164,92,.6) !important;
}
#dialog .market-sort option,
#dialog .market-field select option {
  color: #f0e5ce !important;
  background: #302419 !important;
}
#dialog .market-sort option:disabled,
#dialog .market-field select option:disabled { color: #c7b99d !important; }
#dialog .market-empty,
#dialog .market-hint { color: #d2c5ac !important; }
#dialog .market-name { color: #f0e3ca !important; }
#dialog .market-price::after { color: #d3b875 !important; }
#dialog .tm-nut {
  color: #f0e5d0 !important;
  background: linear-gradient(180deg, #4b3b29, #30241a) !important;
  border-color: rgba(201,164,92,.52) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.88) !important;
}
#dialog .tm-nut.chinh { color: #fff0c8 !important; background: linear-gradient(135deg,#675331,#40301f) !important; }
#dialog .tm-nut.nguy { color: #ffe4da !important; background: linear-gradient(135deg,#71352d,#43201a) !important; }
#dialog .tm-nut:disabled,
#dialog .tm-nut.chinh:disabled,
#dialog .tm-nut.nguy:disabled { color: #dfd3be !important; opacity: 1 !important; }
#dialog .tmc-dong-ten,
#dialog .tmc-dong-so { color: #e6dcc8 !important; }
#dialog .tmc-luat { opacity: 1 !important; }
#dialog .market-tabs,
#dialog .market-tabs button { color: #eee2cc !important; }
#dialog .tm-panel .tm-note { color: #e1d6c1 !important; }
#dialog .tm-panel .tm-dk-du .tm-dk-dau { color: #a9c990 !important; }
#dialog .tm-panel .tm-tab.chon,
#dialog .tm-panel .tm-row-giua { color: #f0e4cd !important; }
#dialog .tm-panel .tm-input { color: #f0e4cd !important; background: #21180f !important; }
#dialog .daihoi-panel .dh-info div,
#dialog .daihoi-panel .dh-clock::before { color: #e8ddc7 !important; }
#dialog .daihoi-panel .dh-clock { color: #f0d08a !important; }
#dialog .daihoi-panel .btn-main,
#dialog .daihoi-panel .btn-main:disabled { color: #fff0ca !important; opacity: 1 !important; }
#dialog .daihoi-panel .btn-sub,
#dialog .daihoi-panel .btn-sub:disabled { color: #423321 !important; background: linear-gradient(#dfd0ad,#c8b58e) !important; opacity: 1 !important; }
#dialog #dialog-close:disabled {
  color: #302114 !important;
  background: linear-gradient(180deg, #e4d5b1, #cbb78a) !important;
  border-color: #8c7045 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
#dialog #dialog-action,
#dialog #dialog-action:disabled {
  color: #fff0cb !important;
  background: linear-gradient(180deg, #52785a, #34523d) !important;
  border-color: #9ab27b !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.95) !important;
}
#dialog .cb-note { color: #dfd3bd !important; }
#dialog .cb-row { color: #eee3cf !important; background: rgba(18,13,9,.36) !important; border-color: rgba(177,143,86,.4) !important; }
#dialog .cb-row.is-me { background: rgba(79,108,78,.48) !important; }
#dialog .cb-fight:disabled { color: #f0e5d0 !important; opacity: .9 !important; }
.scroll-panel::before,
.scroll-panel::after {
  width: 4px !important;
  background: linear-gradient(90deg,#130e09,#9d7945,#332418) !important;
}
.menu-settings-grid .btn-sub {
  background-color: rgba(18,13,9,.40) !important;
  border-color: rgba(177,143,86,.40) !important;
  color: #e0d1b5 !important;
}
.scroll-panel h1,
.scroll-panel h2:not(#breakthrough-title),
.menu-head h2 {
  color: #f0dfba !important;
  text-shadow: 0 -1px 0 rgba(255,244,214,.46), 0 1px 0 #20160d, 0 2px 2px rgba(0,0,0,.78), 0 0 12px rgba(196,157,87,.16) !important;
}
.bar-label,
.bar-value,
#quest-tracker button {
  text-shadow: 0 -1px rgba(255,242,215,.22), 0 1px 2px rgba(0,0,0,.9) !important;
}
#hud-btns button:hover,
#hud-btns button:focus-visible {
  color: #fff0ca !important;
  background: linear-gradient(180deg, rgba(132,101,61,.99), rgba(65,48,30,.99)) !important;
  border-color: #d0b06f !important;
  box-shadow: inset 0 1px rgba(255,241,207,.4), 0 0 0 1px rgba(208,176,111,.22), 0 4px 10px rgba(5,3,2,.5) !important;
}
#hud-btns button:active { transform: translateY(1px) !important; filter: brightness(1.08); }
#hud-btns button.active {
  color: #f6e8c8 !important;
  background: linear-gradient(180deg, #63704d, #39412d) !important;
  border-color: #b6aa73 !important;
}
#hud-btns .hud-icon { filter: drop-shadow(0 1px 1px #0c0805); }
#hud-btns .hud-sect-mark { color: #e8cf93 !important; text-shadow: 0 1px 2px #090604; }
#creator .creator-help,
#creator .creator-options-heading p { color: #c4b69b !important; }
#creator .preview-wrap::before { color: #cbb27c !important; }
#creator #preview-dirs button.active,
#creator #preview-actions button.active {
  color: #f0d79e !important;
  background: linear-gradient(#59482e,#43331f) !important;
  border-color: #c7a45f !important;
}
#creator .creator-section-top h2,
#creator .creator-options-heading h2 { color: #e6d4b0 !important; }
button:not(.hud-icon),
.menu-settings-grid .btn-sub {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, filter .16s ease !important;
}
button:focus-visible,
input:focus-visible { outline-color: #dcc083 !important; }
#breakthrough-panel #breakthrough-title { color: #251a10 !important; text-shadow: none !important; }
.hp-lop {
  position: fixed; inset: 0; z-index: 62;
  display: none; align-items: center; justify-content: center;
  background: rgba(8, 4, 8, 0.52);
  padding: 16px;
}
.hp-hop {
  width: min(360px, 100%);
  padding: 14px 16px 16px;
  border: 2px solid #5a2430; border-radius: 10px;
  background: linear-gradient(#1b1418, #120d11);
  box-shadow: inset 0 0 0 1px #3a1c25, 0 10px 30px rgba(0, 0, 0, 0.55);
  font-family: var(--font-ui);
  color: #e6dcd6;
}
.hp-dau { display: flex; align-items: center; justify-content: space-between; }
.hp-dau h3 {
  margin: 0; font-size: 17px; font-weight: 700;
  color: #e8506a; letter-spacing: .04em;
}
.hp-x {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #6b3340; background: #2a1620; color: #e0b8bf;
  font-size: 17px; line-height: 1; cursor: pointer;
}
.hp-x:active { transform: translateY(1px); }
.hp-trong { padding: 18px 2px 4px; text-align: center; }
.hp-trong p { margin: 0 0 6px; font-size: 14px; }
.hp-hang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; }
.hp-so {
  padding: 8px 4px; text-align: center;
  border: 1px solid #3a2028; border-radius: 7px; background: #170f13;
}
.hp-so-n { font-size: 20px; font-weight: 700; color: #f0d9cf; line-height: 1.1; }
.hp-so-l { margin-top: 2px; font-size: 11px; color: #9a8a88; }
.hp-nghiep { margin-bottom: 12px; }
.hp-nghiep-day {
  position: relative; height: 7px; border-radius: 4px;
  background: #241419; border: 1px solid #3a2028; overflow: hidden;
}
.hp-nghiep-cham { height: 100%; border-radius: 3px; transition: width .2s ease; }
.hp-vach {
  position: absolute; top: -1px; bottom: -1px; width: 2px;
  background: rgba(255, 228, 210, 0.55);
}
.hp-de {
  margin: 10px 0 6px; font-size: 12px; font-weight: 700;
  color: #b78f92; letter-spacing: .08em; text-transform: uppercase;
}
.hp-ds { display: grid; gap: 6px; }
.hp-nut {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 9px 11px; cursor: pointer; text-align: left;
  border: 1px solid #4d2630; border-radius: 7px;
  background: linear-gradient(#2a1a20, #1d1216);
  color: #eddfd8; font-family: inherit;
}
.hp-nut:active { transform: translateY(1px); }
.hp-nut.tat { cursor: default; opacity: .48; border-color: #33222a; }
.hp-nut-t { font-size: 14px; font-weight: 600; }
.hp-nut-p { font-size: 11px; color: #a8908e; }
.hp-mo { color: #8e7c7c; font-size: 11px; }
.hp-chan { margin-top: 12px; line-height: 1.5; }
.hp-nl {
  display: grid; gap: 3px; padding: 7px 10px;
  border: 1px solid #33222a; border-radius: 7px; background: #170e12;
}
.hp-nl-d { display: flex; justify-content: space-between; font-size: 12px; color: #c98888; }
.hp-nl-d b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-nl-d.du { color: #d9e8c8; }
.hp-hop.hp-chinh {
  border-color: #8a6a2a;
  background: linear-gradient(#171a1c, #0f1214);
  box-shadow: inset 0 0 0 1px #3a3218, 0 10px 30px rgba(0, 0, 0, 0.55);
}
.hp-chinh .hp-dau h3 { color: #ffd86b; }
.hp-chinh .hp-x { border-color: #7a6230; background: #1e1c14; color: #f0dfaa; }
.hp-chinh .hp-so { border-color: #3a3420; background: #121412; }
.hp-chinh .hp-de { color: #c9b27a; }
.hp-chinh .hp-nut { border-color: #5a4a24; background: linear-gradient(#232018, #181612); }
.hp-chinh .hp-nl { border-color: #3a3420; background: #121412; }
.hp-chinh .hp-nl-d { color: #c9a888; }
@media (max-width: 380px) {
  .hp-hop { padding: 12px 12px 14px; }
  .hp-so-n { font-size: 18px; }
}
.hct-lop {
  position: fixed; inset: 0; z-index: 62;
  display: none; align-items: center; justify-content: center;
  background: rgba(6, 3, 6, 0.58);
  padding: 16px;
}
.hct-hop {
  width: min(460px, 100%);
  max-height: calc(100% - 24px);
  display: flex; flex-direction: column;
  padding: 12px 14px 14px;
  border: 2px solid #6b2a24; border-radius: 10px;
  background: linear-gradient(#1a1216, #0f0a0d);
  box-shadow: inset 0 0 0 1px #3a1a1a, 0 10px 30px rgba(0, 0, 0, 0.6);
  font-family: var(--font-ui);
  color: #e8ddd6;
}
.hct-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hct-ten { font-size: 17px; font-weight: 700; color: #e8603a; letter-spacing: .04em; }
.hct-dong {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #6b3330; background: #2a1618; color: #e0bcb4;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.hct-the { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.hct-so {
  padding: 6px 4px; text-align: center;
  border: 1px solid #3a2224; border-radius: 6px; background: #170f12;
}
.hct-so-n { font-size: 15px; font-weight: 700; color: #f2d9a8; line-height: 1.15; }
.hct-so-l { margin-top: 2px; font-size: 10.5px; color: #9a8784; }
.hct-tabs { display: flex; gap: 4px; margin: 4px 0 6px; }
.hct-tab {
  flex: 1; padding: 6px 4px; border-radius: 6px;
  border: 1px solid #4a2a2a; background: #1e1316; color: #c9b0a8;
  font-size: 13px; cursor: pointer;
}
.hct-tab.on { background: #5a1c16; border-color: #a8452e; color: #ffe6c0; font-weight: 700; }
.hct-than { overflow-y: auto; min-height: 120px; padding-right: 2px; }
.hct-ghi { margin: 4px 2px 8px; font-size: 12px; line-height: 1.4; color: #b8a39c; }
.hct-bao {
  margin: 2px 0 6px; padding: 6px 8px; border-radius: 6px;
  background: #4a1010; border: 1px solid #b33a2a; color: #ffd8c8;
  font-size: 12.5px; font-weight: 700;
}
.hct-bao.tot { background: #2c2410; border-color: #9a7a2a; color: #f6e2a8; }
.hct-muc { margin: 10px 2px 4px; font-size: 12px; font-weight: 700; color: #e8a060; }
.hct-hang {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px; margin-bottom: 4px;
  border: 1px solid #2e1c1e; border-radius: 6px; background: #150e11;
}
.hct-hang.khoa, .hct-hang.mo { opacity: .55; }
.hct-hang.chon { border-color: #c98a3a; box-shadow: inset 0 0 0 1px #6a4418; }
.hct-hang.lon { padding: 10px; margin: 4px 0 8px; }
.hct-icon { width: 30px; height: 30px; image-rendering: pixelated; flex: 0 0 auto; }
.hct-giua { flex: 1 1 auto; min-width: 0; }
.hct-hang-ten { font-size: 13px; font-weight: 700; color: #f0e2d8; }
.hct-hang-phu { font-size: 11px; color: #a8938d; margin-top: 1px; }
.hct-xu {
  flex: 0 0 auto; padding: 2px 6px; border-radius: 10px;
  font-size: 10.5px; font-weight: 700; border: 1px solid transparent;
}
.hct-xu.khan { background: #5a1414; color: #ffb8a0; border-color: #a83a2a; }
.hct-xu.vua  { background: #3a2e14; color: #f0d898; border-color: #7a6228; }
.hct-xu.thua { background: #1a2a36; color: #a8cce0; border-color: #3a5a70; }
.hct-phai { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.hct-sl {
  width: 52px; padding: 4px 4px; border-radius: 5px;
  border: 1px solid #4a3030; background: #0c0809; color: #f0e2d8;
  font-size: 12.5px; text-align: center;
}
.hct-nut {
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid #a8452e; background: #6a2016; color: #ffe8cc;
  font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.hct-nut.phu { border-color: #6a4a3a; background: #2e1e1c; color: #e8d0c0; }
.hct-nut:disabled { opacity: .45; cursor: default; }
.hct-nut:active:not(:disabled) { transform: translateY(1px); }
.hct-dai {
  position: fixed; left: 50%; top: 8px; transform: translateX(-50%);
  z-index: 40; display: none; pointer-events: none;
  padding: 4px 12px; border-radius: 12px;
  background: rgba(20, 12, 14, 0.82); border: 1px solid #5a3a36;
  color: #f0dcd0; font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
  white-space: nowrap; text-shadow: 0 1px 0 #000;
}
.hct-dai.pk { border-color: #b33a2a; color: #ffc8b8; }
.hct-dai.do { border-color: #e04a2a; background: rgba(80, 12, 10, 0.9); color: #ffe0d0; }
.hct-dai.lao { border-color: #8a94a0; background: rgba(24, 28, 34, 0.9); color: #e0e8f0; }
@media (max-width: 480px) {
  .hct-hop { padding: 10px 10px 12px; }
  .hct-hang { flex-wrap: wrap; }
  .hct-phai { width: 100%; justify-content: flex-end; }
}
#game-canvas.cam-dragging { cursor: grabbing; }
#cam-recenter {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  width: 28px; height: 28px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(40, 30, 18, 0.92);
  color: #f7c822; font-size: 17px; line-height: 26px;
  cursor: pointer; touch-action: manipulation;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
#cam-recenter[hidden] { display: none; }
#cam-recenter:active { transform: scale(0.92); }
#dialog > .scroll-panel:has(.tm-panel) {
  display: flex; flex-direction: column;
  width: min(640px, calc(var(--ui-vw, 100vw) - 24px));
  height: min(680px, calc(var(--ui-vh, 100vh) - 32px));
  max-height: none;
  overflow: hidden;
}
#dialog > .scroll-panel:has(.tm-panel) #dialog-text:empty { display: none; }
#dialog > .scroll-panel:has(.tm-panel) .dlg-choices {
  display: block;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  margin: 0 0 10px;
}
#dialog > .scroll-panel:has(.xh-panel) {
  width: min(460px, calc(var(--ui-vw, 100vw) - 24px));
  height: min(632px, calc(var(--ui-vh, 100vh) - 32px));
}
.xh-panel .tm-tabs { margin-bottom: 6px; }
.xh-ds { list-style: none; margin: 0 0 6px; padding: 0; }
.xh-dong {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 8px; margin: 2px 0;
  box-sizing: border-box;
  border-radius: 7px;
  background: rgba(255, 240, 210, 0.04);
  border: 1px solid transparent;
}
.xh-dong:nth-child(even) { background: rgba(255, 240, 210, 0.07); }
.xh-dong.la {
  border-color: rgba(122, 168, 135, 0.8);
  background: rgba(122, 168, 135, 0.16);
}
.xh-hang {
  flex: 0 0 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font: 700 12px var(--font-ui); color: var(--ink-light-soft);
}
.xh-dong.top1 .xh-hang { background: radial-gradient(circle at 35% 30%, #fff1b0, #e0a82e 60%, #9a6a12); color: #3a2400; }
.xh-dong.top2 .xh-hang { background: radial-gradient(circle at 35% 30%, #ffffff, #c4c9d1 60%, #7d838c); color: #26292e; }
.xh-dong.top3 .xh-hang { background: radial-gradient(circle at 35% 30%, #ffd9b0, #c77a3a 60%, #7c4418); color: #2c1606; }
.xh-dong.top1 { border-color: rgba(240, 194, 90, 0.45); }
.xh-hh {
  flex: 0 0 auto; width: 30px; height: 30px; box-sizing: border-box;
  image-rendering: pixelated;
  border: 1px solid #6b5a44; border-radius: 5px;
  background: rgba(0, 0, 0, 0.35);
}
.xh-hh-nho {
  width: 14px; height: 14px; margin-right: 4px; vertical-align: -3px;
  image-rendering: pixelated;
}
.xh-giua { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0; line-height: 1.2; }
.xh-giua b {
  font-family: var(--font-serif); font-size: 13px; font-weight: 700; color: #f6ead0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xh-giua small {
  font-size: 11px; color: var(--ink-light-soft); opacity: 0.8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xh-phai {
  flex: 0 0 auto; max-width: 42%;
  font-size: 11.5px; font-weight: 600; color: #e7c97c; text-align: right;
}
.xh-trong { padding: 22px 8px; text-align: center; color: var(--ink-light-soft); font-size: 13px; }
.xh-chan {
  padding: 6px 10px; text-align: center; border-radius: 6px;
  font-size: 12px; color: var(--ink-light-soft);
  background: rgba(0, 0, 0, 0.2);
}
.xh-chan:empty { display: none; }
.tm-dau.co-chu { opacity: 0.28; filter: grayscale(1); cursor: not-allowed; }
.nv-panel { gap: 8px; }
.nv-dau { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #e1d6c1; }
.nv-luot { display: flex; gap: 4px; }
.nv-luot i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(231, 201, 124, 0.7); background: rgba(0, 0, 0, 0.3);
}
.nv-luot i.on { background: radial-gradient(circle at 35% 30%, #fff1b0, #e0a82e 60%, #9a6a12); }
.nv-dang:empty, .nv-panel .tm-loi:empty { display: none; }
.nv-the, .nv-dong {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 7px;
  background: rgba(255, 240, 210, 0.04); border: 1px solid transparent;
}
.nv-the { padding: 8px 10px; border-color: rgba(231, 201, 124, 0.55); background: rgba(231, 201, 124, 0.1); }
.nv-the.du { border-color: rgba(122, 168, 135, 0.85); background: rgba(122, 168, 135, 0.16); }
.nv-ds { display: flex; flex-direction: column; gap: 3px; }
.nv-dong:nth-child(even) { background: rgba(255, 240, 210, 0.07); }
.nv-dong.xong { opacity: 0.5; }
.nv-dong.dang { border-color: rgba(231, 201, 124, 0.45); }
.nv-icon {
  flex: 0 0 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border: 2px solid #6b5a44; border-radius: 6px; background: rgba(0, 0, 0, 0.35);
  color: #e7c97c; font-size: 14px;
}
.nv-icon canvas { width: 24px; height: 24px; image-rendering: pixelated; }
.nv-giua { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.nv-giua b {
  font-family: var(--font-serif); font-size: 14px; font-weight: 700; color: #f6ead0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nv-giua small {
  font-size: 11.5px; color: var(--ink-light-soft); opacity: 0.85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nv-kho {
  margin-left: 6px; padding: 0 5px; border-radius: 3px; vertical-align: 1px;
  font: 600 10px var(--font-ui); font-style: normal; letter-spacing: 0.04em;
}
.nv-kho.k1 { background: rgba(122, 168, 135, 0.25); color: #a9e0b6; }
.nv-kho.k2 { background: rgba(231, 201, 124, 0.22); color: #f0d58a; }
.nv-kho.k3 { background: rgba(200, 90, 70, 0.28); color: #f5a898; }
.nv-thuong { font-size: 11px; color: #cdbf9f; }
.nv-thuong b { color: #e7c97c; }
.nv-thuong b.nv-ch { color: #f5a898; }
.nv-thanh {
  position: relative; height: 14px; margin-top: 3px; border-radius: 7px; overflow: hidden;
  background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(231, 201, 124, 0.35);
}
.nv-thanh i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #9a6a12, #e0a82e); }
.nv-the.du .nv-thanh i { background: linear-gradient(90deg, #3a6e48, #7aa887); }
.nv-thanh span {
  position: relative; display: block; text-align: center;
  font: 600 10px/14px var(--font-ui); color: #fff6de; text-shadow: 0 1px 0 #000;
}
.nv-nut { display: flex; flex-direction: column; gap: 4px; }
.nv-btn {
  flex: 0 0 auto; min-width: 64px; padding: 5px 10px; border-radius: 5px; cursor: pointer;
  font: 600 12px var(--font-ui); color: #f6ead0;
  background: rgba(57, 43, 30, 0.6); border: 1px solid rgba(189, 155, 98, 0.6);
}
.nv-btn.chinh { background: linear-gradient(180deg, #7a5a24, #5a3f15); border-color: #e7c97c; }
.nv-btn:hover:not(:disabled) { border-color: var(--gold); color: #fff; }
#dialog .nv-panel .nv-btn:disabled { opacity: 0.4; cursor: default; filter: grayscale(0.6); }
@media (max-width: 480px) {
  .nv-giua small { white-space: normal; }
  .nv-btn { min-width: 52px; padding: 5px 6px; }
}
.ch-panel { gap: 8px; }
.ch-dau { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #e1d6c1; }
.ch-dau canvas { width: 22px; height: 22px; image-rendering: pixelated; }
.ch-dau b { font: 700 18px var(--font-serif); color: #f5a898; }
.ch-panel .tm-loi:empty { display: none; }
.ch-luoi {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
.ch-o {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px 8px; border-radius: 8px; text-align: center;
  background: rgba(255, 240, 210, 0.05); border: 1px solid rgba(189, 155, 98, 0.35);
}
.ch-o:hover { border-color: rgba(231, 201, 124, 0.8); background: rgba(231, 201, 124, 0.08); }
.ch-o.thieu { opacity: 0.6; }
.ch-hinh {
  position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 2px solid #6b5a44; border-radius: 8px; background: rgba(0, 0, 0, 0.35);
}
.ch-hinh canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.ch-sl {
  position: absolute; right: -6px; bottom: -6px; padding: 0 4px; border-radius: 4px;
  font: 700 10px var(--font-ui); font-style: normal; color: #fff6de; background: #6b3a1c;
}
.ch-ten {
  font-family: var(--font-serif); font-size: 12.5px; font-weight: 700; color: #f6ead0; line-height: 1.25;
  min-height: 2.5em; display: flex; align-items: center; justify-content: center;
}
.ch-phu { font-size: 10px; color: var(--ink-light-soft); margin-top: -3px; }
.ch-gia { display: flex; align-items: center; gap: 2px; font: 700 13px var(--font-ui); color: #f5a898; }
.ch-gia canvas { width: 14px; height: 14px; image-rendering: pixelated; }
.ch-nut {
  width: 100%; margin-top: auto; padding: 5px 6px; border-radius: 5px; cursor: pointer;
  font: 600 12px var(--font-ui); color: #f6ead0;
  background: linear-gradient(180deg, #7a5a24, #5a3f15); border: 1px solid #e7c97c;
}
.ch-nut:hover:not(:disabled) { color: #fff; border-color: var(--gold); }
#dialog .ch-panel .ch-nut:disabled {
  cursor: default; background: rgba(57, 43, 30, 0.6); border-color: rgba(189, 155, 98, 0.4); color: #cdbf9f;
}
@media (max-width: 480px) { .ch-luoi { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } }
.hd { display: flex; flex-direction: column; gap: 8px; }
.hd .hidden { display: none !important; }
.hd-loc { display: flex; flex-wrap: wrap; gap: 5px; }
.hd-loc button {
  flex: 1 1 0; min-width: 60px; min-height: 30px; padding: 4px 8px;
  font-family: var(--font-serif); font-size: 12px; cursor: pointer;
  color: #e8d6ab; background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(201, 164, 92, 0.35); border-radius: 3px;
}
.hd-loc button:hover:not(.on) { background: rgba(201, 164, 92, 0.2); color: #fff3d4; }
.hd-loc button.on {
  color: #2a1a08; background: linear-gradient(180deg, #e9c877, #c9a45c);
  border-color: #f0d48a; font-weight: 700;
}
.hd-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.hd-o {
  --hd-mau: #6fbf7a;
  position: relative; min-height: 96px; padding: 10px 8px 8px 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; cursor: pointer; color: var(--parchment);
  background: linear-gradient(180deg, rgba(62, 48, 33, 0.95), rgba(32, 24, 17, 0.97));
  border: 1px solid rgba(201, 164, 92, 0.5); border-radius: 4px;
  transition: filter 120ms ease, transform 70ms ease;
}
.hd-o::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--hd-mau); border-radius: 4px 0 0 4px;
}
.hd-o:hover { filter: brightness(1.15); }
.hd-o:active { transform: translateY(1px); }
.hd-o:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hd-o.sap  { --hd-mau: #e7c97c; }
.hd-o.xong { --hd-mau: #8a8f96; opacity: 0.72; }
.hd-o.khoa { --hd-mau: #c8584a; opacity: 0.72; }
.hd-o-icon { font-size: 22px; line-height: 1; margin-bottom: 2px; }
.hd-o-ten {
  font-family: var(--font-serif); font-size: 13px; font-weight: 700; color: #f6ead0; line-height: 1.2;
}
.hd-o-phu { font-size: 10px; color: #ff9a7a; letter-spacing: 0.03em; }
.hd-o-tt {
  margin-top: auto; font-size: 11px; line-height: 1.3; color: var(--hd-mau);
  font-variant-numeric: tabular-nums;
}
.hd-o.xong .hd-o-tt, .hd-o.khoa .hd-o-tt { color: #c9bfa9; }
.hd-ct { display: flex; flex-direction: column; gap: 8px; color: var(--parchment); }
.hd-ct-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hd-lui {
  padding: 5px 10px; cursor: pointer; font-family: var(--font-serif); font-size: 12px;
  color: #e8d6ab; background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(201, 164, 92, 0.45); border-radius: 3px;
}
.hd-lui:hover { color: #fff3d4; border-color: var(--gold); }
.hd-nhan {
  --hd-mau: #6fbf7a;
  padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 700;
  color: #1a1208; background: var(--hd-mau); font-variant-numeric: tabular-nums;
}
.hd-nhan.sap { --hd-mau: #e7c97c; }
.hd-nhan.xong { --hd-mau: #b3b8bf; }
.hd-nhan.khoa { --hd-mau: #e08070; }
.hd-ct-dinh {
  display: flex; gap: 12px; align-items: center; padding: 10px;
  background: linear-gradient(180deg, rgba(62, 48, 33, 0.9), rgba(32, 24, 17, 0.95));
  border: 1px solid rgba(201, 164, 92, 0.5); border-radius: 4px;
}
.hd-ct-icon { font-size: 40px; line-height: 1; flex: 0 0 auto; }
.hd-chan-dung {
  flex: 0 0 auto; max-width: 160px; max-height: 96px; image-rendering: pixelated;
  background: radial-gradient(circle at 50% 70%, rgba(201, 164, 92, 0.18), transparent 70%);
}
.hd-ct-chu { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hd-ct-chu h3 { margin: 0; font-family: var(--font-serif); font-size: 16px; color: #ffe08a; }
.hd-ct-chu small { font-size: 11px; color: #ff9a7a; }
.hd-ct-chu p { margin: 0; font-size: 12px; line-height: 1.45; color: #e1d6c1; }
.hd-the { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.hd-the-o {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; line-height: 1.3;
  color: #f0e4cd; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(201, 164, 92, 0.3); border-radius: 3px;
}
.hd-the-icon { flex: 0 0 auto; font-size: 15px; }
.hd-muc {
  margin: 2px 0 0; font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.06em;
  color: #e7c97c; text-transform: uppercase;
}
.hd-ds { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.hd-ds li {
  font-size: 12px; line-height: 1.45; color: #e1d6c1; padding: 4px 8px;
  background: rgba(255, 240, 210, 0.05); border-radius: 3px;
}
.hd-roi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.hd-roi-o {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(201, 164, 92, 0.35); border-radius: 4px;
}
.hd-icon-mon {
  flex: 0 0 auto; width: 28px; height: 28px; image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.35); border: 1px solid #6b5a44; border-radius: 4px;
}
.hd-roi-icon { flex: 0 0 28px; font-size: 20px; text-align: center; }
.hd-roi-chu { min-width: 0; display: flex; flex-direction: column; }
.hd-roi-chu b {
  font-size: 12px; color: #f6ead0; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hd-roi-chu small { font-size: 10.5px; color: #cdbf9f; line-height: 1.3; }
@media (max-width: 520px) {
  .hd-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hd-the, .hd-roi { grid-template-columns: 1fr; }
}
.bag-count.full { color: #ff9a7a !important; border-color: rgba(220,110,80,.6) !important; }
.bag-expand {
  flex: none; margin: 4px 0 0 4px; width: 24px; height: 24px; padding: 0;
  font: 700 16px/22px inherit; color: #f3dc9a; cursor: pointer;
  background: rgba(18,13,9,.55); border: 1px solid rgba(177,143,86,.6); border-radius: 4px;
}
.bag-expand:hover { background: rgba(80,58,30,.7); }
.bag-expand:disabled { opacity: .4; cursor: default; }
@media (max-width: 480px) {
  .market-groups .bag-filter { white-space: normal; line-height: 1.2; padding: 4px 2px; }
}
@media (pointer: coarse) {
  .bag-expand, .td-goc, .q-collapse, .thu-close, .bn-tab { position: relative; }
  .bag-expand::after, .td-goc::after, .q-collapse::after, .thu-close::after, .bn-x::after {
    content: ''; position: absolute; inset: -8px;
  }
  .bn-tab::after { content: ''; position: absolute; inset: -9px 0; }
}
#dialog > .scroll-panel:has(.dhd-box) {
  display: flex; flex-direction: column;
  width: min(520px, calc(var(--ui-vw, 100vw) - 24px));
  height: min(640px, calc(var(--ui-vh, 100vh) - 24px));
  max-height: none; overflow: hidden;
}
#dialog > .scroll-panel:has(.dhd-box) #dialog-text:empty { display: none; }
#dialog > .scroll-panel:has(.dhd-box) .dlg-choices {
  display: block; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; margin: 0 0 8px;
}
.dhd { text-align: left; }
.dhd-dao { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.dhd-dao-nut {
  padding: 7px 4px; cursor: pointer; border-radius: 4px;
  font: 700 13px var(--font-serif); color: #d8c7a3;
  background: rgba(18, 13, 9, 0.4); border: 1px solid rgba(177, 143, 86, 0.4);
}
.dhd-dao-nut.ma.on { color: #ffd9e0; background: rgba(120, 28, 52, 0.55); border-color: #c0506e; }
.dhd-dao-nut.chinh.on { color: #e6fbff; background: rgba(34, 92, 118, 0.55); border-color: #5fb8d8; }
.dhd-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 6px; }
.dhd-tabs .bag-filter { font-size: 12px !important; }
.dhd-muc {
  margin: 10px 2px 4px; font: 700 11px var(--font-ui); letter-spacing: 0.06em;
  text-transform: uppercase; color: #c9a45c;
}
.dhd-muc:first-child { margin-top: 2px; }
.dhd-dong {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin: 3px 0; border-radius: 5px;
  background: rgba(255, 240, 210, 0.05); border: 1px solid rgba(255, 240, 210, 0.06);
}
.dhd-ic { flex: 0 0 auto; width: 26px; height: 26px; image-rendering: pixelated; }
.dhd-ic-trong { display: inline-block; width: 6px; height: 26px; border-left: 2px solid rgba(201, 164, 92, 0.5); }
.dhd-giua { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dhd-giua b { font: 700 13px/1.25 var(--font-serif); color: #f6ead0; }
.dhd-giua small { font-size: 11.5px; line-height: 1.35; color: var(--ink-light-soft); }
.dhd-nhan {
  flex: 0 0 auto; max-width: 38%; text-align: right;
  font-size: 11.5px; font-weight: 700; color: #d8c7a3;
}
.dhd-nhan.tot { color: #9fe0a8; }
.dhd-nhan.xau { color: #ff9c8a; }
.dhd-chu { margin: 8px 2px 0; font-size: 11.5px; color: var(--ink-light-soft); }
.dhd-bang { display: flex; flex-direction: column; gap: 3px; }
.dhd-hang {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px;
  background: rgba(255, 240, 210, 0.05);
}
.dhd-hang.xong { background: rgba(122, 168, 135, 0.16); }
.dhd-k { flex: 0 0 64px; font: 700 12px var(--font-ui); color: #e7c97c; }
.dhd-ct { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.dhd-o { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #ff9c8a; }
.dhd-o.du { color: #9fe0a8; }
.dhd-o .dhd-ic { width: 16px; height: 16px; }