:root { --item-slot-size:50px; color-scheme: dark; font-family: system-ui, -apple-system, "Noto Sans Thai", sans-serif; font-synthesis: none; background: #10191c; color: #f7e6c8; }
* { box-sizing: border-box; }
html,body { padding:0; margin:0; width:100%; height:100%; overflow:hidden; }
button,input { font: inherit; }
button { cursor:pointer; color:inherit; -webkit-tap-highlight-color:transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid #f3c783; outline-offset: 3px; }
button:disabled { opacity:.5; cursor:not-allowed; }
#game { width:100%; height:100dvh; min-height:420px; overflow:hidden; position:relative; background: radial-gradient(ellipse at 50% 35%, #283d41, #081215 90%); isolation:isolate; }
#world { display:block; height:100%; width:100%; touch-action:none; outline:none; }
/* Cinematic candle-lit vignette over the 3D view (never intercepts taps). */
#game::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(ellipse 85% 70% at 50% 48%, transparent 55%, rgba(4,3,2,.55) 100%), linear-gradient(180deg, rgba(5,6,10,.35), transparent 22%, transparent 78%, rgba(5,4,3,.4)); }
.panel { background:linear-gradient(140deg,rgba(15,27,29,.92),rgba(10,18,20,.82)); backdrop-filter:blur(7px); border:1px solid #b18b506b; box-shadow:0 8px 24px #0005; }
.top-hud { position:absolute; inset: max(10px, env(safe-area-inset-top)) 12px auto 12px; z-index:4; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; pointer-events:none; }
.top-hud button { pointer-events:auto; }
.identity { padding:9px 10px 10px; width:min(60vw,300px); border-radius:14px; }
.brand-row { display:flex; align-items:center; justify-content:space-between; gap:4px; margin-bottom:9px; }
.brand { font-family:Georgia,serif; font-size:22px; letter-spacing:2px; color:#f0c47e; font-weight:900; line-height:1; text-shadow:0 1px 8px #a65c2888; }
.brand small { font-size:10px; font-family:system-ui,sans-serif; letter-spacing:0; color:#cbbda6; margin-left:4px; font-weight:500; }
.badge { padding:3px 7px; background:#765226b0; border:1px solid #bf9960; border-radius:100px; font-size:9px; font-weight:700; white-space:nowrap; }
.badge.live { background:#174f42d9; border-color:#57ca9b; }
.character { display:flex; gap:9px; align-items:center; }
.portrait { flex-shrink:0; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:1px solid #a9885c; background:radial-gradient(circle at 50% 35%,#7b5135,#2b2923 85%); font-size:17px; color:#f0d2a2; }
.character-info { flex:1; min-width:0; }
.name { font-size:12px; font-weight:700; margin-bottom:5px; }
.name span { float:right; font-size:10px; font-weight:400; color:#d9bb83; }
/* Character sheet opens by tapping the existing compact identity chip. */
.profile-trigger { width:100%; min-width:0; padding:0; border:0; background:none;
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  color:inherit; font:inherit; text-align:left; }
.name .profile-trigger span { float:none; font-size:inherit; }
.name .profile-trigger #characterName { min-width:0; flex:1; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; }
.name .profile-trigger #characterLevel { flex-shrink:0; font-size:10px;
  font-weight:400; color:#d9bb83; white-space:nowrap; }
.profile-trigger:active #characterName { color:#f4d59f; }

.bar { height:5px; border-radius:10px; background:#070f11; overflow:hidden; margin-top:4px; border:1px solid #ffffff1c; }
.bar i { display:block; height:100%; border-radius:10px; }
.bar.hp i { width:88%; background:linear-gradient(90deg,#ad3a3d,#e36e66); }
.bar.mp i { width:76%; background:linear-gradient(90deg,#355ab2,#69b5e8); }
.location-area { flex-shrink:0; text-align:center; }
.mini-map { display:block; width:96px; height:96px; padding:0; background:#0d1416; border-radius:50%; border:2px solid #c8a463; overflow:hidden; position:relative; box-shadow:0 0 0 3px #1a120b, 0 0 0 4px #7a5b2c, 0 4px 20px #000c, 0 0 18px #ffb35a33; }
.mini-map::after { content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; box-shadow: inset 0 0 14px #000c; }
.mini-map canvas { width:100%; height:100%; border-radius:50%; }
.mini-north { position:absolute; z-index:1; top:3px; left:50%; transform:translateX(-50%); font-family:Georgia,serif; font-size:11px; font-weight:bold; color:#f3d18f; text-shadow:0 0 4px #000, 1px 1px #000; }
.place-name { margin-top:8px; font-size:10px; letter-spacing:.3px; color:#f6dca6; text-shadow:0 0 6px #000, 0 0 10px #ff9d3a55; }
.quest { position:absolute; left:12px; top:112px; z-index:3; width:min(68vw,310px); padding:8px 10px; border-radius:12px; display:flex; gap:8px; align-items:flex-start; }
.quest.war-hud::before {content:"";position:absolute;bottom:0;left:4%;width:92%;height:3px;background:#f7cc80;transform:scaleX(var(--war-progress,0));transform-origin:left}
#warGauge {width:100%;height:11px;accent-color:#eac37a}
.quest-icon { flex-shrink:0; color:#e7b366; font-size:22px; line-height:20px; }
.quest strong { display:block; font-size:11px; color:#f9d68c; }
.quest span:not(.quest-icon) { display:block; color:#ddded6; font-size:11px; line-height:1.35; }
.online-count { position:absolute; right:12px; top:154px; font-size:10px; padding:6px 8px; border-radius:10px; z-index:3; }
.toast { position:fixed; z-index:1000; width:max-content; max-width:min(90vw,360px); left:50%; bottom:197px; transform:translateX(-50%); padding:9px 13px; font-size:12px; line-height:1.5; border-radius:12px; background:#101d20e8; border:1px solid #c9a36c77; text-align:center; box-shadow:0 7px 20px #0009; opacity:0; pointer-events:none; transition:opacity .2s; }
.toast.show { opacity:1; }
.tap-tip { position:absolute; z-index:2; bottom:176px; left:0; right:0; text-align:center; font-size:11px; color:#f1e8d6; text-shadow:0 2px 4px #000; pointer-events:none; }
/* The transparent padding is a real touch target for swipe-dash above the
   bottom skills. Buttons stay at their original bottom-anchored positions.
   Avoid adding a visible overlay or intercepting the central gameplay area. */
.controls {
  --dash-swipe-reach: clamp(54px, 9dvh, 86px);
  position:absolute;
  bottom:calc(26px + env(safe-area-inset-bottom));
  left:0; right:0; z-index:4;
  padding-top:var(--dash-swipe-reach);
  pointer-events:auto;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
}
.controls button { pointer-events:auto; }
.skill-bar { width:min(100%,520px); padding:0 14px; display:flex; justify-content:space-around; gap:7px; margin:0 auto 12px; }
.skill { width:min(22%,86px); padding:0; border:0; background:transparent; display:flex; align-items:center; flex-direction:column; gap:4px; font-size:12px; text-shadow:0 2px 4px #000; }
.glyph { width:clamp(50px,14vw,68px); height:clamp(50px,14vw,68px); font-family:Georgia,serif; border-radius:18px; display:grid; place-items:center; border:2px solid #cda96ab5; box-shadow:0 5px 12px #000b,inset 0 0 18px #000a; font-size:31px; line-height:1; }
.glyph.violet { background:radial-gradient(circle,#49346e,#191d31);color:#d5a5ff; }
.glyph.amber { background:radial-gradient(circle,#704028,#251d22);color:#ffc17a; }
.glyph.red { background:radial-gradient(circle,#81352d,#271b1b);color:#ffe3b8; }
.glyph.dark { background:radial-gradient(circle,#46534b,#1c2a28);color:#f1d6a4; }
.skill:active .glyph { transform:scale(.95); filter:brightness(1.2); }
.nav-bar { margin:auto; width:min(calc(100% - 24px),520px); display:flex; border:1px solid #b18b506b; border-radius:16px; overflow:hidden; background:#102125ed; box-shadow:0 8px 24px #0008; }
.nav-bar button { flex:1; border:0; border-right:1px solid #b18b503d; background:transparent; min-height:48px; font-size:12px; display:flex; justify-content:center; gap:7px; align-items:center; }
.nav-bar button:last-child { border-right:0; }
.nav-bar button span { font-size:20px; color:#edc587; }
.version { position:absolute; z-index:2; bottom:max(5px,env(safe-area-inset-bottom)); font-size:9px; width:100%; text-align:center; color:#c0b3a4bb; pointer-events:none; }
.loading { position:absolute; inset:0; z-index:12; background:#101b1e; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; font-size:13px; color:#dfc9a2; }
.loading[hidden] { display:none; }
.loader-mark { font-size:50px;color:#e7b579; }
.loading strong { letter-spacing:4px; font:700 31px Georgia,serif; }
.shade { position:absolute; inset:0; background:#0009; z-index:19; }
.shade[hidden],.drawer[hidden] { display:none; }
.drawer { position:absolute; bottom:0; left:0; right:0; z-index:20; background:linear-gradient(165deg,#1b2b30,#0d1619); border-radius:23px 23px 0 0; border:1px solid #ba925b7a; border-bottom:0; box-shadow:0 -10px 36px #0009; padding:8px 17px calc(24px + env(safe-area-inset-bottom)); max-height:min(78dvh,690px); overflow:auto; width:min(100%,560px); margin:auto; }
.drawer-grip { width:43px; height:4px; background:#b8a48477; border-radius:10px; margin:0 auto 10px; }
.drawer-header { display:flex; align-items:center; justify-content:space-between; }
.drawer h2 { font-size:19px; font-weight:750; margin:0 0 12px; color:#f4d59f; }
.drawer .close { background:#29393b; border:1px solid #b18b506b; border-radius:10px; padding:8px 11px; }
.drawer-body { color:#e0d4c3; line-height:1.6; font-size:13px; }
.drawer-body h3 { margin:14px 0 6px; font-size:14px; color:#f4d59f; }
.drawer-body p { margin:7px 0; }
.drawer-body .note { font-size:12px; opacity:.85; }
#castleSupply { margin:10px 0; padding:0 12px 8px; border:1px solid #807456; border-radius:10px; background:#142628; }
#castleSupply:not([open]) { padding-bottom:0; }
#castleSupply summary { min-height:44px; align-content:center; color:#f4d59f; cursor:pointer; }
#castleSupply label { display:block; margin:8px 0 4px; }
.drawer-body .field { display:block; margin:12px 0 6px; font-weight:700; }
.drawer-body input { width:100%; padding:13px 12px; background:#081316; color:#f8e5c5; border:1px solid #a88b60; border-radius:10px; font-size:14px; }
.drawer-body .primary,.item-detail-modal .primary { color:#e0d4c3; margin-top:10px; width:100%; padding:13px; background:#7a4d27; border:1px solid #d7ab6c; border-radius:12px; font-weight:700; }
.drawer-body .secondary,.item-detail-modal .secondary { color:#e0d4c3; margin-top:10px; width:100%; padding:13px; background:#2a4044; border:1px solid #839c9a; border-radius:12px; }
.drawer-body .status-line { display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid #fff2; padding:9px 0; }
.drawer-body .status-line strong { color:#f0d39d; }
.drawer-map { width:100%; max-height:325px; aspect-ratio:1.4; display:block; border:1px solid #c8a46399; background:#0b1214; border-radius:12px; box-shadow: 0 0 0 3px #120c08, 0 0 0 4px #6d522a88, 0 8px 24px #000a; }
.legend { display:flex; flex-wrap:wrap; gap:10px 15px; margin:10px 0; font-size:12px; }
.terrain-scale { display:flex; align-items:center; gap:8px; margin-top:9px; color:#eadfc7; font-size:12px; font-variant-numeric:tabular-nums; }
.terrain-scale i { flex:1; height:7px; border:1px solid #afaa8559; border-radius:4px; }
.legend b { color:#f2c87b; }
.offline-banner { border-left:3px solid #f1b761; padding:10px 12px; background:#4c392452; border-radius:6px; margin:12px 0; }
@media(max-height:640px){.quest{top:92px}.tap-tip{bottom:160px}.skill-bar{margin-bottom:6px}.glyph{height:46px;width:46px}.controls{bottom:20px}.online-count{top:128px}}
@media(min-width:700px){#game{max-width:none}.identity{width:270px}.mini-map{width:122px;height:122px}.quest{top:120px}.tap-tip{bottom:177px}}

/* MONTRA online combat: shared boss HP fed by authoritative server state. */
.monster-status {
  position:absolute;
  z-index:3;
  top:185px;
  left:12px;
  width:min(68vw,310px);
  padding:10px 11px;
  border-radius:12px;
  pointer-events:none;
}
.monster-status[hidden] { display:none; }
.monster-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  font-weight:700;
  color:#facbba;
}
.monster-heading strong { white-space:nowrap; color:#ffe5d5; font-size:10px; }
.monster-hp-track {
  margin-top:7px;
  width:100%;
  height:9px;
  background:#24161a;
  border:1px solid #8d5655;
  border-radius:999px;
  overflow:hidden;
}
#monsterBar {
  width:100%;
  height:100%;
  background:linear-gradient(90deg,#a7323c,#f07865);
  border-radius:999px;
  transition:width .15s ease;
}
#monsterHint { display:block; margin-top:5px; color:#c9c8c1; font-size:10px; }
@media(max-height:640px) { .monster-status { top:164px; } }

/* MONTRA FreePK mobile: target HP comes from server Schema, never client calculations. */
.pk-panel {
  position: absolute;
  z-index: 4;
  top: 270px;
  right: 12px;
  width: min(78vw, 300px);
  border-radius: 12px;
  padding: 10px 11px;
  border-color: #ad6669a8;
  background: linear-gradient(125deg, rgba(51, 24, 31, .94), rgba(14, 25, 28, .93));
  pointer-events: none;
}
.pk-panel[hidden], .pk-hp-track[hidden] { display: none; }
.pk-heading { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.pk-heading strong { color: #ffd2c8; font-size: 12px; white-space: nowrap; }
.pk-heading span { font-size: 11px; color: #f4ddb8; }
.pk-hp-track {
  margin: 7px 0;
  height: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: #301a1d;
  border: 1px solid #845153;
}
#pkHpBar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ae3943, #f17967);
  transition: width .15s linear;
}
#pkHint {
  display: block;
  color: #e0cbc5;
  font-size: 10px;
  margin-top: 4px;
  line-height: 1.4;
}
@media(max-height:640px) { .pk-panel { top: 240px; } }


/* Compact field slots leave room for the dash gesture. */
.skill-bar .skill {
  flex:1 1 0;
  min-width:0;
  width:auto;
  font-size:10px;
}
.skill-bar .glyph {
  width:clamp(39px,11.5vw,60px);
  height:clamp(39px,11.5vw,60px);
  font-size:25px;
  border-radius:13px;
}
.glyph.blue {
  background:radial-gradient(circle,#335678,#172638);
  color:#bcf2ff;
}
.glyph.sky {
  background:radial-gradient(circle,#2c6374,#142b3b);
  color:#cafaff;
}
#fly.fly-active .glyph {
  border-color:#80ecff;
  box-shadow:0 0 0 2px #60cde894,0 0 18px #7edbf693;
}
#fly.fly-active { color:#c9f7ff; }

#climb.climb-active .glyph {
  border-color:#ffd089;
  box-shadow:0 0 0 2px #c8983b88,0 0 15px #ffd77675;
}
@media(max-width:370px) {
  .skill-bar { padding:0 8px; gap:3px; }
  .skill-bar .glyph { width:37px; height:37px; font-size:22px; }
  .skill-bar .skill { font-size:9px; }
}


/* MONTRA V0.1.10 - portrait combat HUD. Keep playable 3D space clear.
   Information lives in small top chips; full quest text opens in the drawer.
   Landscape and desktop retain their existing layouts. */
@media (max-width: 640px) and (orientation: portrait) {
  :root { --portrait-hud-top: max(7px, env(safe-area-inset-top)); }
  .top-hud {
    top: var(--portrait-hud-top);
    left: 8px; right: 8px;
    gap: 5px;
  }
  .identity {
    width: min(53vw, 192px);
    padding: 6px 8px;
    border-radius: 10px;
  }
  .brand-row { gap: 2px; margin-bottom: 4px; }
  .brand { font-size: clamp(15px, 4.5vw, 19px); letter-spacing: .6px; }
  .brand small { font-size: 8px; margin-left: 2px; }
  .badge { padding: 2px 5px; font-size: 9px; }
  .character { gap: 6px; }
  .portrait { width: 26px; height: 26px; font-size: 13px; }
  .name { font-size: 10px; margin-bottom: 3px; }
  .name span { font-size: 9px; }
  .bar { height: 4px; margin-top: 3px; }
  .location-area { width: 72px; }
  .mini-map { width: 68px; height: 68px; }
  .place-name { display: none; }

  /* The quest becomes a tappable one-line shortcut rather than a large card. */
  .quest {
    top: calc(var(--portrait-hud-top) + 76px);
    left: 8px;
    width: min(51vw, 190px);
    min-height: 29px;
    padding: 4px 7px;
    gap: 5px;
    border-radius: 9px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    color: inherit;
  }
  .quest-icon { font-size: 16px; line-height: 16px; }
  .quest .quest-content {
    display: block;
    min-width: 0;
    flex: 1;
    overflow: hidden;
  }
  .quest strong {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .quest .quest-content > span { display: none; }
  .quest::after { content: "›"; color: #dcb27a; font-size: 17px; line-height: 1; }

  /* The live-online count stays visible without obscuring the world. */
  .online-count {
    top: calc(var(--portrait-hud-top) + 76px);
    right: 8px;
    width: min(44vw, 160px);
    min-height: 29px;
    padding: 4px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
    border-radius: 9px;
  }

  /* Both combat panels share one narrow row directly below the quest. */
  .monster-status {
    top: calc(var(--portrait-hud-top) + 112px);
    left: 8px;
    width: min(52vw, 190px);
    padding: 6px 7px;
    border-radius: 9px;
  }
  .monster-heading { gap: 4px; font-size: 9px; }
  .monster-heading > span {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .monster-heading strong { font-size: 9px; flex-shrink: 0; }
  .monster-hp-track { margin-top: 4px; height: 5px; }
  #monsterHint { display: none; }

  .pk-panel {
    top: calc(var(--portrait-hud-top) + 112px);
    right: 8px;
    width: min(44vw, 164px);
    min-height: 27px;
    padding: 6px 7px;
    border-radius: 9px;
  }
  .pk-heading { gap: 3px; }
  .pk-heading strong { font-size: 9px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .pk-heading span { font-size: 9px; white-space: nowrap; }
  .pk-hp-track { margin: 4px 0 0; height: 5px; }
  #pkHint { display: none; }

  /* Seven one-thumb actions stay visible without covering the playfield. */
  .tap-tip { display: none; }
  .controls {
    bottom: calc(9px + env(safe-area-inset-bottom));
    --dash-swipe-reach: clamp(80px, 12dvh, 108px);
  }
  .skill-bar { padding: 0 6px; gap: 2px; margin-bottom: 7px; }
  .skill-bar .skill { font-size: 9px; gap: 3px; }
  .skill-bar .glyph {
    width: clamp(36px, 10.5vw, 46px);
    height: clamp(36px, 10.5vw, 46px);
    font-size: 22px;
    border-radius: 11px;
  }
  .nav-bar { width: calc(100% - 16px); border-radius: 12px; }
  .nav-bar button { min-height: 40px; font-size: 11px; gap: 4px; }
  .nav-bar button span { font-size: 15px; }
  .version { display: none; }
  .toast { bottom: calc(122px + env(safe-area-inset-bottom)); font-size: 11px; max-width: 86vw; }
}

/* MONTRA 0.2.1: three compact guest character slots in the existing drawer. */
.slot-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:10px 0; }
.slot-choice { display:flex; flex-direction:column; justify-content:center; gap:5px;
  min-height:76px; padding:9px 6px; border-radius:12px;
  border:1px solid #977b59; background:#203035; color:#f6e5c5; text-align:center; }
.slot-choice strong { font-size:12px; }
.slot-choice span { font-size:10px; line-height:1.3; opacity:.85; overflow-wrap:anywhere; }
.slot-choice.selected { background:#483c30; border-color:#e4b876; box-shadow:inset 0 0 0 1px #d9aa68; }
.slot-choice.playing { border-style:dashed; }
@media(max-width:370px){.slot-choices{gap:4px}.slot-choice{padding:7px 4px;min-height:71px}.slot-choice strong{font-size:11px}}

/* Swipe gestures originate in the existing menu region, never a new button. */
.skill-bar, .nav-bar { touch-action:none; }


/* ---- Dedicated High-Density Bag Matrix (4 columns, vertical, compact square, multi-page) ---- */
.bag-category-tabs {
  display: flex;
  gap: 5px;
  margin: 4px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.bag-category-tabs::-webkit-scrollbar { display: none; }
.bag-tab-chip {
  flex: 1 0 auto;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(177, 139, 80, 0.35);
  background: #152528;
  color: #dfd7c5;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.bag-tab-chip.on {
  background: linear-gradient(135deg, #7a5026, #4d3014);
  color: #ffe2a6;
  border-color: #f2ca83;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

.bag-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11.5px;
  color: #a0b2ad;
}
.bag-page-header b {
  color: #f7dfa6;
}
.bag-pager {
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-nav-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #74827e;
  background: #162629;
  color: #f7dfa6;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.page-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.bag-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 6px 0 8px;
}
.bag-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.2s;
}
.bag-dots .dot.on {
  background: #f2ca83;
  width: 16px;
  border-radius: 3px;
}

.bag-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 12px;
}
.bag-slider::-webkit-scrollbar { display: none; }
.bag-page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, var(--item-slot-size)));
  justify-content: center;
  gap: 4px;
}

.bag-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, var(--item-slot-size)));
  justify-content: center;
  gap: 4px;
  margin: 4px 0 10px;
}

.bag-slot {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: var(--item-slot-size);
  max-height: var(--item-slot-size);
  padding: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(116, 130, 126, 0.45);
  border-radius: 6px;
  background: linear-gradient(150deg, #1b2a2d, #0d1719);
  touch-action: manipulation;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}
.bag-slot:hover {
  border-color: #dfb76c;
  background: #223739;
}
.bag-slot.empty {
  opacity: 0.35;
  border-style: dashed;
  border-color: #445654;
  background: rgba(10, 20, 22, 0.4);
}
.bag-slot.bag-filled {
  border-color: #c0a56c;
  background: linear-gradient(155deg, #443422, #162426);
  box-shadow: 0 0 6px rgba(192, 165, 108, 0.25);
}
.bag-slot.bag-selected {
  outline: 2px solid #ffd777;
  outline-offset: 1px;
  border-color: #fff;
}
.bag-slot.bag-equipped {
  border-color: #5fe0d0;
  box-shadow: inset 0 0 8px rgba(95, 224, 208, 0.35), 0 0 6px rgba(95, 224, 208, 0.3);
}
.bag-slot.bag-equipped::before {
  content: "✓";
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 10px;
  font-weight: 900;
  color: #72f7d2;
  text-shadow: 0 1px 3px #000;
}
.bag-slot.bag-slot-dim {
  opacity: 0.22;
  filter: grayscale(0.85);
}
.cp-equip-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12px 0 8px;
}
.bag-dots .dot {
  cursor: pointer;
}
.bag-symbol {
  font-size: clamp(14px, 3.6vw, 17px);
  line-height: 1;
  color: #758b8b;
}
.bag-slot.bag-filled .bag-symbol {
  color: #fce1a7;
}
.bag-quantity {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff5d8;
  text-shadow: 0 1px 3px #000;
}

/* ---- Centered Item Detail Modal ---- */
.item-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900 !important;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.16s ease-out both;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.item-modal-backdrop[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.item-detail-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  max-height: min(88vh, 640px);
  z-index: 950 !important;
  pointer-events: auto !important;
  background: linear-gradient(165deg, #18282b, #0c1618);
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85),
              0 0 24px rgba(212, 175, 55, 0.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  box-sizing: border-box;
}
.item-detail-modal[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@keyframes itemModalPop {
  0% { transform: translate(-50%, -46%) scale(0.93); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.item-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}
.item-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.item-modal-naming {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.item-modal-name {
  font-size: 15px;
  font-weight: 750;
  color: #fff2d1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-modal-sub {
  font-size: 11px;
  color: #9ec5b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-modal-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(212, 175, 55, 0.6);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  flex-shrink: 0;
  transition: all 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
}
.item-modal-close-btn:hover {
  background: rgba(212, 175, 55, 0.25);
  border-color: #ffd700;
  transform: scale(1.08);
}
.item-modal-close-btn:active {
  transform: scale(0.94);
}
.item-modal-close-btn:hover,
.item-modal-close-btn:active {
  background: rgba(212, 175, 55, 0.25);
  border-color: #ffd700;
  color: #fff;
  transform: scale(1.08);
}

.item-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.item-stats-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.item-stats-title {
  font-size: 11px;
  font-weight: 700;
  color: #ba925b;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.item-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.bag-stat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  padding: 6px 9px;
}
.bag-stat-icon {
  font-size: 15px;
  flex-shrink: 0;
}
.bag-stat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bag-stat-label {
  font-size: 10px;
  color: #a0b3b5;
  white-space: nowrap;
}
.bag-stat-val {
  font-size: 12.5px;
  font-weight: 750;
  color: #5ff5b0;
  white-space: nowrap;
}

.item-stat-empty {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: #a0b3b5;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.item-diff-card {
  background: rgba(18, 35, 38, 0.85);
  border: 1px dashed rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: #f7d58b;
  line-height: 1.4;
}
.item-diff-card:empty {
  display: none !important;
}

.item-desc-section {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  padding: 8px 10px;
}
.item-modal-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: #c9bfaf;
  margin: 0;
}

.item-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 10.5px;
}
.item-meta-tag {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 3px 7px;
  color: #b0c5c2;
}
.item-price-tag {
  color: #fbd366;
  border-color: rgba(251, 211, 102, 0.3);
}

.item-modal-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.item-modal-actions button.primary {
  flex: 2;
  padding: 10px;
  font-size: 13.5px;
  font-weight: 750;
  border-radius: 10px;
}
.item-modal-actions button.secondary {
  flex: 1;
  padding: 10px;
  font-size: 13px;
  border-radius: 10px;
}

.bag-detail-card {
  margin-top: 10px;
  background: linear-gradient(160deg, #18282b, #0c1618);
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 12px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.drawer:has(.bag-category-tabs) {
  width: min(96vw, 480px);
  max-height: min(88dvh, 740px);
}
/* Bag drawer sizing */


#useBagItem[disabled] { opacity:.52; cursor:not-allowed; }

/* ---- Equipment Slot Selection Popup (Character Screen) ---- */
.equip-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900 !important;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  animation: fadeIn 0.16s ease-out both;
}
.equip-popup-backdrop[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.equip-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  max-height: min(85vh, 600px);
  z-index: 950 !important;
  pointer-events: auto !important;
  background: linear-gradient(165deg, #18282b, #0c1618);
  border: 1.5px solid rgba(212, 175, 55, 0.55);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85),
              0 0 24px rgba(212, 175, 55, 0.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  box-sizing: border-box;
}
.equip-popup[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@keyframes popupPopIn {
  from { transform: translate(-50%, -46%) scale(0.94); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.equip-popup-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}
.equip-popup-close:hover,
.equip-popup-close:active {
  background: rgba(212, 175, 55, 0.3);
  border-color: #ffd700;
  color: #fff;
  transform: scale(1.08);
}

.equip-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}
.equip-popup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 750;
  color: #ffe2a6;
}
.equip-popup-title b {
  color: #f5d37f;
  font-size: 18px;
}
.equip-popup-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}
.equip-popup-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.equip-popup-content {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(68vh, 480px);
  padding-right: 2px;
}
.equip-section-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #d1b67b;
  margin: 4px 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Worn item card at top of popup */
.equip-worn-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: linear-gradient(145deg, #1d4037, #102722);
  border: 1px solid #6ee6c9;
  border-radius: 11px;
}
.equip-worn-card .bag-slot {
  flex-shrink: 0;
  width: var(--item-slot-size);
  height: var(--item-slot-size);
}
.equip-worn-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.equip-worn-name {
  font-size: 13.5px;
  font-weight: 750;
  color: #fff2d1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.equip-worn-stats {
  font-size: 11px;
  color: #8be0c3;
  line-height: 1.25;
}
.equip-unequip-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid #d15656;
  background: linear-gradient(135deg, #6e2020, #421010);
  color: #ffcccc;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.equip-unequip-btn:hover {
  background: linear-gradient(135deg, #852626, #541414);
}

/* Candidate square item slots grid */
.equip-candidate-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, var(--item-slot-size)));
  gap: 6px;
  justify-content: center;
  margin: 4px 0 6px;
}
.equip-candidate-slot { user-select:none; }
.equip-candidate-preview {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  margin-top: 4px;
}
.equip-preview-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.equip-preview-name {
  font-size: 13.5px;
  font-weight: 750;
  color: #fff2d1;
}
.equip-preview-stats {
  font-size: 11px;
  color: #8be0c3;
  line-height: 1.3;
}
.equip-preview-diff {
  font-size: 10.5px;
  color: #f7d58b;
  font-weight: 600;
}
.equip-preview-req {
  font-size: 10.5px;
  color: #ff918e;
  font-weight: 600;
}
.equip-confirm-btn {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 750;
  border-radius: 9px;
  border: 1px solid #d4af37;
  background: linear-gradient(135deg, #a6722c, #603d16);
  color: #fff4d6;
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.15s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.equip-confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #bd8534, #73491b);
  transform: translateY(-1px);
}
.equip-confirm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: #666;
  background: #252e30;
  color: #888;
}

.equip-empty-notice {
  text-align: center;
  padding: 20px 14px;
  color: #a0b2ad;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  border: 1px dashed rgba(212, 175, 55, 0.3);
}
.equip-empty-notice .empty-icon {
  font-size: 26px;
  color: #c9a35a;
  opacity: 0.6;
}
.equip-empty-notice strong {
  color: #e8d5a6;
  font-size: 13px;
}
.equip-empty-notice small {
  color: #8fa59e;
  font-size: 10.5px;
}
.wear-title { margin:14px 0 8px; font-size:.95rem; font-weight:700; color:#f4d59f; display:flex; align-items:center; gap:6px; }
.wear-grid, .paperdoll-grid {
  display: grid;
  grid-template-columns: var(--item-slot-size) minmax(130px, 1fr) var(--item-slot-size);
  grid-template-areas:
    "leftEar   head         rightEar"
    "neck      doll-stage   arms"
    "shoulders doll-stage   rightHand"
    "mainHand  doll-stage   offHand"
    "leftHand  chest        rightRing"
    "leftRing  legs         feet";
  gap: 6px;
  justify-items: center;
  align-items: center;
  margin: 8px 0 14px;
}
@media (max-width: 440px) {
  .wear-grid, .paperdoll-grid {
    grid-template-columns: var(--item-slot-size) minmax(116px, 1fr) var(--item-slot-size);
    gap: 4px;
  }
}

/* Central Character Doll Stage */
.doll-stage {
  justify-self: stretch;
  grid-area: doll-stage;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  background: radial-gradient(circle at 50% 36%, rgba(32, 48, 48, 0.95), rgba(9, 17, 18, 0.98));
  border: 1.5px solid rgba(212, 175, 55, 0.45);
  border-radius: 12px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.75), 0 3px 10px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  text-align: center;
  min-height: 180px;
}
.doll-stage::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(235, 194, 114, 0.16) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  border-radius: 50%;
}
.doll-stage .doll-portrait-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid #dfb76c;
  background: radial-gradient(circle, #22353b, #0c181a);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  position: relative;
  box-shadow: 0 0 14px rgba(223, 183, 108, 0.35);
}
.doll-stage .doll-portrait-seal {
  width: 42px;
  height: 42px;
  color: #f1cf87;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.doll-stage .doll-level-pill {
  position: absolute;
  bottom: -5px;
  background: linear-gradient(135deg, #a67c1e, #f5d77f);
  color: #121008;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,.7);
  letter-spacing: .5px;
}
.doll-stage .doll-name {
  font-size: 14px;
  font-weight: 750;
  color: #fff2d1;
  text-shadow: 0 1px 3px #000;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95%;
}
.doll-stage .doll-path {
  font-size: 11px;
  color: #9ec5b8;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95%;
}
.doll-stage .doll-cp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(223, 183, 108, 0.5);
  padding: 2px 8px;
  border-radius: 12px;
  margin: 2px 0 5px;
}
.doll-stage .doll-cp-icon {
  color: #f3c774;
  font-size: 11px;
}
.doll-stage .doll-cp-label {
  font-size: 10px;
  color: #d1b67b;
}
.doll-stage .doll-cp-val {
  font-size: 12px;
  font-weight: 750;
  color: #ffe699;
}
.doll-stage .doll-vitals-mini {
  display: flex;
  gap: 4px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}
.doll-stage .doll-vitals-mini span {
  font-size: 9.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  white-space: nowrap;
}
.doll-stage .doll-vitals-mini .hp-mini {
  color: #ff918e;
  border: 1px solid rgba(255, 90, 80, 0.35);
}
.doll-stage .doll-vitals-mini .mp-mini {
  color: #8ed8ff;
  border: 1px solid rgba(60, 160, 255, 0.35);
}

.wear-tile { width:var(--item-slot-size); height:var(--item-slot-size); user-select:none; justify-self:center; }
.wear-tile[aria-pressed="true"], .wear-tile:focus-visible {
  outline: 2px solid #ffd777;
  outline-offset: 1px;
}
.wear-tile .wear-tag {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: #8fa59e;
  letter-spacing: -0.2px;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  line-height: 1;
}
.wear-tile.filled .wear-tag {
  color: #d1b67b;
}
.wear-tile .bag-quantity {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 9.5px;
  font-weight: 800;
  color: #5fe0d0;
  text-shadow: 0 1px 2px #000;
  line-height: 1;
}

.wear-sides:not([hidden]) { display:flex; gap:6px; margin:6px 0; }
.wear-sides button { flex:1; min-height:44px; }
.wear-sides button[aria-pressed="true"] { outline:2px solid #f2ca83; }
#bagEquipped { max-width:61%; text-align:right; overflow-wrap:anywhere; }
.stat-row { gap:8px; }
.stat-row span { flex:1; }
.stat-row button { min-width:48px; min-height:40px; border:1px solid #caa46b; border-radius:9px; background:#604329; }

.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; }
#chatUnread { min-width:18px; padding:1px 4px; border-radius:10px; background:#a34a38; font-size:10px; }
.chat-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.chat-tabs button { flex:1 1 auto; min-height:42px; border:1px solid #997a54; border-radius:10px; background:#25393b; }
.chat-tabs button[aria-pressed="true"] { background:#6a4a2c; border-color:#f1c681; }
.chat-log { height:min(32dvh,240px); min-height:110px; overflow-y:auto; padding:10px; border:1px solid #9b805669; border-radius:10px; background:#091719; overflow-wrap:anywhere; }
.chat-line { margin:3px 0; white-space:pre-wrap; }
.chat-line strong { color:#efc787; }
.chat-empty { opacity:.7; }
.chat-form { display:flex; gap:8px; margin-top:10px; }
.drawer-body .chat-form input { min-width:0; flex:1; font-size:16px; }
.chat-form button { min-width:58px; min-height:46px; border:1px solid #d7ab6c; border-radius:10px; background:#7a4d27; }

.warp-button { position:absolute; z-index:12; left:50%; bottom:calc(170px + env(safe-area-inset-bottom)); transform:translateX(-50%); min-height:48px; padding:10px 18px; border:1px solid #a8f4dc; border-radius:14px; color:#e9fff7; background:#164d45; box-shadow:0 0 18px #78eac677; font:inherit; font-weight:700; white-space:nowrap; }
.climb-context { bottom:calc(230px + env(safe-area-inset-bottom)); }
.flight-context { bottom:calc(230px + env(safe-area-inset-bottom)); }
#mountButton i { font-style:normal; }
#mountButton[hidden] { display:none; }
.warp-loading { position:absolute; inset:0; z-index:30; display:grid; place-items:center; color:#effff9; background:#0a1a1be8; font-size:1.2rem; }
.warp-button[hidden], .warp-loading[hidden] { display:none; }

/* Market and trading stay inside the existing drawer, keeping the world clear. */
#tradeUnread { min-width:17px; padding:1px 4px; border-radius:10px; background:#a34a38; font-size:10px; }
.economy-balance { margin-bottom:12px; padding:11px 13px; border:1px solid #b7965c; border-radius:11px; color:#ffe0a1; background:linear-gradient(120deg,#44382a,#1d3030); font-size:15px; font-weight:700; }
.economy-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.economy-heading h3 { margin:15px 0 8px; }
.economy-heading button, .market-row button { min-height:40px; padding:7px 11px; border:1px solid #c6a36e; border-radius:9px; background:#59402a; color:#fff1d3; }
.market-list { max-height: min(32dvh, 260px); overflow-y:auto; border:1px solid #a8875555; border-radius:11px; padding:5px 10px; background:#0c1c1e; }
.market-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #ffffff1c; }
.market-row:last-child { border-bottom:0; }
.market-row div { min-width:0; display:flex; flex-direction:column; overflow-wrap:anywhere; }
.market-row strong { color:#f7dbab; }
.market-row small { color:#c6b9a4; font-size:11px; }
.drawer-body select,.item-detail-modal select { width:100%; min-height:46px; padding:10px; color:#f8e5c5; background:#081316; border:1px solid #a88b60; border-radius:10px; font:inherit; }
.economy-inputs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.economy-inputs label { min-width:0; font-size:12px; }
.economy-inputs input { margin-top:5px; font-size:16px; }
.drawer-body .market-check { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; }
.drawer-body .market-check input { width:auto; min-height:20px; }
.market-row .auction-bid-controls { flex:0 0 min(38%,160px); gap:5px; }
.drawer-body .auction-bid-controls input { min-width:0; min-height:40px; padding:6px 8px; font-size:16px; }
#economyMarketPanel[hidden], #economyAuctionPanel[hidden], #economySupplyPanel[hidden], #economyTradePanel[hidden], #tradeInviteArea[hidden], #tradeActiveArea[hidden] { display:none; }
.drawer-body button:disabled { opacity:.5; cursor:not-allowed; }

#partyUnread { min-width:17px; padding:1px 4px; border-radius:10px; background:#a34a38; font-size:10px; }
.party-invitation { margin:10px 0; padding:12px; border:1px solid #d9b378; border-radius:11px; background:#473a2a; }
.party-invitation[hidden] { display:none; }
.party-actions { display:flex; gap:8px; margin-top:9px; }
.party-actions button { flex:1; min-height:43px; border:1px solid #c8a46d; border-radius:9px; background:#654a2d; }
.party-member { display:flex; justify-content:space-between; gap:8px; padding:9px 0; border-bottom:1px solid #fff2; }
.party-member strong { overflow-wrap:anywhere; color:#f7dbab; }
.party-member span { white-space:nowrap; color:#b9d6ca; }

#chatTargetField[hidden] { display:none; }

.skill[aria-pressed="true"] .glyph { box-shadow:0 0 16px #b677ef; outline:2px solid #e0bcff; }

#buildFields[hidden], #occultBookButton[hidden], #muayBookButton[hidden], #bladeBookButton[hidden], #sentinelBookButton[hidden] { display:none; }

#swordTreeButton[hidden] { display:none; }
.sword-schools { display:flex; flex-wrap:wrap; gap:6px; }
.sword-school.selected { outline:2px solid #e5c586; }
.sword-node { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px; margin:7px 0; border:1px solid #8e7654; border-radius:9px; background:#25221f; }
.sword-node.learned { border-color:#d5b46e; }
.sword-node p { margin:4px 0; }
.sword-node small { display:block; opacity:.8; }
.sword-node button { flex:none; min-height:42px; }
.sword-passive { color:#e8cb8c; white-space:nowrap; }

.sword-hotbar { display:flex; justify-content:center; gap:5px; margin:0 auto 7px; padding:0 8px; }
.sword-hotbar[hidden] { display:none; }
.sword-hotkey { min-width:0; max-width:110px; min-height:40px; padding:4px 8px; border:1px solid #c4a265; border-radius:8px; background:#30291fdf; color:#fff0c8; font-size:11px; }
.sword-hotkey:disabled { opacity:.55; }
.sword-slot-label { display:block; margin-top:5px; font-size:12px; }
.sword-slot-label select { max-width:115px; margin-left:6px; }

.sword-status { width:max-content; max-width:90%; margin:0 auto 4px; padding:3px 9px; border-radius:8px; background:#201a14df; color:#ffe3a0; font-size:11px; text-align:center; }
.sword-status[hidden] { display:none; }

.guild-member { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 0; border-bottom:1px solid #fff2; }
.guild-member > div:first-child { display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; }
.guild-member strong { color:#f7dbab; }
.guild-member small { color:#b9d6ca; }
.guild-actions { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }
.guild-actions button { min-height:40px; padding:5px 9px; border:1px solid #c8a46d; border-radius:9px; background:#59402a; color:#fff1d3; }
#guildCreateArea[hidden], #guildMemberArea[hidden], #guildInviteArea[hidden], #guildInvitationBox[hidden] { display:none; }

.guild-member { flex-direction:column; align-items:stretch; }
.guild-management summary { display:block; min-height:42px; padding:10px 12px; border:1px solid #a88b60; border-radius:9px; color:#f7dbab; cursor:pointer; }
.guild-management summary::before { content:"▸ "; }
.guild-management[open] summary::before { content:"▾ "; }
.guild-management-panel { display:grid; gap:8px; padding:10px 2px; }
.guild-management-panel .field { margin:0; }
.guild-management-panel select { margin-top:4px; }
.atlas-back {padding:7px 12px;border:1px solid #8e8060;border-radius:8px;background:#273536;color:#f5dcad}
.atlas-summary {min-height:80px;margin:8px 0;padding:9px 12px;background:#152c2c;border-left:3px solid #ddba74;border-radius:4px}
.atlas-summary strong {color:#ffe2ab}.atlas-summary p {margin:2px 0;font-size:12px}
.atlas-scroll {height:min(41dvh,350px);overflow:auto;overscroll-behavior:contain;border:1px solid #817051;border-radius:12px;background:radial-gradient(ellipse at top right,#34463c,#142b30 55%,#101e24)}
.atlas-board {position:relative;width:100%;min-width:275px;height:827px;isolation:isolate}
.atlas-board svg {position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.atlas-board line {stroke:#849385;stroke-width:2}.atlas-board line.route {stroke:#ffd180;stroke-width:4}
.atlas-cell {position:absolute;transform:translate(-50%,-50%);width:25%;max-width:122px;min-height:54px;padding:5px 3px;background:#284741;color:#e5f0dd;border:1px solid #92b198;border-radius:18px 4px;line-height:1.2;font-size:12px;text-align:center}
.atlas-cell {--rim:#92b198;--land:#284741;isolation:isolate;border:0;padding:4px 7px;border-radius:0;background:var(--rim);clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%)}
.atlas-cell::before {content:"";position:absolute;inset:1px;z-index:-1;background:var(--land);clip-path:inherit}
.atlas-cell b {display:block;font-size:16px;color:#b9d9ad}.atlas-cell.capital {--rim:#efc67e;--land:#60492e}.atlas-cell.capital b {color:#ffe098}
.atlas-cell .atlas-war-time {display:block;color:#ffe2ab;font-size:10px;font-weight:700;white-space:nowrap}
.atlas-cell.territory {--rim:#c69bc2;--land:#49324d;min-height:68px}.atlas-cell.territory b {color:#f0b8dc}
.atlas-cell.here::after {content:"●";position:absolute;top:3px;right:14px;color:#8dfce0}
.atlas-cell[aria-pressed=true],.atlas-cell:focus-visible {--rim:#ffe2a5}
.atlas-cell[aria-pressed=true]::before,.atlas-cell:focus-visible::before {inset:3px}

/* Sound settings (help sheet) */
.sound-settings { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(210, 170, 90, .25); }
.sound-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.sound-row input[type="range"] { flex: 1; max-width: 60%; accent-color: #c9973f; }

/* Bottom menu: icon above label so all seven entries fit a 360-390 px phone. */
.nav-bar button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 1px; padding: 4px 1px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.nav-bar button span { font-size: 16px; line-height: 1; }
.nav-bar button b { position: absolute; transform: translate(14px, -10px); }
.nav-bar button { position: relative; }

/* Sound settings: label left, control right, one tidy row each. */
.drawer-body .sound-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; font-weight: 600; }
.drawer-body .sound-row input[type="range"] { width: 55%; max-width: 220px; padding: 0; border: 0; background: none; }
.drawer-body .sound-row input[type="checkbox"] { width: 22px; height: 22px; padding: 0; margin: 0 8px 0 0; accent-color: #c9973f; }
.drawer-body .sound-row:first-of-type { justify-content: flex-start; }

/* ===== HUD 2: player card, guide tracker, target frame, status chip ===== */
.portrait { position: relative; }
#levelBadge { position: absolute; right: -5px; bottom: -5px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; background: linear-gradient(#e4b766, #a8742f); color: #1d1408; font: 800 10px/17px system-ui, sans-serif; text-align: center; box-shadow: 0 1px 4px #000a; }
.portrait.low-hp { border-color: #ff6a5a; box-shadow: 0 0 0 2px #ff4a3a66, 0 0 12px #ff3a2a88; animation: hudPulse 1s ease-in-out infinite; }
@keyframes hudPulse { 50% { box-shadow: 0 0 0 3px #ff4a3a99, 0 0 18px #ff3a2acc; } }
.bar { position: relative; }
.bar em { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 9px/1 system-ui, sans-serif; font-style: normal; color: #fff8ec; text-shadow: 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
.bar.hp { height: 12px; }
.bar.mp { height: 8px; }
.bar.mp em { justify-content: flex-end; padding-right: 4px; font-size: 8px; }
.bar.xp { height: 3px; margin-top: 4px; border-color: #ffffff14; }
.bar.xp i { width: 0; background: linear-gradient(90deg, #b68a3a, #f6d58c); box-shadow: 0 0 6px #f0c46c88; transition: width .4s ease; }
.bar.hp i, .bar.mp i { transition: width .25s ease; }
.exp-text { display: block; margin-top: 2px; font-size: 8.5px; color: #cdb98f; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quest-progress { display: block; margin-top: 2px; font-size: 9.5px; color: #f2d08a; font-weight: 700; }
.quest-progress:empty { display: none; }
.quest-pointer { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 34px; gap: 1px; }
.quest-pointer[hidden] { display: none; }
.quest-pointer i { font-style: normal; font-size: 15px; color: #f6cf7c; text-shadow: 0 0 6px #e8a83c99; transition: transform .25s ease; }
.quest-pointer small { font-size: 9px; color: #e7d6b4; white-space: nowrap; }
.online-count.safe { border-color: #5fcf9e99; color: #c9f5df; }
.target-level { margin-left: auto; margin-right: 6px; font-size: 9.5px; font-weight: 700; color: #f3d18f; white-space: nowrap; }
.monster-status.elite { border-color: #f0b54acc; box-shadow: 0 0 0 1px #f0b54a55, 0 6px 18px #000a, 0 0 18px #f0a83a44; }
.monster-status.elite #monsterBar { background: linear-gradient(90deg, #a66a1c, #f4c35a); }
#monsterHint { display: none; }

@media (max-width: 640px) and (orientation: portrait) {
  .identity { width: min(60vw, 232px); padding: 7px 8px 6px; position: relative; }
  .brand-row { position: absolute; top: 6px; right: 7px; margin: 0; }
  .brand-row .brand { display: none; }
  .character { gap: 9px; align-items: flex-start; }
  .portrait { width: 40px; height: 40px; font-size: 20px; margin-top: 2px; }
  .name { font-size: 11.5px; margin-bottom: 4px; padding-right: 44px; }
  .name .profile-trigger #characterLevel { font-size: 9px; }
  .bar.hp { height: 12px; margin-top: 2px; }
  .bar.mp { height: 8px; margin-top: 3px; }
  .bar.xp { height: 3px; margin-top: 4px; }

  .quest { top: calc(var(--portrait-hud-top) + 96px); width: min(60vw, 232px); min-height: 40px; padding: 5px 7px; align-items: center; }
  .quest .quest-content > span { display: block; font-size: 9.5px; color: #e4ddd0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
  .quest strong { font-size: 10.5px; }
  .quest::after { content: none; }

  .online-count { top: calc(var(--portrait-hud-top) + 96px); width: auto; max-width: 36vw; padding: 4px 8px; font-size: 9.5px; white-space: normal; line-height: 1.25; }

  .monster-status { top: calc(var(--portrait-hud-top) + 146px); left: 50%; right: auto; transform: translateX(-50%); width: min(80vw, 300px); padding: 6px 9px 7px; border-radius: 10px; }
  .monster-heading { font-size: 10.5px; }
  .monster-heading strong { font-size: 9.5px; }
  .monster-hp-track { height: 8px; margin-top: 5px; }
}
/* The older ".quest span" rule outranks plain classes; pin the pointer box by id. */
#quest .quest-pointer { display: flex; }
#quest .quest-pointer[hidden] { display: none; }
#quest .quest-progress:empty { display: none; }
@media (max-width: 640px) and (orientation: portrait) {
  /* PK / safe-zone chip sits under the status chip instead of on top of it. */
  .pk-panel { top: calc(var(--portrait-hud-top) + 128px); width: min(36vw, 150px); }
  .online-count { max-width: min(36vw, 150px); min-height: 26px; }
  /* With a target on screen, the frame drops below the PK chip column. */
  .monster-status { top: calc(var(--portrait-hud-top) + 162px); }
}

/* ===== Character sheet ===== */
.cp-tabs { display: flex; gap: 6px; margin: -4px 0 12px; padding: 4px; border-radius: 12px; background: #0a1517; border: 1px solid #b18b5040; }
.cp-tabs button { flex: 1; min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: #cdbf9f; font: 700 12.5px/1.2 system-ui, sans-serif; }
.cp-tabs button.on { background: linear-gradient(#5a4220, #3a2a14); color: #ffe2a6; box-shadow: inset 0 0 0 1px #d3a75e88, 0 2px 8px #0008; }
.cp-page[hidden] { display: none; }
.cp-hero { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: radial-gradient(circle at 18% 30%, #3c2a16 0%, #14211f 70%); border: 1px solid #c49a5a66; }
.cp-hero::before, .cp-hero::after { content: "❦"; position: absolute; color: #d9b06999; font-size: 14px; }
.cp-hero::before { top: 4px; right: 8px; } .cp-hero::after { bottom: 4px; right: 8px; transform: rotate(180deg); }
.cp-ring { --p: 0; position: relative; flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(#f2c86e calc(var(--p) * 1%), #2a2a24 0); display: grid; place-items: center; box-shadow: 0 0 18px #e0a84a44; }
.cp-glyph { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; color: #f6dca2; background: radial-gradient(circle at 50% 35%, #7b5135, #1f2320 80%); border: 1px solid #a9885c; }
.cp-ring b { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); min-width: 26px; padding: 1px 7px; border-radius: 10px; background: linear-gradient(#f0c46c, #a8742f); color: #1d1408; font: 800 12px/18px system-ui, sans-serif; text-align: center; box-shadow: 0 2px 6px #000a; }
.cp-hero-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-hero-info strong { font-size: 18px; color: #ffe2a6; }
.cp-hero-info span { font-size: 12px; color: #d9cfbc; }
.cp-hero-info em { font-style: normal; font-size: 11px; color: #1d1408; background: #e0b864; border-radius: 8px; padding: 1px 8px; align-self: flex-start; }
.cp-bars { margin: 12px 0 6px; display: grid; gap: 7px; }
.cp-bar { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px; font-size: 11.5px; color: #d9cfbc; }
.cp-bar div { height: 10px; border-radius: 6px; background: #070f11; border: 1px solid #ffffff1c; overflow: hidden; }
.cp-bar i { display: block; height: 100%; border-radius: 6px; transition: width .4s ease; }
.cp-bar.hp i { background: linear-gradient(90deg, #ad3a3d, #e36e66); }
.cp-bar.st i { background: linear-gradient(90deg, #355ab2, #69b5e8); }
.cp-bar.xp i { background: linear-gradient(90deg, #b68a3a, #f6d58c); }
.cp-bar strong { font-size: 11.5px; color: #f6e5c4; white-space: nowrap; }
.cp-effects { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.cp-fx { font-size: 11px; padding: 3px 9px; border-radius: 10px; background: #1f2b2e; border: 1px solid #b18b5055; color: #e8d9b8; }
.cp-fx.good { background: #173b30; border-color: #5fcf9e88; color: #c9f5df; }
.cp-points { margin: 6px 0; padding: 7px 10px; border-radius: 10px; background: #3a2a10; border: 1px solid #f0c46c88; color: #ffe2a6; font-weight: 700; font-size: 12px; }
.cp-points[hidden] { display: none; }
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.cp-tile { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; padding: 9px 10px; border-radius: 12px; background: linear-gradient(160deg, #182629, #0d181a); border: 1px solid #b18b5040; }
.cp-tile i { grid-row: 1 / 4; align-self: center; font-style: normal; font-size: 20px; color: #f0c46c; text-align: center; }
.cp-tile span { font-size: 11px; color: #bfb39b; }
.cp-tile strong { font-size: 20px; color: #fff1d2; line-height: 1.1; }
.cp-tile small { font-size: 10px; color: #8fe0b4; min-height: 0; }
.cp-tile small:empty { display: none; }
.cp-h { margin: 16px 0 2px; }
.cp-radar { width: 100%; max-width: 300px; display: block; margin: 0 auto; }
.cp-radar .cp-web { fill: none; stroke: #b18b5044; stroke-width: 1; }
.cp-radar .cp-shape { fill: #f0c46c33; stroke: #f0c46c; stroke-width: 2; stroke-linejoin: round; }
.cp-radar text { fill: #d9cfbc; font: 600 11px system-ui, sans-serif; }
#cpGoOnline[hidden] { display: none; }
.cp-card { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #0f1b1d; border: 1px solid #b18b5040; }
.cp-card[hidden] { display: none; }
.cp-card h4 { margin: 0 0 6px; font-size: 13px; color: #f4d59f; }
.cp-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.cp-slots span { font-size: 11.5px; padding: 6px 8px; border-radius: 9px; background: #1c2a2d; border: 1px solid #b18b5033; color: #ecdcb8; text-align: center; }
.cp-weapon { display: flex; align-items: center; gap: 10px; }
.cp-weapon strong { display: block; color: #ffe2a6; }
.cp-weapon small { font-size: 11px; color: #bfb39b; }
.cp-offline { padding: 18px 14px; border-radius: 14px; background: #0f1b1d; border: 1px solid #b18b5055; text-align: center; margin-bottom: 12px; }
.cp-offline p { margin: 0 0 12px; color: #e0d4c3; }
.cp-offline[hidden], .cp-tabs[hidden] { display: none; }
/* Stamina cost on skill buttons */
.sword-hotkey .stamina-cost { display: block; margin-top: 1px; font-size: 9px; font-weight: 700; color: #9fd4ff; letter-spacing: .2px; }
.sword-hotkey.no-stamina { opacity: .55; filter: grayscale(.6); }
.sword-hotkey.no-stamina .stamina-cost { color: #ff9a8a; }

/* ===== Guild panel ===== */
.gd-hero { display: flex; align-items: center; gap: 14px; padding: 12px; margin: 6px 0 4px; border-radius: 14px; background: radial-gradient(circle at 15% 30%, #3c2a16, #14211f 70%); border: 1px solid #c49a5a66; }
.gd-seal { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 800 26px/1 Georgia, serif; color: #2a1a08; background: radial-gradient(circle at 40% 35%, #ffe0a0, #c08a3a 70%); box-shadow: 0 0 0 3px #3a2a14, 0 0 0 5px #d3a75e, 0 4px 14px #000a; }
.gd-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gd-info strong { font-size: 18px; color: #ffe2a6; }
.gd-info span { font-size: 12px; color: #d9cfbc; }
.gd-info em { font-style: normal; font-size: 11px; align-self: flex-start; padding: 1px 8px; border-radius: 8px; background: #2a3a3c; color: #e8d9b8; }
.gd-info em[data-rank="commander"] { background: #e0b864; color: #1d1408; }
.gd-info em[data-rank="officer"] { background: #5a3a7a; color: #f0e0ff; }
.gd-forts { display: grid; gap: 6px; }
.gd-fort { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #0f1b1d; border: 1px solid #b18b5040; }
.gd-fort i { font-style: normal; font-size: 18px; color: #8b9a96; width: 22px; text-align: center; }
.gd-fort strong { display: block; font-size: 13px; color: #f0e2c4; }
.gd-fort small { font-size: 11px; color: #bfb39b; }
.gd-fort.mine { border-color: #e0b86499; background: linear-gradient(90deg, #3a2a10, #0f1b1d); }
.gd-fort.mine i { color: #f6cf7c; }
.gd-squads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.gd-squad { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 9px; background: #0f1b1d; border: 1px solid #b18b5033; font-size: 10.5px; color: #bfb39b; }
.gd-squad b { font-size: 13px; color: #8b9a96; }
.gd-squad.used b { color: #ffe2a6; }
.gd-squad.free { grid-column: span 2; }
.gd-member { display: flex; align-items: flex-start; gap: 10px; }
.gd-dot { flex-shrink: 0; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: #5a6462; }
.gd-member.online .gd-dot { background: #5fe0a0; box-shadow: 0 0 6px #5fe0a0aa; }
.gd-member > div:first-of-type { flex: 1; min-width: 0; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.gd-chip { font-size: 10px; padding: 1px 7px; border-radius: 8px; background: #1c2a2d; border: 1px solid #b18b5033; color: #d9cfbc; }
.gd-member[data-rank="commander"] .gd-chip.rank { background: #e0b864; color: #1d1408; border-color: transparent; }
.gd-member[data-rank="officer"] .gd-chip.rank { background: #5a3a7a; color: #f0e0ff; border-color: transparent; }
.gd-member[data-rank="squad_leader"] .gd-chip.rank { background: #1f4f6a; color: #d8f0ff; border-color: transparent; }
#guildMembers .gd-member { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; column-gap: 10px; }
#guildMembers .gd-member > div:first-of-type { flex: 1 1 0; }
#guildMembers .gd-member > details { flex: 1 0 100%; padding-left: 19px; }

/* ===== Guild drawer ===== */
.guild-command-panel {
  --guild-gold: #e3bf79;
  --guild-brass: #806742;
  --guild-ink: #101b1a;
  --guild-plate: #202c28;
  --guild-paper: #f4e7cb;
  --guild-muted: #c4bda7;
  --guild-danger: #edb2a2;
  color: var(--guild-paper);
}
.guild-command-panel [hidden] { display: none; }
.guild-command-panel :is(button, summary, input, select, [role="tabpanel"]):focus-visible { outline: 2px solid var(--guild-gold); outline-offset: 2px; }
.guild-command-panel button { min-height: 44px; }
.gx-toolbar { display: flex; margin-bottom: 8px; }
.guild-command-panel .gx-toolbar button { width: auto; margin: 0; padding: 6px 12px; border-color: var(--guild-brass); background: var(--guild-ink); }
.gx-banner {
  display: flex; align-items: center; gap: 15px; min-height: 98px; padding: 10px 16px;
  border: 1px solid var(--guild-brass); border-left: 3px solid var(--guild-gold); border-radius: 12px 12px 3px 3px;
  background: radial-gradient(ellipse at 0 35%, #523b20, transparent 67%), linear-gradient(125deg, #23332d, #101b1a);
  box-shadow: inset 0 0 0 2px #101713aa;
}
.gx-crest { flex-shrink: 0; width: 72px; height: 84px; filter: drop-shadow(0 4px 10px #000c) drop-shadow(0 0 12px #e0a84a44); }
.gx-title { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gx-title strong { font: 700 clamp(1.2rem, 4vw, 1.65rem)/1.3 Georgia, "Noto Serif Thai", serif; color: #ffe7ad; overflow-wrap: anywhere; }
.gx-title em { font-style: normal; font-size: .75rem; align-self: flex-start; padding: 2px 9px; border-radius: 4px; background: #304139; color: var(--guild-paper); }
.gx-title em[data-rank="commander"] { background: var(--guild-gold); color: #21180b; }
.gx-title em[data-rank="officer"] { background: #5a3a7a; color: #f0e0ff; }
.gx-title em[data-rank="squad_leader"] { background: #1f4f6a; color: #d8f0ff; }
.gx-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; margin: 0 0 12px; background: #625039; border: 1px solid var(--guild-brass); border-top: 0; border-radius: 0 0 8px 8px; overflow: hidden; }
.gx-stats div { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 7px 5px; text-align: center; background: var(--guild-ink); }
.gx-stats dt { font-size: .72rem; color: var(--guild-muted); }
.gx-stats dd { order: -1; margin: 0; font-size: 1rem; font-weight: 750; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.gx-stats small { font-size: .67rem; font-weight: 400; color: var(--guild-muted); }
.gx-tabs { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; padding: 3px; margin-bottom: 10px; border: 1px solid var(--guild-brass); border-radius: 8px; background: var(--guild-ink); }
.gx-tabs button { position: relative; min-width: 0; padding: 3px 4px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--guild-muted); font-size: .8rem; line-height: 1.2; }
.gx-tabs button[aria-selected="true"] { color: #ffe8af; font-weight: 750; border-color: var(--guild-brass); background: linear-gradient(#443621, #2b271b); }
#guildApplicationBadge:not([hidden]) { display: inline-grid; place-items: center; min-width: 1.1rem; padding: 0 3px; margin-inline-start: 3px; border-radius: 4px; background: var(--guild-gold); color: #20150a; font-size: .65rem; }
.guild-command-panel .gx-page { display: grid; gap: 10px; }
.gx-page[hidden] { display: none; }
.gx-panel, .gx-disclosure { padding: 10px; border: 1px solid #66563f; border-radius: 9px; background: var(--guild-ink); }
.guild-command-panel .gx-panel h3 { margin: 0 0 7px; color: var(--guild-gold); }
.gx-battle-panel { border-left: 3px solid var(--guild-brass); }
.guild-command-panel .gx-empty-line { margin: 0; color: var(--guild-muted); font-size: .8rem; }
.gx-territory-info { min-width: 0; overflow-wrap: anywhere; }
.guild-command-panel .gd-fort { justify-content: space-between; padding: 8px; border-radius: 6px; background: var(--guild-plate); }
.guild-command-panel .gx-territory-row[data-tone="battle"] { background: #332321; border-color: #9a624f; }
.gx-territory-row[data-tone="battle"] small { color: var(--guild-danger); }
.guild-command-panel .gx-territory-row[data-tone="owned"] { border-color: #a98a54; }
.guild-command-panel .gx-territory-row button[aria-pressed="true"] { border-color: var(--guild-gold); background: #413421; color: #ffe8b3; }
.guild-command-panel .gx-city-detail {
  --field-paper: var(--guild-paper);
  border-left: 3px solid var(--guild-gold);
  background: radial-gradient(ellipse at top left,#493820,transparent 77%), var(--guild-ink);
}
.guild-command-panel .gx-city-detail h3 { margin: 0; font: 700 1.2rem/1.4 Georgia,"Noto Serif Thai",serif; }
.guild-command-panel .gx-city-detail h3:focus-visible { outline: 2px solid var(--guild-gold); outline-offset: 3px; }
.guild-command-panel .gx-city-detail .primary { margin: 0; padding: 7px 9px; }
.gx-city-services:has(button:not([hidden])) { margin-top: 8px; }
.guild-command-panel .gd-fort button, .guild-command-panel .gx-search-row button { flex: none; width: auto; margin: 0; padding: 6px 9px; }
.gx-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.guild-command-panel .gx-shortcuts button { margin: 0; padding: 8px 6px; border-color: #687d68; border-radius: 7px; background: #283932; color: var(--guild-paper); }
.guild-command-panel #guildWarMap { border-color: var(--guild-brass); background: #3b3020; color: #ffe3aa; }
.gx-disclosure summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: var(--guild-gold); font-weight: 700; }
.gx-disclosure summary::before { content: "▸"; }
.gx-disclosure[open] summary::before { content: "▾"; }
.gx-disclosure[open] > :last-child { margin-bottom: 0; }
.gx-search-row { display: flex; align-items: stretch; gap: 8px; }
.gx-search-row input { min-width: 0; }
.guild-command-panel :is(input[type="search"], input:not([type])) { font-size: 16px; }
#guildDirectory, #guildCreateArea > details, #guildPending, .gx-invitation { margin-top: 9px; }
.gx-roster-filters { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; }
.guild-command-panel .gx-roster-filters .field { margin: 0; }
.gx-online-filter { display: flex; align-items: center; gap: 7px; min-height: 44px; color: var(--guild-muted); font-size: .78rem; }
.guild-command-panel .gx-online-filter input { width: 18px; height: 18px; padding: 0; margin: 0; accent-color: var(--guild-gold); }
.gd-member .gd-chip.presence { border-color: transparent; background: transparent; padding-inline: 3px; }
.gd-member.online .gd-chip.presence { color: #a7e1bd; }
.guild-command-panel #guildMembers .gd-member[hidden] { display: none; }
.guild-command-panel #guildMembers .gd-member > details { padding-left: 0; }
.guild-command-panel .gx-danger { color: var(--guild-danger); background: #3c2625; border-color: #9d685b; }
@media (max-width: 390px) {
  .gx-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gx-roster-filters { grid-template-columns: 1fr; gap: 2px; }
  .gx-tabs button { font-size: .73rem; }
  .guild-command-panel .gd-fort { flex-wrap: wrap; }
}
.gx-squads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gx-squad { padding: 8px 9px; border-radius: 12px; background: #0f1b1d; border: 1px solid #b18b5033; }
.gx-squad.used { border-color: #c49a5a66; background: linear-gradient(160deg, #1d2a26, #0f1b1d); }
.gx-squad-head { display: flex; justify-content: space-between; font-size: 11.5px; color: #d9cfbc; margin-bottom: 6px; }
.gx-squad-head b { color: #f3d18f; }
.gx-seats { display: flex; flex-wrap: wrap; gap: 5px; }
.gx-seat { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #5a6462; border: 1px dashed #b18b5040; }
.gx-seat.filled { border: 1px solid #8b9a96; color: #cfc6b2; background: #1c2a2d; }
.gx-seat.filled.on { border-color: #5fe0a0; color: #e8fff2; box-shadow: 0 0 6px #5fe0a066; }
.gx-seat.lead { box-shadow: 0 0 0 2px #e0b864; }
#guildMembers .gd-member { padding: 10px 6px; border-bottom: 1px solid #ffffff12; }
.gx-avatar { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 17px/1 system-ui, sans-serif; color: #f6dca2;
  background: radial-gradient(circle at 50% 35%, #5a4028, #1f2320 80%); border: 2px solid #5a6462; }
.gd-member.online .gx-avatar { border-color: #5fe0a0; box-shadow: 0 0 8px #5fe0a055; }
.gx-rank-icon { position: absolute; top: -8px; right: -8px; --gx-icon-size: 19px; }
#guildMembers .gd-member > details { padding-left: 50px; }
#cityProductionContent .gx-page { display: grid; gap: 8px; padding: 8px 0; border-bottom: 1px solid #b18b5040; }
#cityProductionContent .gx-page > .cp-h, #cityProductionContent .gx-page > .note { margin: 0; }
#cityProductionContent .guild-actions { justify-content: flex-start; align-items: flex-end; }
#cityProductionContent .guild-actions .field { display: grid; flex: 1 1 7rem; gap: 4px; min-width: 0; }
#cityProductionContent .guild-actions input { width: 100%; min-width: 0; font-size: 16px; }
#cityProductionContent .gd-fort { flex-wrap: wrap; justify-content: space-between; overflow-wrap: anywhere; }

.field-command {
  --field-gold: #efcc88;
  --field-paper: #f8e9cb;
  --field-muted: #d4c5a9;
  --field-edge: #78613f;
  --field-dark: #16241f;
  display: grid; gap: 9px; color: var(--field-paper);
}
.field-command [hidden] { display: none; }
.field-command .field-banner, .field-command .field-card {
  min-width: 0; padding: 10px 12px; border: 1px solid var(--field-edge); border-radius: 8px;
  background: var(--field-dark); overflow-wrap: anywhere;
}
.field-command .field-banner {
  padding: 12px; border-left: 3px solid var(--field-gold);
  background: radial-gradient(ellipse at left top, #514024, transparent 76%), linear-gradient(125deg, #24352c, #13221f);
  box-shadow: inset 0 0 0 2px #10181380;
}
.field-banner-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; }
.field-command h3 { margin: 0 0 6px; color: var(--field-gold); }
.field-command .field-banner-head h3 {
  margin: 0; color: #ffe8b3; font: 700 clamp(1.18rem, 4vw, 1.55rem)/1.3 Georgia, "Noto Serif Thai", serif;
}
.field-status {
  padding: 2px 8px; border: 1px solid #83765a; border-radius: 5px; background: #292d25;
  color: var(--field-paper); font-size: .75rem; font-weight: 700;
}
.field-status[data-tone="battle"] { border-color: #a77061; background: #4c2825; color: #ffdbce; }
.field-status[data-tone="open"] { border-color: #799b80; background: #274633; color: #daf3dc; }
.field-status[data-tone="protected"] { border-color: #8894aa; background: #2b3749; color: #e0ecff; }
.field-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 5px; margin: 8px 0 0; }
.field-stats > div {
  min-width: 0; padding: 6px 7px; border: 1px solid #9a886350; border-radius: 5px; background: #101d19; text-align: center;
}
.field-stats dt { color: var(--field-muted); font-size: .73rem; }
.field-stats dd { margin: 0; font-weight: 750; font-size: .95rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.war-battle { display: grid; gap: 7px; }
.war-clock { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--field-muted); }
.war-clock strong { color: #ffdfa0; font: 750 1.7rem/1.2 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.war-sides { margin: 0; }
.war-sides > :first-child { background: #3c2522; border-color: #8d5246; }
.war-sides > :last-child { background: #1c303d; border-color: #527b93; }
.war-sides > :first-child dt { color: #ffccba; }
.war-sides > :last-child dt { color: #c7e5fc; }
#warCaptureLabel { display: block; }
#warGauge { display: block; }
#warGauge[data-side="attack"] { accent-color: #ec9c7c; }
#warGauge[data-side="defend"] { accent-color: #99ccef; }
.war-field-report { white-space: pre-line; }
.drawer-body .war-map-objective {
  margin: 0 0 9px; padding: 8px 10px; border: 1px solid #a28249; border-radius: 7px;
  background: #30291c; color: #ffe4a4; font-weight: 700; overflow-wrap: anywhere;
}
#quest[data-war-guide="true"] #questProgress { color: #ffe4a4; font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
#quest[data-war-guide="true"] .quest-pointer small { font-weight: 750; color: #fff0bc; }
.field-command .note { color: var(--field-muted); opacity: 1; }
.field-command .field-card > :last-child { margin-bottom: 0; }
.field-command p.field-card { margin: 0; }
.field-command .field { margin: 9px 0 3px; }
.drawer-body .field-command select { width: 100%; min-height: 44px; font-size: 16px; }
.field-command button { min-height: 44px; }
.field-command button.field-back { width: fit-content; margin: 0; padding: 6px 12px; }
.field-command .field-actions { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,8.25rem),1fr)); gap: 6px; }
.field-command .field-actions button { margin-top: 0; padding: 6px 8px; }
.field-command summary { min-height: 44px; align-content: center; cursor: pointer; color: var(--field-gold); font-weight: 700; }
.field-command details.field-card { padding-block: 0; }
.field-command details.field-card[open] { padding-bottom: 8px; }
.field-command #estatePanel details { margin-top: 7px; border-top: 1px solid #9a886350; }
.field-command :is(button, summary, select, input):focus-visible { outline: 2px solid var(--field-gold); outline-offset: 2px; }
.city-mission-group { display: grid; gap: 8px; }
.field-command .city-mission-group h3 { margin: 0; }
.city-mission-card { padding: 9px; border: 1px solid #7d684753; border-radius: 6px; background: #101d19; }
.city-mission-card h4 { margin: 0; color: var(--field-paper); font-size: .95rem; }
.city-mission-card p { margin: 5px 0; }
.city-mission-card > :last-child { margin-bottom: 0; }
.city-mission-card .field-actions { margin-top: 8px; }
.city-mission-progress { display: block; width: 100%; height: 10px; accent-color: var(--field-gold); }
.city-mission-board #cityMissionQuote { flex: 1 0 100%; margin: 4px 0 0; }

[data-guild-icon]::before {
  content: ""; display: block; flex: none;
  width: var(--gx-icon-size, 28px); height: var(--gx-icon-size, 28px);
  background: url("./assets/ui/guild-emblems.webp") var(--gx-icon-x, 0%) var(--gx-icon-y, 0%) / 400% 400% no-repeat;
  filter: drop-shadow(0 2px 2px #090d0bcc);
}
[data-guild-icon="town"] { --gx-icon-x: 33.333333%; }
[data-guild-icon="members"] { --gx-icon-x: 66.666667%; }
[data-guild-icon="seal"] { --gx-icon-x: 100%; }
[data-guild-icon="map"] { --gx-icon-y: 33.333333%; }
[data-guild-icon="war"] { --gx-icon-x: 33.333333%; --gx-icon-y: 33.333333%; }
[data-guild-icon="warehouse"] { --gx-icon-x: 66.666667%; --gx-icon-y: 33.333333%; }
[data-guild-icon="forge"] { --gx-icon-x: 100%; --gx-icon-y: 33.333333%; }
[data-guild-icon="market"] { --gx-icon-y: 66.666667%; }
[data-guild-icon="contract"] { --gx-icon-x: 33.333333%; --gx-icon-y: 66.666667%; }
[data-guild-icon="hall"] { --gx-icon-x: 66.666667%; --gx-icon-y: 66.666667%; }
[data-guild-icon="haul"] { --gx-icon-x: 100%; --gx-icon-y: 66.666667%; }
[data-guild-icon="ore"] { --gx-icon-y: 100%; }
[data-guild-icon="journal"] { --gx-icon-x: 33.333333%; --gx-icon-y: 100%; }
[data-guild-icon="time"] { --gx-icon-x: 66.666667%; --gx-icon-y: 100%; }
[data-guild-icon="gold"] { --gx-icon-x: 100%; --gx-icon-y: 100%; }
.gx-with-emblem { display: inline-flex; align-items: center; gap: 7px; }
button.gx-with-emblem { justify-content: center; }
.gx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.guild-command-panel #guildMemberArea > .gx-banner {
  min-height: 114px;
  background: linear-gradient(90deg, #0b1916cc, #10201b7a 60%, #0e1b1733),
    #10231c url("./assets/ui/guild-fortress.webp") right center / cover no-repeat;
  box-shadow: inset 0 0 0 2px #0e171480, inset 0 -12px 20px #0c17165e;
}
.guild-command-panel .gx-banner .gx-title strong { text-shadow: 0 2px 5px #08110d; }
.guild-command-panel .gx-stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
.guild-command-panel .gx-stats [data-guild-icon] { padding: 5px 2px; --gx-icon-size: 24px; }
.gx-stats [data-guild-icon]::before { order: -2; align-self: center; margin-bottom: 2px; }
.guild-command-panel .gx-tabs [data-guild-icon] {
  display: grid; justify-items: center; align-content: center; gap: 3px; padding: 4px 2px 6px;
  --gx-icon-size: 32px;
}
.guild-command-panel #guildApplicationBadge:not([hidden]) {
  position: absolute; top: 3px; right: 3px; margin: 0; box-shadow: 0 0 0 2px var(--guild-ink);
}
.guild-command-panel .gx-overview-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
.guild-command-panel .gx-shortcuts [data-guild-icon]:not([hidden]) {
  display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 72px;
  padding: 5px 3px; line-height: 1.25; font-size: .82rem; --gx-icon-size: 45px;
  background: radial-gradient(ellipse at 50% 20%,#415247,#202e29 82%);
  box-shadow: inset 0 0 0 1px #131f1a;
}
.guild-command-panel .gx-city-services { grid-template-columns: repeat(auto-fit,minmax(min(100%,6.3rem),1fr)); }
.guild-command-panel .gx-territory-row[data-guild-icon] {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 7px; --gx-icon-size: 37px;
}
.field-banner-head .gx-with-emblem { --gx-icon-size: 37px; }
.field-stats > [data-guild-icon]::before { margin: 0 auto 3px; --gx-icon-size: 25px; }
.war-clock .gx-with-emblem { --gx-icon-size: 23px; }
.city-mission-card h4.gx-with-emblem { --gx-icon-size: 39px; }
.city-mission-terms, .city-materials { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; }
.city-material-stock { list-style: none; margin: 0; padding: 0; }
.city-mission-terms {
  margin: 5px 0; padding: 3px 7px; border: 1px solid #8e755338; border-radius: 5px; background: #152720;
}
.city-material-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.city-material-label .city-material-art {
  display: grid; flex: none; place-items: center; width: 28px; height: 28px; min-height: 0;
  padding: 0; border: 0; background: transparent; box-shadow: none; cursor: default;
}
.city-material-art .bag-symbol, .city-material-art[data-item-art] .bag-symbol { width: 24px; height: 24px; font-size: 15px; }
.city-mission-gold { margin-left: auto; font-weight: 750; color: var(--field-gold); --gx-icon-size: 23px; }
.city-mission-deadline { --gx-icon-size: 19px; }
@media (max-height: 600px) {
  .guild-command-panel #guildMemberArea > .gx-banner { min-height: 94px; }
  .guild-command-panel .gx-tabs [data-guild-icon] { --gx-icon-size: 27px; }
}

#warRoster .war-roster-choice{display:flex;align-items:center;gap:10px;min-height:40px;margin:0;padding:2px 8px}
#warRoster .war-roster-choice input{flex:none;width:18px;height:18px;min-height:18px;margin:0}
/* ===== Party panel ===== */
.px-banner { padding-right: 16px; }
.px-banner::after { content: none; }
.px-emblem { flex-shrink: 0; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; color: #2a1a08; background: radial-gradient(circle at 40% 35%, #ffe0a0, #c08a3a 70%); box-shadow: 0 0 0 3px #3a2a14, 0 0 0 5px #d3a75e, 0 4px 14px #000a; transform: rotate(-6deg); }
.px-pips { margin-left: auto; display: flex; gap: 5px; z-index: 1; }
.px-pips i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #d3a75e88; }
.px-pips i.on { background: #f2c86e; box-shadow: 0 0 8px #f2c86e99; }
.px-invite { border: 1px solid #f0c46c99; background: linear-gradient(90deg, #3a2a10, #14211f); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.px-members { display: grid; gap: 8px; margin: 10px 0; }
.px-card { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: linear-gradient(160deg, #182629, #0d181a); border: 1px solid #b18b5040; }
.px-card.me { border-color: #d3a75e88; box-shadow: inset 0 0 0 1px #d3a75e22; }
.px-card.down { opacity: .6; filter: grayscale(.5); }
.px-card.empty { border-style: dashed; background: #0c1517; }
.px-card.empty .px-avatar { border-style: dashed; color: #8b9a96; background: none; }
.px-avatar { font-size: 19px; }
.px-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.px-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.px-head strong { color: #ffe2a6; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-lv { font-size: 11px; color: #1d1408; background: linear-gradient(#f0c46c, #a8742f); padding: 1px 7px; border-radius: 8px; }
.px-class { font-size: 11px; color: #bfb39b; }
.px-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.px-bar div { height: 8px; border-radius: 5px; background: #070f11; border: 1px solid #ffffff1c; overflow: hidden; }
.px-bar i { display: block; height: 100%; transition: width .3s ease; }
.px-bar.hp i { background: linear-gradient(90deg, #ad3a3d, #e36e66); }
.px-bar.st i { background: linear-gradient(90deg, #355ab2, #69b5e8); }
.px-bar small { font-size: 10.5px; color: #f0e2c4; min-width: 64px; text-align: right; }
.px-loc { font-size: 11px; color: #9fd4c0; }
.px-loc.far { color: #ffb28a; }
.px-banner .gx-title strong { font-size: 18px; overflow-wrap: normal; word-break: normal; }

/* ===== Party frames on the play screen ===== */
.party-frames { position: absolute; z-index: 3; left: 12px; top: 300px; width: min(42vw, 168px); padding: 0; border: 0; background: none; display: flex; flex-direction: column; gap: 5px; text-align: left; color: inherit; font: inherit; }
.party-frames[hidden] { display: none; }
.pf-row { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 10px; background: #0b1618d9; border: 1px solid #b18b5055; box-shadow: 0 4px 12px #0007; }
.pf-av { position: relative; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; color: #f6dca2; background: radial-gradient(circle at 50% 35%, #5a4028, #1f2320 80%); border: 1px solid #a9885c; }
.pf-av[data-lead]::after { content: attr(data-lead); position: absolute; top: -7px; right: -5px; font-size: 10px; color: #f6cf7c; text-shadow: 0 1px 2px #000; }
.pf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf-top { display: flex; justify-content: space-between; gap: 4px; font-size: 10px; }
.pf-top b { color: #f3e2c0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-top small { flex-shrink: 0; font-size: 9px; color: #9fd4c0; }
.pf-bar { display: block; height: 5px; border-radius: 4px; background: #070f11; border: 1px solid #ffffff1c; overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ad3a3d, #e36e66); transition: width .3s ease; }
.pf-row.low .pf-av { border-color: #ff6a5a; box-shadow: 0 0 8px #ff4a3a88; }
.pf-row.far { opacity: .75; } .pf-row.far .pf-top small { color: #ffb28a; }
.pf-row.down { opacity: .55; filter: grayscale(.7); }
@media (max-width: 640px) and (orientation: portrait) {
  .party-frames { top: calc(var(--portrait-hud-top) + 208px); left: 8px; }
}

/* ===== Floating combat text (Ragnarok-style) ===== */
.float-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.ftxt { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: 900 22px/1 "Arial Black", "Segoe UI Black", Impact, system-ui, sans-serif; letter-spacing: .5px; color: #fff;
  -webkit-text-stroke: 4px #1a0d06; paint-order: stroke fill; text-shadow: 0 3px 0 #0008, 0 0 10px #0006;
  animation: ftPop 1.25s cubic-bezier(.2,.8,.3,1) forwards; will-change: transform, opacity; }
.ftxt.big { font-size: 30px; }
.ftxt.dealt { color: #ffffff; }
.ftxt.skill { color: #ffd84a; -webkit-text-stroke-color: #3a1e00; }
.ftxt.ally { color: #d8d8d0; font-size: 15px; -webkit-text-stroke-width: 3px; opacity: .9; }
.ftxt.taken { color: #ff4a3d; -webkit-text-stroke-color: #2a0000; }
.ftxt.spirit { color: #e2b8ff; -webkit-text-stroke-color: #2a0a3a; }
.ftxt.heal { color: #7dff8a; -webkit-text-stroke-color: #002a08; animation-name: ftRise; }
.ftxt.exp { color: #8ad8ff; font-size: 16px; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #001a2a; animation-name: ftRise; }
.ftxt.status { color: #f0b8ff; font: 900 18px/1 system-ui, "Noto Sans Thai", sans-serif; -webkit-text-stroke: 4px #2a0a3a; paint-order: stroke fill; animation-name: ftRise; }
.ftxt.weak { color: #9fd4ff; font: 800 14px/1 system-ui, sans-serif; -webkit-text-stroke: 3px #001a2a; paint-order: stroke fill; animation-name: ftRise; }
.ftxt.levelup { color: #ffe27a; font: 900 34px/1 Georgia, serif; -webkit-text-stroke: 5px #3a2000; paint-order: stroke fill; text-shadow: 0 0 18px #ffb84a, 0 0 36px #ff9a2a88; animation: ftLevel 2.2s ease-out forwards; }
/* Pop, overshoot, arc sideways and drop while fading (the Ragnarok bounce). */
@keyframes ftPop {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  10% { transform: translate(-50%, -80%) scale(1.75); opacity: 1; }
  22% { transform: translate(calc(-50% + var(--dx) * .25), calc(-50% - var(--rise))) scale(1); }
  60% { transform: translate(calc(-50% + var(--dx) * .7), calc(-50% - var(--rise) * .55)) scale(.95); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + 18px)) scale(.8); opacity: 0; }
}
@keyframes ftRise {
  0% { transform: translate(-50%, -30%) scale(.5); opacity: 0; }
  15% { transform: translate(-50%, -60%) scale(1.25); opacity: 1; }
  70% { transform: translate(-50%, calc(-60% - var(--rise))) scale(1); opacity: 1; }
  100% { transform: translate(-50%, calc(-60% - var(--rise) * 1.3)) scale(1); opacity: 0; }
}
@keyframes ftLevel {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-8deg); opacity: 0; }
  15% { transform: translate(-50%, -90%) scale(1.5) rotate(3deg); opacity: 1; }
  30% { transform: translate(-50%, -110%) scale(1) rotate(0); }
  80% { transform: translate(-50%, -150%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(1.05); opacity: 0; }
}
/* Comic words: hit onomatopoeia, skill shouts in a bubble, ghost cries. */
.ftxt.onoma { color: #ffe9b8; font: 900 19px/1 system-ui, "Noto Sans Thai", sans-serif; -webkit-text-stroke: 4px #2a1400; paint-order: stroke fill; transform-origin: center; animation-name: ftOnoma; }
.ftxt.shout { color: #1d1408; font: 800 13px/1.1 system-ui, "Noto Sans Thai", sans-serif; -webkit-text-stroke: 0; padding: 5px 10px; border-radius: 12px; background: #fff3d8; border: 2px solid #2a1a08; box-shadow: 0 3px 0 #2a1a08, 0 4px 12px #0008; animation-name: ftShout; }
.ftxt.shout::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top-color: #2a1a08; }
.ftxt.cry { color: #ff6a6a; font: 900 20px/1 system-ui, "Noto Sans Thai", sans-serif; -webkit-text-stroke: 4px #2a0000; paint-order: stroke fill; animation-name: ftCry; }
@keyframes ftOnoma {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-14deg); opacity: 0; }
  14% { transform: translate(calc(-50% + var(--dx) * .5), -80%) scale(1.45) rotate(8deg); opacity: 1; }
  40% { transform: translate(calc(-50% + var(--dx) * .8), calc(-50% - var(--rise))) scale(1) rotate(-4deg); }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--rise) * 1.2)) scale(.9) rotate(0); opacity: 0; }
}
@keyframes ftShout {
  0% { transform: translate(-50%, -100%) scale(.4); opacity: 0; }
  12% { transform: translate(-50%, -120%) scale(1.12); opacity: 1; }
  22% { transform: translate(-50%, -120%) scale(1); }
  82% { transform: translate(-50%, calc(-120% - var(--rise))) scale(1); opacity: 1; }
  100% { transform: translate(-50%, calc(-120% - var(--rise))) scale(.96); opacity: 0; }
}
@keyframes ftCry {
  0%, 100% { opacity: 0; }
  0% { transform: translate(-50%, -50%) scale(.5); }
  12% { transform: translate(-52%, -70%) scale(1.3); opacity: 1; }
  18% { transform: translate(-48%, -70%) scale(1.2); }
  24% { transform: translate(-52%, -70%) scale(1.25); }
  30% { transform: translate(-50%, -70%) scale(1.15); }
  80% { transform: translate(-50%, calc(-70% - var(--rise))) scale(1); opacity: 1; }
}
/* Far camera is the main way to play: keep popups large and crisp. */
.ftxt { font-size: 24px; }
.ftxt.big { font-size: 32px; }
.ftxt.cry { z-index: 3; }
.ftxt.shout { z-index: 1; opacity: .96; }
.ftxt.taken, .ftxt.dealt, .ftxt.skill { z-index: 2; }
/* Far-view polish: metallic gradient faces over a thick dark stroke, a coloured glow, and a heavier slam for big hits. */
.ftxt.skill { display: block; width: auto; gap: 0; } /* the HUD .skill button rule otherwise turns the popup into a fixed-width flex box */
.ftxt.metal { --g1: #ffffff; --g2: #fff1cc; --g3: #ffbe55; --sk: #1a0d06; --glow: #ffb84a55;
  color: var(--sk); -webkit-text-stroke-color: var(--sk); text-shadow: 0 3px 0 #000b, 0 0 14px var(--glow), 0 0 4px var(--glow); }
.ftxt.metal::after { content: attr(data-t); position: absolute; left: 0; top: 0; right: 0; bottom: 0; padding: inherit; white-space: nowrap;
  -webkit-text-stroke: 0; text-shadow: none; color: transparent;
  background: linear-gradient(180deg, var(--g1) 0%, var(--g1) 38%, var(--g2) 52%, var(--g3) 100%); -webkit-background-clip: text; background-clip: text; }
.ftxt.metal.dealt { --g1: #ffffff; --g2: #fdf3dc; --g3: #e8c27a; --glow: #ffffff44; }
.ftxt.metal.skill { --g1: #fffbe2; --g2: #ffd84a; --g3: #ff8a10; --sk: #3a1800; --glow: #ffae2a99; }
.ftxt.metal.taken { --g1: #ffe0da; --g2: #ff4a3d; --g3: #b0100a; --sk: #2a0000; --glow: #ff2a2a88; }
.ftxt.metal.heal { --g1: #f0fff0; --g2: #7dff8a; --g3: #18a83a; --sk: #002a08; --glow: #4aff6a77; }
.ftxt.metal.spirit { --g1: #fbefff; --g2: #e2b8ff; --g3: #9a4aff; --sk: #1e0636; --glow: #c07aff88; }
.ftxt.metal.onoma { --g1: #ffffff; --g2: #ffe9b8; --g3: #ff9a3a; --sk: #2a1400; --glow: #ff9a3a66; }
.ftxt.metal.cry { --g1: #ffe2e2; --g2: #ff5a5a; --g3: #8a0a3a; --sk: #200008; --glow: #ff2a5a88; }
.ftxt.metal.levelup { --g1: #fffbe0; --g2: #ffd24a; --g3: #d07a00; --sk: #3a2000; --glow: #ffb84acc; }
.ftxt.metal.big { --glow: #ffd84acc; -webkit-text-stroke-width: 5px; }
.ftxt.crit { z-index: 4; font-size: 34px; color: #ff5533; -webkit-text-stroke-color: #3a0000; }
.ftxt.metal.crit { --g1: #ffffff; --g2: #fff580; --g3: #ff2a00; --sk: #300000; --glow: #ff4a10ee;
  color: var(--sk); -webkit-text-stroke-color: var(--sk); -webkit-text-stroke-width: 5px;
  text-shadow: 0 4px 0 #000, 0 0 16px #ff4a10, 0 0 32px #ff8a00cc;
  animation-name: ftCritPop; }
.ftxt.metal.big:not(.heal):not(.levelup):not(.crit) { animation-name: ftSmash; }
@keyframes ftCritPop {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-8deg); opacity: 0; }
  10% { transform: translate(-50%, -85%) scale(2.2) rotate(4deg); opacity: 1; }
  18% { transform: translate(-46%, -80%) scale(1.6) rotate(-3deg); }
  26% { transform: translate(-54%, -82%) scale(1.7) rotate(2deg); }
  34% { transform: translate(calc(-50% + var(--dx) * .25), calc(-50% - var(--rise) * 1.1)) scale(1.3) rotate(0); }
  68% { transform: translate(calc(-50% + var(--dx) * .7), calc(-50% - var(--rise) * .6)) scale(1.15); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + 22px)) scale(.9); opacity: 0; }
}
.ftxt.metal.taken.big { --glow: #ff3a2acc; }
@keyframes ftSmash {
  0% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
  8% { transform: translate(-50%, -60%) scale(1.5); opacity: 1; }
  12% { transform: translate(-46%, -62%) scale(1.6) rotate(-4deg); }
  16% { transform: translate(-54%, -60%) scale(1.45) rotate(3deg); }
  22% { transform: translate(calc(-50% + var(--dx) * .25), calc(-50% - var(--rise))) scale(1.15) rotate(0); }
  62% { transform: translate(calc(-50% + var(--dx) * .7), calc(-50% - var(--rise) * .55)) scale(1.05); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + 18px)) scale(.85); opacity: 0; }
}
/* Skill-shout bubble: crisp text with no inherited outline shadow (it doubled the glyphs), gilded edge. */
.ftxt.shout { text-shadow: none; -webkit-text-stroke: 0; paint-order: normal; opacity: 1; color: #2a1606;
  font: 800 14px/1.15 "Noto Sans Thai", system-ui, sans-serif; letter-spacing: 0; padding: 6px 12px 7px;
  background: linear-gradient(180deg, #fffaf0 0%, #fbe9c4 100%); border: 2px solid #c8962e; border-radius: 14px;
  box-shadow: 0 0 0 2px #2a1606, 0 3px 0 2px #2a1606, 0 0 14px #ffc85a88; -webkit-font-smoothing: antialiased; }
.ftxt.shout::after { bottom: -9px; margin-left: -7px; border-width: 7px; border-top-color: #c8962e; filter: drop-shadow(0 2px 0 #2a1606); }
.account-entry { position:fixed; inset:0; z-index:10000; overflow-y:auto; display:grid; place-items:center; padding:24px 16px; background:radial-gradient(ellipse at top,#294b40,#0c191a 70%); color:#f4e9cc; }
.account-entry[hidden] { display:none; }
.account-card { width:min(100%,480px); padding:24px; border:1px solid #9d8a5d; border-radius:18px; background:#142522; box-shadow:0 16px 48px #0008; }
.account-brand { color:#e9cc89; font-weight:800; letter-spacing:.16em; }
.account-card h1 { font-size:1.5rem; margin:12px 0; }
.account-note { color:#cfdbcb; line-height:1.5; }
.account-error { color:#ffd1b9; min-height:1.3em; }
.account-field { display:grid; gap:6px; margin:12px 0; }
.account-card input,.account-card select,.account-card textarea { width:100%; box-sizing:border-box; padding:11px; border:1px solid #6b8976; border-radius:8px; background:#0c1918; color:#fff; font:inherit; }
.account-card button { width:100%; margin:6px 0; min-height:44px; cursor:pointer; }
.account-slot { display:block; padding:12px; text-align:left; border:1px solid #7a927c; border-radius:9px; background:#243d34; color:#fff; font:inherit; }
/* Brightness picker in the help & settings drawer. */
.light-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 12px; }
.light-choice button { padding: 9px 4px; border-radius: 10px; border: 1px solid #5a4a32; background: #1c1610; color: #e9dcc2; font: 700 13px/1.2 "Noto Sans Thai", system-ui, sans-serif; }
.light-choice button[aria-checked="true"] { background: linear-gradient(180deg, #f3c768, #c8902e); color: #2a1606; border-color: #f3d58c; }
/* ---- Skill knowledge graph ---- */
.sg-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; margin: 0 0 10px; border-radius: 12px; background: #120e0a; border: 1px solid #3a2e1e; }
.sg-toggle button { padding: 7px; border: 0; border-radius: 9px; background: transparent; color: #c9b894; font: 700 13px/1.2 "Noto Sans Thai", system-ui, sans-serif; }
.sg-toggle button.on { background: linear-gradient(180deg, #f3c768, #c8902e); color: #2a1606; }
.sg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sg-points { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fff2c4, #e3a83a 55%, #7a4a12); box-shadow: 0 0 0 2px #2a1606, 0 0 18px #ffc85a66; color: #2a1606; }
.sg-points b { font: 900 22px/1 Georgia, serif; } .sg-points span { font: 700 9px/1 "Noto Sans Thai", system-ui; margin-top: -10px; }
.sg-sum { font-size: 12px; color: #d8c9a6; line-height: 1.45; }
.sg-view { position: relative; max-height: 52vh; overflow: auto; border-radius: 14px; border: 1px solid #3a2e1e; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: radial-gradient(ellipse at 50% 0%, #2a2218 0%, #120f0b 70%), #120f0b; }
.sg-view::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle, #e9cf8a 1px, transparent 1.2px); background-size: 26px 26px; }
.sg-canvas { position: relative; margin: 0 auto; }
.sg-edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.sg-edge { fill: none; stroke: #4a3f30; stroke-width: 2; stroke-dasharray: 4 5; }
.sg-edge.half { stroke: #8a7550; stroke-dasharray: 5 4; }
.sg-edge.next { stroke: #7fe8ff; stroke-width: 2.5; stroke-dasharray: 6 4; animation: sgFlow 1s linear infinite; filter: drop-shadow(0 0 3px #7fe8ff); }
.sg-edge.on { stroke: #f3c768; stroke-width: 3; stroke-dasharray: none; filter: drop-shadow(0 0 4px #ffb84a99); }
.sg-edge.hl { stroke-width: 4; }
@keyframes sgFlow { to { stroke-dashoffset: -20; } }
.sg-lane { position: absolute; top: 0; bottom: 0; border-radius: 12px; background: linear-gradient(180deg, #ffffff08, transparent 120px); text-align: center; padding-top: 6px; }
.sg-lane.active { background: linear-gradient(180deg, #f3c76822, #f3c76808 60%, transparent); box-shadow: inset 0 0 0 1px #f3c76844; }
.sg-lane b { display: block; color: #f1dfb4; font: 800 12px/1.2 "Noto Sans Thai", system-ui; }
.sg-lane small { color: #a99877; font-size: 10px; } .sg-lane em { margin-left: 4px; font: 700 10px/1 system-ui; font-style: normal; color: #2a1606; background: #f3c768; padding: 1px 5px; border-radius: 6px; }
.sg-lane button { margin-left: 4px; padding: 1px 6px; font-size: 10px; border-radius: 6px; border: 1px solid #8a7550; background: #2a2218; color: #f1dfb4; }
.sg-node { position: absolute; width: 88px; transform: translate(-50%, -26px); display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0; border: 0; background: none; color: #e9dcc2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sg-orb { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 22px; line-height: 1;
  background: radial-gradient(circle at 50% 35%, #3a3226, #17130e); border: 2px solid #4a3f30; color: #7a6b52; transition: transform .15s; }
.sg-orb.sm { width: 40px; height: 40px; font-size: 18px; flex: none; }
.sg-node.learned .sg-orb, .sg-orb.learned { background: radial-gradient(circle at 50% 30%, #fff4cc, #f0b847 55%, #8a5214); border-color: #ffe39a; color: #2a1606; box-shadow: 0 0 14px #ffb84a99, inset 0 -3px 6px #0004; }
.sg-node.ready .sg-orb, .sg-orb.ready { background: radial-gradient(circle at 50% 35%, #1f3a44, #0f1c22); border-color: #7fe8ff; color: #bff6ff; box-shadow: 0 0 0 0 #7fe8ff88; animation: sgPulse 1.6s ease-out infinite; }
.sg-node.school .sg-orb { border-color: #b49a66; color: #c9b083; border-style: dashed; }
.sg-node.locked .sg-orb, .sg-orb.locked { opacity: .75; }
.sg-node.basic .sg-orb { border-radius: 14px; }
.sg-node.sel .sg-orb { transform: scale(1.12); outline: 3px solid #fff; outline-offset: 2px; }
@keyframes sgPulse { 0% { box-shadow: 0 0 0 0 #7fe8ff99; } 70% { box-shadow: 0 0 0 12px #7fe8ff00; } 100% { box-shadow: 0 0 0 0 #7fe8ff00; } }
.sg-slot { position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: #c0392b; color: #fff; font: 800 11px/18px system-ui; font-style: normal; box-shadow: 0 0 0 2px #17130e; }
.sg-name { max-width: 88px; font: 700 11px/1.2 "Noto Sans Thai", system-ui; text-align: center; text-shadow: 0 1px 2px #000; }
.sg-node.locked .sg-name { color: #9a8c72; }
.sg-lv { font: 600 9.5px/1 system-ui; color: #a99877; } .sg-node.learned .sg-lv { color: #f3c768; } .sg-node.ready .sg-lv { color: #7fe8ff; }
.sg-detail { margin: 10px 0 8px; padding: 12px; border-radius: 14px; border: 1px solid #5a4a32; background: linear-gradient(180deg, #221b13, #16120d); }
.sg-detail.empty { color: #a99877; font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.sg-key { display: inline-flex; align-items: center; gap: 4px; } .sg-key .k { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #4a3f30; display: inline-block; }
.sg-key .k.ready { border-color: #7fe8ff; } .sg-key .k.learned { background: #f0b847; border-color: #ffe39a; }
.sg-dh { display: flex; gap: 10px; align-items: center; } .sg-dh strong { display: block; color: #fbe9c4; font-size: 16px; } .sg-dh small { color: #c9b894; font-size: 12px; }
.sg-detail p { margin: 8px 0; font-size: 13px; line-height: 1.5; color: #e9dcc2; }
.sg-checks { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.sg-checks li { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: #2a2218; } .sg-checks li.ok { color: #9fe8a6; } .sg-checks li.no { color: #ffb3a3; background: #3a1c16; }
.sg-detail .primary { width: 100%; }
.sg-slots { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .sg-slots span { font-size: 12px; color: #c9b894; margin-right: 2px; }
.sg-slots button { flex: 1; padding: 8px 0; border-radius: 10px; border: 1px solid #5a4a32; background: #1c1610; color: #e9dcc2; font-weight: 800; }
.sg-slots button.on { background: #c0392b; border-color: #ff8a7a; color: #fff; }
.sg-passive { color: #f3c768 !important; }
.sg-sizer { position: relative; margin: 0 auto; }
.sg-sizer .sg-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; margin: 0; }
.sg-view { max-height: 58vh; }
.sg-node { width: 82px; } .sg-name { max-width: 82px; }
.sg-node { width: var(--sgw, 82px); } .sg-name { max-width: var(--sgw, 82px); font-size: 10.5px; }
.sg-orb { width: 46px; height: 46px; font-size: 20px; }
.sg-node { transform: translate(-50%, -23px); }
.sg-node.locked .sg-orb { opacity: 1; background: radial-gradient(circle at 50% 35%, #2e271d, #15110c); border-color: #5c4f3a; color: #8f7f62; }
.sg-node.locked .sg-name { color: #b3a385; }
.sg-node.sel .sg-orb { transform: scale(1.06); outline: 0; box-shadow: 0 0 0 3px #fff, 0 0 18px #ffffffaa; }
.sg-name { background: #120f0bd9; border-radius: 6px; padding: 1px 3px; }
.sg-pips { display: flex; gap: 2px; margin-top: 1px; } .sg-pips i { width: 6px; height: 6px; border-radius: 50%; background: #3a3226; box-shadow: inset 0 0 0 1px #6a5a40; }
.sg-pips i.on { background: #ffd24a; box-shadow: 0 0 4px #ffb84a; }
.sg-pips.big { gap: 6px; margin: 6px 0; } .sg-pips.big i { width: 14px; height: 14px; transform: rotate(45deg); border-radius: 3px; }
.sg-rank { margin-top: 10px; padding: 10px; border-radius: 12px; background: #2a1f12; border: 1px solid #6a4f22; }
.sg-rank-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .sg-rank-top b { color: #ffd98a; } .sg-rank-top span { font-size: 12px; color: #e9cf8a; }
.sg-up { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #ffd98a; background: linear-gradient(180deg, #ffdf8a, #d08a1e); color: #2a1606; font-weight: 800; }
.sg-up:disabled { opacity: .45; }
/* Class identity for the skill graph: banner + accent colour per class. */
.sg-wrap { --sg-a: #f3c768; --sg-b: #c8902e; --sg-glow: #ffb84a; }
.sg-wrap[data-tone="ember"] { --sg-a: #ff9a5a; --sg-b: #c2401e; --sg-glow: #ff6a2a; }
.sg-wrap[data-tone="violet"] { --sg-a: #cfa8ff; --sg-b: #7a3fd0; --sg-glow: #a874ff; }
.sg-wrap[data-tone="steel"] { --sg-a: #b9d4f0; --sg-b: #4a6e96; --sg-glow: #8ec2ff; }
.sg-wrap[data-tone="cyan"] { --sg-a: #8fefff; --sg-b: #2a8fb0; --sg-glow: #5fe0ff; }
.sg-wrap[data-tone="jade"] { --sg-a: #a6f5c0; --sg-b: #2e9a5c; --sg-glow: #5fffa0; }
.sg-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 16px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--sg-b) 45%, #15110c) 0%, #15110c 75%); border: 1px solid color-mix(in srgb, var(--sg-a) 45%, transparent); }
.sg-crest { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 26px; color: #1a1208;
  background: radial-gradient(circle at 50% 30%, #fff, var(--sg-a) 45%, var(--sg-b)); box-shadow: 0 0 16px color-mix(in srgb, var(--sg-glow) 60%, transparent); }
.sg-title { flex: 1; min-width: 0; } .sg-title small { display: block; color: var(--sg-a); font-size: 11px; } .sg-title strong { display: block; font-size: 19px; color: #fff4dc; }
.sg-title em { display: block; font-style: normal; font-size: 11.5px; color: #d8c9a6; }
.sg-banner .sg-points { width: 52px; height: 52px; }
.sg-wrap > .sg-sum { margin: 0 2px 8px; }
.sg-wrap .sg-node.learned .sg-orb { background: radial-gradient(circle at 50% 30%, #fff, var(--sg-a) 50%, var(--sg-b)); border-color: var(--sg-a); box-shadow: 0 0 14px color-mix(in srgb, var(--sg-glow) 65%, transparent), inset 0 -3px 6px #0004; }
.sg-wrap .sg-edge.on { stroke: var(--sg-a); filter: drop-shadow(0 0 4px var(--sg-glow)); }
.sg-wrap .sg-lane.active { background: linear-gradient(180deg, color-mix(in srgb, var(--sg-a) 16%, transparent), transparent 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sg-a) 35%, transparent); }
.sg-wrap .sg-lane em { background: var(--sg-a); }
.sg-wrap .sg-node.learned .sg-lv { color: var(--sg-a); }

/* A shared class link is not an unlock requirement. Keep it dotted and separate
   from the solid, catalog-defined prerequisite edges in the advanced tree. */
.sg-core-tree { margin-top: 12px; padding-bottom: 18px; }
.sg-core-heading { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--sg-a); }
.sg-core-nodes { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 8px 0 20px; }
.sg-core-nodes::after { content: ""; position: absolute; left: 12.5%; right: 12.5%; bottom: 0; border-bottom: 2px dashed var(--sg-a); opacity: .6; }
.sg-core-nodes > button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 100px; padding: 6px 2px; border: 1px solid #7b6745; border-radius: 12px; color: #f4e6c8; background: #211c17; }
.sg-core-nodes > button::after { content: ""; position: absolute; top: 100%; height: 20px; left: 50%; border-left: 2px dashed var(--sg-a); opacity: .6; }
.sg-core-nodes .kg-glyph[data-skill-glyph] { width: 44px; height: 44px; flex: none; }
.sg-core-nodes strong { font: 700 11px/1.4 "Noto Sans Thai", system-ui; overflow-wrap: anywhere; }
.sg-core-nodes small { margin-top: auto; font-size: 10px; color: #d8c9a6; }
.sg-tree-join { position: relative; margin: 18px auto 0; padding: 5px 8px; width: fit-content; max-width: 100%; border: 1px dashed var(--sg-a); border-radius: 8px; font-size: 11px; text-align: center; color: #e9dcc2; }
.sg-tree-join::before { content: ""; position: absolute; bottom: 100%; left: 50%; height: 18px; border-left: 2px dashed var(--sg-a); opacity: .6; }
.sg-tree-join::after { content: ""; position: absolute; top: 100%; left: 50%; height: 18px; border-left: 2px dashed var(--sg-a); opacity: .6; }
.sg-tree-key { font-size: 11px; line-height: 1.5; }
.sg-advanced .sg-view { border-top: 2px dashed var(--sg-a); }
.sg-advanced .sg-edge { stroke-dasharray: none; }
.sg-group-edge { fill: none; stroke: var(--sg-a); stroke-width: 2; stroke-dasharray: 2 5; opacity: .6; }
.sg-advanced .sg-slots { flex-wrap: wrap; }
.sg-advanced .sg-slots > span { width: 100%; }

/* Field HUD. The upper rails carry information. Combat and navigation have
   separate touch surfaces so browsing the menu cannot trigger a swipe dash. */
:root {
  --field-ink:#102420;
  --field-paper:#eddfbf;
  --field-gold:#efd39b;
  --field-line:#bc9b616b;
  --field-gap:clamp(8px,1.6vw,18px);
}
.top-hud { inset:max(var(--field-gap),env(safe-area-inset-top)) max(var(--field-gap),env(safe-area-inset-right)) auto max(var(--field-gap),env(safe-area-inset-left)); }
.hud-journal { display:grid; gap:5px; width:min(54vw,238px); min-width:0; }
.hud-journal .identity,.hud-journal .quest { width:100%; }
.hud-journal .quest,.hud-journal .party-frames,.location-area .online-count { position:static; transform:none; }
.hud-journal .quest { min-height:38px; text-align:left; align-items:center; padding:5px 9px; border-radius:9px; }
.hud-journal .quest .quest-content { min-width:0; flex:1; }
.hud-journal .quest .quest-content > span { display:none; }
.hud-journal .quest strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hud-journal .party-frames { max-height:22dvh; overflow:auto; pointer-events:auto; }
.location-area { width:min(32vw,150px); min-width:0; display:grid; grid-template-columns:minmax(0,1fr); justify-items:end; gap:5px; }
.location-area .mini-map { width:clamp(60px,9vw,88px); height:clamp(60px,9vw,88px); }
.location-area .place-name { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; font-size:11px; }
.location-area .online-count { width:auto; max-width:100%; min-height:0; padding:3px 7px; text-align:right; font-size:10px; }
.monster-status,.pk-panel { left:50%; right:auto; top:max(12px,env(safe-area-inset-top)); transform:translateX(-50%); width:min(28vw,285px); }
#game:has(#pkPanel:not([hidden])) .monster-status { display:none; }
.field-dock { position:absolute; z-index:5; right:max(var(--field-gap),env(safe-area-inset-right)); bottom:max(var(--field-gap),env(safe-area-inset-bottom)); max-width:calc(100% - 2 * var(--field-gap)); pointer-events:none; }
.field-dock .controls { position:relative; inset:auto; width:fit-content; max-width:100%; margin-left:auto; padding-top:clamp(25px,5dvh,54px); }
.field-dock .skill-bar { width:fit-content; max-width:100%; margin:0 0 0 auto; padding:4px; justify-content:flex-end; gap:3px; border-radius:14px; background:#102420d9; border:1px solid var(--field-line); }
.field-dock .skill { flex:0 1 auto; min-width:44px; width:clamp(44px,6.4vw,64px); gap:2px; font-size:10px; }
.field-dock .skill .glyph { width:clamp(36px,5vw,46px); height:clamp(36px,5vw,46px); font-size:22px; }
.field-dock .sword-hotbar { justify-content:flex-end; margin:0 0 5px auto; padding:0; }
.field-dock .sword-hotkey { min-height:44px; flex:0 1 78px; }
.field-prompts { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:5px; margin-bottom:2px; }
.boat-panel:not([hidden]) { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:5px; }
.boat-panel [data-boat-drive] { touch-action:none; }
.field-prompts .warp-button { position:static; transform:none; min-height:44px; max-width:100%; white-space:normal; pointer-events:auto; font-size:12px; }
.field-shortcuts { position:absolute; left:max(var(--field-gap),env(safe-area-inset-left)); bottom:max(var(--field-gap),env(safe-area-inset-bottom)); z-index:6; display:flex; gap:3px; padding:3px; background:#102420ed; border:1px solid var(--field-line); border-radius:12px; }
.field-shortcuts button,.menu-tiles button { position:relative; border:0; border-radius:8px; background:transparent; font:inherit; color:var(--field-paper); }
.field-shortcuts button { display:grid; justify-items:center; align-content:center; min-width:48px; min-height:46px; font-size:11px; line-height:1.2; }
.field-shortcuts button[hidden],.menu-tiles button[hidden] { display:none; }
.field-shortcuts span,.menu-tiles button span { color:var(--field-gold); font-size:19px; line-height:1.2; }
.field-shortcuts #fieldMenuButton { background:#405647; }
.field-shortcuts b,.menu-tiles b { position:absolute; top:0; right:1px; padding:0 4px; border-radius:1em; background:#9c342e; color:white; font-size:11px; }
.field-shortcuts button:hover,.menu-tiles button:hover { background:#344d41; }
.drawer { padding-top:0; overscroll-behavior:contain; scroll-padding-top:62px; }
.drawer-grip { display:none; }
.drawer-header { position:sticky; z-index:4; top:0; background:#1a2a29; border-bottom:1px solid var(--field-line); margin:0 -17px 12px; padding:7px 12px; gap:8px; }
.drawer-header h2 { flex:1; margin:0; }
.drawer-header button { min-width:44px; min-height:44px; }
.drawer-back { background:transparent; color:var(--field-gold); border:0; }
#fieldMenu section + section { margin-top:14px; }
#fieldMenu h3 { font-size:12px; color:var(--field-gold); margin:0 0 5px; }
.menu-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.menu-tiles button { display:flex; align-items:center; gap:8px; text-align:left; min-height:46px; padding:6px 9px; background:#223a33; border:1px solid var(--field-line); font-size:13px; }
@media (min-width:860px) {
  .drawer { left:auto; right:max(var(--field-gap),env(safe-area-inset-right)); bottom:max(var(--field-gap),env(safe-area-inset-bottom)); width:min(48vw,560px); max-height:calc(100dvh - 2 * var(--field-gap)); border:1px solid var(--field-line); border-radius:16px; }
}
@media (max-width:640px) and (orientation:portrait) {
  .field-dock { bottom:calc(max(8px,env(safe-area-inset-bottom)) + 57px); }
  .field-shortcuts { left:50%; transform:translateX(-50%); bottom:max(8px,env(safe-area-inset-bottom)); }
  .field-shortcuts button { min-width:55px; }
  .monster-status,.pk-panel { top:calc(max(8px,env(safe-area-inset-top)) + 130px); left:auto; right:8px; width:min(42vw,210px); transform:none; }
  .menu-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (orientation:landscape) and (max-height:520px) {
  .hud-journal { width:min(30vw,202px); }
  .field-dock .controls { padding-top:20px; }
  .drawer { max-height:94dvh; }
  .field-dock .skill { width:46px; }
}
.account-entry { background:radial-gradient(ellipse at 20% 10%,#284e40,transparent 55%),linear-gradient(135deg,#112622,#091713 75%); }
.account-card { border-top:3px solid var(--field-gold); background:#142723; }
.account-brand { color:var(--field-gold); }
.account-error:empty { display:none; }
.account-alternatives,.class-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.account-card button { border:1px solid var(--field-line); border-radius:9px; padding:8px 12px; color:var(--field-paper); background:#253e35; }
.account-card .primary { color:#291e0f; background:#e4c489; font-weight:750; }
.account-options { border-top:1px solid var(--field-line); margin-top:15px; padding-top:5px; }
.account-options summary { min-height:44px; padding:11px 0; cursor:pointer; }
.class-choices { border:0; padding:0; margin:14px 0; }
.class-choices legend { font-weight:700; margin-bottom:7px; }
.class-choices label { display:flex; align-items:flex-start; gap:6px; padding:9px; border-radius:8px; border:1px solid var(--field-line); cursor:pointer; }
.class-choices label:has(:checked) { border-color:var(--field-gold); background:#2e4538; }
.class-choices input { flex:none; width:16px; margin:4px 0 0; accent-color:#e3bf78; }
.class-choices small { display:block; margin-top:3px; color:#c1cec2; line-height:1.45; }
@media (max-width:380px) { .class-choices { grid-template-columns:1fr; } }

/* quickSkills is always accessible */
#quickSkills { display: grid !important; }
.field-layout-picker { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-bottom:14px; }
.field-layout-picker > span { color:var(--field-gold); font-size:12px; margin-right:auto; }
.field-layout-picker button { min-height:44px; border:1px solid var(--field-line); border-radius:8px; background:var(--field-ink); color:var(--field-paper); padding:5px 12px; }
.field-layout-picker button[aria-pressed=true] { color:#211a0c; background:var(--field-gold); }
#game[data-field-layout=combat] .hud-journal .quest:not(.war-hud),
#game[data-field-layout=combat] .location-area .online-count:not(.safe) { display:none; }
#game[data-field-layout=combat] .location-area .mini-map { width:54px; height:54px; }
.help-topic { border-bottom:1px solid var(--field-line); }
.help-topic summary { min-height:44px; padding:11px 0; font-weight:700; cursor:pointer; }
@media (hover:hover) and (pointer:fine) {
  .sword-hotbar [data-slot-number]::before { content:attr(data-slot-number); margin-right:5px; font-size:10px; color:var(--field-gold); }
}
.sword-hotbar .sword-hotkey[hidden] { display:none; }
@media (max-width:600px) and (orientation:landscape) {
  .field-shortcuts { gap:0; }
  .field-shortcuts button { min-width:44px; }
}

/* Adventure journal: the current objective stays above the selected chapter. */
.journal-objective { display:flex; align-items:center; gap:12px; width:100%; padding:12px; text-align:left; border:1px solid var(--field-line); border-left:3px solid var(--field-gold); border-radius:9px; background:linear-gradient(110deg,#304638,#182b26); color:var(--field-paper); }
.journal-objective > span:first-child { font-size:24px; color:var(--field-gold); }
.journal-objective > span:nth-child(2) { display:grid; gap:2px; min-width:0; }
.journal-objective small { color:var(--field-gold); font-size:11px; }
.journal-objective strong { font-size:16px; }
.journal-objective span span,.menu-tiles strong small { font-size:12px; color:#c7d3c8; font-weight:400; }
.journal-objective i { margin-left:auto; color:var(--field-gold); font-size:20px; }
.journal-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; margin:12px 0; padding:3px; border-radius:9px; background:#0d1a18; }
.journal-tabs button { min-height:44px; padding:3px; border:0; border-radius:6px; background:transparent; font:inherit; font-size:14px; }
.journal-tabs button[aria-pressed=true] { background:#395442; color:#ffe8bb; font-weight:700; }
#fieldMenu [data-journal-panel] { margin:0; }
#fieldMenu .menu-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
.menu-tiles strong { min-width:0; overflow-wrap:anywhere; }
.menu-tiles strong small { display:block; margin-top:2px; line-height:1.45; }
.menu-notices { display:flex; flex-wrap:wrap; gap:4px; margin:7px 0; }
.menu-notices[hidden] { display:none; }
.menu-notices button { min-height:44px; border:1px solid var(--field-line); border-radius:8px; background:#513e24; color:#ffe3ae; }
.field-utility-label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0 14px; font-size:13px; }
.field-utility-label select { min-height:44px; max-width:60%; padding:3px 8px; color:var(--field-paper); background:var(--field-ink); border:1px solid var(--field-line); border-radius:8px; }
#game:not(:has(#mountButton:not([hidden]))) #menuMount,
#game[data-field-utility=chat] #mountButton:not([aria-pressed=true]),
#game[data-field-utility=mount]:has(#mountButton:not([hidden])) #chatButton,
#game:has(#mountButton[aria-pressed=true]:not([hidden])) #chatButton { display:none; }
.account-slot-list { display:grid; gap:7px; margin:12px 0; }
.account-slot-list .account-slot { display:grid; grid-template-columns:1fr auto; gap:3px 8px; align-items:center; margin:0; }
.account-slot small { grid-column:1/-1; color:#c5d3c8; text-align:left; }
.account-slot .slot-play { color:var(--field-gold); font-size:12px; }

/* Seals share their silhouette between the world HUD and the character sheet. */
.seal-library { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.info-seal { display:inline-block; flex:none; width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.hud-meter { display:grid; align-items:center; grid-template-columns:12px minmax(0,1fr); gap:4px; margin-top:2px; }
.hud-meter .info-seal { width:12px; height:12px; }
.hud-meter .bar,.hud-meter .exp-text { margin:0; }
.hud-meter.xp { grid-template-columns:12px minmax(0,1fr) auto; }
.hud-meter .exp-text { color:#f1d39b; font:600 10px/1 system-ui,sans-serif; }
.hud-meter[hidden],.cp-buffs[hidden] { display:none; }
.hud-meter.hp,.cp-bar.hp { color:#ff9c99; }
.hud-meter.st,.cp-bar.st { color:#8ad5ff; }
.hud-meter.mana { color:#d7a2ff; }
.bar.mana-bar i { background:linear-gradient(90deg,#7443b2,#d5a2ff); }
.hud-meter.xp,.cp-bar.xp { color:#f3d494; }
.portrait .info-seal { width:65%; height:65%; }
.cp-tabs button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; }
.cp-tabs .info-seal { width:18px; height:18px; }
.cp-hero { background:radial-gradient(ellipse at 9% 40%,#574229 0%,#25352d 43%,#14231e 85%); padding:12px 14px; }
.cp-ring { width:62px; height:62px; }
.cp-glyph { width:52px; height:52px; }
.cp-glyph .info-seal { width:33px; height:33px; }
.cp-bars { padding:6px 10px; margin:8px 0; gap:4px; border-inline-start:2px solid var(--field-line); }
.cp-bar { position:relative; grid-template-columns:20px minmax(0,1fr) minmax(69px,auto); gap:8px; min-height:20px; }
.cp-bar .info-seal { width:18px; height:18px; }
.cp-bar strong { font-variant-numeric:tabular-nums; text-align:right; }
.cp-bar div { height:6px; }
.cp-page:not(.cp-named) :is(.cp-icon-name,.cp-meter-name) { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.cp-named .cp-bar { grid-template-columns:20px auto minmax(0,1fr) minmax(69px,auto); }
.cp-meter-name { font-size:11px; }
.cp-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cp-section-head h3 { margin:0; font-size:14px; }
.cp-section-head button { min-height:44px; padding:0 8px; background:transparent; border:0; color:#e8cb99; font-size:12px; }
.cp-section-head button[aria-pressed=true] { text-decoration:underline; text-underline-offset:4px; }
.cp-sigils { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.cp-sigil { --sigil:#e2bc80; position:relative; min-width:0; min-height:60px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:3px 8px; padding:8px 5px; background:linear-gradient(155deg,#263932,#13221f); color:var(--sigil); border:1px solid #9a885c62; border-radius:8px; }
.cp-sigil[data-stat=hp] { --sigil:#ffa59a; }
.cp-sigil[data-stat=stamina] { --sigil:#8fd6f4; }
.cp-sigil[data-stat=magicAtk] { --sigil:#d8b2ff; }
.cp-sigil[data-stat=magicDef] { --sigil:#a3dfd3; }
.cp-sigil .info-seal { width:24px; height:24px; }
.cp-sigil strong { color:#fff1d4; font-size:clamp(16px,3.7vw,20px); font-variant-numeric:tabular-nums; line-height:1.2; }
.cp-icon-name { flex-basis:100%; font-size:11px; line-height:1.3; }
.cp-sigil:hover,.cp-sigil[aria-expanded=true] { border-color:var(--sigil); background:#32483b; }
.cp-sigil[aria-expanded=true]::after { content:""; position:absolute; bottom:-1px; width:25%; height:3px; background:var(--sigil); border-radius:3px; }
.cp-inspect { margin-top:7px; padding:8px 12px; border-inline-start:2px solid var(--field-gold); background:#20322b; font-size:13px; }
.cp-inspect>* { display:block; }
.cp-inspect strong { color:#ffe4ad; }
.cp-inspect small { color:#a2dfc4; }
.cp-points { display:flex; align-items:center; gap:6px; }
.cp-points[hidden] { display:none; }
.cp-chart,.cp-buffs { margin-top:8px; border-block-start:1px solid var(--field-line); }
.cp-chart summary,.cp-buffs summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:3px 6px; cursor:pointer; color:#ebd1a1; font-size:13px; }
.cp-chart summary:focus-visible,.cp-buffs summary:focus-visible { outline:2px solid #f3c783; outline-offset:-2px; }
.cp-chart summary::after,.cp-buffs summary::after { content:""; width:7px; height:7px; margin-inline-start:auto; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.cp-chart[open] summary::after,.cp-buffs[open] summary::after { transform:rotate(225deg); }
.cp-buffs p { margin:0; padding:0 6px 8px; font-size:12px; }
.cp-fx-icons { display:flex; gap:5px; flex-wrap:wrap; }
.cp-fx { display:inline-flex; gap:5px; align-items:center; font-variant-numeric:tabular-nums; }
.cp-fx.cooldown { color:#e6c098; }
.field-dock .learned-bar:not(:has(.sword-hotbar:not([hidden]))) { display:none; }
.field-dock .learned-bar .sword-hotbar { margin:0; gap:3px; }
.field-dock .learned-bar .field-slot { position:relative; flex:0 0 auto; min-height:56px; width:clamp(58px,13vw,72px); padding:2px; justify-content:flex-start; border:0; background:none; box-shadow:none; }
.field-slot .glyph { position:relative; color:#ffe7b3; background:radial-gradient(ellipse at 50% 35%,#755032,#292622); border-radius:10px; }
#sentinelHotbar .sentinel-skill-icon { width:72%; height:72%; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
#sentinelHotbar .field-slot[data-skill-id="shock"] .glyph { color:#ffe7a0; background:radial-gradient(circle at 50% 35%,#8c5f23,#302319); }
#sentinelHotbar .field-slot[data-skill-id="bulwark"] .glyph { color:#c8ecff; background:radial-gradient(circle at 50% 35%,#355f75,#152936); }
#sentinelHotbar .field-slot[data-skill-id="riposte"] .glyph { color:#ffd8c1; background:radial-gradient(circle at 50% 35%,#864932,#301d1a); }
#sentinelHotbar .field-slot[data-skill-id="protect"] .glyph { color:#d7f6dc; background:radial-gradient(circle at 50% 35%,#3e735e,#172c2b); }
/* Keep the fallback below skill artwork specificity; a gradient is not an icon. */
:where(#occultHotbar) .field-slot:not(.empty-slot) .glyph { background:radial-gradient(ellipse at 50% 35%,#5f4976,#292435); color:#f5dfff; }
.field-slot.empty-slot .glyph { border:1px dashed #9d9066; color:#c4b995; background:#192921; }
.field-slot.empty-slot .field-skill-name { color:#c8c1a6; }
.field-slot .field-skill-name { max-width:100%; font:600 10px/1.3 system-ui,sans-serif; overflow-wrap:anywhere; }
.field-slot .slot-timer { position:absolute; inset:0; display:grid; place-items:center; background:#131921de; border-radius:inherit; color:#fff2bd; font:700 14px/1 system-ui,sans-serif; }
.field-slot .stamina-cost { font-size:9px; margin:0; }
.learned-bar .field-slot[disabled] { opacity:.68; }
@media (hover:hover) and (pointer:fine) {
  .learned-bar .field-slot[data-position]::before { content:attr(data-position); position:absolute; right:3px; top:1px; z-index:1; padding:1px 3px; border-radius:3px; background:#18221c; color:#ffe8b5; font:600 9px/1 system-ui,sans-serif; }
}
@media (max-width:640px) and (orientation:portrait) {
  .drawer:has(.cp-tabs) { max-height:calc(100dvh - max(28px,env(safe-area-inset-top))); }
}
/* ---- Vital orb: HP left · mana right · stamina as a yellow segmented ring ---- */
.field-dock .learned-bar:has(.vital-orb) { display: flex !important; align-items: center; }
.vital-orb { appearance: none; padding: 0; border: 0; background: transparent; border-radius: 50%; touch-action: manipulation; position: relative; flex: none; order: 1; width: 82px; height: 82px; margin: -10px -2px -2px 4px; pointer-events: auto; filter: drop-shadow(0 4px 6px #000a); }
.vital-orb:focus-visible { outline: 2px solid #ffe098; outline-offset: 3px; }
.vital-orb svg { width: 100%; height: 100%; display: block; overflow: visible; }
.vo-back { fill: #0b0806; } .vo-empty { fill: #120d0a; }
.vo-rim { fill: none; stroke: #c9a35a; stroke-width: 2.2; }
.vo-split { stroke: #e9cf8a; stroke-width: 1.4; opacity: .85; }
.vo-hp, .vo-mp { transition: y .35s ease, height .35s ease; }
.vo-seg { fill: none; stroke: #3a2f18; stroke-width: 5; stroke-linecap: round; }
.vo-seg.on { stroke: #ffd23f; filter: drop-shadow(0 0 2px #ffb000); }
.vital-orb.tired .vo-seg.on { stroke: #ff9a2a; }
.vo-num { position: absolute; top: 50%; transform: translateY(-50%); width: 34%; text-align: center; color: #fff; font: 800 12px/1 system-ui, sans-serif;
  text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; }
.vo-hpn { left: 14%; } .vo-mpn { right: 14%; }
.vital-orb.no-mana .vo-mpn { color: #8fa8c8; }
.vital-orb.low .vo-rim { stroke: #ff4a3a; animation: voPulse .9s ease-in-out infinite; }
@keyframes voPulse { 50% { stroke-width: 4; filter: drop-shadow(0 0 6px #ff3a2a); } }
.learned-bar .sword-hotbar { order: 0; }
/* Wide screens: orb in the middle of the bar, slots 1–2 on its left and the rest on its right. */
.learned-bar[data-wide] .sword-hotbar:not([hidden]) { display: contents; }
.learned-bar[data-wide] .vital-orb { order: 2; width: 92px; height: 92px; margin: -18px 8px -6px; }
.learned-bar[data-wide] .field-slot[data-slot-number="1"], .learned-bar[data-wide] .field-slot[data-slot-number="2"] { order: 1; }
.learned-bar[data-wide] .field-slot { order: 3; }
/* ---- Resource strip (top-left) ---- */
.resource-strip { position: absolute; z-index: 7; top: max(4px, env(safe-area-inset-top)); left: max(var(--field-gap, 8px), env(safe-area-inset-left)); display: flex; align-items: center; gap: 2px;
  height: 22px; padding: 0 6px; border-radius: 7px; background: linear-gradient(180deg, #0d1512f2, #070b09f2); border: 1px solid #3c5a4c; box-shadow: 0 2px 8px #0008;
  color: #e9e1c6; font: 700 11px/1 system-ui, sans-serif; pointer-events: none; white-space: nowrap; }
.rs-item { display: inline-flex; align-items: center; gap: 3px; padding: 0 5px; border-right: 1px solid #ffffff14; } .rs-item:last-child { border-right: 0; }
.rs-item[hidden] { display: none; }
.rs-item i { font-style: normal; font-size: 12px; } .rs-clock i { color: #a9c7ff; } .rs-gold i { color: #ffd23f; } .rs-potion i { color: #ff6a5a; }
.rs-party i { color: #8fe39a; } .rs-online i { color: #7fe8ff; } .rs-fps i { color: #9a9a8a; font-size: 9px; } .rs-fps b { color: #b9b7a5; font-weight: 600; }
#game.has-strip .top-hud { top: calc(max(var(--field-gap, 8px), env(safe-area-inset-top)) + 26px); }
/* ---- Chat box (bottom-left) ---- */
.chat-box { position: absolute; z-index: 5; left: max(var(--field-gap, 8px), env(safe-area-inset-left)); bottom: calc(max(var(--field-gap, 8px), env(safe-area-inset-bottom)) + 60px);
  width: min(360px, 34vw); display: flex; flex-direction: column; border-radius: 10px; background: #070b09b8; border: 1px solid #3c5a4c88; box-shadow: 0 4px 14px #0007;
  color: #ece4cb; font: 500 12px/1.35 "Noto Sans Thai", system-ui, sans-serif; pointer-events: auto; transition: background .3s; }
.chat-box:hover, .chat-box:focus-within, .chat-box.fresh { background: #070b09e6; }
.chat-harvest { position:absolute; left:0; bottom:calc(100% + 5px); display:flex; flex-wrap:wrap; gap:4px; width:max-content; max-width:min(260px, 85vw); }
.chat-harvest .warp-button { position:static; transform:none; min-height:36px; max-width:100%; padding:5px 9px; border-radius:9px; font-size:11px; line-height:1.3; white-space:normal; box-shadow:0 2px 8px #0009; }
.chat-harvest .harvest-action:not([hidden]) { display:grid; place-items:center; width:44px; height:44px; padding:0; }
.chat-harvest .harvest-action img { width:24px; height:24px; object-fit:contain; pointer-events:none; }
.chat-potion-control { position:relative; z-index:1; align-self:center; }
.chat-potion-control[hidden], .chat-box:not(.wide).composing .chat-potion-control { display:none; }
.chat-potion-use, .chat-potion-picker button {
  color:inherit; font:inherit; cursor:pointer;
}
.chat-potion-use:focus-visible, .chat-potion-picker button:focus-visible {
  outline:2px solid #ffd98a; outline-offset:-2px;
}
.chat-potion-use {
  display:flex; align-items:center; justify-content:center; gap:2px; min-width:42px; min-height:34px; padding:0 4px;
  border:1px solid #796744; border-radius:8px; background:#0d1512f2; box-shadow:0 2px 8px #0009;
  touch-action:none; user-select:none; -webkit-touch-callout:none;
}
.chat-potion-use[data-unavailable] > * { opacity:.55; }
.chat-potion-use:hover, .chat-potion-use[aria-expanded="true"],
.chat-potion-picker button:hover, .chat-potion-picker button[aria-pressed="true"] { background:#66502e66; }
.chat-potion-use .chat-potion-icon {
  display:grid; place-items:center; flex:none; width:20px; height:22px; min-width:0; min-height:0;
  padding:0; border:0; background:transparent; box-shadow:none; pointer-events:none;
}
.chat-potion-use .chat-potion-icon .bag-symbol { font-size:14px; }
.chat-potion-count { color:#ffe39a; font-size:11px; font-variant-numeric:tabular-nums; }
.chat-potion-picker {
  position:absolute; left:0; bottom:calc(100% + 4px); width:min(148px, 75vw); max-height:min(128px, 26dvh);
  overflow-y:auto; overscroll-behavior:contain; padding:2px; border:1px solid #796744; border-radius:7px;
  background:#0d1512fa; box-shadow:0 4px 12px #000a; font-size:11px;
}
.chat-potion-picker button {
  display:block; width:100%; min-height:30px; padding:3px 6px; border:0; border-radius:4px; background:transparent;
  text-align:left; overflow-wrap:anywhere;
}
.chat-potion-picker p { margin:0; padding:6px; }
@media (pointer: coarse) {
  .chat-potion-use { min-width:44px; min-height:44px; }
  .chat-potion-picker button { min-height:36px; }
}
.cb-head { display: flex; justify-content: space-between; align-items: center; padding: 3px 8px; border-bottom: 1px solid #ffffff12; font-weight: 800; font-size: 11px; color: #cfe3d5; }
.cb-open { border: 0; background: none; color: #cfe3d5; font-size: 13px; padding: 0 2px; cursor: pointer; }
.cb-log { height: 150px; overflow-y: auto; padding: 4px 8px; overscroll-behavior: contain; scrollbar-width: thin; }
.cb-line { margin: 1px 0; overflow-wrap: anywhere; text-shadow: 0 1px 1px #000; } .cb-line em { font-style: normal; margin-right: 3px; opacity: .85; }
.cb-line b { color: #ffe39a; } .cb-line.own b { color: #9fe8a6; }
.cb-line.ch-map em { color: #cfe3d5; } .cb-line.ch-world em { color: #ffcf8a; } .cb-line.ch-party em { color: #7fe8ff; } .cb-line.ch-private em, .cb-line.ch-private span { color: #e2b8ff; }
.cb-form { display: flex; gap: 4px; padding: 4px; border-top: 1px solid #ffffff12; }
.cb-ch { flex: none; border-radius: 6px; border: 1px solid #3c5a4c; background: #0d1512; color: #ece4cb; font-size: 11px; }
.cb-input { flex: 1; min-width: 0; padding: 5px 7px; border-radius: 6px; border: 1px solid #3c5a4c; background: #0d1512; color: #fff; font: inherit; }
.cb-input:focus { outline: 1px solid #ffd98a; }
/* Phone: a compact, read-only feed above the skill bar; tap to open the full chat. */
.chat-box:not(.wide) { width: min(58vw, 230px); bottom: calc(max(8px, env(safe-area-inset-bottom)) + 160px); background: #070b0980; }
.chat-box:not(.wide) .cb-head, .chat-box:not(.wide) .cb-form { display: none; }
.chat-box:not(.wide) .cb-log { height: 64px; padding: 3px 6px; font-size: 10.5px; line-height: 1.3; }
.chat-box:not(.wide):not(.fresh) .cb-log { opacity: .7; }
/* ---- Party portraits (top-left, under the quest) ---- */
.hud-journal .party-frames { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible; }
.party-frames .pf-row { position: relative; display: flex; flex-direction: column; align-items: center; width: 56px; gap: 2px; padding: 0; background: none; border: 0; }
.party-frames .pf-av { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-style: normal; font-size: 21px; color: #fff4dc;
  background: radial-gradient(circle at 50% 30%, #6a5a40, #241c12); border: 2px solid #c9a35a; box-shadow: 0 2px 6px #000a; }
.party-frames .pf-row[data-path="phutthaisawan"] .pf-av { background: radial-gradient(circle at 50% 30%, #ffe08a, #8a5a14); }
.party-frames .pf-row[data-path="muay_boran"] .pf-av { background: radial-gradient(circle at 50% 30%, #ffa26a, #7a2410); }
.party-frames .pf-row[data-path="blade"] .pf-av { background: radial-gradient(circle at 50% 30%, #cfa8ff, #3e1a72); }
.party-frames .pf-row[data-path="sentinel"] .pf-av { background: radial-gradient(circle at 50% 30%, #b9d4f0, #24405e); }
.party-frames .pf-row[data-path="seer"] .pf-av { background: radial-gradient(circle at 50% 30%, #8fefff, #145a70); }
.party-frames .pf-row[data-path="mender"] .pf-av { background: radial-gradient(circle at 50% 30%, #a6f5c0, #155a34); }
.party-frames .pf-av[data-lead]::before { content: attr(data-lead); position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #ffd23f; text-shadow: 0 1px 2px #000; }
.party-frames .pf-av[data-lv]::after { content: attr(data-lv); position: absolute; left: -4px; bottom: -3px; min-width: 16px; height: 16px; border-radius: 50%; background: #1a1208; border: 1px solid #c9a35a; font: 800 9px/14px system-ui; text-align: center; color: #ffe39a; }
.party-frames .pf-body { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 2px; }
.party-frames .pf-top { display: flex; flex-direction: column; align-items: center; }
.party-frames .pf-top b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: #fff; background: #0b0806cc; padding: 0 4px; border-radius: 4px; }
.party-frames .pf-top small { font-size: 8.5px; color: #cfc3a6; }
.party-frames .pf-bar { height: 5px; border-radius: 3px; background: #1b0d0a; box-shadow: inset 0 0 0 1px #000; overflow: hidden; }
.party-frames .pf-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3fd45a, #a6f56a); }
.party-frames .pf-row.low .pf-bar i { background: linear-gradient(90deg, #d42a1e, #ff7a5a); }
.party-frames .pf-row.low .pf-av {
  border-color: #ff3344;
  box-shadow: 0 0 12px rgba(255, 51, 68, 0.8);
  animation: pulseAvatarDanger 0.8s infinite alternate;
}
.pf-ping-row {
  display: flex;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
  justify-content: center;
}
.pf-ping-btn {
  background: rgba(18, 12, 10, 0.85);
  border: 1px solid #ffd84a;
  border-radius: 6px;
  color: #fff4dc;
  font: 700 9.5px/1 "Noto Sans Thai", system-ui, sans-serif;
  padding: 3px 6px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  transition: transform 0.1s ease, background 0.15s ease;
}
.pf-ping-btn:active {
  transform: scale(0.92);
}
.pf-ping-btn.rally {
  border-color: #ffd84a;
  background: rgba(80, 55, 10, 0.85);
}
.pf-ping-btn.help {
  border-color: #ff4455;
  background: rgba(80, 15, 20, 0.85);
}
.party-frames .pf-row.down .pf-av { filter: grayscale(1) brightness(.6); } .party-frames .pf-row.far { opacity: .7; }
.hud-journal .party-frames { flex-direction: row; align-items: flex-start; }
.party-frames .pf-av[data-lv]::after { top: auto; right: auto; }
.party-frames .pf-row { box-shadow: none; border-radius: 0; }
@media (max-width: 640px) { .party-frames .pf-row { width: 50px; } .party-frames .pf-av { width: 40px; height: 40px; font-size: 18px; } }
/* ---- Menu buttons: small icons under the minimap ---- */
.location-area .field-shortcuts.map-shortcuts { position: static; transform: none; display: grid; grid-template-columns: repeat(3, 30px); gap: 3px; padding: 3px; margin: 4px 0 0 auto; width: max-content;
  background: #0b1512d9; border-radius: 9px; pointer-events: auto; }
.map-shortcuts button { min-width: 0 !important; min-height: 0 !important; width: 30px; height: 30px; padding: 0; font-size: 0 !important; border-radius: 7px; background: #183028; }
.map-shortcuts button > span, .map-shortcuts button > i { font-size: 15px; line-height: 30px; font-style: normal; }
.map-shortcuts button > i { font-size: 0; } .map-shortcuts #mountButton > span { font-size: 15px; }
.map-shortcuts button b { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; font-size: 9px; line-height: 14px; background: #c0392b; color: #fff; }
.map-shortcuts button[aria-pressed="true"], .map-shortcuts button:active { background: #2c5a48; }
@media (max-width: 640px) and (orientation: portrait) {
  .field-dock { bottom: max(8px, env(safe-area-inset-bottom)); }
  .chat-box:not(.wide) { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 104px); }
}
/* Horse button beside the vital orb. */
.learned-bar #mountButton.orb-mount { order: 1; position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; min-height: 0; margin: 0 2px; padding: 0; border-radius: 50%;
  border: 2px solid #c9a35a; background: radial-gradient(circle at 50% 30%, #6a4a24, #1e140a); color: #ffe7b3; font-size: 0; pointer-events: auto; box-shadow: 0 3px 6px #0009; }
.learned-bar #mountButton.orb-mount[hidden] { display: none; }
.learned-bar #mountButton.orb-mount > span { font-size: 20px; line-height: 1; } .learned-bar #mountButton.orb-mount > i { display: none; }
.learned-bar #mountButton.orb-mount[aria-pressed="true"] { border-color: #7fe8ff; box-shadow: 0 0 12px #7fe8ffaa; }
.learned-bar[data-wide] #mountButton.orb-mount { order: 3; }
/* ---- Status boxes ---- */
.fx-row { display: flex; flex-wrap: wrap; gap: 3px; pointer-events: auto; } .fx-row[hidden] { display: none; }
.fx-box { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; font-style: normal; font-size: 13px; line-height: 1;
  background: linear-gradient(180deg, #2a4a3a, #12241c); border: 1px solid #6fd49a; box-shadow: 0 1px 3px #000a; color: #eafff0; }
.fx-box i { font-style: normal; }
.fx-box.bad { background: linear-gradient(180deg, #5a1a1a, #2a0a0a); border-color: #ff6a5a; color: #ffe0da; animation: fxBad 1.6s ease-in-out infinite; }
@keyframes fxBad { 50% { box-shadow: 0 0 6px #ff3a2a; } }
.fx-box b { position: absolute; right: -2px; bottom: -3px; padding: 0 2px; border-radius: 3px; background: #000c; font: 800 8.5px/1.2 system-ui; color: #fff; }
.fx-box.more { width: auto; padding: 0 4px; font: 700 10px/22px system-ui; background: #1a1a1a; border-color: #777; }
.self-fx { margin-top: -1px; }
.member-fx { justify-content: center; gap: 2px; margin-top: 1px; } .member-fx .fx-box { width: 15px; height: 15px; font-size: 9px; border-radius: 3px; } .member-fx .fx-box b { display: none; }
/* ---- Phone: MOBA-style arc of skills around the vital orb ---- */
.field-dock .learned-bar[data-arc] { position: relative; display: block !important; width: 236px; height: 236px; padding: 0; margin: 0 0 0 auto; background: none; border: 0; box-shadow: none; pointer-events: none; }
.learned-bar[data-arc] .sword-hotbar:not([hidden]) { display: contents; }
.learned-bar[data-arc] .vital-orb { position: absolute; width: 84px; height: 84px; margin: 0; }
.learned-bar[data-arc] .field-slot { position: absolute; width: 54px !important; min-height: 0 !important; height: 54px; padding: 0 !important; display: grid; place-items: center; pointer-events: auto; }
.learned-bar[data-arc] .field-slot .glyph { width: 54px; height: 54px; border-radius: 50%; font-size: 24px; display: grid; place-items: center; border: 2px solid #c9a35a; box-shadow: 0 3px 8px #000b, inset 0 -3px 6px #0006; }
.learned-bar[data-arc] .field-slot.empty-slot .glyph { border: 2px dashed #8a7a56; background: #10181488; }
.learned-bar[data-arc] .field-slot .slot-timer { border-radius: 50%; font-size: 17px; }
.learned-bar[data-arc] .field-skill-name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; max-width: 70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 9px !important; line-height: 1.1 !important; text-shadow: 0 1px 2px #000, 0 0 3px #000; color: #fff2cf; pointer-events: none; }
.learned-bar[data-arc] .field-slot .stamina-cost { position: absolute; right: -4px; top: -4px; padding: 0 4px; border-radius: 7px; background: #0d1a26; border: 1px solid #3a6a8a; line-height: 1.3; }
.learned-bar[data-arc] .field-slot[data-position]::before { content: none; }
.learned-bar[data-arc] #mountButton.orb-mount { position: absolute; margin: 0; }
.field-dock .learned-bar[data-arc] { width: 250px; height: 250px; }
.learned-bar[data-arc] .field-skill-name { display: none; }
.chat-box:not(.wide) { width: min(42vw, 162px); bottom: max(8px, env(safe-area-inset-bottom)); }
.learned-bar[data-arc] #mountButton.orb-mount { width: 32px; height: 32px; border-width: 1.5px; }
.learned-bar[data-arc] #mountButton.orb-mount > span { font-size: 16px; }
.learned-bar[data-arc] .field-slot { width: 50px !important; height: 50px; border-radius: 50%; } .learned-bar[data-arc] .field-slot .glyph { width: 50px; height: 50px; font-size: 22px; }
.field-dock .learned-bar[data-arc] { width: 200px; height: 176px; }
/* Chat box tabs (all + every channel) with unread counts. */
.cb-tabs { display: flex; align-items: stretch; gap: 2px; padding: 3px 3px 0; border-bottom: 1px solid #3c5a4c88; overflow-x: auto; scrollbar-width: none; }
.cb-tabs::-webkit-scrollbar { display: none; }
.cb-tab { position: relative; flex: none; padding: 3px 8px 4px; border: 1px solid #3c5a4c66; border-bottom: 0; border-radius: 6px 6px 0 0; background: #0d1512cc; color: #b9c9bd; font: 700 10.5px/1.2 "Noto Sans Thai", system-ui, sans-serif; cursor: pointer; }
.cb-tab[aria-selected="true"] { background: #1f3a2f; color: #fff4dc; border-color: #c9a35a; box-shadow: inset 0 2px 0 #f3c768; }
.cb-tab.tab-world[aria-selected="true"] { box-shadow: inset 0 2px 0 #ffcf8a; } .cb-tab.tab-party[aria-selected="true"] { box-shadow: inset 0 2px 0 #7fe8ff; }
.cb-tab.tab-private[aria-selected="true"] { box-shadow: inset 0 2px 0 #e2b8ff; } .cb-tab.tab-bug[aria-selected="true"] { box-shadow: inset 0 2px 0 #ff9a7a; }
.cb-tab b { position: absolute; top: -5px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #c0392b; color: #fff; font: 800 9px/14px system-ui; text-align: center; }
.cb-tab b[hidden] { display: none; }
.cb-tabs .cb-open { margin-left: auto; flex: none; }
.cb-target { flex: none; max-width: 96px; border-radius: 6px; border: 1px solid #3c5a4c; background: #0d1512; color: #ece4cb; font-size: 11px; } .cb-target[hidden] { display: none; }
.cb-send { flex: none; width: 30px; border-radius: 6px; border: 1px solid #c9a35a; background: #2a3a22; color: #ffe39a; font-size: 13px; cursor: pointer; }
.chat-box[data-tab="bug"] .cb-input { border-color: #a0503a; }
/* Phone: keep the tab row small and scrollable above the compact feed. */
.chat-box:not(.wide) .cb-tabs { display: flex; padding: 2px 2px 0; } .chat-box:not(.wide) .cb-tab { padding: 2px 5px 3px; font-size: 9px; }
.chat-box:not(.wide) .cb-tabs .cb-open { display: none; }
/* Compose in the existing HUD box; keep it above the mobile keyboard. */
.cb-tabs .cb-open { position:sticky; right:0; min-width:34px; background:#0d1512; border-radius:6px; }
.chat-box:not(.wide) .cb-tabs .cb-open { display:block; }
.chat-box:not(.wide).composing { z-index:12; width:min(calc(100vw - 16px),400px); bottom:calc(max(8px, env(safe-area-inset-bottom)) + var(--chat-keyboard-offset, 0px)); background:#070b09f5; }
.chat-box:not(.wide).composing .cb-form { display:flex; }
.chat-box:not(.wide).composing .cb-log { height:clamp(64px,18dvh,140px); opacity:1; font-size:12px; }
.chat-box.composing .cb-tab, .chat-box.composing .cb-open { min-height:36px; }
.chat-box.composing .cb-input, .chat-box.composing .cb-target { min-height:44px; font-size:16px; }
.chat-box.composing .cb-target { max-width:120px; }
.chat-box.composing .cb-send { min-width:44px; min-height:44px; }
/* Ghost commands occupy their own row above the class bar. */
.learned-bar .orb-action, .ghost-field-actions .orb-action { display: grid; place-items: center; flex: none; margin: 0;
  border: 1.5px solid #8fd0ff; background: radial-gradient(circle at 50% 30%, #2a5a7a, #0c1a26); color: #dff4ff; font-size: 17px; line-height: 1; pointer-events: auto; box-shadow: 0 3px 6px #0009; }
.learned-bar .orb-fly { position: absolute; right: 0; bottom: 36px; width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 50%; }
.ghost-field-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; width: fit-content; max-width: min(100%, 248px); margin: 0 0 8px auto; pointer-events: none; }
.ghost-field-actions[hidden], .ghost-field-actions .orb-action[hidden], .ghost-field-status[hidden] { display: none; }
.ghost-field-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 100%; }
.ghost-field-actions .orb-action { min-width: 44px; min-height: 44px; padding: 4px 7px; border-radius: 10px; font-size: 12px; }
.ghost-field-actions .orb-action:disabled { opacity: .5; }
.ghost-field-status { max-width: 100%; padding: 3px 6px; border-radius: 6px; background: #0c1825f5; color: #dff4ff; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.ghost-field-skills { display: grid; gap: 4px; padding: 4px; width: max-content; max-width: 100%; max-height: min(146px, 28dvh); overflow: auto; overscroll-behavior: contain; touch-action: pan-y; pointer-events: auto; border-radius: 10px; background: #0c1825f5; }
.ghost-field-skills[hidden] { display: none; }
.ghost-pool { display: grid; gap: 10px; }
.ghost-pool h3, .ghost-pool p { margin: 0; }
.ghost-pool-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.ghost-pool-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.ghost-pool button { min-height: 44px; overflow-wrap: anywhere; }
.ghost-pool button[aria-pressed="true"] { border-color: #8fd0ff; color: #dff4ff; background: #213e54; }
.ghost-pool-cards button { display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 8px 4px; text-align: center; }
.ghost-pool-cards strong, .ghost-pool-cards small { overflow-wrap: anywhere; }
.ghost-pool-portrait { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #628caa; border-radius: 9px; background: #1a2b3c; }
.ghost-pool-detail { display: grid; gap: 6px; padding: 10px; border: 1px solid #486479; border-radius: 9px; background: #142335; }
.learned-bar .orb-action[hidden] { display: none; }
.learned-bar .orb-action[aria-pressed="true"], .ghost-field-actions .orb-action[aria-pressed="true"] { border-color: #7fe8ff; box-shadow: 0 0 12px #7fe8ffaa; color: #c9f7ff; }
.learned-bar[data-wide] .orb-action { position: relative; right: auto; bottom: auto; order: 3; width: 40px; height: 40px; }
/* Harmful-effect boxes under the orb. */
.orb-fx { position: absolute; display: flex; justify-content: center; gap: 2px; pointer-events: auto; }
.orb-fx .fx-box { width: 16px; height: 16px; font-size: 10px; border-radius: 3px; } .orb-fx .fx-box b { font-size: 7.5px; right: -3px; bottom: -4px; }
.learned-bar[data-wide] .orb-fx { position: static; order: 2; flex-direction: column; width: auto !important; }
/* The vital orb carries HP, mana, stamina and effects, so the player card drops its old bars and status row. */
.identity .hud-meter, .character-info .hud-meter, .hud-journal .identity .hud-meter.hp, .hud-journal .identity .hud-meter.st, .hud-journal .identity .hud-meter.mana { display: none !important; }
.hud-journal .self-fx { display: none !important; }
.hud-journal .identity { padding-bottom: 6px; }
.learned-bar[data-arc] .orb-fx { flex-wrap: nowrap; gap: 1px; } .learned-bar[data-arc] .orb-fx .fx-box { width: 15px; height: 15px; font-size: 9.5px; flex: none; }
.learned-bar[data-arc] .orb-fx .fx-box.more { width: auto; padding: 0 2px; font-size: 8px; line-height: 15px; }
/* ---- EXP base line along the bottom edge ---- */
.exp-base { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; height: 5px; background: #0b0806e6; border-top: 1px solid #c9a35a; box-shadow: 0 -1px 4px #0008; pointer-events: auto; }
.exp-base i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #b8860b, #ffd23f 70%, #fff0a0); box-shadow: 0 0 6px #ffc83a; transition: width .6s ease; }
.exp-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #0008 calc(10% - 1px) 10%); pointer-events: none; }
.hud-journal .identity .hud-meter.xp { display: none !important; }
/* Beauty pass: an empty chat box reads as a quiet hint, and the tab row fades at the edge when it scrolls. */
.cb-log:empty::before { content: "ยังไม่มีข้อความ"; display: block; padding: 6px 2px; color: #9fb3a6; font-size: 11px; font-style: italic; opacity: .8; }
.chat-box:not(.wide) .cb-log:empty::before { content: "ยังไม่มีข้อความ · แตะเพื่อเปิดแชท"; }
.chat-box:has(.cb-log:empty):not(:focus-within):not(:hover) { background: #070b0966; border-color: #3c5a4c55; }
.chat-box:has(.cb-log:empty) .cb-log { height: auto; min-height: 30px; max-height: 150px; }
.chat-box:not(.wide):has(.cb-log:empty) .cb-log { height: auto; min-height: 26px; }
.cb-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.chat-box.wide .cb-tabs { -webkit-mask-image: none; mask-image: none; }
/* Compact character medallion: the orb and bottom EXP line remain the only vital meters. */
.hud-journal .identity { --portrait-gold:#d4b16f; display:block; padding:0; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; }
.identity .brand-row { display:none; }
.identity .profile-trigger { display:flex; align-items:center; justify-content:flex-start; gap:8px; width:100%; min-height:62px; padding:2px 2px 3px; border:0; border-radius:6px; background:linear-gradient(90deg,transparent 12%,#07100de8 30%,#07100db8 85%,transparent); text-align:left; }
.identity .portrait { width:52px; height:52px; margin:0; border:2px solid var(--portrait-gold); background:radial-gradient(circle at 50% 35%,#8c6344,#282e27 76%); box-shadow:0 0 0 2px #171c17,0 3px 8px #0009; }
.identity .portrait.low-hp { border-color:#ff6a5a; box-shadow:0 0 0 2px #ff4a3a66,0 0 12px #ff3a2a88; }
.portrait-figure { width:100%; height:100%; border-radius:50%; overflow:hidden; }
.identity .portrait-class { position:absolute; top:-3px; left:-5px; width:20px; height:20px; padding:3px; border:1px solid #d4b16f; border-radius:50%; background:#345345; color:#ffe2a1; }
.identity #levelBadge { right:-3px; bottom:-3px; }
.identity .character-info { display:grid; gap:2px; min-width:0; padding-right:5px; }
.identity .name { display:flex; gap:5px; align-items:baseline; min-width:0; margin:0; padding:0; font-size:12px; line-height:1.45; }
.identity #characterName { float:none; min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:750; color:#fff0d7; }
.identity #characterLevel { float:none; flex-shrink:0; font-size:9px; font-weight:700; color:#99dbe7; white-space:nowrap; }
.character-class { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ddc8a1; font-size:10px; line-height:1.35; }
.character-power { display:flex; align-items:center; gap:4px; min-width:0; padding:1px 5px 1px 2px; border-top:1px solid #d4b16f70; border-bottom:1px solid #d4b16f40; border-radius:3px 12px 12px 3px; background:linear-gradient(90deg,#b58a45ad,#765c3080,transparent); color:#fff0c9; font-size:9px; line-height:17px; }
.character-power > span:not(.character-chevron) { white-space:nowrap; flex-shrink:0; }
.character-power .info-seal { flex-shrink:0; width:14px; height:14px; }
.character-power b { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.character-chevron { margin-left:auto; color:#e8c989; }
.identity .profile-trigger:hover { filter:brightness(1.12); }
.identity .profile-trigger:active { filter:brightness(1.25); }
@media(max-width:360px) { .location-area { width:110px; } .identity .profile-trigger { gap:6px; } .identity .portrait { width:44px; height:44px; } .identity .name { flex-wrap:wrap; gap:0 4px; } .identity #characterName { flex-basis:100%; } .character-power > span:not(.character-chevron) { display:none; } }
@media(prefers-reduced-motion:reduce) { .identity .portrait.low-hp { animation:none; } }
.vital-orb { cursor: pointer; }
.location-area .field-shortcuts.map-shortcuts { grid-template-columns: repeat(4, 30px); }
.map-shortcuts .map-proxy > span { font-size: 15px; line-height: 30px; }
.map-shortcuts .map-proxy b[hidden] { display: none; }
.vital-orb.orb-strike { transform: scale(.92); filter: drop-shadow(0 0 10px #ff5a3a); }
.vital-orb { transition: transform .12s; }
.location-area .field-shortcuts.map-shortcuts { grid-template-columns: repeat(3, 34px); gap: 4px; }
.map-shortcuts button { width: 34px; height: 34px; } .map-shortcuts button > span { line-height: 34px; font-size: 16px; }
.map-shortcuts #chatButton { display: none !important; }
/* Menu fan-out: the ☰ button expands into a column of labelled sub-buttons under the minimap. */
.map-flyout { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 4px 0 0 auto; pointer-events: auto; }
.map-flyout[hidden] { display: none; }
.map-sub { position: relative; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 6px; border-radius: 16px; border: 1px solid #3c5a4c; background: #0b1512eb; color: #ece4cb;
  font: 700 12px/1 "Noto Sans Thai", system-ui, sans-serif; box-shadow: 0 3px 8px #0009; cursor: pointer; animation: subIn .18s ease-out both; animation-delay: calc(var(--i) * 25ms); }
.map-sub span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1f3a2f; font-size: 13px; }
.map-sub em { font-style: normal; }
.map-sub b { position: absolute; top: -4px; left: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #c0392b; color: #fff; font: 800 9px/15px system-ui; text-align: center; } .map-sub b[hidden] { display: none; }
.map-sub:active { background: #1f3a2f; }
@keyframes subIn { from { opacity: 0; transform: translateY(-6px) scale(.9); } to { opacity: 1; transform: none; } }
#fieldMenuButton.open { background: #2c5a48; box-shadow: inset 0 0 0 1px #f3c768; }
.learned-bar #mountButton.orb-mount.mount-off { filter: grayscale(1) brightness(.75); border-style: dashed; }
/* The old "field shortcut: chat or horse" choice no longer applies: the horse has its own corner button
   and chat has its own box, so the horse is never hidden by that setting. */
#game[data-field-utility] .learned-bar #mountButton.orb-mount:not([hidden]) { display: grid; }
.field-utility-label { display: none !important; }

/* Rebirth mastery stays inside the character sheet. */
.cp-mastery {margin-top:12px;padding:12px;border:1px solid #76603d;border-radius:12px;background:#13221e;}
.cp-mastery summary {cursor:pointer;font-weight:700;color:#e8d5a6;}
.cp-mastery-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;}
.cp-mastery-class {display:grid;gap:5px;padding:9px;border-radius:8px;background:#1d3028;min-width:0;}
.cp-mastery-class svg {width:26px;height:26px;}
.cp-mastery-class small,.cp-mastery p {font-size:12px;line-height:1.6;overflow-wrap:anywhere;}
@media (min-width:600px){.cp-mastery-grid {grid-template-columns:repeat(3,minmax(0,1fr));}}

/* Compact target frame keeps health visible without covering the playfield. */
.monster-status { width:min(24vw,220px); padding:5px 7px; border-radius:8px; }
.monster-heading { gap:4px; font-size:10px; }
.monster-heading > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.monster-heading strong,.target-level { flex-shrink:0; font-size:9px; }
.target-level { margin:0; }
.monster-hp-track { height:6px; margin-top:4px; }
@media (max-width:640px) and (orientation:portrait) {
  .monster-status { width:min(38vw,160px); padding:4px 6px; }
}
/* Monster health is drawn as a ring under the target in the world. */
.monster-status { display:none !important; }

.fishing-panel { position:absolute;z-index:9;left:50%;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 166px);transform:translateX(-50%);width:min(90vw,340px);padding:9px 10px;pointer-events:auto;border-radius:12px; }
.fishing-panel[hidden] { display:none; }
.fishing-head { display:flex;align-items:center;gap:8px;font-size:12px; }
.fishing-head strong { color:#f7daa1;white-space:nowrap; }
.fishing-head span { flex:1;min-width:0;color:#dfddd2; }
.fishing-head button { min-width:38px;min-height:36px;border:0;background:transparent;color:#fff;font-size:20px; }
.fishing-aim { position:relative;height:15px;background:#101d20;border:1px solid #8d8069;border-radius:10px;margin:5px 0 8px;overflow:hidden; }
.fishing-zone { position:absolute;left:32%;width:36%;height:100%;background:#c39336; }
.fishing-zone::after { content:"";position:absolute;left:33.333%;width:33.333%;height:100%;background:#ffe18b; }
.fishing-needle { position:absolute;top:0;bottom:0;left:0;width:4px;transform:translateX(-50%);background:#fff;box-shadow:0 0 5px #fff; }
.fishing-meter { display:grid;grid-template-columns:66px 1fr 44px;align-items:center;gap:5px;margin:3px 0;font-size:10px;color:#e4ddc9; }
.fishing-meter > div { height:6px;border-radius:6px;background:#0a1718;overflow:hidden; }
.fishing-meter i { display:block;height:100%;width:100%;background:#ef735a; }
.fishing-meter:nth-of-type(4) i { background:#70cacc; }
.fishing-meter:nth-of-type(5) i { background:#efc66c; }
.fishing-meter b { text-align:right;font-variant-numeric:tabular-nums; }
#fishReel { display:block;width:100%;min-height:44px;margin-top:7px; }
@media (orientation:landscape) and (max-height:520px) { .fishing-panel { bottom:10px;left:36%;width:min(38vw,300px); } }

/* Dedicated artisan pages share the portrait drawer and its focus/navigation rules. */
.drawer:has(.forge-page) { max-height:calc(100dvh - max(18px,env(safe-area-inset-top))); }
.smith-hero { display:flex; align-items:center; gap:14px; padding:14px; border:1px solid #b7955c70; border-radius:14px; background:radial-gradient(ellipse at 8% 30%,#64432a,#172b29 75%); }
.smith-hero > span { color:#f4d59f; font-size:35px; }
.smith-hero strong { color:#f4d59f; font-size:17px; }
.smith-services { display:grid; gap:10px; margin:14px 0; }
.smith-services button { display:flex; flex-direction:column; gap:5px; min-height:90px; padding:15px; text-align:left; border:1px solid #b7955c85; border-radius:13px; background:linear-gradient(130deg,#3d3928,#182c2c); }
.smith-services strong { color:#f4d59f; font-size:16px; }
.smith-services span { color:#d6cab6; font-size:12px; line-height:1.6; }
.forge-nav,.forge-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.forge-nav .secondary { margin:0 0 12px; min-height:44px; padding:9px 5px; }
.forge-tabs { padding:4px; border:1px solid #b7955c70; border-radius:12px; background:#0b1b1b; }
.forge-tabs button { min-height:46px; padding:8px 4px; border:1px solid transparent; border-radius:8px; background:transparent; color:#d6cab6; font:inherit; }
.forge-tabs button[aria-pressed=true] { color:#ffe2a6; border-color:#b7955c; background:#51422b; }
.forge-card { margin:14px 0; padding:13px; border:1px solid #b7955c70; border-radius:14px; background:linear-gradient(155deg,#243730,#132320); }
.forge-card[hidden],.forge-page [hidden] { display:none; }
.forge-item { display:flex; align-items:center; gap:12px; padding-bottom:9px; border-bottom:1px solid #b7955c45; }
.forge-item > div { min-width:0; }
.forge-item h3 { margin:0; overflow-wrap:anywhere; }
.forge-page .note { line-height:1.75; }
.forge-risk { padding:9px 10px; border-left:2px solid #d7ab6c; background:#0e1d1a; }
#forgeProgress { width:100%; height:11px; accent-color:#d7ab6c; }
#forgeActionStatus:empty { display:none; }
.forge-page button { overflow-wrap:anywhere; }
.forge-page select { min-width:0; max-width:100%; }
@media (max-width:360px) { .forge-card { padding:10px; } .forge-nav { gap:5px; } }
#forgeStock summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:#f4d59f; font-weight:700; }
#forgeStock summary::after { content:"⌄"; margin-left:auto; padding-left:8px; }
#forgeStock[open] summary::after { content:"⌃"; }
#forgeStock summary:focus-visible { outline:2px solid #f3c783; outline-offset:3px; }

/* Crafting reuses the workshop drawer; no inventory or recipe system is duplicated. */
.drawer:has(.crafting-page) { max-height:calc(100dvh - max(18px,env(safe-area-inset-top))); }
.crafting-page { min-width:0; }
.crafting-page [hidden] { display:none; }
.crafting-page select { width:100%; max-width:100%; min-width:0; }
.crafting-page button,.crafting-page h3 { overflow-wrap:anywhere; }
.crafting-page .note { line-height:1.75; }
.crafting-page .forge-card > h3:first-child { margin-top:0; }
.crafting-page .field { display:block; margin-top:12px; }
.craft-ingredients { list-style:none; margin:0 0 12px; padding:0; }
.craft-ingredients li { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #b7955c30; line-height:1.6; }
.craft-ingredients > li > span { min-width:0; overflow-wrap:anywhere; }
.craft-ingredients > li > strong { flex:none; color:#e8d3a9; }
.craft-ingredients .missing strong { color:#efa799; }
.craft-result:empty { display:none; }
.craft-result:not(:empty) { position:sticky; top:0; z-index:2; margin:10px 0; padding:10px 12px; border:1px solid #b7955c85; border-radius:10px; background:#132b26; color:#f4d59f; }
#craftPanel summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:#f4d59f; font-weight:700; }
#craftPanel summary:focus-visible { outline:2px solid #f3c783; outline-offset:3px; }

/* Item displays share the inventory slot skin, symbols and canonical size. */
.bag-slot.item-slot { flex:0 0 var(--item-slot-size); width:var(--item-slot-size); height:var(--item-slot-size); flex-direction:row; pointer-events:none; cursor:default; }
.item-slot-host { display:inline-flex; flex:0 0 var(--item-slot-size); vertical-align:middle; }
.item-slot-host[hidden],.item-preview[hidden] { display:none; }
.item-preview { display:flex; align-items:center; gap:10px; min-width:0; margin:8px 0; }
.item-preview > h3 { min-width:0; margin:0; }
.item-preview-info { display:flex; flex:1; flex-direction:column; min-width:0; overflow-wrap:anywhere; }
.item-preview-info strong { color:#f7dbab; }
.item-preview-info small { color:#c6b9a4; }
.item-slots { display:flex; flex-wrap:wrap; gap:4px 14px; }
.item-slots > .item-preview { flex:1 1 160px; }
.bag-detail > .item-slot-host { float:left; margin:0 10px 6px 0; }
.bag-detail::after { content:""; display:block; clear:both; }
.craft-ingredients li { display:grid; grid-template-columns:var(--item-slot-size) minmax(0,1fr) auto; align-items:center; gap:10px; }
.market-row > div:not(.item-slot):not(.auction-bid-controls) { flex:1; }
.market-row > button { flex-shrink:0; }
@media(max-width:380px) {
  .market-row { flex-wrap:wrap; }
  .market-row > div:not(.item-slot):not(.auction-bid-controls) { flex-basis:calc(100% - var(--item-slot-size) - 12px); }
  .market-row > button,.market-row > .auction-bid-controls { margin-left:auto; }
}

/* Inventory-shaped forge target and a native modal with a live equipment-only grid. */
.forge-selection > h3 { margin:0 0 14px; text-align:center; overflow-wrap:anywhere; color:#f4d59f; }
.forge-stage { display:grid; grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); align-items:start; gap:6px; }
.forge-target,.forge-material .item-preview { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; min-width:0; }
.forge-target > span,.forge-target small,.forge-material small { font-size:11px; line-height:1.5; color:#d6cab6; overflow-wrap:anywhere; }
.forge-material .item-preview-info { min-width:0; }
.forge-material strong { font-size:12px; }
.forge-plus { align-self:start; padding-top:12px; font-size:24px; color:#e8c98b; text-align:center; }
.forge-target-button { display:block; padding:0; border:0; background:transparent; border-radius:8px; }
.forge-target-button:focus-visible { outline:2px solid #fff0ba; outline-offset:4px; }
.forge-target-button .item-slot { cursor:pointer; }
.forge-picker { box-sizing:border-box; width:min(94vw,460px); max-height:85dvh; padding:16px; color:#ebdfca; background:linear-gradient(150deg,#233733,#101e20); border:1px solid #b7955c; border-radius:16px; box-shadow:0 15px 70px #000b; overflow:auto; overscroll-behavior:contain; }
.forge-picker::backdrop { background:#000b; }
.forge-picker-header { position:sticky; top:-16px; z-index:1; background:#20332f; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.forge-picker-header h3 { margin:0; color:#f4d59f; }
.forge-picker-header button { min-width:44px; min-height:44px; border:1px solid #8d8069; border-radius:9px; background:#284141; color:#f4d59f; }
.forge-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:12px 6px; }
.forge-picker-choice { min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:5px 2px; border:1px solid transparent; border-radius:9px; background:transparent; color:#ead6b2; cursor:pointer; }
.forge-picker-choice strong,.forge-picker-choice small { max-width:100%; font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
.forge-picker-choice small { font-size:10px; color:#b8c7bc; }
.forge-picker-choice:focus-visible { outline:2px solid #fff0ba; outline-offset:1px; }
.forge-picker-choice[aria-pressed=true] { background:#66533250; }


.forge-picker-choice .item-slot { cursor:pointer; }

/* Preserve the centered inventory modal while keeping artisan/card actions reachable. */
.item-detail-modal { box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; }
.item-detail-modal [hidden] { display:none !important; }
.item-detail-modal select { width:100%; max-width:100%; min-width:0; }
.item-modal-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.item-modal-actions button { min-width:0; min-height:44px; margin:0; overflow-wrap:anywhere; }
.item-modal-actions .wear-sides,#bagForge,#bagCraft { grid-column:1/-1; }
.item-modal-close-btn { min-width:44px; min-height:44px; }
.item-modal-body { flex-shrink:0; overflow:visible; }
.item-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.item-detail-modal .bag-stat-label,.item-detail-modal .bag-stat-val { white-space:normal; overflow-wrap:anywhere; }

/* Hidden forge materials must win over the shared flex preview layout. */
.forge-material .item-preview[hidden] { display:none; }

.bag-quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.bag-quick-actions button { margin:0; min-width:0; overflow-wrap:anywhere; }
.bag-quick-actions .wear-sides { grid-column:1/-1; }
.equip-popup #equipPopupCloseBtn { width:100%; padding:12px; color:#e0d4c3; background:#2a4044; border:1px solid #839c9a; border-radius:12px; }

/* The hammer is presentation only. The selected item stays unchanged until the
   server's result is revealed; reduced motion uses the same text-only status. */
.forge-target { position:relative; }
.forge-hammer-motion { position:absolute; z-index:2; left:calc(50% - 48px); top:-16px; width:96px; height:88px; pointer-events:none; }
.forge-hammer-motion[hidden] { display:none; }
.forge-hammer { display:block; position:absolute; z-index:1; left:43px; top:7px; width:10px; height:51px; border:1px solid #bd8d50; border-radius:3px; background:linear-gradient(90deg,#624020,#ba8146,#704620); transform-origin:50% 90%; transform:translate(0,10px) rotate(-6deg); }
.forge-hammer::before { content:""; position:absolute; left:-13px; top:-3px; width:34px; height:19px; border:1px solid #f5d99f; border-radius:3px; background:linear-gradient(#f5d99f,#a88656 48%,#554c41); box-shadow:0 3px 4px #0009; }
.forge-hammer i { position:absolute; bottom:3px; left:-1px; width:10px; height:14px; border-top:2px solid #4c3019; border-bottom:2px solid #4c3019; }
.forge-impact-ring { position:absolute; z-index:0; left:15px; top:15px; width:66px; height:66px; border:1px solid #e4bc71; border-radius:50%; opacity:0; transform:scale(.65); background:radial-gradient(circle,#efc8792b 0 28%,#efc8790d 48%,transparent 70%); box-shadow:0 0 12px #e8b35b55,inset 0 0 9px #e8b35b44; }
.forge-impact-ring::after { content:""; position:absolute; inset:6px; border:1px dashed #eacb8b88; border-radius:50%; }
.forge-sparks { position:absolute; z-index:2; left:46px; top:44px; width:3px; height:3px; border-radius:50%; background:#ffe6ac; opacity:0; }
.is-striking .forge-hammer::before { box-shadow:0 3px 4px #0009,0 0 9px #f4cb6e66; }
.is-striking .forge-impact-ring { animation:forge-impact-pulse .36s ease-out 1; }
.is-impact .forge-impact-ring { opacity:.9; transform:scale(1.05); }
.is-impact .forge-sparks { opacity:.85; transform:scale(1.1); box-shadow:-17px -8px #ffd68a,18px -13px #e7ad54,-9px 16px #ffd68a,20px 11px #e7ad54,1px -21px #ffdea1,-22px 4px #e7ad54; }
.is-striking .forge-hammer { animation:forge-hammer-strike .36s ease-in-out 1; }
.is-striking .forge-sparks { animation:forge-hammer-sparks .36s ease-out 1; }
.forge-animation-status,.forge-outcome { margin:10px 0; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.forge-animation-status { color:#f3d7a1; text-align:center; }
.forge-outcome { padding:12px; border:1px solid #8f754a; border-radius:10px; background:#241d14; color:#f4e2bd; }
.forge-outcome[data-kind="success"],.forge-outcome[data-kind="reroll"] { animation:forge-outcome-arrive .32s ease-out 1; }
.forge-outcome[data-kind="success"] { border-color:#d8b467; background:linear-gradient(115deg,#3b301b,#241d14); box-shadow:inset 3px 0 #d8b467,0 0 15px #dbaf5333; color:#ffe6b0; }
.forge-outcome[data-kind="reroll"] { border-color:#8bbed0; background:linear-gradient(115deg,#1e353c,#17272c); box-shadow:inset 3px 0 #8bbed0,0 0 12px #6aa9bf22; }
.forge-outcome[data-kind="failed"],.forge-outcome[data-kind="downgraded"] { border-color:#b68a54; box-shadow:inset 3px 0 #b68a54; background:#30251a; }
.forge-outcome[data-kind="broken"] { border-color:#b77d70; box-shadow:inset 3px 0 #b77d70; background:#32211e; color:#f2c5b9; }
@keyframes forge-impact-pulse {
  0%,50% { opacity:0; transform:scale(.65); }
  60% { opacity:.9; transform:scale(.82); }
  85% { opacity:.45; transform:scale(1.12); }
  100% { opacity:0; transform:scale(1.2); }
}
@keyframes forge-outcome-arrive { from { opacity:.45; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@keyframes forge-hammer-strike {
  0%,100% { transform:translate(16px,-16px) rotate(-42deg); }
  42% { transform:translate(20px,-22px) rotate(-54deg); }
  59%,68% { transform:translate(0,10px) rotate(-6deg); }
  78% { transform:translate(3px,2px) rotate(-14deg); }
}
@keyframes forge-hammer-sparks {
  0%,54%,100% { opacity:0; box-shadow:none; transform:scale(.5); }
  60% { opacity:1; box-shadow:-10px -5px #ffd68a,11px -8px #e7ad54,-5px 9px #ffd68a,12px 6px #e7ad54; transform:scale(1); }
  85% { opacity:0; box-shadow:-19px -10px #ffd68a,22px -15px #e7ad54,-10px 18px #ffd68a,23px 12px #e7ad54; transform:scale(1.2); }
}
@media (prefers-reduced-motion:reduce) {
  .forge-hammer-motion { display:none!important; }
  .forge-hammer,.forge-sparks { animation:none!important; }
  .forge-impact-ring,.forge-outcome { animation:none!important; }
}


/* Craft & kitchen: real workbench recipes, no simulated cooking/house state. */
.drawer:has(.crafting-page) { width:min(1100px,calc(100vw - 32px)); left:50%; right:auto; bottom:18px; transform:translateX(-50%); border:2px solid #b89858; border-radius:14px; background:linear-gradient(125deg,#192c23,#090f0d 65%); box-shadow:0 0 0 3px #151810,0 0 0 4px #75603b,0 22px 80px #000c; }
.drawer:has(.crafting-page) .drawer-header { background:linear-gradient(90deg,#263c2b,#111d16); border-color:#a08348; }
.crafting-page { --ck-gold:#d5b66e; --ck-line:#89734280; color:#e7ddc3; }
.ck-hero { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:10px 8px 18px; border-bottom:1px solid var(--ck-line); }
.crafting-page .ck-hero h3 { font-size:26px; margin:2px 0; color:#f2db9c; text-shadow:0 2px 6px #000; }
.ck-hero p { color:#c4c3a2; }
.ck-eyebrow { font-size:10px; letter-spacing:.1em; color:#b99c60; }
.ck-skill { display:grid; gap:7px; min-width:180px; padding:12px 18px; border:1px solid var(--ck-line); border-radius:6px; background:#0b1712; color:#dfca8c; }
.ck-skill span { font-size:11px; color:#b6b9a6; }
.crafting-page .forge-nav { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.crafting-page .forge-nav button { width:auto; margin-top:10px; padding:8px 14px; background:#20372b; border-color:var(--ck-line); }
.ck-wallet { margin-left:auto; color:#c5bd9b; }.ck-wallet strong { display:inline-block; margin-left:12px; color:#f0d184; }
.ck-categories { display:flex; gap:6px; padding:8px 0 12px; flex-wrap:wrap; }
.ck-categories button { min-height:42px; flex:1; border:1px solid var(--ck-line); border-radius:5px; color:#e2d7b1; background:linear-gradient(#273b2b,#15241a); font:inherit; padding:8px 12px; }
.ck-categories button[aria-pressed="true"] { background:linear-gradient(#b39451,#68502c); color:#fff0c1; border-color:#e4c77b; box-shadow:inset 0 0 8px #f4d58733; }
.ck-workspace { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:20px; padding:14px; border:1px solid var(--ck-line); border-radius:6px; background:#0c1813aa; }
.ck-recipes,.ck-detail { min-width:0; }.ck-detail { padding-left:20px; border-left:1px solid var(--ck-line); }
.ck-recipes > h3 { margin-top:0; padding-bottom:8px; border-bottom:1px solid var(--ck-line); }
.ck-filters { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.crafting-page .ck-filters .field { margin-top:0; }
.crafting-page select { background:#111f17; border-color:var(--ck-line); border-radius:5px; }
.ck-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.ck-recipe { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:152px; padding:12px 5px; border:1px solid #75643c; border-radius:6px; background:radial-gradient(ellipse at top,#34452a,#152119 75%); color:#e9d8a4; font:inherit; text-align:center; cursor:pointer; box-shadow:inset 0 0 0 3px #0b140b66; }
.ck-recipe strong { font-size:12px; line-height:1.6; }.ck-recipe > span,.ck-recipe small { font-size:11px; color:#c1c7a6; }
.ck-recipe[aria-pressed="true"] { border-color:#edcc7c; background:radial-gradient(ellipse at top,#5b5733,#26351e 75%); box-shadow:inset 0 0 0 2px #b79a5480,0 0 10px #c2a56122; }
.ck-recipe.locked { background:#101712; color:#a4a38c; }.ck-recipe.locked .item-slot { filter:brightness(.55); }
.ck-recipe .item-slot { --item-slot-size:50px; pointer-events:none; }
.ck-pagination { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:12px; color:#c8bd91; font-size:12px; }
.ck-pagination button { min-width:44px; min-height:44px; color:#dbc58b; border:1px solid var(--ck-line); background:#1c2c20; border-radius:5px; font-size:20px; }
.ck-output { gap:14px; padding:6px 0 14px; border-bottom:1px solid var(--ck-line); }.ck-output .item-slot { --item-slot-size:74px; }
.ck-output h3 { font-size:20px; margin-top:2px; }.ck-detail h4 { font-size:14px; color:#dfca91; margin:16px 0 8px; }.ck-detail h4 small { float:right; font-weight:400; color:#a6b39c; }
.crafting-page .craft-ingredients { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.crafting-page .craft-ingredients li { grid-template-columns:40px minmax(0,1fr); gap:4px 8px; border:1px solid #596747; border-radius:5px; padding:8px; background:#1c2e20; }
.crafting-page .craft-ingredients li .item-slot { --item-slot-size:38px; }.crafting-page .craft-ingredients li > span { font-size:12px; }.crafting-page .craft-ingredients li > strong { grid-column:2; color:#b8dc91; }.crafting-page .craft-ingredients li:not(.missing) > strong::after { content:" ✓"; }.crafting-page .craft-ingredients li.missing { background:#30251d; border-color:#9b664a; }.crafting-page .craft-ingredients li.missing > strong { color:#f0b19c; }
.ck-requirements { list-style:none; margin:10px 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:5px; font-size:12px; }.ck-requirements .met { color:#b8cf9a; }.ck-requirements .missing { color:#edac92; }
.crafting-page #benchCraft { background:linear-gradient(#bfa05b,#7a572d); border:1px solid #edcb78; border-radius:6px; font-size:17px; color:#fff0c8; box-shadow:inset 0 0 0 2px #735a30; min-height:52px; }
.ck-tracking { display:flex; flex-wrap:wrap; gap:6px; }.crafting-page .ck-tracking button { flex:1 1 45%; background:#1a2b20; border-color:var(--ck-line); padding:8px; font-size:12px; }
.ck-future { color:#a8b09c; }.ck-coming { text-align:center; padding:60px 20px; border:1px solid var(--ck-line); background:#0d1b14; color:#e1cc90; }
.crafting-page button:focus-visible { outline:2px solid #f4d688; outline-offset:3px; }
@media(max-width:700px) { .drawer:has(.crafting-page) { width:calc(100vw - 12px); bottom:6px; max-height:calc(100dvh - max(16px,env(safe-area-inset-top))); padding-left:12px; padding-right:12px; }.drawer:has(.crafting-page) .drawer-header { margin-left:-12px; margin-right:-12px; }.ck-workspace { grid-template-columns:1fr; padding:10px; gap:14px; }.ck-detail { border-left:0; border-top:1px solid var(--ck-line); padding:14px 0 0; }.ck-hero { align-items:flex-start; gap:8px; }.crafting-page .ck-hero h3 { font-size:21px; }.ck-skill { min-width:0; padding:8px; font-size:12px; }.ck-skill span { font-size:10px; }.ck-categories button { flex:1 0 20%; padding:8px; }.ck-grid { gap:7px; }.ck-recipe { min-height:143px; }.ck-wallet { font-size:12px; }.ck-requirements { gap:7px; } }
@media(prefers-reduced-motion:reduce) { .crafting-page * { scroll-behavior:auto; } }

/* The recipe graph is read-only; native buttons expose every ingredient by touch or keyboard. */
.ck-recipe-explorer { min-width:0; margin:12px 0; }
.ck-inspect-nav { display:flex; gap:8px; flex-wrap:wrap; }
.ck-inspect-nav button { flex:1; min-width:0; min-height:44px; }
.ck-relation { padding:10px; margin-bottom:8px; border:1px solid var(--ck-line); border-radius:7px; background:#14251b; }
.ck-formula { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.ck-recipe-node { display:flex; flex-direction:column; align-items:center; gap:4px; width:66px; min-height:44px; padding:4px; border:1px solid #9d8653; border-radius:6px; background:#263a29; color:#e9d8a4; cursor:pointer; font:inherit; }
.ck-recipe-node .item-slot { --item-slot-size:48px; }
.ck-recipe-node > span { font-size:10px; line-height:1.4; max-width:100%; overflow-wrap:anywhere; }
.ck-recipe-node > small { font-size:12px; }
.ck-recipe-symbol { color:#ddbc72; font-size:20px; }
.ck-relation > .note { font-size:11px; margin:8px 0 0; }
.ck-recipe-hint { color:#dfca91; font-size:12px; }
.crafting-page .craft-ingredients li { grid-template-columns:44px minmax(0,1fr); }
.crafting-page .craft-ingredients .ck-recipe-node { width:44px; padding:2px; }
.craft-ingredients .ck-recipe-node > span,.craft-ingredients .ck-recipe-node > small { display:none; }
@media(max-width:380px) { .ck-relation { padding:7px; }.ck-recipe-node { width:60px; }.ck-recipe-node .item-slot { --item-slot-size:44px; } }

/* A compact recipe popup keeps the item picker clear until a player chooses. */
.drawer:has(.crafting-page) { width:min(720px,calc(100vw - 24px)); }
.ck-workspace { grid-template-columns:minmax(0,1fr); padding:10px; }
.ck-recipe { min-height:108px; padding:8px 5px; }
.ck-recipe .item-slot { --item-slot-size:40px; }
.ck-popup { --ck-line:#89734280; width:min(480px,calc(100vw - 20px)); max-width:none; max-height:min(620px,calc(100dvh - 32px)); padding:0; border:1px solid #b89858; border-radius:12px; color:#e7ddc3; background:#101e16; box-shadow:0 16px 64px #000c; overflow:hidden; }
.ck-popup[open] { display:flex; flex-direction:column; }
.ck-popup::backdrop { background:#030906b8; }
.ck-popup-header { display:flex; flex:none; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-bottom:1px solid var(--ck-line); background:#203326; }
.ck-popup-header h3 { margin:0; font-size:16px; color:#f0d796; }
.crafting-page .ck-popup-header button { width:44px; min-width:44px; height:44px; margin:0; padding:0; font-size:18px; }
.ck-popup-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px; }
.ck-popup .ck-detail { border:0; padding:0; }
.ck-popup .ck-output { gap:10px; padding:0 0 8px; }
.ck-popup .ck-output .item-slot { --item-slot-size:46px; }
.ck-popup .ck-output h3 { font-size:16px; margin:0; }
.ck-popup .ck-detail h4 { margin:10px 0 6px; font-size:13px; }
.ck-popup .ck-recipe-explorer { margin:8px 0; }
.ck-popup .ck-relation { padding:6px; margin-bottom:6px; }
.ck-popup .ck-recipe-node { width:58px; }
.ck-popup .ck-recipe-node .item-slot { --item-slot-size:38px; }
.ck-popup .ck-recipe-symbol { font-size:16px; }
.ck-popup .craft-ingredients { gap:6px; }
.ck-popup .craft-ingredients li { padding:6px; }
.ck-popup .craft-ingredients .ck-recipe-node { width:44px; }
.ck-popup .ck-future { display:none; }
.crafting-page .ck-popup #benchCraft { min-height:44px; font-size:15px; }
@media(max-width:700px) { .drawer:has(.crafting-page) { width:calc(100vw - 12px); }.ck-hero { padding-bottom:10px; }.crafting-page .ck-hero h3 { font-size:18px; }.ck-skill { font-size:11px; }.ck-recipe { min-height:108px; } }
@media(max-width:380px) { .ck-popup-body { padding:10px; }.ck-popup .craft-ingredients { grid-template-columns:1fr; }.ck-popup .ck-inspect-nav { gap:4px; }.ck-popup .ck-inspect-nav button { font-size:12px; padding:6px; } }

.ck-popup p { margin:8px 0; }
.ck-popup #craftActionStatus:empty { display:none; }
.ck-popup .ck-uses-details { margin:8px 0; border:1px solid var(--ck-line); border-radius:6px; padding:0 8px; }
.ck-popup .ck-uses-details summary { min-height:44px; display:flex; align-items:center; cursor:pointer; font-size:12px; color:#dfca91; }
.ck-popup .ck-uses-details summary::before { content:"▸"; margin-right:8px; }
.ck-popup .ck-uses-details[open] summary::before { content:"▾"; }

.ck-popup-footer { flex:none; padding:8px 12px 10px; border-top:1px solid var(--ck-line); background:#17291d; }
.ck-popup-footer .status-line { margin:0 0 6px; font-size:12px; }
.ck-popup-footer #benchCraft { margin-top:0; }

.home-panel { display:grid;gap:10px; }
.home-panel section { display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px; }
.home-panel section h3,.home-panel section p,.home-panel section small { flex-basis:100%;margin:0; }
.home-panel button { margin:3px;min-height:40px; }
.home-panel small { opacity:.85; }
.home-grid { flex-basis:100%;display:grid;grid-template-columns:repeat(var(--home-width,4),minmax(0,1fr));gap:3px; }
.home-panel .home-grid button { min-height:38px;min-width:0;padding:2px;margin:0;overflow-wrap:anywhere;font-size:.7rem; }
.home-grid button[aria-pressed="true"] { outline:2px solid #edc76f;outline-offset:-2px; }
/* ==========================================================================
   RPG Skill Tree & Skill Detail Modal
   ========================================================================== */
.skill-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900 !important;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.16s ease-out both;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.skill-popup-backdrop[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.skill-detail-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  max-height: min(88vh, 640px);
  z-index: 950 !important;
  pointer-events: auto !important;
  background: linear-gradient(165deg, #18282b, #0c1618);
  border: 1.5px solid rgba(212, 175, 55, 0.6);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9),
              0 0 28px rgba(212, 175, 55, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  box-sizing: border-box;
  animation: fadeIn 0.18s ease-out both;
}
.skill-detail-modal[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.skill-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding-bottom: 10px;
}
.skill-modal-title {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.skill-modal-orb {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: radial-gradient(circle at 45% 35%, #2a3d42, #10191c);
  border: 2px solid #f2ca83;
  box-shadow: 0 0 16px rgba(242, 202, 131, 0.35);
  flex-shrink: 0;
}
.skill-modal-badge {
  /* Status belongs beside the name, never over the skill artwork. */
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
  line-height: 1.35;
  background: #f2ca83;
  color: #1a1508;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px solid #fff;
}
.skill-modal-naming {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.skill-modal-name {
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 800;
  color: #f6eedb;
  letter-spacing: 0.3px;
}
.skill-modal-type {
  font-size: 11px;
  color: #7fe8ff;
  font-weight: 600;
}
.skill-modal-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(212, 175, 55, 0.6);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.skill-modal-close-btn:hover {
  background: rgba(212, 175, 55, 0.3);
  border-color: #ffd700;
  transform: scale(1.08);
}

.skill-modal-body {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skill-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.skill-spec-chip {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.skill-spec-chip .spec-label {
  font-size: 10px;
  color: #a4b3b6;
}
.skill-spec-chip strong {
  font-size: 12px;
  color: #fff;
}

.skill-desc-card {
  background: rgba(16, 26, 28, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
}
.skill-desc-text {
  font-size: 12px;
  line-height: 1.5;
  color: #d1b67b;
  margin: 0;
}

.skill-progression-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skill-prog-title {
  font-size: 11px;
  font-weight: 700;
  color: #7fe8ff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.skill-prog-box {
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.skill-prog-box.current {
  background: rgba(242, 202, 131, 0.08);
  border: 1px solid rgba(242, 202, 131, 0.25);
}
.skill-prog-box.next {
  background: rgba(127, 232, 255, 0.08);
  border: 1px solid rgba(127, 232, 255, 0.3);
}
.prog-tag {
  font-size: 10px;
  font-weight: 700;
}
.prog-tag.current { color: #f2ca83; }
.prog-tag.next { color: #7fe8ff; }
.prog-text {
  font-size: 12px;
  color: #f6eedb;
  line-height: 1.4;
}

.skill-req-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.skill-req-item {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e0d5be;
}
.skill-req-item.ok {
  color: #5cf2bd;
  border-color: rgba(92, 242, 189, 0.4);
  background: rgba(92, 242, 189, 0.08);
}
.skill-req-item.no {
  color: #ff8585;
  border-color: rgba(255, 133, 133, 0.4);
  background: rgba(255, 133, 133, 0.08);
}

.skill-modal-actions {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.skill-upgrade-btn {
  flex: 2;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 16px;
  background: linear-gradient(135deg, #ffd700, #d4af37);
  color: #1a1508;
  border: 1px solid #fff;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
  transition: all 0.16s ease;
}
.skill-upgrade-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.6);
}
.skill-upgrade-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #3a3f42;
  color: #8b9699;
  border-color: #555;
  box-shadow: none;
}

/* ==========================================================================
   Skill Tree Container & Nodes in Drawer
   ========================================================================== */
.st-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px 16px;
}
.st-header-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(16, 26, 28, 0.7));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.st-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.st-header-crest {
  font-size: 26px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #3a3226, #120f0c);
  border: 1.5px solid #d4af37;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}
.st-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-header-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}
.st-header-sub {
  font-size: 11px;
  color: #d1b67b;
}
.st-points-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1.5px solid #f2ca83;
  border-radius: 10px;
  padding: 4px 12px;
  box-shadow: 0 0 12px rgba(242, 202, 131, 0.25);
}
.st-points-num {
  font-size: 18px;
  font-weight: 900;
  color: #ffd700;
  line-height: 1.1;
}
.st-points-label {
  font-size: 9px;
  color: #d1b67b;
  text-transform: uppercase;
  font-weight: 700;
}

.st-tree-board {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  padding: 8px 4px;
}
.st-branch {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 10px;
  position: relative;
}
.st-branch-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  color: #7fe8ff;
  border-bottom: 1px solid rgba(127, 232, 255, 0.2);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.st-branch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 480px) {
  .st-branch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.st-skill-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, rgba(28, 42, 46, 0.6), rgba(15, 22, 24, 0.8));
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 8px 8px;
  gap: 6px;
  cursor: pointer;
  position: relative;
  transition: all 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
}
.st-skill-card:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 202, 131, 0.6);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.st-skill-card:active {
  transform: scale(0.97);
}

.st-skill-card.learned {
  border-color: rgba(242, 202, 131, 0.65);
  box-shadow: 0 0 14px rgba(242, 202, 131, 0.2);
}
.st-skill-card.ready {
  border-color: #7fe8ff;
  box-shadow: 0 0 14px rgba(127, 232, 255, 0.35);
  animation: sgPulse 1.8s ease-out infinite;
}
.st-skill-card.locked {
  opacity: 0.6;
  border-color: rgba(255, 255, 255, 0.08);
}

.st-card-orb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  position: relative;
  background: radial-gradient(circle at 45% 35%, #2a3d42, #10191c);
  border: 2px solid #5a6669;
  transition: all 0.18s ease;
}
.st-skill-card.learned .st-card-orb {
  background: radial-gradient(circle at 45% 30%, #fff4cc, #f0b847 55%, #8a5214);
  border-color: #ffe39a;
  color: #2a1606;
  box-shadow: 0 0 16px rgba(255, 184, 74, 0.6);
}
.st-skill-card.ready .st-card-orb {
  background: radial-gradient(circle at 45% 35%, #1f3a44, #0f1c22);
  border-color: #7fe8ff;
  color: #bff6ff;
}
.st-skill-card.locked .st-card-orb {
  background: radial-gradient(circle at 45% 35%, #222, #111);
  border-color: #444;
  color: #666;
}

.st-card-rank-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f2ca83;
  color: #1a1508;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.st-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #f6eedb;
  text-align: center;
  line-height: 1.2;
}
.st-card-pips {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}
.st-card-pips i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: inline-block;
}
.st-card-pips i.on {
  background: #ffd700;
  box-shadow: 0 0 4px #ffd700;
}
.st-card-click-hint {
  font-size: 10px;
  color: #7fe8ff;
  font-weight: 600;
}

.st-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   MONTRA SKILL KNOWLEDGE GRAPH (KG)
   ========================================================================== */
.kg-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 2px;
  width: 100%;
  box-sizing: border-box;
}

.kg-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(135deg, rgba(30, 48, 52, 0.95), rgba(14, 25, 28, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.kg-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kg-banner-crest {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: radial-gradient(circle at 40% 30%, #ffd700, #b8860b 70%, #5a4005);
  color: #1a1202;
  font-size: 22px;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  border: 1px solid #ffe39a;
}

.kg-banner-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kg-banner-title {
  font-size: 14px;
  font-weight: 800;
  color: #f7edd7;
  letter-spacing: 0.5px;
}

.kg-banner-sub {
  font-size: 11px;
  color: #c5b699;
}

.kg-canvas-board {
  position: relative;
  width: 100%;
  height: 420px;
  background: radial-gradient(ellipse at 50% 30%, #17262c 0%, #0d1619 65%, #070c0e 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6);
  user-select: none;
}

.kg-canvas-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(rgba(212, 175, 55, 0.22) 1.2px, transparent 1.2px),
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px, 48px 48px;
  pointer-events: none;
}

.kg-svg-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.kg-edge {
  fill: none;
  stroke: #413523;
  stroke-width: 2.5;
  stroke-dasharray: 4 4;
  transition: all 0.3s ease;
}

.kg-edge.ready {
  stroke: #7fe8ff;
  stroke-width: 3;
  stroke-dasharray: 6 4;
  animation: kgFlow 1.2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(127, 232, 255, 0.8));
}

.kg-edge.on {
  stroke: #ffd700;
  stroke-width: 3.5;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7));
}

@keyframes kgFlow {
  from { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 0; }
}

.kg-root-node {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 5;
  pointer-events: none;
}

.kg-root-orb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fff2b2, #f5b027 60%, #87500d);
  border: 2px solid #fff;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.8);
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #1a1202;
  animation: kgCoreGlow 3s ease-in-out infinite alternate;
}

@keyframes kgCoreGlow {
  from { box-shadow: 0 0 14px rgba(255, 215, 0, 0.6); }
  to { box-shadow: 0 0 24px rgba(255, 215, 0, 0.95), 0 0 35px rgba(255, 170, 0, 0.4); }
}

.kg-root-title {
  font-size: 11px;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  background: rgba(10, 16, 20, 0.8);
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.kg-stream-header {
  position: absolute;
  top: 72px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 4;
}

.kg-stream-left {
  left: 18px;
  background: rgba(180, 50, 40, 0.35);
  border: 1px solid rgba(255, 90, 80, 0.5);
  color: #ffb8b0;
}

.kg-stream-right {
  right: 18px;
  background: rgba(40, 100, 160, 0.35);
  border: 1px solid rgba(80, 170, 255, 0.5);
  color: #b0dcff;
}

.kg-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 96px;
  cursor: pointer;
  z-index: 10;
  padding: 4px;
  border-radius: 12px;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.18s ease;
  user-select: none;
}

.kg-node:hover, .kg-node:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  outline: none;
}

.kg-node:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.kg-orb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  border: 2px solid #5a4b32;
  background: radial-gradient(circle at 45% 35%, #2a353c, #131b20);
  color: #8c9fa8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
}

.kg-node.ready .kg-orb {
  background: radial-gradient(circle at 45% 35%, #183e4a, #0c2026);
  border-color: #7fe8ff;
  color: #bff6ff;
  box-shadow: 0 0 16px rgba(127, 232, 255, 0.6);
  animation: kgPulse 1.8s ease-in-out infinite;
}

.kg-node.learned .kg-orb {
  background: radial-gradient(circle at 45% 35%, #fff2b2, #dca028 65%, #6e410b);
  border-color: #ffe89f;
  color: #1f1403;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.7);
}

.kg-node.locked .kg-orb {
  opacity: 0.65;
  filter: grayscale(0.5);
}

.kg-node-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #f7eedb;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  max-width: 94px;
}

.kg-node-rank {
  font-size: 9.5px;
  color: #d1b67b;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.kg-node-status {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  margin-top: 2px;
}

.kg-node.ready .kg-node-status {
  background: rgba(127, 232, 255, 0.25);
  color: #7fe8ff;
  border: 1px solid rgba(127, 232, 255, 0.5);
  box-shadow: 0 0 6px rgba(127, 232, 255, 0.3);
}

.kg-node.learned .kg-node-status {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.kg-node.locked .kg-node-status {
  background: rgba(0, 0, 0, 0.4);
  color: #777;
  border: 1px solid #333;
}



   RPG Skill Tree & Skill Detail Modal
   ========================================================================== */
.skill-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900 !important;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.16s ease-out both;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
.skill-popup-backdrop[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.skill-detail-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  max-height: min(88vh, 640px);
  z-index: 950 !important;
  pointer-events: auto !important;
  background: linear-gradient(165deg, #18282b, #0c1618);
  border: 1.5px solid rgba(212, 175, 55, 0.6);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9),
              0 0 28px rgba(212, 175, 55, 0.25);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  box-sizing: border-box;
  animation: fadeIn 0.18s ease-out both;
}
.skill-detail-modal[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.skill-modal-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding-bottom: 10px;
}
.skill-modal-title {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.skill-modal-orb {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: radial-gradient(circle at 45% 35%, #2a3d42, #10191c);
  border: 2px solid #f2ca83;
  box-shadow: 0 0 16px rgba(242, 202, 131, 0.35);
  flex-shrink: 0;
}
.skill-modal-badge {
  /* Status belongs beside the name, never over the skill artwork. */
  display: inline-block;
  align-self: flex-start;
  white-space: nowrap;
  line-height: 1.35;
  background: #f2ca83;
  color: #1a1508;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px solid #fff;
}
.skill-modal-naming {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.skill-modal-name {
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 800;
  color: #f6eedb;
  letter-spacing: 0.3px;
}
.skill-modal-type {
  font-size: 11px;
  color: #7fe8ff;
  font-weight: 600;
}
.skill-modal-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(212, 175, 55, 0.6);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  flex-shrink: 0;
  transition: all 0.18s ease;
}
.skill-modal-close-btn:hover {
  background: rgba(212, 175, 55, 0.3);
  border-color: #ffd700;
  transform: scale(1.08);
}

.skill-modal-body {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skill-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.skill-spec-chip {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.skill-spec-chip .spec-label {
  font-size: 10px;
  color: #a4b3b6;
}
.skill-spec-chip strong {
  font-size: 12px;
  color: #fff;
}

.skill-desc-card {
  background: rgba(16, 26, 28, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
}
.skill-desc-text {
  font-size: 12px;
  line-height: 1.5;
  color: #d1b67b;
  margin: 0;
}

.skill-progression-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.skill-prog-title {
  font-size: 11px;
  font-weight: 700;
  color: #7fe8ff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.skill-prog-box {
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.skill-prog-box.current {
  background: rgba(242, 202, 131, 0.08);
  border: 1px solid rgba(242, 202, 131, 0.25);
}
.skill-prog-box.next {
  background: rgba(127, 232, 255, 0.08);
  border: 1px solid rgba(127, 232, 255, 0.3);
}
.prog-tag {
  font-size: 10px;
  font-weight: 700;
}
.prog-tag.current { color: #f2ca83; }
.prog-tag.next { color: #7fe8ff; }
.prog-text {
  font-size: 12px;
  color: #f6eedb;
  line-height: 1.4;
}

.skill-req-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.skill-req-item {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e0d5be;
}
.skill-req-item.ok {
  color: #5cf2bd;
  border-color: rgba(92, 242, 189, 0.4);
  background: rgba(92, 242, 189, 0.08);
}
.skill-req-item.no {
  color: #ff8585;
  border-color: rgba(255, 133, 133, 0.4);
  background: rgba(255, 133, 133, 0.08);
}

.skill-modal-actions {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.skill-upgrade-btn {
  flex: 2;
  font-size: 14px;
  font-weight: 800;
  padding: 10px 16px;
  background: linear-gradient(135deg, #ffd700, #d4af37);
  color: #1a1508;
  border: 1px solid #fff;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
  transition: all 0.16s ease;
}
.skill-upgrade-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.6);
}
.skill-upgrade-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #3a3f42;
  color: #8b9699;
  border-color: #555;
  box-shadow: none;
}

/* ==========================================================================
   Skill Tree Container & Nodes in Drawer
   ========================================================================== */
.st-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 2px 16px;
}
.st-header-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(16, 26, 28, 0.7));
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.st-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.st-header-crest {
  font-size: 26px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #3a3226, #120f0c);
  border: 1.5px solid #d4af37;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.25);
}
.st-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-header-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.3px;
}
.st-header-sub {
  font-size: 11px;
  color: #d1b67b;
}
.st-points-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1.5px solid #f2ca83;
  border-radius: 10px;
  padding: 4px 12px;
  box-shadow: 0 0 12px rgba(242, 202, 131, 0.25);
}
.st-points-num {
  font-size: 18px;
  font-weight: 900;
  color: #ffd700;
  line-height: 1.1;
}
.st-points-label {
  font-size: 9px;
  color: #d1b67b;
  text-transform: uppercase;
  font-weight: 700;
}

.st-tree-board {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  padding: 8px 4px;
}
.st-branch {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 10px;
  position: relative;
}
.st-branch-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  color: #7fe8ff;
  border-bottom: 1px solid rgba(127, 232, 255, 0.2);
  padding-bottom: 6px;
  margin-bottom: 2px;
}
.st-branch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 480px) {
  .st-branch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.st-skill-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, rgba(28, 42, 46, 0.6), rgba(15, 22, 24, 0.8));
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 8px 8px;
  gap: 6px;
  cursor: pointer;
  position: relative;
  transition: all 0.18s ease;
  user-select: none;
  -webkit-user-select: none;
}
.st-skill-card:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 202, 131, 0.6);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.st-skill-card:active {
  transform: scale(0.97);
}

.st-skill-card.learned {
  border-color: rgba(242, 202, 131, 0.65);
  box-shadow: 0 0 14px rgba(242, 202, 131, 0.2);
}
.st-skill-card.ready {
  border-color: #7fe8ff;
  box-shadow: 0 0 14px rgba(127, 232, 255, 0.35);
  animation: sgPulse 1.8s ease-out infinite;
}
.st-skill-card.locked {
  opacity: 0.6;
  border-color: rgba(255, 255, 255, 0.08);
}

.st-card-orb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  position: relative;
  background: radial-gradient(circle at 45% 35%, #2a3d42, #10191c);
  border: 2px solid #5a6669;
  transition: all 0.18s ease;
}
.st-skill-card.learned .st-card-orb {
  background: radial-gradient(circle at 45% 30%, #fff4cc, #f0b847 55%, #8a5214);
  border-color: #ffe39a;
  color: #2a1606;
  box-shadow: 0 0 16px rgba(255, 184, 74, 0.6);
}
.st-skill-card.ready .st-card-orb {
  background: radial-gradient(circle at 45% 35%, #1f3a44, #0f1c22);
  border-color: #7fe8ff;
  color: #bff6ff;
}
.st-skill-card.locked .st-card-orb {
  background: radial-gradient(circle at 45% 35%, #222, #111);
  border-color: #444;
  color: #666;
}

.st-card-rank-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f2ca83;
  color: #1a1508;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.st-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #f6eedb;
  text-align: center;
  line-height: 1.2;
}
.st-card-pips {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}
.st-card-pips i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: inline-block;
}
.st-card-pips i.on {
  background: #ffd700;
  box-shadow: 0 0 4px #ffd700;
}
.st-card-click-hint {
  font-size: 10px;
  color: #7fe8ff;
  font-weight: 600;
}

.st-footer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   MONTRA SKILL KNOWLEDGE GRAPH (KG)
   ========================================================================== */
.kg-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 2px;
  width: 100%;
  box-sizing: border-box;
}

.kg-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(135deg, rgba(30, 48, 52, 0.95), rgba(14, 25, 28, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.kg-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kg-banner-crest {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: radial-gradient(circle at 40% 30%, #ffd700, #b8860b 70%, #5a4005);
  color: #1a1202;
  font-size: 22px;
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  border: 1px solid #ffe39a;
}

.kg-banner-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kg-banner-title {
  font-size: 14px;
  font-weight: 800;
  color: #f7edd7;
  letter-spacing: 0.5px;
}

.kg-banner-sub {
  font-size: 11px;
  color: #c5b699;
}

.kg-canvas-board {
  position: relative;
  width: 100%;
  height: 420px;
  background: radial-gradient(ellipse at 50% 30%, #17262c 0%, #0d1619 65%, #070c0e 100%);
  border: 1.5px solid rgba(212, 175, 55, 0.35);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6);
  user-select: none;
}

.kg-canvas-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(rgba(212, 175, 55, 0.22) 1.2px, transparent 1.2px),
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 24px 24px, 48px 48px, 48px 48px;
  pointer-events: none;
}

.kg-svg-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.kg-edge {
  fill: none;
  stroke: #413523;
  stroke-width: 2.5;
  stroke-dasharray: 4 4;
  transition: all 0.3s ease;
}

.kg-edge.ready {
  stroke: #7fe8ff;
  stroke-width: 3;
  stroke-dasharray: 6 4;
  animation: kgFlow 1.2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(127, 232, 255, 0.8));
}

.kg-edge.on {
  stroke: #ffd700;
  stroke-width: 3.5;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.7));
}

@keyframes kgFlow {
  from { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 0; }
}

.kg-root-node {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 5;
  pointer-events: none;
}

.kg-root-orb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fff2b2, #f5b027 60%, #87500d);
  border: 2px solid #fff;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.8);
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #1a1202;
  animation: kgCoreGlow 3s ease-in-out infinite alternate;
}

@keyframes kgCoreGlow {
  from { box-shadow: 0 0 14px rgba(255, 215, 0, 0.6); }
  to { box-shadow: 0 0 24px rgba(255, 215, 0, 0.95), 0 0 35px rgba(255, 170, 0, 0.4); }
}

.kg-root-title {
  font-size: 11px;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  background: rgba(10, 16, 20, 0.8);
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.kg-stream-header {
  position: absolute;
  top: 72px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 4;
}

.kg-stream-left {
  left: 18px;
  background: rgba(180, 50, 40, 0.35);
  border: 1px solid rgba(255, 90, 80, 0.5);
  color: #ffb8b0;
}

.kg-stream-right {
  right: 18px;
  background: rgba(40, 100, 160, 0.35);
  border: 1px solid rgba(80, 170, 255, 0.5);
  color: #b0dcff;
}

.kg-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 96px;
  cursor: pointer;
  z-index: 10;
  padding: 4px;
  border-radius: 12px;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.18s ease;
  user-select: none;
}

.kg-node:hover, .kg-node:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  outline: none;
}

.kg-node:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.kg-orb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  border: 2px solid #5a4b32;
  background: radial-gradient(circle at 45% 35%, #2a353c, #131b20);
  color: #8c9fa8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
}

.kg-node.ready .kg-orb {
  background: radial-gradient(circle at 45% 35%, #183e4a, #0c2026);
  border-color: #7fe8ff;
  color: #bff6ff;
  box-shadow: 0 0 16px rgba(127, 232, 255, 0.6);
  animation: kgPulse 1.8s ease-in-out infinite;
}

.kg-node.learned .kg-orb {
  background: radial-gradient(circle at 45% 35%, #fff2b2, #dca028 65%, #6e410b);
  border-color: #ffe89f;
  color: #1f1403;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.55), inset 0 2px 4px rgba(255, 255, 255, 0.7);
}

.kg-node.locked .kg-orb {
  opacity: 0.65;
  filter: grayscale(0.5);
}

.kg-node-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #f7eedb;
  text-align: center;
  line-height: 1.15;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  max-width: 94px;
}

.kg-node-rank {
  font-size: 9.5px;
  color: #d1b67b;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.kg-node-status {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  margin-top: 2px;
}

.kg-node.ready .kg-node-status {
  background: rgba(127, 232, 255, 0.25);
  color: #7fe8ff;
  border: 1px solid rgba(127, 232, 255, 0.5);
  box-shadow: 0 0 6px rgba(127, 232, 255, 0.3);
}

.kg-node.learned .kg-node-status {
  background: rgba(255, 215, 0, 0.2);
  color: #ffd700;
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.kg-node.locked .kg-node-status {
  background: rgba(0, 0, 0, 0.4);
  color: #777;
  border: 1px solid #333;
}

/* A two-column storefront, using the same inventory tiles and game materials. */
.drawer:has(.market-catalog) { max-height:calc(100dvh - max(18px,env(safe-area-inset-top))); }
.market-catalog { min-width:0; }
.market-catalog [hidden] { display:none; }
.market-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; padding:14px; border:1px solid #ba925b70; border-radius:14px; background:radial-gradient(ellipse at top left,#4c3c2966,transparent 80%),#102124; }
.market-banner > div { min-width:0; }
.market-banner small { color:#c9a66c; font-size:10px; letter-spacing:.15em; }
.market-banner h3 { margin:3px 0; color:#ffe2ad; font-size:23px; }
.market-banner p { margin:0; color:#bcb9a5; font-size:12px; }
.market-banner .economy-balance { flex:0 1 45%; margin:0; padding:9px; font-size:13px; overflow-wrap:anywhere; background:#081719; text-align:right; }
.market-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:4px; border:1px solid #a8875545; border-radius:11px; background:#071518; }
.market-tabs button { min-width:0; min-height:46px; border:1px solid transparent; border-radius:8px; background:transparent; color:#cabca5; font:inherit; font-weight:700; }
.market-tabs button[aria-pressed="true"] { color:#ffebbd; background:linear-gradient(#6c4b2e,#483723); border-color:#d1a363; box-shadow:inset 0 1px #f7d39740; }
.market-utilities { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:4px 10px; margin:4px 0 12px; }
.market-utilities button { min-height:40px; padding:5px 2px; border:0; border-bottom:2px solid transparent; background:transparent; color:#c7c5b0; font:inherit; font-size:12px; }
.market-utilities button[aria-pressed="true"] { color:#f5cf91; border-bottom-color:#d1a363; }
.market-catalog button:focus-visible,.market-catalog summary:focus-visible { outline:2px solid #ffda91; outline-offset:3px; }
.market-catalog input,.market-catalog select { min-width:0; max-width:100%; font-size:16px; }
.market-search { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; padding:12px; border:1px solid #b7955c40; border-radius:12px; background:#0a1a1c; }
.market-search label { display:block; color:#d5c8b0; font-size:12px; }
.market-search-query > div { display:flex; gap:6px; margin-top:5px; }
.market-search-query input { flex:1; width:0; min-height:44px; padding:10px; }
.market-search-query button { flex:none; min-height:44px; padding:7px 12px; border:1px solid #af9466; border-radius:9px; background:#3b4d45; color:#fff0cc; font:inherit; }
.market-search .market-category-label { display:flex; align-items:center; gap:12px; }
.market-search select { flex:1; width:0; min-height:42px; padding:6px 10px; }
.market-catalog .economy-heading { align-items:center; margin:16px 0 6px; }
.market-catalog .economy-heading > div { min-width:0; }
.market-catalog .economy-heading h3 { margin:0; font-size:16px; }
.market-catalog .economy-heading p { margin:3px 0; color:#c6b9a4; font-size:11px; }
.market-catalog .economy-heading button { flex:none; min-height:44px; font:inherit; font-size:12px; }
.market-results-status { margin:6px 0 10px; color:#c3beac; font-size:11px; min-height:1.5em; }
.market-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:10px; }
.market-product { min-width:0; display:flex; flex-direction:column; align-self:stretch; padding:10px; border:1px solid #a98b5b65; border-radius:12px; background:linear-gradient(155deg,#1e3030,#0c1c1e); box-shadow:0 3px 10px #0003; overflow-wrap:anywhere; }
.market-product-art { position:relative; display:flex; align-items:center; justify-content:center; min-height:85px; margin:-2px -2px 8px; border-radius:8px; background:radial-gradient(ellipse,#7460462b,transparent 70%),#081719; }
.market-product-art .item-slot { margin:12px 0; }
.market-product-badge { position:absolute; right:3px; top:3px; padding:2px 5px; border:1px solid #b8a16c45; border-radius:4px; color:#ead3a4; background:#17211ee8; font-size:9px; line-height:1.4; }
.market-product-title { margin:0; min-height:2.8em; font-size:13px; line-height:1.45; color:#f7dbab; }
.market-product-meta { margin:5px 0; color:#ddcaa8; font-size:10px; }
.market-product-caption { margin:5px 0; min-height:1.6em; font-size:10px; color:#bfc5b6; }
.market-product-details { margin:2px 0 8px; color:#c9c3b4; font-size:11px; }
.market-product-details summary { min-height:36px; display:flex; align-items:center; cursor:pointer; color:#d9bf8e; }
.market-product-details summary::after { content:"＋"; margin-left:auto; }
.market-product-details[open] summary::after { content:"−"; }
.market-product-details p { margin:4px 0; line-height:1.6; }
.market-product-cost { display:flex; flex-direction:column; gap:2px; margin-top:auto; padding-top:8px; border-top:1px solid #b7955c35; }
.market-product-cost small { color:#bcb8a8; font-size:10px; }
.market-product-price { font-size:16px; font-variant-numeric:tabular-nums; line-height:1.5; color:#f7cf87; }
.market-product-unit { min-height:2.8em; margin-top:3px; color:#bdbba8; font-size:10px; }
.market-product-action { width:100%; min-height:44px; margin-top:9px; padding:7px; border:1px solid #d0a36b; border-radius:8px; color:#fff0c8; background:linear-gradient(#75502e,#4e3927); font:inherit; font-size:12px; font-weight:700; overflow-wrap:anywhere; }
.market-product-action[data-confirm="yes"],.market-product-action[data-confirm]:not([data-confirm=""]) { border-color:#eed19a; background:#4c6850; }
.market-product-cancel { min-height:36px; margin-top:4px; border:0; border-radius:6px; background:transparent; color:#d8cdb6; font:inherit; font-size:11px; }
.market-product-confirm { margin:8px 0 0; padding:6px; border-radius:6px; color:#ffe7b4; background:#354735; font-size:11px; line-height:1.6; }
.market-product .auction-bid-controls { margin-top:8px; }
.market-product .auction-bid-controls input { width:100%; min-height:44px; }
.market-empty { grid-column:1 / -1; margin:0; padding:28px 16px; border:1px dashed #ba925b66; border-radius:12px; background:#0a191b; color:#c6b9a4; font-size:13px; text-align:center; }
.market-sell-form { margin:12px 0; padding:0 12px 12px; border:1px solid #b7955c65; border-radius:12px; background:#152627; }
.market-sell-form:not([open]) { padding-bottom:0; }
.market-sell-form summary { display:flex; align-items:center; min-height:48px; color:#f3d19b; font-weight:700; cursor:pointer; }
.market-sell-form summary::after { content:"＋"; margin-left:auto; }
.market-sell-form[open] summary::after { content:"−"; }
.market-sell-form .field { display:block; }
.market-action-status { position:sticky; top:0; z-index:2; margin:10px 0; padding:10px; border:1px solid #d1a363; border-radius:8px; background:#233b30; color:#ffe2a8; font-size:12px; }
@media (max-width:360px) { .market-products { gap:7px; } .market-product { padding:8px; } .market-banner { padding:10px; } .market-banner h3 { font-size:21px; } .market-banner .economy-balance { font-size:12px; } .market-product-price { font-size:14px; } }

/* ==========================================================================
   MONTRA RADIAL 4-DIRECTIONAL KNOWLEDGE GRAPH
   ========================================================================== */
.kg-canvas-board.radial-4way {
  height: 460px;
}

.kg-center-class-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 12;
  pointer-events: none;
}

.kg-center-class-orb {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4cc, #f0b847 55%, #7a460c);
  border: 2.5px solid #fff;
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.75), inset 0 2px 5px rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  font-size: 26px;
  color: #1a1202;
  animation: kgClassPulse 3s ease-in-out infinite alternate;
}

@keyframes kgClassPulse {
  from {
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6), 0 0 0 0 rgba(255, 215, 0, 0.4);
    transform: scale(1);
  }
  to {
    box-shadow: 0 0 28px rgba(255, 215, 0, 0.95), 0 0 36px rgba(255, 170, 0, 0.5), 0 0 0 8px rgba(255, 215, 0, 0.15);
    transform: scale(1.04);
  }
}

.kg-center-class-title {
  font-size: 11px;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
  background: rgba(10, 16, 20, 0.88);
  padding: 2px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255, 215, 0, 0.45);
  white-space: nowrap;
}

.kg-center-class-sub {
  font-size: 9.5px;
  color: #d8c9a6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 6px;
  border-radius: 6px;
}

.kg-node-top {
  left: 50% !important;
  top: 17% !important;
}

.kg-node-bottom {
  left: 50% !important;
  top: 83% !important;
}

.kg-node-left {
  left: 20% !important;
  top: 50% !important;
}

.kg-node-right {
  left: 80% !important;
  top: 50% !important;
}

.kg-stream-badge {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 5;
  white-space: nowrap;
  background: rgba(10, 16, 20, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #e5d7ba;
}

.kg-stream-badge-top {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.kg-stream-badge-bottom {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.kg-stream-badge-left {
  left: 8px;
  top: 32%;
}

.kg-stream-badge-right {
  right: 8px;
  top: 32%;
}

/* Keep the restored layout readable at 320 px and keyboard/touch accessible. */
.kg-banner-left, .kg-banner-info { min-width: 0; }
.kg-banner-crest, .st-points-box { flex-shrink: 0; }
.kg-banner-title { overflow-wrap: anywhere; }
.kg-graph-help { margin: 2px 0; text-align: center; font-size: 11px; }
.radial-4way .kg-node {
  border: 0;
  background: none;
  color: inherit;
  min-height: 44px;
  min-width: 44px;
  width: 88px;
  box-shadow: none;
  font: inherit;
}
.radial-4way .kg-node:hover, .radial-4way .kg-node:focus-visible,
.radial-4way .kg-node:active { transform: translate(-50%, -50%); }
.radial-4way .kg-node:focus-visible { outline: 2px solid #7fe8ff; outline-offset: 2px; }
.radial-4way .kg-node-top { top: 21% !important; }
.radial-4way .kg-node-bottom { top: 79% !important; }
.radial-4way .kg-node-left { left: 16% !important; }
.radial-4way .kg-node-right { left: 84% !important; }
.radial-4way .kg-node-name { max-width: 84px; overflow-wrap: anywhere; }
.radial-4way .kg-center-class-title { max-width: 84px; white-space: normal; text-align: center; }
.radial-4way .kg-center-class-orb { animation: none; }
.radial-4way .kg-node-status { white-space: nowrap; }
.radial-4way .kg-stream-badge-left, .radial-4way .kg-stream-badge-right { top: 30%; }
@media (max-width: 380px) {
  .kg-banner { gap: 6px; padding: 9px 8px; }
  .kg-banner-left { gap: 6px; }
  .kg-banner-crest { width: 30px; height: 34px; font-size: 20px; }
  .kg-banner-title { font-size: 12px; letter-spacing: 0; }
  .radial-4way .kg-node { width: 80px; padding: 2px; }
  .radial-4way .kg-node-name { font-size: 10.5px; max-width: 76px; }
  .radial-4way .kg-center-class-title { max-width: 70px; padding: 2px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .radial-4way .kg-orb, .radial-4way .kg-edge { animation: none !important; transition: none; }
}
/* Keep the restored identity and quest above chat on short landscape screens. */
@media (orientation:landscape) and (max-height:520px) { .chat-box .cb-log { height:18dvh; max-height:94px; } }
/* ========================================================
   MONTRA High-Fidelity RPG Visual Item Art System
   ======================================================== */
.bag-slot[data-item-art] .bag-symbol {
  display: inline-block;
  width: 34px;
  height: 34px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  transition: transform 0.15s ease, filter 0.15s ease;
}
.bag-slot:hover[data-item-art] .bag-symbol {
  transform: scale(1.08);
  filter: drop-shadow(0 2px 6px rgba(255, 215, 0, 0.5));
}
#bagDetailItem .bag-slot[data-item-art] .bag-symbol {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
}
#equipWornItem .bag-slot[data-item-art] .bag-symbol {
  width: 38px;
  height: 38px;
}
.equip-candidate-slot[data-item-art] .bag-symbol {
  width: 32px;
  height: 32px;
}
.bag-slot[data-item-art="weapon_dual"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22bladeLeft%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2235%25%22 stop-color=%22%23b2ebf2%22/%3E %3Cstop offset=%2270%25%22 stop-color=%22%2300bcd4%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23006064%22/%3E %3C/linearGradient%3E %3ClinearGradient id=%22bladeRight%22 x1=%22100%25%22 y1=%220%25%22 x2=%220%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2235%25%22 stop-color=%22%23b2ebf2%22/%3E %3Cstop offset=%2270%25%22 stop-color=%22%2300bcd4%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23006064%22/%3E %3C/linearGradient%3E %3ClinearGradient id=%22goldHilt%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23ff8f00%22/%3E %3C/linearGradient%3E %3ClinearGradient id=%22cordRed%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ef5350%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23b71c1c%22/%3E %3C/linearGradient%3E %3Cfilter id=%22glowCyan%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E %3CfeGaussianBlur stdDeviation=%222%22 result=%22blur%22/%3E %3CfeComposite in=%22SourceGraphic%22 in2=%22blur%22 operator=%22over%22/%3E %3C/filter%3E %3C/defs%3E %3C%21-- Background Glow Aura --%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%2224%22 fill=%22%2300e5ff%22 opacity=%220.15%22 filter=%22url%28%23glowCyan%29%22/%3E %3C%21-- Left-to-Right Sword %28Blade from top-right to bottom-left%29 --%3E %3Cg filter=%22url%28%23glowCyan%29%22%3E %3C%21-- Blade 1 --%3E %3Cpath d=%22M52 10 C50 16%2C 42 28%2C 30 38 L25 33 C34 22%2C 46 12%2C 52 10 Z%22 fill=%22url%28%23bladeLeft%29%22/%3E %3Cpath d=%22M52 10 C51 14%2C 43 25%2C 30 38%22 stroke=%22%23ffffff%22 stroke-width=%221.2%22 fill=%22none%22/%3E %3C%21-- Guard 1 --%3E %3Cellipse cx=%2227%22 cy=%2236%22 rx=%226%22 ry=%222.5%22 transform=%22rotate%28-40 27 36%29%22 fill=%22url%28%23goldHilt%29%22/%3E %3C%21-- Hilt 1 --%3E %3Cpath d=%22M26 37 L14 49 L11 46 L23 34 Z%22 fill=%22url%28%23cordRed%29%22/%3E %3C%21-- Pommel 1 --%3E %3Ccircle cx=%2212%22 cy=%2248%22 r=%223.2%22 fill=%22url%28%23goldHilt%29%22/%3E %3C/g%3E %3C%21-- Right-to-Left Sword %28Blade from top-left to bottom-right%29 --%3E %3Cg filter=%22url%28%23glowCyan%29%22%3E %3C%21-- Blade 2 --%3E %3Cpath d=%22M12 10 C14 16%2C 22 28%2C 34 38 L39 33 C30 22%2C 18 12%2C 12 10 Z%22 fill=%22url%28%23bladeRight%29%22/%3E %3Cpath d=%22M12 10 C13 14%2C 21 25%2C 34 38%22 stroke=%22%23ffffff%22 stroke-width=%221.2%22 fill=%22none%22/%3E %3C%21-- Guard 2 --%3E %3Cellipse cx=%2237%22 cy=%2236%22 rx=%226%22 ry=%222.5%22 transform=%22rotate%2840 37 36%29%22 fill=%22url%28%23goldHilt%29%22/%3E %3C%21-- Hilt 2 --%3E %3Cpath d=%22M38 37 L50 49 L53 46 L41 34 Z%22 fill=%22url%28%23cordRed%29%22/%3E %3C%21-- Pommel 2 --%3E %3Ccircle cx=%2252%22 cy=%2248%22 r=%223.2%22 fill=%22url%28%23goldHilt%29%22/%3E %3C/g%3E %3C%21-- Center Clash Spark --%3E %3Cpolygon points=%2232%2C26 34%2C31 39%2C32 34%2C33 32%2C38 30%2C33 25%2C32 30%2C31%22 fill=%22%23fff9c4%22/%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%222.5%22 fill=%22%23ffffff%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="weapon_sword"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22swordBlade%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2225%25%22 stop-color=%22%23e0f7fa%22/%3E %3Cstop offset=%2260%25%22 stop-color=%22%234dd0e1%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%2300838f%22/%3E %3C/linearGradient%3E %3ClinearGradient id=%22swordGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23e65100%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Glowing Trail --%3E %3Cpath d=%22M54 8 C48 18%2C 36 32%2C 24 42%22 stroke=%22%2300e5ff%22 stroke-width=%226%22 opacity=%220.3%22 stroke-linecap=%22round%22 fill=%22none%22/%3E %3C%21-- Curved Blade --%3E %3Cpath d=%22M54 8 C51 18%2C 40 32%2C 25 43 L21 38 C34 26%2C 45 13%2C 54 8 Z%22 fill=%22url%28%23swordBlade%29%22/%3E %3Cpath d=%22M54 8 C50 19%2C 39 31%2C 24 42%22 stroke=%22%23ffffff%22 stroke-width=%221.5%22 fill=%22none%22/%3E %3C%21-- Golden Arcane Rune along blade --%3E %3Cpath d=%22M46 16 L43 19 L44 22 L40 26 L41 29%22 stroke=%22%23ffe082%22 stroke-width=%221.2%22 stroke-linecap=%22round%22 fill=%22none%22/%3E %3C%21-- Ornate Lotus Guard --%3E %3Cpath d=%22M21 38 C23 35%2C 29 40%2C 27 45 C25 48%2C 19 43%2C 21 38 Z%22 fill=%22url%28%23swordGold%29%22/%3E %3C%21-- Red Cord Hilt --%3E %3Cpath d=%22M22 43 L12 53 L9 50 L19 40 Z%22 fill=%22%23b71c1c%22/%3E %3Cline x1=%2219%22 y1=%2244%22 x2=%2216%22 y2=%2247%22 stroke=%22%23ffd54f%22 stroke-width=%221%22/%3E %3Cline x1=%2216%22 y1=%2247%22 x2=%2213%22 y2=%2250%22 stroke=%22%23ffd54f%22 stroke-width=%221%22/%3E %3C%21-- Golden Lotus Pommel %26 Blue Talisman --%3E %3Ccircle cx=%2210%22 cy=%2252%22 r=%223.5%22 fill=%22url%28%23swordGold%29%22/%3E %3Cpath d=%22M10 55 L7 60 L10 59 L13 60 Z%22 fill=%22%2300bcd4%22/%3E %3C%21-- Blade Sparkle --%3E %3Cpolygon points=%2250%2C11 52%2C14 55%2C14 52%2C16 51%2C19 49%2C16 46%2C15 49%2C13%22 fill=%22%23ffffff%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="weapon_glaive"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22crescentGlow%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%2380deea%22/%3E %3Cstop offset=%2280%25%22 stop-color=%22%230097a7%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23004d40%22/%3E %3C/linearGradient%3E %3ClinearGradient id=%22shaftBronze%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23d7ccc8%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%238d6e63%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%234e342e%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Long Shaft --%3E %3Cline x1=%2210%22 y1=%2256%22 x2=%2242%22 y2=%2224%22 stroke=%22url%28%23shaftBronze%29%22 stroke-width=%223.5%22 stroke-linecap=%22round%22/%3E %3Cline x1=%2210%22 y1=%2256%22 x2=%2242%22 y2=%2224%22 stroke=%22%23ffd54f%22 stroke-width=%220.8%22 stroke-dasharray=%222 4%22/%3E %3C%21-- Crescent Moon Blade --%3E %3Cpath d=%22M38 28 C45 16%2C 56 12%2C 58 8 C53 18%2C 48 28%2C 42 34 C36 29%2C 36 24%2C 38 28 Z%22 fill=%22url%28%23crescentGlow%29%22/%3E %3Cpath d=%22M58 8 C52 18%2C 47 29%2C 41 35%22 stroke=%22%23ffffff%22 stroke-width=%221.5%22 fill=%22none%22/%3E %3C%21-- Opposing Hook / Fang --%3E %3Cpath d=%22M40 24 C44 26%2C 45 28%2C 47 27 C45 23%2C 42 22%2C 40 24 Z%22 fill=%22%23b2ebf2%22/%3E %3C%21-- Ornate Golden Lotus Mount --%3E %3Ccircle cx=%2239%22 cy=%2227%22 r=%224.5%22 fill=%22%23ffb300%22/%3E %3Ccircle cx=%2239%22 cy=%2227%22 r=%222.2%22 fill=%22%23d32f2f%22/%3E %3C%21-- Crimson Tassels --%3E %3Cpath d=%22M37 29 C34 35%2C 30 38%2C 26 42%22 stroke=%22%23e53935%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 fill=%22none%22/%3E %3Cpath d=%22M38 31 C35 37%2C 33 42%2C 31 46%22 stroke=%22%23c62828%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 fill=%22none%22/%3E %3C%21-- Moon Sparkle --%3E %3Cpolygon points=%2256%2C7 57%2C10 60%2C11 57%2C12 56%2C15 55%2C12 52%2C11 55%2C10%22 fill=%22%23fff9c4%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="weapon_dagger"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22wavyBlade%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23b0bec5%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%2337474f%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Occult Violet Aura --%3E %3Cpath d=%22M50 12 Q42 16%2C 44 24 T36 36 L30 30 T38 18 Q40 10%2C 50 12 Z%22 fill=%22%23ab47bc%22 opacity=%220.2%22/%3E %3C%21-- Wavy Kris Blade --%3E %3Cpath d=%22M50 12 C44 16%2C 45 20%2C 42 24 C39 28%2C 42 32%2C 36 36 L30 30 C36 26%2C 33 22%2C 36 18 C39 14%2C 43 14%2C 50 12 Z%22 fill=%22url%28%23wavyBlade%29%22/%3E %3Cpath d=%22M50 12 C43 18%2C 43 22%2C 40 26 C37 30%2C 40 33%2C 34 34%22 stroke=%22%23e1bee7%22 stroke-width=%221%22 fill=%22none%22/%3E %3C%21-- Engraved Mystic Thai Runes --%3E %3Ccircle cx=%2241%22 cy=%2220%22 r=%221%22 fill=%22%23ffd54f%22/%3E %3Ccircle cx=%2237%22 cy=%2227%22 r=%221%22 fill=%22%23ffd54f%22/%3E %3C%21-- Carved Ivory/Wood Demon Hilt --%3E %3Cellipse cx=%2229%22 cy=%2233%22 rx=%225%22 ry=%223%22 transform=%22rotate%28-45 29 33%29%22 fill=%22%23ffb74d%22/%3E %3Cpath d=%22M27 35 L17 45 C15 47%2C 13 49%2C 15 52 C17 54%2C 21 52%2C 23 49 L31 39 Z%22 fill=%22%23fff3e0%22/%3E %3C%21-- Sacred Red String Binding --%3E %3Cline x1=%2226%22 y1=%2238%22 x2=%2229%22 y2=%2241%22 stroke=%22%23d32f2f%22 stroke-width=%221.5%22/%3E %3Cline x1=%2223%22 y1=%2241%22 x2=%2226%22 y2=%2244%22 stroke=%22%23d32f2f%22 stroke-width=%221.5%22/%3E %3Cline x1=%2220%22 y1=%2244%22 x2=%2223%22 y2=%2247%22 stroke=%22%23d32f2f%22 stroke-width=%221.5%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="weapon_wraps"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3CradialGradient id=%22wrapAura%22 cx=%2250%25%22 cy=%2250%25%22 r=%2250%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffd54f%22 stop-opacity=%220.3%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23ff8f00%22 stop-opacity=%220%22/%3E %3C/radialGradient%3E %3ClinearGradient id=%22ropeGrad%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23f5f5f5%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23cfd8dc%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Power Shockwave --%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%2226%22 fill=%22url%28%23wrapAura%29%22/%3E %3C%21-- Left Fist / Forearm --%3E %3Cg transform=%22translate%284%2C 2%29 rotate%2810 32 32%29%22%3E %3Crect x=%2214%22 y=%2224%22 width=%2216%22 height=%2220%22 rx=%224%22 fill=%22url%28%23ropeGrad%29%22 stroke=%22%2390a4ae%22 stroke-width=%221.2%22/%3E %3C%21-- Knuckle Ridges / Sacred Knots --%3E %3Ccircle cx=%2218%22 cy=%2222%22 r=%223.2%22 fill=%22%23fff%22 stroke=%22%23ffb300%22 stroke-width=%221.2%22/%3E %3Ccircle cx=%2223%22 cy=%2220%22 r=%223.2%22 fill=%22%23fff%22 stroke=%22%23ffb300%22 stroke-width=%221.2%22/%3E %3Ccircle cx=%2228%22 cy=%2222%22 r=%223.2%22 fill=%22%23fff%22 stroke=%22%23ffb300%22 stroke-width=%221.2%22/%3E %3C%21-- Rope coils --%3E %3Cline x1=%2214%22 y1=%2228%22 x2=%2230%22 y2=%2228%22 stroke=%22%2378909c%22 stroke-width=%221.2%22/%3E %3Cline x1=%2214%22 y1=%2233%22 x2=%2230%22 y2=%2233%22 stroke=%22%2378909c%22 stroke-width=%221.2%22/%3E %3Cline x1=%2214%22 y1=%2238%22 x2=%2230%22 y2=%2238%22 stroke=%22%2378909c%22 stroke-width=%221.2%22/%3E %3C/g%3E %3C%21-- Right Fist / Cross --%3E %3Cg transform=%22translate%2818%2C 6%29 rotate%28-20 32 32%29%22%3E %3Crect x=%2220%22 y=%2222%22 width=%2216%22 height=%2220%22 rx=%224%22 fill=%22url%28%23ropeGrad%29%22 stroke=%22%2390a4ae%22 stroke-width=%221.2%22/%3E %3Ccircle cx=%2224%22 cy=%2220%22 r=%223.2%22 fill=%22%23fff%22 stroke=%22%23ffb300%22 stroke-width=%221.2%22/%3E %3Ccircle cx=%2229%22 cy=%2218%22 r=%223.2%22 fill=%22%23fff%22 stroke=%22%23ffb300%22 stroke-width=%221.2%22/%3E %3Ccircle cx=%2234%22 cy=%2220%22 r=%223.2%22 fill=%22%23fff%22 stroke=%22%23ffb300%22 stroke-width=%221.2%22/%3E %3Cline x1=%2220%22 y1=%2226%22 x2=%2236%22 y2=%2226%22 stroke=%22%2378909c%22 stroke-width=%221.2%22/%3E %3Cline x1=%2220%22 y1=%2231%22 x2=%2236%22 y2=%2231%22 stroke=%22%2378909c%22 stroke-width=%221.2%22/%3E %3Cline x1=%2220%22 y1=%2236%22 x2=%2236%22 y2=%2236%22 stroke=%22%2378909c%22 stroke-width=%221.2%22/%3E %3C/g%3E %3C%21-- Sparking Electric Arc --%3E %3Cpath d=%22M30 14 L34 22 L31 24 L37 32%22 stroke=%22%23ffe082%22 stroke-width=%221.8%22 fill=%22none%22 stroke-linecap=%22round%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="weapon_staff"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22orbGlow%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%2300e5ff%22/%3E %3Cstop offset=%2280%25%22 stop-color=%22%237c4dff%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23311b92%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Wooden Staff --%3E %3Cline x1=%2218%22 y1=%2256%22 x2=%2238%22 y2=%2226%22 stroke=%22%235d4037%22 stroke-width=%223.5%22 stroke-linecap=%22round%22/%3E %3C%21-- Gold Rings on Staff --%3E %3Ccircle cx=%2233%22 cy=%2233%22 r=%222.5%22 fill=%22%23ffd54f%22/%3E %3Ccircle cx=%2227%22 cy=%2242%22 r=%222.5%22 fill=%22%23ffd54f%22/%3E %3C%21-- Golden Trident Head --%3E %3Cpath d=%22M34 26 C30 22%2C 28 16%2C 29 12 C32 16%2C 36 21%2C 38 23 Z%22 fill=%22%23ffb300%22/%3E %3Cpath d=%22M40 24 C44 20%2C 48 18%2C 52 17 C48 21%2C 45 24%2C 42 27 Z%22 fill=%22%23ffb300%22/%3E %3Cpath d=%22M38 24 L42 13 L44 14 L39 26 Z%22 fill=%22%23ffd54f%22/%3E %3C%21-- Floating Astral Orb --%3E %3Ccircle cx=%2241%22 cy=%2216%22 r=%226%22 fill=%22url%28%23orbGlow%29%22/%3E %3Cellipse cx=%2241%22 cy=%2216%22 rx=%229%22 ry=%223.5%22 transform=%22rotate%28-30 41 16%29%22 fill=%22none%22 stroke=%22%2380d8ff%22 stroke-width=%221%22 opacity=%220.8%22/%3E %3Ccircle cx=%2240%22 cy=%2214%22 r=%221.8%22 fill=%22%23ffffff%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="armor_chest"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22goldPlate%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff9c4%22/%3E %3Cstop offset=%2235%25%22 stop-color=%22%23fbc02d%22/%3E %3Cstop offset=%2275%25%22 stop-color=%22%23f57f17%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23bc5100%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Main Cuirass Torso --%3E %3Cpath d=%22M20 16 L25 12 L39 12 L44 16 C48 22%2C 46 36%2C 42 46 L32 54 L22 46 C18 36%2C 16 22%2C 20 16 Z%22 fill=%22url%28%23goldPlate%29%22 stroke=%22%23ffe082%22 stroke-width=%221.2%22/%3E %3C%21-- Neck / Collar Trim --%3E %3Cpath d=%22M26 12 C28 18%2C 36 18%2C 38 12%22 stroke=%22%23fff%22 stroke-width=%221.5%22 fill=%22none%22/%3E %3C%21-- Pectoral / Chest Plate Lines --%3E %3Cpath d=%22M22 24 C26 22%2C 30 24%2C 32 29 C34 24%2C 38 22%2C 42 24%22 stroke=%22%23ff6f00%22 stroke-width=%221.2%22 fill=%22none%22/%3E %3C%21-- Center Medallion %28Ruby Sun%29 --%3E %3Ccircle cx=%2232%22 cy=%2228%22 r=%224.5%22 fill=%22%23d50000%22 stroke=%22%23ffd54f%22 stroke-width=%221.5%22/%3E %3Ccircle cx=%2231%22 cy=%2227%22 r=%221.5%22 fill=%22%23ff8a80%22/%3E %3C%21-- Abdominal Segment Plates --%3E %3Cpath d=%22M26 36 C28 34%2C 36 34%2C 38 36%22 stroke=%22%23ff6f00%22 stroke-width=%221.2%22 fill=%22none%22/%3E %3Cpath d=%22M27 42 C29 40%2C 35 40%2C 37 42%22 stroke=%22%23ff6f00%22 stroke-width=%221.2%22 fill=%22none%22/%3E %3C%21-- Pauldrons %28Shoulder Guards%29 --%3E %3Cpath d=%22M14 18 C16 14%2C 22 14%2C 22 18 C20 25%2C 14 26%2C 14 18 Z%22 fill=%22url%28%23goldPlate%29%22/%3E %3Cpath d=%22M50 18 C48 14%2C 42 14%2C 42 18 C44 25%2C 50 26%2C 50 18 Z%22 fill=%22url%28%23goldPlate%29%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="armor_head"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22crownGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fffde7%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%2285%25%22 stop-color=%22%23ff8f00%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Sacred Talisman Ribbons / Cord flowing down --%3E %3Cpath d=%22M22 36 C18 42%2C 16 50%2C 18 56%22 stroke=%22%23ffffff%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E %3Cpath d=%22M42 36 C46 42%2C 48 50%2C 46 56%22 stroke=%22%23ffffff%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22/%3E %3C%21-- Crown Headband Base --%3E %3Cellipse cx=%2232%22 cy=%2236%22 rx=%2216%22 ry=%226%22 fill=%22url%28%23crownGold%29%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E %3C%21-- Headband Gems --%3E %3Ccircle cx=%2232%22 cy=%2236%22 r=%222.2%22 fill=%22%2300bcd4%22/%3E %3Ccircle cx=%2224%22 cy=%2235%22 r=%221.8%22 fill=%22%23e91e63%22/%3E %3Ccircle cx=%2240%22 cy=%2235%22 r=%221.8%22 fill=%22%23e91e63%22/%3E %3C%21-- Tiered Spire / Peak %28%E0%B8%8A%E0%B8%8E%E0%B8%B2%E0%B8%A2%E0%B8%AD%E0%B8%94%E0%B9%81%E0%B8%AB%E0%B8%A5%E0%B8%A1%29 --%3E %3Cpath d=%22M22 33 C26 26%2C 28 20%2C 31 10 L33 10 C36 20%2C 38 26%2C 42 33 Z%22 fill=%22url%28%23crownGold%29%22/%3E %3C%21-- Tier rings --%3E %3Cellipse cx=%2232%22 cy=%2227%22 rx=%226%22 ry=%222%22 fill=%22%23ffe082%22/%3E %3Cellipse cx=%2232%22 cy=%2220%22 rx=%223.5%22 ry=%221.2%22 fill=%22%23ffe082%22/%3E %3C%21-- Spire Lotus Finial / Sparkle --%3E %3Ccircle cx=%2232%22 cy=%229%22 r=%222.2%22 fill=%22%23ffffff%22/%3E %3Cpolygon points=%2232%2C4 33%2C8 36%2C9 33%2C10 32%2C14 31%2C10 28%2C9 31%2C8%22 fill=%22%23ffd54f%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="armor_legs"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22greaveGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23fbc02d%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23e65100%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Left Greave --%3E %3Cg%3E %3Cpath d=%22M18 16 C22 14%2C 27 16%2C 26 22 L24 46 C24 49%2C 18 49%2C 18 46 L17 22 C16 18%2C 17 17%2C 18 16 Z%22 fill=%22url%28%23greaveGold%29%22/%3E %3C%21-- Knee Cop / Kanok flame motif --%3E %3Ccircle cx=%2222%22 cy=%2220%22 r=%224.5%22 fill=%22%23ffe082%22 stroke=%22%23ff6f00%22 stroke-width=%221%22/%3E %3Ccircle cx=%2222%22 cy=%2220%22 r=%222%22 fill=%22%23d32f2f%22/%3E %3C%21-- Shin Plate Ridge --%3E %3Cline x1=%2221%22 y1=%2225%22 x2=%2221%22 y2=%2244%22 stroke=%22%23ffffff%22 stroke-width=%221.2%22/%3E %3C/g%3E %3C%21-- Right Greave --%3E %3Cg%3E %3Cpath d=%22M46 16 C42 14%2C 37 16%2C 38 22 L40 46 C40 49%2C 46 49%2C 46 46 L47 22 C48 18%2C 47 17%2C 46 16 Z%22 fill=%22url%28%23greaveGold%29%22/%3E %3Ccircle cx=%2242%22 cy=%2220%22 r=%224.5%22 fill=%22%23ffe082%22 stroke=%22%23ff6f00%22 stroke-width=%221%22/%3E %3Ccircle cx=%2242%22 cy=%2220%22 r=%222%22 fill=%22%23d32f2f%22/%3E %3Cline x1=%2243%22 y1=%2225%22 x2=%2243%22 y2=%2244%22 stroke=%22%23ffffff%22 stroke-width=%221.2%22/%3E %3C/g%3E %3C%21-- Red Wrap Straps --%3E %3Cline x1=%2217%22 y1=%2232%22 x2=%2225%22 y2=%2234%22 stroke=%22%23b71c1c%22 stroke-width=%221.5%22/%3E %3Cline x1=%2239%22 y1=%2234%22 x2=%2247%22 y2=%2232%22 stroke=%22%23b71c1c%22 stroke-width=%221.5%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="armor_boots"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22bootLeather%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%238d6e63%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%234e342e%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23271c19%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Left Boot --%3E %3Cg%3E %3Cpath d=%22M14 18 L24 18 L23 36 L27 44 C27 48%2C 11 48%2C 12 44 L14 36 Z%22 fill=%22url%28%23bootLeather%29%22/%3E %3C%21-- Upturned Toe --%3E %3Cpath d=%22M12 44 C11 48%2C 25 48%2C 26 44 L25 42 L13 42 Z%22 fill=%22%233e2723%22/%3E %3C%21-- Golden Toe Cap --%3E %3Cpath d=%22M12 44 C11 47%2C 16 47%2C 17 44 Z%22 fill=%22%23ffd54f%22/%3E %3C%21-- Golden Cuff / Rim --%3E %3Crect x=%2213%22 y=%2216%22 width=%2212%22 height=%223.5%22 rx=%221%22 fill=%22%23ffb300%22/%3E %3C%21-- Buckle --%3E %3Ccircle cx=%2221%22 cy=%2228%22 r=%222%22 fill=%22%23ffd54f%22/%3E %3C/g%3E %3C%21-- Right Boot --%3E %3Cg transform=%22translate%2824%2C 0%29%22%3E %3Cpath d=%22M14 18 L24 18 L23 36 L27 44 C27 48%2C 11 48%2C 12 44 L14 36 Z%22 fill=%22url%28%23bootLeather%29%22/%3E %3Cpath d=%22M12 44 C11 48%2C 25 48%2C 26 44 L25 42 L13 42 Z%22 fill=%22%233e2723%22/%3E %3Cpath d=%22M12 44 C11 47%2C 16 47%2C 17 44 Z%22 fill=%22%23ffd54f%22/%3E %3Crect x=%2213%22 y=%2216%22 width=%2212%22 height=%223.5%22 rx=%221%22 fill=%22%23ffb300%22/%3E %3Ccircle cx=%2221%22 cy=%2228%22 r=%222%22 fill=%22%23ffd54f%22/%3E %3C/g%3E %3C/svg%3E"); }
.bag-slot[data-item-art="armor_belt"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22beltGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%23fbc02d%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23e65100%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Red / Gold Silk Sash Drapery --%3E %3Cpath d=%22M30 32 L26 54 L34 54 L32 32 Z%22 fill=%22%23c62828%22/%3E %3Cpath d=%22M32 32 L34 54 L38 52 L34 32 Z%22 fill=%22%23e53935%22/%3E %3Cline x1=%2226%22 y1=%2253%22 x2=%2238%22 y2=%2253%22 stroke=%22%23ffd54f%22 stroke-width=%222%22/%3E %3C%21-- Segmented Gold Belt --%3E %3Cpath d=%22M10 28 C16 33%2C 48 33%2C 54 28 L53 23 C47 28%2C 17 28%2C 11 23 Z%22 fill=%22url%28%23beltGold%29%22 stroke=%22%23ff8f00%22 stroke-width=%221%22/%3E %3C%21-- Large Lotus Centerpiece Buckle %28%E0%B8%9B%E0%B8%B1%E0%B9%89%E0%B8%99%E0%B9%80%E0%B8%AB%E0%B8%99%E0%B9%88%E0%B8%87%29 --%3E %3Ccircle cx=%2232%22 cy=%2228%22 r=%228%22 fill=%22url%28%23beltGold%29%22 stroke=%22%23ffffff%22 stroke-width=%221.2%22/%3E %3Cpolygon points=%2232%2C22 34%2C26 38%2C28 34%2C30 32%2C34 30%2C30 26%2C28 30%2C26%22 fill=%22%23ffe082%22/%3E %3C%21-- Glowing Emerald Center Gem --%3E %3Ccircle cx=%2232%22 cy=%2228%22 r=%223.5%22 fill=%22%2300e676%22 stroke=%22%231b5e20%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2231%22 cy=%2227%22 r=%221.2%22 fill=%22%23ffffff%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="acc_ring"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22ringGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fffde7%22/%3E %3Cstop offset=%2245%25%22 stop-color=%22%23fbc02d%22/%3E %3Cstop offset=%2285%25%22 stop-color=%22%23ff8f00%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23b26a00%22/%3E %3C/linearGradient%3E %3ClinearGradient id=%22gemBlue%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2230%25%22 stop-color=%22%2340c4ff%22/%3E %3Cstop offset=%2270%25%22 stop-color=%22%230288d1%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%2301579b%22/%3E %3C/linearGradient%3E %3Cfilter id=%22ringGlow%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E %3CfeGaussianBlur stdDeviation=%221.5%22 result=%22blur%22/%3E %3CfeComposite in=%22SourceGraphic%22 in2=%22blur%22 operator=%22over%22/%3E %3C/filter%3E %3C/defs%3E %3C%21-- Circular Band %28Perspective view%29 --%3E %3Cellipse cx=%2232%22 cy=%2238%22 rx=%2216%22 ry=%2212%22 fill=%22none%22 stroke=%22url%28%23ringGold%29%22 stroke-width=%224.5%22/%3E %3Cellipse cx=%2232%22 cy=%2238%22 rx=%2216%22 ry=%2212%22 fill=%22none%22 stroke=%22%23fff8e1%22 stroke-width=%221%22/%3E %3C%21-- Claw Setting Platform --%3E %3Cpolygon points=%2226%2C26 38%2C26 35%2C32 29%2C32%22 fill=%22url%28%23ringGold%29%22/%3E %3C%21-- Large Diamond/Sapphire Gemstone --%3E %3Cpolygon points=%2232%2C14 42%2C22 38%2C28 26%2C28 22%2C22%22 fill=%22url%28%23gemBlue%29%22 filter=%22url%28%23ringGlow%29%22 stroke=%22%23e1f5fe%22 stroke-width=%221%22/%3E %3C%21-- Gem Facet Reflections --%3E %3Cpolygon points=%2232%2C14 36%2C22 28%2C22%22 fill=%22%23ffffff%22 opacity=%220.6%22/%3E %3Cpolygon points=%2232%2C14 42%2C22 36%2C22%22 fill=%22%2380d8ff%22 opacity=%220.4%22/%3E %3C%21-- Radiant 4-Point Star Glint --%3E %3Cpolygon points=%2232%2C10 33%2C13 36%2C14 33%2C15 32%2C18 31%2C15 28%2C14 31%2C13%22 fill=%22%23ffffff%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="acc_amulet"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22takrutBrass%22 x1=%220%25%22 y1=%220%25%22 x2=%220%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%23fbc02d%22/%3E %3Cstop offset=%2280%25%22 stop-color=%22%23ff8f00%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%234e342e%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Golden Beaded Chain --%3E %3Cpath d=%22M12 10 C18 24%2C 26 34%2C 32 38 C38 34%2C 46 24%2C 52 10%22 stroke=%22%23ffd54f%22 stroke-width=%222.5%22 stroke-dasharray=%223 2%22 fill=%22none%22/%3E %3C%21-- Cylindrical Takrut Tube %28Horizontal talisman%29 --%3E %3Cg transform=%22translate%2814%2C 34%29%22%3E %3Crect x=%220%22 y=%220%22 width=%2236%22 height=%2212%22 rx=%223%22 fill=%22url%28%23takrutBrass%29%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E %3C%21-- End Caps --%3E %3Cellipse cx=%222%22 cy=%226%22 rx=%222%22 ry=%225.5%22 fill=%22%23ffa000%22/%3E %3Cellipse cx=%2234%22 cy=%226%22 rx=%222%22 ry=%225.5%22 fill=%22%23ffa000%22/%3E %3C%21-- Sacred Red String Bindings %28Crossed cord around tube%29 --%3E %3Cline x1=%2210%22 y1=%220%22 x2=%2210%22 y2=%2212%22 stroke=%22%23d32f2f%22 stroke-width=%222%22/%3E %3Cline x1=%2226%22 y1=%220%22 x2=%2226%22 y2=%2212%22 stroke=%22%23d32f2f%22 stroke-width=%222%22/%3E %3C%21-- Inscribed Yantra glyph --%3E %3Ccircle cx=%2218%22 cy=%226%22 r=%222.5%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E %3Cline x1=%2218%22 y1=%222%22 x2=%2218%22 y2=%2210%22 stroke=%22%23fff%22 stroke-width=%220.8%22/%3E %3C/g%3E %3C%21-- Golden Amulet Medal Dropping Down --%3E %3Ccircle cx=%2232%22 cy=%2252%22 r=%225%22 fill=%22%23ffb300%22 stroke=%22%23ffd54f%22 stroke-width=%221%22/%3E %3Ccircle cx=%2232%22 cy=%2252%22 r=%222%22 fill=%22%23d32f2f%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="potion_health"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3CradialGradient id=%22healGlow%22 cx=%2250%25%22 cy=%2260%25%22 r=%2250%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ff1744%22 stop-opacity=%220.4%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23b71c1c%22 stop-opacity=%220%22/%3E %3C/radialGradient%3E %3CradialGradient id=%22potionRed%22 cx=%2238%25%22 cy=%2258%25%22 r=%2255%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ff8a80%22/%3E %3Cstop offset=%2235%25%22 stop-color=%22%23ff1744%22/%3E %3Cstop offset=%2275%25%22 stop-color=%22%23d50000%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23880e4f%22/%3E %3C/radialGradient%3E %3C/defs%3E %3C%21-- Radiant Aura --%3E %3Ccircle cx=%2232%22 cy=%2238%22 r=%2222%22 fill=%22url%28%23healGlow%29%22/%3E %3C%21-- Glass Flask Body --%3E %3Cpath d=%22M26 22 L26 16 L38 16 L38 22 C46 26%2C 50 36%2C 48 46 C46 54%2C 38 56%2C 32 56 C26 56%2C 18 54%2C 16 46 C14 36%2C 18 26%2C 26 22 Z%22 fill=%22%23263238%22 opacity=%220.4%22/%3E %3C%21-- Liquid Fill inside bottle --%3E %3Cpath d=%22M18 42 C17 38%2C 20 32%2C 28 32 C38 32%2C 44 36%2C 46 42 C47 48%2C 42 54%2C 32 54 C22 54%2C 17 48%2C 18 42 Z%22 fill=%22url%28%23potionRed%29%22/%3E %3C%21-- Rising Magic Carbonation Bubbles --%3E %3Ccircle cx=%2228%22 cy=%2246%22 r=%222.2%22 fill=%22%23ffcdd2%22 opacity=%220.8%22/%3E %3Ccircle cx=%2236%22 cy=%2240%22 r=%221.6%22 fill=%22%23ffcdd2%22 opacity=%220.8%22/%3E %3Ccircle cx=%2232%22 cy=%2236%22 r=%221.2%22 fill=%22%23ffcdd2%22 opacity=%220.9%22/%3E %3C%21-- Glass Reflection Arc --%3E %3Cpath d=%22M21 28 C18 34%2C 18 44%2C 21 50%22 stroke=%22%23ffffff%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22 opacity=%220.6%22/%3E %3C%21-- Bottle Neck %26 Rim --%3E %3Crect x=%2225%22 y=%2215%22 width=%2214%22 height=%227%22 rx=%221.5%22 fill=%22%23eceff1%22 opacity=%220.5%22 stroke=%22%23cfd8dc%22 stroke-width=%221%22/%3E %3C%21-- Wooden Cork Stopper --%3E %3Cpolygon points=%2227%2C15 37%2C15 36%2C9 28%2C9%22 fill=%22%238d6e63%22 stroke=%22%235d4037%22 stroke-width=%221%22/%3E %3C%21-- Red Healing Sparkle --%3E %3Cpolygon points=%2232%2C27 33%2C29 35%2C30 33%2C31 32%2C33 31%2C31 29%2C30 31%2C29%22 fill=%22%23ffffff%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="potion_mana"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3CradialGradient id=%22manaGlow%22 cx=%2250%25%22 cy=%2260%25%22 r=%2250%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%2300e5ff%22 stop-opacity=%220.4%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%230d47a1%22 stop-opacity=%220%22/%3E %3C/radialGradient%3E %3CradialGradient id=%22potionBlue%22 cx=%2238%25%22 cy=%2258%25%22 r=%2255%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%2380d8ff%22/%3E %3Cstop offset=%2235%25%22 stop-color=%22%2300b0ff%22/%3E %3Cstop offset=%2275%25%22 stop-color=%22%230091ea%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%2301579b%22/%3E %3C/radialGradient%3E %3C/defs%3E %3C%21-- Aura --%3E %3Ccircle cx=%2232%22 cy=%2238%22 r=%2222%22 fill=%22url%28%23manaGlow%29%22/%3E %3C%21-- Diamond Faceted Bottle Contour --%3E %3Cpolygon points=%2232%2C18 44%2C28 46%2C46 32%2C56 18%2C46 20%2C28%22 fill=%22%231a237e%22 opacity=%220.4%22/%3E %3C%21-- Blue Mana Liquid --%3E %3Cpolygon points=%2232%2C30 42%2C36 44%2C46 32%2C54 20%2C46 22%2C36%22 fill=%22url%28%23potionBlue%29%22/%3E %3C%21-- Facet Edge Lines %26 Sparkles --%3E %3Cline x1=%2232%22 y1=%2230%22 x2=%2232%22 y2=%2254%22 stroke=%22%23ffffff%22 stroke-width=%221%22 opacity=%220.6%22/%3E %3Ccircle cx=%2230%22 cy=%2242%22 r=%221.8%22 fill=%22%23e0f7fa%22 opacity=%220.9%22/%3E %3Ccircle cx=%2236%22 cy=%2238%22 r=%221.2%22 fill=%22%23e0f7fa%22 opacity=%220.9%22/%3E %3C%21-- Bottle Neck %26 Golden Crystal Stopper --%3E %3Crect x=%2228%22 y=%2216%22 width=%228%22 height=%226%22 fill=%22%23ffd54f%22/%3E %3Cpolygon points=%2232%2C8 37%2C16 27%2C16%22 fill=%22%23ffb300%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E %3C%21-- Mana Star Glint --%3E %3Cpolygon points=%2232%2C24 33%2C26 35%2C27 33%2C28 32%2C30 31%2C28 29%2C27 31%2C26%22 fill=%22%23ffffff%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="mat_shard"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22shardJade%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23e0f2f1%22/%3E %3Cstop offset=%2230%25%22 stop-color=%22%234db6ac%22/%3E %3Cstop offset=%2275%25%22 stop-color=%22%2300897b%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23004d40%22/%3E %3C/linearGradient%3E %3Cfilter id=%22shardGlow%22 x=%22-20%25%22 y=%22-20%25%22 width=%22140%25%22 height=%22140%25%22%3E %3CfeGaussianBlur stdDeviation=%222%22 result=%22blur%22/%3E %3CfeComposite in=%22SourceGraphic%22 in2=%22blur%22 operator=%22over%22/%3E %3C/filter%3E %3C/defs%3E %3C%21-- Background Glow --%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%2222%22 fill=%22%2364ffda%22 opacity=%220.25%22 filter=%22url%28%23shardGlow%29%22/%3E %3C%21-- Fractured Relic Shard --%3E %3Cpolygon points=%2232%2C10 48%2C22 44%2C48 28%2C54 16%2C40 22%2C18%22 fill=%22url%28%23shardJade%29%22 stroke=%22%23a7ffeb%22 stroke-width=%221.5%22/%3E %3C%21-- Golden Rune Fracture Veins --%3E %3Cpath d=%22M32 10 L34 26 L44 48 M34 26 L16 40 M34 26 L28 54%22 stroke=%22%23ffd700%22 stroke-width=%221.8%22 fill=%22none%22/%3E %3C%21-- Engraved Ancient Thai Rune Glyph inside shard --%3E %3Ccircle cx=%2234%22 cy=%2226%22 r=%223.5%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.2%22/%3E %3Ccircle cx=%2234%22 cy=%2226%22 r=%221.5%22 fill=%22%23ffe57f%22/%3E %3C%21-- Floating Micro Fragments --%3E %3Cpolygon points=%2248%2C16 52%2C18 50%2C22 46%2C20%22 fill=%22%2380cbc4%22/%3E %3Cpolygon points=%2214%2C24 16%2C28 12%2C30 10%2C26%22 fill=%22%2380cbc4%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="mat_metal"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22ironIngot%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23cfd8dc%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%2390a4ae%22/%3E %3Cstop offset=%2280%25%22 stop-color=%22%23546e7a%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23263238%22/%3E %3C/linearGradient%3E %3ClinearGradient id=%22goldIngot%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fffde7%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%2285%25%22 stop-color=%22%23ff8f00%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Lower Iron Ingot --%3E %3Cg transform=%22translate%2810%2C 30%29%22%3E %3Cpolygon points=%226%2C0 38%2C0 44%2C16 0%2C16%22 fill=%22url%28%23ironIngot%29%22 stroke=%22%23eceff1%22 stroke-width=%221%22/%3E %3Cpolygon points=%2238%2C0 44%2C16 44%2C20 38%2C4%22 fill=%22%2337474f%22/%3E %3C%21-- Ingot bevel highlight --%3E %3Cline x1=%226%22 y1=%220%22 x2=%2238%22 y2=%220%22 stroke=%22%23ffffff%22 stroke-width=%221.5%22/%3E %3C/g%3E %3C%21-- Upper Golden Ingot --%3E %3Cg transform=%22translate%2816%2C 16%29%22%3E %3Cpolygon points=%226%2C0 32%2C0 36%2C14 0%2C14%22 fill=%22url%28%23goldIngot%29%22 stroke=%22%23fff8e1%22 stroke-width=%221%22/%3E %3C%21-- Blacksmith Stamp %28Anvil/Hammer mark%29 --%3E %3Cpolygon points=%2219%2C5 21%2C3 23%2C5 22%2C7 20%2C7%22 fill=%22%23e65100%22/%3E %3Cline x1=%226%22 y1=%220%22 x2=%2232%22 y2=%220%22 stroke=%22%23ffffff%22 stroke-width=%221.5%22/%3E %3C/g%3E %3C%21-- Metal Sparkle --%3E %3Cpolygon points=%2246%2C14 47%2C16 49%2C17 47%2C18 46%2C20 45%2C18 43%2C17 45%2C16%22 fill=%22%23ffffff%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="mat_wood"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22barkGrad%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%220%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%233e2723%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%235d4037%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23271c19%22/%3E %3C/linearGradient%3E %3CradialGradient id=%22ringWood%22 cx=%2250%25%22 cy=%2250%25%22 r=%2250%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffe082%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%23ffb74d%22/%3E %3Cstop offset=%2285%25%22 stop-color=%22%238d6e63%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%234e342e%22/%3E %3C/radialGradient%3E %3C/defs%3E %3C%21-- Back Log --%3E %3Cg transform=%22translate%286%2C 14%29%22%3E %3Crect x=%2214%22 y=%224%22 width=%2234%22 height=%2218%22 rx=%222%22 fill=%22url%28%23barkGrad%29%22/%3E %3Cellipse cx=%2214%22 cy=%2213%22 rx=%226%22 ry=%229%22 fill=%22url%28%23ringWood%29%22/%3E %3C/g%3E %3C%21-- Front Log --%3E %3Cg transform=%22translate%282%2C 28%29%22%3E %3Crect x=%2216%22 y=%224%22 width=%2236%22 height=%2220%22 rx=%223%22 fill=%22url%28%23barkGrad%29%22/%3E %3Cellipse cx=%2216%22 cy=%2214%22 rx=%227%22 ry=%2210%22 fill=%22url%28%23ringWood%29%22/%3E %3C%21-- Concentric Growth Rings --%3E %3Cellipse cx=%2216%22 cy=%2214%22 rx=%224.5%22 ry=%226.5%22 fill=%22none%22 stroke=%22%236d4c41%22 stroke-width=%221%22/%3E %3Cellipse cx=%2216%22 cy=%2214%22 rx=%222%22 ry=%223%22 fill=%22none%22 stroke=%22%236d4c41%22 stroke-width=%221%22/%3E %3Ccircle cx=%2216%22 cy=%2214%22 r=%221.2%22 fill=%22%23ffd54f%22/%3E %3C/g%3E %3C%21-- Golden Resin Drop --%3E %3Ccircle cx=%2236%22 cy=%2238%22 r=%222.2%22 fill=%22%23ffd54f%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="mat_herb"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22petalPink%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2235%25%22 stop-color=%22%23f48fb1%22/%3E %3Cstop offset=%2275%25%22 stop-color=%22%23e91e63%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23880e4f%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Green Leaves beneath --%3E %3Cpath d=%22M16 42 C22 36%2C 32 38%2C 32 46 C24 50%2C 16 46%2C 16 42 Z%22 fill=%22%232e7d32%22/%3E %3Cpath d=%22M48 42 C42 36%2C 32 38%2C 32 46 C40 50%2C 48 46%2C 48 42 Z%22 fill=%22%23388e3c%22/%3E %3C%21-- Outer Petals --%3E %3Cpath d=%22M20 34 C16 26%2C 24 18%2C 32 26 C28 32%2C 22 36%2C 20 34 Z%22 fill=%22url%28%23petalPink%29%22/%3E %3Cpath d=%22M44 34 C48 26%2C 40 18%2C 32 26 C36 32%2C 42 36%2C 44 34 Z%22 fill=%22url%28%23petalPink%29%22/%3E %3C%21-- Center Main Petal --%3E %3Cpath d=%22M32 14 C27 22%2C 27 34%2C 32 40 C37 34%2C 37 22%2C 32 14 Z%22 fill=%22url%28%23petalPink%29%22 stroke=%22%23fff%22 stroke-width=%220.8%22/%3E %3C%21-- Golden Stamen Core --%3E %3Ccircle cx=%2232%22 cy=%2234%22 r=%223.5%22 fill=%22%23ffd54f%22/%3E %3C%21-- Shimmering Golden Pollen --%3E %3Ccircle cx=%2228%22 cy=%2222%22 r=%221.2%22 fill=%22%23ffe082%22/%3E %3Ccircle cx=%2236%22 cy=%2220%22 r=%221.4%22 fill=%22%23ffe082%22/%3E %3Ccircle cx=%2232%22 cy=%2210%22 r=%221.6%22 fill=%22%23ffffff%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="mat_soul"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3CradialGradient id=%22soulCore%22 cx=%2250%25%22 cy=%2250%25%22 r=%2250%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2225%25%22 stop-color=%22%23e040fb%22/%3E %3Cstop offset=%2260%25%22 stop-color=%22%237c4dff%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%2318ffff%22 stop-opacity=%220%22/%3E %3C/radialGradient%3E %3Cfilter id=%22soulBlur%22 x=%22-30%25%22 y=%22-30%25%22 width=%22160%25%22 height=%22160%25%22%3E %3CfeGaussianBlur stdDeviation=%223%22 result=%22blur%22/%3E %3CfeComposite in=%22SourceGraphic%22 in2=%22blur%22 operator=%22over%22/%3E %3C/filter%3E %3C/defs%3E %3C%21-- Outer Plasma Halo --%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%2222%22 fill=%22%237c4dff%22 opacity=%220.3%22 filter=%22url%28%23soulBlur%29%22/%3E %3C%21-- Swirling Flame Tendrils --%3E %3Cpath d=%22M32 12 C42 16%2C 50 26%2C 44 38 C38 50%2C 22 50%2C 18 36 C14 24%2C 22 16%2C 32 12 Z%22 fill=%22url%28%23soulCore%29%22/%3E %3Cpath d=%22M32 18 C38 22%2C 42 28%2C 38 34 C34 40%2C 26 40%2C 24 34 C22 28%2C 26 22%2C 32 18 Z%22 fill=%22%23ffffff%22 opacity=%220.8%22/%3E %3C%21-- Orbiting Soul Sparks --%3E %3Ccircle cx=%2220%22 cy=%2222%22 r=%222%22 fill=%22%2318ffff%22/%3E %3Ccircle cx=%2245%22 cy=%2240%22 r=%221.8%22 fill=%22%23e040fb%22/%3E %3Ccircle cx=%2238%22 cy=%2218%22 r=%221.5%22 fill=%22%23ffffff%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="cat_seal"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22sealGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fffde7%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%2285%25%22 stop-color=%22%23ff8f00%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Eight Petal Flame Halo %28%E0%B8%A2%E0%B8%B1%E0%B8%99%E0%B8%95%E0%B9%8C%E0%B9%81%E0%B8%9B%E0%B8%94%E0%B8%97%E0%B8%B4%E0%B8%A8%29 --%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%2224%22 fill=%22%23ff6f00%22 opacity=%220.2%22/%3E %3Cg fill=%22url%28%23sealGold%29%22%3E %3Cpolygon points=%2232%2C6 36%2C14 28%2C14%22/%3E %3Cpolygon points=%2232%2C58 36%2C50 28%2C50%22/%3E %3Cpolygon points=%226%2C32 14%2C36 14%2C28%22/%3E %3Cpolygon points=%2258%2C32 50%2C36 50%2C28%22/%3E %3Cpolygon points=%2214%2C14 22%2C17 17%2C22%22/%3E %3Cpolygon points=%2250%2C14 47%2C22 42%2C17%22/%3E %3Cpolygon points=%2214%2C50 17%2C42 22%2C47%22/%3E %3Cpolygon points=%2250%2C50 42%2C47 47%2C42%22/%3E %3C/g%3E %3C%21-- Circular Seal Medallion --%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%2218%22 fill=%22url%28%23sealGold%29%22 stroke=%22%23ffffff%22 stroke-width=%221.5%22/%3E %3C%21-- Sacred Thai Yantra Geometry --%3E %3Cpolygon points=%2232%2C18 44%2C38 20%2C38%22 fill=%22none%22 stroke=%22%23d50000%22 stroke-width=%221.5%22/%3E %3Cpolygon points=%2232%2C46 44%2C26 20%2C26%22 fill=%22none%22 stroke=%22%23d50000%22 stroke-width=%221.5%22/%3E %3C%21-- Center Core --%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%223.5%22 fill=%22%23ffffff%22 stroke=%22%23b71c1c%22 stroke-width=%221%22/%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%221.5%22 fill=%22%23ffd54f%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="card_yantra"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22cardBg%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23263238%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23102027%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23000a12%22/%3E %3C/linearGradient%3E %3ClinearGradient id=%22cardGoldBorder%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff9c4%22/%3E %3Cstop offset=%2245%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23ff8f00%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Card Base Rectangle --%3E %3Crect x=%2214%22 y=%226%22 width=%2236%22 height=%2252%22 rx=%224%22 fill=%22url%28%23cardBg%29%22 stroke=%22url%28%23cardGoldBorder%29%22 stroke-width=%222%22/%3E %3C%21-- Inner Border Frame --%3E %3Crect x=%2217%22 y=%229%22 width=%2230%22 height=%2246%22 rx=%222%22 fill=%22none%22 stroke=%22%23ffb300%22 stroke-width=%220.8%22 stroke-dasharray=%223 1.5%22/%3E %3C%21-- Sacred Yantra Diagram %28%E0%B8%A2%E0%B8%B1%E0%B8%99%E0%B8%95%E0%B9%8C%E0%B8%95%E0%B8%A3%E0%B8%B5%E0%B8%99%E0%B8%B4%E0%B8%AA%E0%B8%B4%E0%B8%87%E0%B9%80%E0%B8%AB%29 --%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%2210%22 fill=%22none%22 stroke=%22%23ff5252%22 stroke-width=%221.2%22/%3E %3Cpolygon points=%2232%2C24 39%2C36 25%2C36%22 fill=%22none%22 stroke=%22%23ffd54f%22 stroke-width=%221%22/%3E %3Cpolygon points=%2232%2C40 39%2C28 25%2C28%22 fill=%22none%22 stroke=%22%23ffd54f%22 stroke-width=%221%22/%3E %3C%21-- Occult Glyphs at Corners --%3E %3Ccircle cx=%2219%22 cy=%2211%22 r=%221.5%22 fill=%22%23ffd54f%22/%3E %3Ccircle cx=%2245%22 cy=%2211%22 r=%221.5%22 fill=%22%23ffd54f%22/%3E %3Ccircle cx=%2219%22 cy=%2253%22 r=%221.5%22 fill=%22%23ffd54f%22/%3E %3Ccircle cx=%2245%22 cy=%2253%22 r=%221.5%22 fill=%22%23ffd54f%22/%3E %3C%21-- Center Power Gem --%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%222.5%22 fill=%22%23ff1744%22/%3E %3Ccircle cx=%2232%22 cy=%2232%22 r=%221%22 fill=%22%23ffffff%22/%3E %3C/svg%3E"); }
.bag-slot[data-item-art="tool_rod"] .bag-symbol { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E %3Cdefs%3E %3ClinearGradient id=%22caneBamboo%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%23dce775%22/%3E %3Cstop offset=%2280%25%22 stop-color=%22%23827717%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Curved Bamboo Cane Rod --%3E %3Cpath d=%22M12 54 C20 44%2C 32 30%2C 48 12%22 stroke=%22url%28%23caneBamboo%29%22 stroke-width=%223%22 stroke-linecap=%22round%22 fill=%22none%22/%3E %3C%21-- Golden Reel --%3E %3Ccircle cx=%2218%22 cy=%2248%22 r=%224.5%22 fill=%22%23ffd54f%22 stroke=%22%23ff8f00%22 stroke-width=%221%22/%3E %3Ccircle cx=%2218%22 cy=%2248%22 r=%222%22 fill=%22%235d4037%22/%3E %3C%21-- Fine Monofilament Line --%3E %3Cpath d=%22M48 12 C52 24%2C 52 38%2C 46 48%22 stroke=%22%2380deea%22 stroke-width=%221%22 fill=%22none%22/%3E %3C%21-- Barbed Fish Hook --%3E %3Cpath d=%22M46 48 C44 54%2C 38 52%2C 38 48 C38 45%2C 41 46%2C 42 47%22 stroke=%22%23ffffff%22 stroke-width=%221.8%22 fill=%22none%22 stroke-linecap=%22round%22/%3E %3C%21-- Red Feather Lure --%3E %3Cpolygon points=%2246%2C47 50%2C44 48%2C50%22 fill=%22%23f44336%22/%3E %3C/svg%3E"); }
/* Rarity Accents for Item Slots */
.bag-slot[data-item-rarity="uncommon"] { border-color: #58d68d !important; box-shadow: 0 0 6px rgba(88, 214, 141, 0.35) !important; }
.bag-slot[data-item-rarity="rare"] { border-color: #5dade2 !important; box-shadow: 0 0 8px rgba(93, 173, 226, 0.45) !important; }
.bag-slot[data-item-rarity="epic"] { border-color: #af7ac5 !important; box-shadow: 0 0 10px rgba(175, 122, 197, 0.55) !important; }
.bag-slot[data-item-rarity="legendary"] { border-color: #f5b041 !important; box-shadow: 0 0 12px rgba(245, 176, 65, 0.65) !important; }


/* Reviewed sheet cells; unknown and unmatched items retain their legacy fallback. */
.bag-slot[data-item-art="sheet_wp_wrap"] .bag-symbol { background-image: url("./assets/items/wp_wrap.webp?v=f00881bfd01b"); }
.bag-slot[data-item-art="sheet_wp_twins"] .bag-symbol { background-image: url("./assets/items/wp_twins.webp?v=3149aac962eb"); }
.bag-slot[data-item-art="sheet_wp_shadow"] .bag-symbol { background-image: url("./assets/items/wp_shadow.webp?v=6db15504dece"); }
.bag-slot[data-item-art="sheet_wp_pike"] .bag-symbol { background-image: url("./assets/items/wp_pike.webp?v=45fc0818d0d0"); }
.bag-slot[data-item-art="sheet_wp_wand"] .bag-symbol { background-image: url("./assets/items/wp_wand.webp?v=7962b80fe480"); }
.bag-slot[data-item-art="sheet_wp_crook"] .bag-symbol { background-image: url("./assets/items/wp_crook.webp?v=a90153df301a"); }
.bag-slot[data-item-art="sheet_ritual_dagger"] .bag-symbol { background-image: url("./assets/items/ritual_dagger.webp?v=b8928cae123b"); }
.bag-slot[data-item-art="sheet_arcane_sword"] .bag-symbol { background-image: url("./assets/items/arcane_sword.webp?v=d8e9568cabc6"); }
.bag-slot[data-item-art="sheet_spirit_staff"] .bag-symbol { background-image: url("./assets/items/spirit_staff.webp?v=e9dbbb71856b"); }
.bag-slot[data-item-art="sheet_shrine_glaive"] .bag-symbol { background-image: url("./assets/items/shrine_glaive.webp?v=dc3349600478"); }
.bag-slot[data-item-art="sheet_arm_cloth_chest"] .bag-symbol { background-image: url("./assets/items/arm_cloth_chest.webp?v=8f979c1be4b7"); }
.bag-slot[data-item-art="sheet_arm_hide_chest"] .bag-symbol { background-image: url("./assets/items/arm_hide_chest.webp?v=06e45aeb3e49"); }
.bag-slot[data-item-art="sheet_arm_medium_chest"] .bag-symbol { background-image: url("./assets/items/arm_medium_chest.webp?v=e236e0ec46d7"); }
.bag-slot[data-item-art="sheet_arm_heavy_chest"] .bag-symbol { background-image: url("./assets/items/arm_heavy_chest.webp?v=e02d8d5ef559"); }
.bag-slot[data-item-art="sheet_arm_cloth_head"] .bag-symbol { background-image: url("./assets/items/arm_cloth_head.webp?v=5e0a79322397"); }
.bag-slot[data-item-art="sheet_arm_hide_head"] .bag-symbol { background-image: url("./assets/items/arm_hide_head.webp?v=8ec4c58a8399"); }
.bag-slot[data-item-art="sheet_arm_medium_head"] .bag-symbol { background-image: url("./assets/items/arm_medium_head.webp?v=30b737426075"); }
.bag-slot[data-item-art="sheet_arm_heavy_head"] .bag-symbol { background-image: url("./assets/items/arm_heavy_head.webp?v=ede461085c64"); }
.bag-slot[data-item-art="sheet_arm_cloth_shoulders"] .bag-symbol { background-image: url("./assets/items/arm_cloth_shoulders.webp?v=21481417ba27"); }
.bag-slot[data-item-art="sheet_arm_hide_shoulders"] .bag-symbol { background-image: url("./assets/items/arm_hide_shoulders.webp?v=817476c6d514"); }
.bag-slot[data-item-art="sheet_arm_medium_shoulders"] .bag-symbol { background-image: url("./assets/items/arm_medium_shoulders.webp?v=a34a37a29818"); }
.bag-slot[data-item-art="sheet_arm_heavy_shoulders"] .bag-symbol { background-image: url("./assets/items/arm_heavy_shoulders.webp?v=8ab02c471cb6"); }
.bag-slot[data-item-art="sheet_arm_cloth_feet"] .bag-symbol { background-image: url("./assets/items/arm_cloth_feet.webp?v=e5ecf6e2629b"); }
.bag-slot[data-item-art="sheet_arm_hide_feet"] .bag-symbol { background-image: url("./assets/items/arm_hide_feet.webp?v=f0c479fde554"); }
.bag-slot[data-item-art="sheet_arm_medium_feet"] .bag-symbol { background-image: url("./assets/items/arm_medium_feet.webp?v=537a3c69dc4c"); }
.bag-slot[data-item-art="sheet_arm_heavy_feet"] .bag-symbol { background-image: url("./assets/items/arm_heavy_feet.webp?v=6ed47cc2bc48"); }
.bag-slot[data-item-art="sheet_acc_torc"] .bag-symbol { background-image: url("./assets/items/acc_torc.webp?v=f68417e0beec"); }
.bag-slot[data-item-art="sheet_acc_gorget"] .bag-symbol { background-image: url("./assets/items/acc_gorget.webp?v=bde8f1635fa9"); }
.bag-slot[data-item-art="sheet_acc_fang"] .bag-symbol { background-image: url("./assets/items/acc_fang.webp?v=c218f58620dc"); }
.bag-slot[data-item-art="sheet_acc_spell"] .bag-symbol { background-image: url("./assets/items/acc_spell.webp?v=f4e7fdd6bf85"); }
.bag-slot[data-item-art="sheet_acc_earrings_duelist"] .bag-symbol { background-image: url("./assets/items/acc_earrings_duelist.webp?v=31f6db04cc09"); }
.bag-slot[data-item-art="sheet_acc_earrings_focus"] .bag-symbol { background-image: url("./assets/items/acc_earrings_focus.webp?v=d983ba590f68"); }
.bag-slot[data-item-art="sheet_acc_earrings_lotus"] .bag-symbol { background-image: url("./assets/items/acc_earrings_lotus.webp?v=15862ab0f302"); }
.bag-slot[data-item-art="sheet_acc_earrings_ward"] .bag-symbol { background-image: url("./assets/items/acc_earrings_ward.webp?v=ee3ec0d34588"); }
.bag-slot[data-item-art="sheet_acc_ring_spell"] .bag-symbol { background-image: url("./assets/items/acc_ring_spell.webp?v=91cb7d784d2d"); }
.bag-slot[data-item-art="sheet_acc_ring_atk"] .bag-symbol { background-image: url("./assets/items/acc_ring_atk.webp?v=150f1c170e8d"); }
.bag-slot[data-item-art="sheet_acc_ring_heal"] .bag-symbol { background-image: url("./assets/items/acc_ring_heal.webp?v=f603adfcfe1e"); }
.bag-slot[data-item-art="sheet_acc_ring_guard"] .bag-symbol { background-image: url("./assets/items/acc_ring_guard.webp?v=53227fb84344"); }
.bag-slot[data-item-art="sheet_use_herbal"] .bag-symbol { background-image: url("./assets/items/use_herbal.webp?v=b8faae428b39"); }
.bag-slot[data-item-art="sheet_use_mana"] .bag-symbol { background-image: url("./assets/items/use_mana.webp?v=45746b893381"); }
.bag-slot[data-item-art="sheet_shrine_shard"] .bag-symbol { background-image: url("./assets/items/shrine_shard.webp?v=205ed460b708"); }
.bag-slot[data-item-art="sheet_mat_raw_wood"] .bag-symbol { background-image: url("./assets/items/mat_raw_wood.webp?v=d8b1b42875b7"); }
.bag-slot[data-item-art="sheet_mat_raw_stone"] .bag-symbol { background-image: url("./assets/items/mat_raw_stone.webp?v=78e34473cbe6"); }
.bag-slot[data-item-art="sheet_mat_metal"] .bag-symbol { background-image: url("./assets/items/mat_metal.webp?v=6c12e405429d"); }
.bag-slot[data-item-art="sheet_mat_wood"] .bag-symbol { background-image: url("./assets/items/mat_wood.webp?v=0a026017a692"); }
.bag-slot[data-item-art="sheet_mat_fiber"] .bag-symbol { background-image: url("./assets/items/mat_fiber.webp?v=bbfbdc0ab31c"); }
.bag-slot[data-item-art="sheet_mat_hide"] .bag-symbol { background-image: url("./assets/items/mat_hide.webp?v=f8efdcb9ae5f"); }
.bag-slot[data-item-art="sheet_mat_ink"] .bag-symbol { background-image: url("./assets/items/mat_ink.webp?v=21c3c61d5343"); }
.bag-slot[data-item-art="sheet_mat_herb"] .bag-symbol { background-image: url("./assets/items/mat_herb.webp?v=0c0c86f1f91e"); }
.bag-slot[data-item-art="sheet_mat_resin"] .bag-symbol { background-image: url("./assets/items/mat_resin.webp?v=03750839b8a6"); }
.bag-slot[data-item-art="sheet_mat_charcoal"] .bag-symbol { background-image: url("./assets/items/mat_charcoal.webp?v=aaf1268cee3a"); }
.bag-slot[data-item-art="sheet_mat_ingot"] .bag-symbol { background-image: url("./assets/items/mat_ingot.webp?v=e949d55561ca"); }
.bag-slot[data-item-art="sheet_ref_seal"] .bag-symbol { background-image: url("./assets/items/ref_seal.webp?v=0451c1a57fb7"); }
.bag-slot[data-item-art="sheet_ref_powder"] .bag-symbol { background-image: url("./assets/items/ref_powder.webp?v=b88ea3658bae"); }
.bag-slot[data-item-art="sheet_ref_oil"] .bag-symbol { background-image: url("./assets/items/ref_oil.webp?v=e877c0eb82b6"); }
.bag-slot[data-item-art="sheet_tool_axe"] .bag-symbol { background-image: url("./assets/items/tool_axe.webp?v=1c3874d10d7e"); }
.bag-slot[data-item-art="sheet_tool_pick"] .bag-symbol { background-image: url("./assets/items/tool_pick.webp?v=0269078125a7"); }
.bag-slot[data-item-art="sheet_card_possessed"] .bag-symbol { background-image: url("./assets/items/card_possessed.webp?v=4c11c6de283d"); }
.bag-slot[data-item-art="sheet_card_lost_ghost"] .bag-symbol { background-image: url("./assets/items/card_lost_ghost.webp?v=65b653052408"); }
.bag-slot[data-item-art="sheet_card_root_shadow"] .bag-symbol { background-image: url("./assets/items/card_root_shadow.webp?v=10b2b6320f56"); }
.bag-slot[data-item-art="sheet_card_arcane_spirit"] .bag-symbol { background-image: url("./assets/items/card_arcane_spirit.webp?v=5b98edadd72b"); }
.bag-slot[data-item-art="sheet_card_shrine_keeper"] .bag-symbol { background-image: url("./assets/items/card_shrine_keeper.webp?v=b11f03d72f49"); }
.bag-slot[data-item-art="sheet_card_bamboo"] .bag-symbol { background-image: url("./assets/items/card_bamboo.webp?v=5b1aef315625"); }
.bag-slot[data-item-art="sheet_card_lotus"] .bag-symbol { background-image: url("./assets/items/card_lotus.webp?v=bc5f27943919"); }
.bag-slot[data-item-art="sheet_card_dream"] .bag-symbol { background-image: url("./assets/items/card_dream.webp?v=1abb3249dce9"); }
.bag-slot[data-item-art="sheet_mat_boss_bound_temple"] .bag-symbol { background-image: url("./assets/items/mat_boss_bound_temple.webp?v=87db13a1bb10"); }
.bag-slot[data-item-art="sheet_mat_boss_drowned_marsh"] .bag-symbol { background-image: url("./assets/items/mat_boss_drowned_marsh.webp?v=a18f3d60be69"); }
.bag-slot[data-item-art="sheet_mat_boss_moon_cemetery"] .bag-symbol { background-image: url("./assets/items/mat_boss_moon_cemetery.webp?v=ecac1bf3db3d"); }
.bag-slot[data-item-art="sheet_mat_boss_moon_pass"] .bag-symbol { background-image: url("./assets/items/mat_boss_moon_pass.webp?v=5dd114e4e812"); }
.bag-slot[data-item-art="sheet_mat_boss_bamboo_frontier"] .bag-symbol { background-image: url("./assets/items/mat_boss_bamboo_frontier.webp?v=f1543b014e3a"); }
.bag-slot[data-item-art="sheet_mat_boss_lotus_basin"] .bag-symbol { background-image: url("./assets/items/mat_boss_lotus_basin.webp?v=bf2e0398d5f6"); }
.bag-slot[data-item-art="sheet_mat_boss_river_watch"] .bag-symbol { background-image: url("./assets/items/mat_boss_river_watch.webp?v=c0552652b3eb"); }
.bag-slot[data-item-art="sheet_mat_boss_asura_peak"] .bag-symbol { background-image: url("./assets/items/mat_boss_asura_peak.webp?v=6ee62f9fe242"); }
.bag-slot[data-item-art="sheet_acc_shrine_ward"] .bag-symbol { background-image: url("./assets/items/acc_shrine_ward.webp?v=22190fe18fc9"); }
.bag-slot[data-item-art="sheet_acc_rift_star"] .bag-symbol { background-image: url("./assets/items/acc_rift_star.webp?v=c8f73ddff633"); }
.bag-slot[data-item-art="sheet_acc_boss_bound_temple"] .bag-symbol { background-image: url("./assets/items/acc_boss_bound_temple.webp?v=fdb12edabfc0"); }
.bag-slot[data-item-art="sheet_acc_boss_drowned_marsh"] .bag-symbol { background-image: url("./assets/items/acc_boss_drowned_marsh.webp?v=bd7830f32bc4"); }
.bag-slot[data-item-art="sheet_acc_boss_moon_cemetery"] .bag-symbol { background-image: url("./assets/items/acc_boss_moon_cemetery.webp?v=c177f605fd7f"); }
.bag-slot[data-item-art="sheet_acc_boss_moon_pass"] .bag-symbol { background-image: url("./assets/items/acc_boss_moon_pass.webp?v=096ab0c02b8d"); }
.bag-slot[data-item-art="sheet_acc_boss_bamboo_frontier"] .bag-symbol { background-image: url("./assets/items/acc_boss_bamboo_frontier.webp?v=db5a93d45d18"); }
.bag-slot[data-item-art="sheet_acc_boss_hex_ridge"] .bag-symbol { background-image: url("./assets/items/acc_boss_hex_ridge.webp?v=b14108e86400"); }
.bag-slot[data-item-art="sheet_acc_boss_lotus_basin"] .bag-symbol { background-image: url("./assets/items/acc_boss_lotus_basin.webp?v=af7a547d0199"); }
.bag-slot[data-item-art="sheet_acc_boss_river_watch"] .bag-symbol { background-image: url("./assets/items/acc_boss_river_watch.webp?v=b3aaca81f950"); }
.bag-slot[data-item-art="sheet_acc_boss_twin_neck_pass"] .bag-symbol { background-image: url("./assets/items/acc_boss_twin_neck_pass.webp?v=e2edf00b5ddb"); }
.bag-slot[data-item-art="sheet_acc_boss_sam_lan_estuary"] .bag-symbol { background-image: url("./assets/items/acc_boss_sam_lan_estuary.webp?v=e4335e525ee1"); }
.bag-slot[data-item-art="sheet_acc_boss_naga_cavern"] .bag-symbol { background-image: url("./assets/items/acc_boss_naga_cavern.webp?v=75124cd864d5"); }
.bag-slot[data-item-art="sheet_acc_boss_fallen_city"] .bag-symbol { background-image: url("./assets/items/acc_boss_fallen_city.webp?v=9cd3dff9e037"); }
.bag-slot[data-item-art="sheet_acc_boss_tri_wiang_castle"] .bag-symbol { background-image: url("./assets/items/acc_boss_tri_wiang_castle.webp?v=d0738baacd82"); }
.bag-slot[data-item-art="sheet_acc_boss_asura_peak"] .bag-symbol { background-image: url("./assets/items/acc_boss_asura_peak.webp?v=b0d94a8c1745"); }
.bag-slot[data-item-art="sheet_card_reed"] .bag-symbol { background-image: url("./assets/items/card_reed.webp?v=5fccf9332f72"); }
.bag-slot[data-item-art="sheet_card_merchant"] .bag-symbol { background-image: url("./assets/items/card_merchant.webp?v=862a642be32b"); }
.bag-slot[data-item-art="sheet_card_asura"] .bag-symbol { background-image: url("./assets/items/card_asura.webp?v=0b0109660ce0"); }
.bag-slot[data-item-art="sheet_card_forge_master"] .bag-symbol { background-image: url("./assets/items/card_forge_master.webp?v=658c43c7bcd6"); }
.bag-slot[data-item-art="sheet_card_light_eater"] .bag-symbol { background-image: url("./assets/items/card_light_eater.webp?v=58b08bbd3829"); }
.bag-slot[data-item-art="sheet_card_last_spirit"] .bag-symbol { background-image: url("./assets/items/card_last_spirit.webp?v=ac978d89379b"); }
.bag-slot[data-item-art="sheet_card_star_warden"] .bag-symbol { background-image: url("./assets/items/card_star_warden.webp?v=500cb666fea5"); }
.bag-slot[data-item-art="sheet_card_rift_warden"] .bag-symbol { background-image: url("./assets/items/card_rift_warden.webp?v=7034ebda12d0"); }
.bag-slot[data-item-art="sheet_off_brace"] .bag-symbol { background-image: url("./assets/items/off_brace.webp?v=9e4f707d4332"); }
.bag-slot[data-item-art="sheet_off_guard"] .bag-symbol { background-image: url("./assets/items/off_guard.webp?v=c896bd426103"); }
.bag-slot[data-item-art="sheet_off_veil"] .bag-symbol { background-image: url("./assets/items/off_veil.webp?v=d6ed34f02ceb"); }
.bag-slot[data-item-art="sheet_off_shield"] .bag-symbol { background-image: url("./assets/items/off_shield.webp?v=db129242ff5e"); }
.bag-slot[data-item-art="sheet_off_jar"] .bag-symbol { background-image: url("./assets/items/off_jar.webp?v=38499fd54062"); }
.bag-slot[data-item-art="sheet_off_bell"] .bag-symbol { background-image: url("./assets/items/off_bell.webp?v=55d3303b4c6b"); }
.bag-slot[data-item-art="sheet_arm_cloth_arms"] .bag-symbol { background-image: url("./assets/items/arm_cloth_arms.webp?v=a9ef7c027c73"); }
.bag-slot[data-item-art="sheet_arm_hide_arms"] .bag-symbol { background-image: url("./assets/items/arm_hide_arms.webp?v=454c2a35e246"); }
.bag-slot[data-item-art="sheet_arm_medium_arms"] .bag-symbol { background-image: url("./assets/items/arm_medium_arms.webp?v=c66370d0e67d"); }
.bag-slot[data-item-art="sheet_arm_heavy_arms"] .bag-symbol { background-image: url("./assets/items/arm_heavy_arms.webp?v=4f2ffa14ad2d"); }
.bag-slot[data-item-art="sheet_arm_cloth_leftHand"] .bag-symbol { background-image: url("./assets/items/arm_cloth_leftHand.webp?v=73154b88bc8a"); }
.bag-slot[data-item-art="sheet_arm_hide_leftHand"] .bag-symbol { background-image: url("./assets/items/arm_hide_leftHand.webp?v=8f155d6387cf"); }
.bag-slot[data-item-art="sheet_arm_medium_leftHand"] .bag-symbol { background-image: url("./assets/items/arm_medium_leftHand.webp?v=c765f33bc422"); }
.bag-slot[data-item-art="sheet_arm_heavy_leftHand"] .bag-symbol { background-image: url("./assets/items/arm_heavy_leftHand.webp?v=573c6183f933"); }
.bag-slot[data-item-art="sheet_arm_cloth_rightHand"] .bag-symbol { background-image: url("./assets/items/arm_cloth_rightHand.webp?v=04f3493a080a"); }
.bag-slot[data-item-art="sheet_arm_hide_rightHand"] .bag-symbol { background-image: url("./assets/items/arm_hide_rightHand.webp?v=dac8ad32054b"); }
.bag-slot[data-item-art="sheet_arm_medium_rightHand"] .bag-symbol { background-image: url("./assets/items/arm_medium_rightHand.webp?v=9276a20b3fa1"); }
.bag-slot[data-item-art="sheet_arm_heavy_rightHand"] .bag-symbol { background-image: url("./assets/items/arm_heavy_rightHand.webp?v=834483a8d7a6"); }
.bag-slot[data-item-art="sheet_mat_fish_silver"] .bag-symbol { background-image: url("./assets/items/mat_fish_silver.webp?v=4b79c3aedefa"); }
.bag-slot[data-item-art="sheet_mat_fish_spirit"] .bag-symbol { background-image: url("./assets/items/mat_fish_spirit.webp?v=d045a689c70c"); }
.bag-slot[data-item-art="sheet_use_salve"] .bag-symbol { background-image: url("./assets/items/use_salve.webp?v=53387ccd1bcf"); }
/* Small screen-sized monster labels, below HUD, never intercept movement or attacks. */
.monster-label-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.monster-label { display: flex; gap: 3px; box-sizing: border-box; position: absolute; transform: translate(-50%, -100%); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 4px; border-radius: 4px; background: rgba(12, 15, 20, .65); color: #f4e8cf; font: 600 11px/17px "Noto Sans Thai", sans-serif; text-shadow: 0 1px 2px #000; pointer-events: none; }
.monster-label[hidden] { display: none; }
.monster-label-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.monster-label > span:last-child { flex-shrink: 0; }
/* ========================================================
   MONTRA High-Fidelity RPG Visual Game Icons Engine
   ======================================================== */
.kg-glyph[data-skill-glyph] {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0;
  vertical-align: middle;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  transition: transform 0.15s ease;
}
.kg-node:hover .kg-glyph[data-skill-glyph] {
  transform: scale(1.1);
}
.kg-center-class-orb[data-skill-glyph] {
  background-size: 72%;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0 !important;
  color: transparent !important;
}
.skill-modal-glyph[data-skill-glyph] {
  display: inline-block;
  width: 44px;
  height: 44px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0 !important;
  color: transparent !important;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.8));
}
/* --- High-Fidelity Thai Fantasy Vector Skill Artwork --- */

.glyph[data-skill-glyph] {
  background-size: 78% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  font-size: 0 !important;
  color: transparent !important;
}

.kg-glyph[data-skill-glyph="phuttha_core"],
.skill-book-icon[data-skill-glyph="phuttha_core"],
.skill-modal-glyph[data-skill-glyph="phuttha_core"],
.glyph[data-skill-glyph="phuttha_core"],
.field-slot[data-skill-id="phuttha_core"] .glyph,
.kg-glyph[data-skill-glyph="twin_cut"],
.skill-book-icon[data-skill-glyph="twin_cut"],
.skill-modal-glyph[data-skill-glyph="twin_cut"],
.glyph[data-skill-glyph="twin_cut"],
.field-slot[data-skill-id="twin_cut"] .glyph,
.kg-glyph[data-skill-glyph="twin_finale"],
.skill-book-icon[data-skill-glyph="twin_finale"],
.skill-modal-glyph[data-skill-glyph="twin_finale"],
.glyph[data-skill-glyph="twin_finale"],
.field-slot[data-skill-id="twin_finale"] .glyph,
.kg-glyph[data-skill-glyph="flowing_blades"],
.skill-book-icon[data-skill-glyph="flowing_blades"],
.skill-modal-glyph[data-skill-glyph="flowing_blades"],
.glyph[data-skill-glyph="flowing_blades"],
.field-slot[data-skill-id="flowing_blades"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22phutBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff7a18%22%20stop-opacity%3D%220.9%22/%3E%20%3Cstop%20offset%3D%2260%25%22%20stop-color%3D%22%23b83000%22%20stop-opacity%3D%220.8%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%233d0a00%22%20stop-opacity%3D%220.95%22/%3E%20%3C/radialGradient%3E%20%3ClinearGradient%20id%3D%22phutBlade1%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%20%3Cstop%20offset%3D%2230%25%22%20stop-color%3D%22%23ffe8a3%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23ff9900%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23d63000%22/%3E%20%3C/linearGradient%3E%20%3ClinearGradient%20id%3D%22phutBlade2%22%20x1%3D%22100%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%20%3Cstop%20offset%3D%2240%25%22%20stop-color%3D%22%23ffc83b%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ff4500%22/%3E%20%3C/linearGradient%3E%20%3Cfilter%20id%3D%22phutGlow%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeGaussianBlur%20stdDeviation%3D%222%22%20result%3D%22blur%22/%3E%20%3CfeComposite%20in%3D%22SourceGraphic%22%20in2%3D%22blur%22%20operator%3D%22over%22/%3E%20%3C/filter%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23phutBg%29%22%20stroke%3D%22%23f3c768%22%20stroke-width%3D%221.5%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2228%22%20fill%3D%22none%22%20stroke%3D%22%23ffaa00%22%20stroke-width%3D%220.75%22%20stroke-dasharray%3D%223%2C2%22%20opacity%3D%220.6%22/%3E%20%3C%21--%20Slash%201%20%28Primary%20heavy%20slash%29%20--%3E%20%3Cpath%20d%3D%22M%2010%2052%20C%2022%2042%2C%2042%2022%2C%2054%2012%20C%2046%2026%2C%2026%2046%2C%2010%2052%20Z%22%20fill%3D%22url%28%23phutBlade1%29%22%20filter%3D%22url%28%23phutGlow%29%22/%3E%20%3C%21--%20Slash%202%20%28Cross%20slash%29%20--%3E%20%3Cpath%20d%3D%22M%2012%2014%20C%2024%2024%2C%2044%2044%2C%2052%2050%20C%2042%2040%2C%2024%2020%2C%2012%2014%20Z%22%20fill%3D%22url%28%23phutBlade2%29%22%20filter%3D%22url%28%23phutGlow%29%22/%3E%20%3C%21--%20Slash%203%20%28Center%20finishing%20thrust%29%20--%3E%20%3Cpath%20d%3D%22M%206%2032%20C%2022%2030%2C%2048%2030%2C%2058%2032%20C%2048%2034%2C%2022%2034%2C%206%2032%20Z%22%20fill%3D%22%23fff%22%20opacity%3D%220.85%22/%3E%20%3C%21--%20Spark%20bursts%20--%3E%20%3Cpolygon%20points%3D%2232%2C24%2034%2C31%2041%2C32%2034%2C33%2032%2C40%2030%2C33%2023%2C32%2030%2C31%22%20fill%3D%22%23ffffff%22%20filter%3D%22url%28%23phutGlow%29%22/%3E%20%3Ccircle%20cx%3D%2246%22%20cy%3D%2218%22%20r%3D%222%22%20fill%3D%22%23ffe082%22/%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2246%22%20r%3D%221.5%22%20fill%3D%22%23ff7043%22/%3E%20%3Ccircle%20cx%3D%2248%22%20cy%3D%2244%22%20r%3D%221.8%22%20fill%3D%22%23ffca28%22/%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2218%22%20r%3D%221.5%22%20fill%3D%22%23ffd54f%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="sritra_core"],
.skill-book-icon[data-skill-glyph="sritra_core"],
.skill-modal-glyph[data-skill-glyph="sritra_core"],
.glyph[data-skill-glyph="sritra_core"],
.field-slot[data-skill-id="sritra_core"] .glyph,
.kg-glyph[data-skill-glyph="measure"],
.skill-book-icon[data-skill-glyph="measure"],
.skill-modal-glyph[data-skill-glyph="measure"],
.glyph[data-skill-glyph="measure"],
.field-slot[data-skill-id="measure"] .glyph,
.kg-glyph[data-skill-glyph="steady_guard"],
.skill-book-icon[data-skill-glyph="steady_guard"],
.skill-modal-glyph[data-skill-glyph="steady_guard"],
.glyph[data-skill-glyph="steady_guard"],
.field-slot[data-skill-id="steady_guard"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22sriBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%232a75d3%22%20stop-opacity%3D%220.9%22/%3E%20%3Cstop%20offset%3D%2260%25%22%20stop-color%3D%22%23113e78%22%20stop-opacity%3D%220.85%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2305152b%22%20stop-opacity%3D%220.95%22/%3E%20%3C/radialGradient%3E%20%3ClinearGradient%20id%3D%22sriShield%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23f5e0a3%22/%3E%20%3Cstop%20offset%3D%2240%25%22%20stop-color%3D%22%23c99738%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%236e4e14%22/%3E%20%3C/linearGradient%3E%20%3ClinearGradient%20id%3D%22sriSteel%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%23a8c7e0%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%234a709c%22/%3E%20%3C/linearGradient%3E%20%3Cfilter%20id%3D%22sriGlow%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeGaussianBlur%20stdDeviation%3D%222%22%20result%3D%22blur%22/%3E%20%3CfeComposite%20in%3D%22SourceGraphic%22%20in2%3D%22blur%22%20operator%3D%22over%22/%3E%20%3C/filter%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23sriBg%29%22%20stroke%3D%22%2368b4f3%22%20stroke-width%3D%221.5%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2228%22%20fill%3D%22none%22%20stroke%3D%22%233ba1ff%22%20stroke-width%3D%220.75%22%20stroke-dasharray%3D%223%2C2%22%20opacity%3D%220.6%22/%3E%20%3C%21--%20Defensive%20Wave%20Rings%20--%3E%20%3Cellipse%20cx%3D%2232%22%20cy%3D%2232%22%20rx%3D%2222%22%20ry%3D%2214%22%20fill%3D%22none%22%20stroke%3D%22%2390caf9%22%20stroke-width%3D%221.2%22%20opacity%3D%220.4%22/%3E%20%3Cellipse%20cx%3D%2232%22%20cy%3D%2232%22%20rx%3D%2226%22%20ry%3D%2218%22%20fill%3D%22none%22%20stroke%3D%22%2364b5f6%22%20stroke-width%3D%220.8%22%20opacity%3D%220.3%22/%3E%20%3C%21--%20Fortress%20Shield%20Body%20--%3E%20%3Cpath%20d%3D%22M%2032%2010%20L%2048%2016%20C%2048%2032%2C%2042%2046%2C%2032%2054%20C%2022%2046%2C%2016%2032%2C%2016%2016%20Z%22%20fill%3D%22url%28%23sriShield%29%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.2%22%20filter%3D%22url%28%23sriGlow%29%22/%3E%20%3C%21--%20Shield%20Inner%20Relief%20--%3E%20%3Cpath%20d%3D%22M%2032%2014%20L%2044%2019%20C%2044%2031%2C%2039%2042%2C%2032%2048%20C%2025%2042%2C%2020%2031%2C%2020%2019%20Z%22%20fill%3D%22%23153658%22%20stroke%3D%22%23f3c768%22%20stroke-width%3D%220.8%22/%3E%20%3C%21--%20Crossed%20Guard%20Blades%20--%3E%20%3Cline%20x1%3D%2218%22%20y1%3D%2246%22%20x2%3D%2246%22%20y2%3D%2218%22%20stroke%3D%22url%28%23sriSteel%29%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%20%3Cline%20x1%3D%2246%22%20y1%3D%2246%22%20x2%3D%2218%22%20y2%3D%2218%22%20stroke%3D%22url%28%23sriSteel%29%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%20%3C%21--%20Center%20Protective%20Gem%20--%3E%20%3Cpolygon%20points%3D%2232%2C24%2037%2C32%2032%2C40%2027%2C32%22%20fill%3D%22%2300e5ff%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%222%22%20fill%3D%22%23fff%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="atamat_core"],
.skill-book-icon[data-skill-glyph="atamat_core"],
.skill-modal-glyph[data-skill-glyph="atamat_core"],
.glyph[data-skill-glyph="atamat_core"],
.field-slot[data-skill-id="atamat_core"] .glyph,
.kg-glyph[data-skill-glyph="sweep"],
.skill-book-icon[data-skill-glyph="sweep"],
.skill-modal-glyph[data-skill-glyph="sweep"],
.glyph[data-skill-glyph="sweep"],
.field-slot[data-skill-id="sweep"] .glyph,
.kg-glyph[data-skill-glyph="circle_guard"],
.skill-book-icon[data-skill-glyph="circle_guard"],
.skill-modal-glyph[data-skill-glyph="circle_guard"],
.glyph[data-skill-glyph="circle_guard"],
.field-slot[data-skill-id="circle_guard"] .glyph,
.kg-glyph[data-skill-glyph="opening_cut"],
.skill-book-icon[data-skill-glyph="opening_cut"],
.skill-modal-glyph[data-skill-glyph="opening_cut"],
.glyph[data-skill-glyph="opening_cut"],
.field-slot[data-skill-id="opening_cut"] .glyph,
.kg-glyph[data-skill-glyph="guardian_sweep"],
.skill-book-icon[data-skill-glyph="guardian_sweep"],
.skill-modal-glyph[data-skill-glyph="guardian_sweep"],
.glyph[data-skill-glyph="guardian_sweep"],
.field-slot[data-skill-id="guardian_sweep"] .glyph,
.kg-glyph[data-skill-glyph="open_circle"],
.skill-book-icon[data-skill-glyph="open_circle"],
.skill-modal-glyph[data-skill-glyph="open_circle"],
.glyph[data-skill-glyph="open_circle"],
.field-slot[data-skill-id="open_circle"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22ataBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2300b4d8%22%20stop-opacity%3D%220.9%22/%3E%20%3Cstop%20offset%3D%2260%25%22%20stop-color%3D%22%230077b6%22%20stop-opacity%3D%220.85%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2303045e%22%20stop-opacity%3D%220.95%22/%3E%20%3C/radialGradient%3E%20%3ClinearGradient%20id%3D%22ataWind%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%20%3Cstop%20offset%3D%2240%25%22%20stop-color%3D%22%2390e0ef%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230077b6%22/%3E%20%3C/linearGradient%3E%20%3Cfilter%20id%3D%22ataGlow%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeGaussianBlur%20stdDeviation%3D%222%22%20result%3D%22blur%22/%3E%20%3CfeComposite%20in%3D%22SourceGraphic%22%20in2%3D%22blur%22%20operator%3D%22over%22/%3E%20%3C/filter%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23ataBg%29%22%20stroke%3D%22%2348cae4%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Vortex%20Arcs%20--%3E%20%3Cpath%20d%3D%22M%2032%208%20A%2024%2024%200%200%201%2056%2032%20C%2050%2032%2C%2042%2026%2C%2032%2020%20Z%22%20fill%3D%22url%28%23ataWind%29%22%20opacity%3D%220.85%22%20filter%3D%22url%28%23ataGlow%29%22/%3E%20%3Cpath%20d%3D%22M%2056%2032%20A%2024%2024%200%200%201%2032%2056%20C%2032%2050%2C%2026%2042%2C%2020%2032%20Z%22%20fill%3D%22url%28%23ataWind%29%22%20opacity%3D%220.85%22%20filter%3D%22url%28%23ataGlow%29%22/%3E%20%3Cpath%20d%3D%22M%2032%2056%20A%2024%2024%200%200%201%208%2032%20C%2014%2032%2C%2022%2038%2C%2032%2044%20Z%22%20fill%3D%22url%28%23ataWind%29%22%20opacity%3D%220.85%22%20filter%3D%22url%28%23ataGlow%29%22/%3E%20%3Cpath%20d%3D%22M%208%2032%20A%2024%2024%200%200%201%2032%208%20C%2032%2014%2C%2038%2022%2C%2044%2032%20Z%22%20fill%3D%22url%28%23ataWind%29%22%20opacity%3D%220.85%22%20filter%3D%22url%28%23ataGlow%29%22/%3E%20%3C%21--%20Cyclone%20Speed%20Lines%20--%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2218%22%20fill%3D%22none%22%20stroke%3D%22%23caf0f8%22%20stroke-width%3D%221.8%22%20stroke-dasharray%3D%226%2C4%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20stroke-dasharray%3D%224%2C3%22/%3E%20%3C%21--%20Center%20Spinning%20Dual%20Sabers%20Eye%20--%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%225%22%20fill%3D%22%23fff%22%20filter%3D%22url%28%23ataGlow%29%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%222.5%22%20fill%3D%22%2303045e%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="chumphon_core"],
.skill-book-icon[data-skill-glyph="chumphon_core"],
.skill-modal-glyph[data-skill-glyph="chumphon_core"],
.glyph[data-skill-glyph="chumphon_core"],
.field-slot[data-skill-id="chumphon_core"] .glyph,
.kg-glyph[data-skill-glyph="naval_guard"],
.skill-book-icon[data-skill-glyph="naval_guard"],
.skill-modal-glyph[data-skill-glyph="naval_guard"],
.glyph[data-skill-glyph="naval_guard"],
.field-slot[data-skill-id="naval_guard"] .glyph,
.kg-glyph[data-skill-glyph="protect_ally"],
.skill-book-icon[data-skill-glyph="protect_ally"],
.skill-modal-glyph[data-skill-glyph="protect_ally"],
.glyph[data-skill-glyph="protect_ally"],
.field-slot[data-skill-id="protect_ally"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22chumBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffd166%22%20stop-opacity%3D%220.95%22/%3E%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%23f77f00%22%20stop-opacity%3D%220.85%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%234a2200%22%20stop-opacity%3D%220.95%22/%3E%20%3C/radialGradient%3E%20%3ClinearGradient%20id%3D%22chumGold%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%23ffd700%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23d4af37%22/%3E%20%3C/linearGradient%3E%20%3Cfilter%20id%3D%22chumGlow%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%20%3CfeGaussianBlur%20stdDeviation%3D%222%22%20result%3D%22blur%22/%3E%20%3CfeComposite%20in%3D%22SourceGraphic%22%20in2%3D%22blur%22%20operator%3D%22over%22/%3E%20%3C/filter%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23chumBg%29%22%20stroke%3D%22%23ffe6a7%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Sacred%208-Direction%20Rays%20--%3E%20%3Cg%20stroke%3D%22url%28%23chumGold%29%22%20stroke-width%3D%221.5%22%20opacity%3D%220.7%22%3E%20%3Cline%20x1%3D%2232%22%20y1%3D%226%22%20x2%3D%2232%22%20y2%3D%2258%22/%3E%20%3Cline%20x1%3D%226%22%20y1%3D%2232%22%20x2%3D%2258%22%20y2%3D%2232%22/%3E%20%3Cline%20x1%3D%2214%22%20y1%3D%2214%22%20x2%3D%2250%22%20y2%3D%2250%22/%3E%20%3Cline%20x1%3D%2214%22%20y1%3D%2250%22%20x2%3D%2250%22%20y2%3D%2214%22/%3E%20%3C/g%3E%20%3C%21--%20Concentric%20Mystic%20Mandala%20Circles%20--%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2222%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.2%22%20stroke-dasharray%3D%222%2C3%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2216%22%20fill%3D%22none%22%20stroke%3D%22%23ffd700%22%20stroke-width%3D%221.8%22/%3E%20%3C%21--%20Octagon%20Warding%20Seal%20--%3E%20%3Cpolygon%20points%3D%2232%2C12%2046%2C18%2052%2C32%2046%2C46%2032%2C52%2018%2C46%2012%2C32%2018%2C18%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.2%22%20filter%3D%22url%28%23chumGlow%29%22/%3E%20%3C%21--%20Center%20Sacred%20Diamond%20--%3E%20%3Cpolygon%20points%3D%2232%2C22%2042%2C32%2032%2C42%2022%2C32%22%20fill%3D%22url%28%23chumGold%29%22%20filter%3D%22url%28%23chumGlow%29%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%224%22%20fill%3D%22%23ffffff%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="class_sword"],
.skill-book-icon[data-skill-glyph="class_sword"],
.skill-modal-glyph[data-skill-glyph="class_sword"],
.glyph[data-skill-glyph="class_sword"],
.field-slot[data-skill-id="class_sword"] .glyph,
.kg-center-class-orb[data-skill-glyph="class_sword"] {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22swCrestBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffeaa7%22/%3E%20%3Cstop%20offset%3D%2240%25%22%20stop-color%3D%22%23d4af37%22/%3E%20%3Cstop%20offset%3D%2280%25%22%20stop-color%3D%22%238c6d1f%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%233d2c04%22/%3E%20%3C/radialGradient%3E%20%3ClinearGradient%20id%3D%22swGoldBlade%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22/%3E%20%3Cstop%20offset%3D%2235%25%22%20stop-color%3D%22%23fff2a3%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23f39c12%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23a04000%22/%3E%20%3C/linearGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23swCrestBg%29%22%20stroke%3D%22%23f1c40f%22%20stroke-width%3D%222%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2226%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%220.8%22%20stroke-dasharray%3D%223%2C2%22/%3E%20%3C%21--%20Thai%20Twin%20Swords%20Crossed%20--%3E%20%3Cg%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%3E%20%3C%21--%20Blade%201%20--%3E%20%3Cpath%20d%3D%22M%2016%2048%20L%2048%2016%22%20stroke%3D%22url%28%23swGoldBlade%29%22%20stroke-width%3D%223.5%22/%3E%20%3Cpath%20d%3D%22M%2044%2014%20L%2050%2018%22%20stroke%3D%22%23f39c12%22%20stroke-width%3D%222.5%22/%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2248%22%20r%3D%222.5%22%20fill%3D%22%23f1c40f%22/%3E%20%3C%21--%20Blade%202%20--%3E%20%3Cpath%20d%3D%22M%2048%2048%20L%2016%2016%22%20stroke%3D%22url%28%23swGoldBlade%29%22%20stroke-width%3D%223.5%22/%3E%20%3Cpath%20d%3D%22M%2014%2018%20L%2020%2014%22%20stroke%3D%22%23f39c12%22%20stroke-width%3D%222.5%22/%3E%20%3Ccircle%20cx%3D%2248%22%20cy%3D%2248%22%20r%3D%222.5%22%20fill%3D%22%23f1c40f%22/%3E%20%3C/g%3E%20%3C%21--%20Center%20Star%20Emblem%20--%3E%20%3Cpolygon%20points%3D%2232%2C22%2035%2C29%2042%2C32%2035%2C35%2032%2C42%2029%2C35%2022%2C32%2029%2C29%22%20fill%3D%22%23ffffff%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="muay_chaiya"],
.skill-book-icon[data-skill-glyph="muay_chaiya"],
.skill-modal-glyph[data-skill-glyph="muay_chaiya"],
.glyph[data-skill-glyph="muay_chaiya"],
.field-slot[data-skill-id="muay_chaiya"] .glyph,
.kg-glyph[data-skill-glyph="chaiya"],
.skill-book-icon[data-skill-glyph="chaiya"],
.skill-modal-glyph[data-skill-glyph="chaiya"],
.glyph[data-skill-glyph="chaiya"],
.field-slot[data-skill-id="chaiya"] .glyph,
.kg-glyph[data-skill-glyph="parry"],
.skill-book-icon[data-skill-glyph="parry"],
.skill-modal-glyph[data-skill-glyph="parry"],
.glyph[data-skill-glyph="parry"],
.field-slot[data-skill-id="parry"] .glyph,
.kg-glyph[data-skill-glyph="chaiya_elbow"],
.skill-book-icon[data-skill-glyph="chaiya_elbow"],
.skill-modal-glyph[data-skill-glyph="chaiya_elbow"],
.glyph[data-skill-glyph="chaiya_elbow"],
.field-slot[data-skill-id="chaiya_elbow"] .glyph,
.kg-glyph[data-skill-glyph="chaiya_knee"],
.skill-book-icon[data-skill-glyph="chaiya_knee"],
.skill-modal-glyph[data-skill-glyph="chaiya_knee"],
.glyph[data-skill-glyph="chaiya_knee"],
.field-slot[data-skill-id="chaiya_knee"] .glyph,
.kg-glyph[data-skill-glyph="chaiya_finish"],
.skill-book-icon[data-skill-glyph="chaiya_finish"],
.skill-modal-glyph[data-skill-glyph="chaiya_finish"],
.glyph[data-skill-glyph="chaiya_finish"],
.field-slot[data-skill-id="chaiya_finish"] .glyph,
.kg-glyph[data-skill-glyph="chaiya_cover"],
.skill-book-icon[data-skill-glyph="chaiya_cover"],
.skill-modal-glyph[data-skill-glyph="chaiya_cover"],
.glyph[data-skill-glyph="chaiya_cover"],
.field-slot[data-skill-id="chaiya_cover"] .glyph,
.kg-glyph[data-skill-glyph="chaiya_return"],
.skill-book-icon[data-skill-glyph="chaiya_return"],
.skill-modal-glyph[data-skill-glyph="chaiya_return"],
.glyph[data-skill-glyph="chaiya_return"],
.field-slot[data-skill-id="chaiya_return"] .glyph,
.kg-glyph[data-skill-glyph="chaiya_advanced_counter"],
.skill-book-icon[data-skill-glyph="chaiya_advanced_counter"],
.skill-modal-glyph[data-skill-glyph="chaiya_advanced_counter"],
.glyph[data-skill-glyph="chaiya_advanced_counter"],
.field-slot[data-skill-id="chaiya_advanced_counter"] .glyph,
.kg-glyph[data-skill-glyph="chaiya_master_counter"],
.skill-book-icon[data-skill-glyph="chaiya_master_counter"],
.skill-modal-glyph[data-skill-glyph="chaiya_master_counter"],
.glyph[data-skill-glyph="chaiya_master_counter"],
.field-slot[data-skill-id="chaiya_master_counter"] .glyph,
.kg-glyph[data-skill-glyph="chaiya_final_counter"],
.skill-book-icon[data-skill-glyph="chaiya_final_counter"],
.skill-modal-glyph[data-skill-glyph="chaiya_final_counter"],
.glyph[data-skill-glyph="chaiya_final_counter"],
.field-slot[data-skill-id="chaiya_final_counter"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22cyBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%232a9d8f%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23144d46%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2308201d%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23cyBg%29%22%20stroke%3D%22%23e76f51%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Guarding%20Arms%20Form%20--%3E%20%3Cpath%20d%3D%22M%2020%2046%20L%2024%2024%20L%2032%2030%22%20fill%3D%22none%22%20stroke%3D%22%23f4a261%22%20stroke-width%3D%224.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%20%3Cpath%20d%3D%22M%2044%2046%20L%2040%2024%20L%2032%2030%22%20fill%3D%22none%22%20stroke%3D%22%23f4a261%22%20stroke-width%3D%224.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%20%3C%21--%20Sacred%20Mongkhon%20Headband%20--%3E%20%3Cellipse%20cx%3D%2232%22%20cy%3D%2218%22%20rx%3D%228%22%20ry%3D%224%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22/%3E%20%3Cline%20x1%3D%2232%22%20y1%3D%2214%22%20x2%3D%2232%22%20y2%3D%228%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Defensive%20Shield%20Ripple%20--%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2220%22%20fill%3D%22none%22%20stroke%3D%22%23e9c46a%22%20stroke-width%3D%221.2%22%20stroke-dasharray%3D%223%2C3%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="muay_korat"],
.skill-book-icon[data-skill-glyph="muay_korat"],
.skill-modal-glyph[data-skill-glyph="muay_korat"],
.glyph[data-skill-glyph="muay_korat"],
.field-slot[data-skill-id="muay_korat"] .glyph,
.kg-glyph[data-skill-glyph="korat"],
.skill-book-icon[data-skill-glyph="korat"],
.skill-modal-glyph[data-skill-glyph="korat"],
.glyph[data-skill-glyph="korat"],
.field-slot[data-skill-id="korat"] .glyph,
.kg-glyph[data-skill-glyph="punch"],
.skill-book-icon[data-skill-glyph="punch"],
.skill-modal-glyph[data-skill-glyph="punch"],
.glyph[data-skill-glyph="punch"],
.field-slot[data-skill-id="punch"] .glyph,
.kg-glyph[data-skill-glyph="teep"],
.skill-book-icon[data-skill-glyph="teep"],
.skill-modal-glyph[data-skill-glyph="teep"],
.glyph[data-skill-glyph="teep"],
.field-slot[data-skill-id="teep"] .glyph,
.kg-glyph[data-skill-glyph="grapple"],
.skill-book-icon[data-skill-glyph="grapple"],
.skill-modal-glyph[data-skill-glyph="grapple"],
.glyph[data-skill-glyph="grapple"],
.field-slot[data-skill-id="grapple"] .glyph,
.kg-glyph[data-skill-glyph="korat_heavy"],
.skill-book-icon[data-skill-glyph="korat_heavy"],
.skill-modal-glyph[data-skill-glyph="korat_heavy"],
.glyph[data-skill-glyph="korat_heavy"],
.field-slot[data-skill-id="korat_heavy"] .glyph,
.kg-glyph[data-skill-glyph="korat_swing"],
.skill-book-icon[data-skill-glyph="korat_swing"],
.skill-modal-glyph[data-skill-glyph="korat_swing"],
.glyph[data-skill-glyph="korat_swing"],
.field-slot[data-skill-id="korat_swing"] .glyph,
.kg-glyph[data-skill-glyph="korat_finish"],
.skill-book-icon[data-skill-glyph="korat_finish"],
.skill-modal-glyph[data-skill-glyph="korat_finish"],
.glyph[data-skill-glyph="korat_finish"],
.field-slot[data-skill-id="korat_finish"] .glyph,
.kg-glyph[data-skill-glyph="korat_pierce"],
.skill-book-icon[data-skill-glyph="korat_pierce"],
.skill-modal-glyph[data-skill-glyph="korat_pierce"],
.glyph[data-skill-glyph="korat_pierce"],
.field-slot[data-skill-id="korat_pierce"] .glyph,
.kg-glyph[data-skill-glyph="korat_press"],
.skill-book-icon[data-skill-glyph="korat_press"],
.skill-modal-glyph[data-skill-glyph="korat_press"],
.glyph[data-skill-glyph="korat_press"],
.field-slot[data-skill-id="korat_press"] .glyph,
.kg-glyph[data-skill-glyph="korat_advanced_strike"],
.skill-book-icon[data-skill-glyph="korat_advanced_strike"],
.skill-modal-glyph[data-skill-glyph="korat_advanced_strike"],
.glyph[data-skill-glyph="korat_advanced_strike"],
.field-slot[data-skill-id="korat_advanced_strike"] .glyph,
.kg-glyph[data-skill-glyph="korat_master_strike"],
.skill-book-icon[data-skill-glyph="korat_master_strike"],
.skill-modal-glyph[data-skill-glyph="korat_master_strike"],
.glyph[data-skill-glyph="korat_master_strike"],
.field-slot[data-skill-id="korat_master_strike"] .glyph,
.kg-glyph[data-skill-glyph="korat_final_strike"],
.skill-book-icon[data-skill-glyph="korat_final_strike"],
.skill-modal-glyph[data-skill-glyph="korat_final_strike"],
.glyph[data-skill-glyph="korat_final_strike"],
.field-slot[data-skill-id="korat_final_strike"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22koBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23e76f51%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%239d2a14%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%233d0d04%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23koBg%29%22%20stroke%3D%22%23f4a261%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Fist%20Striking%20Right%20--%3E%20%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%2220%22%20height%3D%2220%22%20rx%3D%226%22%20fill%3D%22%23f4a261%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22/%3E%20%3Cline%20x1%3D%2228%22%20y1%3D%2222%22%20x2%3D%2228%22%20y2%3D%2242%22%20stroke%3D%22%23e76f51%22%20stroke-width%3D%221.5%22/%3E%20%3Cline%20x1%3D%2234%22%20y1%3D%2222%22%20x2%3D%2234%22%20y2%3D%2242%22%20stroke%3D%22%23e76f51%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Impact%20shock%20lines%20--%3E%20%3Cpath%20d%3D%22M%2046%2020%20L%2056%2014%22%20stroke%3D%22%23ffeb3b%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22/%3E%20%3Cpath%20d%3D%22M%2048%2032%20L%2060%2032%22%20stroke%3D%22%23ffeb3b%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22/%3E%20%3Cpath%20d%3D%22M%2046%2044%20L%2056%2050%22%20stroke%3D%22%23ffeb3b%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="muay_lopburi"],
.skill-book-icon[data-skill-glyph="muay_lopburi"],
.skill-modal-glyph[data-skill-glyph="muay_lopburi"],
.glyph[data-skill-glyph="muay_lopburi"],
.field-slot[data-skill-id="muay_lopburi"] .glyph,
.kg-glyph[data-skill-glyph="lopburi"],
.skill-book-icon[data-skill-glyph="lopburi"],
.skill-modal-glyph[data-skill-glyph="lopburi"],
.glyph[data-skill-glyph="lopburi"],
.field-slot[data-skill-id="lopburi"] .glyph,
.kg-glyph[data-skill-glyph="footwork"],
.skill-book-icon[data-skill-glyph="footwork"],
.skill-modal-glyph[data-skill-glyph="footwork"],
.glyph[data-skill-glyph="footwork"],
.field-slot[data-skill-id="footwork"] .glyph,
.kg-glyph[data-skill-glyph="circle_step"],
.skill-book-icon[data-skill-glyph="circle_step"],
.skill-modal-glyph[data-skill-glyph="circle_step"],
.glyph[data-skill-glyph="circle_step"],
.field-slot[data-skill-id="circle_step"] .glyph,
.kg-glyph[data-skill-glyph="step"],
.skill-book-icon[data-skill-glyph="step"],
.skill-modal-glyph[data-skill-glyph="step"],
.glyph[data-skill-glyph="step"],
.field-slot[data-skill-id="step"] .glyph,
.kg-glyph[data-skill-glyph="evade"],
.skill-book-icon[data-skill-glyph="evade"],
.skill-modal-glyph[data-skill-glyph="evade"],
.glyph[data-skill-glyph="evade"],
.field-slot[data-skill-id="evade"] .glyph,
.kg-glyph[data-skill-glyph="lopburi_angle"],
.skill-book-icon[data-skill-glyph="lopburi_angle"],
.skill-modal-glyph[data-skill-glyph="lopburi_angle"],
.glyph[data-skill-glyph="lopburi_angle"],
.field-slot[data-skill-id="lopburi_angle"] .glyph,
.kg-glyph[data-skill-glyph="lopburi_counter"],
.skill-book-icon[data-skill-glyph="lopburi_counter"],
.skill-modal-glyph[data-skill-glyph="lopburi_counter"],
.glyph[data-skill-glyph="lopburi_counter"],
.field-slot[data-skill-id="lopburi_counter"] .glyph,
.kg-glyph[data-skill-glyph="lopburi_finish"],
.skill-book-icon[data-skill-glyph="lopburi_finish"],
.skill-modal-glyph[data-skill-glyph="lopburi_finish"],
.glyph[data-skill-glyph="lopburi_finish"],
.field-slot[data-skill-id="lopburi_finish"] .glyph,
.kg-glyph[data-skill-glyph="lopburi_reverse"],
.skill-book-icon[data-skill-glyph="lopburi_reverse"],
.skill-modal-glyph[data-skill-glyph="lopburi_reverse"],
.glyph[data-skill-glyph="lopburi_reverse"],
.field-slot[data-skill-id="lopburi_reverse"] .glyph,
.kg-glyph[data-skill-glyph="lopburi_slipcounter"],
.skill-book-icon[data-skill-glyph="lopburi_slipcounter"],
.skill-modal-glyph[data-skill-glyph="lopburi_slipcounter"],
.glyph[data-skill-glyph="lopburi_slipcounter"],
.field-slot[data-skill-id="lopburi_slipcounter"] .glyph,
.kg-glyph[data-skill-glyph="lopburi_advanced_angle"],
.skill-book-icon[data-skill-glyph="lopburi_advanced_angle"],
.skill-modal-glyph[data-skill-glyph="lopburi_advanced_angle"],
.glyph[data-skill-glyph="lopburi_advanced_angle"],
.field-slot[data-skill-id="lopburi_advanced_angle"] .glyph,
.kg-glyph[data-skill-glyph="lopburi_master_counter"],
.skill-book-icon[data-skill-glyph="lopburi_master_counter"],
.skill-modal-glyph[data-skill-glyph="lopburi_master_counter"],
.glyph[data-skill-glyph="lopburi_master_counter"],
.field-slot[data-skill-id="lopburi_master_counter"] .glyph,
.kg-glyph[data-skill-glyph="lopburi_final_counter"],
.skill-book-icon[data-skill-glyph="lopburi_final_counter"],
.skill-modal-glyph[data-skill-glyph="lopburi_final_counter"],
.glyph[data-skill-glyph="lopburi_final_counter"],
.field-slot[data-skill-id="lopburi_final_counter"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22lopBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%239c27b0%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%234a148c%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%231a0533%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23lopBg%29%22%20stroke%3D%22%23ba68c8%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Feint%20Ghost%20Fist%20%28Afterimage%29%20--%3E%20%3Ccircle%20cx%3D%2224%22%20cy%3D%2226%22%20r%3D%229%22%20fill%3D%22none%22%20stroke%3D%22%23e1bee7%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%223%2C2%22%20opacity%3D%220.6%22/%3E%20%3C%21--%20Main%20Swift%20Fist%20--%3E%20%3Ccircle%20cx%3D%2238%22%20cy%3D%2236%22%20r%3D%2211%22%20fill%3D%22%23ba68c8%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22/%3E%20%3Cpath%20d%3D%22M%2012%2044%20C%2020%2040%2C%2028%2036%2C%2038%2036%22%20stroke%3D%22%23e1bee7%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="muay_thasao"],
.skill-book-icon[data-skill-glyph="muay_thasao"],
.skill-modal-glyph[data-skill-glyph="muay_thasao"],
.glyph[data-skill-glyph="muay_thasao"],
.field-slot[data-skill-id="muay_thasao"] .glyph,
.kg-glyph[data-skill-glyph="thasao"],
.skill-book-icon[data-skill-glyph="thasao"],
.skill-modal-glyph[data-skill-glyph="thasao"],
.glyph[data-skill-glyph="thasao"],
.field-slot[data-skill-id="thasao"] .glyph,
.kg-glyph[data-skill-glyph="thasao_step"],
.skill-book-icon[data-skill-glyph="thasao_step"],
.skill-modal-glyph[data-skill-glyph="thasao_step"],
.glyph[data-skill-glyph="thasao_step"],
.field-slot[data-skill-id="thasao_step"] .glyph,
.kg-glyph[data-skill-glyph="thasao_flurry"],
.skill-book-icon[data-skill-glyph="thasao_flurry"],
.skill-modal-glyph[data-skill-glyph="thasao_flurry"],
.glyph[data-skill-glyph="thasao_flurry"],
.field-slot[data-skill-id="thasao_flurry"] .glyph,
.kg-glyph[data-skill-glyph="thasao_finish"],
.skill-book-icon[data-skill-glyph="thasao_finish"],
.skill-modal-glyph[data-skill-glyph="thasao_finish"],
.glyph[data-skill-glyph="thasao_finish"],
.field-slot[data-skill-id="thasao_finish"] .glyph,
.kg-glyph[data-skill-glyph="thasao_rush"],
.skill-book-icon[data-skill-glyph="thasao_rush"],
.skill-modal-glyph[data-skill-glyph="thasao_rush"],
.glyph[data-skill-glyph="thasao_rush"],
.field-slot[data-skill-id="thasao_rush"] .glyph,
.kg-glyph[data-skill-glyph="thasao_retreat"],
.skill-book-icon[data-skill-glyph="thasao_retreat"],
.skill-modal-glyph[data-skill-glyph="thasao_retreat"],
.glyph[data-skill-glyph="thasao_retreat"],
.field-slot[data-skill-id="thasao_retreat"] .glyph,
.kg-glyph[data-skill-glyph="thasao_advanced_flurry"],
.skill-book-icon[data-skill-glyph="thasao_advanced_flurry"],
.skill-modal-glyph[data-skill-glyph="thasao_advanced_flurry"],
.glyph[data-skill-glyph="thasao_advanced_flurry"],
.field-slot[data-skill-id="thasao_advanced_flurry"] .glyph,
.kg-glyph[data-skill-glyph="thasao_master_rush"],
.skill-book-icon[data-skill-glyph="thasao_master_rush"],
.skill-modal-glyph[data-skill-glyph="thasao_master_rush"],
.glyph[data-skill-glyph="thasao_master_rush"],
.field-slot[data-skill-id="thasao_master_rush"] .glyph,
.kg-glyph[data-skill-glyph="thasao_final_rush"],
.skill-book-icon[data-skill-glyph="thasao_final_rush"],
.skill-modal-glyph[data-skill-glyph="thasao_final_rush"],
.glyph[data-skill-glyph="thasao_final_rush"],
.field-slot[data-skill-id="thasao_final_rush"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22tsBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2300b4d8%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23005f73%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23021c22%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23tsBg%29%22%20stroke%3D%22%2394d2bd%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20High%20Crescent%20Kick%20Arc%20--%3E%20%3Cpath%20d%3D%22M%2014%2050%20C%2018%2020%2C%2036%2012%2C%2052%2018%22%20fill%3D%22none%22%20stroke%3D%22%23e9d8a6%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22/%3E%20%3C%21--%20Wind%20Blade%20Slash%20--%3E%20%3Cpath%20d%3D%22M%2022%2042%20C%2028%2024%2C%2040%2018%2C%2054%2022%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.5%22/%3E%20%3Ccircle%20cx%3D%2252%22%20cy%3D%2218%22%20r%3D%224%22%20fill%3D%22%230a9396%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="seer_mark"],
.skill-book-icon[data-skill-glyph="seer_mark"],
.skill-modal-glyph[data-skill-glyph="seer_mark"],
.glyph[data-skill-glyph="seer_mark"],
.field-slot[data-skill-id="seer_mark"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22smBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23c1121f%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23780000%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%232b0000%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23smBg%29%22%20stroke%3D%22%23fdf0d5%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Crimson%20Talisman%20Paper%20--%3E%20%3Crect%20x%3D%2220%22%20y%3D%2212%22%20width%3D%2224%22%20height%3D%2240%22%20rx%3D%223%22%20fill%3D%22%23b7094c%22%20stroke%3D%22%23fdf0d5%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Golden%20Yantra%20Inscription%20--%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2222%22%20r%3D%224%22%20fill%3D%22none%22%20stroke%3D%22%23fdf0d5%22%20stroke-width%3D%221.2%22/%3E%20%3Cline%20x1%3D%2232%22%20y1%3D%2228%22%20x2%3D%2232%22%20y2%3D%2246%22%20stroke%3D%22%23fdf0d5%22%20stroke-width%3D%221.5%22/%3E%20%3Cline%20x1%3D%2226%22%20y1%3D%2234%22%20x2%3D%2238%22%20y2%3D%2234%22%20stroke%3D%22%23fdf0d5%22%20stroke-width%3D%221.2%22/%3E%20%3Cline%20x1%3D%2226%22%20y1%3D%2240%22%20x2%3D%2238%22%20y2%3D%2240%22%20stroke%3D%22%23fdf0d5%22%20stroke-width%3D%221.2%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="seer_rice"],
.skill-book-icon[data-skill-glyph="seer_rice"],
.skill-modal-glyph[data-skill-glyph="seer_rice"],
.glyph[data-skill-glyph="seer_rice"],
.field-slot[data-skill-id="seer_rice"] .glyph,
.kg-glyph[data-skill-glyph="seer_scatter"],
.skill-book-icon[data-skill-glyph="seer_scatter"],
.skill-modal-glyph[data-skill-glyph="seer_scatter"],
.glyph[data-skill-glyph="seer_scatter"],
.field-slot[data-skill-id="seer_scatter"] .glyph,
.kg-glyph[data-skill-glyph="seer_ash_rice"],
.skill-book-icon[data-skill-glyph="seer_ash_rice"],
.skill-modal-glyph[data-skill-glyph="seer_ash_rice"],
.glyph[data-skill-glyph="seer_ash_rice"],
.field-slot[data-skill-id="seer_ash_rice"] .glyph,
.kg-glyph[data-skill-glyph="seer_spirit_rain"],
.skill-book-icon[data-skill-glyph="seer_spirit_rain"],
.skill-modal-glyph[data-skill-glyph="seer_spirit_rain"],
.glyph[data-skill-glyph="seer_spirit_rain"],
.field-slot[data-skill-id="seer_spirit_rain"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22srBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2348cae4%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%230077b6%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2303045e%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23srBg%29%22%20stroke%3D%22%23caf0f8%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Rice%20Grains%20Radiating%20--%3E%20%3Cg%20fill%3D%22%23ffffff%22%20stroke%3D%22%2390e0ef%22%20stroke-width%3D%220.8%22%3E%20%3Cellipse%20cx%3D%2232%22%20cy%3D%2220%22%20rx%3D%222.5%22%20ry%3D%225%22/%3E%20%3Cellipse%20cx%3D%2242%22%20cy%3D%2226%22%20rx%3D%222.5%22%20ry%3D%225%22%20transform%3D%22rotate%2835%2042%2026%29%22/%3E%20%3Cellipse%20cx%3D%2244%22%20cy%3D%2238%22%20rx%3D%222.5%22%20ry%3D%225%22%20transform%3D%22rotate%2875%2044%2038%29%22/%3E%20%3Cellipse%20cx%3D%2232%22%20cy%3D%2246%22%20rx%3D%222.5%22%20ry%3D%225%22/%3E%20%3Cellipse%20cx%3D%2220%22%20cy%3D%2238%22%20rx%3D%222.5%22%20ry%3D%225%22%20transform%3D%22rotate%28-75%2020%2038%29%22/%3E%20%3Cellipse%20cx%3D%2222%22%20cy%3D%2226%22%20rx%3D%222.5%22%20ry%3D%225%22%20transform%3D%22rotate%28-35%2022%2026%29%22/%3E%20%3C%21--%20Center%20Grain%20--%3E%20%3Cellipse%20cx%3D%2232%22%20cy%3D%2232%22%20rx%3D%223%22%20ry%3D%226%22%20fill%3D%22%23ffd166%22/%3E%20%3C/g%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="seer_buffalo"],
.skill-book-icon[data-skill-glyph="seer_buffalo"],
.skill-modal-glyph[data-skill-glyph="seer_buffalo"],
.glyph[data-skill-glyph="seer_buffalo"],
.field-slot[data-skill-id="seer_buffalo"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22sbBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23d4af37%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23805b10%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%233a2503%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23sbBg%29%22%20stroke%3D%22%23f3c768%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Horns%20--%3E%20%3Cpath%20d%3D%22M%2018%2016%20C%2024%2022%2C%2028%2026%2C%2032%2030%20C%2036%2026%2C%2040%2022%2C%2046%2016%20C%2042%2012%2C%2036%2018%2C%2032%2020%20C%2028%2018%2C%2022%2012%2C%2018%2016%20Z%22%20fill%3D%22%23ffd700%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22/%3E%20%3C%21--%20Head%20%26%20Snout%20--%3E%20%3Cpolygon%20points%3D%2232%2C24%2040%2C36%2036%2C46%2028%2C46%2024%2C36%22%20fill%3D%22%236e4e14%22%20stroke%3D%22%23ffd700%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Glowing%20Red%20Eyes%20--%3E%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2232%22%20r%3D%222%22%20fill%3D%22%23ff0000%22/%3E%20%3Ccircle%20cx%3D%2236%22%20cy%3D%2232%22%20r%3D%222%22%20fill%3D%22%23ff0000%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2242%22%20r%3D%222%22%20fill%3D%22%23ffd700%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="seer_curse"],
.skill-book-icon[data-skill-glyph="seer_curse"],
.skill-modal-glyph[data-skill-glyph="seer_curse"],
.glyph[data-skill-glyph="seer_curse"],
.field-slot[data-skill-id="seer_curse"] .glyph,
.kg-glyph[data-skill-glyph="seer_deep_curse"],
.skill-book-icon[data-skill-glyph="seer_deep_curse"],
.skill-modal-glyph[data-skill-glyph="seer_deep_curse"],
.glyph[data-skill-glyph="seer_deep_curse"],
.field-slot[data-skill-id="seer_deep_curse"] .glyph,
.kg-glyph[data-skill-glyph="seer_hexburst"],
.skill-book-icon[data-skill-glyph="seer_hexburst"],
.skill-modal-glyph[data-skill-glyph="seer_hexburst"],
.glyph[data-skill-glyph="seer_hexburst"],
.field-slot[data-skill-id="seer_hexburst"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22scBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%237209b7%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%233a0ca3%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310002b%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23scBg%29%22%20stroke%3D%22%23f72585%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Soul%20Skull%20--%3E%20%3Cellipse%20cx%3D%2232%22%20cy%3D%2228%22%20rx%3D%2214%22%20ry%3D%2212%22%20fill%3D%22%23240046%22%20stroke%3D%22%23f72585%22%20stroke-width%3D%221.5%22/%3E%20%3Crect%20x%3D%2226%22%20y%3D%2238%22%20width%3D%2212%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23240046%22%20stroke%3D%22%23f72585%22%20stroke-width%3D%221.2%22/%3E%20%3C%21--%20Eye%20Sockets%20--%3E%20%3Ccircle%20cx%3D%2227%22%20cy%3D%2227%22%20r%3D%223%22%20fill%3D%22%23f72585%22/%3E%20%3Ccircle%20cx%3D%2237%22%20cy%3D%2227%22%20r%3D%223%22%20fill%3D%22%23f72585%22/%3E%20%3C%21--%20Curse%20Smoke%20Wisp%20--%3E%20%3Cpath%20d%3D%22M%2032%2010%20Q%2038%206%2C%2032%202%22%20stroke%3D%22%23e0aaff%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="seer_binding"],
.skill-book-icon[data-skill-glyph="seer_binding"],
.skill-modal-glyph[data-skill-glyph="seer_binding"],
.glyph[data-skill-glyph="seer_binding"],
.field-slot[data-skill-id="seer_binding"] .glyph,
.kg-glyph[data-skill-glyph="seer_seal"],
.skill-book-icon[data-skill-glyph="seer_seal"],
.skill-modal-glyph[data-skill-glyph="seer_seal"],
.glyph[data-skill-glyph="seer_seal"],
.field-slot[data-skill-id="seer_seal"] .glyph,
.kg-glyph[data-skill-glyph="seer_spirit_bind"],
.skill-book-icon[data-skill-glyph="seer_spirit_bind"],
.skill-modal-glyph[data-skill-glyph="seer_spirit_bind"],
.glyph[data-skill-glyph="seer_spirit_bind"],
.field-slot[data-skill-id="seer_spirit_bind"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22sbindBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%234a4e69%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%2322223b%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230a090c%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23sbindBg%29%22%20stroke%3D%22%23f2e9e4%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Interwoven%20Sacred%20Holy%20Threads%20--%3E%20%3Cpolygon%20points%3D%2232%2C10%2050%2C44%2014%2C44%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22/%3E%20%3Cpolygon%20points%3D%2232%2C54%2050%2C20%2014%2C20%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.8%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%228%22%20fill%3D%22none%22%20stroke%3D%22%23ffd166%22%20stroke-width%3D%221.2%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%223%22%20fill%3D%22%23ffffff%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="seer_burst"],
.skill-book-icon[data-skill-glyph="seer_burst"],
.skill-modal-glyph[data-skill-glyph="seer_burst"],
.glyph[data-skill-glyph="seer_burst"],
.field-slot[data-skill-id="seer_burst"] .glyph,
.kg-glyph[data-skill-glyph="seer_ward_break"],
.skill-book-icon[data-skill-glyph="seer_ward_break"],
.skill-modal-glyph[data-skill-glyph="seer_ward_break"],
.glyph[data-skill-glyph="seer_ward_break"],
.field-slot[data-skill-id="seer_ward_break"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22sburstBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff007f%22/%3E%20%3Cstop%20offset%3D%2260%25%22%20stop-color%3D%22%237b2cbf%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23240046%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23sburstBg%29%22%20stroke%3D%22%23ff70a6%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Burst%20Radiance%20--%3E%20%3Cpolygon%20points%3D%2232%2C12%2036%2C26%2050%2C20%2038%2C30%2050%2C40%2036%2C36%2032%2C52%2028%2C36%2014%2C40%2026%2C30%2014%2C20%2028%2C26%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23ff70a6%22%20stroke-width%3D%221%22/%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%226%22%20fill%3D%22%23ffd166%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="seer_pot"],
.skill-book-icon[data-skill-glyph="seer_pot"],
.skill-modal-glyph[data-skill-glyph="seer_pot"],
.glyph[data-skill-glyph="seer_pot"],
.field-slot[data-skill-id="seer_pot"] .glyph,
.kg-glyph[data-skill-glyph="seer_spirit"],
.skill-book-icon[data-skill-glyph="seer_spirit"],
.skill-modal-glyph[data-skill-glyph="seer_spirit"],
.glyph[data-skill-glyph="seer_spirit"],
.field-slot[data-skill-id="seer_spirit"] .glyph,
.kg-glyph[data-skill-glyph="seer_trance"],
.skill-book-icon[data-skill-glyph="seer_trance"],
.skill-modal-glyph[data-skill-glyph="seer_trance"],
.glyph[data-skill-glyph="seer_trance"],
.field-slot[data-skill-id="seer_trance"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22spotBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23a0522d%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%235c2e14%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23231006%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23spotBg%29%22%20stroke%3D%22%23cd853f%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Earthen%20Pot%20Body%20--%3E%20%3Cellipse%20cx%3D%2232%22%20cy%3D%2238%22%20rx%3D%2216%22%20ry%3D%2214%22%20fill%3D%22%238b4513%22%20stroke%3D%22%23d2691e%22%20stroke-width%3D%221.5%22/%3E%20%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%2220%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22%23a0522d%22%20stroke%3D%22%23d2691e%22%20stroke-width%3D%221.2%22/%3E%20%3C%21--%20White%20Sacred%20Talisman%20Cloth%20on%20Top%20--%3E%20%3Cpath%20d%3D%22M%2020%2022%20C%2026%2018%2C%2038%2018%2C%2044%2022%20L%2040%2026%20L%2024%2026%20Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23e63946%22%20stroke-width%3D%221%22/%3E%20%3Cline%20x1%3D%2228%22%20y1%3D%2220%22%20x2%3D%2236%22%20y2%3D%2224%22%20stroke%3D%22%23e63946%22%20stroke-width%3D%221%22/%3E%20%3C/svg%3E") !important;
}

.kg-glyph[data-skill-glyph="seer_poison"],
.skill-book-icon[data-skill-glyph="seer_poison"],
.skill-modal-glyph[data-skill-glyph="seer_poison"],
.glyph[data-skill-glyph="seer_poison"],
.field-slot[data-skill-id="seer_poison"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2064%2064%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22spoisBg%22%20cx%3D%2250%25%22%20cy%3D%2250%25%22%20r%3D%2250%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%232dc653%22/%3E%20%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23155d27%22/%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23061c0c%22/%3E%20%3C/radialGradient%3E%20%3C/defs%3E%20%3Ccircle%20cx%3D%2232%22%20cy%3D%2232%22%20r%3D%2230%22%20fill%3D%22url%28%23spoisBg%29%22%20stroke%3D%22%236a994e%22%20stroke-width%3D%221.5%22/%3E%20%3C%21--%20Mystical%20Toxic%20Leaves%20--%3E%20%3Cpath%20d%3D%22M%2032%2048%20C%2024%2038%2C%2016%2026%2C%2032%2016%20C%2048%2026%2C%2040%2038%2C%2032%2048%20Z%22%20fill%3D%22%2352b788%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%221.2%22/%3E%20%3Cline%20x1%3D%2232%22%20y1%3D%2220%22%20x2%3D%2232%22%20y2%3D%2244%22%20stroke%3D%22%23d8f3dc%22%20stroke-width%3D%221.2%22/%3E%20%3C%21--%20Toxic%20Bubbles%20--%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%222.5%22%20fill%3D%22%2374c69d%22/%3E%20%3Ccircle%20cx%3D%2242%22%20cy%3D%2224%22%20r%3D%223%22%20fill%3D%22%23b7e4c7%22/%3E%20%3C/svg%3E") !important;
}
.hud-btn-icon[data-hud-icon] {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0 !important;
  color: transparent !important;
  vertical-align: middle;
  line-height: 0;
  flex-shrink: 0;
}
.hud-btn-icon[data-hud-icon="bag"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22bagLeather%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23bcaaa4%22/%3E %3Cstop offset=%2235%25%22 stop-color=%22%238d6e63%22/%3E %3Cstop offset=%2275%25%22 stop-color=%22%235d4037%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%233e2723%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Main Pouch Body --%3E %3Cpath d=%22M12 20 C10 32%2C 12 40%2C 24 42 C36 40%2C 38 32%2C 36 20 L30 14 L18 14 Z%22 fill=%22url%28%23bagLeather%29%22 stroke=%22%23ffb74d%22 stroke-width=%221.2%22/%3E %3C%21-- Bag Flap / Tied Neck --%3E %3Cellipse cx=%2224%22 cy=%2218%22 rx=%228%22 ry=%224%22 fill=%22%236d4c41%22 stroke=%22%23ffd54f%22 stroke-width=%221%22/%3E %3C%21-- Golden Tie Cord %26 Tassels --%3E %3Cline x1=%2220%22 y1=%2219%22 x2=%2218%22 y2=%2228%22 stroke=%22%23ffd54f%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E %3Cline x1=%2228%22 y1=%2219%22 x2=%2230%22 y2=%2228%22 stroke=%22%23ffd54f%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E %3C%21-- Center Golden Medallion / Buckle --%3E %3Ccircle cx=%2224%22 cy=%2226%22 r=%223.2%22 fill=%22%23ffb300%22 stroke=%22%23fff%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2224%22 cy=%2226%22 r=%221.2%22 fill=%22%23d32f2f%22/%3E %3C/svg%3E") !important; }
.hud-btn-icon[data-hud-icon="skills"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22skillBolt%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%2285%25%22 stop-color=%22%23ff6f00%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Background Glow --%3E %3Ccircle cx=%2224%22 cy=%2224%22 r=%2218%22 fill=%22%23ff9800%22 opacity=%220.25%22/%3E %3C%21-- Lightning Bolt --%3E %3Cpolygon points=%2226%2C4 12%2C24 22%2C24 18%2C44 36%2C20 26%2C20%22 fill=%22url%28%23skillBolt%29%22 stroke=%22%23ffffff%22 stroke-width=%221.2%22/%3E %3C%21-- Spark particles --%3E %3Ccircle cx=%2236%22 cy=%2212%22 r=%221.5%22 fill=%22%23ffe082%22/%3E %3Ccircle cx=%2210%22 cy=%2234%22 r=%221.5%22 fill=%22%23ffe082%22/%3E %3C/svg%3E") !important; }
.hud-btn-icon[data-hud-icon="chat"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22chatBubble%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%2380deea%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%2300acc1%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23006064%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Speech Talisman Bubble --%3E %3Cpath d=%22M8 12 C8 8%2C 40 8%2C 40 12 L40 30 C40 34%2C 30 34%2C 24 34 L16 40 L16 34 L8 34 Z%22 fill=%22url%28%23chatBubble%29%22 stroke=%22%23e0f7fa%22 stroke-width=%221.2%22/%3E %3C%21-- 3 Chat Dots --%3E %3Ccircle cx=%2218%22 cy=%2222%22 r=%222.2%22 fill=%22%23ffffff%22/%3E %3Ccircle cx=%2224%22 cy=%2222%22 r=%222.2%22 fill=%22%23ffffff%22/%3E %3Ccircle cx=%2230%22 cy=%2222%22 r=%222.2%22 fill=%22%23ffffff%22/%3E %3C/svg%3E") !important; }
.hud-btn-icon[data-hud-icon="menu"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22menuGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23ffb300%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23e65100%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- 3 Stylized Golden Royal Bars --%3E %3Crect x=%228%22 y=%2210%22 width=%2232%22 height=%225%22 rx=%222.5%22 fill=%22url%28%23menuGold%29%22 stroke=%22%23fff%22 stroke-width=%220.8%22/%3E %3Crect x=%228%22 y=%2221%22 width=%2232%22 height=%225%22 rx=%222.5%22 fill=%22url%28%23menuGold%29%22 stroke=%22%23fff%22 stroke-width=%220.8%22/%3E %3Crect x=%228%22 y=%2232%22 width=%2232%22 height=%225%22 rx=%222.5%22 fill=%22url%28%23menuGold%29%22 stroke=%22%23fff%22 stroke-width=%220.8%22/%3E %3C%21-- Gem Insets on Bars --%3E %3Ccircle cx=%2212%22 cy=%2212.5%22 r=%221.5%22 fill=%22%23d32f2f%22/%3E %3Ccircle cx=%2212%22 cy=%2223.5%22 r=%221.5%22 fill=%22%2300bcd4%22/%3E %3Ccircle cx=%2212%22 cy=%2234.5%22 r=%221.5%22 fill=%22%23d32f2f%22/%3E %3C/svg%3E") !important; }
.hud-btn-icon[data-hud-icon="mana"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3CradialGradient id=%22manaDrop%22 cx=%2238%25%22 cy=%2240%25%22 r=%2260%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23e0f7fa%22/%3E %3Cstop offset=%2230%25%22 stop-color=%22%2340c4ff%22/%3E %3Cstop offset=%2270%25%22 stop-color=%22%230288d1%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%2301579b%22/%3E %3C/radialGradient%3E %3C/defs%3E %3C%21-- Teardrop Gem --%3E %3Cpath d=%22M24 6 C24 6%2C 38 22%2C 38 30 C38 38%2C 32 44%2C 24 44 C16 44%2C 10 38%2C 10 30 C10 22%2C 24 6%2C 24 6 Z%22 fill=%22url%28%23manaDrop%29%22 stroke=%22%2380d8ff%22 stroke-width=%221.2%22/%3E %3C%21-- Highlight Flare --%3E %3Cellipse cx=%2220%22 cy=%2226%22 rx=%224%22 ry=%227%22 transform=%22rotate%28-20 20 26%29%22 fill=%22%23ffffff%22 opacity=%220.6%22/%3E %3Cpolygon points=%2224%2C14 25%2C17 28%2C18 25%2C19 24%2C22 23%2C19 20%2C18 23%2C17%22 fill=%22%23ffffff%22/%3E %3C/svg%3E") !important; width: 14px; height: 14px; }
.drawer-nav-icon[data-menu-icon] {
  display: inline-block;
  width: 26px;
  height: 26px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0 !important;
  color: transparent !important;
  vertical-align: middle;
  line-height: 0;
  flex-shrink: 0;
}
.drawer-nav-icon[data-menu-icon="quest"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22parchment%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fffde7%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23ffe082%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23ffb74d%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Rolled Scroll Body --%3E %3Cpath d=%22M12 10 C10 8%2C 34 8%2C 36 10 L34 38 C32 40%2C 10 40%2C 12 38 Z%22 fill=%22url%28%23parchment%29%22 stroke=%22%238d6e63%22 stroke-width=%221%22/%3E %3C%21-- Scroll Rolls on Top %26 Bottom --%3E %3Crect x=%228%22 y=%227%22 width=%2232%22 height=%225%22 rx=%222.5%22 fill=%22%23d7ccc8%22 stroke=%22%236d4c41%22 stroke-width=%221%22/%3E %3Crect x=%228%22 y=%2237%22 width=%2232%22 height=%225%22 rx=%222.5%22 fill=%22%23d7ccc8%22 stroke=%22%236d4c41%22 stroke-width=%221%22/%3E %3C%21-- Red Wax Seal --%3E %3Ccircle cx=%2224%22 cy=%2226%22 r=%225%22 fill=%22%23d32f2f%22 stroke=%22%23b71c1c%22 stroke-width=%221%22/%3E %3Cpolygon points=%2224%2C23 25%2C25 27%2C26 25%2C27 24%2C29 23%2C27 21%2C26 23%2C25%22 fill=%22%23ffd54f%22/%3E %3C/svg%3E") !important; }
.drawer-nav-icon[data-menu-icon="character"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22heroGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23ff8f00%22/%3E %3C/linearGradient%3E %3C/defs%3E %3Ccircle cx=%2224%22 cy=%2216%22 r=%227%22 fill=%22url%28%23heroGold%29%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E %3Cpath d=%22M10 40 C10 28%2C 16 26%2C 24 26 C32 26%2C 38 28%2C 38 40 Z%22 fill=%22url%28%23heroGold%29%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E %3Ccircle cx=%2224%22 cy=%2233%22 r=%223%22 fill=%22%23d32f2f%22/%3E %3C/svg%3E") !important; }
.drawer-nav-icon[data-menu-icon="bag"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22bagLeather%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23bcaaa4%22/%3E %3Cstop offset=%2235%25%22 stop-color=%22%238d6e63%22/%3E %3Cstop offset=%2275%25%22 stop-color=%22%235d4037%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%233e2723%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Main Pouch Body --%3E %3Cpath d=%22M12 20 C10 32%2C 12 40%2C 24 42 C36 40%2C 38 32%2C 36 20 L30 14 L18 14 Z%22 fill=%22url%28%23bagLeather%29%22 stroke=%22%23ffb74d%22 stroke-width=%221.2%22/%3E %3C%21-- Bag Flap / Tied Neck --%3E %3Cellipse cx=%2224%22 cy=%2218%22 rx=%228%22 ry=%224%22 fill=%22%236d4c41%22 stroke=%22%23ffd54f%22 stroke-width=%221%22/%3E %3C%21-- Golden Tie Cord %26 Tassels --%3E %3Cline x1=%2220%22 y1=%2219%22 x2=%2218%22 y2=%2228%22 stroke=%22%23ffd54f%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E %3Cline x1=%2228%22 y1=%2219%22 x2=%2230%22 y2=%2228%22 stroke=%22%23ffd54f%22 stroke-width=%221.5%22 stroke-linecap=%22round%22/%3E %3C%21-- Center Golden Medallion / Buckle --%3E %3Ccircle cx=%2224%22 cy=%2226%22 r=%223.2%22 fill=%22%23ffb300%22 stroke=%22%23fff%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2224%22 cy=%2226%22 r=%221.2%22 fill=%22%23d32f2f%22/%3E %3C/svg%3E") !important; }
.drawer-nav-icon[data-menu-icon="skills"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22skillBolt%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%2285%25%22 stop-color=%22%23ff6f00%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Background Glow --%3E %3Ccircle cx=%2224%22 cy=%2224%22 r=%2218%22 fill=%22%23ff9800%22 opacity=%220.25%22/%3E %3C%21-- Lightning Bolt --%3E %3Cpolygon points=%2226%2C4 12%2C24 22%2C24 18%2C44 36%2C20 26%2C20%22 fill=%22url%28%23skillBolt%29%22 stroke=%22%23ffffff%22 stroke-width=%221.2%22/%3E %3C%21-- Spark particles --%3E %3Ccircle cx=%2236%22 cy=%2212%22 r=%221.5%22 fill=%22%23ffe082%22/%3E %3Ccircle cx=%2210%22 cy=%2234%22 r=%221.5%22 fill=%22%23ffe082%22/%3E %3C/svg%3E") !important; }
.drawer-nav-icon[data-menu-icon="map"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22mapParchment%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fffde7%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23d7ccc8%22/%3E %3C/linearGradient%3E %3C/defs%3E %3Crect x=%228%22 y=%228%22 width=%2232%22 height=%2232%22 rx=%224%22 fill=%22url%28%23mapParchment%29%22 stroke=%22%238d6e63%22 stroke-width=%221.2%22/%3E %3Ccircle cx=%2224%22 cy=%2224%22 r=%2210%22 fill=%22none%22 stroke=%22%23b0bec5%22 stroke-width=%221%22/%3E %3C%21-- Compass Needle --%3E %3Cpolygon points=%2224%2C15 28%2C24 24%2C23 20%2C24%22 fill=%22%23d32f2f%22/%3E %3Cpolygon points=%2224%2C33 28%2C24 24%2C25 20%2C24%22 fill=%22%2337474f%22/%3E %3Ccircle cx=%2224%22 cy=%2224%22 r=%222%22 fill=%22%23ffd54f%22/%3E %3C/svg%3E") !important; }
.drawer-nav-icon[data-menu-icon="mount"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22horseGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23f57f17%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Stylized Royal Warhorse Profile --%3E %3Cpath d=%22M14 40 L16 28 C16 22%2C 22 16%2C 26 12 L32 10 L34 16 L28 20 L36 24 C36 30%2C 32 36%2C 26 38 L24 42 Z%22 fill=%22url%28%23horseGold%29%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E %3Ccircle cx=%2229%22 cy=%2217%22 r=%221.5%22 fill=%22%23d32f2f%22/%3E %3C%21-- Mane / Bridle --%3E %3Cpath d=%22M26 12 C24 16%2C 20 22%2C 18 28%22 stroke=%22%23ffffff%22 stroke-width=%221.5%22 fill=%22none%22/%3E %3C/svg%3E") !important; }
.drawer-nav-icon[data-menu-icon="chat"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22chatBubble%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%2380deea%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%2300acc1%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23006064%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Speech Talisman Bubble --%3E %3Cpath d=%22M8 12 C8 8%2C 40 8%2C 40 12 L40 30 C40 34%2C 30 34%2C 24 34 L16 40 L16 34 L8 34 Z%22 fill=%22url%28%23chatBubble%29%22 stroke=%22%23e0f7fa%22 stroke-width=%221.2%22/%3E %3C%21-- 3 Chat Dots --%3E %3Ccircle cx=%2218%22 cy=%2222%22 r=%222.2%22 fill=%22%23ffffff%22/%3E %3Ccircle cx=%2224%22 cy=%2222%22 r=%222.2%22 fill=%22%23ffffff%22/%3E %3Ccircle cx=%2230%22 cy=%2222%22 r=%222.2%22 fill=%22%23ffffff%22/%3E %3C/svg%3E") !important; }
.drawer-nav-icon[data-menu-icon="party"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22partyBlue%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%2380d8ff%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%230091ea%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%2301579b%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Left Shield --%3E %3Cpath d=%22M16 16 C22 16%2C 24 20%2C 24 28 C22 34%2C 18 38%2C 16 40 C14 38%2C 10 34%2C 8 28 C8 20%2C 10 16%2C 16 16 Z%22 fill=%22%2378909c%22 opacity=%220.8%22/%3E %3C%21-- Right Shield --%3E %3Cpath d=%22M32 16 C38 16%2C 40 20%2C 40 28 C38 34%2C 34 38%2C 32 40 C30 38%2C 26 34%2C 24 28 C24 20%2C 26 16%2C 32 16 Z%22 fill=%22%2378909c%22 opacity=%220.8%22/%3E %3C%21-- Center Main Shield --%3E %3Cpath d=%22M24 10 C32 10%2C 36 15%2C 35 26 C33 34%2C 28 40%2C 24 44 C20 40%2C 15 34%2C 13 26 C12 15%2C 16 10%2C 24 10 Z%22 fill=%22url%28%23partyBlue%29%22 stroke=%22%23fff%22 stroke-width=%221.2%22/%3E %3Ccircle cx=%2224%22 cy=%2224%22 r=%223%22 fill=%22%23ffd54f%22/%3E %3C/svg%3E") !important; }
.drawer-nav-icon[data-menu-icon="guild"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22guildGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fffde7%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%2285%25%22 stop-color=%22%23ff8f00%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Main Fortress Pagoda Tower --%3E %3Crect x=%2218%22 y=%2222%22 width=%2212%22 height=%2218%22 rx=%221%22 fill=%22url%28%23guildGold%29%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E %3C%21-- Pagoda Tiered Roofs --%3E %3Cpolygon points=%2224%2C6 34%2C14 14%2C14%22 fill=%22%23d32f2f%22 stroke=%22%23ffd54f%22 stroke-width=%221%22/%3E %3Cpolygon points=%2224%2C12 38%2C20 10%2C20%22 fill=%22%23d32f2f%22 stroke=%22%23ffd54f%22 stroke-width=%221%22/%3E %3C%21-- Gate Arches --%3E %3Cpath d=%22M21 40 L21 32 C21 30%2C 27 30%2C 27 32 L27 40 Z%22 fill=%22%233e2723%22/%3E %3Ccircle cx=%2224%22 cy=%2226%22 r=%222%22 fill=%22%23ffd54f%22/%3E %3C/svg%3E") !important; }
.drawer-nav-icon[data-menu-icon="market"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22scaleGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23e65100%22/%3E %3C/linearGradient%3E %3C/defs%3E %3C%21-- Balance Beam %26 Pillar --%3E %3Cline x1=%2224%22 y1=%2210%22 x2=%2224%22 y2=%2240%22 stroke=%22url%28%23scaleGold%29%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E %3Cline x1=%2210%22 y1=%2214%22 x2=%2238%22 y2=%2214%22 stroke=%22url%28%23scaleGold%29%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E %3C%21-- Left Pan --%3E %3Cpath d=%22M10 14 L8 24 L16 24 Z%22 fill=%22none%22 stroke=%22%23ffb74d%22 stroke-width=%221%22/%3E %3Cpath d=%22M6 24 C8 28%2C 16 28%2C 18 24 Z%22 fill=%22url%28%23scaleGold%29%22/%3E %3C%21-- Right Pan --%3E %3Cpath d=%22M38 14 L36 24 L44 24 Z%22 fill=%22none%22 stroke=%22%23ffb74d%22 stroke-width=%221%22/%3E %3Cpath d=%22M34 24 C36 28%2C 44 28%2C 46 24 Z%22 fill=%22url%28%23scaleGold%29%22/%3E %3C%21-- Base Stand --%3E %3Crect x=%2216%22 y=%2238%22 width=%2216%22 height=%224%22 rx=%222%22 fill=%22url%28%23scaleGold%29%22/%3E %3C/svg%3E") !important; }
.drawer-nav-icon[data-menu-icon="settings"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22gearGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23cfd8dc%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%2390a4ae%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23455a64%22/%3E %3C/linearGradient%3E %3C/defs%3E %3Ccircle cx=%2224%22 cy=%2224%22 r=%2214%22 fill=%22url%28%23gearGold%29%22 stroke=%22%23ffd54f%22 stroke-width=%222%22/%3E %3Ccircle cx=%2224%22 cy=%2224%22 r=%225%22 fill=%22%23263238%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E %3C%21-- Gear Teeth --%3E %3Cpolygon points=%2222%2C6 26%2C6 25%2C10 23%2C10%22 fill=%22%23ffd54f%22/%3E %3Cpolygon points=%2222%2C42 26%2C42 25%2C38 23%2C38%22 fill=%22%23ffd54f%22/%3E %3Cpolygon points=%226%2C22 6%2C26 10%2C25 10%2C23%22 fill=%22%23ffd54f%22/%3E %3Cpolygon points=%2242%2C22 42%2C26 38%2C25 38%2C23%22 fill=%22%23ffd54f%22/%3E %3Cpolygon points=%2212%2C12 15%2C9 17%2C12 14%2C15%22 fill=%22%23ffd54f%22/%3E %3Cpolygon points=%2236%2C36 39%2C33 37%2C30 34%2C33%22 fill=%22%23ffd54f%22/%3E %3Cpolygon points=%2236%2C12 39%2C15 37%2C18 34%2C15%22 fill=%22%23ffd54f%22/%3E %3Cpolygon points=%2212%2C36 15%2C39 17%2C36 14%2C33%22 fill=%22%23ffd54f%22/%3E %3C/svg%3E") !important; }
.drawer-nav-icon[data-menu-icon="account"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3ClinearGradient id=%22badgeGold%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23ffd54f%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23ff8f00%22/%3E %3C/linearGradient%3E %3C/defs%3E %3Ccircle cx=%2224%22 cy=%2220%22 r=%2212%22 fill=%22url%28%23badgeGold%29%22 stroke=%22%23fff%22 stroke-width=%221.2%22/%3E %3Cpolygon points=%2224%2C12 26%2C16 30%2C17 27%2C20 28%2C24 24%2C22 20%2C24 21%2C20 18%2C17 22%2C16%22 fill=%22%23d32f2f%22/%3E %3C%21-- Hanging Ribbon Ends --%3E %3Cpolygon points=%2218%2C30 14%2C42 20%2C40 24%2C30%22 fill=%22%23c62828%22/%3E %3Cpolygon points=%2230%2C30 34%2C42 28%2C40 24%2C30%22 fill=%22%23b71c1c%22/%3E %3C/svg%3E") !important; }
.bag-stat-icon[data-stat-icon] {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0;
  vertical-align: middle;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.bag-stat-icon[data-stat-icon="hp"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E %3Cdefs%3E %3CradialGradient id=%22heartRuby%22 cx=%2235%25%22 cy=%2235%25%22 r=%2260%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ff8a80%22/%3E %3Cstop offset=%2240%25%22 stop-color=%22%23ff1744%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23b71c1c%22/%3E %3C/radialGradient%3E %3C/defs%3E %3Cpath d=%22M16 28 C6 20%2C 2 14%2C 2 8 C2 4%2C 6 2%2C 10 2 C13 2%2C 15 4%2C 16 6 C17 4%2C 19 2%2C 22 2 C26 2%2C 30 4%2C 30 8 C30 14%2C 26 20%2C 16 28 Z%22 fill=%22url%28%23heartRuby%29%22 stroke=%22%23ffffff%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%229%22 cy=%227%22 r=%221.5%22 fill=%22%23ffffff%22 opacity=%220.7%22/%3E %3C/svg%3E") !important; }
.bag-stat-icon[data-stat-icon="atk"], .bag-stat-icon[data-stat-icon="melee"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E %3Cdefs%3E %3ClinearGradient id=%22bladeAtk%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%2380deea%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%2300838f%22/%3E %3C/linearGradient%3E %3C/defs%3E %3Cline x1=%226%22 y1=%2226%22 x2=%2226%22 y2=%226%22 stroke=%22url%28%23bladeAtk%29%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E %3Cline x1=%2226%22 y1=%2226%22 x2=%226%22 y2=%226%22 stroke=%22url%28%23bladeAtk%29%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E %3Ccircle cx=%2216%22 cy=%2216%22 r=%222.5%22 fill=%22%23ffd54f%22/%3E %3C/svg%3E") !important; }
.bag-stat-icon[data-stat-icon="ranged"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E %3Cdefs%3E %3ClinearGradient id=%22bladeAtk%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%2380deea%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%2300838f%22/%3E %3C/linearGradient%3E %3C/defs%3E %3Cline x1=%226%22 y1=%2226%22 x2=%2226%22 y2=%226%22 stroke=%22url%28%23bladeAtk%29%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E %3Cline x1=%2226%22 y1=%2226%22 x2=%226%22 y2=%226%22 stroke=%22url%28%23bladeAtk%29%22 stroke-width=%222.5%22 stroke-linecap=%22round%22/%3E %3Ccircle cx=%2216%22 cy=%2216%22 r=%222.5%22 fill=%22%23ffd54f%22/%3E %3C/svg%3E") !important; }
.bag-stat-icon[data-stat-icon="def"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E %3Cdefs%3E %3ClinearGradient id=%22defShield%22 x1=%220%25%22 y1=%220%25%22 x2=%22100%25%22 y2=%22100%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23fff59d%22/%3E %3Cstop offset=%2250%25%22 stop-color=%22%23fbc02d%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23e65100%22/%3E %3C/linearGradient%3E %3C/defs%3E %3Cpath d=%22M16 3 C25 3%2C 28 6%2C 27 15 C26 23%2C 20 28%2C 16 30 C12 28%2C 6 23%2C 5 15 C4 6%2C 7 3%2C 16 3 Z%22 fill=%22url%28%23defShield%29%22 stroke=%22%23fff%22 stroke-width=%220.8%22/%3E %3Ccircle cx=%2216%22 cy=%2215%22 r=%222.5%22 fill=%22%23d32f2f%22/%3E %3C/svg%3E") !important; }
.bag-stat-icon[data-stat-icon="stamina"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E %3Cpolygon points=%2218%2C2 7%2C16 15%2C16 12%2C30 25%2C14 17%2C14%22 fill=%22%23ffd54f%22 stroke=%22%23ff8f00%22 stroke-width=%221%22/%3E %3Ccircle cx=%2224%22 cy=%228%22 r=%221.2%22 fill=%22%23ffffff%22/%3E %3C/svg%3E") !important; }
.bag-stat-icon[data-stat-icon="mana"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E %3Cdefs%3E %3CradialGradient id=%22manaDrop%22 cx=%2238%25%22 cy=%2240%25%22 r=%2260%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23e0f7fa%22/%3E %3Cstop offset=%2230%25%22 stop-color=%22%2340c4ff%22/%3E %3Cstop offset=%2270%25%22 stop-color=%22%230288d1%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%2301579b%22/%3E %3C/radialGradient%3E %3C/defs%3E %3C%21-- Teardrop Gem --%3E %3Cpath d=%22M24 6 C24 6%2C 38 22%2C 38 30 C38 38%2C 32 44%2C 24 44 C16 44%2C 10 38%2C 10 30 C10 22%2C 24 6%2C 24 6 Z%22 fill=%22url%28%23manaDrop%29%22 stroke=%22%2380d8ff%22 stroke-width=%221.2%22/%3E %3C%21-- Highlight Flare --%3E %3Cellipse cx=%2220%22 cy=%2226%22 rx=%224%22 ry=%227%22 transform=%22rotate%28-20 20 26%29%22 fill=%22%23ffffff%22 opacity=%220.6%22/%3E %3Cpolygon points=%2224%2C14 25%2C17 28%2C18 25%2C19 24%2C22 23%2C19 20%2C18 23%2C17%22 fill=%22%23ffffff%22/%3E %3C/svg%3E") !important; }
.bag-stat-icon[data-stat-icon="magicAtk"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E %3Cdefs%3E %3CradialGradient id=%22orbMagic%22 cx=%2240%25%22 cy=%2240%25%22 r=%2255%25%22%3E %3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22/%3E %3Cstop offset=%2235%25%22 stop-color=%22%23e040fb%22/%3E %3Cstop offset=%2280%25%22 stop-color=%22%237c4dff%22/%3E %3Cstop offset=%22100%25%22 stop-color=%22%23311b92%22/%3E %3C/radialGradient%3E %3C/defs%3E %3Ccircle cx=%2216%22 cy=%2216%22 r=%2212%22 fill=%22url%28%23orbMagic%29%22 stroke=%22%23ea80fc%22 stroke-width=%221%22/%3E %3Cpolygon points=%2216%2C8 18%2C13 23%2C13 19%2C16 21%2C21 16%2C18 11%2C21 13%2C16 9%2C13 14%2C13%22 fill=%22%23ffffff%22 opacity=%220.8%22/%3E %3C/svg%3E") !important; }
.bag-stat-icon[data-stat-icon="magicDef"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E %3Cpolygon points=%2216%2C3 27%2C9 27%2C23 16%2C29 5%2C23 5%2C9%22 fill=%22rgba%28128%2C 222%2C 234%2C 0.35%29%22 stroke=%22%2300e5ff%22 stroke-width=%221.8%22/%3E %3Cpolygon points=%2216%2C7 23%2C12 23%2C20 16%2C25 9%2C20 9%2C12%22 fill=%22%2300bcd4%22 opacity=%220.6%22/%3E %3Ccircle cx=%2216%22 cy=%2216%22 r=%222.5%22 fill=%22%23ffffff%22/%3E %3C/svg%3E") !important; }
.bag-stat-icon[data-stat-icon="forge"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E %3C%21-- Anvil Base --%3E %3Cpolygon points=%227%2C20 25%2C20 28%2C26 4%2C26%22 fill=%22%2378909c%22 stroke=%22%23cfd8dc%22 stroke-width=%220.8%22/%3E %3C%21-- Hammer Head striking --%3E %3Crect x=%2214%22 y=%226%22 width=%2212%22 height=%226%22 rx=%221.5%22 transform=%22rotate%28-30 20 9%29%22 fill=%22%23ffd54f%22 stroke=%22%23e65100%22 stroke-width=%220.8%22/%3E %3C%21-- Hammer Handle --%3E %3Cline x1=%2220%22 y1=%229%22 x2=%2228%22 y2=%2218%22 stroke=%22%238d6e63%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E %3C%21-- Spark --%3E %3Ccircle cx=%2216%22 cy=%2218%22 r=%221.5%22 fill=%22%23ffffff%22/%3E %3C/svg%3E") !important; }
.bag-stat-icon[data-stat-icon="socket"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22%3E %3Ccircle cx=%2216%22 cy=%2216%22 r=%2213%22 fill=%22%23263238%22 stroke=%22%23ffd54f%22 stroke-width=%221.5%22/%3E %3Cpolygon points=%2216%2C8 22%2C12 22%2C20 16%2C24 10%2C20 10%2C12%22 fill=%22%23d50000%22 stroke=%22%23fff%22 stroke-width=%221%22/%3E %3Ccircle cx=%2216%22 cy=%2216%22 r=%222.2%22 fill=%22%23ffd54f%22/%3E %3C/svg%3E") !important; }

/* Extra styling for map shortcuts & flyout icons */
.map-shortcuts button .hud-btn-icon {
  width: 20px !important;
  height: 20px !important;
  margin: auto;
  display: block;
}
.map-sub .drawer-nav-icon {
  width: 18px !important;
  height: 18px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Always show and highlight Quick Skills button under minimap */
#quickSkills,
.map-shortcuts #quickSkills,
.field-shortcuts #quickSkills {
  display: grid !important;
  align-items: center;
  justify-items: center;
}
.map-shortcuts #quickSkills {
  background: linear-gradient(135deg, #1c3b2b 0%, #2e5c45 100%) !important;
  border: 1px solid #e8ba74 !important;
  box-shadow: 0 0 6px rgba(232, 186, 116, 0.4);
}
.map-shortcuts #quickSkills:hover,
.map-shortcuts #quickSkills:active {
  background: linear-gradient(135deg, #2e5c45 0%, #448060 100%) !important;
  transform: scale(1.05);
}

/* Phase 15: Shamanic War Banner */
#bannerButton {
  position: relative;
  border: 1px solid rgba(255, 206, 90, 0.4);
}
#bannerButton:active,
#bannerButton[aria-pressed="true"] {
  border-color: #ffe082;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}
.war-banner-buff-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  margin-top: 4px;
  border-radius: 12px;
  background: rgba(26, 18, 8, 0.85);
  border: 1px solid #ffd700;
  color: #ffe082;
  font-size: 11px;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.35);
  animation: bannerPulse 2s infinite ease-in-out;
}
.war-banner-buff-badge[hidden] {
  display: none !important;
}
@keyframes bannerPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 215, 0, 0.3); }
  50% { box-shadow: 0 0 14px rgba(255, 215, 0, 0.7); }
}

/* Phase 16: Shamanic Spirit Pet & Familiar */
#petButton {
  position: relative;
  border: 1px solid rgba(128, 216, 255, 0.4);
}
#petButton:active,
#petButton[aria-pressed="true"] {
  border-color: #80d8ff;
  box-shadow: 0 0 10px rgba(0, 176, 255, 0.6);
}

/* Phase 18: Thao Wessuwan Titan Boss 3D */
#bossEncounterButton {
  position: relative;
  border: 1px solid rgba(255, 23, 68, 0.5);
}
#bossEncounterButton:active,
#bossEncounterButton[aria-pressed="true"] {
  border-color: #ff1744;
  box-shadow: 0 0 14px rgba(255, 23, 68, 0.8);
  background: radial-gradient(circle, rgba(255, 23, 68, 0.3) 0%, rgba(20, 20, 30, 0.8) 100%);
}



/* Hidden shortcut buttons (skills before a class book loads, chat, horse) must not leave empty tiles under the minimap. */
.location-area .map-shortcuts button[hidden], .location-area .map-shortcuts .map-proxy[hidden] { display: none !important; }
/* "Coming soon" buttons (disabled banner and boss) stay out of the minimap grid until they do something. */
.location-area .map-shortcuts #bannerButton:disabled, .location-area .map-shortcuts #bossEncounterButton:disabled { display: none !important; }

/* SVG art for the newer minimap buttons (their emoji are hidden by .hud-btn-icon[data-hud-icon]). */
.hud-btn-icon[data-hud-icon="pet"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Cdefs%3E%3CradialGradient id=%22g%22 cx=%2240%25%22 cy=%2235%25%22 r=%2265%25%22%3E%3Cstop offset=%220%22 stop-color=%22%23e8fbff%22/%3E%3Cstop offset=%22.45%22 stop-color=%22%237fd8ff%22/%3E%3Cstop offset=%221%22 stop-color=%22%232a5aa0%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d=%22M24 8c8 0 13 6 13 13 0 9-7 13-9 19-2-4-3-6-6-7-6-2-11-6-11-12 0-7 6-13 13-13z%22 fill=%22url%28%23g%29%22 stroke=%22%23ffd54f%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%222.2%22 fill=%22%230b2340%22/%3E%3Ccircle cx=%2228%22 cy=%2220%22 r=%222.2%22 fill=%22%230b2340%22/%3E%3Cpath d=%22M20 26q4 3 8 0%22 fill=%22none%22 stroke=%22%230b2340%22 stroke-width=%221.4%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2238%22 cy=%2210%22 r=%221.6%22 fill=%22%23ffe082%22/%3E%3Ccircle cx=%229%22 cy=%2214%22 r=%221.2%22 fill=%22%23ffe082%22/%3E%3C/svg%3E"); }
.hud-btn-icon[data-hud-icon="banner"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Cline x1=%2212%22 y1=%226%22 x2=%2212%22 y2=%2243%22 stroke=%22%23ffd54f%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M13 9h22l-5 7 5 7H13z%22 fill=%22%23c62828%22 stroke=%22%23ffd54f%22 stroke-width=%221.1%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2222%22 cy=%2216%22 r=%223.2%22 fill=%22%23ffb300%22/%3E%3Ccircle cx=%2212%22 cy=%226%22 r=%222.2%22 fill=%22%23ffe082%22/%3E%3C/svg%3E"); }
.hud-btn-icon[data-hud-icon="boss"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22%3E%3Cdefs%3E%3ClinearGradient id=%22c%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23ffe082%22/%3E%3Cstop offset=%221%22 stop-color=%22%23b8860b%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M9 34l-2-18 9 7 8-13 8 13 9-7-2 18z%22 fill=%22url%28%23c%29%22 stroke=%22%23fff3c4%22 stroke-width=%221.1%22 stroke-linejoin=%22round%22/%3E%3Crect x=%229%22 y=%2234%22 width=%2230%22 height=%225%22 rx=%221.5%22 fill=%22%238d6e63%22 stroke=%22%23ffd54f%22 stroke-width=%221%22/%3E%3Ccircle cx=%2224%22 cy=%2227%22 r=%223%22 fill=%22%23d32f2f%22 stroke=%22%23fff%22 stroke-width=%22.7%22/%3E%3C/svg%3E"); }
/* Centre every minimap shortcut icon; the text labels stay for screen readers only. */
.location-area .map-shortcuts button:not([hidden]) { display: grid !important; place-items: center; padding: 0 !important; }
.location-area .map-shortcuts button > i { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.location-area .map-shortcuts button .hud-btn-icon { margin: 0 !important; }
/* ---- Beauty pass 2: one HUD family ----
   Every field panel (player card, quest, strip, minimap buttons, place chips, chat) shares the same
   night-jade glass, thin gold edge, radius and shadow, instead of a mix of teal, green and black boxes. */
#game { --hud-glass: linear-gradient(160deg, rgba(18, 31, 27, .9), rgba(8, 14, 12, .86)); --hud-edge: rgba(214, 176, 98, .42); --hud-edge-hot: rgba(243, 199, 104, .8);
  --hud-round: 12px; --hud-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 240, 200, .06); }
#game .top-hud .panel, #game .resource-strip, #game .location-area .map-shortcuts, #game .chat-box, #game .location-area .online-count {
  background: var(--hud-glass); border: 1px solid var(--hud-edge); box-shadow: var(--hud-shadow); }
#game .top-hud .panel, #game .location-area .map-shortcuts, #game .chat-box { border-radius: var(--hud-round); }
#game .resource-strip, #game .location-area .online-count { border-radius: 9px; }
#game .top-hud .quest:hover, #game .top-hud .quest:focus-visible { border-color: var(--hud-edge-hot); }
#game .location-area .map-shortcuts button { background: rgba(255, 255, 255, .04); border: 1px solid rgba(214, 176, 98, .18); }
#game .location-area .map-shortcuts button[aria-pressed="true"], #game .location-area .map-shortcuts button.open { border-color: var(--hud-edge-hot); background: rgba(243, 199, 104, .12); }
/* Place name under the minimap wraps instead of being cut ("หมู่บ้านอาคม · เขตพัก…"). */
#game .location-area .place-name { white-space: normal; text-overflow: clip; max-width: 150px; margin-left: auto; text-align: right; line-height: 1.25; font-size: 10.5px;
  text-shadow: 0 1px 2px #000, 0 0 6px #000; }
/* Wide screens: the field HUD was drawn at phone size; scale it up so it reads at desktop distance. */
@media (min-width: 1200px) and (min-height: 680px) {
  #game .top-hud, #game .resource-strip, #game .chat-box, #game .field-dock { zoom: 1.22; }
}
@media (min-width: 1700px) and (min-height: 900px) {
  #game .top-hud, #game .resource-strip, #game .chat-box, #game .field-dock { zoom: 1.45; }
}
/* The desktop HUD zoom makes the quest panel taller: start the collected-item feed below it. */
@media (min-width: 900px) and (min-height: 521px) { #lootFeed.loot-feed { top: calc(max(8px, env(safe-area-inset-top)) + 206px); } }

/* Core and learned skills share the existing four-button footprint. */
.skill-loadout { display: grid; gap: 12px; }
.skill-loadout h3, .skill-loadout p { margin: 0; }
.loadout-core { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.loadout-core span { padding: 9px; background: #14251f; border: 1px solid #53674d; border-radius: 8px; overflow-wrap: anywhere; }
.loadout-slot { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 8px; }
.loadout-slot select { width: 100%; min-width: 0; min-height: 48px; padding: 8px; font-size: 16px; color: #fff1cf; background: #14251f; border: 1px solid #9b865e; border-radius: 8px; }
.skill-loadout > button, #classSkillLoadout { min-height: 44px; }
/* Advanced catalogs include skills without dedicated artwork: keep a readable glyph and name. */
[data-mixed-hotbar="true"] .glyph { font-size: 22px !important; color: #fff0c4; text-shadow: 0 1px 3px #000; }
[data-mixed-hotbar="true"] .field-slot:not(.empty-slot) .glyph { box-sizing: border-box; padding-bottom: 14px; }
.learned-bar[data-arc] [data-mixed-hotbar="true"] .field-skill-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; position: absolute; top: auto; bottom: 4px; left: 50%; width: 44px; max-width: 44px; max-height: 20px; padding: 0 1px; border-radius: 3px; background: #101c17db; font-size: 9px !important; line-height: 1.05 !important; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.learned-bar[data-arc] [data-mixed-hotbar="true"] .empty-slot .field-skill-name { display: none; }

/* Keep the menu entry available without taking room from the combat arc. */
.map-flyout { max-height: calc(100dvh - 220px); overflow-y: auto; flex-shrink: 0; }
.map-flyout .map-sub { flex-shrink: 0; }
.map-flyout .map-sub[hidden] { display: none; }
.map-sub[data-menu-source="skillLoadoutButton"] { min-height: 50px; }

#game .top-hud:has(.map-flyout:not([hidden])) { z-index: 12; }
/* ========================================================
   MONTRA Comprehensive 26-Skill SVG Engine & Book Icons
   ======================================================== */

.skill-book-icon {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid #d4af37;
  background-color: #1a2228;
  background-size: 82% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.7), inset 0 0 10px rgba(0,0,0,0.5);
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 12px;
}
.sword-node {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.sword-node > div {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Universal Specificity Overrides across all Hotbars and Modals */
.field-slot[data-skill-id] .glyph,
.skill-bar .field-slot[data-skill-id] .glyph,
#occultHotbar .field-slot[data-skill-id] .glyph,
#sentinelHotbar .field-slot[data-skill-id] .glyph,
#bladeHotbar .field-slot[data-skill-id] .glyph,
#muayHotbar .field-slot[data-skill-id] .glyph,
#swordHotbar .field-slot[data-skill-id] .glyph,
.glyph[data-skill-glyph],
.skill-book-icon[data-skill-glyph],
.skill-modal-glyph[data-skill-glyph],
.kg-glyph[data-skill-glyph] {
  background-size: 80% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  font-size: 0 !important;
  color: transparent !important;
}


/* Unknown/new catalog IDs still get visible artwork until a dedicated mapping is added.
   Zero specificity keeps every named technique's artwork authoritative. */
:where(.glyph[data-skill-glyph], .skill-book-icon[data-skill-glyph], .skill-modal-glyph[data-skill-glyph], .kg-glyph[data-skill-glyph]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='28' fill='%23272930' stroke='%23d4af37' stroke-width='2'/%3E%3Cpath d='M32 9 38 26 55 32 38 38 32 55 26 38 9 32 26 26Z' fill='%23f4d781' stroke='%23fff0bd' stroke-width='2'/%3E%3Ccircle cx='32' cy='32' r='5' fill='%23846b3e'/%3E%3C/svg%3E") !important;
}
/* --- BLADE (คมดาบ) SKILL ARTWORK --- */

/* blade_vanish: มนต์พรางเงา (Shadow Cloak & Eagle Eye) */
.kg-glyph[data-skill-glyph="blade_vanish"],
.skill-book-icon[data-skill-glyph="blade_vanish"],
.skill-modal-glyph[data-skill-glyph="blade_vanish"],
.glyph[data-skill-glyph="blade_vanish"],
.field-slot[data-skill-id="blade_vanish"] .glyph,
.kg-glyph[data-skill-glyph="cloak"],
.skill-book-icon[data-skill-glyph="cloak"],
.skill-modal-glyph[data-skill-glyph="cloak"],
.glyph[data-skill-glyph="cloak"],
.field-slot[data-skill-id="cloak"] .glyph,
.kg-glyph[data-skill-glyph="quiet_step"],
.skill-book-icon[data-skill-glyph="quiet_step"],
.skill-modal-glyph[data-skill-glyph="quiet_step"],
.glyph[data-skill-glyph="quiet_step"],
.field-slot[data-skill-id="quiet_step"] .glyph,
.kg-glyph[data-skill-glyph="veil_guard"],
.skill-book-icon[data-skill-glyph="veil_guard"],
.skill-modal-glyph[data-skill-glyph="veil_guard"],
.glyph[data-skill-glyph="veil_guard"],
.field-slot[data-skill-id="veil_guard"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='vanBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%236a0dad'/%3E%3Cstop offset='60%25' stop-color='%2338006b'/%3E%3Cstop offset='100%25' stop-color='%23120024'/%3E%3C/radialGradient%3E%3Cfilter id='vanGlow'%3E%3CfeGaussianBlur stdDeviation='2' result='blur'/%3E%3CfeComposite in='SourceGraphic' in2='blur' operator='over'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23vanBg)' stroke='%23b388ff' stroke-width='1.5'/%3E%3Cpath d='M10 32 C14 20, 26 14, 32 14 C38 14, 50 20, 54 32 C50 44, 38 50, 32 50 C26 50, 14 44, 10 32 Z' fill='%23240046' stroke='%23d1c4e9' stroke-width='1.5' filter='url(%23vanGlow)'/%3E%3Cellipse cx='32' cy='32' rx='10' ry='10' fill='%23651fff'/%3E%3Ccircle cx='32' cy='32' r='4.5' fill='%2300e5ff' filter='url(%23vanGlow)'/%3E%3Ccircle cx='34' cy='30' r='1.5' fill='%23ffffff'/%3E%3Cpath d='M16 22 C22 28, 30 24, 36 18' stroke='%23b388ff' stroke-width='1.2' fill='none' opacity='0.7'/%3E%3Cpath d='M48 42 C42 36, 34 40, 28 46' stroke='%23b388ff' stroke-width='1.2' fill='none' opacity='0.7'/%3E%3C/svg%3E") !important;
}

/* blade_heavy: ดาบสังหาร (Crimson Executioner Cleave) */
.kg-glyph[data-skill-glyph="blade_heavy"],
.skill-book-icon[data-skill-glyph="blade_heavy"],
.skill-modal-glyph[data-skill-glyph="blade_heavy"],
.glyph[data-skill-glyph="blade_heavy"],
.field-slot[data-skill-id="blade_heavy"] .glyph,
.kg-glyph[data-skill-glyph="hidden_edge"],
.skill-book-icon[data-skill-glyph="hidden_edge"],
.skill-modal-glyph[data-skill-glyph="hidden_edge"],
.glyph[data-skill-glyph="hidden_edge"],
.field-slot[data-skill-id="hidden_edge"] .glyph,
.kg-glyph[data-skill-glyph="marked_cut"],
.skill-book-icon[data-skill-glyph="marked_cut"],
.skill-modal-glyph[data-skill-glyph="marked_cut"],
.glyph[data-skill-glyph="marked_cut"],
.field-slot[data-skill-id="marked_cut"] .glyph,
.kg-glyph[data-skill-glyph="piercing_edge"],
.skill-book-icon[data-skill-glyph="piercing_edge"],
.skill-modal-glyph[data-skill-glyph="piercing_edge"],
.glyph[data-skill-glyph="piercing_edge"],
.field-slot[data-skill-id="piercing_edge"] .glyph,
.kg-glyph[data-skill-glyph="sever_mark"],
.skill-book-icon[data-skill-glyph="sever_mark"],
.skill-modal-glyph[data-skill-glyph="sever_mark"],
.glyph[data-skill-glyph="sever_mark"],
.field-slot[data-skill-id="sever_mark"] .glyph,
.kg-glyph[data-skill-glyph="shadow_cut"],
.skill-book-icon[data-skill-glyph="shadow_cut"],
.skill-modal-glyph[data-skill-glyph="shadow_cut"],
.glyph[data-skill-glyph="shadow_cut"],
.field-slot[data-skill-id="shadow_cut"] .glyph,
.kg-glyph[data-skill-glyph="rune_break"],
.skill-book-icon[data-skill-glyph="rune_break"],
.skill-modal-glyph[data-skill-glyph="rune_break"],
.glyph[data-skill-glyph="rune_break"],
.field-slot[data-skill-id="rune_break"] .glyph,
.kg-glyph[data-skill-glyph="sealed_finale"],
.skill-book-icon[data-skill-glyph="sealed_finale"],
.skill-modal-glyph[data-skill-glyph="sealed_finale"],
.glyph[data-skill-glyph="sealed_finale"],
.field-slot[data-skill-id="sealed_finale"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='hvyBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23d50000'/%3E%3Cstop offset='70%25' stop-color='%235c0000'/%3E%3Cstop offset='100%25' stop-color='%231a0000'/%3E%3C/radialGradient%3E%3ClinearGradient id='hvyBlade' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff'/%3E%3Cstop offset='30%25' stop-color='%23ff8a80'/%3E%3Cstop offset='80%25' stop-color='%23d50000'/%3E%3C/linearGradient%3E%3Cfilter id='hvyGlow'%3E%3CfeGaussianBlur stdDeviation='2.5' result='blur'/%3E%3CfeComposite in='SourceGraphic' in2='blur' operator='over'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23hvyBg)' stroke='%23ff5252' stroke-width='1.5'/%3E%3Cpath d='M12 52 C24 40, 44 20, 52 12 C44 28, 28 44, 12 52 Z' fill='url(%23hvyBlade)' filter='url(%23hvyGlow)'/%3E%3Cpolygon points='34,22 42,16 48,22 40,28' fill='%23ffd54f' stroke='%23fff' stroke-width='1'/%3E%3Cpolygon points='30,30 32,36 38,36 33,40 35,46 30,42 25,46 27,40 22,36 28,36' fill='%23ffffff' filter='url(%23hvyGlow)'/%3E%3Ccircle cx='44' cy='18' r='2' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

/* blade_withdraw: ก้าวถอยตวัดฟัน (Crescent Moon Shadow Fade) */
.kg-glyph[data-skill-glyph="blade_withdraw"],
.skill-book-icon[data-skill-glyph="blade_withdraw"],
.skill-modal-glyph[data-skill-glyph="blade_withdraw"],
.glyph[data-skill-glyph="blade_withdraw"],
.field-slot[data-skill-id="blade_withdraw"] .glyph,
.kg-glyph[data-skill-glyph="shadow_step"],
.skill-book-icon[data-skill-glyph="shadow_step"],
.skill-modal-glyph[data-skill-glyph="shadow_step"],
.glyph[data-skill-glyph="shadow_step"],
.field-slot[data-skill-id="shadow_step"] .glyph,
.kg-glyph[data-skill-glyph="retreat"],
.skill-book-icon[data-skill-glyph="retreat"],
.skill-modal-glyph[data-skill-glyph="retreat"],
.glyph[data-skill-glyph="retreat"],
.field-slot[data-skill-id="retreat"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='witBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%2300b0ff'/%3E%3Cstop offset='60%25' stop-color='%23004385'/%3E%3Cstop offset='100%25' stop-color='%23001737'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23witBg)' stroke='%2340c4ff' stroke-width='1.5'/%3E%3Cpath d='M44 14 C30 18, 20 30, 20 44 C28 40, 36 34, 40 26 Z' fill='%23ffffff' opacity='0.9'/%3E%3Cpath d='M50 20 C38 24, 28 34, 28 48 C34 44, 42 40, 46 32 Z' fill='%2380d8ff' opacity='0.6'/%3E%3Cpolygon points='16,36 24,30 24,42' fill='%2300e5ff'/%3E%3Cline x1='24' y1='36' x2='38' y2='36' stroke='%2300e5ff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* blade_fury: เพลงดาบคลั่ง (Bladestorm Tempest) */
.kg-glyph[data-skill-glyph="blade_fury"],
.skill-book-icon[data-skill-glyph="blade_fury"],
.skill-modal-glyph[data-skill-glyph="blade_fury"],
.glyph[data-skill-glyph="blade_fury"],
.field-slot[data-skill-id="blade_fury"] .glyph,
.kg-glyph[data-skill-glyph="rhythm"],
.skill-book-icon[data-skill-glyph="rhythm"],
.skill-modal-glyph[data-skill-glyph="rhythm"],
.glyph[data-skill-glyph="rhythm"],
.field-slot[data-skill-id="rhythm"] .glyph,
.kg-glyph[data-skill-glyph="killer_focus"],
.skill-book-icon[data-skill-glyph="killer_focus"],
.skill-modal-glyph[data-skill-glyph="killer_focus"],
.glyph[data-skill-glyph="killer_focus"],
.field-slot[data-skill-id="killer_focus"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='furBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23ff6d00'/%3E%3Cstop offset='60%25' stop-color='%23c43e00'/%3E%3Cstop offset='100%25' stop-color='%233e1000'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23furBg)' stroke='%23ffab40' stroke-width='1.5'/%3E%3Cg stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='14' y1='50' x2='50' y2='14'/%3E%3Cline x1='14' y1='14' x2='50' y2='50'/%3E%3Cline x1='10' y1='32' x2='54' y2='32'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='8' fill='%23ffd600' stroke='%23fff' stroke-width='1.5'/%3E%3Cpolygon points='32,20 35,28 43,32 35,36 32,44 29,36 21,32 29,28' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

/* --- MENDER (พระ / นักบวชรักษา) SKILL ARTWORK --- */

/* mender_core_heal: น้ำมนต์ศักดิ์สิทธิ์ (Sacred Water & Golden Bowl) */
.kg-glyph[data-skill-glyph="mender_core_heal"],
.skill-book-icon[data-skill-glyph="mender_core_heal"],
.skill-modal-glyph[data-skill-glyph="mender_core_heal"],
.glyph[data-skill-glyph="mender_core_heal"],
.field-slot[data-skill-id="mender_core_heal"] .glyph,
.kg-glyph[data-skill-glyph="mender_heal"],
.skill-book-icon[data-skill-glyph="mender_heal"],
.skill-modal-glyph[data-skill-glyph="mender_heal"],
.glyph[data-skill-glyph="mender_heal"],
.field-slot[data-skill-id="mender_heal"] .glyph,
.kg-glyph[data-skill-glyph="mender_spirit_heal"],
.skill-book-icon[data-skill-glyph="mender_spirit_heal"],
.skill-modal-glyph[data-skill-glyph="mender_spirit_heal"],
.glyph[data-skill-glyph="mender_spirit_heal"],
.field-slot[data-skill-id="mender_spirit_heal"] .glyph,
.kg-glyph[data-skill-glyph="mender_deep_heal"],
.skill-book-icon[data-skill-glyph="mender_deep_heal"],
.skill-modal-glyph[data-skill-glyph="mender_deep_heal"],
.glyph[data-skill-glyph="mender_deep_heal"],
.field-slot[data-skill-id="mender_deep_heal"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='healBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%2300e676'/%3E%3Cstop offset='60%25' stop-color='%2300897b'/%3E%3Cstop offset='100%25' stop-color='%23004d40'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23healBg)' stroke='%23b9f6ca' stroke-width='1.5'/%3E%3Cpath d='M32 12 C32 12, 44 26, 44 34 C44 42, 38 48, 32 48 C26 48, 20 42, 20 34 C20 26, 32 12, 32 12 Z' fill='%23e0f2f1' stroke='%23ffffff' stroke-width='1.5'/%3E%3Ccircle cx='32' cy='34' r='6' fill='%2300e676'/%3E%3Cpolygon points='32,24 34,29 39,30 35,34 36,39 32,36 28,39 29,34 25,30 30,29' fill='%23ffd54f'/%3E%3C/svg%3E") !important;
}

/* mender_core_circle: วงเวทคุ้มครอง (Golden Sacred Mandala) */
.kg-glyph[data-skill-glyph="mender_core_circle"],
.skill-book-icon[data-skill-glyph="mender_core_circle"],
.skill-modal-glyph[data-skill-glyph="mender_core_circle"],
.glyph[data-skill-glyph="mender_core_circle"],
.field-slot[data-skill-id="mender_core_circle"] .glyph,
.kg-glyph[data-skill-glyph="mender_area"],
.skill-book-icon[data-skill-glyph="mender_area"],
.skill-modal-glyph[data-skill-glyph="mender_area"],
.glyph[data-skill-glyph="mender_area"],
.field-slot[data-skill-id="mender_area"] .glyph,
.kg-glyph[data-skill-glyph="mender_deep_circle"],
.skill-book-icon[data-skill-glyph="mender_deep_circle"],
.skill-modal-glyph[data-skill-glyph="mender_deep_circle"],
.glyph[data-skill-glyph="mender_deep_circle"],
.field-slot[data-skill-id="mender_deep_circle"] .glyph,
.kg-glyph[data-skill-glyph="mender_trance"],
.skill-book-icon[data-skill-glyph="mender_trance"],
.skill-modal-glyph[data-skill-glyph="mender_trance"],
.glyph[data-skill-glyph="mender_trance"],
.field-slot[data-skill-id="mender_trance"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='cirBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23ffd700'/%3E%3Cstop offset='60%25' stop-color='%23ff8f00'/%3E%3Cstop offset='100%25' stop-color='%23bf360c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23cirBg)' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='32' cy='32' r='20' fill='none' stroke='%23ffffff' stroke-width='2' stroke-dasharray='4,3'/%3E%3Cpolygon points='32,14 46,24 46,40 32,50 18,40 18,24' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3Ccircle cx='32' cy='32' r='6' fill='%23ffffff'/%3E%3C/svg%3E") !important;
}

/* mender_core_ward: กำแพงแก้วเจ็ดชั้น (Crystal Prism Ward) */
.kg-glyph[data-skill-glyph="mender_core_ward"],
.skill-book-icon[data-skill-glyph="mender_core_ward"],
.skill-modal-glyph[data-skill-glyph="mender_core_ward"],
.glyph[data-skill-glyph="mender_core_ward"],
.field-slot[data-skill-id="mender_core_ward"] .glyph,
.kg-glyph[data-skill-glyph="mender_ward"],
.skill-book-icon[data-skill-glyph="mender_ward"],
.skill-modal-glyph[data-skill-glyph="mender_ward"],
.glyph[data-skill-glyph="mender_ward"],
.field-slot[data-skill-id="mender_ward"] .glyph,
.kg-glyph[data-skill-glyph="mender_spirit"],
.skill-book-icon[data-skill-glyph="mender_spirit"],
.skill-modal-glyph[data-skill-glyph="mender_spirit"],
.glyph[data-skill-glyph="mender_spirit"],
.field-slot[data-skill-id="mender_spirit"] .glyph,
.kg-glyph[data-skill-glyph="mender_ward_area"],
.skill-book-icon[data-skill-glyph="mender_ward_area"],
.skill-modal-glyph[data-skill-glyph="mender_ward_area"],
.glyph[data-skill-glyph="mender_ward_area"],
.field-slot[data-skill-id="mender_ward_area"] .glyph,
.kg-glyph[data-skill-glyph="mender_shelter"],
.skill-book-icon[data-skill-glyph="mender_shelter"],
.skill-modal-glyph[data-skill-glyph="mender_shelter"],
.glyph[data-skill-glyph="mender_shelter"],
.field-slot[data-skill-id="mender_shelter"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='wrdBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%2300e5ff'/%3E%3Cstop offset='60%25' stop-color='%230091ea'/%3E%3Cstop offset='100%25' stop-color='%2301579b'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23wrdBg)' stroke='%2380d8ff' stroke-width='1.5'/%3E%3Cpolygon points='32,10 52,22 48,46 32,56 16,46 12,22' fill='%23e1f5fe' opacity='0.8' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cpolygon points='32,18 44,26 40,42 32,48 24,42 20,26' fill='%2380d8ff' opacity='0.6' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E") !important;
}

/* mender_core_cleanse: ปัดเป่าคุณไสย (Sacred Bael Purge) */
.kg-glyph[data-skill-glyph="mender_core_cleanse"],
.skill-book-icon[data-skill-glyph="mender_core_cleanse"],
.skill-modal-glyph[data-skill-glyph="mender_core_cleanse"],
.glyph[data-skill-glyph="mender_core_cleanse"],
.field-slot[data-skill-id="mender_core_cleanse"] .glyph,
.kg-glyph[data-skill-glyph="mender_cleanse"],
.skill-book-icon[data-skill-glyph="mender_cleanse"],
.skill-modal-glyph[data-skill-glyph="mender_cleanse"],
.glyph[data-skill-glyph="mender_cleanse"],
.field-slot[data-skill-id="mender_cleanse"] .glyph,
.kg-glyph[data-skill-glyph="mender_cleanse_area"],
.skill-book-icon[data-skill-glyph="mender_cleanse_area"],
.skill-modal-glyph[data-skill-glyph="mender_cleanse_area"],
.glyph[data-skill-glyph="mender_cleanse_area"],
.field-slot[data-skill-id="mender_cleanse_area"] .glyph,
.kg-glyph[data-skill-glyph="mender_pve_rice"],
.skill-book-icon[data-skill-glyph="mender_pve_rice"],
.skill-modal-glyph[data-skill-glyph="mender_pve_rice"],
.glyph[data-skill-glyph="mender_pve_rice"],
.field-slot[data-skill-id="mender_pve_rice"] .glyph,
.kg-glyph[data-skill-glyph="mender_spirit_rice"],
.skill-book-icon[data-skill-glyph="mender_spirit_rice"],
.skill-modal-glyph[data-skill-glyph="mender_spirit_rice"],
.glyph[data-skill-glyph="mender_spirit_rice"],
.field-slot[data-skill-id="mender_spirit_rice"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='clnBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23f48fb1'/%3E%3Cstop offset='60%25' stop-color='%23ad1457'/%3E%3Cstop offset='100%25' stop-color='%234a0072'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23clnBg)' stroke='%23ff80ab' stroke-width='1.5'/%3E%3Cpolygon points='32,8 36,24 52,28 38,36 42,52 32,42 22,52 26,36 12,28 28,24' fill='%23ffffff' stroke='%23ffd54f' stroke-width='1.2'/%3E%3Ccircle cx='32' cy='30' r='5' fill='%23ff4081'/%3E%3C/svg%3E") !important;
}

/* --- SENTINEL (ผู้พิทักษ์) SKILL ARTWORK --- */

/* shock: คลื่นกระแทก */
.kg-glyph[data-skill-glyph="shock"],
.skill-book-icon[data-skill-glyph="shock"],
.skill-modal-glyph[data-skill-glyph="shock"],
.glyph[data-skill-glyph="shock"],
.field-slot[data-skill-id="shock"] .glyph,
.kg-glyph[data-skill-glyph="bash"],
.skill-book-icon[data-skill-glyph="bash"],
.skill-modal-glyph[data-skill-glyph="bash"],
.glyph[data-skill-glyph="bash"],
.field-slot[data-skill-id="bash"] .glyph,
.kg-glyph[data-skill-glyph="slam"],
.skill-book-icon[data-skill-glyph="slam"],
.skill-modal-glyph[data-skill-glyph="slam"],
.glyph[data-skill-glyph="slam"],
.field-slot[data-skill-id="slam"] .glyph,
.kg-glyph[data-skill-glyph="line_sweep"],
.skill-book-icon[data-skill-glyph="line_sweep"],
.skill-modal-glyph[data-skill-glyph="line_sweep"],
.glyph[data-skill-glyph="line_sweep"],
.field-slot[data-skill-id="line_sweep"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='shkBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23ffd600'/%3E%3Cstop offset='60%25' stop-color='%23ff6f00'/%3E%3Cstop offset='100%25' stop-color='%23e65100'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23shkBg)' stroke='%23ffe082' stroke-width='1.5'/%3E%3Cpolygon points='36,6 18,32 30,32 26,56 46,26 34,26' fill='%23ffffff' stroke='%23ff6f00' stroke-width='1.2'/%3E%3Ccircle cx='44' cy='16' r='2' fill='%23fff'/%3E%3Ccircle cx='14' cy='46' r='2' fill='%23fff'/%3E%3C/svg%3E") !important;
}

/* bulwark: ปราการศิลา */
.kg-glyph[data-skill-glyph="bulwark"],
.skill-book-icon[data-skill-glyph="bulwark"],
.skill-modal-glyph[data-skill-glyph="bulwark"],
.glyph[data-skill-glyph="bulwark"],
.field-slot[data-skill-id="bulwark"] .glyph,
.kg-glyph[data-skill-glyph="guard"],
.skill-book-icon[data-skill-glyph="guard"],
.skill-modal-glyph[data-skill-glyph="guard"],
.glyph[data-skill-glyph="guard"],
.field-slot[data-skill-id="guard"] .glyph,
.kg-glyph[data-skill-glyph="fortitude"],
.skill-book-icon[data-skill-glyph="fortitude"],
.skill-modal-glyph[data-skill-glyph="fortitude"],
.glyph[data-skill-glyph="fortitude"],
.field-slot[data-skill-id="fortitude"] .glyph,
.kg-glyph[data-skill-glyph="anchor"],
.skill-book-icon[data-skill-glyph="anchor"],
.skill-modal-glyph[data-skill-glyph="anchor"],
.glyph[data-skill-glyph="anchor"],
.field-slot[data-skill-id="anchor"] .glyph,
.kg-glyph[data-skill-glyph="firm_guard"],
.skill-book-icon[data-skill-glyph="firm_guard"],
.skill-modal-glyph[data-skill-glyph="firm_guard"],
.glyph[data-skill-glyph="firm_guard"],
.field-slot[data-skill-id="firm_guard"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='bwBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%2378909c'/%3E%3Cstop offset='60%25' stop-color='%2337474f'/%3E%3Cstop offset='100%25' stop-color='%23212121'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23bwBg)' stroke='%23cfd8dc' stroke-width='1.5'/%3E%3Cpath d='M32 10 L48 18 L48 38 C48 48, 32 56, 32 56 C32 56, 16 48, 16 38 L16 18 Z' fill='%23546e7a' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cline x1='32' y1='18' x2='32' y2='48' stroke='%23ffd54f' stroke-width='2.5'/%3E%3Cline x1='22' y1='30' x2='42' y2='30' stroke='%23ffd54f' stroke-width='2.5'/%3E%3C/svg%3E") !important;
}

/* riposte: ดาบสวนกลับ */
.kg-glyph[data-skill-glyph="riposte"],
.skill-book-icon[data-skill-glyph="riposte"],
.skill-modal-glyph[data-skill-glyph="riposte"],
.glyph[data-skill-glyph="riposte"],
.field-slot[data-skill-id="riposte"] .glyph,
.kg-glyph[data-skill-glyph="seize"],
.skill-book-icon[data-skill-glyph="seize"],
.skill-modal-glyph[data-skill-glyph="seize"],
.glyph[data-skill-glyph="seize"],
.field-slot[data-skill-id="seize"] .glyph,
.kg-glyph[data-skill-glyph="turning_counter"],
.skill-book-icon[data-skill-glyph="turning_counter"],
.skill-modal-glyph[data-skill-glyph="turning_counter"],
.glyph[data-skill-glyph="turning_counter"],
.field-slot[data-skill-id="turning_counter"] .glyph,
.kg-glyph[data-skill-glyph="final_counter"],
.skill-book-icon[data-skill-glyph="final_counter"],
.skill-modal-glyph[data-skill-glyph="final_counter"],
.glyph[data-skill-glyph="final_counter"],
.field-slot[data-skill-id="final_counter"] .glyph,
.kg-glyph[data-skill-glyph="counter"],
.skill-book-icon[data-skill-glyph="counter"],
.skill-modal-glyph[data-skill-glyph="counter"],
.glyph[data-skill-glyph="counter"],
.field-slot[data-skill-id="counter"] .glyph,
.kg-glyph[data-skill-glyph="shadow_counter"],
.skill-book-icon[data-skill-glyph="shadow_counter"],
.skill-modal-glyph[data-skill-glyph="shadow_counter"],
.glyph[data-skill-glyph="shadow_counter"],
.field-slot[data-skill-id="shadow_counter"] .glyph,
.kg-glyph[data-skill-glyph="steadfast_counter"],
.skill-book-icon[data-skill-glyph="steadfast_counter"],
.skill-modal-glyph[data-skill-glyph="steadfast_counter"],
.glyph[data-skill-glyph="steadfast_counter"],
.field-slot[data-skill-id="steadfast_counter"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='ripBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23ff5722'/%3E%3Cstop offset='60%25' stop-color='%23bf360c'/%3E%3Cstop offset='100%25' stop-color='%233e1000'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23ripBg)' stroke='%23ffab91' stroke-width='1.5'/%3E%3Cg stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='16' y1='48' x2='48' y2='16'/%3E%3Cline x1='48' y1='48' x2='16' y2='16'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='4' fill='%23ffd54f'/%3E%3C/svg%3E") !important;
}

/* protect: คุ้มกันสหาย */
.kg-glyph[data-skill-glyph="protect"],
.skill-book-icon[data-skill-glyph="protect"],
.skill-modal-glyph[data-skill-glyph="protect"],
.glyph[data-skill-glyph="protect"],
.field-slot[data-skill-id="protect"] .glyph,
.kg-glyph[data-skill-glyph="taunt"],
.skill-book-icon[data-skill-glyph="taunt"],
.skill-modal-glyph[data-skill-glyph="taunt"],
.glyph[data-skill-glyph="taunt"],
.field-slot[data-skill-id="taunt"] .glyph,
.kg-glyph[data-skill-glyph="ward"],
.skill-book-icon[data-skill-glyph="ward"],
.skill-modal-glyph[data-skill-glyph="ward"],
.glyph[data-skill-glyph="ward"],
.field-slot[data-skill-id="ward"] .glyph,
.kg-glyph[data-skill-glyph="intercept"],
.skill-book-icon[data-skill-glyph="intercept"],
.skill-modal-glyph[data-skill-glyph="intercept"],
.glyph[data-skill-glyph="intercept"],
.field-slot[data-skill-id="intercept"] .glyph,
.kg-glyph[data-skill-glyph="party_ward"],
.skill-book-icon[data-skill-glyph="party_ward"],
.skill-modal-glyph[data-skill-glyph="party_ward"],
.glyph[data-skill-glyph="party_ward"],
.field-slot[data-skill-id="party_ward"] .glyph,
.kg-glyph[data-skill-glyph="enduring_ward"],
.skill-book-icon[data-skill-glyph="enduring_ward"],
.skill-modal-glyph[data-skill-glyph="enduring_ward"],
.glyph[data-skill-glyph="enduring_ward"],
.field-slot[data-skill-id="enduring_ward"] .glyph {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='prtBg' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%2300b0ff'/%3E%3Cstop offset='60%25' stop-color='%230091ea'/%3E%3Cstop offset='100%25' stop-color='%230d47a1'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='30' fill='url(%23prtBg)' stroke='%2380d8ff' stroke-width='1.5'/%3E%3Ccircle cx='22' cy='22' r='6' fill='%23ffffff'/%3E%3Cpath d='M14 44 C14 36, 18 32, 22 32 C26 32, 30 36, 30 44 Z' fill='%23ffffff'/%3E%3Ccircle cx='42' cy='22' r='6' fill='%23ffd54f'/%3E%3Cpath d='M34 44 C34 36, 38 32, 42 32 C46 32, 50 36, 50 44 Z' fill='%23ffd54f'/%3E%3C/svg%3E") !important;
}

/* ===== Phase 5: Floating Target Overhead HUD & Combo Streak ===== */
.target-overhead-hud {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  pointer-events: none; z-index: 7; will-change: transform, left, top;
  transition: opacity 0.2s ease-out;
}
.target-overhead-hud[hidden] { display: none !important; }
.target-overhead-tag {
  font: 800 12px/1 "Noto Sans Thai", system-ui, sans-serif; color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 6px #000; letter-spacing: 0.3px;
  background: rgba(18, 12, 10, 0.82); border: 1px solid rgba(255, 206, 90, 0.5);
  border-radius: 8px; padding: 3px 8px; white-space: nowrap; box-shadow: 0 2px 8px #0008;
}
.target-overhead-bar-wrap {
  width: 96px; height: 8px; background: rgba(10, 10, 10, 0.9);
  border: 1px solid #4a2818; border-radius: 4px; overflow: hidden;
  position: relative; box-shadow: 0 2px 6px rgba(0,0,0,0.85);
}
.target-overhead-delay-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: #fff580; transition: width 0.35s ease-out;
}
.target-overhead-fill-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(90deg, #d32020 0%, #ff5a28 100%);
  transition: width 0.08s linear;
}
.combo-streak-hud {
  position: absolute; right: 28px; top: 36%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; pointer-events: none;
  z-index: 9; transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.combo-streak-hud[hidden] { display: none !important; }
.combo-streak-hits {
  font: 900 38px/1 "Arial Black", Impact, sans-serif; color: #fff;
  -webkit-text-stroke: 4px #260f00; paint-order: stroke fill;
  text-shadow: 0 4px 0 #000, 0 0 18px #ff7a10, 0 0 32px #ff4a00cc;
}
.combo-streak-hits::after {
  content: " HITS"; font-size: 18px; color: #ffd84a; -webkit-text-stroke: 3px #260f00;
}
/* ===== Phase 10: Boss Raid Phase Shift & Occult Shield ===== */
.target-overhead-phase2-badge {
  display: inline-block;
  color: #f0abfc;
  font: 900 11px/1 "Noto Sans Thai", system-ui, sans-serif;
  letter-spacing: 0.5px;
  background: rgba(112, 26, 117, 0.65);
  border: 1px solid #c084fc;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 6px;
  text-shadow: 0 0 6px #a855f7;
  box-shadow: 0 0 8px rgba(192, 132, 252, 0.6);
  animation: pulsePhase2 0.75s infinite alternate;
}
@keyframes pulsePhase2 {
  0% { transform: scale(1); filter: drop-shadow(0 0 3px #9333ea); }
  100% { transform: scale(1.12); filter: drop-shadow(0 0 9px #d946ef); }
}
.target-overhead-stagger-badge {
  display: inline-block;
  color: #fef08a;
  font: 900 11px/1 "Noto Sans Thai", system-ui, sans-serif;
  letter-spacing: 0.5px;
  background: rgba(113, 63, 18, 0.75);
  border: 1px solid #facc15;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 6px;
  text-shadow: 0 0 6px #eab308;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
  animation: pulseStagger 0.5s infinite alternate;
}
@keyframes pulseStagger {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 6px #fde047); }
}
.target-overhead-shield-wrap {
  width: 96px; height: 5px; background: rgba(8, 14, 28, 0.9);
  border: 1px solid #0284c7; border-radius: 3px; overflow: hidden;
  position: relative; margin-top: 1px; box-shadow: 0 0 6px rgba(14, 165, 233, 0.6);
}
.target-overhead-shield-wrap[hidden] { display: none !important; }
.target-overhead-shield-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 50%, #c084fc 100%);
  box-shadow: 0 0 8px #38bdf8;
  transition: width 0.12s ease-out;
}

/* ===== Phase 11: Guild Territory War & War Horn Alert ===== */
.war-screen-alert {
  position: fixed; inset: 0; pointer-events: none; z-index: 99;
  opacity: 0; transition: opacity 0.3s ease-out;
}
.war-screen-alert.show-contested {
  opacity: 1;
  background: radial-gradient(circle at center, transparent 40%, rgba(220, 38, 38, 0.45) 85%, rgba(185, 28, 28, 0.8) 100%);
  animation: pulseWarBorder 0.8s infinite alternate;
}
.war-screen-alert.show-captured {
  opacity: 1;
  background: radial-gradient(circle at center, transparent 40%, rgba(234, 179, 8, 0.45) 85%, rgba(202, 138, 4, 0.85) 100%);
  animation: pulseWarVictory 1.2s ease-out forwards;
}
@keyframes pulseWarBorder {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}
@keyframes pulseWarVictory {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
.war-hud .quest-content strong {
  color: #facc15;
  text-shadow: 0 0 8px #ca8a04, 0 1px 2px #000;
  letter-spacing: 0.5px;
}
.war-flag-indicator {
  display: inline-block;
  font-size: 11px;
  color: #ffd700;
  margin-left: 4px;
  animation: flagWave 1.2s infinite ease-in-out alternate;
}
@keyframes flagWave {
  0% { transform: rotate(-6deg); }
  100% { transform: rotate(6deg); }
}

/* ===== Phase 13: Blood Moon Screen Vignette ===== */
.blood-moon-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 98;
  opacity: 0; transition: opacity 1.2s ease-in-out;
  background: radial-gradient(circle at center, transparent 35%, rgba(185, 28, 28, 0.35) 75%, rgba(127, 29, 29, 0.75) 100%);
}
.blood-moon-vignette.active {
  opacity: 1;
  animation: pulseBloodMoon 3.5s infinite ease-in-out alternate;
}
@keyframes pulseBloodMoon {
  0% { opacity: 0.65; }
  100% { opacity: 1; }
}


/* Voice guidance is audio-only; retain the persona selector in sound settings. */
.voice-persona-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* World Market shell over the existing market catalog. */
#drawer:has(.world-market){width:min(1100px,96vw);max-width:96vw;left:50%;right:auto;transform:translateX(-50%);background:#0f1a33;border:2px solid #c9a24a;box-shadow:0 0 0 1px #5a4317,0 18px 50px rgba(0,0,0,.6)}
.world-market{color:#e7ecf7;font-size:13px}
.wm-header{display:flex;align-items:center;gap:12px;padding:6px 4px 10px;border-bottom:1px solid #c9a24a66}
.wm-header h2{flex:1;margin:0;text-align:center;color:#f2d27a;letter-spacing:.06em;font-size:20px}
.wm-coins{color:#f2d27a;font-weight:700;min-width:90px}
.wm-close{background:transparent;border:1px solid #c9a24a;color:#f2d27a;border-radius:6px;width:32px;height:32px;cursor:pointer}
.wm-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0}
.wm-tabs button{flex:1 1 auto;background:#16264a;color:#b9c6e4;border:1px solid #2d4373;border-radius:6px 6px 0 0;padding:8px 10px;cursor:pointer;font-weight:600}
.wm-tabs button[aria-pressed=true]{background:#f2c94c;color:#2a1d00;border-color:#f2c94c}
.world-market[data-view=search] .market-catalog,.world-market[data-view=price] .market-catalog,.world-market[data-view=wish] .market-catalog,.world-market[data-view=rules] .market-catalog{display:none}
.world-market .market-banner,.world-market .market-tabs{display:none}
.wm-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:12px}
.wm-filters form{display:flex;flex-direction:column;gap:8px;background:#122042;border:1px solid #2d4373;border-radius:8px;padding:10px}
.wm-filters label{display:flex;flex-direction:column;gap:3px;color:#b9c6e4}
.wm-filters input,.wm-filters select,.wm-sort select{background:#0b1430;color:#e7ecf7;border:1px solid #2d4373;border-radius:4px;padding:5px}
.wm-filters .wm-check{flex-direction:row;align-items:center;gap:6px}
.wm-range{display:grid;grid-template-columns:50px 1fr 1fr;gap:4px;align-items:center;color:#b9c6e4}
.wm-range input{min-width:0}
.wm-cat-toggle{background:#1d3160;color:#f2d27a;border:1px solid #c9a24a88;border-radius:4px;padding:6px;text-align:left;font-weight:700}
.wm-cat-list{display:flex;flex-direction:column;gap:2px}
.wm-cat-list button{background:transparent;color:#cfd8ee;border:0;text-align:left;padding:4px 10px;cursor:pointer}
.wm-advanced{border:1px solid #2d4373;border-radius:6px;display:flex;flex-direction:column;gap:4px}
.wm-advanced[hidden]{display:none}
.wm-advanced p{margin:0;font-size:11px}
.wm-soon-tag{font-style:normal;font-size:10px;background:#6b4f12;color:#ffe9a8;border-radius:8px;padding:1px 6px;margin-left:4px}
.wm-apply,.wm-buy{background:linear-gradient(#f5d77a,#c9962e);color:#2a1d00;border:1px solid #8a6416;border-radius:6px;font-weight:700;padding:7px 16px;cursor:pointer}
.wm-buy:disabled{opacity:.5}
.wm-note{margin:0;font-size:11px;color:#8193bb}
.wm-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.wm-list-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between}
.wm-list-head h3{margin:0;color:#f2d27a;display:inline}
.wm-list-head small{margin-left:8px;color:#8193bb}
.wm-rule-line{margin:0;color:#8193bb;font-size:11px}
.wm-sort{display:flex;align-items:center;gap:4px}.wm-sort>span{flex-shrink:0;white-space:nowrap}
.wm-sort button,.wm-footer button:not(.wm-buy){background:#1d3160;color:#e7ecf7;border:1px solid #2d4373;border-radius:4px;padding:5px 10px;cursor:pointer}
.wm-cols,.wm-row{display:grid;grid-template-columns:minmax(0,1fr) 50px 110px 100px;gap:8px;align-items:center}
.wm-cols{padding:4px 10px;color:#8193bb;font-size:11px;border-bottom:1px solid #2d4373}
.wm-cols span:first-child{padding-left:56px}
.wm-rows{display:flex;flex-direction:column;gap:3px;max-height:52vh;overflow-y:auto}
.wm-row{grid-template-columns:48px minmax(0,1fr) 50px 110px 100px;background:#14244a;border:1px solid transparent;border-radius:6px;padding:4px 10px;color:inherit;text-align:left;cursor:pointer}
.wm-row:hover{border-color:#2d4373}.wm-row.is-selected{border-color:#f2c94c;background:#1d3160}
.wm-icon{position:relative;--item-slot-size:44px}
.wm-badge{position:absolute;right:-2px;bottom:-2px;background:#0b1430;border:1px solid #c9a24a;color:#f2d27a;font-size:10px;border-radius:6px;padding:0 4px}
.wm-info{display:flex;flex-direction:column;min-width:0}.wm-info small{color:#8193bb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-name.rarity-common{color:#e7ecf7}.wm-name.rarity-uncommon{color:#6fd36f}.wm-name.rarity-rare{color:#5aa7ff}.wm-name.rarity-epic{color:#c27bff}.wm-name.rarity-legendary{color:#ffb347}
.wm-price{color:#f2d27a;font-weight:700;text-align:right}.wm-lv,.wm-time{color:#cfd8ee;text-align:center}
.wm-details{background:#122042;border:1px solid #2d4373;border-radius:6px;padding:6px 10px}.wm-details p{margin:2px 0}
.wm-footer{display:flex;align-items:center;gap:6px;border-top:1px solid #c9a24a66;padding-top:8px}
.wm-footer span{flex:1;color:#b9c6e4}
.wm-soon,.wm-rules{background:#122042;border:1px solid #2d4373;border-radius:8px;padding:18px;text-align:center}
.wm-soon h3{color:#f2d27a;font-size:22px}.wm-rules{text-align:left}.wm-rules h3{color:#f2d27a}
@media (max-width:760px){.wm-body{grid-template-columns:1fr}.wm-row{grid-template-columns:40px minmax(0,1fr) 34px 80px}.wm-row .wm-time,.wm-cols span:last-child{display:none}.wm-cols{grid-template-columns:minmax(0,1fr) 34px 80px}}

/* Author display rules must not override inactive panels or collapsed controls. */
.world-market [hidden] { display:none !important; }

/* Keep every search action reachable on narrow phones without clipping controls. */
@media (max-width:760px){
  .wm-sort{flex-wrap:wrap;min-width:0;max-width:100%}
  .wm-sort select{flex:1 1 140px;width:auto;min-width:0;max-width:100%}
  .wm-footer{flex-wrap:wrap}
  .wm-footer span{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
}
/* Read-only recent gains. Never intercept world taps or cover the action bar. */
.loot-feed { position:absolute; z-index:4; left:max(8px,env(safe-area-inset-left)); top:calc(max(8px,env(safe-area-inset-top)) + 180px); width:min(48vw,238px); pointer-events:none; color:#f7efd9; text-shadow:0 1px 2px #000; }
.loot-feed[hidden], #game:has(.drawer:not([hidden])) .loot-feed, #game:has(.account-entry:not([hidden])) .loot-feed { display:none; }
.loot-title { display:block; font-size:10px; color:#d7e4c6; margin:0 0 4px 2px; }
.loot-list { list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.loot-row { display:flex; align-items:center; gap:7px; min-width:0; padding:4px 6px; border:1px solid #78965d66; border-radius:8px; background:linear-gradient(90deg,#10241dec,#10241d99); }
.loot-row .bag-slot { flex:none; width:32px; height:32px; min-height:32px; padding:2px; border-radius:6px; pointer-events:none; }
.loot-row .bag-symbol { width:27px; height:27px; font-size:20px; }
.loot-row .bag-quantity { display:none; }
.loot-info { flex:1; min-width:0; }
.loot-info strong { display:block; font-size:11px; line-height:1.35; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.loot-info small { display:block; font-size:10px; color:#dac596; }
.loot-quantity { flex:none; color:#b8f28f; font-size:12px; font-variant-numeric:tabular-nums; }
.loot-history { margin:6px 0 10px; border:1px solid #78965d66; border-radius:9px; padding:0 8px; }
.loot-history summary { min-height:44px; padding:11px 0; color:#d7e4c6; font-size:12px; cursor:pointer; }
.loot-history .loot-list { max-height:240px; overflow:auto; overscroll-behavior:contain; margin-bottom:8px; }
.loot-history .loot-info strong { white-space:normal; overflow-wrap:anywhere; }
.loot-history .note { font-size:11px; }
/* Match the desktop HUD zoom in hud/038 without enlarging the pickup rows. */
@media (min-width:1200px) and (min-height:680px) { #lootFeed.loot-feed { top:calc((max(8px,env(safe-area-inset-top)) + 180px) * 1.22); } }
@media (min-width:1700px) and (min-height:900px) { #lootFeed.loot-feed { top:calc((max(8px,env(safe-area-inset-top)) + 180px) * 1.45); } }
@media (max-width:640px) and (max-height:640px) { .loot-feed .loot-row:nth-child(n+3) { display:none; } }
/* Keep short desktop notifications above chat; all entries remain in bag history. */
@media (min-width:900px) and (min-height:521px) and (max-height:640px) { .loot-feed .loot-row:nth-child(n+3) { display:none; } }
@media (orientation:landscape) and (max-height:520px) { .loot-feed { top:120px; left:calc(min(30vw,202px) + 28px); width:220px; } .loot-feed .loot-row:nth-child(n+2) { display:none; } }