:root { --uis: 1; --vw: calc(1vw / var(--uis)); --vh: calc(1vh / var(--uis)); }
@font-face {
  font-family: "NjNaruto";
  src: url("../assets/ui/njnaruto.ttf") format("truetype");
  font-display: swap;
}
:root {
  --bg-0: #0b0d12;
  --bg-1: #12151d;
  --bg-2: #181c26;
  --bg-3: #212633;
  --line: #2a3040;
  --line-2: #364058;
  --text: #e8ebf3;
  --text-2: #bdc4d4;
  --muted: #a3abbe;
  --orange: #ffd51a;
  --orange-2: #ffe054;
  --chakra: #3cc7ff;
  --gold: #f2c14e;
  --hp: #ff4d5e;
  --mana: #3d8bff;
  --exp: #a970ff;
  --green: #4ade80;
  --red: #f43f5e;
  --rare: #ffd166;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --radius: 12px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: radial-gradient(1200px 600px at 20% -10%, #101927 0%, var(--bg-0) 60%),
              var(--bg-0);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
}
button { font-family: inherit; }
input, select {
  font-family: inherit;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
}
input:focus, select:focus { border-color: var(--orange); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,213,26, .35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,213,26, .35); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255,213,26, .65); }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25); border-radius: 8px; }
::-webkit-scrollbar-corner { background: transparent; }
select option, select optgroup { background: var(--bg-1); color: var(--text); }
textarea { font-family: inherit; background: var(--bg-1); border: 1px solid var(--line-2); color: var(--text); padding: 8px 10px; border-radius: 8px; font-size: 13px; outline: none; resize: vertical; }
textarea:focus { border-color: var(--orange); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--orange); width: 15px; height: 15px; padding: 0; cursor: pointer; }
input[type="range"] { accent-color: var(--orange); padding: 0; background: transparent; border: 0; }
input[type="number"]::-webkit-inner-spin-button { opacity: .5; }
input::placeholder, textarea::placeholder { color: var(--muted); }
select { cursor: pointer; }
:where(table):not([class]) { border-collapse: collapse; width: 100%; font-size: 12px; }
:where(table):not([class]) th { text-align: left; color: var(--orange-2); font-weight: 700; border-bottom: 1px solid var(--line-2); padding: 5px 6px; }
:where(table):not([class]) td { border-bottom: 1px solid var(--line); padding: 5px 6px; color: var(--text-2); }
:where(a):not([class]) { color: var(--orange-2); text-decoration: none; }
:where(a):not([class]):hover { text-decoration: underline; }
:where(hr) { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
::selection { background: rgba(255,213,26, .35); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.win div.small.muted:not(.hunt-foot):not(.pt-rules), .win p.small.muted, .win div.muted.small:not(.hunt-foot):not(.pt-rules), .win .st-hint, .win .sg-note, .win .panel-sub, .win .tk-how, .win .ps-note, .win .ah-t small {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.win .exp { -webkit-line-clamp: unset !important; line-clamp: unset !important; display: block !important; }
.win .cut:not(.exp) { cursor: pointer; }
.win .cut:not(.exp):hover { color: var(--text-2); }
.st-hint, .sg-note, .panel-sub, .item-desc, .ps-note, .tk-info, .jt-desc { font-weight: 500; letter-spacing: .1px; }
.mono { font-family: var(--mono); }
.grow { flex: 1; min-height: 0; }
.gold-text { color: var(--gold); }
.chakra-text { color: var(--chakra); }
.hp-text { color: var(--hp); }
.green { color: var(--green); }
.red { color: var(--red); }
.orange { color: var(--orange-2); }
.small { font-size: 12px; }
.right { text-align: right; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.mt { margin-top: 12px; }
.mb { margin-bottom: 12px; }
.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: block; }
.logo, .logo-big {
  font-family: "NjNaruto", var(--font);
  letter-spacing: 1px;
  color: var(--text);
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(255,213,26, .35);
}
.logo { font-size: 26px; }
.logo-big { font-size: 56px; }
.logo span, .logo-big span { color: var(--orange); }
#screen-loading { display: none; place-items: center; }
#screen-loading.active { display: grid; }
.loading-box { text-align: center; width: 360px; }
.loading-bar { height: 8px; background: var(--bg-3); border-radius: 8px; overflow: hidden; margin: 22px 0 10px; }
#loading-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--gold)); transition: width .2s; }
.btn {
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: transform .06s, background .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.btn:hover { background: #2a3040; border-color: #4a5470; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: linear-gradient(180deg, #ffda35, #ffd000); border-color: #ffde4d; color: #1a0d00; }
.btn-primary:hover { background: linear-gradient(180deg, #ffdf52, #ffd51a); }
.btn-danger { background: #3a1620; border-color: #6b2333; color: #ff9aa8; }
.btn-danger:hover { background: #4d1b29; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-3); color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-block { width: 100%; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text-2);
  white-space: nowrap;
}
.chip.orange { background: rgba(255,213,26, .12); border-color: rgba(255,213,26, .5); color: var(--orange-2); }
.chip.gold { background: rgba(242, 193, 78, .12); border-color: rgba(242, 193, 78, .5); color: var(--gold); }
.chip.green { background: rgba(74, 222, 128, .12); border-color: rgba(74, 222, 128, .45); color: var(--green); }
.chip.red { background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .5); color: #ff8a9a; }
.chip.blue { background: rgba(60, 199, 255, .12); border-color: rgba(60, 199, 255, .5); color: var(--chakra); }
.chip.purple { background: rgba(169, 112, 255, .12); border-color: rgba(169, 112, 255, .5); color: #c9a4ff; }
.chip.fee { background: rgba(232, 62, 77, .12); border-color: rgba(232, 62, 77, .5); color: #ff8e97; }
.bad { color: #ff8e97; }
.card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset;
}
.card-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted);
  font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
}
.panel-title { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.panel-sub { color: var(--text-2); margin: 0 0 16px; }
.bar {
  position: relative; height: 14px; background: #0c0f16; border-radius: 6px; overflow: hidden;
  border: 1px solid #262c3b;
}
.bar > div { height: 100%; width: 0%; border-radius: 6px; }
.bar > span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; font-family: var(--mono); color: #fff; text-shadow: 0 1px 2px #000;
}
.bar-hp > div { background: linear-gradient(90deg, #ff2d4a, #ff6b7a); box-shadow: 0 0 10px rgba(255,45,74,.4); }
.bar-mana > div { background: linear-gradient(90deg, #2e6cff, #5ab0ff); box-shadow: 0 0 10px rgba(46,108,255,.4); }
.bar-exp > div { background: linear-gradient(90deg, #7c3aed, #b388ff); }
.bar-enemy > div { background: linear-gradient(90deg, #ffd000, #ffc94d); }
.bar-cd > div { background: var(--chakra); }
.bar.thin { height: 8px; }
.bar.thin > span { display: none; }
#screen-create { overflow: auto; }
.create-wrap { max-width: 1240px; margin: 0 auto; padding: 32px 24px 60px; }
.create-header { text-align: center; margin-bottom: 24px; }
.create-body { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
.voc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.voc-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px 8px;
  cursor: pointer; text-align: center; transition: transform .12s, border-color .12s, box-shadow .12s;
  position: relative;
}
.voc-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.voc-card.selected { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,213,26,.35), 0 8px 20px rgba(255,213,26,.15); }
.voc-card .sprite-box { margin: 0 auto 6px; }
.voc-card .voc-name { font-weight: 700; font-size: 13px; }
.voc-card .voc-sub { font-size: 10px; color: var(--muted); }
.voc-detail { position: sticky; top: 20px; align-self: start; }
.voc-detail .portrait { width: 100%; height: 160px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.voc-detail h3 { margin: 0 0 4px; font-size: 20px; }
.voc-detail ul { list-style: none; padding: 0; margin: 10px 0 0; }
.voc-detail li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 12px; }
.saga-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.create-footer { display: flex; align-items: end; gap: 14px; margin-top: 22px; justify-content: center; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
.field input, .field select { min-width: 220px; }
.topbar {
  height: 64px; display: grid; grid-template-columns: 170px 300px 1fr auto auto; align-items: center;
  gap: 18px; padding: 0 18px; background: linear-gradient(180deg, #161a24, #10131b);
  border-bottom: 1px solid var(--line);
}
.top-char { display: flex; align-items: center; gap: 10px; }
.top-portrait { width: 44px; height: 44px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line-2); display: grid; place-items: center; overflow: hidden; }
.top-name { font-weight: 800; display: flex; gap: 8px; align-items: center; }
.top-level { font-size: 12px; color: var(--text-2); }
.top-exp .bar { height: 18px; }
.top-stats { display: flex; gap: 8px; }
.stat-pill {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line); font-family: var(--mono); font-weight: 700; font-size: 13px;
}
.stat-pill i { font-style: normal; color: var(--muted); }
.stat-pill.gold { color: var(--gold); }
.stat-pill.gold i { color: var(--gold); }
.stat-pill.elo { color: #c9a4ff; }
.stat-pill.elo i { color: #c9a4ff; }
.top-actions { display: flex; gap: 6px; }
.layout { flex: 1; display: grid; grid-template-columns: 200px 1fr 320px; min-height: 0; }
.sidenav { background: var(--bg-1); border-right: 1px solid var(--line); padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.nav-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px;
  background: transparent; border: 1px solid transparent; color: var(--text-2); cursor: pointer; font-weight: 600; font-size: 13px;
  text-align: left; position: relative;
}
.nav-btn i { font-style: normal; width: 20px; text-align: center; font-size: 15px; }
.nav-btn:hover { background: var(--bg-2); color: var(--text); }
.nav-btn.active { background: rgba(255,213,26,.12); border-color: rgba(255,213,26,.35); color: var(--orange-2); }
.nav-btn em { margin-left: auto; font-style: normal; font-size: 10px; background: var(--orange); color: #1a0d00; border-radius: 999px; padding: 1px 6px; font-weight: 800; }
.nav-btn em:empty { display: none; }
.nav-spacer { flex: 1; }
.main { overflow: auto; padding: 20px 22px; }
.panel { display: none; }
.panel.active { display: block; }
.rightbar { background: var(--bg-1); border-left: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.vital-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; font-family: var(--mono); }
.vital + .vital { margin-top: 8px; }
.vital-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 10px; font-size: 12px; }
.vital-grid div { display: flex; justify-content: space-between; }
.vital-grid b { font-family: var(--mono); font-weight: 600; }
.vital-grid .sk-cell { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 4px; column-gap: 6px; row-gap: 3px; align-items: center; }
.vital-grid .sk-top { display: flex; justify-content: space-between; grid-column: 1 / -1; }
.vital-grid .sk-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.vital-grid .sk-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3a7bd5, #62b8ff); }
.vital-grid .sk-pct { font-family: var(--mono); font-size: 10px; color: var(--text-2); min-width: 26px; text-align: right; }
.vital-grid .sk-cell.use .sk-top b { color: var(--orange-2); }
.vital-grid .sk-cell.use .sk-bar i { background: linear-gradient(90deg, #e8c21b, #ffdd47); }
.equip-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, auto); gap: 4px; max-width: 200px; margin: 0 auto; }
.equip-slot {
  aspect-ratio: 1; background: #0c0f16; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center;
  position: relative; cursor: pointer; transition: border-color .12s;
}
.equip-slot:hover { border-color: var(--line-2); }
.equip-slot.filled { border-color: #3b4560; background: #121620; }
.equip-slot.rare { border-color: var(--rare); box-shadow: 0 0 8px rgba(255,209,102,.25) inset; }
.equip-slot.rare-tank { border-color: var(--green); box-shadow: 0 0 8px rgba(74,222,128,.25) inset; }
.equip-slot.rare-dano { border-color: var(--orange); box-shadow: 0 0 8px rgba(255,213,26,.25) inset; }
.equip-slot.rare-speed { border-color: var(--chakra); box-shadow: 0 0 8px rgba(60,199,255,.25) inset; }
.equip-slot small { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-size: 7px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; pointer-events: none; }
.equip-slot.filled small { display: none; }
.equip-slot img { width: 32px; height: 32px; image-rendering: pixelated; }
.equip-slot .rar { position: absolute; right: 3px; top: 1px; font-size: 10px; font-family: var(--mono); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.slot-glyph { width: 26px; height: 26px; fill: none; stroke: #3a4258; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.equip-slot:hover .slot-glyph { stroke: #5a6480; }
.equip-corner { aspect-ratio: 1; display: grid; place-items: center; opacity: .9; }
.equip-corner img { width: 44px; height: 44px; object-fit: contain; }
.toggles { display: flex; flex-direction: column; gap: 6px; }
.toggle { display: flex; align-items: center; justify-content: space-between; font-size: 12px; cursor: pointer; }
.switch { width: 34px; height: 18px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line-2); position: relative; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: left .15s, background .15s; }
.toggle.on .switch { background: rgba(255,213,26,.35); border-color: var(--orange); }
.toggle.on .switch::after { left: 18px; background: var(--orange); }
.combat-log { overflow: auto; height: 100%; font-family: var(--mono); font-size: 11px; display: flex; flex-direction: column; gap: 2px; }
.combat-log div { padding: 2px 4px; border-radius: 4px; color: var(--text-2); }
.combat-log .dmg { color: #ffb4bd; }
.combat-log .hit { color: #ffd9a3; }
.combat-log .heal { color: #9bf0b7; }
.combat-log .loot { color: var(--gold); }
.combat-log .exp { color: #c9a4ff; }
.combat-log .sys { color: var(--chakra); }
.combat-log .death { color: var(--red); font-weight: 700; }
.sprite-box { position: relative; display: grid; place-items: center; }
.sprite { image-rendering: pixelated; background-repeat: no-repeat; display: block; }
.icon-item { width: 32px; height: 32px; image-rendering: pixelated; }
.hunt-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
.zone-tier { margin-bottom: 20px; }
.zone-tier h4 { margin: 0 0 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; display: flex; align-items: center; gap: 10px; }
.zone-tier h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.zone-card { display: flex; gap: 12px; align-items: center; cursor: pointer; transition: transform .1s, border-color .1s; padding: 10px 12px; }
.zone-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.zone-card.locked { opacity: .45; cursor: not-allowed; }
.zone-card.active { border-color: var(--orange); box-shadow: 0 0 0 1px rgba(255,213,26,.5); }
.zone-card .zone-name { font-weight: 700; font-size: 13px; }
.zone-card .zone-meta { font-size: 11px; color: var(--muted); }
.zone-card .zone-mons { display: flex; gap: 2px; margin-top: 4px; }
.zone-spots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.zone-spots .spot { font-size: 10px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--text-2); cursor: pointer; font-family: var(--mono); }
.zone-spots .spot:hover { border-color: var(--orange); color: var(--orange-2); }
.zone-spots .spot.on { background: rgba(255,213,26,.15); border-color: var(--orange); color: var(--orange-2); }
.danger { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 4px; }
.danger.d0 { color: var(--green); background: rgba(74,222,128,.1); }
.danger.d1 { color: var(--gold); background: rgba(242,193,78,.1); }
.danger.d2 { color: var(--orange-2); background: rgba(255,213,26,.12); }
.danger.d3 { color: var(--red); background: rgba(244,63,94,.12); }
.mapview { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #06070b; aspect-ratio: 15 / 11; }
.mapview-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.mapview-hud { position: absolute; left: 10px; top: 8px; font-family: var(--mono); font-size: 11px; color: #cfd6e6; text-shadow: 0 1px 2px #000; background: rgba(0,0,0,.45); padding: 3px 8px; border-radius: 6px; }
.arena-wrap { display: grid; grid-template-columns: 1fr 260px; gap: 14px; }
.arena {
  position: relative; height: 300px; border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(600px 200px at 50% 110%, rgba(255,213,26,.10), transparent 70%),
    linear-gradient(180deg, #0f1420 0%, #131927 55%, #1b2233 100%);
  border: 1px solid var(--line);
}
.arena::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px; opacity: .6;
  mask-image: linear-gradient(180deg, transparent, #000 40%);
}
.arena .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)); }
.fighter { position: absolute; bottom: 70px; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .12s; }
.fighter.player { left: 20%; }
.fighter.enemy { right: 20%; }
.fighter .name { font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.fighter .bar { width: 120px; height: 9px; }
.fighter .sprite-box { filter: drop-shadow(0 8px 6px rgba(0,0,0,.6)); }
.fighter.hit .sprite-box { animation: shake .25s; }
.fighter.dead .sprite-box { animation: die .5s forwards; }
.fighter.attack .sprite-box { animation: lunge .3s; }
.fighter.enemy.attack .sprite-box { animation: lungeL .3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@keyframes die { to { opacity: 0; transform: translateY(6px) scale(.9); } }
@keyframes lunge { 30% { transform: translateX(14px); } }
@keyframes lungeL { 30% { transform: translateX(-14px); } }
.arena .idle-msg { position: absolute; left: 0; right: 0; top: 18px; text-align: center; color: var(--muted); font-weight: 600; }
.float-dmg {
  position: absolute; font-family: var(--mono); font-weight: 800; font-size: 15px; pointer-events: none;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.8); animation: floatUp 1s ease-out forwards; white-space: nowrap;
}
.float-dmg.player { color: #ffd166; }
.float-dmg.enemy { color: #ff7b8a; }
.float-dmg.heal { color: #7ff0a4; }
.float-dmg.crit { font-size: 20px; color: #ffdb3c; }
.float-dmg.miss { color: var(--muted); font-size: 12px; }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(0) scale(.8); } 15% { opacity: 1; transform: translateY(-8px) scale(1.05); } 100% { opacity: 0; transform: translateY(-44px); } }
.fx { position: absolute; pointer-events: none; image-rendering: pixelated; z-index: 3; }
.arena-side { display: flex; flex-direction: column; gap: 10px; }
.minimap { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #06070b; position: relative; cursor: crosshair; touch-action: none; }
.minimap canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; filter: saturate(.75) brightness(.85); }
.win[data-win="minimap"] .win-body { display: flex; flex-direction: column; }
.win[data-win="minimap"] #minimap-box { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.win[data-win="minimap"][data-sized="1"] .minimap { flex: 1; aspect-ratio: auto; min-height: 60px; }
.mm-ctl { position: absolute; right: 4px; top: 4px; display: flex; flex-direction: column; gap: 3px; align-items: center; z-index: 2; }
.mm-btn { width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid var(--line-2); background: rgba(15,18,26,.85); color: var(--text-2); font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.mm-btn:hover { color: var(--orange-2); border-color: var(--orange); }
.mm-full-btn { position: absolute; right: 4px; bottom: 4px; z-index: 2; }
.win[data-win="minimap"].mm-full { position: fixed !important; left: 10px !important; right: 10px !important; top: 10px !important; bottom: 10px !important;
  width: auto !important; height: auto !important; min-width: 0 !important; max-height: none !important; display: flex; flex-direction: column; }
.win[data-win="minimap"].mm-full .win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.win[data-win="minimap"].mm-full .win-body > * { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.win[data-win="minimap"].mm-full .minimap { flex: 1; aspect-ratio: auto; height: 100%; }
.win[data-win="minimap"].mm-full .mm-ctl { display: flex !important; }
.win[data-win="minimap"].mm-full .mm-btn { width: 30px; height: 30px; font-size: 15px; }
.mm-floor { font-size: 10px; font-weight: 800; color: var(--orange-2); font-family: var(--mono); min-height: 12px; text-shadow: 0 0 3px #000; }
.minimap .pin { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 0 10px var(--orange); }
.minimap .pin::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 3px rgba(255,213,26,.7); --ring: 1.9; animation: ringOut 1.2s ease-out infinite; }
@keyframes glowFade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes ringOut { 0% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(var(--ring, 2)); } }
.hunt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12px; }
.hunt-stats div { display: flex; justify-content: space-between; }
.hunt-stats b { font-family: var(--mono); font-weight: 600; }
.loot-strip { display: flex; flex-wrap: wrap; gap: 4px; min-height: 36px; }
.loot-strip .li { position: relative; width: 36px; height: 36px; background: #0c0f16; border: 1px solid var(--line); border-radius: 6px; display: grid; place-items: center; }
.loot-strip .li span { position: absolute; right: 1px; bottom: 0; font-size: 9px; font-family: var(--mono); color: var(--gold); text-shadow: 0 0 2px #000; }
.hunt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.jutsu-bar { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.jutsu-cd { width: 44px; text-align: center; cursor: pointer; }
.jutsu-cd:hover .ic { border-color: var(--orange); }
.jutsu-cd .ic { width: 44px; height: 44px; border-radius: 8px; background: #0c0f16; border: 1px solid var(--line); position: relative; overflow: hidden; display: grid; place-items: center; }
.jutsu-cd .ic .ov { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(60,199,255,.25); }
.jutsu-cd small { font-size: 9px; color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jutsu-cd.active .ic { border-color: #c9a4ff; box-shadow: 0 0 8px rgba(169,112,255,.5); }
.jutsu-cd .ic .lv { position: absolute; left: 2px; top: 1px; font: 700 8px/9px "JetBrains Mono", monospace; font-style: normal; color: #ffe9a8;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; pointer-events: none; }
.jutsu-cd.locked .ic > :not(.lv):not(.left):not(.ov) { filter: grayscale(1) brightness(.45); }
.jutsu-cd.locked .ic::after { content: "🔒"; position: absolute; right: 2px; bottom: 1px; font-size: 10px; }
.jutsu-cd.locked small { opacity: .55; }
.jutsu-sep { flex: none; width: 1px; align-self: stretch; margin: 2px 4px; background: linear-gradient(transparent, rgba(242,193,78,.6), transparent); }
.jutsu-cd.blocked .ic { filter: grayscale(.75) brightness(.7); border-color: rgba(245,94,94,.55); }
.spell-icon { image-rendering: pixelated; display: block; }
.jutsu-card .jdesc { font-size: 11px; color: var(--text-2); margin-top: 6px; line-height: 1.35; }
.jutsu-card .fxbox img { width: 40px; height: 40px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.stat-list { list-style: none; margin: 0; padding: 0; }
.stat-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.stat-list li:last-child { border-bottom: 0; }
.stat-list b { font-family: var(--mono); font-weight: 600; }
.stat-list .sub { font-size: 11px; color: var(--muted); }
.char-hero { display: flex; gap: 16px; align-items: center; }
.char-hero .sprite-box { width: 96px; height: 96px; background: #0c0f16; border-radius: 12px; border: 1px solid var(--line); }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.inv-slot {
  aspect-ratio: 1; background: #0c0f16; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center;
  position: relative; cursor: pointer; transition: border-color .12s, transform .1s;
}
.inv-slot:hover { border-color: var(--line-2); transform: translateY(-1px); }
.inv-slot.rare { border-color: var(--rare); }
.inv-slot.equipable { border-color: #3b4560; }
.inv-slot .count { position: absolute; right: 2px; bottom: 1px; font-size: 9px; font-family: var(--mono); color: var(--gold); text-shadow: 0 0 2px #000; }
.inv-slot .lv { position: absolute; left: 3px; top: 1px; font-size: 8px; color: var(--muted); }
.inv-slot .lv.locked { color: var(--red); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.filters .btn.active, .map-ctl .btn.active { border-color: var(--orange); color: var(--orange-2); }
.item-head { display: flex; gap: 12px; align-items: center; }
.item-head .ibox { width: 48px; height: 48px; background: #0c0f16; border: 1px solid var(--line-2); border-radius: 8px; display: grid; place-items: center; }
.item-head .ibox img { width: 32px; height: 32px; image-rendering: pixelated; }
.item-name { font-weight: 800; font-size: 15px; }
.item-name.rare { color: var(--rare); }
.inv-slot.q0, .equip-slot.q0, .ibox.q0 { border-color: #6f7580; }
.inv-slot.q1, .equip-slot.q1, .ibox.q1 { border-color: #3fcf5b; box-shadow: 0 0 7px rgba(63,207,91,.26) inset; }
.inv-slot.q2, .equip-slot.q2, .ibox.q2 { border-color: #3d8dff; box-shadow: 0 0 7px rgba(61,141,255,.3) inset; }
.inv-slot.q3, .equip-slot.q3, .ibox.q3 { border-color: #b25cff; box-shadow: 0 0 8px rgba(178,92,255,.34) inset; }
.inv-slot.q4, .equip-slot.q4, .ibox.q4 { border-color: #ff3b3b; box-shadow: 0 0 10px rgba(255,59,59,.42) inset; }
.item-name.q1, .rar.q1 { color: #3fcf5b; } .item-name.q2, .rar.q2 { color: #3d8dff; } .item-name.q3, .rar.q3 { color: #b25cff; } .item-name.q4, .rar.q4 { color: #ff3b3b; }
.set-catalog { display: grid; gap: 8px; }
.set-card { display: grid; gap: 6px; padding: 10px; }
.set-card.locked { opacity: .6; }
.shop-set-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.shop-set-pieces { display: grid; grid-template-columns: repeat(8, 36px); gap: 4px; }
.shop-set-pieces .ibox { width: 36px; height: 36px; display: grid; place-items: center; background: #0c0f16; border: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; }
.shop-set-pieces .ibox img { width: 32px; height: 32px; image-rendering: pixelated; }
.item-mult { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; padding: 3px 8px; border-radius: 7px;
  background: color-mix(in srgb, var(--qc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--qc) 45%, transparent); }
.item-mult b { color: var(--qc); font-family: var(--mono); font-size: 12px; }
.item-mult span { color: var(--muted); font-size: 11px; }
.item-stats { margin: 10px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; font-size: 12px; }
.item-stats div { display: flex; justify-content: space-between; }
.item-stats b { font-family: var(--mono); font-weight: 600; }
.item-stats .up { color: var(--green); }
.item-stats .down { color: var(--red); }
.item-desc { font-size: 12px; color: var(--text-2); font-style: italic; }
.item-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tooltip {
  position: fixed; z-index: 9800; pointer-events: none; max-width: 300px;
  background: #0d1017; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); font-size: 12px;
}
.jutsu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.jutsu-card { display: flex; gap: 12px; align-items: center; }
.jutsu-card.locked { opacity: .5; }
.jutsu-card .fxbox { width: 56px; height: 56px; background: #0c0f16; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.jutsu-card .jname { font-weight: 700; }
.jutsu-card .jwords { font-size: 11px; color: var(--muted); font-style: italic; }
.jutsu-card .jmeta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.shop-item { display: flex; gap: 10px; align-items: center; }
.shop-item .ibox { width: 44px; height: 44px; background: #0c0f16; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.shop-item .ibox img { width: 32px; height: 32px; image-rendering: pixelated; }
.shop-item .price { font-family: var(--mono); color: var(--gold); font-weight: 700; font-size: 12px; }
.decor-item .decor-prev { width: 104px; height: 104px; flex-shrink: 0; display: grid; place-items: center; background: #0c0f16; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.decor-item .decor-img { background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated; }
.decor-item .decor-carpet { display: grid; grid-template-columns: repeat(3, 32px); }
.decor-item .decor-carpet img { width: 32px; height: 32px; image-rendering: pixelated; display: block; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tab { padding: 8px 14px; cursor: pointer; color: var(--text-2); font-weight: 600; border-bottom: 2px solid transparent; }
.tab.active { color: var(--orange-2); border-bottom-color: var(--orange); }
.task-list { display: grid; gap: 8px; }
.task-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.task-card.done { opacity: .55; }
.task-card .tname { font-weight: 700; }
.task-card .bar { margin-top: 6px; height: 8px; }
.task-card .bar span { display: none; }
.saga-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.boss-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; position: relative; }
.boss-card.locked { opacity: .5; }
.boss-card.done { border-color: rgba(74,222,128,.4); }
.boss-card .bname { font-weight: 800; }
.boss-card .bmeta { font-size: 11px; color: var(--muted); }
.boss-card .barea { font-size: 11px; color: var(--accent, #f5ca0b); text-align: center; }
.saga-arc { grid-column: 1 / -1; margin-top: 6px; padding: 4px 8px; border-left: 3px solid var(--accent, #f5ca0b); font-weight: 800; font-size: 13px; letter-spacing: .3px; text-transform: uppercase; color: #fbbf24; background: rgba(245,202,11, .08); }
.boss-card .sprite-box { height: 96px; }
.boss-card .check { position: absolute; top: 8px; right: 8px; }
.rank-list { display: grid; gap: 8px; }
.rank-card { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; }
.rank-card img { width: 64px; height: 64px; object-fit: contain; image-rendering: auto; }
.rank-card.current { border-color: var(--orange); }
.rank-card.locked { opacity: .5; }
.map-wrap { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #06070b; height: calc(calc(100 * var(--vh)) - 200px); }
.map-wrap canvas { position: absolute; left: 0; top: 0; image-rendering: pixelated; cursor: grab; filter: saturate(.75) brightness(.85); }
.map-ctl { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
.modal { position: fixed; inset: 0; background: rgba(4,6,10,.7); display: grid; place-items: center; z-index: 9700; backdrop-filter: blur(3px); }
.modal-box { width: min(560px, calc(92 * var(--vw))); max-height: calc(86 * var(--vh)); overflow: auto; box-shadow: var(--shadow); }
.modal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 16px; margin-bottom: 10px; }
.toasts { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 9750; pointer-events: none; }
.toast { background: rgba(14, 18, 28, .9); border: 1px solid var(--line-2); border-left: 3px solid var(--orange); padding: 7px 14px; border-radius: 10px;
  box-shadow: var(--shadow); font-size: 13px; animation: toastIn .2s; max-width: min(420px, calc(90 * var(--vw))); text-align: center; }
.toast.gold { border-left-color: var(--gold); }
.toast.green { border-left-color: var(--green); }
.toast.red { border-left-color: var(--red); }
.toast.purple { border-left-color: var(--exp); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.kv b { font-family: var(--mono); font-weight: 600; }
.offline-box .big { font-size: 26px; font-weight: 800; color: var(--gold); font-family: var(--mono); }
.empty { padding: 30px; text-align: center; color: var(--muted); }
@media (max-width: 1200px) {
  .layout { grid-template-columns: 64px 1fr 300px; }
  .nav-btn span { display: none; }
  .topbar { grid-template-columns: 120px 240px 1fr auto auto; }
}
.login-screen { overflow: auto; }
.login-bg { position: absolute; inset: 0; background: url("../assets/ui/login-bg-vale.jpg") center/cover no-repeat; filter: saturate(.85) brightness(.45); }
.login-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,18,.35), rgba(11,13,18,.9) 85%); }
.login-wrap { position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 16px; gap: 10px; }
.login-logo { width: 190px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.6)); }
.login-logo-nto { width: min(300px, calc(70 * var(--vw))); margin-bottom: 4px; filter: drop-shadow(0 10px 28px rgba(255,210,10,.35)) drop-shadow(0 6px 16px rgba(0,0,0,.6)); }
.login-title { font-family: "NjNaruto", var(--font); font-size: 44px; letter-spacing: 1px; text-shadow: 0 2px 0 #000, 0 0 24px rgba(255,213,26,.45); }
.login-title span { color: var(--orange); }
.login-title.small-title { font-size: 30px; }
.login-card { width: min(400px, 100%); padding: 18px 20px 16px; background: rgba(18,21,29,.92); backdrop-filter: blur(6px); }
.login-tabs { margin-bottom: 14px; }
.login-tabs .tab { flex: 1; text-align: center; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card .field input { min-width: 0; width: 100%; }
.remember { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.form-error { background: rgba(244,63,94,.12); border: 1px solid rgba(244,63,94,.45); color: #ff8a9a; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.login-mode { margin-top: 12px; text-align: center; }
.login-lang { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.lang-flags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.login-lang.lang-flags { justify-content: center; }
.lang-flag { display: inline-flex; align-items: center; gap: 6px; padding: 2px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--bg-1); cursor: pointer; opacity: .55; font-family: inherit; color: var(--text-2); font-size: 12px; font-weight: 700; }
.lang-flag svg { width: 24px; height: 16px; display: block; border-radius: 2px; }
.lang-flag:hover { opacity: .9; }
.lang-flag.active { opacity: 1; border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.lang-flag.big { padding: 4px 10px 4px 5px; border-radius: 999px; }
.lang-flag.big.active { color: #fff; }
.login-card:has(#register-form:not(.hidden)) #login-lang { display: none; }
.reg-lang { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-2); }
.login-link { align-self: center; font-size: 12px; color: var(--text-2); text-decoration: none; }
.login-link:hover { color: #ffd61f; text-decoration: underline; }
.login-sub { display: flex; flex-direction: column; gap: 4px; }
.login-sub b { font-size: 15px; color: #fff; }
.login-sub span { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.form-ok { background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.45); color: #7ee2b8; padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4; }
.acc-box { display: flex; flex-direction: column; gap: 12px; }
.acc-sec { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.025); }
.acc-sec .field input { min-width: 0; width: 100%; }
.acc-sec > .btn { align-self: flex-start; }
.acc-h { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #ffd61f; }
.acc-mail { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.acc-mail b { color: #fff; word-break: break-all; }
.acc-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.acc-pill.ok { background: rgba(52,211,153,.15); color: #7ee2b8; }
.acc-pill.warn { background: rgba(255,209,102,.15); color: #ffd166; }
.acc-pill.bad { background: rgba(244,63,94,.15); color: #ff8a9a; }
.acc-hint { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.acc-msg { font-size: 12px; line-height: 1.4; }
.acc-msg.hidden { display: none; }
.acc-msg.ok { color: #7ee2b8; }
.acc-msg.bad { color: #ff8a9a; }
.modal.modal-account .modal-box { width: min(480px, calc(94 * var(--vw))); }
.chars-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 10px; padding: 9px 14px; border-radius: 12px;
  background: rgba(255,209,102,.08); border: 1px solid rgba(255,209,102,.35); font-size: 12.5px; color: #d8dce6; }
.chars-mail.hidden { display: none; }
.chars-mail b { color: #ffd166; }
.chars-mail .btn { margin-left: auto; }
.login-foot { text-align: center; max-width: 460px; }
.login-discord { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 400px; box-sizing: border-box; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #5865f2, #4752c4); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 6px 18px rgba(88, 101, 242, .3); }
.login-discord:hover { filter: brightness(1.1); } .login-discord .ic { width: 20px; height: 20px; }
.tool-btn#btn-discord i { color: #8b95ff; }
.login-vote { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 400px; box-sizing: border-box; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #2f9e5b, #237a45); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 6px 18px rgba(47, 158, 91, .28); }
.login-vote:hover { filter: brightness(1.1); } .login-vote .ic { width: 20px; height: 20px; }
.tool-btn#btn-vote i { color: #5fd88e; }
.login-app { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 400px; box-sizing: border-box; padding: 10px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #2b3242, #1d222e); border: 1px solid rgba(255,222,77, .45); color: #fff; font-weight: 800; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); cursor: pointer; }
.login-app:hover { filter: brightness(1.15); } .login-app .la-ic { font-size: 18px; line-height: 1; }
.app-steps { margin: 6px 0 0; padding-left: 20px; line-height: 1.7; } .app-steps b { color: #ffd166; }
.chars-wrap { position: relative; max-width: 860px; margin: 0 auto; padding: 30px 16px 60px; }
.chars-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.chars-list { display: grid; gap: 8px; }
.char-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .12s, transform .1s; }
.char-row:hover { border-color: var(--orange); transform: translateY(-1px); }
.char-row .cname { font-weight: 800; font-size: 15px; }
.char-row .cmeta { font-size: 12px; color: var(--text-2); display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.char-row .cactions { display: flex; gap: 6px; }
.chars-empty { padding: 30px; text-align: center; color: var(--muted); }
.chars-vip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; padding: 9px 14px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,209,102,.16), rgba(255,213,26,.07)); border: 1px solid rgba(255,209,102,.45); }
.chars-vip.hidden { display: none; }
.chars-vip b { color: #ffd166; letter-spacing: .3px; }
.chars-vip span { color: var(--text-2); font-size: 12.5px; }
.depot-list { display: grid; gap: 6px; }
.depot-card { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; }
.depot-card.here { border-color: var(--green); }
.depot-card .dname { font-weight: 700; }
.inv-slot.disabled { opacity: .6; cursor: not-allowed; }
#screen-game { overflow: hidden; background: #06070b; }
#screen-game.active { display: block; }
.world-canvas { position: absolute; top: 0; bottom: 0; left: var(--sbl, 0px); width: calc(100% - var(--sbl, 0px) - var(--sbr, 0px)); height: 100%; display: block; image-rendering: pixelated; z-index: 0; touch-action: none; }
.world-overlay { position: absolute; top: 0; bottom: 0; left: var(--sbl, 0px); width: calc(100% - var(--sbl, 0px) - var(--sbr, 0px)); height: 100%; display: block; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%); }
.st-edge { position: absolute; top: 0; bottom: 0; left: var(--sbl, 0px); width: calc(100% - var(--sbl, 0px) - var(--sbr, 0px)); z-index: 14; pointer-events: none; opacity: 0; transition: opacity .25s; }
.st-edge.on { opacity: 1; animation: st-edge-pulse 1.6s ease-in-out infinite; }
@keyframes st-edge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
.st-edge { --bw: clamp(110px, 21vmin, 250px); }
.st-edge-glow, .st-edge-dark { position: absolute; inset: 0; pointer-events: none; }
.st-edge-glow { opacity: .85; transition: background .25s;
  --m: #000 0, rgba(0,0,0,.72) calc(var(--bw) * .22), rgba(0,0,0,.36) calc(var(--bw) * .55), rgba(0,0,0,.12) calc(var(--bw) * .82), transparent var(--bw);
  -webkit-mask-image: linear-gradient(to right, var(--m)), linear-gradient(to left, var(--m)), linear-gradient(to bottom, var(--m)), linear-gradient(to top, var(--m));
  mask-image: linear-gradient(to right, var(--m)), linear-gradient(to left, var(--m)), linear-gradient(to bottom, var(--m)), linear-gradient(to top, var(--m)); }
.st-edge-dark { --d: rgba(0,0,0,.62) 0, rgba(0,0,0,.34) calc(var(--bw) * .16), rgba(0,0,0,.1) calc(var(--bw) * .38), transparent calc(var(--bw) * .55);
  background: linear-gradient(to right, var(--d)), linear-gradient(to left, var(--d)), linear-gradient(to bottom, var(--d)), linear-gradient(to top, var(--d)); }
.st-edge.blind { --bw: clamp(140px, 27vmin, 320px); }
.st-edge.blind .st-edge-dark { --d: rgba(0,0,0,.85) 0, rgba(0,0,0,.6) calc(var(--bw) * .3), rgba(0,0,0,.2) calc(var(--bw) * .7), transparent var(--bw); }
.st-edge-top { position: absolute; top: 138px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; width: max-content; max-width: min(340px, 80%); }
.st-edge-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.st-edge-msg { font: 500 11px Inter, sans-serif; color: #aab3c2; background: linear-gradient(90deg, rgba(10,12,18,.85), rgba(10,12,18,.6)); border-left: 3px solid var(--c, #ffe14d); border-radius: 4px; padding: 3px 10px; text-align: center; text-shadow: 0 1px 2px #000; opacity: 0; transform: translateY(-3px); transition: opacity .3s, transform .3s; }
.st-edge-msg b { font-weight: 700; }
.st-edge-msg i { font-style: normal; color: #5d6676; }
.st-edge-msg.show { opacity: 1; transform: none; }
.st-edge-tags span { font: 700 11px "JetBrains Mono", monospace; letter-spacing: .5px; color: var(--c); background: rgba(10,12,18,.72); border: 1px solid var(--c); border-radius: 6px; padding: 2px 7px; text-shadow: 0 1px 2px #000; }
@media (prefers-reduced-motion: reduce) { .st-edge.on { animation: none; } }
@media (max-width: 760px) { .st-edge-top { top: auto; bottom: calc(140px + env(safe-area-inset-bottom)); } }
.world-status {
  position: absolute; left: calc(var(--sbl, 0px) + (100% - var(--sbl, 0px) - var(--sbr, 0px)) / 2); top: 86px; transform: translateX(-50%); z-index: 15; pointer-events: none;
  font-family: var(--mono); font-size: 11px; color: #cfd6e6; text-shadow: 0 1px 2px #000;
  background: rgba(0,0,0,.5); padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.hud-char { display: flex; gap: 10px; align-items: flex-start; }
.hud-char-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hud-char .top-name { font-size: 14px; }
.hud-char .bar { height: 14px; }
.hud-char .bar span { font-size: 9px; }
.hud-pills { display: flex; gap: 5px; }
.hud-pills .stat-pill { padding: 3px 8px; font-size: 11px; border-radius: 8px; }
.toolbar {
  position: absolute; top: 10px; left: calc(var(--sbl, 0px) + 12px); right: calc(var(--sbr, 0px) + 12px); z-index: 30;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 6px; pointer-events: none;
}
.tb-side {
  display: flex; align-items: stretch; gap: 2px; padding: 5px 8px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; pointer-events: auto;
  background: rgba(13,16,23,.9); border: 1px solid rgba(255,213,26,.4); border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.3) inset; backdrop-filter: blur(4px);
}
.tb-side::-webkit-scrollbar { display: none; }
.tb-left { justify-self: end; }
.tb-right { justify-self: start; }
.toolbar .tool-play { pointer-events: auto; margin: 0; }
.tool-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 56px; padding: 5px 6px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--text-2); font-size: 10.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.tool-btn i { font-style: normal; font-size: 18px; line-height: 1.1; }
:root { --ic-acc: var(--orange); --ic-red: #e2382d; }
.ic { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ic .a { fill: var(--ic-acc); stroke: none; }
.ic .as { stroke: var(--ic-acc); stroke-width: 2; }
.ic .r { fill: var(--ic-red); stroke: none; }
.ic .rs { stroke: var(--ic-red); stroke-width: 2; }
.ic .f { fill: currentColor; stroke: none; }
.ic .d { stroke: rgba(10,12,18,.55); stroke-width: 1.2; }
.ic .dd { fill: rgba(10,12,18,.75); stroke: none; }
.ic .dash { opacity: .45; }
.tool-btn i:has(.ic) { display: grid; place-items: center; height: 22px; }
.tool-btn .ic { transition: transform .12s ease; }
.tool-btn:hover .ic { transform: translateY(-1px); }
.tool-btn.active { --ic-acc: #ffe7cf; }
.tool-btn:hover { background: var(--bg-3); color: var(--text); }
.tool-btn.active { background: rgba(255,213,26,.14); border-color: rgba(255,213,26,.5); color: var(--orange-2); }
.tool-btn em {
  position: absolute; top: 1px; right: 3px; font-style: normal; font-size: 9px; font-weight: 800;
  background: var(--orange); color: #1a0d00; border-radius: 999px; padding: 0 5px;
}
.tool-btn em:empty { display: none; }
.tool-sep { width: 1px; background: var(--line-2); margin: 6px 4px; }
.win {
  position: absolute; z-index: 20; display: flex; flex-direction: column; min-width: 180px; max-height: calc(calc(100 * var(--vh)) - 16px);
  background: rgba(15,18,26,.93); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.55); backdrop-filter: blur(4px);
}
.win.closed { display: none; }
.win.resizable, .win[data-sized="1"] { overflow: hidden; }
.win.resizable { min-height: 120px; }
.win-rz { position: absolute; z-index: 3; }
.rz-n, .rz-s { left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
.rz-n { top: 0; } .rz-s { bottom: 0; }
.rz-e, .rz-w { top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
.rz-e { right: 0; } .rz-w { left: 0; }
.rz-ne, .rz-nw, .rz-se, .rz-sw { width: 12px; height: 12px; }
.rz-ne { top: 0; right: 0; cursor: nesw-resize; } .rz-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.rz-nw { top: 0; left: 0; cursor: nwse-resize; } .rz-se { bottom: 0; right: 0; cursor: nwse-resize; }
.rz-se::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 6px; height: 6px; border-right: 2px solid var(--line-2); border-bottom: 2px solid var(--line-2); border-radius: 0 0 3px 0; }
.win.min .win-rz, .win.docked .rz-e, .win.docked .rz-w, .win.docked .rz-ne, .win.docked .rz-nw, .win.docked .rz-se, .win.docked .rz-sw { display: none; }
.win.resizing { user-select: none; }
.sidebar { position: absolute; top: 0; bottom: 0; z-index: 18; display: none; background: rgba(10,12,18,.94); }
.sidebar.on { display: flex; }
.sidebar.left { left: 0; border-right: 1px solid var(--line-2); }
.sidebar.right { right: 0; border-left: 1px solid var(--line-2); }
.sb-stack { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 4px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; }
.sb-grip { width: 5px; cursor: ew-resize; flex: none; background: transparent; }
.sb-grip:hover { background: rgba(255,213,26,.35); }
.sidebar.left .sb-grip { order: 2; } .sidebar.right .sb-grip { order: -1; }
.sb-stack > .win { position: relative !important; left: auto !important; top: auto !important; width: auto !important; max-height: none; flex: none; min-width: 0; border-radius: 8px; box-shadow: none; z-index: auto !important; }
.sb-stack > .win.closed { display: none; }
.sb-stack:empty::after { content: "Arraste janelas para cá"; color: var(--muted); font-size: 11px; text-align: center; padding: 20px 8px; border: 1px dashed var(--line-2); border-radius: 8px; }
.win-drop { position: fixed; height: 3px; z-index: 9500; background: var(--orange); box-shadow: 0 0 10px rgba(255,213,26,.8); border-radius: 2px; pointer-events: none; }
.win-drop.hidden { display: none; }
.win.dragging { opacity: .9; }
.win-head {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; cursor: move; user-select: none;
  border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange-2);
  touch-action: none;
}
.win-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-head button {
  width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--bg-3); color: var(--text-2); font-size: 11px; line-height: 1;
}
.win-head button:hover { color: var(--text); border-color: #4a5470; }
.win-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
.win.min { height: auto !important; resize: none; min-height: 0; }
.win.min .win-body { display: none; }
.win.min .win-head { border-bottom: 0; }
.win-head .win-lock { color: var(--muted); }
.win-head .win-lock svg { display: block; }
.win.locked .win-head .win-lock { color: var(--orange-2); border-color: rgba(255,213,26,.55); background: rgba(255,213,26,.12); }
.win.locked .win-head { cursor: default; }
.win.locked .win-rz { display: none !important; }
.islot { position: relative; width: 40px; height: 40px; box-sizing: border-box; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
  --qb: #3a4152; --qg: rgba(255,255,255,.05);
  background: radial-gradient(circle at 50% 42%, var(--qg), transparent 68%), linear-gradient(180deg, #1c2130, #10131b);
  border: 1px solid var(--qb); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -8px 12px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.4);
  transition: border-color .12s, box-shadow .12s, transform .1s; }
.islot.q0 { --qb: #4d5466; }
.islot.q1 { --qb: #3fcf5b; --qg: rgba(63,207,91,.28); }
.islot.q2 { --qb: #3d8dff; --qg: rgba(61,141,255,.3); }
.islot.q3 { --qb: #b25cff; --qg: rgba(178,92,255,.32); }
.islot.q4 { --qb: #ff3b3b; --qg: rgba(255,59,59,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -8px 12px rgba(0,0,0,.28), 0 0 8px rgba(255,59,59,.28); }
.islot:not(.empty):hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px var(--qb), 0 0 12px var(--qg), 0 4px 10px rgba(0,0,0,.45); }
.islot.empty { padding: 0; text-align: initial; cursor: default; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); border-color: rgba(255,255,255,.08); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.islot img { width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.islot.locked img { filter: grayscale(.7) brightness(.7); }
.islot .ph { width: 22px; height: 22px; color: #3d4558; --ic-acc: #3d4558; stroke-width: 1.6; }
.islot .ph + .slot-tag { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 7px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; line-height: 1; color: #59627a; pointer-events: none; }
.islot.empty .ph { width: 19px; height: 19px; margin-bottom: 8px; }
.nto-count { position: absolute; right: 3px; bottom: 1px; font: 700 10px/12px var(--mono); color: #fff; pointer-events: none; text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 1px #000; }
.nto-mark { position: absolute; right: 3px; top: 1px; font: 800 9px/11px var(--mono); color: var(--gold); pointer-events: none; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.islot .forge-badge { top: 1px; left: 3px; right: auto; }
.islot.drop-target, .nto-bag.drop-target { outline: 2px solid var(--orange); outline-offset: -2px; }
.islot.dragging-src { opacity: .4; }
.drag-ghost { position: fixed; z-index: 200000; width: 40px; height: 40px; box-sizing: border-box; pointer-events: none; display: grid; place-items: center; opacity: .92;
  border: 1px solid var(--orange-2); border-radius: 9px; background: linear-gradient(180deg, #1c2130, #10131b); filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)); transform: scale(1.1); }
.drag-ghost img { width: 32px; height: 32px; image-rendering: pixelated; }
.drag-ghost.drag-creature { width: auto; height: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: rgba(13, 16, 23, .92); border: 1px solid var(--line-2); color: var(--text); white-space: nowrap; }
body.item-dragging, body.item-dragging * { cursor: grabbing !important; }
.nto-cell, .nto-slot { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.nto-cell.held, .nto-slot.held { outline: 2px solid var(--orange); outline-offset: -2px; box-shadow: 0 0 12px rgba(255,216,40, .55); opacity: .55; }
.drag-ghost.drag-touch { transform: scale(1.35); }
body.item-dragging #tooltip { display: none !important; }
.win[data-win="equip"] { --k: 1; width: calc(196px * var(--k)) !important; height: calc(442px * var(--k)) !important; min-width: 0; max-height: none; }
.win[data-win="equip"].min { height: auto !important; }
.win[data-win="equip"] .win-head { font-size: calc(11px * var(--k)); gap: calc(6px * var(--k)); padding: calc(6px * var(--k)) calc(8px * var(--k)) calc(6px * var(--k)) calc(12px * var(--k)); }
.win[data-win="equip"] .win-head button { width: calc(22px * var(--k)); height: calc(22px * var(--k)); font-size: calc(11px * var(--k)); border-radius: calc(6px * var(--k)); }
.win[data-win="equip"] .win-head .win-lock svg { width: calc(12px * var(--k)); height: calc(12px * var(--k)); }
.win[data-win="equip"] .win-body { padding: 0; overflow: hidden; }
.eqx { zoom: var(--k, 1); padding: 12px 10px 10px; display: grid; gap: 10px; justify-items: center; }
.eqx-doll { position: relative; width: 148px; height: 206px; }
.eqx-doll::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -2px; width: 76px; transform: translateX(-50%); border-radius: 38px;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,213,26,.13), transparent 70%); pointer-events: none; }
.eqx-doll .islot { position: absolute; }
.eqx-pill { position: absolute; width: 40px; height: 20px; box-sizing: border-box; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; }
.eqx-pill small { font-size: 7.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.eqx-pill b { font: 700 10px/1 var(--mono); color: var(--text); }
#eq-soul small { letter-spacing: 0; }
#eq-soul.green { border-color: rgba(74,222,128,.55); } #eq-soul.green b { color: var(--green); }
#eq-soul.bad { border-color: rgba(255,90,110,.6); } #eq-soul.bad b { color: #ff7a8a; }
.eqx-modes { display: flex; align-items: center; gap: 4px; }
.eqx-mode { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--text-2); cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.eqx-mode .ic { width: 16px; height: 16px; }
.eqx-mode:hover { color: var(--text); border-color: var(--orange-2); }
.eqx-mode.on { background: rgba(255,213,26,.16); border-color: var(--orange); color: var(--orange-2); --ic-acc: #ffe7cf; box-shadow: 0 0 8px rgba(255,213,26,.25); }
.eqx-mode.pvp.on { background: rgba(255,59,59,.16); border-color: #ff5a5a; color: #ff9a9a; --ic-acc: #ffd6d6; box-shadow: 0 0 8px rgba(255,59,59,.25); }
.eqx-sep { width: 1px; height: 18px; background: var(--line-2); margin: 0 3px; }
.eqx-status { width: 100%; display: flex; align-items: center; gap: 6px; min-height: 24px; }
.eqx-pvp { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--green); --ic-acc: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .6px; cursor: pointer; }
.eqx-pvp .ic { width: 13px; height: 13px; }
.eqx-pvp.on { border-color: var(--red); color: #ff8a9a; --ic-acc: #ff8a9a; }
.eqx-status > .eqx-pvp { flex: none; }
.eqx-cond { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 3px; justify-content: flex-end; }
.eqx-chip { flex: 0 1 22px; min-width: 15px; aspect-ratio: 1; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text-2); }
.eqx-chip .ic { width: 60%; height: 60%; max-width: 13px; max-height: 13px; stroke-width: 2; }
.eqx-chip.ok { color: var(--green); border-color: rgba(74,222,128,.45); --ic-acc: var(--green); }
.eqx-chip.bad { color: #ff7a8a; border-color: rgba(255,90,110,.5); --ic-acc: #ff7a8a; }
.eqx-chip.warn { color: var(--orange-2); border-color: rgba(255,213,26,.5); }
.eqx-chip.buff { color: var(--chakra); border-color: rgba(60,199,255,.45); --ic-acc: var(--chakra); }
.eqx-looks { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.eqx-looks .eqx-look { gap: 3px; padding: 4px 3px; min-width: 0; overflow: hidden; justify-content: center; }
.eqx-looks .eqx-look i { flex: none; } .eqx-looks .eqx-look .ic { width: 14px; height: 14px; }
.eqx-looks .eqx-look span { min-width: 0; } .eqx-looks .eqx-look small { display: none; }
.eqx-looks .eqx-look b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.eqx-look { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 8px; border: 1px solid rgba(255,213,26,.35); cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(255,213,26,.14), rgba(255,213,26,.03)); color: var(--orange-2); --ic-acc: #ffe7cf; }
.eqx-look i { display: grid; place-items: center; } .eqx-look .ic { width: 17px; height: 17px; }
.eqx-look b { display: block; font-size: 11px; color: #ffd9b8; line-height: 1.1; } .eqx-look small { display: block; font-size: 8.5px; color: var(--muted); line-height: 1.1; }
.eqx-look:hover { border-color: var(--orange); box-shadow: 0 0 10px rgba(255,213,26,.25); }
.eqx-btns { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.eqx-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 4px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--text-2); font-size: 9.5px; font-weight: 700; cursor: pointer; }
.eqx-btn i { display: grid; place-items: center; }
.eqx-btn .ic { width: 15px; height: 15px; }
.eqx-btn:hover { color: var(--text); border-color: var(--orange-2); background: var(--bg-3); }
.win[data-win="inventory"] .win-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
#panel-inventory { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.bagx-top { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.bagx-bp { width: 34px; height: 34px; box-sizing: border-box; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; cursor: pointer;
  background: linear-gradient(180deg, #1c2130, #10131b); border: 1px solid var(--line-2); color: var(--text-2); }
.bagx-bp img { width: 32px; height: 32px; image-rendering: pixelated; }
.bagx-bp .ic { width: 18px; height: 18px; }
.bagx-info { flex: 1; min-width: 0; display: grid; gap: 3px; }
.bagx-info b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bagx-info small { font-size: 10px; }
.bagx-meter { height: 4px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
.bagx-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-2)); }
.bagx-meter.full span { background: var(--red); }
.bagx-act { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--text-2); cursor: pointer; }
.bagx-act .ic { width: 15px; height: 15px; }
.bagx-act:hover { color: var(--text); border-color: var(--orange-2); }
.bagx { display: grid; grid-template-columns: repeat(auto-fill, 40px); grid-auto-rows: 40px; gap: 5px; padding: 10px; justify-content: center; align-content: start;
  overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; }
.win .panel { display: block; }
.win .panel-title { display: none; }
.win .panel-sub { font-size: 12px; margin-bottom: 10px; }
.win[data-win="minimap"] .win-body { padding: 6px; }
.win[data-win="hotbar"] .win-body { padding: 6px 8px 4px; }
.win[data-win="hotbar"] { z-index: 8000 !important; }
.win[data-win="hotbar"] .jutsu-bar { margin: 0; flex-wrap: nowrap; width: 100%; min-height: 46px; overflow-x: auto; overflow-y: hidden; }
.win[data-win="hotbar"] .jutsu-cd small { display: none; }
.win[data-win="hotbar"] .win-body { padding: 4px 8px 3px !important; }
.win[data-win="hotbar"]:not([data-sized="1"]) .jutsu-bar { width: max-content; max-width: calc(calc(100 * var(--vw)) - 60px); scrollbar-width: thin; }
.win[data-win="hotbar"][data-sized="1"] .jutsu-bar { flex-wrap: wrap; overflow-y: auto; align-content: flex-start; height: 100%; }
.win[data-win="hotbar"][data-sized="1"] .win-body { height: calc(100% - 30px); box-sizing: border-box; }
.win[data-win="hotbar"] .jutsu-bar:empty::after { content: "Os jutsus aparecem aqui conforme o level."; color: var(--muted); font-size: 12px; padding: 8px; }
.win[data-win="map"] .win-body { display: flex; flex-direction: column; }
.win[data-win="map"] #panel-map { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.win[data-win="map"] .map-wrap { flex: 1; height: auto; min-height: 260px; }
.map-ctl .map-sp { flex: 1; }
.map-hint { margin: -2px 0 6px; }
.win[data-win="map"]:fullscreen, .win[data-win="map"].map-full { position: fixed !important; inset: 0 !important; width: calc(100 * var(--vw)) !important; height: calc(100 * var(--vh)) !important; border-radius: 0; z-index: 9400 !important; }
.win[data-win="map"]:fullscreen .win-body, .win[data-win="map"].map-full .win-body { height: calc(calc(100 * var(--vh)) - 36px); }
.session-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.session-head b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#session-box .loot-strip { margin-top: 8px; }
.session-btns { display: flex; gap: 6px; flex: none; }
.dm-box { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.dm-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; font-size: 12px; margin-bottom: 4px; }
.dm-caret { color: var(--muted); font-size: 11px; }
.dm-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12px; margin-bottom: 6px; }
.dm-sum div { display: flex; justify-content: space-between; }
.dm-sum b { font-family: var(--mono); font-weight: 600; }
.dm-list { display: flex; flex-direction: column; gap: 3px; max-height: 210px; overflow-y: auto; }
.dm-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 36px 40px; align-items: center; gap: 6px; padding: 2px 6px; font-size: 11.5px;
  background: #0c0f16; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: 5px; overflow: hidden; }
.dm-row > * { position: relative; }
.dm-row .dm-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,213,26,.16); pointer-events: none; }
.dm-row.dm-kw { border-left-color: #9aa3b5; } .dm-row.dm-kw .dm-bar { background: rgba(154,163,181,.16); }
.dm-row.dm-ks { border-left-color: var(--exp); } .dm-row.dm-ks .dm-bar { background: rgba(169,112,255,.18); }
.dm-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-v { font-family: var(--mono); font-weight: 600; }
.dm-p, .dm-h { font-family: var(--mono); color: var(--muted); text-align: right; font-size: 10.5px; }
.dm-none { padding: 2px 0; }
@media (max-width: 1960px) {
  .tool-btn { min-width: 44px; padding: 4px 5px; flex-shrink: 0; }
  .tool-btn span { font-size: 9.5px; letter-spacing: .1px; }
  .tool-btn i { font-size: 19px; }
}
@media (max-width: 1860px) {
  .toolbar { grid-template-columns: minmax(0, max-content) auto minmax(0, max-content); justify-content: center; gap: 4px; }
}
@media (max-width: 1600px) {
  .tool-btn { min-width: 34px; padding: 4px 2px; gap: 1px; }
  .tool-btn span { font-size: 8.5px; }
  .tool-btn .ic { width: 18px; height: 18px; }
  .tb-side { padding: 4px 4px; gap: 1px; }
  .toolbar .tool-play { min-width: 64px; }
}
@media (max-width: 860px) {
  .toolbar { left: 12px; right: 12px; }
  .quickbar { max-width: calc(100% - 24px); }
}
.admin-only { display: none !important; }
body.is-admin .admin-only { display: flex !important; }
.tool-play { background: linear-gradient(180deg, #ffda35, #ffd000) !important; color: #1a0d00 !important; border-color: #ffe570 !important; min-width: 74px; margin: 0 4px; box-shadow: 0 0 14px rgba(255,213,26,.45); }
.tool-play i { font-size: 20px; }
.tool-btn.tool-shop { --ic-acc: #fff1c4; color: #ffe3a1; font-weight: 800; overflow: hidden; margin-right: 4px;
  background: linear-gradient(180deg, rgba(255, 205, 90, .26), rgba(255,216,40, .12)); border-color: rgba(255,226,95, .65);
  box-shadow: 0 0 12px rgba(255,219,60, .32), inset 0 1px 0 rgba(255, 240, 200, .25); }
.tool-btn.tool-shop span { font-weight: 900; letter-spacing: .4px; text-shadow: 0 0 8px rgba(255,221,70, .55); }
.tool-btn.tool-shop .ic { filter: drop-shadow(0 0 4px rgba(255, 200, 80, .7)); }
.tool-btn.tool-shop:hover, .tool-btn.tool-shop.active { color: #fff4d6; background: linear-gradient(180deg, rgba(255, 210, 100, .38), rgba(255,216,40, .2)); border-color: #ffd36e; }
.tool-btn.tool-shop::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 245, 210, .45) 50%, transparent 65%); transform: translateX(-120%);
  animation: tb-shop-shine 5s ease-in-out infinite; }
@keyframes tb-shop-shine { 0%, 72% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .tool-btn.tool-shop::after { animation: none; } }
.tool-play { --ic-acc: #fff3e4; }
.tool-play .ic { width: 22px; height: 22px; }
.tool-play span { font-weight: 900; letter-spacing: 1px; font-size: 12px; }
.quickbar { position: absolute; top: 76px; left: calc(var(--sbl, 0px) + (100% - var(--sbl, 0px) - var(--sbr, 0px)) / 2); transform: translateX(-50%); z-index: 29; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-items: center; pointer-events: none; max-width: calc(100% - var(--sbl, 0px) - var(--sbr, 0px) - 708px); }
.quickbar > * { pointer-events: auto; }
.tb-toggle { position: absolute; top: 0; left: calc(var(--sbl, 0px) + (100% - var(--sbl, 0px) - var(--sbr, 0px)) / 2); transform: translateX(-50%);
  z-index: 31; width: 46px; height: 14px; padding: 0; border: 1px solid rgba(255,213,26,.5); border-top: 0; border-radius: 0 0 9px 9px;
  background: rgba(13,16,23,.94); color: var(--orange-2); font-size: 9px; line-height: 12px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.toolbar:hover ~ .tb-toggle, .tb-toggle:hover, .tb-toggle:focus-visible { opacity: 1; }
#screen-game.topbar-hidden .toolbar { display: none; }
#screen-game.topbar-hidden .tb-toggle { opacity: .6; }
#screen-game.topbar-hidden .tb-toggle:hover { opacity: 1; }
#screen-game.topbar-hidden .quickbar { top: 20px; }
.qb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(13,16,23,.92); color: var(--text-2); font-weight: 800; font-size: 11px; cursor: pointer; letter-spacing: .6px; }
.qb-btn i { font-style: normal; }
.qb-btn .ic { width: 14px; height: 14px; stroke-width: 2.1; }
.qb-btn i:has(.ic) { display: grid; place-items: center; }
.qb-btn.idle.on { border-color: var(--green); color: var(--green); box-shadow: 0 0 10px rgba(74,222,128,.25); }
.qb-btn.idle:not(.on) { border-color: var(--gold); color: var(--gold); }
.qb-btn.pvp { border-color: var(--red); color: #ff8a9a; }
.qb-btn.target { border-color: #ff3b3b; color: #ffb4bd; }
.qb-st { font-size: 11px; font-weight: 700; color: #ffcf5a; text-shadow: 0 1px 2px #000; }
.qb-safe { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid #4ade80; background: rgba(8,40,22,.92); color: #6ef59a; font-weight: 900; font-size: 11px; letter-spacing: .6px; box-shadow: 0 0 8px rgba(74,222,128,.35); position: relative; cursor: help; }
.qb-safe::before, .qb-day.mine::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 18px rgba(74,222,128,.75); animation: glowFade 2.4s ease-in-out infinite; }
.qb-safe.hidden { display: none; }
.bfab { position: fixed; z-index: 8100; width: 84px; height: 84px; border-radius: 50%; cursor: pointer; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; --bc: #ffd51a; --bc2: #3a1406; transition: transform .12s, filter .2s; }
.bfab.hidden { display: none; }
.bfab[data-b="shukaku"] { --bc: #e0c654; --bc2: #3b2610; } .bfab[data-b="matatabi"] { --bc: #4d7dff; --bc2: #0b1638; }
.bfab[data-b="isobu"] { --bc: #39d4a0; --bc2: #082e24; } .bfab[data-b="son goku"] { --bc: #ff4a2e; --bc2: #3a0c06; }
.bfab[data-b="kokuou"] { --bc: #e9ecf6; --bc2: #2a2d36; } .bfab[data-b="saiken"] { --bc: #b7c3d4; --bc2: #20262f; }
.bfab[data-b="choumei"] { --bc: #f3d64a; --bc2: #2e2706; } .bfab[data-b="gyuki"] { --bc: #a58ce0; --bc2: #1c1530; }
.bfab[data-b="kurama"] { --bc: #ffd51a; --bc2: #3a1406; } .bfab[data-b="juubi"] { --bc: #b05cff; --bc2: #1c0a30; }
.bfab .bf-glow { position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bc) 55%, transparent) 0%, transparent 68%); opacity: .55; pointer-events: none; }
.bfab .bf-core { position: absolute; inset: 7px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(0,0,0,.65);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--bc) 42%, #11141c) 0%, var(--bc2) 62%, #07080c 100%);
  box-shadow: inset 0 0 14px rgba(0,0,0,.85), 0 4px 14px rgba(0,0,0,.6); }
.bfab .bf-img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: contain; image-rendering: auto; pointer-events: none; transition: filter .2s; }
.bfab .bf-svg { position: absolute; inset: 0; pointer-events: none; }
.bfab .bf-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.bfab .bf-track { fill: none; stroke: rgba(10,12,18,.85); stroke-width: 7; }
.bfab .bf-prog { fill: none; stroke: var(--bc); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--bc)); transition: stroke-dashoffset .25s linear; }
.bfab .bf-time { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); font: 800 15px/1 Inter, sans-serif; color: #fff;
  text-shadow: 0 0 4px #000, 0 0 2px #000, 0 1px 0 #000; letter-spacing: .02em; pointer-events: none; white-space: nowrap; }
.bfab .bf-time:empty, .bfab .bf-cd.hidden { display: none; }
.bfab .bf-cd { position: absolute; right: -6px; top: -4px; padding: 2px 5px; border-radius: 9px; font: 800 10px/1.2 Inter, sans-serif; color: #dfe6f3;
  background: rgba(12,14,20,.95); border: 1px solid #4b5568; box-shadow: 0 2px 6px rgba(0,0,0,.6); pointer-events: none; }
.bfab .bf-name { position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); font: 800 9.5px/1 Inter, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bc); text-shadow: 0 0 3px #000, 0 1px 0 #000; white-space: nowrap; pointer-events: none; }
.bfab[data-st="ready"] .bf-glow { animation: bfabReady 1.6s ease-in-out infinite; }
.bfab[data-st="on"] .bf-glow { opacity: .95; animation: bfabOn .9s ease-in-out infinite; }
.bfab[data-st="on"] .bf-time { font-size: 18px; color: #fff4e6; text-shadow: 0 0 6px var(--bc), 0 0 2px #000, 0 1px 0 #000; }
.bfab[data-st="cd"] .bf-img, .bfab[data-st="locked"] .bf-img { filter: grayscale(.85) brightness(.55); }
.bfab[data-st="cd"] .bf-prog { stroke: #b3bacb; filter: none; }
.bfab[data-st="cd"] .bf-glow, .bfab[data-st="locked"] .bf-glow { opacity: 0; }
.bfab[data-st="locked"] .bf-time { font-size: 12px; color: #c8ced9; }
.bfab:hover { transform: scale(1.05); }
.bfab.press { transform: scale(.92); }
.bfab.drag { transform: scale(1.08); cursor: grabbing; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.gfab { position: fixed; z-index: 8100; width: 58px; height: 58px; border-radius: 50%; cursor: pointer; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .12s, filter .2s; display: none; }
body.is-admin .gfab { display: block; }
.gfab .gf-core { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; color: #f3e9ff;
  background: radial-gradient(circle at 50% 35%, #7c3aed 0%, #3b1673 58%, #12071f 100%); border: 2px solid #c4a2ff;
  box-shadow: 0 0 14px rgba(167,112,255,.55), inset 0 0 12px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.6); }
.gfab .gf-core svg { width: 28px; height: 28px; }
.gfab .gf-lbl { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); font: 900 10px/1 Inter, sans-serif; letter-spacing: .12em;
  color: #d7c2ff; text-shadow: 0 0 3px #000, 0 1px 0 #000; pointer-events: none; }
.gfab:hover { transform: scale(1.06); } .gfab.drag { transform: scale(1.1); cursor: grabbing; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.gmpick { position: fixed; z-index: 9650; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px;
  background: linear-gradient(180deg, #171124 0%, #0c0a12 100%); border: 1px solid #6d4bb3; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 14px 40px rgba(0,0,0,.7), 0 0 22px rgba(124,58,237,.25);
  animation: gpIn .14s ease-out; }
@keyframes gpIn { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.gmpick .gp-head { display: flex; align-items: center; justify-content: space-between; }
.gmpick .gp-head b { display: flex; align-items: center; gap: 7px; color: #e2d4ff; font-size: 13px; letter-spacing: .03em; }
.gmpick .gp-head b i svg { width: 17px; height: 17px; }
.gmpick .gp-x { background: none; border: 0; color: #9d8fbf; font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.gmpick .gp-x:hover { color: #fff; background: rgba(255,255,255,.08); }
.gmpick .gp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gmpick .gp-tab { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; border-radius: 8px; cursor: pointer; font-weight: 800; font-size: 12px;
  background: #1c1630; color: #b9acd8; border: 1px solid #33284f; }
.gmpick .gp-tab i svg { width: 15px; height: 15px; }
.gmpick .gp-tab.on { background: linear-gradient(180deg, #6d3fd6, #4a239a); color: #fff; border-color: #a07bff; }
.gmpick .gp-q { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #3a2e5a; background: #0a0810; color: #eee; font-size: 13px; outline: none; }
.gmpick .gp-q:focus { border-color: #a07bff; box-shadow: 0 0 0 2px rgba(160,123,255,.25); }
.gmpick .gp-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 2px; }
.gmpick .gp-row { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 8px; cursor: pointer; text-align: left;
  background: #14111d; border: 1px solid #241d36; color: #e4def2; font-size: 13px; transition: background .1s, border-color .1s; }
.gmpick .gp-row:hover { background: #241b3c; border-color: #6d4bb3; }
.gmpick .gp-row.cur { border-color: #22c55e; background: rgba(34,197,94,.1); }
.gmpick .gp-row.busy { opacity: .5; pointer-events: none; }
.gmpick .gp-img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; background: #0a0810; flex: none; display: grid; place-items: center; color: #8b80a8; font-size: 18px; }
.gmpick .gp-row.bj .gp-img { object-fit: contain; }
.gmpick .gp-name { flex: 1; font-weight: 700; display: flex; align-items: center; gap: 6px; min-width: 0; }
.gmpick .gp-vip { font-style: normal; font-size: 9px; font-weight: 900; padding: 1px 5px; border-radius: 5px; background: #4a3708; color: #ffd257; border: 1px solid #a07a12; }
.gmpick .gp-cls { font-size: 10px; }
.gmpick .gp-cur { font-size: 10px; font-weight: 900; color: #4ade80; text-transform: uppercase; letter-spacing: .05em; }
.gmpick .gp-empty { color: #8b80a8; text-align: center; padding: 20px 0; font-size: 12px; }
@keyframes bfabReady { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: .85; transform: scale(1.06); } }
@keyframes bfabOn { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .bfab { width: 70px; height: 70px; }
  .bfab .bf-time { font-size: 13px; bottom: 7px; }
  .bfab[data-st="on"] .bf-time { font-size: 15px; }
  .bfab:hover { transform: none; }
}
#panel-auto .ah-bijuu { margin: 6px 0 8px; border-color: #f9cf16 !important; background: linear-gradient(90deg, rgba(249,207,22,.16), rgba(10,12,16,.9) 70%) !important; }
.qb-safe .ic { width: 14px; height: 14px; stroke-width: 2.1; }
.qb-safe i { font-style: normal; display: grid; place-items: center; }
.world-status { top: 108px; }
.reconnect-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9690; background: rgba(13,16,23,.95); border: 1px solid var(--orange); padding: 14px 20px; border-radius: 12px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: min(420px, calc(90 * var(--vw))); }
.reconnect-banner .rc-go { font-size: 12px; padding: 6px 14px; }
.upd-banner { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 9900; max-width: min(860px, calc(94 * var(--vw))); background: rgba(13,16,23,.96); border: 1px solid var(--orange); color: #e8edf5; padding: 10px 40px 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.45; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.upd-banner b { color: var(--orange); }
.upd-banner small { display: block; margin-top: 4px; font-size: 11px; word-break: break-all; }
.upd-banner .upd-x { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: rgba(255,255,255,.08); color: #e8edf5; cursor: pointer; font-size: 13px; line-height: 1; }
.upd-banner .upd-x:hover { background: rgba(255,255,255,.18); }
.upd-banner .upd-go { margin-left: 10px; padding: 4px 12px; font-size: 12px; vertical-align: middle; }
.dhead { position: sticky; top: -10px; z-index: 6; margin: -10px -12px 0; padding: 10px 12px 2px; background: #0f121a;
  box-shadow: 0 8px 10px -8px rgba(0,0,0,.85); }
.dhead .dchips { margin-bottom: 8px; }
.dtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.dtabs.two .dtab { flex: 1; }
.dtab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-2); padding: 8px 14px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; font-size: 12px; cursor: pointer; }
.dtab.active { color: var(--orange-2); border-bottom-color: var(--orange); }
.dsearch { width: 100%; margin-bottom: 8px; }
.dchips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; scrollbar-width: thin; }
.dchip { flex-shrink: 0; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--text-2); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.dchip.active { background: var(--orange); border-color: var(--orange); color: #1a0d00; }
.dchips.small .dchip { padding: 2px 8px; font-size: 11px; }
.dsel { padding: 5px 8px; font-size: 12px; border-radius: 6px; max-width: 100%; }
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.hcard { background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.hcard.active { border-color: var(--orange); box-shadow: 0 0 0 1px rgba(255,213,26,.5); }
.hcard.locked { opacity: .5; }
.hcard-top { display: flex; gap: 10px; align-items: center; }
.hmons { display: flex; gap: 2px; flex-shrink: 0; }
.hinfo { min-width: 0; }
.hname { font-weight: 800; font-size: 14px; }
.hsub { font-size: 11px; color: var(--text-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.hcard-row { display: flex; gap: 8px; min-width: 0; }
.hcard-row .dsel { flex: 1 1 0; min-width: 0; }
.hcard-row .dsel.hch { flex: 1.4 1 0; text-overflow: ellipsis; }
.hcard { min-width: 0; }
.win[data-win="hunt"] .win-body { overflow-x: hidden; }
.hgo { font-weight: 900; letter-spacing: .6px; flex: none; }
.hnote { font-size: 11px; padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(255,213,26,.35); background: rgba(255,213,26,.07); color: var(--orange-2); }
.hnote.pvp { border-color: rgba(244,63,94,.45); background: rgba(244,63,94,.08); color: #ff9aa8; }
.hnote.offline { border-color: rgba(60,199,255,.45); background: rgba(60,199,255,.08); color: var(--chakra); }
.hdet { align-self: flex-start; }
.hunt-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; }
.hd-mons { display: grid; gap: 8px; }
.hd-mon { display: flex; gap: 10px; align-items: center; }
.city-list { display: grid; gap: 6px; }
.city-card { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; }
.city-card.here { border-color: var(--green); }
.pvp-box { display: grid; gap: 10px; }
.rules { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-2); display: grid; gap: 4px; }
.death-row { font-size: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.death-row.me { background: rgba(255,213,26,.06); }
.rank-table { display: grid; gap: 4px; }
.rank-row { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--bg-1); border: 1px solid var(--line); font-size: 13px; }
.rank-row.me { border-color: var(--orange); }
.rank-row .rk { color: var(--muted); font-family: var(--mono); }
.online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-left: 6px; vertical-align: middle; }
.ah-list { display: grid; gap: 6px; }
.ah-row { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1); padding: 8px 10px; }
.ah-row.on { border-color: rgba(255,213,26,.45); background: linear-gradient(180deg, rgba(255,213,26,.07), var(--bg-1)); }
.ah-head { display: flex; align-items: center; gap: 8px; }
.ah-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); border: 1px solid var(--line-2); flex-shrink: 0; font-size: 14px; }
.ah-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ah-t b { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
.ah-t small { font-size: 10.5px; color: var(--muted); }
.ah-st { font-size: 10px; font-weight: 800; color: var(--muted); }
.ah-row.on .ah-st { color: var(--green); }
.ah-extra { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.ah-extra.ah-off { opacity: .45; filter: saturate(.3); }
.ah-extra .dsel { flex: 1; min-width: 110px; }
.ah-extra .toggle { gap: 8px; }
.ah-combo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; width: 100%; }
.ah-slot small { display: block; font-size: 10px; color: var(--muted); margin-bottom: 2px; }
.ah-slot .dsel { width: 100%; }
.ah-combo-mode, .ah-combo-note { grid-column: 1 / -1; }
.fx-alpha-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; }
.fx-alpha-row .fx-alpha { flex: 1; accent-color: var(--accent, #ffdb3c); }
.fx-alpha-row .fx-alpha-val { min-width: 42px; text-align: right; }
.fps-box { margin-top: 10px; font-size: 13px; display: grid; gap: 6px; }
.ah-slot.auto .ah-auto { display: block; font-size: 12px; padding: 5px 7px; border: 1px solid var(--line, #2a3040); border-radius: 6px;
  background: rgba(255, 255, 255, .03); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-slot.locked .ah-auto { opacity: .5; }
.ah-sec { width: 100%; border-top: 1px solid var(--line, #2a3040); padding-top: 6px; margin-top: 2px; }
.ah-sec-t { font-size: 12px; font-weight: 700; color: var(--orange); padding: 2px 0; }
.ah-row-list .ah-sec { border-top: 0; padding-top: 0; margin-top: 0; }
.dtabs.ah-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; }
.ah-tabs .dtab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 1px 7px; font-size: 9.5px; letter-spacing: .2px; line-height: 1.15; text-align: center; min-width: 0; }
.ah-tabs .dtab i { display: grid; place-items: center; }
.ah-tabs .dtab .ic { width: 17px; height: 17px; }
.ah-tabs .dtab.active { --ic-acc: var(--orange); }
.ah-ic .ic { width: 16px; height: 16px; }
.ah-row.on .ah-ic { color: var(--text); }
.ah-sec-note { margin: 4px 0 4px; }
.ah-pick { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,.07); }
.ah-pick .toggle { width: 100%; gap: 8px; }
.ah-pick small { color: var(--muted); font-size: 10.5px; }
.ah-pick.locked { opacity: .55; }
.ah-pick:not(.on) .toggle > span { color: var(--muted); text-decoration: line-through; }
.ah-sphp-all { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; width: 100%; }
.ah-sphp { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ah-sphp small { font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--orange); text-transform: uppercase; }
.ah-sphp em { font-size: 10px; color: var(--muted); font-style: normal; }
.ah-sphp .dsel { width: 100%; min-width: 0; }
.ah-sphp-all .ah-sec-note { grid-column: 1 / -1; margin: 0; }
.ah-pick .ah-sphp { margin-top: 4px; }
.ah-pick:not(.on) .ah-sphp { opacity: .45; }
.ah-warn { font-size: 11px; color: var(--gold); background: rgba(242,193,78,.08); border: 1px solid rgba(242,193,78,.35); border-radius: 8px; padding: 5px 8px; margin-bottom: 8px; }
.ah-foot { margin-top: 10px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.ah-foot.on { color: var(--green); border-color: rgba(74,222,128,.4); }
.bt-row { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.bt-row:hover { background: var(--bg-2); }
.bt-row.tg { border-color: #ff3b3b; background: rgba(255,59,59,.08); }
.bt-row.pl .bt-name { color: #b6f7c1; }
.bt-info { flex: 1; min-width: 0; }
.bt-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-name small { color: var(--muted); font-weight: 600; }
.sk { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; border: 1px solid #000; vertical-align: middle; }
.sk.white { background: #f2f2f2; } .sk.red { background: #e83e4d; } .sk.yellow { background: #f5d142; } .sk.black { background: #111; }
.pg-row { padding: 6px 0; border-bottom: 1px solid var(--line); }
.pg-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.pg-top b { font-family: var(--mono); }
.pg-row small { display: block; margin-top: 3px; font-size: 10.5px; }
.st-green > div { background: linear-gradient(90deg, #22c55e, #86efac); }
.st-yellow > div { background: linear-gradient(90deg, #eab308, #fde047); }
.st-red > div { background: linear-gradient(90deg, #dc2626, #f87171); }
.best-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 10px; }
.best-title { font-size: 20px; font-weight: 900; }
.best-score { min-width: 110px; text-align: center; border: 1px solid rgba(242,193,78,.5); border-radius: 12px; padding: 10px; background: rgba(242,193,78,.06); }
.best-score b { display: block; font-size: 28px; color: var(--gold); font-family: var(--mono); }
.best-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.best-card { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: 10px; padding: 8px 10px; background: var(--bg-1); }
.best-card.done { border-left-color: var(--green); }
.best-pic { position: relative; width: 52px; height: 52px; border: 1px solid var(--line-2); border-radius: 8px; display: grid; place-items: center; background: #0c0f16; flex-shrink: 0; }
.best-badge { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; background: #1a1f2c; border: 1px solid var(--orange); color: var(--orange-2); border-radius: 999px; padding: 0 6px; }
.best-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.best-foot { display: flex; justify-content: space-between; font-size: 11px; }
.bag-head { display: flex; align-items: center; gap: 10px; }
.bag-head .ibox { width: 40px; height: 40px; background: #0c0f16; border: 1px solid var(--orange); border-radius: 8px; display: grid; place-items: center; }
.bag-name { font-size: 14px; }
.ctx-menu { position: fixed; z-index: 9600; min-width: 170px; padding: 4px; display: flex; flex-direction: column; background: rgba(15,18,26,.97);
  border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.6); }
.ctx-title { padding: 5px 10px 6px; font-size: 11px; font-weight: 800; color: var(--orange-2); border-bottom: 1px solid var(--line); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.ctx-item { text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 13px; cursor: pointer; }
.ctx-item:hover { background: var(--bg-3); color: var(--orange-2); }
.ctx-item.danger { color: var(--red); }
.forge-badge { position: absolute; right: 2px; top: 1px; font-size: 9px; font-weight: 900; font-family: var(--mono); color: #ffdd47; text-shadow: 0 0 3px #000, 0 0 3px #000; z-index: 1; }
.equip-slot .forge-badge { right: auto; left: 3px; }
.forge-line { color: #ffdd47; }
.forge-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; background: linear-gradient(90deg, rgba(255,213,26,.12), transparent); border-color: rgba(255,213,26,.4); }
.forge-dragon { font-size: 34px; filter: drop-shadow(0 0 8px rgba(255,213,26,.6)); }
.forge-result { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-weight: 700; border: 1px solid; animation: forge-pop .35s ease-out; }
.forge-result.ok { color: var(--green); border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.1); }
.forge-result.saved { color: var(--gold); border-color: rgba(242,193,78,.5); background: rgba(242,193,78,.08); }
.forge-result.broke { color: var(--red); border-color: rgba(244,63,94,.5); background: rgba(244,63,94,.08); }
@keyframes forge-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.forge-bench { display: grid; gap: 8px; }
.forge-name { font-weight: 800; font-size: 15px; }
.forge-row { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0; }
.forge-slot { width: 56px; flex: 0 0 56px; }
.forge-slot.forge-out { border-color: #ffdb3c; box-shadow: 0 0 14px rgba(255,213,26,.45), inset 0 0 10px rgba(255,213,26,.2); }
.forge-slot.up-out.q1 { border-color: #3fcf5b; box-shadow: 0 0 14px rgba(63,207,91,.5), inset 0 0 10px rgba(63,207,91,.22); }
.forge-slot.up-out.q2 { border-color: #3d8dff; box-shadow: 0 0 14px rgba(61,141,255,.55), inset 0 0 10px rgba(61,141,255,.24); }
.forge-slot.up-out.q3 { border-color: #b25cff; box-shadow: 0 0 15px rgba(178,92,255,.55), inset 0 0 10px rgba(178,92,255,.24); }
.forge-slot.up-out.q4 { border-color: #ff3b3b; box-shadow: 0 0 16px rgba(255,59,59,.6), inset 0 0 10px rgba(255,59,59,.26); }
.forge-op { font-size: 20px; color: var(--muted); }
.forge-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px 14px; font-size: 12px; }
.forge-stats > div { display: flex; justify-content: space-between; gap: 6px; }
.forge-stats .up { color: var(--green); }
.forge-prot { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.forge-go { width: 100%; padding: 10px; font-weight: 800; }
.forge-list { display: grid; gap: 4px; }
.forge-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); cursor: pointer; }
.forge-item.sel { border-color: var(--orange); background: rgba(255,213,26,.08); }
.forge-item .ibox { width: 40px; height: 40px; background: #0c0f16; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; }
.forge-item .ibox.rare { border-color: var(--rare); }
.forge-info { display: flex; flex-direction: column; min-width: 0; }
.forge-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-list { display: grid; gap: 4px; }
.mk-row { display: grid; grid-template-columns: 40px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); }
.mk-row .ibox, .mk-form .ibox { width: 40px; height: 40px; background: #0c0f16; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; }
.mk-info { min-width: 0; display: flex; flex-direction: column; }
.mk-info b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-price { font-family: var(--mono); }
.mk-price.gold { color: var(--gold); } .mk-price.points { color: var(--chakra); }
.mk-in { width: 130px; }
.inv-slot.sel { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,213,26,.4); }
.prem-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.prem-bal b { font-size: 28px; font-family: var(--mono); color: var(--chakra); }
.prem-bal small { margin-left: 6px; color: var(--muted); font-weight: 700; }
.prem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; }
.prem-card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.prem-card small { flex: 1; }
.prem-ic { font-size: 26px; }
.pix-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin: 10px 0; }
.pix-pkg { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--text); cursor: pointer; font-family: inherit; }
.pix-pkg.sel { border-color: var(--chakra); box-shadow: 0 0 0 2px rgba(60,199,255,.35); }
.pix-pkg small { color: var(--muted); }
.pix-email { width: 100%; }
.pix-out { margin-top: 12px; display: grid; gap: 8px; justify-items: center; }
.pix-qr { width: 220px; height: 220px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 8px; }
.pix-code { width: 100%; min-height: 70px; font-family: var(--mono); font-size: 11px; background: var(--bg-1); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px; resize: vertical; }
.pix-test { font-size: 12px; color: var(--gold); background: rgba(242,193,78,.08); border: 1px solid rgba(242,193,78,.35); border-radius: 8px; padding: 6px 8px; }
.pix-status { font-weight: 800; color: var(--text-2); }
.pix-status.ok { color: var(--green); }
.hud-bars { display: grid; gap: 4px; margin: 4px 0 2px; }
.hud-bars .bar { height: 13px; }
.hud-bars .bar span { font-size: 9.5px; }
.mobile-only { display: none !important; }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  #screen-game { --sbl: 0px !important; --sbr: 0px !important; }
  .sidebar { display: contents !important; background: none; }
  .sb-grip, .win-rz, .sb-stack:empty::after { display: none !important; }
  .sb-stack { display: contents; }
  body { font-size: 13px; }
  input, select, textarea { font-size: 16px; }
  .dsel { font-size: 14px; }
  .mobile-only { display: flex !important; }
  .win[data-win="charinfo"] { left: 6px !important; right: 132px !important; top: calc(6px + env(safe-area-inset-top)) !important; width: auto !important; min-width: 0 !important; height: auto !important; }
  .win[data-win="charinfo"] .win-head { display: none; }
  .win[data-win="charinfo"] .win-body { padding: 6px 8px; }
  .hud-char { gap: 8px; }
  .hud-char .top-portrait { width: 34px; height: 34px; }
  .hud-char .top-level { font-size: 11px; }
  .hud-pills { display: none; }
  .hud-bars { display: grid; gap: 3px; }
  .hud-bars .bar { height: 10px; }
  .hud-bars .bar span { font-size: 8px; }
  .toolbar { left: 0; right: 0; top: auto; bottom: 0; display: flex; gap: 2px; pointer-events: auto; border-radius: 14px 14px 0 0; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); overflow-x: auto; justify-content: flex-start; scrollbar-width: none;
    background: rgba(13,16,23,.94); border-top: 1px solid rgba(255,213,26,.4); box-shadow: 0 -6px 18px rgba(0,0,0,.4); }
  .tb-side { display: contents; }
  .toolbar::-webkit-scrollbar { display: none; }
  .tb-toggle { display: none !important; }
  #screen-game.topbar-hidden .toolbar { display: flex; }
  .tool-btn { min-width: 52px; flex-shrink: 0; }
  .tool-btn span { display: block; font-size: 9px; }
  .tool-btn i { font-size: 18px; }
  .tool-play { order: -1; }
  .quickbar { top: calc(112px + env(safe-area-inset-top)); bottom: auto; left: 6px; right: 132px; transform: none; max-width: none; flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
  #screen-game.topbar-hidden .quickbar { top: calc(112px + env(safe-area-inset-top)); }
  .qb-btn { padding: 4px 9px; font-size: 10px; }
  .world-status { top: auto; bottom: calc(112px + env(safe-area-inset-bottom)); font-size: 10px; }
  .win { max-height: calc(calc(100 * var(--vh)) - 80px); }
  .win[data-win="minimap"] { left: auto !important; right: 6px !important; top: calc(6px + env(safe-area-inset-top)) !important; width: 120px !important; min-width: 0 !important; height: auto !important; }
  .win[data-win="minimap"] .win-head { display: none; }
  .win[data-win="minimap"] .win-body { padding: 3px; }
  .mm-ctl { display: none; }
  .win[data-win="vitals"] { display: none; }
  .win[data-win="hotbar"] { left: 6px !important; right: 6px !important; top: auto !important; bottom: calc(62px + env(safe-area-inset-bottom)) !important; width: auto !important; background: rgba(15,18,26,.75); z-index: 20 !important; }
  .win[data-win="hotbar"] .win-head { display: none; }
  .win[data-win="hotbar"] .jutsu-bar { max-width: none; }
  .jutsu-cd { width: 40px; } .jutsu-cd .ic { width: 40px; height: 40px; } .jutsu-cd small { display: none; }
  .win[data-win="session"]:not(.mshow) { display: none; }
  .win:not([data-win="minimap"]):not([data-win="hotbar"]):not([data-win="vitals"]) {
    position: fixed; left: 0 !important; right: 0 !important; top: auto !important; bottom: calc(58px + env(safe-area-inset-bottom)) !important;
    width: 100% !important; height: auto !important; max-height: min(calc(55 * var(--vh)), calc(calc(100 * var(--vh)) - 150px));    resize: none; border-radius: 16px 16px 0 0;
    border-left: 0; border-right: 0; box-shadow: 0 -10px 30px rgba(0,0,0,.6);
  }
  .win:not([data-win="minimap"]):not([data-win="hotbar"]) .win-head { cursor: default; padding: 8px 10px 8px 14px; font-size: 12px; }
  .win[data-win="equip"] { --k: 1 !important; }
  .win-head .win-lock { display: none; }
  .win-head button { width: 30px; height: 30px; font-size: 13px; }
  .win.min .win-body { display: none; }
  .hgrid, .best-grid, .prem-grid, .jutsu-list, .shop-grid, .saga-list, .zone-grid { grid-template-columns: 1fr; }
  .two-col, .three-col { grid-template-columns: 1fr; }
  .mk-row { grid-template-columns: 36px 1fr auto; }
  .mk-row .btn { grid-column: 2 / 4; }
  .inv-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
  .modal-box { width: calc(100 * var(--vw)); max-height: calc(90 * var(--vh)); border-radius: 16px 16px 0 0; align-self: end; }
  .modal { place-items: end center; }
  .toasts { top: 56%; width: calc(calc(100 * var(--vw)) - 16px); }
  .toast { max-width: none; }
  .tooltip { display: none !important; }
  .tooltip.tap:not(.hidden) { display: block !important; max-width: calc(100 * var(--vw) - 16px); max-height: calc(80 * var(--vh)); overflow: auto; }
  .dtab { padding: 8px 10px; font-size: 11px; }
  .map-wrap { height: calc(55 * var(--vh)); }
  .create-body { grid-template-columns: 1fr; }
  .create-footer { flex-wrap: wrap; }
  .field input, .field select { min-width: 0; width: 100%; }
  .voc-detail { position: static; }
  .char-row { grid-template-columns: 52px 1fr; }
  .char-row .cactions { grid-column: 1 / 3; justify-content: flex-end; }
  .logo-big { font-size: 40px; }
}
.win[data-win="chat"] .win-body { display: flex; flex-direction: column; padding: 6px 8px; }
#panel-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
#panel-chat .dtabs { margin-bottom: 4px; }
#panel-chat .dtab { padding: 5px 10px; font-size: 11px; }
.ch-list { flex: 1 1 0; min-height: 0; overflow-y: auto; font-size: 12px; display: flex; flex-direction: column; gap: 1px; }
.ch-line { padding: 1px 2px; color: var(--text-2); word-break: break-word; }
.ch-line small { color: var(--muted); }
.ch-name { color: #ffd9a3; cursor: pointer; }
.ch-line.ch-troca .ch-name { color: #9bf0b7; }
.ch-line.ch-guilds .ch-name { color: #ffe46b; }
.ch-line.ch-ajuda .ch-name { color: var(--chakra); }
.ch-line.ch-pm { color: #d8b4fe; }
.ch-line.ch-pm .ch-name { color: #c084fc; }
.ch-line.sys { color: var(--gold); font-style: italic; }
.ch-tag { color: var(--muted); font-size: 10px; }
.ch-form { display: flex; flex: none; gap: 6px; margin-top: 6px; }
#panel-chat > .ch-tabsrow, #panel-chat > .ch-logbar { flex: none; }
.ch-input { flex: 1; min-width: 0; padding: 6px 10px; }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .win:not([data-win="minimap"]):not([data-win="hotbar"]):not([data-win="vitals"])[data-win="chat"] { height: calc(45 * var(--vh)) !important; }
  .win[data-win="chat"] .ch-list { min-height: calc(18 * var(--vh)); }
}
.adm-tabs { flex-wrap: wrap; }
.adm-body { display: flex; flex-direction: column; gap: 10px; }
.adm-card { padding: 10px 12px; }
.adm-head { display: flex; gap: 12px; align-items: center; }
.adm-row { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; padding: 4px 0; border-top: 1px solid var(--line); }
.adm-row:first-of-type { border-top: 0; }
.adm-label { font-size: 12px; color: var(--text-2); font-weight: 700; }
.adm-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.adm-in { background: var(--bg-2); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; padding: 5px 8px; font-size: 12.5px; min-width: 0; }
.adm-ctl .adm-in:not([type="number"]) { flex: 1 1 140px; }
.adm-in[type="number"] { width: 100px; }
.adm-list, .adm-items { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.adm-item { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 8px; background: rgba(255,255,255,.025); }
.adm-grow { flex: 1; min-width: 0; }
.adm-link { cursor: pointer; color: var(--orange-2); }
.adm-link:hover { text-decoration: underline; }
.adm-ic { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 6px; background: var(--bg-3); }
.adm-ic.rare { box-shadow: 0 0 0 1px var(--gold) inset; }
.adm-log { font-size: 11.5px; font-family: var(--mono); max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.adm-console { height: 340px; overflow: auto; background: #07090d; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; }
.adm-line.bad { color: #ff8a9a; }
.adm-badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.08); color: var(--text-2); vertical-align: middle; }
#pip-cover { position: absolute; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 50% 40%, #11151e 0%, #06080c 100%); }
#pip-cover .pip-cover-box { text-align: center; max-width: 340px; padding: 0 24px; }
#pip-cover .pip-cover-ic { width: 54px; height: 54px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 14px;
  background: rgba(255,213,26,.12); border: 1px solid rgba(255,213,26,.4); color: var(--orange-2); }
#pip-cover .pip-cover-ic .ic { width: 30px; height: 30px; }
#pip-cover .pip-cover-t { font: 700 18px/1.2 var(--font, inherit); color: var(--text); margin-bottom: 8px; }
#pip-cover .pip-cover-s { font-size: 13px; color: var(--muted); line-height: 1.4; margin-bottom: 18px; }
.beta-note { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,222,77,.55);
  background: linear-gradient(180deg, rgba(255,216,40,.18), rgba(255,216,40,.05)); }
.beta-note-h { font: 800 15px/1.2 var(--font, inherit); letter-spacing: .04em; color: #ffe77a; margin-bottom: 6px; }
.beta-note-b { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.beta-note-b b { color: #ffe3b3; }
.adm-cmd { flex: 1; font-family: var(--mono); }
@media (max-width: 760px) { .adm-row { grid-template-columns: 1fr; } }
#screen-game.dead { filter: grayscale(1) brightness(.72) contrast(1.05); transition: filter 1.6s ease; pointer-events: none; }
.modal.locked #modal-close { display: none; }
.modal.death-modal { background: rgba(0, 0, 0, .35); backdrop-filter: none; }
.modal.death-modal .modal-box { width: min(420px, calc(92 * var(--vw))); border: 1px solid rgba(232, 62, 77, .55); box-shadow: 0 0 0 1px #000, 0 18px 60px rgba(0, 0, 0, .8); }
.modal.death-modal .modal-head { color: #ff6b7a; letter-spacing: .5px; }
.death-box .death-lead { font-size: 15px; margin: 0 0 10px; }
.death-box .item-actions { justify-content: center; margin-top: 14px; }
.death-box .item-actions .btn { min-width: 110px; }
.death-box .death-aol { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,80,80,.45); background: rgba(255,60,60,.08); text-align: left; }
.death-box .death-aol.ok { border-color: rgba(63,207,91,.4); background: rgba(63,207,91,.07); }
.death-box .death-aol i { width: 30px; height: 30px; flex: none; color: var(--orange); }
.death-box .death-aol i svg { width: 100%; height: 100%; }
.death-box .death-aol b { display: block; font-size: 13px; }
.death-box .death-aol small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.death-box .item-actions { flex-wrap: wrap; }
.bossbar { position: absolute; top: 112px; left: calc(var(--sbl, 0px) + (100% - var(--sbl, 0px) - var(--sbr, 0px)) / 2); transform: translateX(-50%); z-index: 28;
  width: min(460px, calc(100% - var(--sbl, 0px) - var(--sbr, 0px) - 24px)); display: flex; gap: 8px; align-items: center; pointer-events: none;
  background: linear-gradient(180deg, rgba(34, 10, 12, .92), rgba(14, 6, 8, .92)); border: 1px solid #6b1c22; border-radius: 10px; padding: 6px 10px 6px 6px;
  box-shadow: 0 0 0 1px #000, 0 6px 22px rgba(0, 0, 0, .6), inset 0 0 18px rgba(232, 62, 77, .12); }
.bossbar.hidden { display: none; }
.bossbar .bb-face { width: 44px; height: 44px; flex: 0 0 44px; overflow: hidden; border-radius: 8px; background: rgba(0, 0, 0, .45); border: 1px solid #3a1216; display: grid; place-items: center; }
.bossbar .bb-main { flex: 1; min-width: 0; }
.bossbar .bb-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.bossbar .bb-name { color: #ffd7a8; text-shadow: 0 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .3px; }
.bossbar .bb-meta { color: #caa; font-size: 11px; white-space: nowrap; }
.bossbar .bb-bar { position: relative; height: 16px; margin-top: 3px; background: #1a0507; border: 1px solid #000; border-radius: 4px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8); }
.bossbar .bb-fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(180deg, #ff5a4a, #b3141c 55%, #7a0b11); }
.bossbar .bb-pct { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 var(--mono, monospace); color: #fff; text-shadow: 0 1px 1px #000, 0 0 3px #000; }
.bossbar .bb-sub { font-size: 10.5px; color: #b99; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bossbar.done .bb-fill { background: #444; }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) { .bossbar { top: calc(150px + env(safe-area-inset-top)); left: 50%; width: calc(100% - 16px); } }
.wb-list { display: grid; gap: 10px; }
.wb-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line, #2a2f3a); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.wb-card.alive { border-color: rgba(232, 62, 77, .6); background: linear-gradient(90deg, rgba(232, 62, 77, .10), transparent 60%); }
.wb-card .wb-title { font-weight: 800; }
.wb-card .wb-status { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wb-card .bar { height: 8px; width: 160px; }
.dtab.hot { color: #ff6b7a; }
.jin-card { display: flex; gap: 12px; align-items: center; border-color: rgba(255,213,26, .5); background: linear-gradient(90deg, rgba(255,213,26, .12), transparent 70%); margin-bottom: 10px; }
.jutsu-card.bijuu { border-color: rgba(232, 62, 77, .35); }
.prem-card.bijuu .prem-ic { height: 64px; display: grid; place-items: center; }
.guild-head, .castle-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.guild-head .gname, .castle-head .gname { font-weight: 800; font-size: 17px; }
.guild-head .row .dsearch { min-width: 220px; }
.guild-list { display: grid; gap: 4px; }
.guild-row { display: grid; grid-template-columns: 10px minmax(90px, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .025); }
.guild-row.me { outline: 1px solid rgba(255,213,26, .45); }
.guild-row .row { gap: 4px; }
.online-dot.off { background: #555 !important; box-shadow: none !important; }
.castle-live { border-color: rgba(125, 255, 154, .45); }
.bossbar.castle { border-color: #6b5a1c; background: linear-gradient(180deg, rgba(34, 28, 10, .92), rgba(14, 12, 6, .92)); }
.bossbar.castle .bb-fill { background: linear-gradient(180deg, #ffd35a, #c9a712 55%, #7a6507); }
.bossbar.juubi { border-color: #5b2a86; background: linear-gradient(180deg, rgba(26, 12, 38, .92), rgba(10, 6, 16, .92)); }
.bossbar.juubi .bb-fill { background: linear-gradient(180deg, #c58cff, #7b35c9 55%, #45187a); }
.wb-card.juubi { border-color: rgba(160, 90, 230, .55); background: linear-gradient(90deg, rgba(140, 70, 220, .12), transparent 65%); }
.wb-card.juubi.alive { border-color: rgba(197, 140, 255, .9); }
.juubi-rules { margin: 6px 0 12px 18px; padding: 0; font-size: 12px; color: var(--muted, #aab); }
.juubi-rules li { margin: 2px 0; }
.ch-line.ch-guild { color: #9dffb4; }
@media (max-width: 760px) { .guild-row { grid-template-columns: 10px 1fr auto; } .guild-row .row { grid-column: 1 / -1; justify-content: flex-end; } }
.lair-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.lair-card { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, rgba(40,20,50,.55), rgba(10,10,20,.55)); border-color: rgba(160,90,200,.35); }
.lair-title { font-weight: 800; color: #e7c6ff; }
.lair-head .small { line-height: 1.4; margin-top: 2px; }
.lair-bosses { display: flex; flex-wrap: wrap; gap: 8px; }
.lair-boss { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; }
.lair-boss.locked { opacity: .55; }
.lair-boss .bname { font-weight: 700; }
.lair-boss .btn { margin-top: 4px; }
.prey-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.prey-head .small { line-height: 1.45; margin-top: 2px; }
.prey-wallet { display: flex; gap: 14px; flex-shrink: 0; }
.prey-wallet > div { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.prey-wallet b { font-size: 22px; color: #ffea8a; }
.prey-wallet small { font-size: 11px; opacity: .75; }
.prey-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.prey-slot { display: flex; flex-direction: column; gap: 6px; }
.prey-slot.active { border-color: rgba(255,225,90,.45); }
.prey-slot-title { font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.prey-cur { display: flex; gap: 8px; align-items: center; }
.prey-stars { color: #ffc940; font-size: 12px; letter-spacing: 1px; white-space: nowrap; }
.prey-stars .off { color: rgba(255,255,255,.18); }
.prey-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.prey-any { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); max-height: calc(60 * var(--vh)); overflow: auto; margin-top: 8px; }
.prey-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; color: inherit; cursor: pointer; font-size: 11px; text-align: center; min-width: 0; }
.prey-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.prey-opt:hover:not(:disabled) { border-color: rgba(255,225,90,.6); background: rgba(255,225,90,.08); }
.prey-opt:disabled { opacity: .35; cursor: default; }
.prey-auto select { max-width: 100%; }
.jp-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jp-head .small { line-height: 1.45; margin-top: 2px; }
.jup-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.jup { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: 12px; }
.jup.on { border-color: rgba(120,200,255,.4); }
.jup .jup-name { opacity: .8; }
.jup .btn { padding: 1px 6px; font-size: 11px; }
.attr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; margin-top: 8px; }
.attr-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); }
.attr-row.on { border-color: rgba(125,255,154,.35); }
.attr-val { display: flex; flex-direction: column; align-items: flex-end; }
.attr-val small { font-size: 10px; }
.hs-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.hs-filters .toggle { gap: 8px; justify-content: flex-start; }
.hs-filters .hs-search { width: auto; flex: 1 1 160px; margin: 0; }
.hs-table { display: grid; gap: 3px; overflow-x: auto; }
.hs-row { display: grid; grid-template-columns: 44px minmax(170px, 1.6fr) repeat(var(--hs-cols, 7), minmax(64px, 1fr)); gap: 6px; align-items: center;
  padding: 5px 8px; border-radius: 8px; background: var(--bg-1); border: 1px solid var(--line); font-size: 13px; cursor: pointer; min-width: 640px; }
.hs-table.compact .hs-row { min-width: 0; grid-template-columns: 40px 1fr minmax(70px, auto); }
.hs-row:hover:not(.hs-head) { border-color: var(--line-2); background: rgba(255,255,255,.04); }
.hs-row.me { border-color: var(--orange); }
.hs-row.top1 .hs-rk { color: #ffd34d; } .hs-row.top2 .hs-rk { color: #d6dbe4; } .hs-row.top3 .hs-rk { color: #e0c75a; }
.hs-head { background: transparent; border-color: transparent; cursor: default; position: sticky; top: 0; z-index: 1; background: var(--bg-2, #151922); }
.hs-th { background: none; border: 0; color: var(--muted); font: inherit; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; text-align: right; padding: 2px 0; }
.hs-th.hs-name { text-align: left; }
.hs-th:hover, .hs-th.active { color: var(--orange-2); }
.hs-th.active::after { content: " ▼"; font-size: 9px; }
.hs-th.hs-name.active::after { content: " A–Z"; }
.hs-rk { color: var(--muted); font-family: var(--mono); font-weight: 700; }
.hs-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hs-face { width: 34px; height: 33px; flex-shrink: 0; object-fit: contain; }
.hs-nm { display: flex; flex-direction: column; min-width: 0; }
.hs-nm b, .hs-nm small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-val { text-align: right; font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.hs-val.active { color: var(--text); font-weight: 800; }
.hs-grad { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.hs-grad img { width: 16px; height: 16px; object-fit: contain; }
.hs-empty, .hs-wait { padding: 12px 4px; }
.hs-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 8px; }
.hs-pager { display: flex; gap: 8px; align-items: center; }
.modal.modal-wide .modal-box { width: min(680px, calc(94 * var(--vw))); }
.hs-prof-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.hs-prof-face { width: 112px; height: 109px; object-fit: contain; }
.hs-prof-name { font-size: 20px; font-weight: 800; }
.hs-chip-ico { width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; margin-right: 4px; }
.hs-prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 12px; }
.hs-prof-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--bg-1); border: 1px solid var(--line); cursor: pointer; }
.hs-prof-stat:hover, .hs-prof-stat.active { border-color: var(--orange); }
.hs-prof-stat b { font-size: 16px; font-family: var(--mono); }
@media (max-width: 760px) {
  .hs-prof-head { grid-template-columns: auto 1fr; }
  .hs-prof-head > :last-child { display: none; }
  .hs-prof-face { width: 80px; height: 78px; }
}
.vip-badge { position: absolute; top: 6px; right: 6px; font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 1px 5px; border-radius: 6px;
  background: linear-gradient(135deg, #f2c14e, #ffd51a); color: #1a1205; }
.special-icon { background-repeat: no-repeat; image-rendering: pixelated; display: block; }
.jutsu-cd.special { cursor: pointer; }
.jutsu-cd.special .ic { border-color: rgba(242,193,78,.55); background: radial-gradient(circle at 50% 40%, #2a2110, #0c0f16 70%); }
.jutsu-cd.special .ic .ov { background: rgba(0,0,0,.6); }
.jutsu-cd .ic .left { position: absolute; right: 2px; bottom: 1px; font: 700 11px "JetBrains Mono", monospace; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.jutsu-cd.special small { color: var(--gold); }
.jutsu-cd.special.active .ic { border-color: #ffe066; box-shadow: 0 0 10px rgba(255,224,102,.6); }
.jutsu-cd.special.nomana .ic { opacity: .5; }
.jutsu-cd.special:hover .ic { border-color: #ffe066; }
.jutsu-sec { margin: 14px 0 2px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.jutsu-card.special { border-color: rgba(242,193,78,.35); }
.train-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.train-opts .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; }
.train-opts .btn small { font-size: 11px; opacity: .85; font-weight: 400; }
.train-result { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; font-size: 15px; }
@media (max-width: 520px) { .train-opts { grid-template-columns: 1fr; } }
body { -webkit-user-select: none; user-select: none; }
.ch-list, .ch-list *, input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
.ctx-item { display: flex; justify-content: space-between; gap: 18px; }
.ctx-key { color: var(--muted); font-size: 11px; font-weight: 600; }
.screen-msg { position: absolute; left: 50%; transform: translateX(-50%); z-index: 100000;    max-width: min(760px, calc(90 * var(--vw))); text-align: center;
  font: bold 14px Verdana, "Segoe UI", sans-serif; pointer-events: none; opacity: 0; transition: opacity .4s;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 4px #000; }
.screen-msg.show { opacity: 1; transition: none; }
#msg-high { top: 24%; color: #00eb00; }
#msg-low { top: 58%; color: #f55e5e; }
#msg-status { top: 35%; bottom: auto; color: #fff; font-size: 12px; }
.ch-line.ch-say { color: #ffff00; }
.ch-line.ch-say .ch-name { color: #ffff00; }
.ch-line.ch-say.yell { font-weight: 700; }
.ch-line.ch-log { color: #e6e6e6; }
.ch-line.ch-log.look, .ch-line.ch-log.loot { color: #00eb00; }
.ch-line.ch-log.warn { color: #f55e5e; }
.ch-mode { flex: none; min-width: 58px; }
.ch-mode.on { border-color: rgba(255,255,0,.55); color: #ffff66; }
.hk-box { min-width: min(560px, calc(86 * var(--vw))); }
.hk-rows { max-height: calc(52 * var(--vh)); overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.hk-row { display: grid; grid-template-columns: 76px 1fr auto auto; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; background: var(--bg-2); }
.hk-combo { font-family: var(--mono); color: var(--orange-2); }
.hk-val { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-edit { grid-column: 1 / -1; }
.hk-edit select, .hk-edit input:not([type=checkbox]) { max-width: 200px; }
.modal.modal-saga .modal-box { width: min(1000px, calc(96 * var(--vw))); max-height: calc(92 * var(--vh)); }
.sg-box { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 14px; align-items: start; }
.sg-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; }
.sg-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sg-tabs .sg-tab { gap: 6px; padding: 7px 7px; min-width: 0; } .sg-tabs .sg-tab span { min-width: 0; } .sg-tabs .sg-tab small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-ttl-hero { display: grid; justify-items: center; gap: 6px; }
.sg-tab { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--text-2); cursor: pointer; text-align: left; transition: border-color .12s, background .12s; }
.sg-tab i { display: grid; place-items: center; } .sg-tab .ic { width: 20px; height: 20px; }
.sg-tab b { display: block; font-size: 13px; color: var(--text); } .sg-tab small { display: block; font-size: 10px; color: var(--muted); margin-top: 1px; }
.sg-tab:hover { border-color: var(--orange-2); }
.sg-tab.on { border-color: var(--orange); color: var(--orange-2); --ic-acc: #ffe7cf; background: linear-gradient(180deg, rgba(255,213,26,.2), rgba(255,213,26,.04));
  box-shadow: 0 0 14px rgba(255,213,26,.18); }
.sg-tab.on b { color: #ffd2ad; }
.sg-hero { border-radius: 14px; border: 1px solid var(--line-2); overflow: hidden; background: #0d1017; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.sg-hstage { position: relative; height: 252px; display: grid; place-items: end center; padding-bottom: 20px; box-sizing: border-box;
  background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,213,26,.22), transparent 70%), radial-gradient(circle at 50% 38%, #2a3242, #12161e 72%); }
.sg-hstage::after { content: ""; position: absolute; left: 50%; bottom: 12px; width: 150px; height: 22px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); pointer-events: none; }
.sg-hstage > * { position: relative; z-index: 1; }
.sg-hstage .sprite-box, .sg-stage .sprite-box { place-items: end center; }
.sg-hstage .sprite, .sg-stage .sprite { filter: drop-shadow(0 4px 4px rgba(0,0,0,.55)); }
.sg-hstage:has(> canvas) { padding: 0; place-items: center; }
.sg-hstage canvas.big { width: 252px; height: 252px; }
.sg-hinfo { padding: 10px 12px 12px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.2)); display: grid; gap: 6px; }
.sg-hinfo h3 { margin: 0; font-size: 19px; letter-spacing: .3px; color: #ffe2c8; }
.sg-hsub { color: var(--text-2); font-size: 12px; line-height: 1.35; }
.sg-state { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; border: 1px solid var(--line-2); background: var(--bg-2); }
.sg-state i { font-style: normal; }
.sg-state.on { color: #1a1205; background: linear-gradient(180deg, #ffd977, var(--gold)); border-color: var(--gold); box-shadow: 0 0 12px rgba(242,193,78,.3); }
.sg-state.lock { color: #ff9aa6; border-color: rgba(255,90,110,.5); }
.sg-state.pick { color: var(--orange-2); border-color: rgba(255,213,26,.5); }
.sg-note { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.sg-main { min-width: 0; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; align-content: start; max-height: min(640px, calc(74 * var(--vh))); overflow: auto; padding: 2px 4px 6px 2px; }
.sg-grid.aura { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
.sg-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 7px 10px; border-radius: 12px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, #181c27, #0f1219); cursor: pointer; transition: transform .12s, border-color .12s, box-shadow .12s; }
.sg-card:hover { transform: translateY(-2px); border-color: var(--orange-2); box-shadow: 0 8px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(255,213,26,.25); }
.sg-card.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 18px rgba(242,193,78,.22); }
.sg-card.vip { border-color: rgba(217,165,32,.7); background: linear-gradient(180deg, rgba(217,165,32,.16), #0f1219 55%); }
.sg-card.locked { cursor: not-allowed; }
.sg-card.locked .sprite, .sg-card.locked canvas { filter: grayscale(1) brightness(.42); }
.sg-card b { font-size: 13px; text-align: center; line-height: 1.15; color: var(--text); }
.sg-stage { position: relative; width: 100%; height: 128px; display: grid; place-items: end center; border-radius: 9px; padding-bottom: 6px; box-sizing: border-box;
  background: radial-gradient(ellipse 55% 30% at 50% 96%, rgba(255,213,26,.2), transparent 70%), radial-gradient(circle at 50% 40%, #252c3a, #11141b 72%); }
.sg-stage.aura { height: auto; padding: 0; place-items: center; background: none; }
.sg-stage .sg-lock { position: absolute; inset: 0; display: grid; place-items: center; color: #ff9aa6; --ic-acc: #ff9aa6; z-index: 2; }
.sg-stage .sg-lock .ic { width: 30px; height: 30px; filter: drop-shadow(0 2px 3px #000); }
canvas.aura-cv { image-rendering: pixelated; border-radius: 9px; background: radial-gradient(ellipse 55% 25% at 50% 92%, rgba(255,213,26,.2), transparent 70%), radial-gradient(circle at 50% 42%, #2a3242, #12161e 72%); }
.sg-stage canvas.aura-cv { width: 160px; height: 160px; }
.sg-hstage canvas.aura-cv { background: none; }
.sg-lv { font: 700 10.5px/1 var(--mono); padding: 3px 8px; border-radius: 999px; background: var(--bg-3); color: var(--text-2); border: 1px solid var(--line-2); text-align: center; }
.sg-card.selected .sg-lv { color: var(--gold); border-color: rgba(242,193,78,.5); }
.sg-badge { position: absolute; top: 6px; left: 6px; z-index: 3; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; padding: 2px 6px; border-radius: 6px;
  background: var(--gold); color: #1a1205; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.sg-badge.vip { left: auto; right: 6px; background: linear-gradient(180deg, #ffd24a, #c48a10); }
@media (max-width: 760px) {
  .sg-box { grid-template-columns: 1fr; }
  .sg-side { position: static; }
  .sg-hstage { height: 230px; }
  .sg-hstage canvas.big { width: 196px; height: 196px; }
  .sg-grid { max-height: none; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .sg-grid.aura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-stage canvas.aura-cv { width: 100%; height: auto; aspect-ratio: 1; }
}
.ah-combo1 { display: grid; gap: 8px; width: 100%; }
.ah-jl { display: grid; gap: 5px; }
.ah-jl.dim .ah-jrow, .ah-jl.dim .ah-jadd { opacity: .45; }
.ah-jrow { display: grid; grid-template-columns: 18px 26px 1fr 24px; align-items: center; gap: 6px; }
.ah-jn { font-size: 11px; font-weight: 800; color: var(--orange); text-align: center; }
.ah-jic { width: 26px; height: 26px; border-radius: 5px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line, #2a3040); image-rendering: pixelated; }
.ah-jrow .dsel { width: 100%; min-width: 0; }
.ah-jx { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line, #2a3040); background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.ah-jx:hover { color: #ff7b7b; border-color: #ff7b7b; }
.ah-jadd { justify-self: start; margin-left: 24px; padding: 5px 12px; border-radius: 6px; border: 1px dashed var(--orange); background: rgba(255,219,60, .07);
  color: var(--orange); font-weight: 700; font-size: 12px; cursor: pointer; }
.ah-jadd:hover { background: rgba(255,219,60, .16); }
.ah-jauto { border: 1px solid var(--line, #2a3040); border-radius: 8px; padding: 8px; background: rgba(255, 255, 255, .02); display: grid; gap: 6px; }
.ah-jauto.on { border-color: rgba(255,219,60, .55); background: rgba(255,219,60, .06); }
.ah-jauto-h .toggle { font-weight: 700; }
.mis-block p { margin: 0 0 10px; }
.ab-block { max-width: 440px; text-align: center; }
.ab-block .ab-msg { font-size: 15px; margin: 0 0 12px; }
.ab-block .ab-count { display: grid; gap: 2px; margin: 0 auto 12px; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255,219,60, .45); background: rgba(255,219,60, .08); }
.ab-block .ab-count small { text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.ab-block .ab-left { font-size: 26px; color: var(--orange, #ffda35); font-variant-numeric: tabular-nums; }
.ab-block .item-actions { justify-content: center; }
.mis-block .mis-left { color: var(--orange, #ffda35); }
.mis-block .mis-warn { padding: 9px 11px; border-radius: 9px; font-size: 12.5px; color: #ffd9d9;
  background: rgba(255,80,80,.1); border: 1px solid rgba(255,90,90,.45); }
.ah-cmodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; }
.ah-cmode { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border-radius: 10px; cursor: pointer; text-align: center;
  background: #141822; border: 1px solid #2b3242; color: #c7cede; transition: border-color .12s, background .12s; }
.ah-cmode:hover { border-color: #4a5568; }
.ah-cmode b { font-size: 11.5px; color: #e8ecf4; }
.ah-cmode small { font-size: 9.5px; line-height: 1.2; color: #b3bacb; }
.ah-cmode.on { background: linear-gradient(180deg, #2a1c0c, #191308); border-color: var(--orange, #ffda35); }
.ah-cmode.on b { color: var(--orange, #ffda35); }
.ah-cwarn { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 4px; padding: 8px 10px; border-radius: 9px;
  background: rgba(255,218,53,.09); border: 1px solid rgba(255,218,53,.38); }
.ah-cwarn b { font-size: 11.5px; color: var(--orange, #ffda35); }
.ah-cwarn span { font-size: 11px; color: #c3cada; }
.ah-jarea { border: 1px solid var(--line, #2a3040); border-radius: 8px; padding: 8px; background: rgba(255, 255, 255, .02); display: grid; gap: 4px; }
.ah-jarea .toggle { font-weight: 700; }
.ah-jchips { display: flex; flex-wrap: wrap; gap: 4px; }
.ah-jchip { font-size: 11px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--line, #2a3040); background: rgba(255, 255, 255, .04); }
.ah-jchip.locked { opacity: .5; }
.tooltip:has(.jcard) { padding: 0; max-width: 320px; overflow: hidden; }
.jcard { --jc: var(--orange); width: 300px; }
.jcard.jk-heal { --jc: var(--green); } .jcard.jk-buff { --jc: var(--chakra); } .jcard.jk-special { --jc: var(--gold); } .jcard.jk-info { --jc: var(--orange-2); }
.jcard-h { display: flex; gap: 10px; align-items: center; padding: 10px 12px 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--jc) 18%, transparent), transparent 75%);
  border-bottom: 1px solid var(--line); }
.jcard-ic { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--jc) 60%, transparent);
  background: rgba(0, 0, 0, .35); overflow: hidden; color: var(--jc); }
.jcard-ic img { width: 32px; height: 32px; image-rendering: pixelated; }
.jcard-ic .ic { width: 22px; height: 22px; }
.jcard-t b { display: block; font-size: 14px; color: var(--text); line-height: 1.2; }
.jcard-sub { font-size: 11px; color: var(--text-2); display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.jcard-tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--jc); }
.jcard-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px 2px; }
.jchip { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--bg-3); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.jchip.jc-ck { color: #8cc8ff; } .jchip.jc-cd { color: #ffea8a; } .jchip.jc-du { color: #9cf0c0; } .jchip.jc-combo { color: var(--orange); border-color: var(--orange); } .jchip.jc-bf { color: #d8b4ff; }
.jcard-d { font-size: 12px; color: var(--text-2); line-height: 1.4; padding: 6px 12px 0; }
.jcard-w { font-size: 11px; color: var(--muted); font-style: italic; padding: 6px 12px 0; }
.jcard-st { margin: 10px 12px 10px; padding: 6px 8px; border-radius: 7px; font-size: 12px; font-weight: 600; border-left: 3px solid; }
.jcard-st.st-ok { color: var(--green); border-color: var(--green); background: rgba(74, 222, 128, .08); }
.jcard-st.st-wait { color: #ffea8a; border-color: #ffea8a; background: rgba(255,234,138, .08); }
.jcard-st.st-bad { color: #ff8f9c; border-color: var(--red); background: rgba(244, 63, 94, .1); }
.jcard-st.st-lock { color: var(--text-2); border-color: var(--muted); background: rgba(255, 255, 255, .04); }
.jcard-st.st-none { display: none; }
.win[data-win="hotbar"] .win-head { padding: 3px 6px 3px 10px; font-size: 10px; }
.win[data-win="hotbar"] .win-head button { width: 18px; height: 18px; font-size: 10px; }
.win[data-win="hotbar"] .jutsu-cd .ic { width: 40px; height: 40px; }
.win[data-win="hotbar"] .jutsu-cd { width: 40px; }
body.aiming #world-canvas { cursor: crosshair; }
body.aiming #screen-game::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5; box-shadow: inset 0 0 0 3px rgba(255,219,60, .55); }
.ctx-item.ctx-hk { margin: 2px 2px 6px; padding: 8px 10px; font-weight: 800; color: #1b1206; background: linear-gradient(180deg, #ffe15e, #f0cb25); border-radius: 6px; box-shadow: 0 0 0 1px rgba(255,230,120,.6), 0 2px 8px rgba(240,203,37,.35); }
.ctx-item.ctx-hk:hover { background: linear-gradient(180deg, #ffe881, #ffda35); color: #000; }
.ctx-item.ctx-on { color: var(--accent, #ffde4a); font-weight: 700; }
.jutsu-cd .ic .hk { position: absolute; left: 1px; bottom: 1px; font-style: normal; font-size: 9px; line-height: 11px; padding: 0 3px; border-radius: 3px; background: rgba(240,203,37,.92); color: #160d03; font-weight: 800; pointer-events: none; max-width: 38px; overflow: hidden; white-space: nowrap; }
.jutsu-cd .ic .hk:empty { display: none; }
.jutsu-cd.aim .ic::after { content: "⌖"; position: absolute; right: 1px; bottom: -1px; font-size: 12px; color: #ffe77a; text-shadow: 0 0 3px #000; pointer-events: none; }
.jutsu-cd .hira-glyph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 20px; color: #ffe066; text-shadow: 0 0 6px rgba(255,220,80,.7); }
.jutsu-cd.hira.make .ic img { filter: drop-shadow(0 0 3px #7cd1ff); }
.hk-capture { text-align: center; padding: 6px 4px; }
.hk-capture-big { font-size: 18px; font-weight: 800; color: #ffde4a; padding: 18px 10px; border: 2px dashed rgba(255,222,74,.6); border-radius: 10px; animation: hkPulse 1.2s ease-in-out infinite; }
@keyframes hkPulse { 50% { border-color: rgba(255,222,74,.15); } }
.hk-chip { display: inline-block; margin: 0 3px; padding: 1px 6px; border-radius: 4px; background: rgba(240,203,37,.25); color: #ffe77a; }
.aol-buy-row { display: flex; gap: 12px; align-items: center; }
.aol-buy .aol-ic { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.spell-icon { display: block; background: #000; image-rendering: auto; object-fit: cover; border-radius: 6px; }
.special-icon { image-rendering: pixelated; }
.jutsu-cd .ic { background: #000; }
.jutsu-cd .ic > .spell-icon { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: 0; }
.jutsu-cd .ic > .spell-icon + .ov, .jutsu-cd .ic .ov { z-index: 1; }
.jutsu-cd .ic .lv, .jutsu-cd .ic .left, .jutsu-cd .ic .hk { z-index: 2; }
#panel-jutsus { --jt-card: #0d1016; --jt-line: #222836; }
.jt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--jt-line); }
.jt-pts { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(255,214,31,.65); border-radius: 10px; cursor: help;
  background: linear-gradient(180deg, rgba(255,214,31,.16), rgba(255,214,31,.03)); box-shadow: 0 0 12px rgba(255,214,31,.12); }
.jt-pts b { font-weight: 900; font-size: 13px; }
.jt-pts .n { padding: 3px 10px; border: 1px solid rgba(255,214,31,.6); border-radius: 7px; color: #ffdd47; font: 800 12px var(--mono); }
.jt-how { flex: 1 1 200px; }
.jt-jin { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid rgba(244,63,94,.45); border-radius: 10px; background: rgba(244,63,94,.06); }
.jt-jin span { display: flex; flex-direction: column; } .jt-jin b { font-size: 12px; }
.jt-body { display: grid; grid-template-columns: minmax(200px, 250px) 1fr; gap: 14px; align-items: start; }
.jt-list { display: flex; flex-direction: column; gap: 6px; }
.jt-item { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--jt-line); border-radius: 10px;
  background: var(--jt-card); cursor: pointer; text-align: left; color: inherit; font: inherit; transition: border-color .12s, background .12s; }
.jt-item:hover { border-color: #3a4256; }
.jt-item.sel { border-color: #ffd61f; background: linear-gradient(90deg, rgba(255,214,31,.18), var(--jt-card) 75%); box-shadow: 0 0 12px rgba(255,214,31,.18); }
.jt-item.locked { opacity: .5; }
.jt-item > .spell-icon { width: 40px !important; height: 40px !important; border-radius: 7px; box-shadow: 0 0 0 1px #2a3142; }
.jt-item b { display: block; font-size: 12.5px; line-height: 1.25; }
.jt-item small { color: #b3bacb; font-size: 10.5px; }
.jt-itemic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 7px; box-shadow: 0 0 0 1px #2a3142; }
.jt-itemic.big { width: 56px; height: 56px; }
.jt-itemic img { width: 32px; height: 32px; image-rendering: pixelated; }
.jt-sec { margin: 8px 2px 0; font: 800 10px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: #b3bacb; }
.jt-sec.bj { color: #ffe15c; } .jt-sec.fm { color: #f6cf62; }
.jt-detail { position: sticky; top: 0; border: 1px solid var(--jt-line); border-radius: 12px; background: #0a0d12; padding: 16px; }
.jt-head { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.jt-head > .spell-icon { width: 56px !important; height: 56px !important; border-radius: 9px; box-shadow: 0 0 0 1px #3a4256, 0 0 16px rgba(0,0,0,.8); }
.jt-head h3 { margin: 0; font-size: 18px; font-weight: 800; }
.jt-head .sub { color: #b3bacb; font-size: 12px; margin-top: 2px; }
.jt-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 6px; }
.jt-words { color: #ffdd47; font-style: italic; font-size: 12px; }
.jt-desc { color: #c9cfdc; font-size: 12px; line-height: 1.55; margin: 8px 0; }
.jt-tl-t { margin: 16px 0 0; font: 800 10px var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: #b3bacb; }
.jt-tl { position: relative; display: grid; gap: 10px; margin-top: 10px; padding-left: 24px; }
.jt-tl::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(#ffd61f, rgba(255,214,31,.12)); }
.jt-node { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px;
  border: 1px solid #2a3142; border-radius: 11px; background: #10141b; }
.jt-node::before { content: ""; position: absolute; left: -21px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: #3a4256; border: 2px solid #0a0d12; box-shadow: 0 0 0 1px #3a4256; }
.jt-node.on { border-color: rgba(255,214,31,.45); }
.jt-node.on::before { background: #ffd61f; box-shadow: 0 0 0 1px #ffd61f, 0 0 10px rgba(255,214,31,.75); }
.jt-node b { font-size: 13.5px; }
.jt-node p { margin: 3px 0 6px; color: #9aa3b5; font-size: 11.5px; }
.jt-lvl { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.jt-lvl .lv { color: #ffdd47; font: 800 12px var(--mono); }
.jt-lvl .bonus { color: #ffdb3c; font-size: 11px; font-weight: 700; }
.jt-buy { min-width: 74px; padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(255,214,31,.55); background: rgba(255,214,31,.10); color: #ffdd47;
  font: 800 12px var(--mono); cursor: pointer; transition: background .12s; }
.jt-buy:hover:not(:disabled) { background: rgba(255,214,31,.24); }
.jt-buy:disabled { opacity: .5; cursor: default; color: #b3bacb; border-color: #2a3142; background: transparent; }
.jt-lock { margin-top: 14px; padding: 12px; border: 1px dashed #3a4256; border-radius: 10px; color: #b3bacb; text-align: center; font-size: 12px; }
.jt-use { margin-top: 10px; }
@media (max-width: 760px) { .jt-body { grid-template-columns: 1fr; } .jt-detail { position: static; } }
.win[data-win="auto"] { background: #06080b; }
#panel-auto { --ah-card: #0c0f15; --ah-line: #20262f; }
#panel-auto .dtabs.ah-tabs { border: 0; gap: 4px; margin-bottom: 10px; }
#panel-auto .ah-tabs .dtab { background: var(--ah-card); border: 1px solid var(--ah-line); border-radius: 8px; color: #8d96a8; padding: 7px 2px 6px; font-weight: 900; letter-spacing: .4px; }
#panel-auto .ah-tabs .dtab:hover { color: #d7dce6; border-color: #343c4b; }
#panel-auto .ah-tabs .dtab.active { color: #ffdd47; border-color: #ffd61f; background: linear-gradient(180deg, rgba(255,214,31,.18), rgba(255,214,31,.04));
  box-shadow: 0 0 12px rgba(255,214,31,.28), inset 0 0 0 1px rgba(255,214,31,.25); }
#panel-auto .ah-list { gap: 7px; }
#panel-auto .ah-row { background: var(--ah-card); border: 1px solid var(--ah-line); border-radius: 10px; padding: 10px 11px; }
#panel-auto .ah-row.on { border-color: rgba(255,214,31,.6); background: linear-gradient(90deg, rgba(255,214,31,.12), var(--ah-card) 50%); box-shadow: inset 3px 0 0 #ffd61f; }
#panel-auto .ah-head { gap: 10px; }
#panel-auto .ah-ic { width: 34px; height: 34px; border: 0; color: #fff; --ic-acc: #fff; --ic-red: #fff;
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--c, #64748b) 62%, #fff 38%), color-mix(in srgb, var(--c, #64748b) 82%, #000) 75%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c, #64748b) 55%, transparent), inset 0 0 0 1.5px rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.35); }
#panel-auto .ah-row:not(.on) .ah-ic { filter: saturate(.5) brightness(.72); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); }
#panel-auto .ah-ic .ic { width: 19px; height: 19px; stroke-width: 2.1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
#panel-auto .ah-t b { font-size: 12.5px; font-weight: 900; letter-spacing: .8px; color: #f3f5f9; }
#panel-auto .ah-t small { color: #858ea2; font-size: 10.5px; line-height: 1.35; }
#panel-auto .ah-st { font-size: 10.5px; font-weight: 900; letter-spacing: .6px; color: #535b6d; }
#panel-auto .ah-row.on .ah-st { color: #34e07a; text-shadow: 0 0 8px rgba(52,224,122,.5); }
#panel-auto .switch { width: 40px; height: 21px; background: #161b24; border-color: #2c3443; }
#panel-auto .switch::after { width: 15px; height: 15px; top: 2px; left: 2px; background: #5f6779; }
#panel-auto .toggle.on .switch { background: linear-gradient(180deg, #ffde4a, #ffd414); border-color: #ffdb3c; box-shadow: 0 0 12px rgba(255,214,31,.6); }
#panel-auto .toggle.on .switch::after { left: 21px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
#panel-auto .dsel { background: #0f131a; border: 1px solid #283040; color: #e8ebf3; border-radius: 8px; padding: 8px 10px; font-weight: 700; }
#panel-auto .dsel:hover, #panel-auto .dsel:focus { border-color: #ffd61f; outline: none; }
#panel-auto .ah-extra { margin-top: 10px; }
#panel-auto .ah-warn { background: rgba(242,193,78,.10); }
#panel-auto .ah-foot { background: #0a0d12; border-color: #20262f; padding: 8px; }
#panel-auto .ah-foot.on { color: #34e07a; border-color: rgba(52,224,122,.5); box-shadow: inset 0 0 14px rgba(52,224,122,.08); text-shadow: 0 0 8px rgba(52,224,122,.45); }
#panel-auto .ah-pick { border-bottom-color: #1a1f28; }
#panel-auto .ah-sec-t { color: #ffdd47; }
#panel-auto .ah-jauto { background: #0f131a; border-color: #283040; }
#panel-auto .ah-jauto.on { border-color: rgba(255,214,31,.6); background: rgba(255,214,31,.07); }
#panel-auto .ah-jic { background: #000; border-color: #2c3443; image-rendering: auto; object-fit: cover; }
#panel-auto .ah-jadd { border-color: #ffd61f; color: #ffdd47; }
.ah-cstrip { display: flex; align-items: flex-start; justify-content: center; gap: 6px; padding: 4px 0 6px; }
.ah-cbox { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ah-cbox i { font: 900 11px var(--mono); font-style: normal; color: #ffdd47; }
.ah-cimg { width: 40px; height: 40px; border-radius: 8px; border: 1.5px solid #3a4256; background: #000; overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 0 10px rgba(0,0,0,.65), 0 0 0 1px rgba(255,214,31,.15); color: #ffdd47; }
.ah-cimg img { width: 100%; height: 100%; display: block; }
.ah-cbox small { font: 800 10px var(--mono); color: #d3d8e3; }
.ah-cbox.locked { opacity: .45; }
.ah-carrow { margin-top: 26px; color: #ffd61f; font-weight: 900; font-size: 15px; text-shadow: 0 0 6px rgba(255,214,31,.5); }
#panel-highscores { --hs-line: #20262f; }
.hs-top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.hs-groups { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--hs-line); border-radius: 10px; background: #0a0d12; }
.hs-grp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #a3abbc; font-weight: 800; font-size: 12px; cursor: pointer; }
.hs-grp .ic { width: 15px; height: 15px; }
.hs-grp:hover { color: #e6e9f0; }
.hs-grp.active { color: #ffdd47; border-color: #ffd61f; background: linear-gradient(180deg, rgba(255,214,31,.18), rgba(255,214,31,.05)); box-shadow: 0 0 10px rgba(255,214,31,.25); }
.hs-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--hs-line); border-radius: 10px; background: #0a0d12; margin-bottom: 10px; }
.hs-cat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #a3abbc; font-weight: 700; font-size: 12px; cursor: pointer; }
.hs-cat .ic { width: 15px; height: 15px; }
.hs-cat:hover { color: #e6e9f0; background: rgba(255,255,255,.03); }
.hs-cat.active { color: #ffdd47; border-color: #ffd61f; background: linear-gradient(180deg, rgba(255,214,31,.16), rgba(255,214,31,.04)); }
.hs-filters { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.hs-filters .hs-search { flex: 1 1 auto; margin: 0; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--hs-line); background: #0a0d12; color: #e8ebf3; font-size: 13px; }
.hs-filters .hs-search:focus { border-color: #ffd61f; outline: none; }
.hs-filters .hs-voc { flex: 0 0 auto; max-width: 180px; background: #0a0d12; border-color: var(--hs-line); padding: 9px 10px; }
.hs-table { gap: 0; border: 1px solid var(--hs-line); border-radius: 12px; background: #0a0d12; overflow: hidden; }
.hs-table .hs-row { grid-template-columns: 74px minmax(150px, 1.6fr) minmax(110px, 1.1fr) minmax(64px, .7fr) minmax(70px, .9fr) 108px; min-width: 0;
  gap: 8px; padding: 9px 14px; border: 0; border-bottom: 1px solid #171c24; border-radius: 0; background: transparent; cursor: default; }
.hs-table.compact .hs-row { grid-template-columns: 58px minmax(120px, 1.6fr) minmax(90px, 1fr) minmax(56px, .7fr); cursor: pointer; }
.hs-table .hs-row:last-child { border-bottom: 0; }
.hs-table .hs-row:hover:not(.hs-head) { background: rgba(255,214,31,.04); }
.hs-table .hs-row.me { background: rgba(255,214,31,.07); box-shadow: inset 3px 0 0 #ffd61f; }
.hs-table .hs-head { position: sticky; top: 0; z-index: 1; background: #0d1016; border-bottom: 2px solid rgba(242,193,78,.45); padding: 10px 14px;
  font: 800 10.5px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: #b3bacb; }
.hs-table .hs-rk { display: flex; align-items: center; gap: 6px; font: 800 13px var(--mono); color: #b3bacb; }
.hs-table .hs-row.top1 .hs-rk { color: #ffcf3a; } .hs-table .hs-row.top2 .hs-rk { color: #d5dbe5; } .hs-table .hs-row.top3 .hs-rk { color: #e3c957; }
.hs-medal { width: 20px; height: 20px; display: block; }
.hs-medal .rib { fill: #c0392b; } .hs-medal.m2 .rib { fill: #2f6fd6; } .hs-medal.m3 .rib { fill: #2f9e62; }
.hs-medal .disc { fill: #f5c542; stroke: #9c7412; stroke-width: 1; } .hs-medal .ring { fill: none; stroke: rgba(255,255,255,.45); stroke-width: .8; }
.hs-medal.m2 .disc { fill: #cfd6e0; stroke: #7b8594; } .hs-medal.m3 .disc { fill: #d9bf4a; stroke: #8a7722; }
.hs-medal text { font: 900 7px var(--mono); fill: #3a2a05; }
.hs-table .hs-who { gap: 10px; }
.hs-ava { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #1d2330, #0b0e13); box-shadow: 0 0 0 1.5px #2a3142; }
.hs-table .hs-nm b { font-size: 13px; color: #f1f3f7; }
.hs-on { color: #34e07a; font-size: 10.5px; font-weight: 700; }
.hs-voc { display: inline-block; max-width: 100%; padding: 4px 11px; border-radius: 999px; border: 1px solid rgba(122,134,255,.55); background: rgba(90,104,255,.12);
  color: #c8cdff; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-table .hs-val { text-align: left; color: #ffdd47; font: 900 14px var(--mono); }
.hs-c-guild { color: #a3abbc; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-c-act { text-align: right; }
.hs-prof-btn { padding: 8px 12px; border-radius: 8px; border: 1px solid #3a4256; background: #0f131a; color: #e8ebf3; font: 800 11px var(--mono); letter-spacing: .6px;
  text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.hs-prof-btn:hover { border-color: #ffd61f; color: #ffdd47; }
.hs-foot { margin-top: 10px; }
.hs-pager { gap: 10px; }
.hs-pager b { font: 800 13px var(--mono); }
.hs-pg { padding: 8px 14px; border-radius: 8px; border: 1px solid #3a4256; background: #0f131a; color: #e8ebf3; font-weight: 700; cursor: pointer; }
.hs-pg:hover:not(:disabled) { border-color: #ffd61f; color: #ffdd47; }
.hs-pg:disabled { opacity: .4; cursor: default; }
.hs-me { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255,214,31,.45); background: rgba(255,214,31,.08); color: #ffdd47; font-weight: 700; font-size: 11.5px; cursor: pointer; }
@media (max-width: 760px) {
  .hs-table .hs-row { grid-template-columns: 52px minmax(120px, 1.6fr) minmax(56px, .7fr) 86px; }
  .hs-table .hs-c-voc, .hs-table .hs-c-guild { display: none; }
}
.wb-rules { margin: 6px 0 10px 18px; padding: 0; line-height: 1.45; }
.wb-rules .wb-safe { color: #6ef59a; font-weight: 700; }
.cls-chip { display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cc); border: 1px solid var(--cc); background: color-mix(in srgb, var(--cc) 14%, transparent); vertical-align: middle; line-height: 1.4; }
.cls-chip.on-card { position: absolute; top: 6px; left: 6px; font-size: 8.5px; padding: 0 4px; }
.cls-desc { color: #c9cfdb; margin: 2px 0 6px; }
.cls-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--cc); margin-left: 6px; vertical-align: middle; box-shadow: 0 0 4px var(--cc); }
.voc-col { min-width: 0; }
.voc-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.voc-filter button { padding: 4px 12px; border-radius: 7px; border: 1px solid var(--line-2, #2a3140); background: #0f131b; color: #c9cfdb;
  font: 700 12px Inter, sans-serif; cursor: pointer; }
.voc-filter button[style] { color: var(--cc); border-color: color-mix(in srgb, var(--cc) 55%, transparent); }
.voc-filter button.on { background: color-mix(in srgb, var(--cc, #ffd51a) 22%, #0f131b); border-color: var(--cc, #ffd51a); color: #fff; }
.voc-card.hidden { display: none; }
.voc-detail li.sp-li { display: block; }
.sp-li .sp-row { display: flex; justify-content: space-between; gap: 8px; }
.sp-li .sp-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 3px 0 2px; font-size: 11px; color: #aeb6c4; }
.sp-tags { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }
.jt-item .sp-tags { margin-top: 3px; }
.jcard .sp-tags, .jt-detail > .sp-tags { margin: 6px 0 2px; }
.sp-tag { display: inline-block; padding: 0 5px; border-radius: 4px; font: 800 9px/15px Inter, sans-serif; letter-spacing: .05em; color: #fff;
  background: #3a4252; border: 1px solid rgba(255,255,255,.12); }
.sp-tag.t-world { background: #5b2bb5; } .sp-tag.t-trap { background: #1f7a4a; } .sp-tag.t-paralyze { background: #c99a0a; color: #1a1300; }
.sp-tag.t-control { background: #b02a8a; } .sp-tag.t-silence { background: #2b6fb5; } .sp-tag.t-blind { background: #2a2d36; }
.sp-tag.t-invuln { background: #d4d7de; color: #12151c; } .sp-tag.t-defense { background: #3c6e9e; } .sp-tag.t-heal { background: #2f9e5b; }
.sp-tag.t-buff { background: #c2a10c; } .sp-tag.t-taunt { background: #e0ba10; } .sp-tag.t-mark { background: #c21f2f; }
.sp-tag.t-summon { background: #6b5b3a; } .sp-tag.t-execute { background: #7a0f18; } .sp-tag.t-invis { background: #44506a; }
.sp-tag.t-swap { background: #6a2bb5; } .sp-tag.t-dash { background: #8a6a10; } .sp-tag.t-area { background: #8e791a; }
.sp-tag.t-poison { background: #3f8f1f; }
.train-head { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 12px; margin: 6px 0 10px;
  border: 1px solid var(--line-2); border-radius: 10px; background: linear-gradient(135deg, rgba(169,112,255,.10), rgba(60,199,255,.05)); }
.train-head .th-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.train-head .th-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.train-head .th-act { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; max-width: 170px; flex: none; }
@media (max-width: 760px) { .train-head { flex-direction: column; } .train-head .th-act { align-items: stretch; text-align: left; max-width: none; } }
.win[data-win="hotbar"] { background: linear-gradient(180deg, rgba(22,26,36,.94), rgba(9,11,16,.96)); border: 1px solid rgba(255,213,26,.28);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.win[data-win="hotbar"]::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,219,60,.85), transparent); }
.win[data-win="hotbar"] .win-head { background: transparent; border-bottom: 0; color: #f0da7a; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.win[data-win="hotbar"] .jutsu-bar { gap: 5px; padding: 2px 1px 3px; }
.win[data-win="hotbar"] .jutsu-cd { position: relative; width: 42px; transition: transform .12s ease; }
.win[data-win="hotbar"] .jutsu-cd .ic { width: 42px; height: 42px; border-radius: 9px; border: 1px solid #3a4152;
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06), 0 3px 6px rgba(0,0,0,.45); }
.win[data-win="hotbar"] .jutsu-cd .ic::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.38)); }
.win[data-win="hotbar"] .jutsu-cd::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: -3px; height: 2px; border-radius: 2px;
  background: var(--kc, #6b7486); box-shadow: 0 0 6px var(--kc, transparent); opacity: .9; pointer-events: none; }
.win[data-win="hotbar"] .jutsu-cd.k-attack { --kc: #ffd51a; } .win[data-win="hotbar"] .jutsu-cd.k-heal { --kc: #4ade80; }
.win[data-win="hotbar"] .jutsu-cd.k-buff { --kc: #b98cff; } .win[data-win="hotbar"] .jutsu-cd.k-taunt { --kc: #f5ca0b; }
.win[data-win="hotbar"] .jutsu-cd.special { --kc: #ffd257; } .win[data-win="hotbar"] .jutsu-cd.bj { --kc: #ff4d5e; }
.win[data-win="hotbar"] .jutsu-cd.locked::after, .win[data-win="hotbar"] .jutsu-cd.cd::after { opacity: .3; box-shadow: none; }
.win[data-win="hotbar"] .jutsu-cd.strong:not(.locked):not(.aim) .ic::after { content: ""; position: absolute; right: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; z-index: 4;
  background: #ffe15c; box-shadow: 0 0 5px #ffd51a; }
.win[data-win="hotbar"] .jutsu-cd.locked .ic::after { content: "🔒"; position: absolute; right: 2px; bottom: 1px; font-size: 10px; z-index: 4; }
.win[data-win="hotbar"] .jutsu-cd.aim .ic::after { content: "⌖"; position: absolute; right: 1px; bottom: -1px; font-size: 12px; color: #ffe77a; text-shadow: 0 0 3px #000; z-index: 4; }
.win[data-win="hotbar"] .jutsu-cd:not(.locked):hover { transform: translateY(-2px); }
.win[data-win="hotbar"] .jutsu-cd:not(.locked):hover .ic { border-color: var(--kc, var(--orange)); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 10px color-mix(in srgb, var(--kc, #ffd51a) 55%, transparent), 0 5px 10px rgba(0,0,0,.5); }
.win[data-win="hotbar"] .jutsu-cd:active:not(.locked) { transform: translateY(0) scale(.95); }
.win[data-win="hotbar"] .jutsu-cd .ic .ov { top: 0; bottom: auto; background: rgba(4,6,10,.72); border-bottom: 1px solid rgba(140,210,255,.75); transition: height .1s linear; }
.win[data-win="hotbar"] .jutsu-cd .ic .ov[style*="height: 0%"], .win[data-win="hotbar"] .jutsu-cd .ic .ov[style*="height:0%"] { border-bottom: 0; }
.win[data-win="hotbar"] .jutsu-cd.cd .ic .left { left: 0; right: 0; top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; font-size: 15px;
  color: #fff; text-shadow: 0 0 4px #000, 0 0 2px #000, 0 1px 0 #000; }
.win[data-win="hotbar"] .jutsu-cd .ic .lv { z-index: 5; padding: 0 2px; border-radius: 3px; background: rgba(0,0,0,.55); }
.win[data-win="hotbar"] .jutsu-cd .ic .hk { z-index: 5; }
.win[data-win="hotbar"] .jutsu-cd.active .ic { border-color: var(--kc, #c9a4ff); box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 11px color-mix(in srgb, var(--kc, #b98cff) 80%, transparent); }
.win[data-win="hotbar"] .jutsu-cd.flash .ic { animation: hb-flash .45s ease-out; }
@keyframes hb-flash { 0% { box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 0 0 rgba(255,255,255,.9), inset 0 0 18px rgba(255,255,255,.65); }
  100% { box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 0 7px rgba(255,255,255,0), inset 0 0 0 rgba(255,255,255,0); } }
.win[data-win="hotbar"] .jutsu-cd.blocked .ic { border-color: rgba(245,94,94,.65); }
.win[data-win="hotbar"] .jutsu-sep { position: relative; width: 2px; margin: 4px 5px; background: linear-gradient(transparent, rgba(255,210,87,.75), transparent); }
.win[data-win="hotbar"] .jutsu-sep::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%) rotate(45deg);
  background: #ffd257; box-shadow: 0 0 6px rgba(255,210,87,.8); }
.jutsu-sep.tog { cursor: pointer; padding: 0 6px; margin-left: -2px; margin-right: -2px; background-clip: content-box; }
.win[data-win="hotbar"] .jutsu-sep.tog { padding: 0 6px; margin: 4px -1px; }
.jutsu-sep.tog:hover::after { background: #fff3c4; box-shadow: 0 0 9px rgba(255,230,140,1); }
.jutsu-bar.so-esp .jutsu-cd:not(.special) { display: none; }
.jutsu-bar.so-esp .jutsu-sep.tog::after { width: 8px; height: 8px; background: #ffdd43; box-shadow: 0 0 8px rgba(255,221,67,.95); }
@media (max-width: 760px) { .win[data-win="hotbar"] .jutsu-cd, .win[data-win="hotbar"] .jutsu-cd .ic { width: 40px; } .win[data-win="hotbar"] .jutsu-cd .ic { height: 40px; } }
.pt-card { pointer-events: auto; border-left-color: #4aa3ff; }
.pt-invite { border-left: 3px solid #4aa3ff; }
.pt-head .gname { font-weight: 800; font-size: 16px; }
.pt-share { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; background: #0d1118; border: 1px solid var(--line-2); }
.pt-share.on { border-color: #2f7a45; background: linear-gradient(90deg, rgba(60,200,110,.12), transparent); }
.pt-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.pt-row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: #10141c; border: 1px solid var(--line-2); }
.pt-row.me { border-color: rgba(255,216,40,.55); }
.pt-face { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #000; border: 1px solid var(--line-2); flex: none; }
.pt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-bars { display: flex; flex-direction: column; gap: 2px; }
.pt-bar { height: 5px; border-radius: 3px; background: #05070a; overflow: hidden; }
.pt-bar i { display: block; height: 100%; }
.pt-bar.hp i { background: linear-gradient(90deg, #2fbf55, #6be28a); }
.pt-bar.ki i { background: linear-gradient(90deg, #2a7bdc, #6fb2ff); }
.pt-acts { display: flex; flex-direction: column; gap: 4px; flex: none; }
.pt-near { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pt-rules { margin: 10px 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ctx-item.hot { color: #ffdd47; font-weight: 700; }
.bt-shield { display: inline-block; width: 9px; height: 11px; margin-right: 4px; vertical-align: -1px; background: #4aa3ff; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); flex: none; }
.bt-shield.lead { background: #f5c542; }
.bt-row.party { border-left: 2px solid #4aa3ff; }
.bt-row.party.lead { border-left-color: #f5c542; }
.bt-row.party > .bt-shield { width: 14px; height: 17px; margin: 0 6px 0 4px; }
.dchip.party.active { background: #1c3d63; border-color: #4aa3ff; color: #cfe6ff; }
.bt-chips { flex-wrap: wrap; }
.bt-row.party .bar-hp > div { background: linear-gradient(90deg, #2fbf55, #6be28a); }
#panel-missions { display: flex; flex-direction: column; gap: 10px; }
.mis-head { display: flex; flex-direction: column; gap: 8px; }
.mis-lead { color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.mis-ranks { display: flex; gap: 6px; }
.mis-rank { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font-weight: 800; font-size: 12px; color: #0b0d12; }
.mis-rank.rD, .mis-opt.rD.on { background: #8fb3a0; } .mis-rank.rC, .mis-opt.rC.on { background: #6fb6ff; } .mis-rank.rB, .mis-opt.rB.on { background: #b98cff; }
.mis-rank.rA, .mis-opt.rA.on { background: #ffe054; } .mis-rank.rS, .mis-opt.rS.on { background: #ff5a6b; }
.mis-rank.rSS { background: linear-gradient(135deg, #f5f0ff, #c9a6ff 45%, #ff6aa8); }
.mis-char { display: grid; grid-template-columns: 48px 1fr; gap: 4px 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.mis-char.me { border-color: var(--orange); }
.mis-char.st-done { border-color: var(--green); box-shadow: 0 0 0 1px rgba(74,222,128,.25) inset; }
.mis-face { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle, #2a3142, #12151d); }
.mis-who b { font-size: 14px; }
.mis-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mis-rw { display: flex; gap: 5px; flex-wrap: wrap; }
.mis-now { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.mis-bar { height: 7px; border-radius: 4px; background: var(--bg-0); overflow: hidden; }
.mis-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); }
.mis-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mis-rep { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; color: var(--muted, #aab); cursor: pointer; user-select: none; }
.mis-now .mis-rep { margin-left: auto; }
.mis-rep input { accent-color: #ffdd43; margin: 0; }
.mis-send { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 9px 18px; border-radius: 11px; font-size: 13.5px; font-weight: 900; letter-spacing: .3px;
  box-shadow: 0 0 0 1px rgba(255,216,40,.5), 0 6px 18px rgba(255,213,26,.3); }
.mis-send:not(:disabled):hover { filter: brightness(1.08); }
.mis-send i { display: grid; place-items: center; width: 18px; height: 18px; flex: none; }
.mis-send i svg { width: 18px; height: 18px; }
.mis-send span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.mis-send small { font-size: 10px; font-weight: 700; opacity: .8; text-transform: none; letter-spacing: 0; }
.mis-send:disabled { box-shadow: none; }
.mis-weapon { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.sw-list { display: flex; flex-direction: column; gap: 6px; max-height: calc(60 * var(--vh)); overflow: auto; }
.sw-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); text-align: left; cursor: pointer; }
.sw-row:hover:not(:disabled) { border-color: var(--orange); } .sw-row.cur { opacity: .6; cursor: default; }
.sw-name { display: flex; flex-direction: column; flex: 1; } .sw-name small { color: var(--text-2); }
.sw-st { font-size: 11px; color: var(--orange-2); }
.sw-acts { display: flex; gap: 6px; }
.xf-box { display: flex; flex-direction: column; gap: 8px; }
.xf-grid { display: flex; flex-wrap: wrap; gap: 5px; max-height: calc(40 * var(--vh)); overflow: auto; }
.xf-grid .islot { cursor: pointer; } .xf-grid .islot.sel { outline: 2px solid var(--orange); outline-offset: 1px; }
.xf-grid .islot.locked { opacity: .35; cursor: not-allowed; }
.mmenu, .afab, .apill, .tgtbox, #btn-mmenu, .apow, .cfab { display: none; }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .toolbar .tool-btn:not(.m-keep):not(.tool-play) { display: none !important; }
  .toolbar { justify-content: space-around; overflow-x: hidden; }
  .toolbar .tool-btn { flex: 1 1 0; min-width: 0; }
  #btn-mmenu { display: flex; }
  .toolbar .tool-sep { display: none; }
  .toolbar .tool-play { order: -1; }
  .mmenu { display: flex; position: fixed; inset: 0; z-index: 9000; background: rgba(4,6,10,.62); align-items: flex-end; justify-content: center; padding: 0 8px calc(68px + env(safe-area-inset-bottom)); }
  .mmenu.hidden { display: none; }
  .mgm-box { width: 100%; max-width: 520px; background: linear-gradient(180deg, #161b26, #0d1018); border: 1px solid var(--line-2); border-radius: 16px; padding: 10px 10px 12px; box-shadow: var(--shadow); }
  .mgm-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 8px; color: var(--orange-2); letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; }
  .mgm-x { background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text); border-radius: 8px; width: 32px; height: 32px; }
  .mgm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .mgm-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-size: 11px; font-weight: 700; }
  .mgm-btn i { display: grid; place-items: center; height: 24px; }
  .mgm-btn .ic { width: 24px; height: 24px; }
  .mgm-btn.play { border-color: var(--orange); background: linear-gradient(180deg, rgba(255,213,26,.25), var(--bg-2)); color: var(--orange-2); }
  .mgm-btn:active { transform: scale(.96); }
  .quickbar .qb-btn.idle, .quickbar #qb-target { display: none !important; }
  .afab { display: block; position: fixed; z-index: 19; right: 10px; bottom: calc(150px + env(safe-area-inset-bottom)); width: 66px; height: 66px; border-radius: 50%; touch-action: none; user-select: none; -webkit-user-select: none; }
  .af-glow { position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(255,213,26,.0), rgba(255,213,26,0) 60%); transition: background .2s; }
  .af-core { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #3a414f, #12151d 70%); border: 3px solid #4a5163; color: #9aa3b8; box-shadow: 0 6px 18px rgba(0,0,0,.55); }
  .af-core .ic { width: 34px; height: 34px; stroke-width: 1.6; }
  .af-core .ic .a { fill: #6c7489; }
  .af-lbl { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); font-size: 10px; font-weight: 900; letter-spacing: 1px; padding: 1px 7px; border-radius: 999px; background: #262c3a; color: #9aa3b8; border: 1px solid #3a4152; }
  .afab.on .af-core { border-color: #ffe054; color: #fff3e0; background: radial-gradient(circle at 35% 30%, #ffdb3c, #c2a10c 75%); }
  .afab.on .af-core .ic .a { fill: #fff6cc; }
  .afab.on .af-glow { background: radial-gradient(circle, rgba(255,216,40,.55), rgba(255,213,26,0) 68%); animation: afPulse 1.8s ease-in-out infinite; }
  .afab.on .af-lbl { background: #ffd51a; color: #1a0d00; border-color: #ffe054; }
  .afab.press .af-core { transform: scale(.92); }
  .afab { cursor: pointer; }
  .apow { display: grid; place-items: center; position: fixed; z-index: 19; right: 58px; bottom: calc(196px + env(safe-area-inset-bottom)); width: 34px; height: 34px; padding: 0; border-radius: 50%;
    border: 2px solid #4a5163; background: radial-gradient(circle at 35% 30%, #343b49, #10131a 75%); color: #9aa3b8; box-shadow: 0 3px 10px rgba(0,0,0,.55); }
  .apow .ic { width: 16px; height: 16px; stroke-width: 2; }
  .apow b { position: absolute; bottom: -8px; font-size: 8px; font-weight: 900; letter-spacing: .5px; padding: 0 4px; border-radius: 999px; background: #262c3a; border: 1px solid #3a4152; }
  .apow.on { border-color: #4ade80; color: #dcfce7; background: radial-gradient(circle at 35% 30%, #22c55e, #14532d 80%); }
  .apow.on b { background: #16a34a; color: #f0fff4; border-color: #4ade80; }
  .apow:active { transform: scale(.9); }
  .cfab { display: grid; place-items: center; position: fixed; z-index: 19; right: 18px; bottom: calc(236px + env(safe-area-inset-bottom)); width: 46px; height: 46px; padding: 0; border-radius: 50% 50% 50% 12%;
    border: 2px solid #3a4152; background: radial-gradient(circle at 35% 30%, #2d3446, #10131a 75%); color: #c7cede; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
  .cfab.hidden { display: none; }
  .cfab .ic { width: 22px; height: 22px; }
  .cfab em { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font: 800 10.5px/18px system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px #10131a; }
  .cfab em:empty { display: none; }
  .cfab.new { border-color: #6fb6ff; }
  .cfab.new::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 5px rgba(111,182,255,.25); animation: glowFade 2s ease-in-out infinite; }
  @keyframes afPulse { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
  .apill { display: flex; position: fixed; z-index: 30; left: 6px; top: calc(112px + env(safe-area-inset-top)); align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(13,16,23,.82); border: 1px solid #3a4152; color: #9aa3b8; font-size: 11px; }
  .apill b { letter-spacing: 1px; font-weight: 900; }
  .apill.on { border-color: rgba(74,222,128,.7); color: #b7f7cf; box-shadow: 0 0 10px rgba(74,222,128,.25); }
  .apill.on b { color: var(--green); }
  .apill i { display: grid; place-items: center; } .apill .ic { width: 14px; height: 14px; stroke-width: 2; }
  .quickbar { top: calc(142px + env(safe-area-inset-top)) !important; }
  .tgtbox { display: block; position: fixed; z-index: 30; left: 6px; top: calc(8px + env(safe-area-inset-top)); width: 168px; padding: 6px 9px 7px; border-radius: 10px; background: rgba(13,16,23,.88); border: 1px solid rgba(244,63,94,.55); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
  .tgtbox.hidden { display: none; }
  .tg-kind { font-size: 9px; font-weight: 900; letter-spacing: 1.4px; color: #ff9aa8; }
  .tgtbox.pvp .tg-kind { color: #ffd166; }
  .tg-name { font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px; }
  .tg-bar { height: 6px; border-radius: 3px; background: #2a1016; margin-top: 4px; overflow: hidden; }
  .tg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff4d5e, #ffe15b); }
  .tg-pct { position: absolute; right: 9px; top: 15px; font-size: 12px; font-weight: 800; color: #ffb3bd; }
  .tg-hp { margin-top: 3px; font-size: 11px; font-weight: 700; color: #e8c3c9; font-variant-numeric: tabular-nums; }
  .tg-hp.hidden { display: none; }
}
.joy, .mbtn, .mcard, .mhint, .mlv { display: none; }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  body:not(.no-mctl) .joy { display: block; position: fixed; z-index: 19; left: 14px; bottom: calc(150px + env(safe-area-inset-bottom)); width: 116px; height: 116px;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    transform: scale(var(--joy-s, 1)); transform-origin: left bottom; }
  .joy-base { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(40,46,60,.55), rgba(10,12,18,.62) 70%);
    border: 2px solid rgba(255,255,255,.14); box-shadow: inset 0 0 18px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35); transition: border-color .15s, box-shadow .15s; }
  .joy.on .joy-base { border-color: rgba(255,217,50,.55); box-shadow: inset 0 0 18px rgba(0,0,0,.5), 0 0 16px rgba(255,213,26,.25); }
  .joy-ar { position: absolute; width: 0; height: 0; border: 7px solid transparent; opacity: .45; }
  .joy-ar.n { left: 50%; top: 7px; margin-left: -7px; border-bottom-color: #c7cede; border-top-width: 0; }
  .joy-ar.s { left: 50%; bottom: 7px; margin-left: -7px; border-top-color: #c7cede; border-bottom-width: 0; }
  .joy-ar.w { top: 50%; left: 7px; margin-top: -7px; border-right-color: #c7cede; border-left-width: 0; }
  .joy-ar.e { top: 50%; right: 7px; margin-top: -7px; border-left-color: #c7cede; border-right-width: 0; }
  .joy[data-dir$=",-1"] .joy-ar.n { opacity: 1; border-bottom-color: #ffe054; } .joy[data-dir$=",1"] .joy-ar.s { opacity: 1; border-top-color: #ffe054; }
  .joy[data-dir^="-1"] .joy-ar.w { opacity: 1; border-right-color: #ffe054; } .joy[data-dir^="1,"] .joy-ar.e { opacity: 1; border-left-color: #ffe054; }
  .joy-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle at 35% 30%, #4b5365, #1a1e28 75%); border: 2px solid #5a6276; box-shadow: 0 4px 12px rgba(0,0,0,.55); }
  .joy.on .joy-knob { background: radial-gradient(circle at 35% 30%, #ffdf4f, #c2a10c 78%); border-color: #ffea8a; box-shadow: 0 0 14px rgba(255,213,26,.5), 0 4px 12px rgba(0,0,0,.5); }
  body:not(.no-mctl) .mbtn { display: grid; place-items: center; position: fixed; z-index: 19; width: 52px; height: 52px; padding: 0; border-radius: 50%; transform: translate(-50%, -50%);
    border: 2px solid #c9a24a; background: #0b0d12; color: #e6eaf3; box-shadow: 0 4px 12px rgba(0,0,0,.55), 0 0 0 2px rgba(0,0,0,.45);
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: visible; }
  .mbtn.out { width: 48px; height: 48px; }
  .mbtn .spell-icon { width: 46px !important; height: 46px !important; border-radius: 50%; pointer-events: none; }
  .mbtn.out .spell-icon { width: 42px !important; height: 42px !important; }
  .mbtn .mcd { position: absolute; inset: 2px; border-radius: 50%; pointer-events: none; background: conic-gradient(rgba(4,6,10,.74) calc(var(--cd, 0) * 360deg), transparent 0); }
  .mbtn .mt-n { position: absolute; inset: 0; display: grid; place-items: center; font: 900 17px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 0 4px #000, 0 1px 2px #000; pointer-events: none; }
  .mbtn.active { border-color: #ffd166; box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 10px rgba(255,209,102,.4); }
  .mbtn.active::before, .mbtn.new::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 20px rgba(255,209,102,.75); animation: glowFade 1.2s ease-in-out infinite; }
  .mbtn.new::before { box-shadow: 0 0 0 6px rgba(255,77,94,.35); animation-duration: 1.1s; }
  .mbtn.active .mt-n { color: #ffe9a8; font-size: 14px; }
  .mbtn.nomana { border-color: #4f8fe8; } .mbtn.nomana .spell-icon { filter: saturate(.4) brightness(.7) hue-rotate(180deg); }
  .mbtn.blocked { border-color: #f43f5e; } .mbtn.blocked .spell-icon { filter: grayscale(.85) brightness(.6); }
  .mbtn.press { transform: translate(-50%, -50%) scale(.9); }
  .mbtn.held { transform: translate(-50%, -50%) scale(1.08); border-color: #fff; }
  .mbtn .mnew { display: none; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font: 900 8.5px/13px system-ui, sans-serif; letter-spacing: .5px; font-style: normal;
    padding: 0 5px; border-radius: 999px; background: #ff4d5e; color: #fff; box-shadow: 0 0 0 2px #0b0d12; pointer-events: none; }
  .mbtn.new .mnew { display: block; }
  .mbtn.mt { width: 50px; height: 50px; border-color: #4a5163; background: radial-gradient(circle at 35% 30%, #343b49, #10131a 75%); color: #9aa3b8; }
  .mbtn.mt i { display: grid; place-items: center; margin-top: -6px; pointer-events: none; } .mbtn.mt .ic { width: 22px; height: 22px; stroke-width: 2; }
  .mbtn.mt b { position: absolute; bottom: 7px; font: 900 8px/1 system-ui, sans-serif; letter-spacing: .8px; pointer-events: none; }
  .mbtn.mt em { position: absolute; right: -8px; top: -5px; font: 900 8.5px/14px system-ui, sans-serif; font-style: normal; padding: 0 4px; border-radius: 999px; background: #262c3a; border: 1px solid #3a4152; pointer-events: none; }
  .mbtn.mt.on { border-color: #4ade80; color: #dcfce7; background: radial-gradient(circle at 35% 30%, #22c55e, #14532d 80%); box-shadow: 0 0 12px rgba(74,222,128,.35), 0 4px 12px rgba(0,0,0,.5); }
  .mbtn.mt.on .ic .a { fill: #f0fff4; }
  .mbtn.mt.on em { background: #16a34a; color: #f0fff4; border-color: #4ade80; }
  .win[data-win="charinfo"] { display: none !important; }
  body:not(.no-mctl) .win[data-win="hotbar"] { display: none !important; }
  body:not(.no-mctl) .joy, body:not(.no-mctl) .afab { bottom: calc(74px + env(safe-area-inset-bottom)); }
  body:not(.no-mctl) .apow { bottom: calc(120px + env(safe-area-inset-bottom)); }
  body:not(.no-mctl) .cfab { right: 20px; bottom: calc(360px + env(safe-area-inset-bottom)); }
  body:not(.no-mctl) .world-status { bottom: calc(60px + env(safe-area-inset-bottom)); }
  .mbtn.hira .item-icon, .mbtn.hira img { width: 34px; height: 34px; pointer-events: none; }
  .mbtn.hira { border-color: #ffd23f; background: radial-gradient(circle at 35% 30%, #3a3418, #0b0d12 75%); }
  .mbtn.hira .mt-n { top: auto; bottom: -6px; inset: auto 0 -7px 0; font-size: 10px; height: 14px; }
  .mbtn.hira.nomark { border-color: #8a7a3a; }
  .mlv { display: flex; align-items: baseline; gap: 4px; position: fixed; z-index: 30; left: 6px; top: calc(8px + env(safe-area-inset-top)); padding: 4px 10px 8px; border-radius: 10px;
    background: rgba(13,16,23,.86); border: 1px solid rgba(255,217,50,.45); color: #e6eaf3; box-shadow: 0 4px 12px rgba(0,0,0,.45); font-family: system-ui, sans-serif; }
  .mlv small { font-size: 9px; font-weight: 900; letter-spacing: 1px; color: #ffe46b; }
  .mlv b { font-size: 16px; font-weight: 900; line-height: 1; }
  .mlv em { font-style: normal; font-size: 9.5px; color: #9aa3b8; font-weight: 700; }
  .mlv-bar { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
  .mlv-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd51a, #ffd166); }
  .mlv.up { animation: mlvUp 1.6s ease-out; }
  @keyframes mlvUp { 0% { box-shadow: 0 0 0 0 rgba(255,209,102,.9); transform: scale(1.18); } 60% { box-shadow: 0 0 0 10px rgba(255,209,102,0); } 100% { transform: none; } }
  .tgtbox { top: calc(46px + env(safe-area-inset-top)); }
  .mcard { display: block; position: fixed; z-index: 9850; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #171c28, #0d1018); border: 1px solid rgba(255,209,102,.5);
    box-shadow: 0 10px 30px rgba(0,0,0,.7); pointer-events: none; animation: wmIn .12s ease-out; }
  .mcard.hidden { display: none; }
  .mcard .jcard { width: auto; }
  .mcard .sp-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px 0; }
  .mhint { display: block; position: fixed; z-index: 30; max-width: 200px; padding: 7px 10px; border-radius: 10px; background: rgba(13,16,23,.92); border: 1px solid rgba(255,209,102,.55);
    color: #ffe9a8; font-size: 12px; font-weight: 700; line-height: 1.3; box-shadow: 0 6px 16px rgba(0,0,0,.5); pointer-events: none; transform: translateY(-50%); animation: wmIn .2s ease-out; }
  .mhint.hidden { display: none; }
}
.forge-stones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.forge-stones .chip { display: inline-flex; align-items: center; gap: 4px; }
.forge-stones .chip .item-icon, .forge-stones .chip img { width: 20px; height: 20px; }
.mis-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; }
.mis-bands { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.mis-band { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font: 600 11.5px Inter, sans-serif; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; }
.mis-band small { font-size: 10px; color: var(--muted); }
.mis-band:hover { border-color: var(--orange); color: var(--text); }
.mis-band.on { background: var(--orange); border-color: var(--orange); color: #1a0d00; } .mis-band.on small { color: rgba(26,13,0,.7); }
.mis-band.lock:not(.on) { opacity: .55; }
.mis-list { cursor: grab; } .mis-list.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } .mis-list.dragging .mis-opt { pointer-events: none; }
.mis-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.mis-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--line); --c: #ffe054; }
.mis-pill > i { display: grid; place-items: center; color: var(--c); } .mis-pill > i .ic { width: 13px; height: 13px; } .mis-pill > i .ic .a { fill: var(--c); }
.mis-opt { flex: 0 0 132px; display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--text); cursor: pointer; text-align: left; scroll-snap-align: start; transition: border-color .15s, transform .15s; }
.mis-opt > b { font-size: 11.5px; line-height: 1.2; padding: 0 3px; min-height: 2.4em; }
.mis-opt > span { font-size: 10.5px; color: var(--text-2); padding: 0 3px 2px; }
.mis-opt:hover:not(:disabled) { border-color: var(--orange-2); transform: translateY(-1px); }
.mis-opt.on { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset, 0 0 14px rgba(255,216,40,.25); }
.mis-opt:disabled { opacity: .4; cursor: default; filter: grayscale(.7); }
.mis-art { position: relative; height: 62px; border-radius: 8px; overflow: hidden; isolation: isolate; background: var(--sky, #24324a); }
.mis-art.big { height: 104px; border-radius: 10px; }
.mis-sky { position: absolute; inset: 0; background: var(--sky); z-index: -2; }
.mis-sky::after { content: ""; position: absolute; inset: 0; background: var(--fx, none); }
.mis-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: var(--ground); z-index: -1; box-shadow: 0 -2px 0 rgba(0,0,0,.25); }
.mis-cast { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; justify-content: center; align-items: flex-end; gap: 2px; }
.mis-actor { filter: drop-shadow(0 3px 2px rgba(0,0,0,.55)); }
.mis-actor:nth-child(2) { transform: translateY(-3px); }
.mis-tag { position: absolute; top: 5px; left: 5px; padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 800; color: #0b0d12; background: #8fb3a0; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mis-tag.rC { background: #6fb6ff; } .mis-tag.rB { background: #b98cff; } .mis-tag.rA { background: #ffe054; } .mis-tag.rS { background: #ff5a6b; }
.mis-tag.rSS { background: linear-gradient(135deg, #f5f0ff, #c9a6ff 45%, #ff6aa8); }
.mis-sel { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px; align-items: start; }
.mis-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mis-info p { margin: 0; line-height: 1.4; }
.mis-title { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .mis-title b { font-size: 14px; }
.mis-rank.rS.big, .mis-title .mis-rank { width: auto; }
@media (max-width: 560px) { .mis-sel { grid-template-columns: 1fr; } }
.t-vila { --sky: linear-gradient(#7ec8ff, #cfe9ff 70%); --ground: linear-gradient(#7bbf5a, #4f8f37); --fx: radial-gradient(circle at 82% 22%, #fff6b0 0 8%, transparent 9%), radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.8) 0 9%, transparent 10%); }
.t-nevoa { --sky: linear-gradient(#5d7385, #a9b9c4); --ground: linear-gradient(#6b5a45, #4a3d2f); --fx: linear-gradient(0deg, rgba(230,240,245,.75), transparent 60%), repeating-linear-gradient(90deg, transparent 0 18px, rgba(80,60,40,.6) 18px 21px); }
.t-floresta { --sky: linear-gradient(#173222, #2f5a33); --ground: linear-gradient(#3b5b2a, #22381a); --fx: radial-gradient(ellipse at 10% 100%, #0f2416 0 30%, transparent 31%), radial-gradient(ellipse at 90% 100%, #0f2416 0 34%, transparent 35%), radial-gradient(circle at 50% 10%, rgba(180,255,150,.18), transparent 40%); }
.t-areia { --sky: linear-gradient(#e8cc4f, #f6d38c); --ground: linear-gradient(#d8c46a, #b39f45); --fx: radial-gradient(circle at 75% 35%, rgba(140,122,40,.55) 0 18%, transparent 30%), repeating-linear-gradient(160deg, transparent 0 9px, rgba(255,240,200,.18) 9px 11px); }
.t-som { --sky: linear-gradient(#3b2a52, #8a5a7a); --ground: linear-gradient(#5a4a3a, #3a2f25); --fx: repeating-radial-gradient(circle at 50% 120%, transparent 0 10px, rgba(255,200,255,.12) 10px 12px); }
.t-deserto { --sky: linear-gradient(#c4a82a, #f0d45a 75%); --ground: linear-gradient(#e2cc6b, #b9a33f); --fx: radial-gradient(circle at 18% 28%, #ffe7a8 0 7%, transparent 8%), radial-gradient(ellipse at 70% 100%, #c9b350 0 40%, transparent 41%); }
.t-akatsuki { --sky: linear-gradient(#1d0d12, #4a1620); --ground: linear-gradient(#2c2520, #17130f); --fx: radial-gradient(ellipse at 30% 35%, #c8202b 0 9%, transparent 10%), radial-gradient(ellipse at 38% 30%, #fff 0 5%, transparent 6%), radial-gradient(ellipse at 72% 45%, #c8202b 0 8%, transparent 9%), radial-gradient(ellipse at 79% 41%, #fff 0 4%, transparent 5%); }
.t-chuva { --sky: linear-gradient(#2a3140, #4d5768); --ground: linear-gradient(#55524c, #33302b); --fx: repeating-linear-gradient(105deg, transparent 0 6px, rgba(200,220,255,.28) 6px 7px), radial-gradient(circle at 50% 120%, rgba(255,219,60,.35), transparent 60%); }
.t-neve { --sky: linear-gradient(#8ea8c2, #e4eef7); --ground: linear-gradient(#f2f6fa, #c7d3df); --fx: radial-gradient(circle, rgba(255,255,255,.9) 0 1.5px, transparent 2px) 0 0 / 14px 14px, radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px) 7px 5px / 11px 11px; }
.t-guerra { --sky: linear-gradient(#3a1d14, #a8442a 80%); --ground: linear-gradient(#4a3a2c, #241a12); --fx: radial-gradient(circle at 20% 70%, rgba(255,219,60,.55), transparent 22%), radial-gradient(circle at 80% 60%, rgba(255,216,40,.5), transparent 20%), repeating-linear-gradient(75deg, transparent 0 20px, rgba(0,0,0,.18) 20px 23px); }
.t-lua { --sky: linear-gradient(#0d0b1c, #3b1030); --ground: linear-gradient(#2b2236, #120e18); --fx: radial-gradient(circle at 50% 30%, #ff3b3b 0 13%, #b3122a 14%, transparent 17%), radial-gradient(circle at 50% 30%, transparent 0 4%, rgba(0,0,0,.6) 4.5% 5.5%, transparent 6%); }
.t-kaguya { --sky: linear-gradient(#e8e2ff, #8a7bd0 55%, #2d1f55); --ground: linear-gradient(#efeaff, #b6a8e6); --fx: radial-gradient(circle at 78% 24%, #fff 0 10%, rgba(255,255,255,.4) 11%, transparent 18%), conic-gradient(from 0deg at 50% 120%, transparent, rgba(255,255,255,.25), transparent 20%, rgba(200,170,255,.3), transparent 40%); }
.mis-loot { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-top: 2px; }
.mis-lgrp { display: flex; flex-direction: column; gap: 4px; }
.mis-lhead { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; }
.mis-lhead b { color: var(--orange-2); font-size: 12px; }
.mis-lrar { font-size: 11px; color: var(--text-2); margin-top: 3px; } .mis-lrar .rar { font-weight: 700; }
.mis-lrow { display: flex; gap: 4px; flex-wrap: wrap; }
.mis-drop { position: relative; width: 36px; height: 36px; display: grid; place-items: center; cursor: help; }
.mis-drop .icon-item { width: 30px; height: 30px; }
.mis-drop em { position: absolute; right: -3px; bottom: -4px; font-style: normal; font: 800 9.5px/13px system-ui, sans-serif; padding: 0 3px; border-radius: 4px; background: #0b0d12; color: var(--orange-2); border: 1px solid var(--line-2); }
.mis-mini { display: flex; gap: 3px; padding: 0 3px 2px; }
.mis-mini .mis-drop { width: 24px; height: 24px; border-radius: 6px; }
.mis-mini .mis-drop .icon-item { width: 20px; height: 20px; }
.win-backdrop { position: fixed; inset: 0; z-index: 9200; background: radial-gradient(ellipse at center, rgba(8,10,16,.42), rgba(2,3,6,.72));
  backdrop-filter: blur(5px) saturate(.75); -webkit-backdrop-filter: blur(5px) saturate(.75); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.win-backdrop.on { opacity: 1; pointer-events: auto; }
.win.wmodal { z-index: 9300 !important; max-width: calc(calc(100 * var(--vw)) - 16px); background: linear-gradient(180deg, rgba(24,28,40,.985), rgba(14,17,25,.985));
  border: 1px solid rgba(255,217,50,.55); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 34px rgba(255,213,26,.18), 0 22px 60px rgba(0,0,0,.75); backdrop-filter: none; }
.win.wmodal:not(.closed) { animation: wmIn .16s ease-out; }
@keyframes wmIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.win.wmodal > .win-head { background: linear-gradient(180deg, rgba(255,213,26,.20), rgba(255,213,26,.04)); border-bottom-color: rgba(255,217,50,.35); }
.win.wmodal > .win-head .win-title { color: #ffd9a8; letter-spacing: .04em; text-shadow: 0 0 10px rgba(255,213,26,.35); }
.win.wmodal > .win-head .win-lock { display: none; }
.win[data-win="premium"].wmodal { min-width: min(1000px, calc(calc(100 * var(--vw)) - 16px)); min-height: min(680px, calc(calc(100 * var(--vh)) - 16px)); }
.win.pinned > .win-head { cursor: default; }
.win.pinned > .win-head .win-lock { display: none; }
.win.pinned .rz-s, .win.pinned .rz-se, .win.pinned .rz-sw { display: none; }
.win.pinned .rz-n { height: 8px; }
@media (min-width: 761px) and (min-height: 521px), (min-width: 761px) and (pointer: fine) {
  .cfab { display: flex; align-items: center; gap: 7px; position: absolute; z-index: 25; left: calc(var(--sbl, 0px) + (100% - var(--sbl, 0px) - var(--sbr, 0px)) / 2); bottom: 14px; transform: translateX(-50%);
    height: 38px; padding: 0 16px 0 12px; border-radius: 19px 19px 19px 6px; cursor: pointer; border: 1px solid rgba(255,217,50,.55);
    background: radial-gradient(circle at 30% 20%, #2f3647, #11141c 80%); color: #e6eaf3; font: 700 12px system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.55); }
  .cfab::after { content: "Chat"; }
  .cfab:hover { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,213,26,.15), 0 6px 18px rgba(0,0,0,.55); }
  .cfab.hidden { display: none; }
  .cfab .ic { width: 18px; height: 18px; }
  .cfab em { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font: 800 10.5px/18px system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px #10131a; }
  .cfab em:empty { display: none; }
  .cfab.new { border-color: #6fb6ff; }
  .cfab.new::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 5px rgba(111,182,255,.25); animation: glowFade 2s ease-in-out infinite; }
}
.voc-card.locked > .sprite-box, .voc-card.locked > div:first-child { filter: grayscale(.85) brightness(.7); }
.voc-card.locked::after { content: "🔒"; position: absolute; left: 50%; top: 40px; transform: translateX(-50%); font-size: 20px; filter: drop-shadow(0 2px 3px #000); pointer-events: none; }
.voc-lock-note { margin-bottom: 10px; padding: 8px 10px; border-radius: 9px; font-size: 12px; color: #f6dfb0; background: linear-gradient(90deg, rgba(242,193,78,.16), rgba(242,193,78,.04)); border: 1px solid rgba(242,193,78,.4); }
.btn.btn-vip { background: linear-gradient(180deg, #f6cf62, #c8901f); color: #2a1800; border-color: #f2c14e; }
#panel-premium { padding: 0; height: 100%; display: flex; flex-direction: column; }
#panel-premium > .ps { flex: 1 1 auto; }
.adm-pays { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.adm-pay-row { display: grid; grid-template-columns: auto auto minmax(60px, 1fr) auto auto auto auto auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; }
.adm-pay-row > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-pay-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.adm-pay-row .orange { color: var(--orange); }
@media (max-width: 760px) { .adm-pay-row { grid-template-columns: 1fr 1fr; } }
#panel-premium > .beta-note { flex: none; margin: 10px 10px 0; padding: 8px 12px; }
#panel-premium > .beta-note .beta-note-h { font-size: 13px; margin-bottom: 3px; } #panel-premium > .beta-note .beta-note-b { font-size: 11.5px; line-height: 1.35; }
.win[data-win="premium"] .win-body { padding: 0; }
.ps { display: grid; grid-template-columns: 230px 1fr; min-height: 100%; }
.ps-side { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px; background: linear-gradient(180deg, #10131b, #0b0d13); border-right: 1px solid rgba(255,217,50,.18); }
.ps-bal { padding: 12px; margin-bottom: 10px; border-radius: 12px; background: radial-gradient(circle at 20% 0%, rgba(94,200,255,.18), transparent 60%), #141926; border: 1px solid rgba(94,200,255,.28); }
.ps-bal-lbl { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8fa2c2; }
.ps-bal-n b { font: 900 30px var(--mono); color: #7fd4ff; text-shadow: 0 0 14px rgba(94,200,255,.35); }
.ps-bal-n small { margin-left: 6px; color: #8fa2c2; font-weight: 800; }
.ps-bal-vip { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: 11.5px; color: #b3bacb; }
.ps-bal-vip.on { color: #f2c14e; } .ps-bal-vip .ic { width: 14px; height: 14px; }
.ps-pix { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: 9px; cursor: pointer; font-weight: 800; color: #04161d;
  background: linear-gradient(180deg, #4fe3c3, #1fae8f); border: 1px solid #6ff0d2; box-shadow: 0 4px 14px rgba(31,174,143,.3); }
.ps-pix:hover { filter: brightness(1.08); } .ps-pix .ic { width: 16px; height: 16px; }
.ps-bal-split { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px; font-size: 11px; color: #b3bacb; }
.ps-bal-split .bagv { display: flex; align-items: center; gap: 4px; color: #d8a3ff; }
.ps-bal-ic { width: 14px; height: 14px; image-rendering: pixelated; }
.ps-bal-btns { display: flex; gap: 6px; margin-top: 6px; }
.ps-wd { flex: 1; padding: 7px 4px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 11.5px; color: #e7d6ff;
  background: #1a1326; border: 1px solid #4b2f6b; }
.ps-wd:hover:not(:disabled) { background: #241a35; border-color: #7a4aa8; }
.ps-wd:disabled { opacity: .45; cursor: default; }
.pp-box p { color: #aeb6c7; font-size: 12.5px; margin: 0 0 10px; }
.pp-row { display: flex; align-items: center; gap: 8px; }
.bz-durs { display: flex; flex-wrap: wrap; gap: 4px; }
.pp-row .icon-item { width: 28px; height: 28px; image-rendering: pixelated; }
.pp-n { width: 120px; padding: 7px 8px; border-radius: 8px; background: #0d1016; border: 1px solid #2a3142; color: #e8ecf4; font-weight: 700; }
.pp-row small { color: #b3bacb; }
.pp-out { min-height: 18px; margin-top: 8px; color: #ffe46b; font-size: 12px; }
.ps-cats-lbl { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #6c7590; margin: 4px 6px; text-transform: uppercase; }
.ps-cat { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; background: none; color: #b9c1d4; cursor: pointer; text-align: left; font-weight: 700; font-size: 13px; }
.ps-cat .ic { width: 18px; height: 18px; color: var(--pc); opacity: .85; }
.ps-cat span { flex: 1; }
.ps-cat em { font-style: normal; font-size: 10.5px; font-weight: 800; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.06); color: #b3bacb; text-align: center; }
.ps-cat:hover { background: rgba(255,255,255,.04); color: #fff; }
.ps-cat.on { background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 22%, transparent), transparent); border-color: color-mix(in srgb, var(--pc) 45%, transparent); color: #fff; }
.ps-cat.on em { background: var(--pc); color: #140b00; }
.ps-main { padding: 16px 18px 20px; overflow: auto; min-width: 0; }
.ps-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ps-title > .ic, .ps-title > i .ic { width: 30px; height: 30px; }
.ps-title > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, #10131b); border: 1px solid color-mix(in srgb, var(--pc) 40%, transparent); }
.ps-title b { display: block; font-size: 20px; color: #fff; } .ps-title small { color: #b3bacb; }
.ps-note { color: #aeb6c8; font-size: 12.5px; margin: 0 0 12px; }
.ps-sub { margin: 18px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #b3bacb; }
.ps-perks { margin: 0 0 14px; padding: 12px 14px 12px 30px; border-radius: 10px; background: rgba(242,193,78,.06); border: 1px solid rgba(242,193,78,.25); color: #f0dcae; font-size: 13px; }
.ps-buy { display: inline-flex; align-items: baseline; gap: 4px; padding: 7px 12px; border-radius: 9px; cursor: pointer; border: 1px solid #3a4152; background: #171b26; color: #c7cede; margin-top: auto; }
.ps-buy b { font: 900 16px var(--mono); } .ps-buy small { font-weight: 800; color: #8fa2c2; } .ps-buy span { white-space: nowrap; margin-left: 6px; font-size: 11px; font-weight: 700; color: #b3bacb; }
.ps-buy.can { background: linear-gradient(180deg, #ffdb3d, #e9c10f); border-color: #ffe46b; color: #1d0b00; box-shadow: 0 4px 12px rgba(255,213,26,.3); }
.ps-buy.can small, .ps-buy.can span { color: #3b1700; }
.ps-buy:hover { filter: brightness(1.08); }
.ps-buy.big { padding: 10px 18px; } .ps-buy.big b { font-size: 22px; }
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ps-card { display: flex; flex-direction: column; gap: 7px; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, #171c28, #10131b); border: 1px solid #2a3142; transition: transform .12s, border-color .12s; }
.ps-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pc) 55%, transparent); }
.ps-card > b { color: #fff; font-size: 14px; } .ps-card > small { color: #9aa3b8; font-size: 11.5px; line-height: 1.4; flex: 1; }
.ps-card-art { position: relative; height: 84px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--pc) 25%, transparent), transparent 70%), #0c0f16; border: 1px solid #222838; }
.ps-card-art img { width: 48px; height: 48px; image-rendering: pixelated; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.ps-card-art .ps-svg .ic { width: 44px; height: 44px; color: var(--pc); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pc) 60%, transparent)); }
.ps-card-art em { position: absolute; right: 8px; bottom: 6px; font: 900 13px var(--mono); font-style: normal; color: #ffea8a; text-shadow: 0 0 4px #000; }
.ps-hero { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 18px; border-radius: 16px; position: relative; overflow: hidden;
  background: radial-gradient(circle at 15% 50%, rgba(255,60,60,.28), transparent 55%), linear-gradient(135deg, #2a1015, #120a0e 60%, #0f0c14); border: 1px solid rgba(255,90,95,.55); box-shadow: inset 0 0 40px rgba(255,40,40,.12), 0 8px 30px rgba(0,0,0,.4); }
.ps-hero-art { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: center; }
.ps-hero-art span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(circle, rgba(255,80,80,.35), rgba(30,8,10,.9) 70%); border: 1px solid rgba(255,100,100,.6); box-shadow: 0 0 16px rgba(255,50,50,.3); }
.ps-hero-art img { width: 56px; height: 56px; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.ps-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .14em; color: #fff; background: linear-gradient(90deg, #e3262e, #ffdb3d); box-shadow: 0 0 12px rgba(255,60,60,.5); }
.ps-hero h3 { margin: 6px 0 4px; font-size: 26px; color: #fff; text-shadow: 0 0 18px rgba(255,80,80,.5); }
.ps-hero p { margin: 0 0 10px; color: #e8c7c7; font-size: 12.5px; }
.ps-tot { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ps-tot span { padding: 5px 10px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,120,120,.25); }
.ps-tot small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; color: #d79c9c; text-transform: uppercase; }
.ps-tot b { font: 800 14px var(--mono); color: #fff; }
.ps-hero-buy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ps-hero-buy > span { color: #fff; font-weight: 800; } .ps-hero-buy small { margin-left: 6px; color: #c99; font-weight: 600; text-decoration: line-through; }
.ps-fhero { display: grid; grid-template-columns: 1fr 268px; gap: 18px; padding: 18px; border-radius: 18px; position: relative; overflow: hidden;
  background: radial-gradient(circle at 12% 20%, rgba(255,205,90,.3), transparent 58%), linear-gradient(135deg, #2b2210, #171207 58%, #0f0d13);
  border: 1px solid rgba(255,207,90,.6); box-shadow: inset 0 0 44px rgba(255,219,60,.12), 0 10px 34px rgba(0,0,0,.45); }
.ps-fhero::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 180%; pointer-events: none;
  background: linear-gradient(100deg, transparent 45%, rgba(255,230,160,.12) 50%, transparent 56%); }
.ps-ftag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .16em; color: #2a1c00;
  background: linear-gradient(90deg, #ffd977, #ffd82b); box-shadow: 0 0 14px rgba(255,219,60,.55); }
.ps-fhero h3 { margin: 8px 0 4px; font-size: 28px; color: #fff; text-shadow: 0 0 20px rgba(255,200,80,.55); }
.ps-fhero p { margin: 0 0 12px; color: #ecd9ab; font-size: 12.5px; max-width: 62ch; }
.ps-fvocs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ps-fvoc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px 9px; border-radius: 14px; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, #241d10, #14110c); border: 1px solid rgba(255,207,90,.32); color: #e8dcc0; transition: transform .12s, box-shadow .12s, border-color .12s; }
.ps-fvoc:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.4); border-color: rgba(255,207,90,.7); }
.ps-fvoc.on { border-color: #ffcf5a; box-shadow: 0 0 0 1px #ffcf5a, 0 10px 26px rgba(255,217,50,.25); background: linear-gradient(180deg, #33280f, #191307); }
.ps-fvoc-art { position: relative; width: 100%; height: 104px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(circle at 50% 80%, rgba(255,207,90,.25), #0c0b08 75%); }
.ps-fvoc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .55; }
.ps-fvoc-fig { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); filter: drop-shadow(0 4px 6px rgba(0,0,0,.8)); }
.ps-fvoc-fig img { image-rendering: pixelated; }
.ps-fvoc > b { color: #fff; font-size: 13px; }
.ps-fvoc-pick { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #b9a877; text-transform: uppercase; }
.ps-fvoc.on .ps-fvoc-pick { color: #ffcf5a; }
.ps-fplus { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; }
.ps-fplus i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font: 900 15px var(--mono); font-style: normal;
  color: #2a1c00; background: linear-gradient(180deg, #ffd977, #ffd82b); }
.ps-fplus span { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #ffcf5a; }
.ps-fpieces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ps-fpc { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border-radius: 12px; text-align: center;
  background: rgba(0,0,0,.32); border: 1px solid rgba(255,207,90,.22); }
.ps-fpc-ic { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 12px; cursor: help;
  background: radial-gradient(circle, rgba(255,221,70,.4), rgba(28,20,8,.95) 72%); border: 2px solid #ffcf5a; box-shadow: 0 0 16px rgba(255,217,50,.35), inset 0 0 10px rgba(0,0,0,.6); }
.ps-fpc-ic img { width: 46px; height: 46px; image-rendering: pixelated; filter: drop-shadow(0 3px 5px rgba(0,0,0,.7)); }
.ps-fpc small { font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #c9b47c; }
.ps-fpc b { font-size: 10.5px; color: #fff; line-height: 1.15; }
.ps-fextras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ps-fx { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,207,90,.22); }
.ps-fx-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #ffcf5a;
  background: radial-gradient(circle, rgba(255,221,70,.4), rgba(28,20,8,.95) 72%); border: 2px solid #ffcf5a; box-shadow: 0 0 10px rgba(255,217,50,.3); }
.ps-fx-ic i { display: grid; } .ps-fx-ic svg { width: 17px; height: 17px; }
.ps-fx-tx { display: flex; flex-direction: column; gap: 2px; }
.ps-fx-tx small { font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #c9b47c; }
.ps-fx-tx b { font-size: 12px; color: #fff; }
.ps-fright { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; align-self: start;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.2)); border: 1px solid rgba(255,207,90,.3); }
.ps-fclock { display: flex; align-items: baseline; gap: 7px; color: #ffcf5a; }
.ps-fclock i { width: 16px; height: 16px; display: block; }
.ps-fclock i svg { width: 16px; height: 16px; }
.ps-fclock b { font: 900 18px var(--mono); color: #fff; }
.ps-fclock small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #c9b47c; }
.ps-fprice { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ps-fprice s { font: 700 13px var(--mono); color: #9a8c66; }
.ps-fprice b { font: 900 34px var(--mono); color: #fff; text-shadow: 0 0 18px rgba(255,200,80,.5); line-height: 1; }
.ps-fprice small { font-size: 12px; font-weight: 800; color: #ffcf5a; }
.ps-foff { margin-left: auto; padding: 3px 8px; border-radius: 999px; font: 900 11px var(--mono); color: #0f2a12; background: linear-gradient(180deg, #9be58a, #52c45a); }
.ps-flist { margin: 2px 0 4px; padding-left: 16px; display: grid; gap: 5px; }
.ps-flist li { font-size: 11.5px; color: #e4d7b6; }
.ps-setbar { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; margin-bottom: 14px;
  background: linear-gradient(135deg, #251116, #140b0f 70%); border: 1px solid rgba(255,90,95,.45); }
.ps-setbar-art { display: grid; grid-template-columns: repeat(4, 44px); gap: 5px; }
.ps-setbar-art span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; cursor: help; background: radial-gradient(circle, rgba(255,80,80,.3), rgba(30,8,10,.9) 70%); border: 1px solid rgba(255,100,100,.45); }
.ps-setbar-art span.arma { border-color: #f0d24a; box-shadow: 0 0 0 1px rgba(240,210,74,.45), 0 0 10px rgba(240,210,74,.25); }
.ps-setbar-art img { width: 34px; height: 34px; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.ps-setbar-left { display: flex; flex-direction: column; gap: 8px; }
.ps-wpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ps-wpick-l { grid-column: 1 / -1; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #d79c9c; }
.ps-wpick-b { display: flex; align-items: center; justify-content: center; gap: 2px; height: 28px; padding: 0 4px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #e0bdbd; cursor: pointer;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,120,120,.25); }
.ps-wpick-b img { width: 22px; height: 22px; image-rendering: pixelated; }
.ps-wpick-b:hover { border-color: rgba(255,140,140,.6); color: #fff; }
.ps-wpick-b.on { color: #fff; border-color: #f0d24a; background: linear-gradient(180deg, rgba(240,210,74,.22), rgba(60,30,10,.6)); }
.ps-setbar-top { display: flex; align-items: center; gap: 8px; }
.ps-setbar-top b { color: #fff; font-size: 16px; }
.ps-tag.sm { padding: 1px 7px; font-size: 9px; letter-spacing: .1em; }
.ps-setbar-txt small { display: block; margin: 3px 0 6px; color: #e0bdbd; font-size: 11.5px; }
.ps-setbar .ps-tot { margin-bottom: 0; }
.ps-setbar-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ps-setbar-buy > span { color: #fff; font-weight: 800; font-size: 12px; } .ps-setbar-buy small { margin-left: 6px; color: #c99; font-weight: 600; text-decoration: line-through; }
@media (max-width: 900px) {
  .ps-fhero { grid-template-columns: 1fr; }
  .ps-setbar { grid-template-columns: 1fr; }
  .ps-setbar-art { grid-template-columns: repeat(8, minmax(0, 40px)); }
  .ps-setbar-art img { width: 30px; height: 30px; }
  .ps-setbar-buy { align-items: flex-start; }
}
.ps-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.ps-pc { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 12px 14px; border-radius: 14px; text-align: center; position: relative;
  background: linear-gradient(180deg, #24121a, #120c12); border: 1px solid rgba(255,90,95,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: transform .12s, box-shadow .12s; }
.ps-pc:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255,90,95,.8), 0 10px 24px rgba(255,40,40,.2); }
.ps-pc-slot { align-self: stretch; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #ff8d8f; }
.ps-pc-ic { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 14px; cursor: help;
  background: radial-gradient(circle, rgba(255,70,70,.45), rgba(40,8,12,.95) 72%); border: 2px solid #ff4d55; box-shadow: 0 0 18px rgba(255,50,60,.45), inset 0 0 12px rgba(0,0,0,.6); }
.ps-pc-ic img { width: 60px; height: 60px; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.ps-pc > b { color: #fff; font-size: 13px; min-height: 2.4em; display: grid; place-items: center; }
.ps-pc-st { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.ps-pc-st span { font: 700 11px var(--mono); color: #ffe0e0; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.4); }
.ps-pc-st small { font-family: system-ui, sans-serif; font-weight: 800; font-size: 9px; color: #d08f8f; margin-right: 3px; }
.sg-buy-fig { display: grid; place-items: center; margin-bottom: 10px; padding: 10px; border-radius: 14px;
  background: radial-gradient(circle at 50% 78%, rgba(155,123,255,.26), rgba(11,9,18,.9) 74%); border: 1px solid rgba(155,123,255,.35); }
.sg-buy-fig img { image-rendering: pixelated; filter: drop-shadow(0 5px 7px rgba(0,0,0,.8)); }
.ps-sagas { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 12px; }
.ps-saga { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 12px 14px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, #1d1630, #110d1c); border: 1px solid rgba(155,123,255,.42); transition: transform .12s, box-shadow .12s; }
.ps-saga:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(155,123,255,.8), 0 10px 24px rgba(120,80,255,.2); }
.ps-saga.have { border-color: rgba(123,228,149,.45); }
.ps-saga-art { width: 100%; height: 118px; display: grid; place-items: center; border-radius: 12px;
  background: radial-gradient(circle at 50% 78%, rgba(155,123,255,.28), #0b0912 74%); }
.ps-saga-art img { image-rendering: pixelated; filter: drop-shadow(0 5px 7px rgba(0,0,0,.8)); }
.ps-saga > b { color: #fff; font-size: 14px; } .ps-saga > small { color: #a79bc8; font-size: 11px; }
.ps-saga-no { font-size: 11px; padding: 6px 10px; border-radius: 9px; font-weight: 700; color: #a79bc8; background: rgba(155,123,255,.08); border: 1px solid rgba(155,123,255,.3); }
.ps-vocs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ps-voc { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 10px 12px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, #221c10, #12100b); border: 1px solid rgba(242,193,78,.4); transition: transform .12s, box-shadow .12s; }
.ps-voc:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(242,193,78,.8), 0 10px 22px rgba(242,193,78,.15); }
.ps-voc.have { border-color: rgba(123,228,149,.5); background: linear-gradient(180deg, #13201a, #0d130f); }
.ps-voc-art { position: relative; width: 100%; height: 110px; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 80%, rgba(242,193,78,.25), #0c0b08 75%); }
.ps-voc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .55; }
.ps-voc-fig { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); filter: drop-shadow(0 4px 6px rgba(0,0,0,.8)); }
.ps-voc > b { color: #fff; font-size: 15px; } .ps-voc > small { color: #b4a888; font-size: 11px; }
.ps-have { font-size: 11.5px; padding: 6px 12px; border-radius: 9px; font-weight: 800; color: #7be495; background: rgba(123,228,149,.1); border: 1px solid rgba(123,228,149,.4); }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .ps { grid-template-columns: 1fr; }
  .ps-side { border-right: 0; border-bottom: 1px solid rgba(255,217,50,.18); }
  .ps-cat { display: inline-flex; } .ps-side { flex-direction: row; flex-wrap: wrap; } .ps-bal { width: 100%; } .ps-cats-lbl { display: none; }
  .ps-hero { grid-template-columns: 1fr; padding: 12px; }
  .ps-hero-art { grid-template-columns: repeat(4, 1fr); }
  .ps-hero-art span { aspect-ratio: auto; height: 58px; } .ps-hero-art img { width: 40px; height: 40px; }
  .ps-hero h3 { font-size: 20px; }
  .ps-bal { padding: 10px; margin-bottom: 4px; } .ps-bal-n b { font-size: 22px; }
  .ps-cat { padding: 6px 8px; font-size: 12px; }
  .ps-pieces, .ps-vocs { grid-template-columns: repeat(2, 1fr); }
}
.bt-chips { flex-wrap: wrap; }
.bt-opts { display: flex; gap: 4px; width: 100%; margin-top: 4px; align-items: center; }
.bt-sort { flex: 1; min-width: 0; height: 24px; padding: 0 6px; font-size: 11px; border-radius: 7px; background: #11141c; color: #c7cede; border: 1px solid #2c3343; }
.bt-hide { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 11px; font-weight: 700; cursor: pointer; background: #11141c; color: #b3bacb; border: 1px solid #2c3343; }
.bt-hide .ic { width: 13px; height: 13px; }
.bt-hide.on { color: #ffcf9a; border-color: rgba(255,213,26,.6); background: rgba(255,213,26,.12); text-decoration: line-through; text-decoration-color: rgba(255,213,26,.7); }
.modal.modal-settings .modal-box { width: min(860px, calc(96 * var(--vw))); height: min(620px, calc(90 * var(--vh))); display: flex; flex-direction: column; padding-bottom: 0; }
.modal.modal-settings #modal-body { flex: 1; min-height: 0; }
.st { display: grid; grid-template-columns: 190px 1fr; height: 100%; margin: 0 -16px; border-top: 1px solid rgba(255,217,50,.2); }
.st-nav { display: flex; flex-direction: column; gap: 3px; padding: 12px 8px; background: #0c0f15; border-right: 1px solid rgba(255,217,50,.15); }
.st-nav button { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; border: 1px solid transparent; background: none; color: #aeb6c8; font-weight: 700; font-size: 13px; cursor: pointer; text-align: left; }
.st-nav button .ic { width: 17px; height: 17px; opacity: .8; }
.st-nav button:hover { background: rgba(255,255,255,.04); color: #fff; }
.st-nav button.on { color: #fff; background: linear-gradient(90deg, rgba(255,213,26,.22), transparent); border-color: rgba(255,213,26,.45); }
.st-nav button.on .ic { color: var(--orange); opacity: 1; }
.st-pane { padding: 14px 18px 18px; overflow: auto; min-width: 0; }
.st-h { margin: 0 0 12px; font-size: 18px; color: #fff; }
.st-group { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: #121620; border: 1px solid #262c3a; }
.st-gtitle { margin-bottom: 8px; font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #ffe15a; }
.st-sw span small { display: block; font-size: 11px; color: #b3bacb; font-weight: 500; margin-top: 2px; }
.st-sw + .st-sw { margin-top: 6px; }
.st-hint { font-size: 11.5px; color: #b3bacb; margin-top: 6px; line-height: 1.45; }
.st-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: #c2c9d8; line-height: 1.55; }
.st-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.st-key { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #c2c9d8; }
.st-key kbd { flex: none; min-width: 120px; padding: 3px 8px; border-radius: 6px; font: 700 11px var(--mono); color: #ffd9a8; background: #1a1f2b; border: 1px solid #343c50; border-bottom-width: 2px; text-align: center; }
@media (max-width: 760px) { .st { grid-template-columns: 1fr; } .st-nav { flex-direction: row; overflow-x: auto; } .st-nav button span { display: none; } .st-keys { grid-template-columns: 1fr; } }
.pf-hero { position: relative; display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 16px; border-radius: 16px; overflow: hidden; min-height: 190px;
  background: radial-gradient(circle at 12% 70%, color-mix(in srgb, var(--cc) 30%, transparent), transparent 55%), linear-gradient(120deg, #1a1f2c, #0f1219 70%);
  border: 1px solid color-mix(in srgb, var(--cc) 45%, #2a3142); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 26px rgba(0,0,0,.35); }
.pf-portrait { position: absolute; right: -10px; top: -10px; height: calc(100% + 20px); opacity: .28; mask-image: linear-gradient(90deg, transparent, #000 45%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); pointer-events: none; }
.pf-fig { position: relative; display: grid; place-items: end center; }
.pf-ped { position: absolute; left: 50%; bottom: 6px; width: 130px; height: 30px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--cc) 55%, transparent), transparent 70%); filter: blur(2px); }
.pf-fig .sprite-box { position: relative; background: none; border: 0; filter: drop-shadow(0 8px 10px rgba(0,0,0,.6)); }
.pf-id { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pf-lv { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe15c, #c9a60c 70%); border: 2px solid #ffd29a; box-shadow: 0 0 18px rgba(255,213,26,.5); color: #2a1000; }
.pf-lv small { font-size: 8.5px; font-weight: 900; letter-spacing: .1em; margin-bottom: -6px; } .pf-lv b { font: 900 21px var(--mono); }
.pf-name { font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); padding-right: 70px; }
.pf-sub { display: flex; align-items: center; gap: 8px; color: #c7cede; font-weight: 700; }
.pf-vip { padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 900; color: #2a1800; background: linear-gradient(180deg, #f6cf62, #c8901f); }
.pf-rank { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #e8d6b8; flex-wrap: wrap; }
.pf-rank img { width: 22px; height: 22px; } .pf-rank small { color: #b3bacb; }
.pf-jin { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #ffd0a8; background: rgba(255,214,30,.18); border: 1px solid rgba(255,219,60,.5); }
.pf-bars { display: grid; gap: 6px; margin-top: 4px; max-width: 460px; }
.pf-bar-top { display: flex; justify-content: space-between; font-size: 11px; color: #aeb6c8; } .pf-bar-top b { font-family: var(--mono); color: #e6eaf3; font-weight: 700; }
.pf-bar-trk { height: 8px; border-radius: 999px; background: rgba(0,0,0,.45); overflow: hidden; border: 1px solid rgba(255,255,255,.06); }
.pf-bar-trk i { display: block; height: 100%; border-radius: inherit; }
.pf-bar.hp i { background: linear-gradient(90deg, #c2263a, #ff5a64); } .pf-bar.ck i { background: linear-gradient(90deg, #2563c9, #5ec8ff); } .pf-bar.xp i { background: linear-gradient(90deg, #c9a710, #f2c14e); }
.pf-acts { display: flex; gap: 6px; margin-top: 4px; }
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.pf-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #121620; border: 1px solid #262c3a; }
.pf-tile > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); }
.pf-tile > i .ic { width: 20px; height: 20px; }
.pf-tile small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #b3bacb; }
.pf-tile b { font: 800 15px var(--mono); color: #fff; } .pf-tile em { display: block; font-style: normal; font-size: 10.5px; color: #b3bacb; }
.pf-tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid #262c3a; }
.pf-tabs button { padding: 8px 14px; border: 0; background: none; color: #b3bacb; font-weight: 800; font-size: 12.5px; letter-spacing: .04em; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pf-tabs button:hover { color: #fff; } .pf-tabs button.on { color: var(--orange); border-bottom-color: var(--orange); }
.pf-cls { padding: 8px 12px; border-radius: 10px; color: #c7cede; background: color-mix(in srgb, var(--cc) 10%, #121620); border-left: 3px solid var(--cc); }
.pf-card { background: #121620; border-color: #262c3a; }
.pf-sagas { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-saga { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 10px; background: #0c0f16; border: 1px solid #262c3a; }
.pf-saga.lock { opacity: .4; } .pf-saga.on { border-color: var(--orange); box-shadow: 0 0 0 1px rgba(255,213,26,.4); }
.pf-saga small { font-size: 10.5px; color: #b3bacb; }
.pf-best { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pf-mon { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 10px; background: #0c0f16; border: 1px solid #222838; text-align: center; }
.pf-mon b { font-size: 11.5px; color: #e6eaf3; } .pf-mon small { font-size: 10.5px; color: #b3bacb; }
@media (max-width: 760px) { .pf-hero { grid-template-columns: 1fr; } .pf-fig { height: 120px; } }
.voc-lock-note.ok { color: #c8f5d2; background: rgba(123,228,149,.1); border-color: rgba(123,228,149,.4); }
.ps-voc-btns { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: auto; }
.ps-voc-btns .ps-buy { justify-content: center; padding: 6px 8px; }
.ps-buy.ghost { background: transparent; }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .win.wmodal:not([data-win="minimap"]):not([data-win="hotbar"]):not([data-win="vitals"]) { height: min(calc(62 * var(--vh)), calc(calc(100 * var(--vh)) - 64px - env(safe-area-inset-bottom) - env(safe-area-inset-top))) !important; max-height: none !important;
    max-width: none; top: auto !important; bottom: calc(58px + env(safe-area-inset-bottom)) !important; border-radius: 14px 14px 0 0; }
  .win.wmodal[data-win="hunt"]:not([data-win="minimap"]):not([data-win="hotbar"]):not([data-win="vitals"]) { height: min(calc(80 * var(--vh)), calc(calc(100 * var(--vh)) - 64px - env(safe-area-inset-bottom) - env(safe-area-inset-top))) !important; }
}
.modal.modal-vc .modal-box { width: min(480px, calc(94 * var(--vw))); border: 1px solid rgba(242,193,78,.55); box-shadow: 0 0 0 1px #000, 0 0 40px rgba(242,193,78,.15), 0 20px 60px rgba(0,0,0,.8); }
.vc-box { display: flex; flex-direction: column; gap: 14px; }
.vc-swap { display: flex; align-items: center; justify-content: center; gap: 14px; }
.vc-side { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 140px; padding: 10px; border-radius: 12px; background: #121620; border: 1px solid #2a3142; }
.vc-side img { width: 96px; height: 94px; object-fit: cover; border-radius: 8px; }
.vc-side b { color: #fff; font-size: 15px; }
.vc-side.from { opacity: .75; }
.vc-side.to { border-color: rgba(242,193,78,.7); background: linear-gradient(180deg, #2a2210, #14110a); box-shadow: 0 0 18px rgba(242,193,78,.25); }
.vc-arrow { font-size: 26px; color: #f2c14e; text-shadow: 0 0 10px rgba(242,193,78,.6); }
.vc-lead { margin: 0; text-align: center; font-size: 14px; color: #d6dbe6; }
.vc-to { color: #f6cf62; } .vc-price { color: #7fd4ff; font-family: var(--mono); }
.vc-list { margin: 0; padding: 10px 12px; list-style: none; display: grid; gap: 6px; border-radius: 10px; background: #0f131b; border: 1px solid #232a38; font-size: 12.5px; color: #c2c9d8; }
.vc-list li { display: flex; gap: 8px; align-items: flex-start; }
.vc-list li::before { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.vc-list li.keep::before { content: "✔"; color: #7be495; background: rgba(123,228,149,.14); }
.vc-list li.reset::before { content: "↺"; color: #ffe15c; background: rgba(255,213,26,.14); }
.vc-btns { display: flex; justify-content: flex-end; gap: 8px; }
.vc-ok { background: linear-gradient(180deg, #f6cf62, #c8901f); color: #2a1800; border-color: #f2c14e; font-weight: 800; }
.vs-look { display: flex; gap: 12px; align-items: center; margin: 0 0 10px; padding: 10px; border-radius: 12px;
  border: 1px solid rgba(242,193,78,.4); background: radial-gradient(120% 140% at 0% 0%, rgba(242,193,78,.14), transparent 60%), linear-gradient(135deg, #1b1710, #11141c 70%); }
.vs-stage { flex: none; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 10px;
  background: radial-gradient(58% 58% at 50% 72%, rgba(242,193,78,.2), transparent 72%); }
.vs-info { display: grid; gap: 7px; min-width: 0; }
.vs-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vs-head b { color: #f6cf62; font-size: 15px; }
.vs-lead { margin: 0; font-size: 13px; color: #d6dbe6; }
.vs-look .vc-list { font-size: 11.5px; }
.vip-badge.sm { position: static; }
@media (max-width: 520px) { .vs-look { flex-direction: column; text-align: left; } }
.win[data-win="hotbar"] .jutsu-bar { justify-content: safe center; }
.win[data-win="hotbar"] .win-body { display: flex; justify-content: center; }
.mis-hero { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,216,40,.45); background: radial-gradient(120% 140% at 0% 0%, rgba(255,213,26,.22), transparent 55%), linear-gradient(135deg, #1b1410, #11141c 70%); }
.mis-hero::after { content: ""; position: absolute; right: -26px; top: -30px; width: 130px; height: 130px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,225,90,.07) 0 12deg, transparent 12deg 24deg); pointer-events: none; }
.mis-hero-ic { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #ffd9b0;
  background: radial-gradient(circle at 35% 30%, #ffdb3c, #9a7f08 80%); border: 1px solid #ffe46b; box-shadow: 0 0 14px rgba(255,213,26,.35); }
.mis-hero-ic .ic { width: 28px; height: 28px; } .mis-hero-ic .ic .a { fill: #fff3d6; }
.mis-hero-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.mis-hero-txt b { font-size: 15px; letter-spacing: .4px; color: #ffcf99; text-transform: uppercase; }
.mis-hero-txt span { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.mis-ladder { display: flex; gap: 3px; flex: 0 0 auto; position: relative; z-index: 1; }
.mis-ladder .mis-rank { min-width: 20px; height: 20px; font-size: 11px; box-shadow: 0 2px 6px rgba(0,0,0,.45); }
.mis-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.mis-feat { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); --c: #ffe054; }
.mis-feat > i { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--c);
  background: color-mix(in srgb, var(--c) 16%, #0d1017); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.mis-feat > i .ic { width: 18px; height: 18px; } .mis-feat > i .ic .a { fill: var(--c); }
.mis-feat > div { display: flex; flex-direction: column; min-width: 0; }
.mis-feat b { font-size: 12px; color: var(--text); } .mis-feat span { font-size: 10.5px; color: var(--text-2); line-height: 1.25; }
.mis-feat.f-time, .mis-pill.f-time { --c: #6fb6ff; } .mis-pill.f-exp { --c: #b98cff; } .mis-pill.f-gear { --c: #ffe054; } .mis-pill.f-stone { --c: #ff6a7a; } .mis-pill.f-elo { --c: #ffe15c; } .mis-pill.f-top { --c: #e8d2ff; border-color: rgba(201,166,255,.4); }
.mis-char { grid-template-columns: 104px 1fr; align-items: stretch; gap: 10px; position: relative; overflow: hidden; }
.mis-side { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 10px; text-align: center; min-width: 0;
  background: linear-gradient(180deg, rgba(255,216,40,.10), rgba(255,255,255,.02)); border: 1px solid var(--line); }
.mis-side .mis-face { width: 64px; height: 64px; margin-bottom: 3px; border: 2px solid #3a4152; box-shadow: 0 0 0 3px rgba(255,216,40,.12), 0 4px 10px rgba(0,0,0,.45);
  background: radial-gradient(circle at 50% 35%, #33405a, #10131a 72%); }
.mis-char.me .mis-side .mis-face { border-color: var(--orange); }
.mis-name { font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mis-voc { font-size: 11px; color: var(--text-2); }
.mis-lv { font-size: 10.5px; color: var(--text-2); padding: 1px 7px; border-radius: 999px; background: #0d1017; border: 1px solid var(--line-2); }
.mis-lv b { color: var(--gold, #ffd166); font-family: var(--mono); }
.mis-st { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; color: #b7c0d4; background: #1d2230; border: 1px solid #343b4c; }
.mis-st .ic { width: 12px; height: 12px; stroke-width: 2; }
.mis-st.s-free { color: #b7f7cf; border-color: rgba(74,222,128,.5); background: rgba(74,222,128,.10); }
.mis-st.s-online { color: #ffcf99; border-color: rgba(255,216,40,.55); background: rgba(255,216,40,.12); }
.mis-st.s-mission { color: #bfe0ff; border-color: rgba(111,182,255,.55); background: rgba(111,182,255,.12); }
.mis-st.s-done { color: #fff3c4; border-color: rgba(255,209,102,.7); background: rgba(255,209,102,.15); }
.mis-st.s-dead { color: #ffb4bd; border-color: rgba(244,63,94,.55); background: rgba(244,63,94,.12); }
@media (max-width: 560px) { .mis-char { grid-template-columns: 1fr; } .mis-side { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; } .mis-side .mis-face { width: 48px; height: 48px; margin: 0; } .mis-ladder { display: none; } }
.ps-buy { align-items: center; gap: 8px; padding: 5px 12px 5px 5px; }
.ps-buy .ps-price { display: inline-flex; align-items: baseline; gap: 3px; font-style: normal; padding: 3px 8px; border-radius: 7px; background: #0b0d12; border: 1px solid #3a4152; }
.ps-buy .ps-price b { color: #ffd166; } .ps-buy .ps-price small { color: #ffe46b; font-size: 10px; }
.ps-buy span { margin-left: 0; font-size: 12px; }
.ps-buy.can .ps-price { background: rgba(20,8,0,.82); border-color: rgba(255,230,200,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.ps-buy.can .ps-price b { color: #ffe08a; } .ps-buy.can .ps-price small { color: #ffe46b; }
.ps-buy.can span { color: #fff; text-shadow: 0 1px 2px rgba(80,25,0,.7); font-weight: 900; letter-spacing: .3px; }
.ps-buy.big { padding: 6px 16px 6px 6px; } .ps-buy.big .ps-price { padding: 4px 10px; }
@media (min-width: 761px) and (min-height: 521px), (min-width: 761px) and (pointer: fine) {
  .win[data-win="premium"] .win-body { overflow: hidden; }
  #panel-premium { overflow: hidden; }
  .ps { height: auto; flex: 1 1 0; min-height: 0; }
  .ps-side { overflow-y: auto; min-height: 0; }
  .ps-main { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 0; }
  .ps-title { position: sticky; top: 0; z-index: 3; margin: 0 -18px 14px; padding: 14px 18px 12px; background: linear-gradient(180deg, #0f121a 80%, rgba(15,18,26,.0)); }
}
.set-catalog { gap: 10px; }
.sc-intro { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,216,40,.35);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,213,26,.16), transparent 55%), #11141c; }
.sc-intro-top { display: flex; gap: 10px; align-items: center; }
.sc-intro-top > div { display: flex; flex-direction: column; gap: 2px; }
.sc-intro-top b { color: #ffcf99; text-transform: uppercase; letter-spacing: .4px; font-size: 13.5px; } .sc-intro-top span { color: var(--text-2); font-size: 12px; }
.sc-intro-ic { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #fff3d6; background: radial-gradient(circle at 35% 30%, #ffdb3c, #9a7f08 80%); border: 1px solid #ffe46b; }
.sc-intro-ic .ic { width: 24px; height: 24px; } .sc-intro-ic .ic .a { fill: #fff3d6; }
.sc-srcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.sc-src { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); --c: #ffe054; }
.sc-src > i, .sc-row-h > i { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, #0d1017); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.sc-src .ic, .sc-row-h .ic { width: 16px; height: 16px; } .sc-src .ic .a, .sc-row-h .ic .a { fill: var(--c); }
.sc-src > div { display: flex; flex-direction: column; min-width: 0; } .sc-src b { font-size: 12px; } .sc-src span { font-size: 10.5px; color: var(--text-2); line-height: 1.25; }
.s-hunt { --c: #4ade80; } .s-boss { --c: #ff6a7a; } .s-mis { --c: #6fb6ff; } .s-shop { --c: #ffd166; }
.sc-rars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sc-rars-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-2); }
.sc-rar { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, #0d1017); border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent); }
.sc-rar b, .rar-lbls b { width: 8px; height: 8px; border-radius: 2px; background: var(--rc); box-shadow: 0 0 6px var(--rc); }
.sc-rar em { font-style: normal; color: var(--text-2); font-weight: 600; }
.sc-note { font-size: 11px; color: var(--text-2); line-height: 1.4; }
.set-card { gap: 8px; padding: 10px 12px; border-radius: 12px; }
.set-card.shop { border-color: rgba(255,59,59,.5); background: linear-gradient(180deg, rgba(255,59,59,.08), transparent 60%), var(--bg-2); }
.sc-head { display: flex; align-items: center; gap: 10px; }
.sc-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle, #2a3142, #10131a); border: 1px solid var(--line-2); }
.sc-t { display: flex; flex-direction: column; flex: 1; min-width: 0; } .sc-t b { font-size: 14.5px; } .sc-t small { color: var(--text-2); }
.sc-have { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11px; color: var(--text-2); }
.sc-have-bar { width: 80px; height: 5px; border-radius: 3px; background: #0b0d12; overflow: hidden; } .sc-have-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold, #ffd166)); }
.sc-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; padding: 7px 9px; border-radius: 10px; background: rgba(0,0,0,.18); border: 1px solid var(--line); border-left: 3px solid var(--c); }
.sc-row-h { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sc-row-h > i { width: 22px; height: 22px; border-radius: 6px; } .sc-row-h .ic { width: 13px; height: 13px; }
.sc-row-h b { font-size: 12px; color: var(--c); } .sc-row-h span { font-size: 11px; color: var(--text-2); }
.sc-pcs { display: flex; gap: 4px; flex-wrap: wrap; }
.sc-pcs .ibox { width: 36px; height: 36px; display: grid; place-items: center; background: #0c0f16; border: 1px solid var(--line-2); border-radius: 7px; cursor: pointer; }
.sc-pcs .ibox img { width: 32px; height: 32px; image-rendering: pixelated; }
.sc-mis { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-mis-c { display: inline-flex; gap: 5px; align-items: center; font-size: 11px; color: var(--text-2); }
.sc-mis-c .mis-rank { min-width: 18px; height: 18px; font-size: 10px; }
.rar-odds { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rar-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: #0b0d12; gap: 1px; }
.rar-bar i { display: block; min-width: 3px; }
.rar-lbls { display: flex; flex-wrap: wrap; gap: 2px 9px; }
.rar-lbls span { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-2); }
.rar-lbls span.off { opacity: .35; text-decoration: line-through; }
.rar-lbls em { font-style: normal; font-weight: 800; color: var(--rc); font-family: var(--mono); }
@media (max-width: 560px) { .sc-row { grid-template-columns: 1fr; } }
.hd-set { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(74,222,128,.4);
  background: radial-gradient(120% 140% at 0% 0%, rgba(74,222,128,.12), transparent 55%), #11141c; }
.hd-set-h { grid-column: 1 / -1; display: flex; gap: 9px; align-items: center; }
.hd-set-h > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #4ade80; background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.45); }
.hd-set-h .ic { width: 18px; height: 18px; } .hd-set-h .ic .a { fill: #4ade80; }
.hd-set-h > div { display: flex; flex-direction: column; } .hd-set-h b { font-size: 13.5px; color: #b7f7cf; } .hd-set-h span { font-size: 11px; color: var(--text-2); }
.hd-set-pcs { display: flex; gap: 4px; }
.hd-set-pcs .li, .hd-mon .loot-strip .li { cursor: help; }
.hd-set-r { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hd-set-r small { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-2); }
.hd-set-n { grid-column: 1 / -1; font-size: 10.5px; color: var(--text-2); }
.hd-set-h .chip, .hd-set-up .chip { padding: 0 7px; font-size: 10px; }
.hd-set-up { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.hd-set-up > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hd-set-up b { font-size: 12px; color: #cfe3ff; } .hd-set-up span { font-size: 11px; color: var(--text-2); }
.hd-rar { display: flex; flex-wrap: wrap; gap: 4px; }
.hd-rar span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--rc);
  background: color-mix(in srgb, var(--rc) 12%, #0d1017); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); }
.hd-rar b { width: 7px; height: 7px; border-radius: 2px; background: var(--rc); box-shadow: 0 0 5px var(--rc); }
.hd-rar em { font-style: normal; color: #e8ecf5; font-family: var(--mono); font-size: 10px; }
.hd-mons { gap: 6px; }
.hd-mon { align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); }
.hd-face { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #2f3a52, #0f1219 75%); border: 1px solid var(--line-2); }
.hd-mb { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.hd-mt { display: flex; align-items: center; gap: 7px; } .hd-mt b { font-size: 13.5px; }
.hd-lv { font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: #0d1017; border: 1px solid var(--line-2); color: var(--gold, #ffd166); font-family: var(--mono); }
.hd-stats { display: flex; gap: 10px; font-size: 11px; } .hd-stats .hp { color: #ff8a9a; } .hd-stats .xp { color: #c9a6ff; }
.hd-sep { width: 1px; align-self: stretch; background: var(--line-2); margin: 2px 3px; }
.ev-soon { display: flex; align-items: center; gap: 7px; margin-top: 6px; padding: 5px 10px; border-radius: 9px; cursor: pointer;
  background: linear-gradient(90deg, rgba(255,213,26,.18), rgba(255,213,26,.05)); border: 1px solid rgba(255,213,26,.5); }
.ev-soon .ic { width: 15px; height: 15px; } .ev-soon .ic .a { fill: var(--orange-2); }
.ev-soon b { font-size: 12.5px; color: #ffd9b8; } .ev-soon span { font-size: 11.5px; color: var(--text-2); }
.ev-soon em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--orange-2); text-transform: uppercase; }
.ev-soon:hover { border-color: var(--orange); }
.wb-head { display: flex; gap: 10px; align-items: center; margin: 12px 0 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(232,62,77,.4);
  background: radial-gradient(120% 140% at 0% 0%, rgba(232,62,77,.16), transparent 55%), #12141c; }
.wb-head > i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #ffd0d5; background: radial-gradient(circle at 35% 30%, #ff5a6b, #7a1020 80%); border: 1px solid #ff8a96; }
.wb-head > i .ic { width: 20px; height: 20px; }
.wb-head > div { display: flex; flex-direction: column; gap: 2px; } .wb-head b { color: #ffb4bd; text-transform: uppercase; letter-spacing: .4px; font-size: 13px; } .wb-head span { color: var(--text-2); font-size: 12px; }
.wb-rbox { margin: 4px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.wb-rbox summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; font-size: 12.5px; }
.wb-rbox summary::-webkit-details-marker { display: none; }
.wb-rbox summary > i { display: grid; place-items: center; color: var(--orange-2); } .wb-rbox summary .ic { width: 16px; height: 16px; }
.wb-rmore { margin-left: auto; font-size: 11px; color: var(--text-2); } .wb-rbox[open] .wb-rmore { visibility: hidden; }
.wb-rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px; padding: 0 10px 10px; }
.wb-rule { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border-radius: 8px; background: rgba(0,0,0,.22); border: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); line-height: 1.4; }
.wb-rule > i { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--orange-2); background: rgba(255,216,40,.1); }
.wb-rule .ic { width: 13px; height: 13px; }
.wb-rule.safe { border-color: rgba(74,222,128,.45); color: #b7f7cf; } .wb-rule.safe > i { color: #4ade80; background: rgba(74,222,128,.12); }
.wb-card { grid-template-columns: 76px 1fr auto; padding: 10px 14px 10px 10px; background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 70%), var(--bg-2); }
.wb-card.off { opacity: .72; }
.wb-face { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3a2a34, #0f1016 72%); border: 2px solid #4a3a44; box-shadow: 0 0 0 3px rgba(232,62,77,.08), 0 4px 10px rgba(0,0,0,.45); }
.wb-card.alive .wb-face { border-color: #ff5a6b; box-shadow: 0 0 14px rgba(255,90,107,.45); }
.wb-card.juubi .wb-face { border-color: #a578e6; background: radial-gradient(circle at 50% 40%, #3a2a55, #0f1016 72%); }
.wb-card .wb-title { font-size: 14.5px; }
.wb-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.wb-lv, .wb-when { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: #0d1017; border: 1px solid var(--line-2); color: var(--text-2); }
.wb-lv { color: #ffd166; } .wb-when .ic { width: 11px; height: 11px; }
.forge-dragon { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; font-size: 0; border-radius: 50%; padding: 6px;
  background: radial-gradient(circle at 40% 35%, #4a1f0c, #160806 75%); border: 2px solid #c2a10c; box-shadow: 0 0 16px rgba(255,213,26,.45), inset 0 0 10px rgba(255,219,60,.25); filter: none; }
.forge-dragon svg { width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(255,216,40,.6)); }
.ps-buy .ps-price b { font-family: system-ui, "Segoe UI", Roboto, sans-serif; font-weight: 900; font-variant-numeric: tabular-nums lining-nums; }
.tk-hero { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,216,40,.45); background: radial-gradient(120% 140% at 0% 0%, rgba(255,213,26,.22), transparent 55%), linear-gradient(135deg, #1b1410, #11141c 70%); }
.tk-hero::after { content: ""; position: absolute; right: -30px; top: -34px; width: 140px; height: 140px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,225,90,.07) 0 12deg, transparent 12deg 24deg); pointer-events: none; }
.tk-hero-ic { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #ffd9b0;
  background: radial-gradient(circle at 35% 30%, #ffdb3c, #9a7f08 80%); border: 1px solid #ffe46b; box-shadow: 0 0 14px rgba(255,213,26,.35); }
.tk-hero-ic .ic { width: 28px; height: 28px; } .tk-hero-ic .ic .a { fill: #fff3d6; }
.tk-hero-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tk-hero-txt b { font-size: 15px; letter-spacing: .4px; color: #ffcf99; text-transform: uppercase; }
.tk-hero-txt span { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.tk-hero-stats { display: flex; gap: 6px; flex: 0 0 auto; position: relative; z-index: 1; }
.tk-stat { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 5px 8px; border-radius: 9px; background: rgba(0,0,0,.32); border: 1px solid var(--line-2); }
.tk-stat small { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-2); }
.tk-stat b { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.tk-stat.on b { color: #ffe46b; } .tk-stat.ok b { color: #4ade80; }
.tk-tabs .dtab { display: inline-flex; align-items: center; gap: 6px; }
.tk-tabs .dtab.tk-prey { color: #ffcf5a; } .tk-tabs .dtab.tk-prey.active { border-bottom-color: #ffcf5a; }
.tk-tabs .dtab .tk-jp { font-size: 9px; letter-spacing: .3px; padding: 1px 5px; border-radius: 6px; background: rgba(255,207,90,.16); color: #ffcf5a; text-transform: none; }
.tk-tab-ic .ic { width: 15px; height: 15px; display: block; }
.tk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 6px var(--orange); }
.tk-pick { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.tk-seg { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center; }
.tk-seg-l { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-2); }
.tk-seg-l i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--orange-2); background: rgba(255,216,40,.1); border: 1px solid rgba(255,216,40,.25); }
.tk-seg-l .ic { width: 14px; height: 14px; }
.tk-seg-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.tk-opt { --c: #ffe054; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border-radius: 9px; cursor: pointer; text-align: left;
  background: #0f1219; border: 1px solid var(--line-2); color: var(--text); transition: border-color .15s, background .15s, transform .1s; }
.tk-opt b { font-size: 12.5px; } .tk-opt small { font-size: 10.5px; color: var(--text-2); }
.tk-opt:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); transform: translateY(-1px); }
.tk-opt.on { border-color: var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #0f1219), #0f1219); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0 12px color-mix(in srgb, var(--c) 25%, transparent); }
.tk-opt.on b { color: var(--c); }
.tk-list-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; }
.tk-list-h b { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #ffcf99; }
.tk-list-h span { font-size: 11.5px; color: var(--text-2); }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.tk-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 70%), var(--bg-2); border: 1px solid var(--line); transition: border-color .15s, transform .1s; }
.tk-card:hover { border-color: rgba(255,216,40,.45); transform: translateY(-1px); }
.tk-card.elite { grid-template-columns: 64px 1fr; border-color: rgba(96,165,250,.35); }
.tk-face { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 40%, #33405a, #10131a 72%); border: 2px solid #3a4152; box-shadow: 0 0 0 3px rgba(255,216,40,.08), 0 4px 10px rgba(0,0,0,.45); }
.tk-face.item img { width: 36px; height: 36px; image-rendering: pixelated; }
.tk-face.big { width: 84px; height: 84px; border-color: var(--orange); box-shadow: 0 0 16px rgba(255,213,26,.35); }
.tk-face.big.item img { width: 48px; height: 48px; }
.tk-face.sm { width: 46px; height: 46px; }
.tk-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tk-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 800; font-size: 13.5px; color: var(--text); }
.tk-title.big { font-size: 16px; }
.tk-lv { font-size: 10.5px; font-weight: 700; padding: 0 7px; border-radius: 999px; background: #0d1017; border: 1px solid var(--line-2); color: var(--gold, #ffd166); font-family: var(--mono); }
.tk-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tk-tag { --c: var(--text-2); display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 1px 8px; border-radius: 999px; background: #0d1017; border: 1px solid var(--line-2); color: var(--text-2); }
.tk-tag.diff { color: var(--c); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, #0d1017); font-weight: 700; }
.tk-tag.where { color: #9ec9ff; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tk-tag .ic { width: 11px; height: 11px; }
.tk-tag.mini { font-size: 9.5px; padding: 0 6px; text-transform: uppercase; letter-spacing: .4px; }
.tk-tag.on { color: #ffe46b; border-color: rgba(255,216,40,.55); }
.tk-sub { font-size: 11px; color: var(--text-2); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk-where { display: inline-flex; align-items: center; gap: 4px; color: #9ec9ff; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tk-where .ic { width: 11px; height: 11px; }
.tk-rw { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }
.tk-r { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: #0d1017; border: 1px solid var(--line-2); font-variant-numeric: tabular-nums; }
.tk-r.exp { color: #c9a6ff; border-color: rgba(185,140,255,.35); } .tk-r.gold { color: #ffd166; border-color: rgba(255,209,102,.3); }
.tk-r.elo { color: #ffe46b; border-color: rgba(255,216,40,.35); } .tk-r.card { color: #7dd3fc; border-color: rgba(125,211,252,.35); }
.tk-r.off { color: var(--text-2); font-weight: 600; font-style: italic; }
.tk-take { align-self: center; min-width: 76px; }
.tk-now { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; margin-top: 2px;
  border: 1px solid rgba(255,216,40,.5); background: radial-gradient(110% 140% at 0% 0%, rgba(255,213,26,.16), transparent 55%), var(--bg-2); box-shadow: 0 0 18px rgba(255,213,26,.12); }
.tk-now.done { border-color: rgba(74,222,128,.55); background: radial-gradient(110% 140% at 0% 0%, rgba(74,222,128,.14), transparent 55%), var(--bg-2); }
.tk-now.done .tk-face.big { border-color: #4ade80; box-shadow: 0 0 16px rgba(74,222,128,.35); }
.tk-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #ffe46b; }
.tk-now.done .tk-kicker { color: #4ade80; }
.tk-how { font-size: 11.5px; color: var(--text-2); }
.tk-acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 110px; }
.tk-prog { position: relative; height: 18px; border-radius: 9px; overflow: hidden; background: #0b0d12; border: 1px solid var(--line-2); margin: 3px 0 2px; }
.tk-prog > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #c2a10c, #ffdb3c 70%, #ffe77a); box-shadow: 0 0 10px rgba(255,216,40,.5); transition: width .3s; }
.tk-prog.done > i { background: linear-gradient(90deg, #15803d, #4ade80); box-shadow: 0 0 10px rgba(74,222,128,.45); }
.tk-prog span, .tk-prog b { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.tk-prog span { left: 8px; } .tk-prog b { right: 8px; }
.tk-wait, .tk-info { display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 10px; border-radius: 10px; font-size: 12px; line-height: 1.4; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--line); }
.tk-wait { border-color: rgba(255,90,107,.45); color: #ffc2c9; }
.tk-wait > i, .tk-info > i { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--orange-2); background: rgba(255,216,40,.1); }
.tk-wait > i { color: #ff8a96; background: rgba(255,90,107,.12); }
.tk-wait .ic, .tk-info .ic { width: 15px; height: 15px; }
.tk-info > span { flex: 1; } .tk-info > b { flex: 0 0 auto; font-size: 11.5px; color: #ffcf99; white-space: nowrap; }
.tk-steps { display: grid; gap: 6px; }
.tk-step { display: grid; grid-template-columns: 30px 50px 1fr; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 11px; background: var(--bg-2); border: 1px solid var(--line); }
.tk-step.on { border-color: rgba(255,216,40,.6); box-shadow: 0 0 12px rgba(255,213,26,.18); background: linear-gradient(90deg, rgba(255,213,26,.10), transparent 70%), var(--bg-2); }
.tk-step:has(.tk-acts) { grid-template-columns: 30px 50px 1fr auto; } .tk-card.elite:has(.tk-acts) { grid-template-columns: 64px 1fr auto; } .tk-step .tk-acts, .tk-card.elite .tk-acts { min-width: 0; }
.tk-step.done { opacity: .62; } .tk-step.lock { opacity: .5; filter: grayscale(.5); }
.tk-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 800; color: var(--text-2); background: #0d1017; border: 1px solid var(--line-2); }
.tk-step.on .tk-num { color: #2a1800; background: linear-gradient(180deg, #ffe46b, #e8c010); border-color: #ffe77a; }
.tk-step.done .tk-num { color: #052e16; background: #4ade80; border-color: #86efac; }
.tk-confirm p { margin: 0 0 12px; color: var(--text-2); line-height: 1.45; } .tk-confirm .row { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 640px) {
  .tk-hero { flex-wrap: wrap; } .tk-hero-stats { width: 100%; } .tk-stat { flex: 1; min-width: 0; }
  .tk-seg { grid-template-columns: 1fr; gap: 5px; }
  .tk-tabs .dtab { padding: 8px 7px; letter-spacing: .4px; font-size: 11px; white-space: nowrap; }
  .tk-tabs { flex-wrap: wrap; row-gap: 2px; }
  .tk-grid { grid-template-columns: 1fr; }
  .tk-now { grid-template-columns: 72px 1fr; } .tk-now .tk-acts { grid-column: 1 / -1; flex-direction: row; } .tk-now .tk-acts > * { flex: 1; }
  .tk-face.big { width: 68px; height: 68px; }
}
#ev-banners { position: absolute; top: 172px; left: calc(var(--sbl, 0px) + (100% - var(--sbl, 0px) - var(--sbr, 0px)) / 2); transform: translateX(-50%);
  z-index: 99990; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(620px, calc(92 * var(--vw))); }
.ev-banner { --c: #ffdd47; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px 10px 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(10, 8, 6, .94), rgba(22, 14, 8, .9) 60%, rgba(10, 8, 6, .94));
  border: 1px solid color-mix(in srgb, var(--c) 55%, #000); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 8px 26px rgba(0, 0, 0, .55), 0 0 22px color-mix(in srgb, var(--c) 22%, transparent);
  animation: evIn .35s cubic-bezier(.2, .9, .3, 1.2); transition: opacity .5s, transform .5s; position: relative; overflow: hidden; }
.ev-banner::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.ev-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--c) 18%, transparent) 50%, transparent 70%);
  transform: translateX(-100%); animation: evShine 1.6s .25s ease-out; }
.ev-banner.out { opacity: 0; transform: translateY(-10px); }
.ev-banner .ev-ic { flex: 0 0 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--c);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 35%, #000), #0b0907 75%); border: 1px solid color-mix(in srgb, var(--c) 60%, #000); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); }
.ev-banner .ev-ic .ic { width: 22px; height: 22px; --ic-acc: #fff; }
.ev-banner .ev-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-banner .ev-tx b { color: var(--c); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; text-shadow: 0 1px 0 #000; }
.ev-banner .ev-tx span { color: #f5ece0; font-size: 14px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 1px #000; }
.ev-banner.boss { --c: #ffdb3d; } .ev-banner.castle { --c: #ffd24a; } .ev-banner.juubi { --c: #c08bff; } .ev-banner.bijuu { --c: #ffdb3d; }
.ev-banner.day { --c: #5fe3a1; } .ev-banner.gm { --c: #6cc8ff; }
@keyframes evIn { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes evShine { to { transform: translateX(100%); } }
@media (max-width: 820px) { #ev-banners { top: calc(64px + env(safe-area-inset-top)); left: 50%; } .ev-banner .ev-tx span { font-size: 13px; } }
.qb-day { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid #2c3a33; background: rgba(10,20,16,.88); color: #9fdcbc; font-weight: 800; font-size: 11px; letter-spacing: .4px; cursor: help; }
.qb-day .ic { width: 14px; height: 14px; }
.qb-day.mine { border-color: #5fe3a1; color: #eafff3; background: linear-gradient(90deg, rgba(14,70,44,.95), rgba(10,40,28,.95)); box-shadow: 0 0 8px rgba(95,227,161,.35); position: relative; }
.qb-day.hidden { display: none; }
.qb-hunt { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid #3a3426; background: rgba(20,16,10,.88); color: #f0d9a8; font-weight: 800; font-size: 11px; letter-spacing: .3px; cursor: pointer; max-width: 260px; }
.qb-hunt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.qb-hunt .ic { width: 14px; height: 14px; flex: none; }
.qb-hunt.hidden { display: none; }
@media (max-width: 760px) { .qb-hunt { max-width: 150px; padding: 4px 8px; font-size: 10px; } }
.qb-boosts { display: contents; }
.qb-boost { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 9px; border-radius: 999px; border: 1px solid var(--bc, #ffdd47); background: rgba(13,16,23,.92); color: var(--bc, #ffdd47); font-weight: 800; font-size: 11px; letter-spacing: .5px; cursor: help; box-shadow: 0 0 10px color-mix(in srgb, var(--bc, #ffdd47) 30%, transparent); }
.qb-boost i { font-style: normal; display: grid; place-items: center; }
.qb-boost .ic { width: 14px; height: 14px; stroke-width: 2.1; }
.qb-boost b { font-family: ui-monospace, Consolas, monospace; font-weight: 800; color: #f3f5fa; padding-left: 7px; border-left: 1px solid color-mix(in srgb, var(--bc, #ffdd47) 45%, transparent); font-variant-numeric: tabular-nums; }
.qb-boost.xp { --bc: #ffdd47; }
.qb-boost.loot { --bc: #c58cff; }
.qb-boost.ev { --bc: #ff7ab6; }
.qb-boost.stam { --bc: #5fe3a1; }
.qb-boost[data-k^="gb-"] { --bc: #6fc3ff; }
.qb-boost .qbb-s { display: none; }
.quickbar.qb-narrow .qb-boost { padding: 3px 8px; gap: 5px; } .quickbar.qb-narrow .qb-boost .qbb-l { display: none; } .quickbar.qb-narrow .qb-boost .qbb-s { display: inline; }
@media (max-width: 760px) { .qb-boost { padding: 3px 7px; font-size: 10px; gap: 4px; } .qb-boost b { padding-left: 5px; } .qb-boost .qbb-l { display: none; } .qb-boost .qbb-s { display: inline; } }
.voc-card .day-badge { position: absolute; top: -8px; z-index: 1; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 900; letter-spacing: .8px; padding: 1px 7px; border-radius: 6px;
  background: linear-gradient(135deg, #5fe3a1, #1fa968); color: #04170d; box-shadow: 0 0 10px rgba(95,227,161,.55); white-space: nowrap; }
.ttl { --tc: #d7dce8; display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 11px; letter-spacing: .3px; color: var(--tc); white-space: nowrap; line-height: 1.2; }
.ttl.big { font-size: 15px; letter-spacing: .5px; }
.ttl.fx-glow { text-shadow: 0 0 6px var(--tc); }
.ttl.fx-pulse { animation: ttlPulse 1.8s ease-in-out infinite; }
@keyframes ttlPulse { 0%, 100% { text-shadow: 0 0 1px var(--tc); } 50% { text-shadow: 0 0 9px var(--tc), 0 0 2px #fff; } }
.ttl.fx-shine .ttl-t, .ttl.fx-kage .ttl-t { background: linear-gradient(100deg, var(--tc) 0%, var(--tc) 38%, #fff 50%, var(--tc) 62%, var(--tc) 100%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ttlShine 2.4s linear infinite; filter: drop-shadow(0 0 3px var(--tc)); }
.ttl.fx-kage .ttl-t { background-image: linear-gradient(100deg, var(--tc) 0%, var(--tc) 36%, #fff3c4 50%, var(--tc) 64%, var(--tc) 100%); }
@keyframes ttlShine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.ttl.fx-fire .ttl-t { background: linear-gradient(180deg, #fff6b0, #ffdb3b 45%, #ff3d1f); -webkit-background-clip: text; background-clip: text; color: transparent; animation: ttlFire .45s ease-in-out infinite alternate; }
@keyframes ttlFire { from { filter: drop-shadow(0 0 2px #ffd51a); } to { filter: drop-shadow(0 0 7px #ffd82a) brightness(1.15); } }
.ttl-k { font-style: normal; font-family: serif; color: #ffd76a; text-shadow: 0 0 6px #ffb800; }
@media (prefers-reduced-motion: reduce) { .ttl, .ttl .ttl-t { animation: none !important; } }
.wd-honor:empty { display: none; }
.wd-honor { margin: 0 0 10px; }
.wd-honor-t { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.wd-honor-t b { color: #ffd76a; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; }
.wd-honor-t span { color: var(--muted); font-size: 11.5px; }
.wd-kages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.wd-kage { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 8px; border-radius: 12px; cursor: pointer; text-align: center; min-width: 0;
  border: 1px solid color-mix(in srgb, var(--kc) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 18%, transparent), rgba(0, 0, 0, .15)); }
.wd-kage.empty { cursor: default; opacity: .55; }
.wd-kage b { color: #fff; font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-kage small { color: var(--muted); font-size: 10.5px; }
.wd-kage .ttl { font-size: 10px; }
.wd-kage-fig { width: 52px; height: 52px; display: grid; place-items: center; }
.wd-season { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,213,26, .35); background: linear-gradient(135deg, rgba(255,213,26, .1), rgba(0, 0, 0, .15)); }
.wd-season-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.wd-season-h b { color: #ffe15c; font-size: 14px; }
.wd-season-h span { color: var(--muted); font-size: 11.5px; }
.wd-prizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wd-prize { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); font-size: 11.5px; font-weight: 700; color: #fff; }
.wd-prize.p1 { border-color: rgba(255, 215, 106, .55); } .wd-prize.p2 { border-color: rgba(220, 228, 255, .45); } .wd-prize.p3 { border-color: rgba(255,225,90, .45); }
.wd-prize i svg { width: 18px; height: 18px; }
.wd-last { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 11.5px; color: var(--text-2); }
.wd-last i svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.wd-nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.wd-pod .ttl { font-size: 10px; }
@media (max-width: 560px) { .wd-kages { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wd-prizes { grid-template-columns: 1fr; } }
.gr-top { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.gr-top img { width: 60px; height: 60px; object-fit: contain; }
.gr-top b.gr-rk { font-size: 19px; font-weight: 800; color: #fff; }
.gr-top .gr-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.gr-elo { font: 700 12px var(--mono, monospace); color: #ffe15c; }
.gr-kage { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #1a1206; background: linear-gradient(90deg, #ffd76a, #ffdd47); }
.gr-ways { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.gr-way { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,225,92, .35); background: rgba(255,219,60, .07); color: #ffea8a; }
.rank-card.kage-card { border-color: rgba(255, 215, 106, .45); background: linear-gradient(135deg, rgba(255, 200, 80, .08), transparent 60%); }
.ttl-list { display: grid; gap: 6px; }
.ttl-sec { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 10px 0 2px; display: flex; align-items: center; gap: 8px; }
.ttl-sec::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .08); }
.ttl-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .025); }
.ttl-row.on { border-color: var(--orange); background: rgba(255,213,26, .08); }
.ttl-row.locked { opacity: .55; }
.ttl-row .ttl-how { grid-column: 1; font-size: 11.5px; color: var(--muted); }
.ttl-row .ttl { font-size: 13px; }
.ttl-row .ttl-tier { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-left: 6px; }
.ttl-row .btn { grid-row: 1 / span 2; grid-column: 2; }
.kg-list { display: grid; gap: 8px; }
.kg-card { display: grid; grid-template-columns: 34px 64px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 215, 106, .25);
  background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 16%, transparent), rgba(255, 255, 255, .02) 70%); cursor: pointer; }
.kg-card.empty { cursor: default; opacity: .6; }
.kg-card.me { border-color: var(--orange); }
.kg-place { font: 800 20px var(--mono, monospace); color: var(--kc); text-align: center; text-shadow: 0 0 8px var(--kc); }
.kg-fig { width: 64px; height: 64px; display: grid; place-items: center; }
.kg-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kg-who b { color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-who small { color: var(--muted); font-size: 11.5px; }
.kg-perks { display: grid; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.kg-perks li { margin-left: 16px; }
.rank-reqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.rank-req { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid #5a3a3a; background: rgba(60,20,20,.45); color: #ffb0a8; }
.rank-req.ok { border-color: #2f6b47; background: rgba(20,60,36,.5); color: #8ef0b4; }
.tk-bands { display: flex; flex-wrap: wrap; gap: 5px; }
.tk-band { --c: #ffe054; display: flex; flex-direction: column; align-items: center; min-width: 48px; padding: 5px 7px 4px; border-radius: 9px; cursor: pointer;
  background: #0e1118; border: 1px solid #262c3a; color: #cfd6e4; transition: border-color .12s, background .12s, transform .12s; }
.tk-band b { font-size: 13px; line-height: 1.1; }
.tk-band small { font-size: 9.5px; color: color-mix(in srgb, var(--c) 80%, #fff); font-weight: 700; }
.tk-band:hover:not(:disabled) { border-color: color-mix(in srgb, var(--c) 60%, #000); transform: translateY(-1px); }
.tk-band.own { border-style: dashed; border-color: color-mix(in srgb, var(--c) 55%, #000); }
.tk-band.on { background: color-mix(in srgb, var(--c) 18%, #0e1118); border: 1px solid var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 35%, transparent); color: #fff; }
.tk-band.lock { opacity: .45; cursor: not-allowed; }
.tk-band.lock small { color: #8b97a8; }
.tk-band-info { flex-basis: 100%; margin-top: 6px; font-size: 12px; color: #c7cfdd; }
.tk-low { color: #ffe46b; font-size: 11.5px; margin-top: 4px; }
.tk-band-info b { color: var(--c); }
.bs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.bs-step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; padding: 9px 10px 9px 12px; border-radius: 11px;
  background: linear-gradient(180deg, #121622, #0d1018); border: 1px solid var(--line); }
.bs-step + .bs-step::before { content: "›"; position: absolute; left: -9px; top: 50%; transform: translateY(-55%); color: var(--orange); font-weight: 900; font-size: 16px; }
.bs-step .bs-n { position: absolute; top: -7px; left: 8px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; background: var(--orange); color: #1a0d00; }
.bs-step > i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #ffcf99; background: rgba(255,216,40,.1); border: 1px solid rgba(255,216,40,.28); }
.bs-step > i .ic { width: 18px; height: 18px; }
.bs-step b { display: block; font-size: 12px; color: var(--text); }
.bs-step small { display: block; font-size: 10.5px; color: var(--text-2); line-height: 1.35; }
.bs-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bs-type { --c: #ffe054; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; cursor: help;
  background: color-mix(in srgb, var(--c) 12%, #0d1017); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.bs-type i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--c); background: rgba(0,0,0,.35); }
.bs-type i .ic { width: 12px; height: 12px; }
.bs-type b { font-size: 11.5px; color: var(--c); } .bs-type small { font-size: 10.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bs-jp { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-2); }
.bs-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.bs-slot { --c: #ffe054; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.bs-slot.on { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 55%), var(--bg-2);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c) 12%, transparent); }
.bs-slot.on .tk-face.big { border-color: var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 40%, transparent); }
.bs-slot.on .tk-prog i { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), var(--c)); }
.bs-slot.lock { opacity: .85; border-style: dashed; }
.bs-slot-h { display: flex; align-items: center; gap: 8px; }
.bs-slot-h b { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--text-2); }
.vip-badge.static { position: static; }
.bs-cur { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; }
.bs-bonus { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bs-bonus i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--c); background: color-mix(in srgb, var(--c) 18%, #0d1017); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.bs-bonus i .ic { width: 14px; height: 14px; }
.bs-bonus b { font-size: 15px; color: var(--c); } .bs-bonus small { font-size: 11px; color: var(--text-2); }
.bs-slot .prey-stars { font-size: 13px; letter-spacing: 1px; }
.bs-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-auto { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-2); }
.bs-auto span { font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 10px; } .bs-auto select { flex: 1; min-width: 0; }
.bs-pick-h { display: flex; align-items: baseline; gap: 8px; } .bs-pick-h b { font-size: 13px; color: #ffcf99; } .bs-pick-h small { font-size: 11px; color: var(--text-2); }
.bs-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bs-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px 6px; border-radius: 10px; cursor: pointer; min-width: 0;
  background: #0e1118; border: 1px solid #262c3a; color: var(--text); transition: border-color .12s, transform .12s, background .12s; }
.bs-opt b { font-size: 11px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bs-opt small { font-size: 10px; color: var(--text-2); }
.bs-opt:hover:not(:disabled) { border-color: var(--orange); background: rgba(255,213,26,.08); transform: translateY(-1px); }
.bs-opt:disabled { opacity: .4; cursor: not-allowed; }
.bs-lock { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; text-align: center; color: var(--text-2); }
.bs-lock i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #ffd166; background: rgba(255,209,102,.08); border: 1px solid rgba(255,209,102,.35); }
.bs-lock i .ic { width: 22px; height: 22px; } .bs-lock b { color: var(--text); } .bs-lock small { font-size: 11.5px; }
.bs-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.bs-bar .dsearch { flex: 1 1 200px; margin: 0; } .bs-bar .dchips { margin: 0; }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.bs-card { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; padding: 9px 11px 9px 9px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.bs-card.done { border-color: rgba(74,222,128,.45); background: radial-gradient(120% 140% at 0% 0%, rgba(74,222,128,.1), transparent 55%), var(--bg-2); }
.bs-card.done .tk-face { border-color: #4ade80; }
.bs-card.none { opacity: .6; }
.bs-st { color: #fbbf24; font-size: 11px; letter-spacing: 1px; }
.bs-track { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 2px; }
.bs-seg { position: relative; height: 14px; border-radius: 5px; background: #0b0e14; border: 1px solid #262c3a; overflow: hidden; }
.bs-seg i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7c6912, var(--orange)); }
.bs-seg.ok i { background: linear-gradient(90deg, #166534, #4ade80); }
.bs-seg span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px #000; }
.bs-foot { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .bs-steps { grid-template-columns: 1fr; } .bs-step + .bs-step::before { display: none; }
  .bs-jp { grid-template-columns: 1fr; gap: 4px; }
  .bs-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bs-slots, .bs-grid { grid-template-columns: 1fr; }
}
.day-box { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin: 0 auto 14px; max-width: 1200px; padding: 12px 16px; border-radius: 14px;
  background: radial-gradient(120% 160% at 0% 0%, rgba(95,227,161,.16), transparent 55%), linear-gradient(180deg, #111a17, #0c1110);
  border: 1px solid rgba(95,227,161,.45); box-shadow: 0 0 22px rgba(95,227,161,.12); }
.day-box .day-pic, .day-box .outfit { width: 74px; height: 74px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(95,227,161,.5); background: #0a0f0d; }
.day-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.day-kick { font-size: 10.5px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; color: #5fe3a1; }
.day-name { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 900; color: #eafff3; }
.day-txt p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #c5d6cd; } .day-txt p b { color: #8ef0b9; }
.day-txt p.day-when { font-size: 11.5px; color: #93a89c; }
.day-box { grid-template-columns: auto 1fr auto; gap: 10px; max-width: 560px; padding: 6px 8px 6px 6px; border-radius: 12px; }
.day-box .day-pic, .day-box .outfit { width: 34px; height: 34px; border-radius: 8px; }
.day-box .day-txt { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px; color: #c5d6cd; }
.day-box .day-txt b { color: #eafff3; }
.day-box .day-kick { font-size: 10px; margin-right: 2px; }
.day-box .day-when { font-size: 11px; color: #93a89c; }
.day-box > .btn { padding: 5px 10px; font-size: 12px; }
.gtip { position: fixed; z-index: 9850; pointer-events: none; max-width: 300px; padding: 7px 11px 8px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(24, 28, 39, .97), rgba(12, 14, 20, .97)); border: 1px solid #3a4258;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04), inset 3px 0 0 var(--orange);
  color: #d8deeb; font: 500 12px/1.45 var(--font); white-space: pre-line; overflow-wrap: anywhere; animation: gtip-in .12s ease-out; }
.gtip.hidden { display: none; }
.gtip b { display: block; margin-bottom: 2px; color: var(--orange-2); font-weight: 800; font-size: 12px; letter-spacing: .2px; }
.gtip span { display: block; }
@keyframes gtip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (hover: none) { .gtip { display: none !important; } }
#msg-pm { top: 18%; color: #5ff7f7; font-size: 14px; }
#msg-tip { top: 28%; color: #fff; font-size: 13.5px; max-width: min(620px, calc(86 * var(--vw))); line-height: 1.35; }
.ch-line.ch-log.tip { color: #f4f4f4; font-style: italic; }
#msg-status[data-kind="vipon"] { color: #00eb00; }
#msg-status[data-kind="vipenemy"] { color: #ff4d5e; }
.ch-tabsrow { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 4px; min-width: 0; }
.ch-tabs { flex: 1; min-width: 0; margin-bottom: 0 !important; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.ch-tabs::-webkit-scrollbar { display: none; }
#panel-chat .ch-tab { position: relative; display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 5px 11px 5px 9px; text-transform: none; letter-spacing: .2px; font-size: 11.5px; }
.ch-tab em { min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--orange); color: #1b1206; font: 800 9.5px/15px var(--font); font-style: normal; text-align: center; }
.ch-tab.pmt { color: #c9b6ff; }
.ch-tab.pmt.active { color: #e5d9ff; }
.ch-pmdot { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 6px #a78bfa; }
.ch-tab.new:not(.active) { color: #ffd9a3; }
.ch-x { position: absolute; top: 0; right: -1px; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 4px; font-size: 12px; line-height: 1; color: var(--muted); opacity: 0; transition: opacity .12s; }
.ch-tab:hover .ch-x, .ch-tab.active .ch-x { opacity: 1; }
.ch-x:hover { background: rgba(244,63,94,.18); color: #ff8a9a; }
.ch-tab.drag { position: relative; z-index: 3; opacity: 1; background: linear-gradient(180deg, #33231a, #1d1712); outline: 1px solid rgba(255,213,26,.55); border-radius: 6px 6px 0 0; box-shadow: 0 4px 14px rgba(0,0,0,.45); cursor: grabbing; transition: none; }
.ch-tabs.dragging { cursor: grabbing; }
.ch-tab.drop-l { box-shadow: inset 3px 0 0 var(--orange); }
.ch-tab.drop-r { box-shadow: inset -3px 0 0 var(--orange); }
.ch-tools { display: flex; gap: 3px; flex: none; padding-bottom: 2px; }
.ch-tool { width: 26px; height: 24px; display: grid; place-items: center; padding: 0; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text-2); cursor: pointer; }
.ch-tool .ic { width: 15px; height: 15px; }
.ch-tool:hover { border-color: var(--orange); color: var(--orange-2); background: rgba(255,213,26,.08); }
.ch-tool.on { border-color: rgba(255,209,102,.5); color: var(--rare); }
.ch-click { cursor: pointer; border-radius: 4px; }
.ch-click:hover { background: rgba(255,255,255,.045); }
.ch-line.kw { background: color-mix(in srgb, var(--kw) 13%, transparent); box-shadow: inset 2px 0 0 var(--kw); padding-left: 5px; }
.ch-line.kw .ch-name { color: var(--kw); }
.ch-line mark.ch-kw { background: color-mix(in srgb, var(--kw, #ffd166) 32%, transparent); color: #fff; border-radius: 3px; padding: 0 2px; }
.ch-line.auto::after { content: "auto"; margin-left: 6px; padding: 0 4px; border-radius: 3px; background: rgba(95,227,161,.12); color: #5fe3a1; font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; vertical-align: 1px; }
.ch-line.sys.bc { color: #ffe46b; font-style: normal; font-weight: 700; }
.ch-line.ch-log.c-dmg { color: #ffb4bd; }
.ch-line.ch-log.c-hit { color: #ffd9a3; }
.ch-line.ch-log.c-heal { color: #9bf0b7; }
.ch-line.ch-log.c-loot { color: var(--gold); }
.ch-line.ch-log.c-exp { color: #c9a4ff; }
.ch-line.ch-log.c-sys { color: var(--chakra); }
.ch-line.ch-log.c-death { color: var(--red); font-weight: 700; }
.ch-line.ch-log.vipon { color: #00eb00; }
.ch-line.ch-log.vipenemy { color: #ff4d5e; }
.ch-logbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 3px 6px; margin-bottom: 3px; border-radius: 7px; background: rgba(255,255,255,.03); border: 1px solid var(--line); font-size: 11px; }
.ch-chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text-2); }
.ch-clear { margin-left: auto; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.ch-clear:hover { color: var(--red); border-color: rgba(244,63,94,.5); }
.ch-at { display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; }
.ch-at .ic { width: 14px; height: 14px; }
.ch-at em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: #5fe3a1; }
.ch-at.on { border-color: rgba(95,227,161,.55); color: #b8f5d4; background: rgba(95,227,161,.08); box-shadow: 0 0 10px rgba(95,227,161,.15); }
@media (max-width: 760px) { .ch-at span { display: none; } .ch-at.on span { display: inline; } .ch-at.on span { font-size: 0; } .ch-at.on em { font-size: 10.5px; } }
.chm { display: flex; flex-direction: column; gap: 6px; min-width: min(520px, calc(86 * var(--vw))); }
.chm-hint { margin: 0 0 4px; }
.chm-h, .kwm-h { margin-top: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange-2); }
.chm-list { display: flex; flex-direction: column; gap: 4px; }
.chm-row { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.chm-row.on { border-color: #333c52; background: linear-gradient(90deg, rgba(255,213,26,.06), rgba(255,255,255,.02)); }
.chm-row.cur { box-shadow: inset 3px 0 0 var(--orange); }
.chm-n { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,213,26,.16); color: var(--orange-2); font-weight: 800; font-size: 12px; }
.chm-n.off { background: rgba(255,255,255,.05); color: var(--muted); }
.chm-tx { min-width: 0; display: flex; flex-direction: column; }
.chm-tx b { font-size: 13px; }
.chm-tx small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.chm-acts { display: flex; gap: 4px; align-items: center; }
.chm-b { min-width: 28px; height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); cursor: pointer; font-size: 11px; }
.chm-b:hover:not(:disabled) { border-color: var(--orange); color: var(--orange-2); }
.chm-b:disabled { opacity: .3; cursor: default; }
.chm-b.off:hover { border-color: rgba(244,63,94,.6); color: #ff8a9a; }
.chm-fix { padding: 0 8px; font-size: 10.5px; color: var(--muted); }
.chm-pm .input { flex: 1; }
.chm-ign, .kwm-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chm-foot { justify-content: flex-end; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.kw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--kw, #ffd166) 15%, transparent); border: 1px solid color-mix(in srgb, var(--kw, #ffd166) 45%, transparent); color: var(--kw, #ffd166); }
.kw-chip.ign { --kw: #ff8a9a; }
.kw-chip button { width: 18px; height: 18px; border-radius: 50%; border: 0; background: rgba(0,0,0,.3); color: inherit; cursor: pointer; line-height: 1; }
.kw-chip button:hover { background: rgba(0,0,0,.55); color: #fff; }
.kwm, .atm { display: flex; flex-direction: column; gap: 6px; min-width: min(460px, calc(86 * var(--vw))); }
.kwm p, .atm p { margin: 0; }
.kwm-add .input { flex: 1; }
.kwm-colors { display: flex; gap: 8px; }
.kwm-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--kw); cursor: pointer; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }
.kwm-color.on { border-color: #fff; box-shadow: 0 0 0 2px var(--kw), inset 0 0 0 2px rgba(0,0,0,.35); }
.kwm-prev { padding: 6px 8px; border-radius: 8px; background: #0b0d12; border: 1px solid var(--line); font-size: 12px; }
.kwm-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.at-text { width: 100%; resize: vertical; min-height: 64px; font: inherit; }
.atm-foot { justify-content: flex-end; gap: 8px; margin-top: 8px; }
.at-sec { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.at-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.at-meta { justify-content: space-between; align-items: baseline; gap: 8px; }
.at-warn { color: #ff8a9a; }
#panel-vip { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.vip-add { display: flex; gap: 6px; }
.vip-add .input { flex: 1; min-width: 0; }
.vip-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: #5fe3a1; padding: 0 2px; }
.vip-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.vip-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.025); border: 1px solid transparent; cursor: pointer; }
.vip-row:hover { border-color: var(--line-2); background: rgba(255,255,255,.05); }
.vip-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #4a5266; }
.vip-row.on .vip-dot { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.7); }
.vip-row.gone { opacity: .5; }
.vip-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vip-tx b { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vip-row.on .vip-tx b { color: #c8f7d9; }
.vip-tx small { font-size: 10.5px; color: var(--muted); }
.vip-b { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); cursor: pointer; }
.vip-b .ic { width: 14px; height: 14px; }
.vip-b:hover { border-color: var(--orange); color: var(--orange-2); }
.vip-b.x:hover { border-color: rgba(244,63,94,.6); color: #ff8a9a; }
.vip-b.mv { font-size: 13px; }
.vip-tabs { margin-bottom: 2px !important; }
.vip-tabs .dtab { padding: 6px 8px; }
.vip-tn { font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.vip-head.e { color: #ff8a9a; }
.vip-row.e.on .vip-dot { background: #f43f5e; box-shadow: 0 0 8px rgba(244,63,94,.7); }
.vip-row.e.on .vip-tx b { color: #ffc2cb; }
.vip-foot { line-height: 1.4; }
.snd-row { display: flex; flex-wrap: wrap; gap: 6px; }
.snd-vol { display: flex; align-items: center; gap: 10px; }
.snd-vol input { flex: 1; accent-color: var(--orange); }
.cfab-g { position: fixed; z-index: 8100; display: flex; align-items: flex-start; gap: 8px; padding: 4px; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.cfab-g.drag { cursor: grabbing; filter: drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.cfab-g .cg-btn, .cfab-g .cg-mini { position: relative; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid #4a5163; background: radial-gradient(circle at 35% 30%, #343b49, #10131a 75%); color: #9aa3b8;
  box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.55); transition: transform .12s, border-color .15s, box-shadow .15s, color .15s; }
.cfab-g .cg-btn { width: 56px; height: 56px; }
.cfab-g .cg-btn i { display: grid; place-items: center; margin-top: -8px; pointer-events: none; }
.cfab-g .cg-btn .ic { width: 23px; height: 23px; stroke-width: 2; }
.cfab-g .cg-btn b { position: absolute; bottom: 8px; font: 900 8.5px/1 Inter, system-ui, sans-serif; letter-spacing: .8px; pointer-events: none; }
.cfab-g em { position: absolute; right: -7px; top: -6px; font: 900 8.5px/14px Inter, system-ui, sans-serif; font-style: normal; padding: 0 4px; border-radius: 999px;
  background: #262c3a; border: 1px solid #3a4152; color: #9aa3b8; pointer-events: none; }
.cfab-g .cg-mini { width: 30px; height: 30px; margin-left: -12px; margin-top: 28px; z-index: 1; }
.cfab-g .cg-mini i { display: grid; place-items: center; pointer-events: none; } .cfab-g .cg-mini .ic { width: 16px; height: 16px; stroke-width: 2; }
.cfab-g .cg-mini em { right: -12px; top: auto; bottom: -8px; font-size: 7.5px; line-height: 12px; }
.cfab-g .on { border-color: #22c55e; color: #d9ffe6; box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 14px rgba(34,197,94,.45), 0 4px 12px rgba(0,0,0,.55);
  background: radial-gradient(circle at 35% 30%, #2f5a40, #0c1d13 75%); }
.cfab-g .on em { background: #14532d; border-color: #22c55e; color: #86efac; }
.cfab-g .cg-btn:hover, .cfab-g .cg-mini:hover { transform: scale(1.06); }
.cfab-g .cg-btn:active, .cfab-g .cg-mini:active { transform: scale(.93); }
body.hide-btn-hunt .cg-hunt, body.hide-btn-target .cg-target, body.hide-btn-chase .cg-chase, body.hide-btn-focus .cg-focus { display: none; }
.cfab-g .cg-focus.on, .mbtn.mfocus.on { border-color: #ef4444; color: #ffe1e1; box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 14px rgba(239,68,68,.5), 0 4px 12px rgba(0,0,0,.55); }
.cfab-g .cg-focus.on em, .mbtn.mfocus.on em { background: #7f1d1d; border-color: #ef4444; color: #fca5a5; }
body.hide-btn-target .cfab-g .cg-mini { margin-left: 0; margin-top: 0; }
body.hide-btn-hunt.hide-btn-target.hide-btn-chase.hide-btn-focus .cfab-g { display: none; }
body.hide-btn-bijuu .bfab { display: none !important; }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .cfab-g { display: none !important; }
  body:not(.no-mctl) .mbtn.mchase { width: 30px; height: 30px; z-index: 20; }
  .mbtn.mchase i { margin-top: 0 !important; } .mbtn.mchase .ic { width: 16px !important; height: 16px !important; }
  .mbtn.mchase em { right: auto; left: -17px; top: 50%; transform: translateY(-50%); font-size: 7.5px; line-height: 12px; }
  .mbtn.mhunt.on, .mbtn.mchase.on { border-color: #22c55e; color: #d9ffe6; background: radial-gradient(circle at 35% 30%, #2f5a40, #0c1d13 75%); }
  .mbtn.mhunt.on em, .mbtn.mchase.on em { background: #14532d; border-color: #22c55e; color: #86efac; }
  body.hide-btn-hunt #mt-hunt, body.hide-btn-hunt #auto-pow, body.hide-btn-target #mt-auto, body.hide-btn-chase #mt-chase, body.hide-btn-focus #mt-focus { display: none !important; }
  body.ctl-flip:not(.no-mctl) .joy { left: auto; right: 14px; transform-origin: right bottom; }
  body.ctl-flip .afab { right: auto; left: 10px; }
  body.ctl-flip .apow { right: auto; left: 58px; }
  body.ctl-flip .cfab { right: auto; left: 18px; }
  body.hide-btn-joy .joy, body.hide-btn-specials #sp-pad, body.hide-btn-auto #auto-fab, body.hide-btn-chat #chat-fab,
  body.hide-btn-level #mlv, body.hide-btn-tgt #tgtbox, body.hide-btn-pill #auto-pill { display: none !important; }
}
.mlay { position: fixed; inset: 0; z-index: 8500; touch-action: none; background: rgba(4,6,10,.45); }
.mlay-bar { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: min(320px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 12px; border-radius: 12px; background: rgba(13,16,23,.94); border: 1px solid var(--orange); box-shadow: 0 8px 24px rgba(0,0,0,.6); text-align: center; transition: opacity .15s; }
.mlay-bar b { color: var(--orange-2); letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; }
.mlay-bar span { font-size: 12px; color: var(--text-2); }
.mlay-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.mlay.dragging .mlay-bar { opacity: .15; pointer-events: none; }
body.mlay-edit :is(#joy, #auto-fab, #auto-pow, #mt-auto, #mt-chase, #mt-hunt, #mt-focus, #chat-fab, #mlv, #tgtbox, #auto-pill, #sp-pad) { z-index: 8600 !important; pointer-events: none; }
body.mlay-edit :is(#joy, #auto-fab, #mt-auto, #mt-chase, #mt-hunt, #mt-focus, #chat-fab, #mlv, #tgtbox, #auto-pill) { outline: 2px dashed rgba(255,224,84,.95); outline-offset: 3px; }
body.mlay-edit :is(#auto-fab, #mt-auto, #mt-chase, #mt-hunt, #mt-focus, #chat-fab, #joy) { border-radius: 50%; }
body.mlay-edit .mlay-on { outline: 2px solid #fff !important; }
body.mlay-edit #sp-pad .msp { z-index: 8600 !important; pointer-events: none; outline: 2px dashed rgba(255,224,84,.95); outline-offset: 2px; }
body.mlay-edit #sp-pad .msp.new::before { animation: none; opacity: 0; }
.mbtn.mdrag { outline: 2px solid #fff; outline-offset: 3px; z-index: 30 !important; }
.mlay-spbox { width: 100%; max-height: 38vh; overflow-y: auto; }
.mlay-sphead { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--orange-2); letter-spacing: .5px; text-transform: uppercase; }
.mlay-sp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; text-align: left; }
.mlay-sp .st-hint { flex-basis: 100%; }
.mlay-spi { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 4px 8px 4px 4px; border-radius: 999px; cursor: pointer;
  background: #10131a; border: 1px solid #343b49; color: var(--text-2); font-size: 12px; opacity: .55; }
.mlay-spi.on { opacity: 1; border-color: #c9a24a; color: var(--text); background: #171b24; }
.mlay-spi .spell-icon, .mlay-spi img, .mlay-spi canvas { width: 26px !important; height: 26px !important; border-radius: 50%; flex: none; }
.mlay-spi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlay-spi em { flex: none; font: 900 9px/14px system-ui, sans-serif; font-style: normal; padding: 0 5px; border-radius: 999px; background: #262c3a; color: #9aa3b8; }
.mlay-spi.on em { background: #16a34a; color: #f0fff4; }
.mtip { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 8400; width: min(330px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: 12px; background: rgba(13,16,23,.95); border: 1px solid var(--orange); box-shadow: 0 8px 24px rgba(0,0,0,.6); }
.mtip b { color: var(--orange-2); font-size: 14px; }
.mtip p { margin: 0; font-size: 12px; color: var(--text-2); line-height: 1.4; }
.mtip p.mtip-where { color: var(--text); font-weight: 700; }
.mtip .mlay-acts { justify-content: flex-start; margin-top: 2px; }
body.mlay-tip :is(#joy, #auto-fab, #mt-auto, #mt-chase, #mt-hunt, #mt-focus, #chat-fab) { outline: 2px dashed rgba(255,224,84,.95); outline-offset: 3px; animation: mtipPulse 1.2s ease-in-out infinite; }
@keyframes mtipPulse { 50% { outline-color: rgba(255,224,84,.25); } }
.st-group.mtip-hl { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 8px; transition: outline-color .3s; }
body.mlay-edit #tgtbox.hidden { display: block; }
body.mlay-edit #chat-fab.hidden { display: grid; }
.tg-toast { position: fixed; left: 50%; top: 132px; z-index: 9740; display: flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px;
  background: rgba(8,12,10,.88); border: 1px solid #22c55e; color: #e8fff0; font: 700 12px/1.2 Inter, system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 10px rgba(34,197,94,.25); pointer-events: none; opacity: 0; transform: translate(-50%, -6px); transition: opacity .25s, transform .25s; }
.tg-toast.show { opacity: 1; transform: translate(-50%, 0); transition: opacity .12s, transform .12s; }
.tg-toast i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.tg-toast b { font-weight: 900; font-size: 10.5px; letter-spacing: .06em; color: #86efac; }
.tg-toast.off { border-color: #5b6475; box-shadow: 0 4px 14px rgba(0,0,0,.5); color: #d2d8e3; }
.tg-toast.off i { background: #6b7385; box-shadow: none; } .tg-toast.off b { color: #9aa3b8; }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) { .tg-toast { top: 70px; font-size: 11px; } }
.bz-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.bz-head .mis-hero { position: relative; }
.bz-bal { margin-left: auto; text-align: right; background: #0f1320; border: 1px solid #2a3142; border-radius: 10px; padding: 6px 10px; }
.bz-bal small { display: block; color: #b3bacb; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; }
.bz-bal b { color: #f2c14e; font-size: 15px; }
.bz-tabs { display: flex; gap: 6px; }
.bz-tab { padding: 7px 14px; border-radius: 9px; background: #0f1320; border: 1px solid #2a3142; color: #aeb6c7; cursor: pointer; font-weight: 700; font-size: 12.5px; }
.bz-tab.on { background: #1d1407; border-color: #ffd51a; color: #ffe366; }
.bz-tab em { margin-left: 6px; font-style: normal; font-size: 11px; color: #f2c14e; }
.bz-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bz-sel { padding: 6px 8px; border-radius: 8px; background: #0d1016; border: 1px solid #2a3142; color: #e8ecf4; }
.bz-grid { display: flex; flex-direction: column; gap: 8px; }
.bz-card, .bz-sell { display: flex; gap: 10px; padding: 10px; border-radius: 12px; background: #0f1320; border: 1px solid #2a3142; }
.bz-card.mine { border-color: #5a4a1e; } .bz-card.mybid { border-color: #2f6b45; }
.bz-sell.listed { border-color: #5a4a1e; }
.bz-fig { width: 76px; display: grid; place-items: center; background: #0a0d14; border-radius: 10px; flex: none; }
.bz-fig.sm { width: 54px; }
.bz-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bz-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bz-top b { font-size: 14.5px; color: #e8ecf4; }
.bz-voc { color: #b3bacb; font-size: 12px; }
.bz-lv { margin-left: auto; color: #b3bacb; font-size: 11.5px; } .bz-lv b { color: #ffde4a; }
.bz-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.bz-chips .chip small { color: #b3bacb; font-size: 9.5px; text-transform: uppercase; }
.bz-sets { color: #b3bacb; font-size: 11.5px; }
.bz-foot { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.bz-bid small { display: block; color: #b3bacb; font-size: 10.5px; }
.bz-bid b { color: #f2c14e; font-size: 14px; }
.bz-time { color: #b3bacb; font-size: 12px; } .bz-time.hot { color: #ff7a6b; font-weight: 700; }
.bz-foot .btn { margin-left: auto; }
.bz-block { color: #b3bacb; font-size: 12px; }
.bz-rules { margin: 0 0 10px; padding-left: 18px; color: #aeb6c7; font-size: 12px; }
.bz-rules li { margin: 3px 0; }
.bz-hist { display: flex; flex-direction: column; gap: 4px; }
.bz-hrow { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: #0f1320; font-size: 12.5px; }
.bz-hst { color: #b3bacb; } .bz-hst.s-sold { color: #6fd38a; }
.bz-hp { margin-left: auto; color: #f2c14e; }
@media (max-width: 760px) { .bz-card, .bz-sell { flex-direction: column; } .bz-fig { width: 100%; height: 70px; } .bz-foot { flex-wrap: wrap; } .bz-foot .btn { margin-left: 0; width: 100%; } }
.tut-front { z-index: 9400 !important; }
.tut-veil { position: fixed; inset: 0; z-index: 9450; pointer-events: none; background: rgba(5, 7, 12, .72);
  -webkit-mask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor; }
.tut-veil::after { content: ""; position: absolute; left: var(--hx, 0); top: var(--hy, 0); width: var(--hw, 0); height: var(--hh, 0);
  border-radius: 12px; box-shadow: 0 0 0 9999px rgba(5, 7, 12, .72), 0 0 0 2px var(--color-chakra-blue, #7cc0ff), 0 0 18px rgba(58, 160, 255, .6); }
.tut-veil { background: none; -webkit-mask: none; mask: none; }
.tut-veil.nohole::after { left: 50%; top: 50%; width: 0; height: 0; box-shadow: 0 0 0 9999px rgba(5, 7, 12, .72); }
.tut-box { position: fixed; z-index: 9460; width: 300px; max-width: calc(calc(100 * var(--vw)) - 24px); padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #161b26, #10141d); border: 1px solid rgba(124, 192, 255, .35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6); color: var(--text, #e8ecf4); }
.tut-box.center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tut-box .tut-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tut-box .tut-h b { font-size: 15px; color: var(--color-chakra-blue, #7cc0ff); }
.tut-box .tut-n { font-size: 11px; color: var(--text-2, #9aa4b8); }
.tut-box p { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-2, #c3cada); }
.tut-box .tut-acts { display: flex; justify-content: flex-end; gap: 8px; }
.tut-box::before { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg);
  background: #161b26; border-left: 1px solid rgba(124, 192, 255, .35); border-top: 1px solid rgba(124, 192, 255, .35); }
.tut-box.up::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.tut-box.center::before, .tut-box.side::before { display: none; }
.wtut { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; place-items: center; overflow: auto;
  padding: 14px; background: rgba(8, 10, 16, .82); backdrop-filter: blur(3px); border-radius: 0 0 12px 12px; }
.wtut-card { width: 100%; max-width: 420px; padding: 14px 16px 12px; border-radius: 12px;
  background: linear-gradient(180deg, #161b26, #10141d); border: 1px solid rgba(124, 192, 255, .35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6); color: var(--text, #e8ecf4); }
.wtut-h { display: flex; align-items: center; gap: 8px; }
.wtut-h b { font-size: 15px; color: var(--color-chakra-blue, #7cc0ff); }
.wtut-h span { margin-left: auto; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted, #b3bacb); }
.wtut-ic { width: 20px; height: 20px; color: var(--color-chakra-blue, #7cc0ff); }
.wtut-ic svg { display: block; width: 20px; height: 20px; }
.wtut-steps { counter-reset: wtut; margin: 10px 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wtut-steps li { position: relative; padding-left: 28px; font-size: 12.5px; line-height: 1.45; color: var(--text-2, #c3cada); }
.wtut-steps li::before { counter-increment: wtut; content: counter(wtut); position: absolute; left: 0; top: 0;
  width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 800;
  color: #10141d; background: var(--color-chakra-blue, #7cc0ff); }
.wtut-steps li b { color: var(--text, #e8ecf4); }
.wtut-ok { width: 100%; }
@media (max-width: 760px) { .wtut { padding: 10px; } .wtut-card { padding: 12px 13px 10px; } .wtut-steps li { font-size: 12px; } }
.inf-tabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px; }
.inf-tabs .dtab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 1px 7px; font-size: 9.5px; line-height: 1.15; text-align: center; min-width: 0; }
.inf-tabs .dtab .ic { width: 17px; height: 17px; }
.inf-body { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.inf-b { border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .02); padding: 10px 12px; }
.inf-b > h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--orange); }
.inf-p { margin: 0; font-size: 12.5px; color: var(--text-2); }
.inf-ul { margin: 0; padding-left: 18px; }
.inf-ul li { margin: 4px 0; font-size: 12.5px; color: var(--text-2); }
.inf-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.inf-t th { text-align: left; padding: 5px 8px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .7px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.inf-t td { padding: 5px 8px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: middle; }
.inf-t tr:hover td { background: rgba(255, 255, 255, .03); }
.inf-j { display: inline-flex; align-items: center; gap: 6px; }
.inf-j img { width: 22px; height: 22px; image-rendering: pixelated; border-radius: 4px; }
.inf-area { color: var(--orange-2); }
.inf-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-left: 4px; }
.inf-ok { color: var(--green); }
.inf-warn { font-size: 11.5px; color: var(--gold); background: rgba(242, 193, 78, .08); border: 1px solid rgba(242, 193, 78, .3); border-radius: 8px; padding: 5px 8px; margin: 0; }
.inf-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inf-busca { flex: 1; min-width: 160px; }
.inf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.inf-vc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 10px; color: var(--text); cursor: pointer; }
.inf-vc:hover { border-color: var(--orange); background: rgba(255,213,26, .1); }
.inf-vc img { width: 46px; height: 46px; border-radius: 8px; image-rendering: pixelated; }
.inf-vc b { font-size: 11.5px; }
.inf-vc span { font-size: 9.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.inf-vip { position: absolute; right: 2px; top: 2px; background: var(--gold); color: #241a00; font-size: 8.5px;
  font-weight: 900; padding: 0 3px; border-radius: 4px; font-style: normal; }
.inf-vh { display: flex; align-items: center; gap: 10px; }
.inf-vh .inf-vip { position: static; margin-left: 5px; }
.inf-pt { width: 58px; height: 58px; border-radius: 10px; image-rendering: pixelated; }
.inf-back { white-space: nowrap; }
.inf-bj { display: flex; gap: 10px; align-items: flex-start; }
.inf-bj > img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; }
.inf-bj > div { flex: 1; min-width: 0; }
.inf-bj .chips { margin-bottom: 6px; }
.inf-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; gap: 10px;
  align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmp-col { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: rgba(255, 255, 255, .02); display: flex; flex-direction: column; gap: 6px; }
.cmp-h { display: flex; align-items: center; gap: 8px; }
.cmp-h b { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--orange); }
.cmp-h .dsel { margin-left: auto; }
.cmp-r { display: flex; gap: 6px; }
.cmp-r .dsel { flex: 1; min-width: 0; font-size: 12px; padding: 6px 8px; }
.cmp-it { display: flex; align-items: center; gap: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.cmp-it b { font-size: 12.5px; display: block; }
.cmp-it small { color: var(--muted); font-size: 10.5px; }
.cmp-t td:nth-child(2), .cmp-t td:nth-child(3), .cmp-t td:nth-child(4) { font-family: var(--mono); text-align: right; }
.cmp-t tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .018); }
.cmp-t { table-layout: fixed; }
.cmp-t th:first-child, .cmp-t td:first-child { width: 34%; }
.cmp-t .cv { display: inline-block; min-width: 72px; text-align: center; padding: 2px 9px; border-radius: 999px;
  border: 1px solid transparent; font-weight: 700; }
.cmp-t .cv.cv-up { color: var(--green); background: rgba(74, 222, 128, .13); border-color: rgba(74, 222, 128, .45); }
.cmp-t .cv.cv-dn { color: #ff8a9a; background: rgba(244, 63, 94, .11); border-color: rgba(244, 63, 94, .4); }
.cmp-t .cv.cv-eq { color: var(--text-2); background: rgba(255, 255, 255, .05); border-color: var(--line); }
.cmp-t .cdif { display: inline-block; font-weight: 800; font-size: 10.5px; white-space: nowrap;
  padding: 1px 6px; border-radius: 999px; border: 1px solid transparent; }
.cmp-t .cdif.up { color: var(--green); background: rgba(74, 222, 128, .14); border-color: rgba(74, 222, 128, .45); }
.cmp-t .cdif.down { color: #ff8a9a; background: rgba(244, 63, 94, .12); border-color: rgba(244, 63, 94, .45); }
.cmp-t .cdif.eq { color: var(--muted); }
.cmp-t th:nth-child(2), .cmp-t th:nth-child(3), .cmp-t th:nth-child(4) { text-align: right; }
.inf-ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.inf-oit { display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 8px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text); cursor: pointer; }
.inf-oit:hover { border-color: var(--orange); background: rgba(255,213,26, .1); }
.inf-oit b { font-size: 12px; }
.inf-oit small { display: block; color: var(--muted); font-size: 10.5px; }
.inf-oi img, .inf-oit img { width: 30px; height: 30px; image-rendering: pixelated; }
.inf-hl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
@media (max-width: 760px) { .cmp-cols { grid-template-columns: 1fr; } .inf-tabs { grid-template-columns: repeat(4, 1fr); } }
.setrank { display: flex; flex-direction: column; gap: 8px; }
.setr { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: rgba(255, 255, 255, .02); }
.setr.eu { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .06); }
.setr-pos { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal;
  font-weight: 900; font-size: 12px; background: var(--bg-3); color: var(--muted); border: 2px solid var(--line-2); }
.setr-pos.p1 { background: linear-gradient(180deg, #ffd978, #d79a16); color: #2a1d00; border-color: #ffe9a8; }
.setr-pos.p2 { background: linear-gradient(180deg, #e3e8f2, #9aa3b5); color: #1c2130; border-color: #f1f4fa; }
.setr-pos.p3 { background: linear-gradient(180deg, #e2cc6a, #a99333); color: #2a1500; border-color: #f0c79a; }
.setr-m { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.setr-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.setr-t b { font-size: 13.5px; }
.setr-t .chip { font-size: 10px; padding: 1px 7px; }
.setr-t .chip.ok { color: var(--green); border-color: rgba(74, 222, 128, .5); }
.setr-ic { display: flex; gap: 3px; flex-wrap: wrap; }
.setr-p { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.setr-p img { width: 24px; height: 24px; image-rendering: pixelated; }
.setr-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.setr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); }
.setr-n { display: grid; grid-template-columns: repeat(2, minmax(62px, 1fr)); gap: 2px 10px; text-align: right; }
.setr-n small { display: block; color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; }
.setr-n b { font-family: var(--mono); font-size: 12px; }
.train-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 10px 0; }
.train-opts .trn { display: flex; flex-direction: column; align-items: stretch; gap: 5px; text-align: left;
  padding: 9px 11px; background: var(--bg-2); border: 1px solid var(--line-2); border-left: 3px solid var(--orange);
  color: var(--text); border-radius: 10px; }
.train-opts .trn:hover:not(:disabled) { background: rgba(255,213,26, .1); border-color: var(--orange); }
.train-opts .trn:disabled { opacity: .5; }
.train-opts .trn > b { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--orange-2); }
.train-opts .trn small { font-weight: 500; opacity: .9; font-size: 10.5px; color: var(--muted); }
.train-opts .trn.on { border-color: var(--gold); border-left-color: var(--gold); }
.train-opts .trn.ml { grid-column: 1 / -1; }
.trn-eq { font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
  background: rgba(242, 193, 78, .18); color: var(--gold); border-radius: 5px; padding: 1px 5px; }
.trn-g { display: grid; gap: 2px; }
.trn-g > div { display: grid; grid-template-columns: 1fr auto 42px; align-items: baseline; gap: 8px; font-size: 11.5px; }
.trn-g span { color: var(--muted); }
.trn-g b { font-family: var(--mono); color: var(--text); font-weight: 600; }
.trn-g i { font-style: normal; font-weight: 800; color: var(--green); text-align: right; }
.trn-g i.zero { color: var(--muted); font-weight: 600; }
.trn-leg { margin-top: -4px; }
.setr.slim { padding: 6px 10px; }
.setr.slim .setr-n { grid-template-columns: repeat(2, minmax(58px, 1fr)); }
.setsrc { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.setsrc-b { border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; background: rgba(255, 255, 255, .02); }
.setsrc-b b { font-size: 12px; color: var(--orange-2); }
.setsrc-b small { color: var(--muted); font-size: 10.5px; }
.setsrc-b .setr-ic { margin: 5px 0; }
@media (max-width: 620px) { .setr { grid-template-columns: 30px 1fr; } .setr-n { grid-column: 2; text-align: left; } }
.chip.mis { --mc: #3cc7ff; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 7px;
  background: linear-gradient(90deg, rgba(60, 199, 255, .2), rgba(60, 199, 255, .07));
  border-color: rgba(60, 199, 255, .55); color: #bfe9ff; box-shadow: inset 2px 0 0 var(--mc); }
.chip.mis > i { width: 7px; height: 7px; border-radius: 50%; background: var(--mc); flex: 0 0 auto;
  box-shadow: 0 0 0 0 var(--mc); animation: misPulse 1.9s ease-out infinite; }
.chip.mis > b { font-size: 10px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: var(--mc);
  background: rgba(0, 0, 0, .3); border-radius: 5px; padding: 1px 5px; }
.chip.mis > em { font-style: normal; font-family: var(--mono); font-size: 11px; color: #fff;
  border-left: 1px solid rgba(255, 255, 255, .2); padding-left: 7px; }
.chip.mis.mis-ok { --mc: var(--gold); background: linear-gradient(90deg, rgba(242, 193, 78, .24), rgba(242, 193, 78, .08));
  border-color: rgba(242, 193, 78, .6); color: #ffe6ab; }
.chip.mis.mis-ok > i { animation-duration: 1.1s; }
@keyframes misPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mc) 70%, transparent); }
  70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.win .panel > .dtabs,
.win .panel > .pf-tabs,
.win .panel > .tabs {
  position: sticky; top: -10px; z-index: 6; margin: -10px -12px 10px; padding: 10px 12px 0;
  background: #0f121a; box-shadow: 0 8px 10px -8px rgba(0, 0, 0, .85);
}
.rk-me { display: flex; align-items: center; gap: 12px; margin: 10px 0 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,219,60, .35);
  background: linear-gradient(90deg, rgba(255,216,40, .10), transparent 70%); }
.rk-me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rk-face { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px #2a3142; background: #0b0e13; flex: 0 0 auto; }
.rk-face.sm { width: 38px; height: 38px; }
.rk-pts { font-size: 16px; color: #ffd7a8; }
.rk-tier { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .3px; border: 1px solid currentColor; }
.rk-tier.t0 { color: #c9b55a; } .rk-tier.t1 { color: #c9d1dc; } .rk-tier.t2 { color: #ffcc4d; }
.rk-tier.t3 { color: #6fe0d0; } .rk-tier.t4 { color: #7cc4ff; } .rk-tier.t5 { color: #e48bff; }
.rk-ev { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,225,90, .25); background: rgba(255,219,60, .04); margin-bottom: 8px; }
.rk-ev.on { border-color: rgba(255,225,90, .7); background: linear-gradient(90deg, rgba(255,219,60, .16), transparent 75%); }
.rk-ev-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rk-ev-head .ic { width: 16px; height: 16px; } .rk-ev-head b { color: #ffd9a0; font-size: 13.5px; }
.rk-ev-left { margin-left: auto; font-size: 12px; color: var(--orange-2, #ffe46b); font-variant-numeric: tabular-nums; }
.rk-ev-me { margin-top: 8px; font-size: 12.5px; font-weight: 600; }
.rk-ev-top { margin-top: 6px; }
.rk-box { padding: 12px; border-radius: 12px; border: 1px solid var(--line, #2a2f3a); background: rgba(255, 255, 255, .02); margin-bottom: 8px; }
.rk-box.wait { border-color: rgba(120, 170, 255, .5); background: linear-gradient(90deg, rgba(90, 140, 255, .10), transparent 70%); }
.rk-box.live { border-color: rgba(232, 62, 77, .6); background: linear-gradient(90deg, rgba(232, 62, 77, .12), transparent 70%); }
.rk-vs { display: flex; align-items: center; gap: 12px; }
.rk-vs > div:first-of-type, .rk-vs > div:nth-child(2) { flex: 1; min-width: 0; }
.rk-score { font: 800 22px/1 var(--mono, monospace); color: #fff; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .35); }
.rk-go { padding: 9px 16px; font-weight: 800; letter-spacing: .4px; }
.rk-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(124, 196, 255, .25); border-top-color: #7cc4ff; animation: rkspin 1s linear infinite; flex: 0 0 auto; }
@keyframes rkspin { to { transform: rotate(360deg); } }
.rk-log { display: flex; flex-direction: column; gap: 4px; }
.rk-row { display: grid; grid-template-columns: 22px 1fr auto 46px auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: 12.5px; }
.rk-row b { text-align: center; border-radius: 5px; font-size: 11px; padding: 1px 0; }
.rk-row.w b { background: rgba(52, 224, 122, .2); color: #34e07a; } .rk-row.l b { background: rgba(232, 62, 77, .2); color: #ff6b78; } .rk-row.d b { background: rgba(200, 200, 200, .15); color: #ccc; }
.rk-row .rk-d { text-align: right; font-family: var(--mono, monospace); font-weight: 700; }
.rk-row.w .rk-d { color: #34e07a; } .rk-row.l .rk-d { color: #ff6b78; }
.hs-rkp.t0 { color: #e0cb70; } .hs-rkp.t1 { color: #d6dde8; } .hs-rkp.t2 { color: #ffcc4d; } .hs-rkp.t3 { color: #6fe0d0; } .hs-rkp.t4 { color: #7cc4ff; } .hs-rkp.t5 { color: #e48bff; }
.hs-ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.bossbar.ranked { border-color: #7a6714; background: linear-gradient(180deg, rgba(38, 18, 8, .92), rgba(14, 8, 4, .92)); }
.bossbar.ranked .bb-fill { background: linear-gradient(180deg, #ffe15a, #e2bd1a 55%, #8a7208); }
.rk-count[hidden] { display: none !important; }
.rk-count { position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 99980; pointer-events: none; font-family: "NjNaruto", var(--font); font-size: 96px; font-weight: 900; line-height: 1;
  color: #ffe77a; text-shadow: 0 0 0 #000, 0 4px 0 #5a4b06, 0 0 24px rgba(255,216,40, .8), 0 0 2px #000; letter-spacing: 2px; white-space: nowrap; }
.rk-count.go { color: #ff5a4a; } .rk-count.rk-win { color: #34e07a; font-size: 64px; } .rk-count.rk-lose { color: #ff6b78; font-size: 64px; }
.rk-count.pop { animation: rkpop .45s ease-out; }
@keyframes rkpop { from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@media (max-width: 760px) { .rk-count { font-size: 64px; } .rk-count.rk-win, .rk-count.rk-lose { font-size: 40px; } .rk-row { grid-template-columns: 22px 1fr 40px auto; } .rk-row > span:nth-child(3) { display: none; } }
.win.wood { --wd-gold: #ffdd47; --wd-gold2: #ffd61f; --wd-line: rgba(255,214,31, .28); --wd-txt: #e8ebf3; --wd-mut: #a3abbe; }
.win.wood .win-body { color: var(--wd-txt); }
.wood .wd-head, .wood .fg-head { display: flex; align-items: center; gap: 14px; padding: 6px 4px 12px; flex-wrap: wrap; }
.wood .wd-seal, .wood .fg-seal { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; transform: rotate(45deg); border: 2px solid #ffd61f;
  background: linear-gradient(135deg, #1d2330, #0b0e13); box-shadow: 0 0 0 2px #06080c, 0 4px 12px rgba(0, 0, 0, .6); }
.wood .wd-seal > *, .wood .fg-seal > * { transform: rotate(-45deg); width: 26px; height: 26px; color: #ffdd47; }
.wood .fg-seal svg { width: 30px; height: 30px; }
.wood .wd-title, .wood .fg-title { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.wood .wd-title b, .wood .fg-title b { font-family: "NjNaruto", var(--font); font-size: 24px; letter-spacing: 1.5px; color: var(--wd-gold); text-transform: uppercase; text-shadow: 0 2px 0 #000; white-space: nowrap; }
.wood .wd-title span, .wood .fg-title span { font-size: 11px; letter-spacing: 1.4px; color: var(--wd-mut); }
.wood .wd-box { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 8px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(0, 0, 0, .35); min-width: 96px; }
.wood .wd-box small { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wd-gold2); font-weight: 800; }
.wood .wd-box b { color: var(--wd-txt); font-size: 13.5px; }
.wood .wd-btn { padding: 9px 16px; border-radius: 8px; border: 1px solid #ffdd47; cursor: pointer; font-weight: 900; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #1a0f05; background: linear-gradient(180deg, #ffdd46, #e2bd1a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 8px rgba(0, 0, 0, .5); white-space: nowrap; }
.wood .wd-btn:hover:not(:disabled) { filter: brightness(1.08); }
.wood .wd-btn:disabled { opacity: .45; cursor: default; }
.wood .wd-btn.sm { padding: 5px 11px; font-size: 13px; }
.wood .wd-tabbar { display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--wd-line); margin-bottom: 12px; flex-wrap: wrap; }
.wood .wd-tabs, .wood .fg-tabs { display: flex; flex: 1; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.wood .fg-tabs { border-bottom: 1px solid var(--wd-line); margin-bottom: 12px; }
.wood .wd-tabs button, .wood .fg-tab { flex: 1 1 auto; padding: 9px 12px 10px; background: none; border: 0; color: var(--wd-txt); font-weight: 800; font-size: 12.5px; letter-spacing: .6px; cursor: pointer; position: relative; opacity: .85; }
.wood .wd-tabs button:hover, .wood .fg-tab:hover { opacity: 1; color: #fff; }
.wood .wd-tabs button.active, .wood .fg-tab.active { color: var(--wd-gold); opacity: 1; }
.wood .wd-tabs button.active::after, .wood .fg-tab.active::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--wd-gold), transparent); box-shadow: 0 0 8px var(--wd-gold); }
.wood .wd-title, .wood .fg-title { flex: 1 0 auto; min-width: max-content; }
.wood .wd-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.wood .wd-grp { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; text-align: left; min-width: 0;
  border: 1px solid rgba(255,214,31, .3); background: linear-gradient(180deg, rgba(255,214,31, .08), rgba(0, 0, 0, .28)); color: var(--wd-txt); }
.wood .wd-grp > i { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(0, 0, 0, .35); color: #ffdd47; }
.wood .wd-grp > i .ic, .wood .wd-grp > i svg { width: 18px; height: 18px; }
.wood .wd-grp span { display: flex; flex-direction: column; min-width: 0; }
.wood .wd-grp b { font-size: 14px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.wood .wd-grp small { font-size: 11px; color: var(--wd-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wood .wd-grp:hover:not(.active) { border-color: rgba(255,221,70, .65); color: #fff; }
.wood .wd-grp.active { background: linear-gradient(180deg, #ffdd46, #e2bd1a); border-color: #ffe572; color: #1a0f05;
  box-shadow: 0 0 14px rgba(255,214,31, .35), inset 0 1px 0 rgba(255, 255, 255, .4); }
.wood .wd-grp.active > i { background: rgba(26, 15, 5, .22); color: #1a0f05; }
.wood .wd-grp.active small { color: rgba(26, 15, 5, .75); }
@media (max-width: 560px) { .wood .wd-grp { padding: 7px 8px; gap: 6px; } .wood .wd-grp small { display: none; } .wood .wd-grp > i { flex-basis: 28px; height: 28px; } }
.wood .wd-seg { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(0, 0, 0, .3); }
.wood .wd-seg button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 0; border-radius: 6px; background: none; color: var(--wd-mut); font-weight: 800; font-size: 11px; cursor: pointer; }
.wood .wd-seg button .ic { width: 13px; height: 13px; }
.wood .wd-seg button.active { background: linear-gradient(180deg, #ffdd46, #e2bd1a); color: #1a0f05; }
.wood .wd-filters { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.wood .wd-filters label { display: flex; flex-direction: column; gap: 5px; }
.wood .wd-filters label.grow { flex: 1 1 180px; }
.wood .wd-filters small { font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--wd-gold2); font-weight: 800; }
.wood .wd-in, .wood .wd-filters select { padding: 10px 12px; border-radius: 8px; border: 1px solid #2a3142; background: #0a0d12; color: var(--wd-txt); font-size: 13px; font-weight: 700; }
.wood .wd-in:focus { outline: none; border-color: var(--wd-gold); }
.wood .wd-podium { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 14px; align-items: end; margin-bottom: 16px; }
.wood .wd-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px 14px; cursor: pointer; border: 1px solid #2a3142;
  background: #0a0d12; min-height: 210px; }
.wood .wd-pod.p1 { min-height: 240px; border-color: var(--wd-gold); box-shadow: 0 0 18px rgba(255,214,31, .2), inset 0 0 30px rgba(255,214,31, .06); }
.wood .wd-pod.empty { border-style: dashed; opacity: .35; cursor: default; min-height: 180px; }
.wood .wd-pod:hover:not(.empty) { filter: brightness(1.1); }
.wood .wd-pod.me { outline: 2px solid #ffd61f; }
.wood .wd-pod-top { align-self: stretch; display: flex; justify-content: space-between; align-items: center; }
.wood .wd-pod-top small { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 900; color: var(--wd-gold2); }
.wood .wd-pod-top .hs-medal { width: 26px; height: 26px; }
.wood .wd-crown { color: #ffd34d; font-size: 22px; line-height: 1; margin-bottom: -6px; text-shadow: 0 2px 4px #000; }
.wood .wd-ring { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #2a3142;
  background: radial-gradient(circle, rgba(120, 140, 190, .14), rgba(0, 0, 0, .35) 70%); box-shadow: inset 0 0 18px rgba(0, 0, 0, .6); }
.wood .p1 .wd-ring { width: 96px; height: 96px; border-color: var(--wd-gold); background: radial-gradient(circle, rgba(255,219,60, .3), rgba(40, 20, 5, .5) 70%); }
.wood .p3 .wd-ring { background: radial-gradient(circle, rgba(230,199,60, .2), rgba(0, 0, 0, .35) 70%); }
.wood .wd-pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 96px; padding: 6px 14px; border-radius: 10px; font-weight: 900; font-size: 16px;
  color: #fff; background: linear-gradient(180deg, #2f9a64, #1f6e46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.wood .wd-pill.gold { color: #1a0f05; background: linear-gradient(180deg, #ffdd47, #e2bd1a); }
.wood .wd-pill.sm { min-width: 70px; padding: 3px 10px; font-size: 12px; border-radius: 8px; }
.wood .wd-pill img { width: 16px; height: 16px; }
.wood .wd-pod-name { font-size: 15px; color: var(--wd-txt); display: inline-flex; align-items: center; gap: 6px; text-align: center; }
.wood .wd-pod-voc { color: var(--wd-mut); font-size: 11px; margin-top: -6px; }
.wood .wd-on { width: 7px; height: 7px; border-radius: 50%; background: #34e07a; box-shadow: 0 0 6px #34e07a; display: inline-block; }
.wood .wd-row { display: grid; grid-template-columns: 44px 100px minmax(140px, 1.6fr) minmax(90px, 1fr) minmax(90px, 1fr); gap: 10px; align-items: center; padding: 8px 12px;
  margin-bottom: 6px; border: 1px solid #232a38; background: #0d1117; cursor: pointer; }
.wood .wd-row:hover:not(.wd-rhead) { border-color: rgba(255,214,31, .7); background: rgba(255,214,31, .05); }
.wood .wd-row.me { border-color: #ffd61f; }
.wood .wd-rhead { border: 0; border-bottom: 1px solid var(--wd-line); background: none; cursor: default; font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 800; color: var(--wd-gold2); margin-bottom: 8px; }
.wood .wd-rk { color: var(--wd-gold); text-align: center; font-size: 15px; }
.wood .wd-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wood .wd-who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wood .wd-who .hs-ava { border-radius: 6px; box-shadow: 0 0 0 1px #2a3142; background: radial-gradient(circle at 50% 40%, #3a2a1a, #06080c); }
.wood .wd-c-voc, .wood .wd-c-guild { color: var(--wd-mut); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wood .wd-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wd-line); color: var(--wd-mut); font-size: 12px; }
.wood .wd-pager { display: flex; align-items: center; gap: 10px; }
.wood .fg-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wood .fg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px 4px 4px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid #2a3142; font-size: 12.5px; }
.wood .fg-chip.gold { padding: 6px 10px; color: var(--wd-gold); font-weight: 800; }
.wood .fg-chip.red { border-color: rgba(232, 62, 77, .5); }
.wood .fg-chip.violet { border-color: rgba(170, 110, 255, .55); }
.forge-slot.fg-celeste { border-color: #a46cff; box-shadow: 0 0 10px rgba(164, 108, 255, .45) inset; }
.fg-risk { margin: 8px 0; padding: 10px 12px; border: 2px solid #e83e4d; border-radius: 8px; background: rgba(232, 62, 77, .14); display: flex; flex-direction: column; gap: 4px; }
.fg-risk b { color: #ff6b77; font-size: 15px; letter-spacing: .5px; }
.fg-risk span { color: #ffd2d6; font-size: 13px; line-height: 1.35; }
.wood .fg-chip img { width: 22px; height: 22px; }
.wood .fg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; margin-bottom: 12px; }
.wood .fg-panel { border: 1px solid #2a3142; background: #0a0d12; margin-bottom: 12px; }
.wood .fg-grid .fg-panel { margin-bottom: 0; }
.wood .fg-ptitle { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid #232a38; background: rgba(255,214,31, .06);
  font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 900; color: var(--wd-gold); }
.wood .fg-ptitle small { color: var(--wd-mut); letter-spacing: 0; }
.wood .fg-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; padding: 12px; max-height: 300px; overflow: auto; }
.wood .fg-pick { position: relative; cursor: pointer; width: 46px; height: 46px; border-radius: 6px; background: #141922; border: 1px solid #2a3142; }
.wood .fg-pick:hover { border-color: var(--wd-gold); }
.wood .fg-pick.sel { border-color: #ffd61f; background: linear-gradient(180deg, rgba(255,214,31, .28), rgba(255,214,31, .08)); box-shadow: 0 0 12px rgba(255,214,31, .45); }
.wood .fg-worn { position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: #34e07a; box-shadow: 0 0 4px #34e07a; }
.wood .fg-iname { text-align: center; padding: 10px 12px 0; font-weight: 800; color: var(--wd-txt); }
.wood .fg-iname small { color: var(--wd-mut); font-weight: 600; }
.wood .fg-pair { display: flex; justify-content: center; align-items: flex-start; gap: 10px; padding: 12px 8px 6px; }
.wood .fg-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 64px; }
.wood .fg-cell small { color: var(--wd-mut); font-size: 11.5px; text-align: center; }
.wood .fg-cell .forge-slot { width: 56px; height: 56px; border-radius: 8px; background: #141922; border: 1px solid #2a3142; display: grid; place-items: center; }
.wood .fg-op { color: var(--wd-gold); font-size: 22px; margin-top: 14px; }
.wood .fg-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 6px 18px; font-size: 12.5px; }
.wood .fg-kv span { color: var(--wd-mut); }
.wood .fg-kv b { text-align: right; }
.wood .fg-status { text-align: center; font-size: 12px; color: var(--wd-mut); padding: 6px 12px 0; }
.wood .fg-status.bad { color: #ff8a80; }
.wood .fg-go { display: block; width: calc(100% - 32px); margin: 10px 16px 16px; padding: 12px; border-radius: 9px; border: 1px solid #ffdd47; cursor: pointer; font-weight: 900; letter-spacing: 1.6px;
  text-transform: uppercase; color: #1a0f05; background: linear-gradient(180deg, #ffdd46, #e2bd1a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 10px rgba(0, 0, 0, .5); }
.wood .fg-go:hover:not(:disabled) { filter: brightness(1.08); }
.wood .fg-go:disabled { opacity: .5; cursor: default; }
.wood .fg-panel .forge-stats { padding: 10px 14px; }
@media (max-width: 760px) {
  .wood .fg-grid { grid-template-columns: 1fr; }
  .wood .wd-podium { gap: 6px; } .wood .wd-pod { min-height: 170px; padding: 8px 4px; } .wood .wd-pod.p1 { min-height: 190px; }
  .wood .wd-ring, .wood .p1 .wd-ring { width: 64px; height: 64px; } .wood .wd-pill { min-width: 0; font-size: 13px; padding: 4px 8px; }
  .wood .wd-row { grid-template-columns: 34px 76px 1fr; } .wood .wd-c-voc, .wood .wd-c-guild { display: none; }
  .wood .wd-title b, .wood .fg-title b { font-size: 19px; }
}
.wood .fg-sub { padding: 10px 14px 0; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 800; color: var(--wd-mut); }
.wood .fg-doll { position: relative; display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(8, 27px); column-gap: 12px; row-gap: 0; width: max-content; margin: 10px auto 6px; }
.wood .fg-doll::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 62px; transform: translateX(-50%); border-radius: 31px; background: rgba(255,214,31, .05); border: 1px solid rgba(255,214,31, .12); }
.wood .fg-doll .fg-pick { width: 48px; height: 48px; margin: 0; box-sizing: border-box; display: grid; place-items: center; }
.wood .fg-doll .fg-pick img { max-width: 36px; max-height: 36px; }
.wood .fg-pick.vazio { cursor: default; opacity: .45; display: grid; place-items: center; }
.wood .fg-pick.vazio i, .wood .fg-pick.vazio svg { width: 20px; height: 20px; display: block; color: #6c7489; }
.wood .fg-doll .fg-pick { min-width: 0; min-height: 0; max-width: 48px; max-height: 48px; overflow: hidden; }
.wood .fg-none { padding: 8px 14px 14px; font-size: 12px; color: var(--wd-mut); }
.wood .fg-items { max-height: 180px; }
.wb-card.mec { border-color: rgba(255,214,31, .4); background: linear-gradient(90deg, rgba(255,214,31, .08), transparent 65%); }
.wb-card.mec.alive { border-color: rgba(255,221,71, .9); }
.wb-card.off { opacity: .6; }
.mec-tag { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #ffe77a;
  border: 1px solid rgba(255,221,71, .45); background: rgba(255,214,31, .10); }
.mec-btns { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.mec-btns .btn { white-space: nowrap; }
.mec-auto { border-color: rgba(255,221,71, .45); color: #ffe77a; background: rgba(255,214,31, .08); font-weight: 800; letter-spacing: .04em; }
.mec-auto:disabled { opacity: .45; }
.mec-wins.ok { color: #9be39b; }
.bossbar.mec { border-color: #7a6714; background: linear-gradient(180deg, rgba(40, 24, 8, .92), rgba(14, 10, 4, .92)); }
.bossbar.mec .bb-fill { background: linear-gradient(180deg, #ffe46a, #e2bd1a 55%, #8a7208); }
.modal.mr-modal .modal-box { width: min(460px, calc(calc(100 * var(--vw)) - 24px)); }
.mr { display: flex; flex-direction: column; gap: 10px; }
.mr .mis-art.big { height: 96px; }
.mr-head { display: flex; align-items: center; gap: 10px; }
.mr-head .mis-rank { min-width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
.mr-head > div { display: flex; flex-direction: column; min-width: 0; }
.mr-head > div > b { font-size: 16px; color: #fff; line-height: 1.2; }
.mr-head > div > span { font-size: 12px; color: var(--muted); }
.mr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.mr-stat { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--c-line); background: var(--c-bg); min-width: 0; }
.mr-stat > i { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--c); background: var(--c-bg2); }
.mr-stat > i .ic, .mr-stat > i svg { width: 15px; height: 15px; }
.mr-stat > div { display: flex; flex-direction: column; min-width: 0; }
.mr-stat span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.mr-stat b { font: 700 13px/1.25 var(--mono, monospace); color: var(--c); overflow-wrap: anywhere; }
.mr .mis-art .mis-tag { display: none; }
.mr-stat em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #0b0d12; background: var(--c); border-radius: 999px; padding: 0 6px; align-self: flex-start; margin-top: 2px; }
.mr-stat.exp { --c: #c9a4ff; --c-bg: rgba(169, 112, 255, .08); --c-bg2: rgba(169, 112, 255, .18); --c-line: rgba(169, 112, 255, .35); }
.mr-stat.gold { --c: #f2c14e; --c-bg: rgba(242, 193, 78, .07); --c-bg2: rgba(242, 193, 78, .18); --c-line: rgba(242, 193, 78, .35); }
.ps-buy.prize { background: linear-gradient(180deg, #2c9b56, #1d7040) !important; border-color: #5ff59a !important; }
.ps-fclock.prize { border-color: rgba(95, 245, 154, .5); color: #8ff7b6; }
.mr-stat.elo { --c: #ffe15c; --c-bg: rgba(255,219,60, .07); --c-bg2: rgba(255,219,60, .18); --c-line: rgba(255,219,60, .35); }
.mr-stat.lv { --c: #bdc4d4; --c-bg: rgba(255, 255, 255, .03); --c-bg2: rgba(255, 255, 255, .07); --c-line: rgba(255, 255, 255, .1); }
.mr-stat.lv.up { --c: #4ade80; --c-bg: rgba(74, 222, 128, .07); --c-bg2: rgba(74, 222, 128, .18); --c-line: rgba(74, 222, 128, .4); }
.mr-sec { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.mr-sec::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .08); }
.mr-items { display: flex; flex-direction: column; gap: 6px; }
.mr-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06);
  animation: mrin .35s ease-out both; }
.mr-item:nth-child(2) { animation-delay: .08s; } .mr-item:nth-child(3) { animation-delay: .16s; }
.mr-item .islot { width: 44px; height: 44px; flex: 0 0 44px; }
.mr-item .islot img { width: 32px; height: 32px; image-rendering: pixelated; }
.mr-item-t { display: flex; flex-direction: column; min-width: 0; }
.mr-item-t b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-item-t span { font-size: 11.5px; color: var(--muted); }
.mr-item-t .mr-depot { color: #ffdd47; }
.mr-item.brilho.q3 { border-color: rgba(178, 92, 255, .45); background: linear-gradient(90deg, rgba(178, 92, 255, .14), transparent 70%); }
.mr-item.brilho.q4 { border-color: rgba(255, 59, 59, .5); background: linear-gradient(90deg, rgba(255, 59, 59, .14), transparent 70%); }
@keyframes mrin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mr-none { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .1); color: var(--muted); font-size: 12.5px; }
.mr-none .islot { width: 44px; height: 44px; flex: 0 0 44px; opacity: .5; }
.mr-ok { width: 100%; padding: 10px; font-weight: 800; letter-spacing: .4px; margin-top: 2px; }
@media (max-width: 480px) { .mr-stats { grid-template-columns: 1fr 1fr; } .mr-stat.lv { grid-column: span 2; } }
.drop-strip { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 4px; }
.wb-card .drop-strip { align-items: flex-start; }
.drop-strip > small { font-size: 10.5px; color: var(--text-2); font-weight: 600; }
.drop-pcs { display: flex; gap: 4px; }
.drop-pcs .li { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.drop-strip .hd-rar { justify-content: center; }
.wb-card .drop-strip .hd-rar { justify-content: flex-start; }
.sense-card { position: fixed; left: 50%; top: 15%; z-index: 9730; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px;
  border-radius: 14px; background: rgba(12, 16, 26, .86); border: 1px solid rgba(255,224,84, .55); box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  transform: translate(-50%, -6px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.sense-card.show { opacity: 1; transform: translate(-50%, 0); }
.sense-card .sc-arrow { width: 46px; height: 46px; flex: none; transition: transform .35s ease; }
.sense-card .sc-arrow svg { width: 100%; height: 100%; fill: #ffe054; filter: drop-shadow(0 0 6px rgba(255,224,84, .7)); }
.sense-card .sc-arrow.hidden { display: none; }
.sense-card .sc-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sense-card .sc-txt b { color: #ffd2a8; font-size: 15px; }
.sense-card .sc-txt span { color: #e8ecf5; font-size: 13.5px; }
.sense-card .sc-txt small { color: #b3bacb; font-size: 11.5px; font-family: var(--mono); }
.sense-card .sc-txt .sc-info { color: #9fe0ff; font-size: 12.5px; font-style: normal; font-weight: 600; max-width: 340px; }
.sense-card .sc-txt .sc-info[hidden] { display: none; }
.sense-card.perto { border-color: rgba(120, 220, 140, .6); }
@media (max-width: 760px) { .sense-card { top: 14%; padding: 8px 12px 8px 8px; } .sense-card .sc-arrow { width: 36px; height: 36px; } }
.setr-modo { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(63, 207, 91, .5);
  background: linear-gradient(90deg, rgba(63, 207, 91, .16), rgba(63, 207, 91, .03)); }
.setr-modo .setr-pill { font-weight: 900; letter-spacing: 1.4px; font-size: 13px; padding: 6px 12px; border-radius: 8px; white-space: nowrap;
  background: linear-gradient(180deg, #5be37a, #2fae4b); color: #052512; box-shadow: 0 0 16px rgba(63, 207, 91, .35); }
.setr-modo > div > b { display: block; font-size: 14px; }
.setr-modo.so-selo { padding: 8px 10px; }
.setr-modo small { display: block; color: var(--text-2); font-size: 11.5px; margin-top: 2px; }
.setr-modo.max { border-color: rgba(255, 59, 59, .5); background: linear-gradient(90deg, rgba(255, 59, 59, .16), rgba(255, 59, 59, .03)); }
.setr-modo.max .setr-pill { background: linear-gradient(180deg, #ff6b6b, #d22d2d); color: #2b0505; box-shadow: 0 0 16px rgba(255, 59, 59, .35); }
.setr-modo.acc { border-color: rgba(255,213,26, .5); background: linear-gradient(90deg, rgba(255,213,26, .16), rgba(255,213,26, .03)); }
.setr-modo.acc .setr-pill { background: linear-gradient(180deg, #ffe057, #e8c112); color: #2a1100; box-shadow: 0 0 16px rgba(255,213,26, .35); }
.setrank.base .setr { border-left: 3px solid rgba(63, 207, 91, .7); }
.acc-ctl { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.acc-ctl .dchips { margin: 0; padding: 0; }
.acc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.tl { display: flex; flex-direction: column; gap: 6px; }
.tl-row { display: grid; grid-template-columns: 52px 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .02); }
.tl-l { display: grid; place-items: center; font-size: 26px; font-weight: 900; color: #1a1206; background: var(--tc);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35); box-shadow: inset -6px 0 12px rgba(0, 0, 0, .18); }
.tl-items { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
.tl-it { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .2); min-width: 160px; flex: 1 1 160px; max-width: 240px; cursor: default; }
.tl-it:hover { border-color: var(--tc); }
.tl-it.extra { border-color: rgba(178, 92, 255, .55); background: rgba(178, 92, 255, .08); }
.tl-it.off { opacity: .55; }
.tl-it .islot { width: 38px; height: 38px; flex-shrink: 0; cursor: default; }
.tl-it .islot img { width: 30px; height: 30px; image-rendering: pixelated; }
.tl-it b { display: block; font-size: 11.5px; line-height: 1.2; }
.tl-it small { font-size: 10px; color: var(--muted); }
.onde { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 12px; align-items: start; }
.onde-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.onde-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,213,26, .12), rgba(255, 255, 255, .02)); }
.onde-big { width: 58px; height: 58px; flex-shrink: 0; cursor: default; }
.onde-big img { width: 44px; height: 44px; image-rendering: pixelated; }
.onde-nome { display: block; font-size: 16px; }
.onde-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.onde-chips .chip { font-size: 10.5px; padding: 1px 8px; }
.onde-desc { margin: 0; font-size: 12px; color: var(--text-2); font-style: italic; }
.onde-fontes { display: flex; flex-direction: column; gap: 8px; }
.onde-f { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.onde-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #241000;
  background: linear-gradient(180deg, #ffe366, #e8c112); box-shadow: 0 0 12px rgba(255,213,26, .3); }
.onde-ic svg { width: 18px; height: 18px; }
.onde-fb { min-width: 0; }
.onde-fb h4 { margin: 0 0 3px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--orange); }
.onde-fb > p { margin: 0 0 6px; font-size: 12.5px; color: var(--text-2); }
.onde-hunts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 4px; }
.onde-hunt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); text-align: center; }
.onde-hunt img, .onde-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; image-rendering: pixelated; background: #0b0e15; display: grid; place-items: center; color: var(--muted); }
.onde-noimg svg { width: 22px; height: 22px; }
.onde-hunt b { font-size: 10.5px; line-height: 1.15; }
.onde-hunt small, .onde-p small, .onde-r small { font-size: 9.5px; color: var(--muted); }
.onde-pp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.onde-p { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 74px; padding: 4px 2px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); text-align: center; }
.onde-face { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255,213,26, .25), rgba(0, 0, 0, .35)); border: 1px solid rgba(255,213,26, .35); }
.onde-p b { font-size: 10px; line-height: 1.15; }
.onde-mais { display: grid; place-items: center; min-width: 46px; border-radius: 8px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 12px; font-weight: 700; }
.onde-mis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 4px; }
.onde-m { display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.onde-m b { display: block; font-size: 11px; line-height: 1.15; }
.onde-m small { display: block; font-size: 10px; color: var(--muted); }
.onde-rar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.onde-r { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; }
.onde-r .islot { cursor: default; }
.onde-r b { font-size: 10.5px; }
.onde-side { position: sticky; top: 4px; display: flex; flex-direction: column; gap: 4px; }
.onde-sideh { font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.onde-card { position: static !important; max-width: none !important; width: auto !important; pointer-events: auto; }
@media (max-width: 640px) { .onde { grid-template-columns: 1fr; } .onde-side { position: static; } .inf-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#screen-create { background: radial-gradient(1200px 600px at 50% -10%, rgba(255,212,20, .14), transparent 60%), var(--bg-0); }
.create-header { margin-bottom: 18px; }
.create-logo { display: block; height: 118px; margin: 0 auto 6px; filter: drop-shadow(0 8px 28px rgba(255,212,20, .35)); }
.create-sub { margin: 0; color: var(--text-2); font-size: 14px; }
.voc-filter { gap: 8px; margin-bottom: 14px; }
.voc-filter button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 12.5px; }
.voc-filter button em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--text-2); }
.voc-filter .vf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 8px var(--cc); }
.voc-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.voc-group { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 6px 2px -2px; }
.voc-group b { font-size: 12px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text); }
.voc-group span { font-size: 11.5px; color: var(--muted); }
.voc-group::after { content: ""; flex: 1; height: 1px; align-self: center; background: linear-gradient(90deg, var(--line-2), transparent); }
.voc-group.vip b { background: linear-gradient(90deg, #ffe08a, #ffdb3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.voc-group:not(:first-child) { margin-top: 16px; }
.voc-card { padding: 8px 6px 12px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #1b2030 0%, #141824 100%); border: 1px solid #262d3f; }
.voc-card::before { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--cc); opacity: .75; }
.voc-card:hover { transform: translateY(-3px); border-color: #3a4560; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.voc-card.selected { border-color: var(--orange); background: linear-gradient(180deg, #2a1d14 0%, #161a26 100%);
  box-shadow: 0 0 0 1px var(--orange), 0 10px 28px rgba(255,213,26, .22); }
.voc-card.selected::before { left: 0; right: 0; opacity: 1; }
.voc-stage { position: relative; display: grid; place-items: center; height: 74px; }
.voc-stage .sprite-box { position: relative; z-index: 1; margin: 0; transition: transform .15s; }
.voc-card:hover .voc-stage .sprite-box, .voc-card.selected .voc-stage .sprite-box { transform: scale(1.08); }
.voc-ped { position: absolute; left: 50%; bottom: 4px; width: 62px; height: 16px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cc) 55%, transparent), transparent); opacity: .5; transition: opacity .15s; }
.voc-card:hover .voc-ped, .voc-card.selected .voc-ped { opacity: 1; }
.voc-card .voc-name { margin-top: 2px; font-size: 13px; font-weight: 800; letter-spacing: .2px; }
.voc-card .vip-badge { top: 7px; right: 7px; font-size: 8.5px; box-shadow: 0 2px 8px rgba(242, 193, 78, .35); }
.voc-card .day-badge { top: 6px; left: 7px; transform: none; }
.voc-card.locked::after { top: 30px; }
.voc-detail { padding: 0; overflow: hidden; border-radius: 16px; border: 1px solid #262d3f; background: linear-gradient(180deg, #161a26, #12151e); }
.voc-detail > *:not(.vd-hero) { margin-left: 16px; margin-right: 16px; }
.vd-hero { position: relative; text-align: center; padding: 18px 16px 14px;
  background: radial-gradient(240px 160px at 50% 40%, color-mix(in srgb, var(--cc) 30%, transparent), transparent 70%), linear-gradient(180deg, #1e2332, #161a26);
  border-bottom: 1px solid #262d3f; }
.vd-hero .portrait { height: 150px; margin: 0 auto 6px; display: block; }
.vd-hero h3 { margin: 0; font-size: 24px; font-weight: 900; }
.vd-chips { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.vd-cls { margin-top: 12px !important; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-2);
  background: color-mix(in srgb, var(--cc) 9%, transparent); border-left: 3px solid var(--cc); }
.vd-title { margin-top: 16px !important; margin-bottom: 6px; font-size: 11px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px; }
.vd-title::after { content: ""; flex: 1; height: 1px; background: #262d3f; }
.voc-detail ul.vd-jutsus { margin-top: 0; display: grid; gap: 4px; }
.voc-detail ul.vd-jutsus li { border: 0; padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, .03); align-items: center; }
.voc-detail ul.vd-jutsus li em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--orange-2); padding: 1px 7px; border-radius: 999px; background: rgba(255,213,26, .12); }
.voc-detail ul.vd-specials { margin-top: 0; display: grid; gap: 6px; }
.voc-detail ul.vd-specials li { border: 1px solid #262d3f; border-radius: 10px; padding: 8px 10px; background: rgba(255, 255, 255, .025); }
.saga-strip { gap: 6px; margin: 0 16px 16px !important; }
.saga-cell { display: grid; justify-items: center; gap: 1px; padding: 4px 3px 3px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid #222838; }
.saga-cell small { font-size: 9.5px; color: var(--muted); font-weight: 700; }
.create-footer.card { position: sticky; bottom: 12px; z-index: 5; margin-top: 22px; padding: 12px 16px; border-radius: 16px; align-items: end;
  background: rgba(18, 21, 30, .92); backdrop-filter: blur(8px); border: 1px solid #2c3446; box-shadow: 0 12px 36px rgba(0, 0, 0, .55); }
.create-footer .field { margin: 0; min-width: 220px; }
.create-header { position: relative; }
.create-back { position: absolute; left: 0; top: 0; }
.vd-pick { display: block; width: 100%; margin-top: 12px; }
.voc-detail li .sp-desc { display: none; margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--text-2); }
.create-form { display: grid; gap: 12px; min-width: min(360px, 80vw); }
.create-form .field { margin: 0; }
.create-form .field input, .create-form .field select { width: 100%; }
.create-form #create-error { text-align: center; }
@media (max-width: 760px) {
  .create-body > .voc-detail { display: none; }
  .modal.voc-sheet .voc-detail { display: block; border: 0; background: none; }
  .modal.voc-sheet .vd-hero .portrait { height: 110px; }
  .modal.voc-sheet .voc-detail li .sp-desc { display: block; }
  .create-back { position: static; margin-bottom: 8px; }
}
.login-points, .btn-points { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; color: #1a1205;
  background: linear-gradient(180deg, #ffd56a, #f2d03b); border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 6px 18px rgba(242,208,59, .28); }
.login-points:hover, .btn-points:hover { filter: brightness(1.08); }
.login-points { width: 100%; max-width: 400px; padding: 10px 14px; border-radius: 12px; }
.btn-points { margin: 0 6px 0 10px; }
.btn-points em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(26, 18, 5, .18); }
.chars-wrap { max-width: 900px; }
.chars-logo { height: 54px; filter: drop-shadow(0 6px 18px rgba(255,212,20, .35)); }
.chars-head .row { align-items: center; gap: 6px; }
.chars-count { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0; text-transform: none; margin-right: auto; margin-left: 6px; }
.chars-vip { background: linear-gradient(90deg, rgba(255, 209, 102, .16), rgba(255, 209, 102, .03) 70%); border: 1px solid rgba(255, 209, 102, .4);
  box-shadow: inset 3px 0 0 #ffd166; }
#screen-chars .card { background: rgba(14, 17, 25, .9); backdrop-filter: blur(6px); border-radius: 16px; border-color: #283044; }
.chars-list { gap: 10px; }
.char-row { position: relative; overflow: hidden; grid-template-columns: 84px 1fr auto; gap: 16px; padding: 10px 16px 10px 10px; border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cc, #ffd51a) 12%, #161b27), #141823 55%); border: 1px solid #262d40; }
.char-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cc, var(--orange)); }
.char-row:hover { border-color: var(--cc, var(--orange)); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.cr-bg { position: absolute; right: 120px; top: 50%; height: 150%; transform: translateY(-50%); opacity: .07; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); }
.cr-fig { position: relative; display: grid; place-items: center; height: 78px; }
.cr-fig .sprite-box { position: relative; z-index: 1; }
.cr-ped { position: absolute; left: 50%; bottom: 6px; width: 64px; height: 16px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cc, #ffd51a) 60%, transparent), transparent); }
.cr-info { position: relative; min-width: 0; display: grid; gap: 4px; }
.cr-top { display: flex; align-items: center; gap: 10px; }
.char-row .cname { font-size: 18px; font-weight: 900; letter-spacing: .2px; }
.cr-lv { display: inline-flex; align-items: baseline; gap: 3px; padding: 1px 8px; border-radius: 999px; font-weight: 900; font-size: 13px; color: #ffd9b8;
  background: rgba(255,213,26, .16); border: 1px solid rgba(255,213,26, .45); }
.cr-lv small { font-size: 9px; letter-spacing: .6px; color: var(--orange-2); }
.cr-voc { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text); }
.cr-voc em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--cc); }
.cr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc, var(--orange)); box-shadow: 0 0 8px var(--cc, var(--orange)); }
.cr-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-2); }
.cr-stat { display: inline-flex; align-items: center; gap: 5px; }
.cr-stat .ic { width: 14px; height: 14px; opacity: .8; }
.cr-stat.gold { color: #ffd166; } .cr-stat.elo { color: #c9a8ff; }
.cr-status { margin-top: 2px; }
.cr-state { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--text-2);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.cr-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cr-state.green { color: #6ff0a0; background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .35); }
.cr-state.purple { color: #c9a8ff; background: rgba(169, 112, 255, .1); border-color: rgba(169, 112, 255, .35); }
.cr-state.live i { animation: cr-pulse 1.4s ease-in-out infinite; }
@keyframes cr-pulse { 50% { box-shadow: 0 0 0 4px rgba(111, 240, 160, .2); } }
.char-row .cactions { position: relative; align-items: center; gap: 8px; }
.cr-play { padding: 10px 18px; font-size: 14px; font-weight: 900; border-radius: 11px; box-shadow: 0 6px 16px rgba(255,213,26, .3); }
.cr-nick { padding: 8px 12px; font-size: 12px; font-weight: 800; border-radius: 10px; color: #f2c14e; border: 1px solid rgba(242,193,78,.6); background: rgba(242,193,78,.08); }
.cr-nick:hover { background: rgba(242,193,78,.18); }
.cr-del { width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgba(244, 63, 94, .3); background: rgba(244, 63, 94, .08); color: #f78a9d; cursor: pointer; opacity: .55; }
.cr-del:hover { opacity: 1; background: rgba(244, 63, 94, .2); }
.char-new { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1.5px dashed #34405a; background: rgba(255, 255, 255, .02); color: var(--text-2); font: inherit; transition: border-color .12s, background .12s; }
.char-new b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 24px; color: var(--orange); background: rgba(255,213,26, .12); }
.char-new span { font-weight: 800; font-size: 14px; color: var(--text); } .char-new small { color: var(--muted); font-size: 11.5px; }
.char-new:hover { border-color: var(--orange); background: rgba(255,213,26, .06); }
@media (max-width: 760px) { .char-row { grid-template-columns: 64px 1fr; } .char-row .cactions { grid-column: 1 / -1; justify-content: flex-end; } .cr-bg { display: none; } }
.pix-box { display: grid; gap: 12px; }
.pix-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(60, 199, 255, .12), rgba(60, 199, 255, .02)); border: 1px solid rgba(60, 199, 255, .3); }
.pix-head b { display: block; font-size: 15px; } .pix-head span { font-size: 12px; color: var(--text-2); }
.pix-gem { display: grid; place-items: center; width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(60, 199, 255, .5)); }
.pix-gem.big { width: 44px; height: 44px; }
.pix-pkgs { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; margin: 4px 0 0; }
.pix-pkg { position: relative; gap: 4px; padding: 14px 8px 10px; border-radius: 14px; border: 1px solid #2c3550;
  background: linear-gradient(180deg, #1b2131, #141824); transition: transform .12s, border-color .12s, box-shadow .12s; }
.pix-pkg:hover { transform: translateY(-2px); border-color: #3d4a6a; }
.pix-pkg.sel { border-color: var(--chakra); box-shadow: 0 0 0 1px var(--chakra), 0 8px 22px rgba(60, 199, 255, .2); background: linear-gradient(180deg, #17283a, #141824); }
.pix-pkg > b { font-size: 22px; font-weight: 900; line-height: 1; } .pix-pkg > b small { font-size: 11px; margin-left: 3px; color: var(--chakra); }
.pix-bonus { font-size: 10.5px; font-weight: 800; color: #6ff0a0; } .pix-bonus.none { color: var(--muted); font-weight: 600; }
.pix-price { margin-top: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--text); background: rgba(255, 255, 255, .06); }
.pix-pkg.sel .pix-price { background: var(--chakra); color: #06202c; }
.pix-tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 9px; font-weight: 900; letter-spacing: .6px;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; color: #1a1205; background: linear-gradient(135deg, #ffd56a, #ffdb3c); }
.pix-custom { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; border: 1px dashed #36405c;
  background: linear-gradient(180deg, #1a1f2e, #141824); cursor: text; transition: border-color .12s, box-shadow .12s; }
.pix-custom:hover { border-color: #4a5778; }
.pix-custom.sel { border-style: solid; border-color: var(--chakra); box-shadow: 0 0 0 1px var(--chakra), 0 8px 22px rgba(60, 199, 255, .15); }
.pix-custom .pix-gem { width: 26px; height: 26px; }
.pix-clabel { font-weight: 800; font-size: 13px; }
.pix-cbrl { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--text-2); }
.pix-cur { margin-right: 2px; }
.pix-cval { width: 76px; height: 34px; padding: 0 10px; border-radius: 9px; font-weight: 800; font-size: 15px; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.pix-cval::-webkit-outer-spin-button, .pix-cval::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pix-step { width: 34px; height: 34px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 9px; cursor: pointer;
  border: 1px solid #3a4560; background: linear-gradient(180deg, #252c40, #1b2131); color: #ffe15c; font-size: 18px; font-weight: 800; line-height: 1;
  transition: border-color .12s, background .12s, transform .08s; }
.pix-step:hover { border-color: #ffd61f; background: linear-gradient(180deg, #2f364c, #222839); color: #ffd0a0; }
.pix-step:active { transform: scale(.94); }
.pix-cinfo { font-size: 12px; color: var(--muted); } .pix-cinfo b { font-size: 15px; color: var(--text); } .pix-cinfo b + span { margin-left: 4px; }
.pix-cup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; border: 1px dashed #36405c;
  background: linear-gradient(180deg, #1a1f2e, #141824); }
.pix-cup.on { border-style: solid; border-color: #3fae6a; box-shadow: 0 0 0 1px rgba(63, 174, 106, .5); }
.pix-cup-l { font-weight: 800; font-size: 13px; }
.pix-cup-in { width: 130px; height: 34px; padding: 0 10px; border-radius: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.pix-cup-go { height: 34px; }
.pix-cup-msg { font-size: 12px; color: var(--muted); } .pix-cup-msg.ok { color: #6ff0a0; font-weight: 800; } .pix-cup-msg.bad { color: #ff7a7a; font-weight: 700; }
.pix-old { display: block; font-size: 10px; line-height: 1.1; opacity: .65; font-weight: 600; }
.pix-cdisc { color: #6ff0a0; font-weight: 800; }
.pix-uses { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
.pix-uses span { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: var(--text-2); }
.pix-email { padding: 10px 12px; border-radius: 10px; }
.pix-go { padding: 12px; font-size: 15px; font-weight: 900; border-radius: 12px; }
.pix-out { margin-top: 0; }
.pix-pay { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; width: 100%; }
.pix-steps { display: grid; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.pix-steps > div { display: flex; align-items: center; gap: 8px; }
.pix-steps > div b { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; font-size: 11px; background: var(--chakra); color: #06202c; }
.pix-status { display: flex; align-items: center; gap: 8px; justify-self: start; }
.pix-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: cr-pulse 1.4s ease-in-out infinite; }
.pix-status.ok i { background: var(--green); animation: none; } .pix-status.bad { color: var(--red); } .pix-status.bad i { background: var(--red); animation: none; }
.pix-wait { color: var(--text-2); font-weight: 700; }
@media (max-width: 560px) { .pix-pay { grid-template-columns: 1fr; justify-items: center; } }
.modal.modal-pix .modal-box { width: min(640px, calc(94 * var(--vw))); }
.pix-pay:not(:has(.pix-qr)) { grid-template-columns: 1fr; }
#screen-chars #btn-new-char { display: none; }
.mk2 { --mkq: #3a4562; --mkg: transparent; display: flex; flex-direction: column; gap: 12px; }
.mk2 .q1 { --mkq: #3fcf5b; --mkg: rgba(63,207,91,.22); } .mk2 .q2 { --mkq: #3d8dff; --mkg: rgba(61,141,255,.24); }
.mk2 .q3 { --mkq: #b25cff; --mkg: rgba(178,92,255,.26); } .mk2 .q4 { --mkq: #ff3b3b; --mkg: rgba(255,59,59,.28); }
.mk-hero { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,213,26,.32);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,213,26,.16), transparent 60%), linear-gradient(180deg, #1a1f2d, #141823); }
.mk-hero-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,213,26,.12); border: 1px solid rgba(255,213,26,.35); color: var(--orange-2); }
.mk-hero-ic .ic { width: 28px; height: 28px; }
.mk-hero-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mk-hero-t b { font-size: 18px; font-weight: 900; letter-spacing: .3px; } .mk-hero-t span { font-size: 12px; color: var(--text-2); }
.mk-wallet { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mk-coin { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-family: var(--mono); font-weight: 800; font-size: 13px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); }
.mk-coin.gold { color: var(--gold); border-color: rgba(242,193,78,.35); } .mk-coin.points { color: var(--chakra); border-color: rgba(60,199,255,.35); }
.mk-coin img, .mk-pill img { width: 18px; height: 18px; image-rendering: pixelated; }
.mk-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b8, #f2c14e 45%, #a88e1b); box-shadow: 0 0 5px rgba(242,193,78,.6); }
.mk-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.mk-tab { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; border-radius: 12px; border: 1px solid #2a3149; background: linear-gradient(180deg, #1a1f2e, #141824);
  color: var(--text-2); font-family: inherit; font-weight: 800; font-size: 13px; cursor: pointer; transition: border-color .12s, color .12s, transform .1s; }
.mk-tab .ic { width: 20px; height: 20px; }
.mk-tab:hover { border-color: #3d4a6a; color: var(--text); transform: translateY(-1px); }
.mk-tab.active { color: var(--orange-2); border-color: rgba(255,213,26,.7); background: linear-gradient(180deg, rgba(255,213,26,.18), rgba(255,213,26,.05)); box-shadow: 0 6px 18px rgba(255,213,26,.14); }
.mk-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.mk-loading { color: var(--text-2); padding: 20px; text-align: center; }
.mk-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mk-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; border: 1px solid #2c3550; background: #10141d; color: var(--muted); }
.mk-search:focus-within { border-color: var(--orange); }
.mk-search .ic { width: 16px; height: 16px; }
.mk-search-in { flex: 1; border: 0 !important; background: transparent !important; padding: 10px 0 !important; box-shadow: none !important; font-size: 14px; }
.mk-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #10141d; border: 1px solid #2c3550; }
.mk-seg button { border: 0; background: transparent; color: var(--text-2); font-family: inherit; font-weight: 700; font-size: 12px; padding: 6px 11px; border-radius: 8px; cursor: pointer; }
.mk-seg button.on { background: var(--orange); color: #1a0d00; }
.mk-seg.big { width: 100%; } .mk-seg.big button { flex: 1; padding: 8px 10px; font-size: 13px; }
.mk-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-cat { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid #2c3550; background: #151a26; color: var(--text-2); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.mk-cat small { font-size: 10px; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); }
.mk-cat:hover { border-color: #3d4a6a; color: var(--text); }
.mk-cat.on { border-color: var(--orange); color: var(--orange-2); background: rgba(255,213,26,.1); } .mk-cat.on small { background: rgba(255,213,26,.25); color: var(--orange-2); }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.mk-card { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; padding: 10px 12px; border-radius: 14px;
  border: 1px solid #262d42; background: linear-gradient(180deg, #191e2c, #131722); transition: border-color .12s, transform .1s, box-shadow .12s; }
.mk-card:hover { border-color: var(--mkq); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.3), 0 0 0 1px var(--mkg); }
.mk-card-ic { grid-row: 1 / 3; position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--mkq);
  background: radial-gradient(circle at 50% 40%, var(--mkg), transparent 70%), #0c0f16; }
.mk-card-ic img { width: 40px; height: 40px; image-rendering: pixelated; }
.mk-card-ic.big { width: 64px; height: 64px; } .mk-card-ic.big img { width: 48px; height: 48px; }
.mk-qty { position: absolute; right: -4px; bottom: -6px; font-family: var(--mono); font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: #0c0f16; border: 1px solid #2c3550; color: var(--text); }
.mk-card-ic .forge-badge { position: absolute; left: -4px; top: -6px; }
.mk-card-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-card-info b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card-info small { font-size: 11.5px; color: var(--muted); } .mk-seller { color: var(--text-2); font-weight: 700; } .mk-left { white-space: nowrap; }
.mk-card-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-family: var(--mono); font-weight: 900; font-size: 13.5px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); }
.mk-pill.gold { color: var(--gold); border-color: rgba(242,193,78,.3); } .mk-pill.points { color: var(--chakra); border-color: rgba(60,199,255,.3); }
.mk-pill.sm { font-size: 11.5px; padding: 2px 8px; }
.mk-card-buy .btn { min-width: 86px; }
.mk-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 16px; border-radius: 14px; border: 1px dashed #2c3550; color: var(--text-2); text-align: center; }
.mk-empty .ic { width: 34px; height: 34px; opacity: .6; }
.mk-note { font-size: 12px; color: var(--muted); padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.mk-sec { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: var(--text-2); }
.mk-step { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #1a0d00; font-size: 12px; }
.mk-hist { display: flex; flex-direction: column; gap: 4px; }
.mk-hist-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 7px 12px; border-radius: 10px; background: #151a26; border: 1px solid #232a3d; font-size: 12.5px; }
.mk-hist-row span { color: var(--text-2); } .mk-hist-row small { color: var(--muted); }
.mk-hist-it { display: flex; align-items: center; gap: 8px; min-width: 0; } .mk-hist-it b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card-ic.sm { grid-row: auto; width: 30px; height: 30px; border-radius: 8px; flex: none; } .mk-card-ic.sm img { width: 24px; height: 24px; }
.ps-hist { display: flex; flex-direction: column; gap: 4px; padding: 4px 2px; }
.ps-hist-sec { margin: 10px 0 2px; font-weight: 700; color: var(--pc, #ffd51a); letter-spacing: .04em; text-transform: uppercase; font-size: 12px; }
.ps-hist-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; padding: 7px 12px; border-radius: 10px; background: #151a26; border: 1px solid #232a3d; font-size: 12.5px; }
.ps-hist-row b { color: #ff9a8a; } .ps-hist-row.in b { color: #7be495; } .ps-hist-row span { color: var(--text-2); } .ps-hist-row span em { color: var(--muted); font-style: normal; } .ps-hist-row small { color: var(--muted); }
@media (max-width: 760px) { .ps-hist-row { grid-template-columns: 80px 1fr; } .ps-hist-row small { grid-column: 2; } }
.mk-sell { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; align-items: start; }
.mk-col { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid #262d42; background: linear-gradient(180deg, #171c29, #121620); min-width: 0; }
.mk-bag { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; max-height: 470px; overflow: auto; padding-right: 2px; }
.mk-bag .inv-slot.sel { outline: 2px solid var(--orange); outline-offset: 1px; }
.mk-preview { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: radial-gradient(120% 120% at 0% 50%, var(--mkg), transparent 60%), #10141d; border: 1px solid var(--mkq); }
.mk-preview b { font-size: 15px; display: block; } .mk-preview small { color: var(--muted); }
.mk-field { display: flex; flex-direction: column; gap: 5px; } .mk-field > span { font-size: 11.5px; font-weight: 800; color: var(--text-2); letter-spacing: .3px; }
.mk-field .mk-in { width: 100%; padding: 9px 11px; border-radius: 10px; font-size: 15px; font-weight: 800; font-family: var(--mono); }
.mk-qrow { display: flex; gap: 6px; } .mk-qrow .mk-in { flex: 1; }
.mk-sum { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 12px; background: #10141d; border: 1px solid #2c3550; font-size: 13px; }
.mk-sum > div { display: flex; justify-content: space-between; } .mk-sum span { color: var(--text-2); } .mk-sum b { font-family: var(--mono); }
.mk-sum b.neg { color: #ff8a8a; } .mk-sum .tot { padding-top: 6px; margin-top: 2px; border-top: 1px dashed #2c3550; } .mk-sum .tot b { color: #6ff0a0; font-size: 15px; }
.mk-go { padding: 12px; font-size: 15px; font-weight: 900; border-radius: 12px; }
.mk-npc { padding-top: 2px; }
.mk-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mk-ord-reqs { display: flex; gap: 4px; flex-wrap: wrap; }
.mk-ord-reqs span { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; color: var(--mkq); border: 1px solid var(--mkq); background: var(--mkg); }
.mk-un { font-size: 10px; font-weight: 700; color: var(--muted); margin-left: -2px; }
.mk-ord-no { opacity: .55; }
.mk-ord-tag { font-style: normal; font-size: 10px; font-weight: 800; margin-left: 6px; padding: 1px 6px; border-radius: 999px; color: var(--orange-2); border: 1px solid rgba(255,213,26,.4); }
.mk-ordbox { display: flex; flex-direction: column; gap: 10px; min-width: min(520px, 86vw); }
.mk-ord-pick { max-height: 180px; }
.mk-ord-res { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.mk-ord-item { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 6px 10px; border-radius: 10px; border: 1px solid #232a3d;
  background: #151a26; color: var(--text); font-family: inherit; font-size: 13px; cursor: pointer; }
.mk-ord-item:hover { border-color: var(--orange); background: #1a2030; }
.mk-ord-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-ord-item small { color: var(--muted); font-size: 11px; }
.mk-ord-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mk-ord-hint { color: var(--text-2); }
.mk-ordbox select.mk-in { font-family: inherit; font-size: 13px; }
@media (max-width: 760px) {
  .mk-tabs { grid-template-columns: repeat(2, 1fr); } .mk-sell { grid-template-columns: 1fr; } .mk-hero-ic { display: none; }
  .mk-grid { grid-template-columns: 1fr; } .mk-hist-row { grid-template-columns: 1fr auto; }
  .mk-ord-2 { grid-template-columns: 1fr; } .mk-ordbox { min-width: 0; }
}
.sellset { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.sellset-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2);
  background: linear-gradient(135deg, rgba(255,213,26,.10), rgba(24,28,38,.9)); }
.sellset-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: var(--orange);
  background: rgba(255,213,26,.12); border: 1px solid rgba(255,213,26,.45); }
.sellset-ic .ic { width: 20px; height: 20px; }
.sellset-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sellset-txt b { font-size: 14px; }
.sellset-txt span { font-size: 12px; color: var(--text-2); }
.sellset-sum { display: grid; text-align: right; gap: 1px; }
.sellset-sum small { font-size: 11px; color: var(--text-2); }
.sellset-sum b { color: var(--gold); font-family: var(--mono, monospace); font-size: 13px; }
.sellset-all { white-space: nowrap; }
.sellset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.sellset-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); }
.sellset-card:hover { border-color: var(--line-2); }
.sellset-card.keep { opacity: .55; }
.sellset-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sellset-info b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sellset-info .price { font-size: 11px; color: var(--gold); display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; white-space: nowrap; }
.sellset-pp { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; border-radius: 5px;
  color: #c4b5fd; background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.5); }
.modal.modal-sellset .modal-box { width: min(640px, calc(94 * var(--vw))); }
.sellset-modal .sellset-lead { margin: 0; color: var(--text-2); font-size: 13px; }
.sellset-tools { display: flex; gap: 6px; }
.sellset-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-height: min(calc(52 * var(--vh)), 420px); overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.sellset-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px 6px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(74,222,128,.45); background: rgba(74,222,128,.07); transition: opacity .12s, filter .12s, border-color .12s; user-select: none; }
.sellset-opt:hover { border-color: var(--green); }
.sellset-opt small { font-size: 10px; color: var(--gold); font-family: var(--mono, monospace); }
.sellset-opt .sellset-pp { position: absolute; top: 3px; right: 3px; }
.sellset-fica { display: none; position: absolute; left: 50%; top: 22px; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; padding: 1px 6px; border-radius: 6px; color: #fff; background: rgba(15,18,26,.92); border: 1px solid var(--line-2); }
.sellset-opt.keep { border-color: var(--line); background: var(--bg-2); }
.sellset-opt.keep .nto-cell, .sellset-opt.keep small { opacity: .35; filter: grayscale(.8); }
.sellset-opt.keep .sellset-fica { display: block; }
.sellset-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; }
.sellset-foot em { font-style: normal; color: var(--text-2); }
.sellset-foot b { color: var(--gold); font-family: var(--mono, monospace); }
.sellit-pick { max-height: none; overflow: visible; }
.sellit-n { position: absolute; top: 3px; left: 5px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000; }
.sellit-pick .sellset-opt.keep .sellset-fica { display: none; }
.ofh { display: grid; gap: 12px; min-width: min(420px, calc(82 * var(--vw))); }
.ofh-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,213,26,.16), rgba(255,213,26,.03)); border: 1px solid rgba(255,216,40,.28); }
.ofh-zone { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: #ffe1c2; min-width: 0; }
.ofh-zone span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofh-zone i { width: 18px; height: 18px; color: #ffdb3c; flex: none; display: inline-flex; }
.ofh-time { font: 700 12px/1 ui-monospace, monospace; color: #ffe46b; background: rgba(0,0,0,.35); border: 1px solid rgba(255,216,40,.3);
  padding: 5px 9px; border-radius: 999px; flex: none; }
.ofh-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ofh-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); }
.ofh-ic { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: #c9cfdc; }
.ofh-ic svg { width: 17px; height: 17px; }
.ofh-rot { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #a3abbe; font-weight: 700; }
.ofh-val { font-size: 18px; font-weight: 800; color: #f2f4f8; font-variant-numeric: tabular-nums; }
.ofh-card.exp .ofh-ic { color: #7cc8ff; background: rgba(60,160,255,.14); } .ofh-card.exp .ofh-val { color: #8fd0ff; }
.ofh-card.gold .ofh-ic { color: #ffde4d; background: rgba(255,219,60,.14); } .ofh-card.gold .ofh-val { color: #ffd166; font-size: 15px; }
.ofh-card.up .ofh-ic { color: #7ff0a4; background: rgba(80,220,130,.14); } .ofh-card.up .ofh-val { color: #7ff0a4; }
.ofh-loot { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); }
.ofh-loot .li { position: relative; display: inline-flex; }
.ofh-train { padding: 4px 10px 8px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.06); }
.ofh-train .train-result { margin: 4px 0; font-size: 13px; }
.ofh-loot .li span { position: absolute; right: 2px; bottom: 0; font: 700 10px/1 ui-monospace, monospace; color: #fff; text-shadow: 0 1px 2px #000; }
.ofh-lost { font-size: 12px; color: #ffe77a; text-align: center; }
.swc-wrap { display: grid; gap: 12px; min-width: min(520px, 86vw); }
.swc-list { display: grid; gap: 8px; }
.swc { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 10px 14px 10px 10px;
  border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 12%, transparent), rgba(255,255,255,.02) 55%);
  border: 1px solid rgba(255,255,255,.07); transition: border-color .15s, transform .15s; }
.swc::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--cc); opacity: .8; }
.swc:hover { border-color: color-mix(in srgb, var(--cc) 45%, transparent); transform: translateY(-1px); }
.swc.cur { border-color: rgba(255,216,40,.55); box-shadow: 0 0 0 1px rgba(255,216,40,.2), 0 6px 22px rgba(255,212,20,.12); }
.swc-ped { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--cc) 40%, transparent), rgba(0,0,0,.35) 70%);
  border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); }
.swc-info { display: grid; gap: 3px; min-width: 0; }
.swc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.swc-name { font-size: 15px; color: #f4f6fa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swc-lv { font: 800 11px/1 ui-monospace, monospace; color: #1a0d03; background: linear-gradient(180deg, #ffe15c, #ffd51a); padding: 3px 7px; border-radius: 999px; flex: none; }
.swc-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #b3bacb; }
.swc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 8px var(--cc); }
.swc-st { justify-self: start; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: #c9cfdc; border: 1px solid rgba(255,255,255,.08); }
.swc-st.cur { color: #ffe46b; border-color: rgba(255,216,40,.4); background: rgba(255,213,26,.1); }
.swc-st.on, .swc-st.hunt { color: #7ff0a4; border-color: rgba(80,220,130,.35); background: rgba(80,220,130,.08); }
.swc-st.mis { color: #6fe8ff; border-color: rgba(60,200,255,.35); background: rgba(60,200,255,.08); }
.swc-st.done { color: #ffd166; border-color: rgba(255,200,80,.4); background: rgba(255,200,80,.08); }
.swc-st.dead { color: #ff8a8a; border-color: rgba(255,90,90,.4); background: rgba(255,90,90,.08); }
.swc-acts { display: flex; gap: 6px; }
.swc-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 11.5px; color: #a3abbe; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.swc-foot b { color: #e6e9f0; }
@media (max-width: 520px) { .swc { grid-template-columns: auto 1fr; } .swc-acts { grid-column: 1 / -1; justify-content: flex-end; } }
.cfm-back { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px;
  background: rgba(5, 6, 10, .55); backdrop-filter: blur(3px); animation: cfmIn .14s ease-out; }
.cfm-back.out { animation: cfmOut .14s ease-in forwards; }
@keyframes cfmIn { from { opacity: 0; } } @keyframes cfmOut { to { opacity: 0; } }
.cfm { width: min(400px, 100%); display: grid; justify-items: center; gap: 12px; padding: 22px 20px 16px; text-align: center; border-radius: 16px;
  background: linear-gradient(180deg, #221812, #121319 60%); border: 1px solid rgba(255,216,40,.35);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,228,110,.12); animation: cfmPop .18s cubic-bezier(.2,1.4,.4,1); }
@keyframes cfmPop { from { transform: scale(.92); opacity: 0; } }
.cfm.danger { border-color: rgba(255,90,90,.45); background: linear-gradient(180deg, #2a1414, #121319 60%); }
.cfm-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 900 22px/1 system-ui, sans-serif; color: #1a0d03;
  background: linear-gradient(180deg, #ffe15c, #ffd51a); box-shadow: 0 0 22px rgba(255,214,30,.45); }
.cfm.danger .cfm-ic { color: #fff; background: linear-gradient(180deg, #ff7b7b, #e23b3b); box-shadow: 0 0 22px rgba(255,70,70,.4); }
.cfm-text { font-size: 14.5px; line-height: 1.45; color: #e9ecf3; }
.cfm-acts { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.cfm-acts .btn { flex: 1; justify-content: center; padding: 9px 12px; }
.chars-wrap { padding-top: calc(5 * var(--vh)); }
.chars-logo { height: 84px; width: auto; filter: drop-shadow(0 6px 18px rgba(255,212,20,.35)); }
.chars-head { margin-bottom: 18px; }
.chars-head .row { background: rgba(10,8,12,.6); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 4px 6px 4px 14px; backdrop-filter: blur(4px); }
.chars-vip { position: relative; padding: 11px 16px 11px 46px; }
.chars-vip b { font-size: 13px; }
.chars-vip::before { content: "👑"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,209,102,.18); border: 1px solid rgba(255,209,102,.45); font-size: 14px; }
.ch-hero { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 10px; padding: 26px 20px 28px; border-radius: 16px; text-align: center;
  background: radial-gradient(ellipse 60% 70% at 50% 25%, rgba(255,214,30,.22), transparent 70%), linear-gradient(180deg, rgba(30,20,14,.85), rgba(12,12,18,.92));
  border: 1px solid rgba(255,216,40,.35); box-shadow: 0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,228,110,.12); }
.ch-figs { display: flex; align-items: flex-end; justify-content: center; gap: 2px; margin-bottom: 2px; }
.ch-fig { filter: drop-shadow(0 8px 6px rgba(0,0,0,.55)); animation: chFloat 3.2s ease-in-out infinite; }
.ch-fig:nth-child(2), .ch-fig:nth-child(4) { animation-delay: -1.1s; transform-origin: bottom; }
.ch-fig:nth-child(3) { animation-delay: -.5s; }
@keyframes chFloat { 50% { translate: 0 -5px; } }
.ch-title { margin: 0; max-width: 100%; overflow-wrap: anywhere; font-family: "NjNaruto", system-ui, sans-serif; font-weight: 400; font-size: 34px; line-height: 1.08; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff6d8, #ffdd47 55%, #e2bd1a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #120804) drop-shadow(0 0 14px rgba(255,214,30,.35)); }
.ch-sub { margin: 0; max-width: 100%; color: #c9cfdc; font-size: 14px; }
.ch-go { margin-top: 6px; max-width: 100%; padding: 12px 34px; font-size: 15px; border-radius: 12px; box-shadow: 0 8px 24px rgba(255,212,20,.35); }
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  .ch-title { font-size: 25px; }
  .ch-hero { padding: 20px 12px 22px; }
  .ch-figs .ch-fig:first-child, .ch-figs .ch-fig:last-child { display: none; }
  .ch-fig { transform: scale(.85); }
  .chars-head { flex-wrap: wrap; gap: 8px; }
  .chars-head > * { min-width: 0; }
  .chars-head .row { flex-wrap: wrap; border-radius: 16px; row-gap: 6px; padding: 6px 8px 6px 12px; }
  .chars-head .row .btn-shop { margin-left: 0; }
}
.cfm.danger .cfm-acts .btn-danger { background: linear-gradient(180deg, #ff6b6b, #d93434); color: #fff; border-color: rgba(255,140,140,.6); }
.house-ball { position: fixed; z-index: 8090; left: calc(50% + 110px); top: calc(var(--vh, 1vh) * 17);    width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #ffe2b8; border: 2px solid rgba(255,223,80,.75);
  background: radial-gradient(circle at 50% 35%, #5a4e16, #24140a 70%); box-shadow: 0 0 0 3px rgba(0,0,0,.55), 0 0 18px rgba(255,216,40,.45); }
.house-ball::before, .trade-ball::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 26px rgba(255,217,50,.75); animation: glowFade 2.2s ease-in-out infinite; }
.house-ball.hidden { display: none; }
.house-ball:hover { filter: brightness(1.15); }
.house-ball .hb-n { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 800 10px/1 Inter, sans-serif; letter-spacing: .06em;
  color: #ffd7a1; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
.task-ball { position: fixed; z-index: 8090; left: calc(50% - 170px); top: max(calc(var(--vh, 1vh) * 17), calc(var(--qb-bottom, 0px) + 10px)); width: 58px; height: 58px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; border: 0; background: conic-gradient(#ffe054 var(--p, 0%), rgba(255,255,255,.12) 0);
  box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 14px rgba(255,216,40,.35); }
.task-ball.hidden { display: none; }
.task-ball:hover { filter: brightness(1.15); }
.task-ball .tb-face { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #3a2a1c, #160f09 72%); }
.task-ball .tb-n { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 800 11px/1 Inter, sans-serif;
  color: #ffd7a1; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
.task-ball .tb-k { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 8px; font: 800 9px/1.3 Inter, sans-serif;
  letter-spacing: .05em; text-transform: uppercase; color: #1a0f05; background: #ffe054; box-shadow: 0 1px 0 #000; }
@media (max-width: 760px) { .task-ball { left: 8px; top: max(calc(200px + env(safe-area-inset-top)), calc(var(--qb-bottom, 0px) + 14px)); width: 50px; height: 50px; } .task-ball .tb-face { width: 43px; height: 43px; } }
.hz-win { display: flex; flex-direction: column; gap: 8px; min-width: min(420px, 86vw); }
.hz-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(90deg, rgba(255,216,40,.14), rgba(255,255,255,.02)); border: 1px solid rgba(255,221,70,.3); }
.hz-ic { color: #ffe15c; display: grid; place-items: center; }
.hz-tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hz-tx b { font-size: 15px; color: #fff1dc; } .hz-tx small { color: #c9cfdc; }
.hz-role { padding: 3px 9px; border-radius: 999px; font: 800 10.5px/1.2 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; border: 1px solid; }
.hz-role.r-owner { color: #ffd166; border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.1); }
.hz-role.r-sub { color: #7fd8ff; border-color: rgba(127,216,255,.45); background: rgba(127,216,255,.08); }
.hz-role.r-guest { color: #9ff0b0; border-color: rgba(159,240,176,.4); background: rgba(159,240,176,.08); }
.hz-sec { font: 800 11px/1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #ffe15c; margin-top: 4px; }
.hz-form { gap: 6px; flex-wrap: wrap; } .hz-form .input { flex: 1; min-width: 140px; }
.hz-list { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; overflow-x: hidden; }
.hz-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 7px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.hz-row > span { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-row small { flex: 0 1 auto; min-width: 0; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hz-row .btn { flex: none; }
.hz-rent { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.hz-rent span { font-weight: 700; color: #e9eef8; } .hz-rent small { color: #b3bacb; font-size: 10.5px; } .hz-rent b { color: #ff8a7a; font-size: 12px; }
.hz-rent.warn { border-color: rgba(255,110,90,.55); background: rgba(255,80,60,.08); }
.hz-foot { justify-content: flex-end; } .hz-cmd { margin-top: 2px; font-size: 10.5px; }
.modal.modal-news .modal-box { width: min(720px, calc(94 * var(--vw))); max-height: min(780px, calc(90 * var(--vh))); display: flex; flex-direction: column; }
.modal.modal-news #modal-body { flex: 1; min-height: 0; display: flex; }
.news { display: flex; flex-direction: column; gap: 12px; width: 100%; min-height: 0; }
.news-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.news-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: 12px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,214,31,.18), transparent 60%), linear-gradient(180deg, #1d2230, #151923); border: 1px solid #343c52; border-left: 3px solid #ffd61f; }
.news-kicker { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #ffd61f; margin-bottom: 4px; }
.news-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 19px; font-weight: 800; color: #fff; line-height: 1.25; }
.news-v { font-size: 12px; font-weight: 800; color: #1a1206; background: linear-gradient(180deg, #ffe15c, #ffd61f); padding: 3px 8px; border-radius: 6px; letter-spacing: .3px; }
.news-date { margin-top: 6px; font-size: 12.5px; color: #b3bacb; display: flex; align-items: center; gap: 8px; }
.news-when { font-size: 11px; font-weight: 700; color: #ffd0a0; background: rgba(255,214,31,.14); border: 1px solid rgba(255,214,31,.35); padding: 1px 7px; border-radius: 99px; }
.news-logo { height: 46px; width: auto; flex: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.news-sec { margin-bottom: 14px; }
.news-sec-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.news-sec-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #1f2433; border: 1px solid #343c52; font-size: 14px; flex: none; }
.news-sec-h b { font-size: 12.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #ffe15c; }
.news-sec-h i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,214,31,.45), transparent); }
.news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.news-list li { position: relative; padding: 9px 12px 9px 26px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06); font-size: 13.5px; line-height: 1.5; color: #c9cfdb; }
.news-list li::before { content: ""; position: absolute; left: 11px; top: 16px; width: 6px; height: 6px; border-radius: 2px; background: #ffd61f; transform: rotate(45deg); }
.news-list li b { color: #fff; }
.news-all { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.news-item { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; text-align: left;
  padding: 11px 14px; border-radius: 10px; background: #171b26; border: 1px solid #2c3346; color: #e6e8ee; cursor: pointer; transition: border-color .12s, background .12s; }
.news-item:hover, .news-item.on { border-color: #ffd61f; background: #1d2230; }
.news-item .news-v { grid-row: span 2; }
.news-item b { font-size: 14px; } .news-item small { color: #8f97ab; font-size: 11.5px; }
.news-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid #2a3142; }
.news-off { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #b3bacb; cursor: pointer; }
.news-btns { display: flex; gap: 8px; margin-left: auto; }
#btn-news { position: relative; }
.news-dot { position: absolute; top: 2px; right: 4px; width: 11px; height: 11px; border-radius: 50%; background: #ff3b2f; box-shadow: 0 0 0 2px #12151d, 0 0 8px rgba(255,60,40,.9); }
#btn-mmenu.news-new { position: relative; }
#btn-mmenu.news-new::after { content: ""; position: absolute; top: 2px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b2f; box-shadow: 0 0 0 2px #1a0d07, 0 0 8px rgba(255,60,40,.9); }
@keyframes newsPulse { 50% { transform: scale(1.3); opacity: .75; } }
.news-item .news-v { min-width: 62px; text-align: center; }
.news-tabs { display: flex; gap: 6px; margin-bottom: 2px; }
.news-tab { flex: 1; padding: 9px 10px; border-radius: 10px; background: #171b26; border: 1px solid #2c3346; color: #b3bacb; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.news-tab:hover { border-color: #ffd61f; }
.news-tab.on { color: #fff; border-color: #ffd61f; background: radial-gradient(120% 160% at 0% 0%, rgba(255,214,31,.18), transparent 60%), #1d2230; }
.road-phase { margin-bottom: 16px; }
.road-dot { width: 10px; height: 10px; border-radius: 50%; background: #5d6680; flex: none; }
.road-phase.now .road-dot { background: #3fcf5b; box-shadow: 0 0 0 3px rgba(63,207,91,.18); }
.road-phase.now .news-sec-h b { color: #7ee08f; }
.road-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.road-card { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); }
.road-phase.now .road-card { border-color: rgba(63,207,91,.25); background: rgba(63,207,91,.04); }
.road-ic { --c: #ffd61f; position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; font-size: 19px; flex: none;
  background: var(--c); border: 1px solid rgba(255,255,255,.3);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 45%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--c) 60%, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent), inset 0 -3px 6px rgba(0,0,0,.35), inset 0 2px 3px rgba(255,255,255,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.road-ic > i { font-style: normal; display: inline-block; transform: rotate(8deg); text-shadow: none;
  filter: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)
    drop-shadow(0 0 1px rgba(20,12,8,.9)) drop-shadow(0 2px 2px rgba(0,0,0,.55)); }
.road-ic::after { content: "✦"; position: absolute; top: -7px; right: -5px; font-size: 11px; color: #fff; text-shadow: 0 0 5px var(--c), 0 0 2px #fff; }
.road-card b { display: block; color: #fff; font-size: 13.5px; margin-bottom: 2px; }
.road-card p { margin: 0; color: #c9cfdb; font-size: 12.5px; line-height: 1.45; }
.bzc-list { gap: 10px; }
.bzc { display: grid; grid-template-columns: 104px 1fr 190px; gap: 14px; padding: 12px; border-radius: 14px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,213,26,.06), transparent 40%), linear-gradient(180deg, #121725, #0d1019); border: 1px solid #2a3142;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03); transition: border-color .15s; }
.bzc:hover { border-color: #4a3a22; }
.bzc.mine { border-color: #6a5420; } .bzc.mybid { border-color: #2f7a4d; box-shadow: 0 0 0 1px rgba(63,207,91,.15), inset 0 1px 0 rgba(255,255,255,.03); }
.bzc-fig { position: relative; display: grid; place-items: center; border-radius: 12px; cursor: zoom-in; min-height: 118px;
  background: radial-gradient(circle at 50% 68%, color-mix(in srgb, var(--cc) 34%, transparent), transparent 62%), linear-gradient(180deg, #161b28, #0a0d14);
  border: 1px solid color-mix(in srgb, var(--cc) 40%, #2a3142); }
.bzc-fig::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 20px; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); }
.bzc-fig > :first-child { position: relative; z-index: 1; }
.bzc-lv { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 1px 9px; border-radius: 999px; font-size: 11px; color: #c9cfdd;
  background: #0b0e15; border: 1px solid color-mix(in srgb, var(--cc) 55%, #2a3142); white-space: nowrap; }
.bzc-lv b { color: #ffe366; font-size: 13px; }
.bzc-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bzc-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bzc-name > b { font-size: 16px; color: #f1f4fa; letter-spacing: .2px; }
.bzc-voc { color: #b3bacb; font-size: 12.5px; }
.bzc-sk { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.bzc-s { display: grid; grid-template-columns: 16px 1fr; grid-template-rows: auto auto; column-gap: 5px; align-items: center; padding: 5px 7px; border-radius: 9px; background: #0b0e15; border: 1px solid #232a3a; }
.bzc-s i { grid-row: 1 / 3; width: 16px; height: 16px; color: #ffde4a; display: grid; } .bzc-s i svg { width: 16px; height: 16px; }
.bzc-s small { font-size: 9.5px; color: #9aa3b6; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bzc-s b { font: 800 14px/1.1 var(--mono); color: #eef1f7; }
.bzc-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #b3bacb; }
.bzc-meta span { display: inline-flex; align-items: center; gap: 5px; } .bzc-meta i { width: 14px; height: 14px; color: #f2c14e; display: grid; } .bzc-meta i svg { width: 14px; height: 14px; }
.bzc-meta b { color: #f2c14e; }
.bzc-vocs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11.5px; }
.bzc-vocs > small { color: #9aa3b6; margin-right: 2px; }
.bzc-vc { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border-radius: 999px; background: #0b0e15; border: 1px solid color-mix(in srgb, var(--cc) 55%, #232a3a); color: #e3e7f0; white-space: nowrap; }
.bzc-vc > :first-child { flex: none; }
.bzd-vocs { margin: 10px 0 2px; }
.bz-warn { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; padding: 9px 12px; border-radius: 10px; background: rgba(255,213,26, .1); border: 1px solid rgba(255,213,26, .55); font-size: 12.5px; color: #e3e7f0; text-align: left; }
.bz-warn b { color: #ffe366; }
.bzc-eqrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bzc-eq { display: flex; gap: 4px; }
.bzc-i.islot { width: 30px; height: 30px; border-radius: 7px; cursor: default; }
.bzc-i.islot img { max-width: 26px; max-height: 26px; }
.bzc-i.islot.empty { opacity: .35; } .bzc-i.islot.empty svg { width: 15px; height: 15px; }
.bzc-i .forge-badge { font-size: 8.5px; }
.bzc-items { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: #0b0e15; border: 1px dashed #3a4256; color: #c9cfdd; font-size: 11.5px; cursor: zoom-in; }
.bzc-items:hover { border-color: #ffd51a; color: #ffe366; } .bzc-items i { width: 15px; height: 15px; display: grid; } .bzc-items i svg { width: 15px; height: 15px; }
.bzc-buy { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, rgba(242,193,78,.08), rgba(242,193,78,.02)); border: 1px solid rgba(242,193,78,.25); }
.bzc-buy > small { color: #b3bacb; font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; }
.bzc-pp { font: 900 24px/1 var(--mono); color: #f2c14e; text-shadow: 0 0 12px rgba(242,193,78,.25); } .bzc-pp em { font-size: 12px; font-style: normal; color: #d9b45a; }
.bzc-buy .bz-time { font-size: 12px; }
.bzc-buy .btn { width: 100%; justify-content: center; }
.bzc-det { background: #141a27; border: 1px solid #2f374b; color: #c9cfdd; }
.bz-none { color: #8d95a8; font-size: 12px; padding: 4px 0; }
.bz-cap { display: block; margin: 10px 0 6px; color: #ffe366; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.bz-bag { display: flex; flex-wrap: wrap; gap: 4px; max-height: 220px; overflow: auto; }
.bz-bag .islot { cursor: default; }
.bag-n { position: absolute; top: 1px; right: 2px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 7px; background: #ffd51a; color: #1a0f04; font: 800 9px/13px var(--mono); text-align: center; pointer-events: none; }
.bz-in { margin-top: 8px; border-top: 1px solid #2a3142; padding-top: 6px; } .bz-in small { color: #ffe366; font-size: 10.5px; font-weight: 700; }
.bz-in-grid { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; } .bz-in-grid .islot { width: 32px; height: 32px; }
.bz-doll .nto-slot { position: absolute; }
.bz-pop { position: fixed; z-index: 9700; width: 470px; max-width: calc(96 * var(--vw)); padding: 10px 12px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #151a27, #0c0f17); border: 1px solid #4a3a22; box-shadow: 0 18px 50px rgba(0,0,0,.65), 0 0 0 1px #000; }
.bz-pop-h { display: flex; align-items: baseline; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid #262d3d; }
.bz-pop-h b { color: #f1f4fa; font-size: 14px; } .bz-pop-h span { color: #b3bacb; font-size: 12px; }
.bz-pop-b { display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.bz-pop-bag { min-width: 0; } .bz-pop .bz-bag { max-height: 170px; }
.modal.modal-bzd .modal-box { width: min(820px, calc(96 * var(--vw))); }
.bzd-top { display: grid; grid-template-columns: 108px 1fr auto; gap: 14px; align-items: center; padding: 10px; border-radius: 14px;
  background: radial-gradient(circle at 10% 60%, color-mix(in srgb, var(--cc) 22%, transparent), transparent 40%), #0e121b; border: 1px solid #2a3142; }
.bzd-fig { display: grid; place-items: center; height: 104px; border-radius: 12px; background: radial-gradient(circle at 50% 68%, color-mix(in srgb, var(--cc) 34%, transparent), transparent 62%), #0a0d14; }
.bzd-id { display: flex; flex-direction: column; gap: 3px; } .bzd-id > b { font-size: 19px; color: #f1f4fa; } .bzd-id span { color: #b3bacb; font-size: 12.5px; }
.bzd-id em { font-style: normal; color: #b3bacb; font-size: 12px; } .bzd-id em b { color: #ffe366; font-size: 17px; }
.bzd-vit { display: grid; grid-template-columns: repeat(2, minmax(110px, auto)); gap: 6px; }
.bzd-num { display: grid; grid-template-columns: 16px 1fr; column-gap: 6px; align-items: center; padding: 6px 9px; border-radius: 9px; background: #0b0e15; border: 1px solid #232a3a; }
.bzd-num i { grid-row: 1 / 3; width: 16px; height: 16px; color: #f2c14e; display: grid; } .bzd-num i svg { width: 16px; height: 16px; }
.bzd-num small { font-size: 9.5px; color: #9aa3b6; text-transform: uppercase; letter-spacing: .4px; } .bzd-num b { font: 800 13px/1.15 var(--mono); color: #eef1f7; }
.bzd-cols { display: grid; grid-template-columns: 1fr auto; gap: 18px; }
.bzd-sk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.bzd-skr { display: grid; grid-template-columns: 18px 1fr auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 7px 10px; border-radius: 10px; background: #0b0e15; border: 1px solid #232a3a; }
.bzd-skr i { grid-row: 1 / 3; width: 18px; height: 18px; color: #ffde4a; display: grid; } .bzd-skr i svg { width: 18px; height: 18px; }
.bzd-skr span { color: #c9cfdd; font-size: 12.5px; font-weight: 700; } .bzd-skr b { font: 900 17px/1 var(--mono); color: #fff; grid-row: 1 / 3; grid-column: 3; }
.bzd-skr small { grid-column: 2; color: #8d95a8; font-size: 10.5px; }
.bzd-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 760px) {
  .bzc { grid-template-columns: 1fr; } .bzc-fig { min-height: 96px; } .bzc-sk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bzd-top, .bzd-cols { grid-template-columns: 1fr; } .bzd-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nto-cell.is-bag { outline: 1px dashed rgba(255,222,74,.45); outline-offset: -3px; }
.nto-cell.is-bag:hover { outline-color: #ffde4a; }
.bag-in .nto-cell { cursor: pointer; }
.bag-in-tip { margin-top: 8px; padding-top: 7px; border-top: 1px solid #2a3142; }
.bag-in-tip > small { color: #ffe366; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.bag-in-grid { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; max-width: 280px; }
.bag-in-grid .islot { width: 32px; height: 32px; cursor: default; }
.bag-in-grid .islot img { max-width: 28px; max-height: 28px; }
.tr-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(255,213,26,.12), transparent 60%), #0f1320; border: 1px solid #3a2e1c; }
.tr-head-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #1a0f04; background: linear-gradient(180deg, #ffe366, #ffd51a); flex: none; }
.tr-head-ic svg { width: 20px; height: 20px; }
.tr-head b { display: block; font-size: 15px; color: #f1f4fa; } .tr-head small { color: #b3bacb; font-size: 11.5px; }
.tr-sides { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 8px; align-items: start; }
.tr-arrow { align-self: center; color: #ffde4a; display: grid; place-items: center; } .tr-arrow svg { width: 24px; height: 24px; }
.tr-side { padding: 10px; border-radius: 12px; background: #0e121b; border: 1px solid #2a3142; min-height: 150px; transition: border-color .15s, box-shadow .15s; }
.tr-side.ok { border-color: #2f9a58; box-shadow: 0 0 0 1px rgba(63,207,91,.25), 0 0 18px rgba(63,207,91,.12); }
.tr-side-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tr-side-h b { color: #f1f4fa; font-size: 13px; }
.tr-ok { color: #6fd38a; font-size: 11.5px; font-weight: 800; } .tr-wait { color: #8d95a8; font-size: 11px; }
.tr-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.tr-mine .tr-grid .nto-cell:not(.empty) { cursor: pointer; }
.tr-mine .tr-grid .nto-cell:not(.empty):hover { outline: 2px solid #e8545e; outline-offset: -2px; }
.tr-bagin { margin-top: 8px; padding: 6px 8px; border-radius: 9px; background: #0b0e15; border: 1px dashed #3a4256; }
.tr-bagin > small { display: inline-flex; align-items: center; gap: 5px; color: #ffe366; font-size: 11px; font-weight: 700; }
.tr-bagin > small i { width: 14px; height: 14px; display: grid; } .tr-bagin > small i svg { width: 14px; height: 14px; }
.tr-bagin .bag-in-tip { margin-top: 4px; padding-top: 0; border-top: 0; } .tr-bagin .bag-in-tip > small { display: none; }
.tr-gold { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #8d95a8; font-size: 12px; }
.tr-gold i { width: 15px; height: 15px; color: #f2c14e; display: grid; } .tr-gold i svg { width: 15px; height: 15px; } .tr-gold b { color: #f2c14e; }
.tr-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 10px 0 6px; padding: 8px 10px; border-radius: 12px; background: #0f1320; border: 1px solid #2a3142; }
.tr-goldset { display: flex; align-items: center; gap: 6px; } .tr-goldset > span { color: #c9cfdd; font-weight: 700; font-size: 12px; }
.tr-goldset input { width: 100px; } .tr-goldset small { color: #8d95a8; font-size: 11px; }
.tr-acts { display: flex; gap: 8px; } .tr-acts .btn-primary { min-width: 150px; }
.tr-cap { display: block; margin: 6px 0; color: #ffe366; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; }
.trade-ball { position: fixed; z-index: 8090; left: calc(50% - 170px); top: calc(var(--vh, 1vh) * 17 + 84px); width: 58px; height: 58px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: #1a0f04; border: 2px solid #ffe2b8; background: linear-gradient(180deg, #ffe366, #ffd51a);
  box-shadow: 0 0 0 3px rgba(0,0,0,.55), 0 0 18px rgba(255,216,40,.5); }
.trade-ball.hidden { display: none; }
.trade-ball.ok { border-color: #6fd38a; box-shadow: 0 0 0 3px rgba(0,0,0,.55), 0 0 18px rgba(63,207,91,.6); }
.trade-ball svg { width: 28px; height: 28px; }
.trade-ball .tb-n { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 800 11px/1 Inter, sans-serif; color: #ffd7a1; text-shadow: 0 1px 0 #000, 0 0 4px #000; }
@media (max-width: 760px) { .trade-ball { left: auto; right: 8px; top: calc(140px + env(safe-area-inset-top)); width: 50px; height: 50px; } .trade-ball svg { width: 24px; height: 24px; } }
.tr-inv { max-height: 190px; overflow: auto; padding: 6px; border-radius: 10px; background: #0b0e15; border: 1px solid #232a3a; }
.tr-inv .nto-cell { cursor: pointer; } .tr-inv .nto-cell:hover { outline: 2px solid #ffde4a; outline-offset: -2px; }
@media (max-width: 760px) { .tr-sides { grid-template-columns: 1fr; } .tr-arrow { transform: rotate(90deg); } }
.bag-hint { margin-top: 6px; color: #8d95a8; font-size: 11px; line-height: 1.35; }
.bag-back { font-size: 16px; font-weight: 800; color: #ffe366; }
.bag-lvl { color: #8d95a8; font-weight: 600; font-size: 11px; }
.pp-tag { white-space: nowrap; display: inline; }
.pp-ic { width: 1.25em; height: 1.25em; vertical-align: -0.28em; margin: 0 2px 0 1px; image-rendering: pixelated; object-fit: contain; }
.pay-met { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 8px; }
.pay-met-b { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; border: 1px solid #2c3446; background: rgba(255, 255, 255, .03); color: inherit; cursor: pointer; text-align: center; }
.pay-met-b b { font-size: 14px; }
.pay-met-b small { font-size: 11px; color: var(--muted); }
.pay-met-b.on { border-color: rgba(255,219,60, .8); background: rgba(255,219,60, .1); box-shadow: 0 0 0 1px rgba(255,219,60, .35) inset; }
.card-pay { display: grid; gap: 10px; }
.card-pay .btn { justify-self: start; }
.btn-shop { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-weight: 900; letter-spacing: .4px; color: #1a1205;
  background: linear-gradient(180deg, #ffe08a, #f5ce23); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 6px 18px rgba(245,206,35, .35); }
.btn-shop:hover { filter: brightness(1.08); }
.chars-shop { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(6, 8, 12, .62); backdrop-filter: blur(3px); }
.chars-shop .cs-box { width: min(980px, 100%); height: min(780px, calc(var(--vh, 1vh) * 100 - 32px)); display: flex; flex-direction: column;
  background: #0f121a; border: 1px solid rgba(255,217,50, .45); border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); overflow: hidden; }
.chars-shop .cs-head { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #1a1410, #12100e); }
.chars-shop .cs-title { font-size: 16px; color: #ffdd47; letter-spacing: .5px; text-transform: uppercase; }
.chars-shop .cs-to { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12.5px; color: #bdc4d4; }
.chars-shop .cs-pick { min-width: 220px; padding: 6px 10px; border-radius: 8px; background: #1b1f2a; color: #fff; border: 1px solid rgba(255,217,50, .5); font-weight: 700; }
.chars-shop .cs-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: #1b1f2a; color: #ddd; cursor: pointer; }
.chars-shop .cs-x:hover { color: #fff; border-color: rgba(255,217,50, .6); }
.chars-shop #panel-premium-out { flex: 1 1 auto; min-height: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.chars-shop #panel-premium-out > .ps { flex: 1 1 0; min-height: 0; height: auto; }
.chars-shop .ps-side { overflow-y: auto; min-height: 0; }
.chars-shop .ps-main { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 0; }
.chars-shop .ps-title { position: sticky; top: 0; z-index: 3; margin: 0 -18px 14px; padding: 14px 18px 12px; background: linear-gradient(180deg, #0f121a 80%, rgba(15,18,26,.0)); }
.chars-shop .cs-note { flex: none; margin: 10px 12px 0; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; color: #ffe2b8;
  background: rgba(255,217,50, .1); border: 1px solid rgba(255,217,50, .35); }
@media (max-width: 760px) {
  .chars-shop { padding: 0; }
  .chars-shop .cs-box { width: 100%; height: calc(var(--vh, 1vh) * 100); border-radius: 0; }
  .chars-shop .cs-head { flex-wrap: wrap; gap: 8px; }
  .chars-shop .cs-to { order: 3; width: 100%; margin: 0; }
  .chars-shop .cs-pick { flex: 1; min-width: 0; }
  .chars-shop .cs-x { margin-left: auto; }
  .chars-shop #panel-premium-out { overflow-y: auto; }
}
.pvp-sec { display: flex; align-items: center; gap: 7px; margin: 14px 0 8px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,216,40,.35); color: #ffe367; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.pvp-sec:first-of-type { margin-top: 4px; }
.pvp-sec i { width: 15px; height: 15px; display: inline-flex; }
.pvp-sec i svg { width: 100%; height: 100%; }
.forge-slot.fg-two { display: flex; align-items: center; justify-content: center; gap: 0; }
.forge-slot.fg-two img { width: 50% !important; height: auto !important; }
.ch-name.ch-gm { color: #ff3b3b !important; }
.cup-banner { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px dashed #ffdb3c; background: linear-gradient(90deg, rgba(255,213,24,.22), rgba(255,219,60,.08)); color: #ffe9cc; font-size: 13px; }
.cup-banner:hover { background: linear-gradient(90deg, rgba(255,213,24,.34), rgba(255,219,60,.14)); }
.cup-banner-tag { flex: none; font: 800 15px/1 Inter, sans-serif; color: #1b0d02; background: #ffdd47; padding: 6px 8px; border-radius: 8px; box-shadow: 0 0 12px rgba(255,216,40,.6); }
.cup-banner-t { flex: 1; min-width: 0; }
.cup-banner-code { color: #ffdd47; letter-spacing: .06em; }
.cup-banner-go { flex: none; font-weight: 700; font-size: 12px; color: #1b0d02; background: linear-gradient(#ffdd47, #ffd828); padding: 6px 10px; border-radius: 8px; }
#chars-cup { max-width: 980px; margin: 8px auto 0; }
.tool-shop { position: relative; }
.tool-shop .shop-off { position: absolute; top: 2px; right: 2px; z-index: 1; font: 800 8px/1 Inter, sans-serif; font-style: normal; color: #1b0d02; background: #ffdd47; padding: 1px 3px; border-radius: 4px; box-shadow: 0 0 4px rgba(255,216,40,.6); pointer-events: none; }
@media (max-width: 760px) { .cup-banner { font-size: 12px; gap: 8px; } .cup-banner-go { display: none; } }
.ch-tool.ch-ign-btn { width: auto; padding: 0 8px; font-size: 11px; font-weight: 700; color: #ff9a9a; }
.pena-win { display: flex; flex-direction: column; gap: 10px; min-width: min(380px, 86vw); }
.pena-l { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted, #9aa3b2); }
.pena-t { display: flex; gap: 6px; } .pena-t .pena-n { width: 90px; }
.pena-win input[type=text], .pena-win input[type=number], .pena-win select { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line, #333); background: rgba(0,0,0,.3); color: inherit; font-size: 13px; }
.pena-c { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.pena-acts { display: flex; justify-content: flex-end; gap: 8px; }
.hs-prof-pvp { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line, #2a2f3a); }
.hs-pvp-t { font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.hs-pvp-grid { display: grid; grid-template-columns: minmax(110px, 1.4fr) repeat(4, minmax(56px, 1fr)); gap: 4px 10px; align-items: center; font-size: 13px; }
.hs-pvp-grid > b, .hs-pvp-grid > small { text-align: center; }
.hs-pvp-grid .red { color: #ff7a7a; }
.hk-row.hk-wait { outline: 2px solid var(--orange); }
.hk-row > .hk-edit { grid-column: 1 / -1; }
.hk-bad { margin-top: 6px; padding: 6px 8px; border-radius: 6px; color: #ffb3a1; background: rgba(255,90,60,.12); border: 1px solid rgba(255,90,60,.35); }
.vsw { display: flex; flex-direction: column; gap: 10px; width: min(560px, 82vw); max-width: 100%; box-sizing: border-box; }
.vsw-extra { margin: 6px 0 8px; padding: 6px 9px; border-left: 3px solid var(--accent, #ffd82a); background: rgba(255,216,42, .08); color: #ffd7a8; border-radius: 4px; }
.pf-look { margin: 8px 0; padding: 8px 10px; border: 1px solid rgba(255,221,67,.25); border-radius: 8px; background: rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 6px; }
.pf-look-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-look-row > .small { flex: 1; min-width: 180px; }
.pf-look-in { flex: 1; min-width: 120px; max-width: 220px; }
.hs-prof-eq { margin: 10px 0; }
.pf-vocnote { margin-top: 6px; max-width: 520px; color: #ffd7a8; opacity: .85; line-height: 1.35; }
.vsw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); overflow-x: hidden; gap: 8px; max-height: 60vh; overflow-y: auto; }
.vsw-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 10px; cursor: pointer; color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.2)); border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); }
.vsw-card:hover:not(.off) { border-color: var(--cc); box-shadow: 0 0 12px color-mix(in srgb, var(--cc) 40%, transparent); }
.vsw-card.off { opacity: .45; cursor: not-allowed; }
.vsw-card .vsw-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--cc); background: #111; }
.vsw-card b { font-size: 12px; } .vsw-card small { font-size: 10px; color: var(--muted, #a3abbe); }
.ah-sense { display: flex; gap: 6px; width: 100%; }
.ah-sense .ah-sense-in { flex: 2; min-width: 0; margin: 0; }
.on-pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: 999px;
  background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .4); color: var(--green); font-weight: 700;
  font-size: 12px; letter-spacing: .02em; white-space: nowrap; line-height: 1.4; }
.on-pill[hidden] { display: none; }
.on-pill > i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none;
  position: relative; }
.on-pill > i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: rgba(74, 222, 128, .7); --ring: 2.75; animation: ringOut 2s ease-out infinite; }
.on-pill > b { text-transform: uppercase; letter-spacing: .08em; }
.on-pill > b::after { content: "·"; margin-left: 7px; opacity: .6; }
.on-pill > span { color: #d6f5e0; }
.login-mode .on-pill { font-size: 13px; }
.dhead-on { display: flex; justify-content: center; margin: -2px 0 8px; }
.play-online { position: absolute; top: 67px; left: calc(var(--sbl, 0px) + (100% - var(--sbl, 0px) - var(--sbr, 0px)) / 2); transform: translateX(-50%); z-index: 30; pointer-events: none; display: flex; }
.play-online:empty, .play-online:has(.on-pill[hidden]), #screen-game.topbar-hidden .play-online { display: none; }
.play-online .on-pill { background: rgba(10, 22, 15, .9); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
@media (min-width: 761px) and (min-height: 521px), (min-width: 761px) and (pointer: fine) {
  #screen-game:not(.topbar-hidden):has(.play-online .on-pill:not([hidden])) .quickbar { top: 98px; }
  #screen-game:not(.topbar-hidden):has(.play-online .on-pill:not([hidden])) .world-status { top: 130px; }
  .dhead-on { display: none; }
}
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) { .play-online { display: none !important; } }
.dhead-on:has(.on-pill[hidden]) { display: none; }
.chars-online { display: flex; justify-content: center; flex: 1; }
.hgrid.train-one { display: block; }
.hcard.train-big { padding: 18px 22px; border: 1px solid rgba(255,216,40, .55); background: radial-gradient(120% 140% at 0% 0%, rgba(255,214,30, .16), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg-1)); box-shadow: 0 0 0 1px rgba(255,216,40, .15), 0 8px 26px rgba(255,212,20, .12); }
.hcard.train-big .hcard-top { gap: 18px; align-items: center; }
.hcard.train-big .hmons { width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle, rgba(255,217,50, .28), transparent 70%); flex: none; }
.hcard.train-big .hname { font-size: 22px; }
.hcard.train-big .hsub { font-size: 14px; line-height: 1.45; }
.hcard.train-big .hcard-row { margin-top: 14px; gap: 10px; }
.hcard.train-big .hcard-row .btn { font-size: 15px; padding: 10px 26px; }
@media (max-width: 760px) { .hcard.train-big { padding: 14px; } .hcard.train-big .hmons { width: 76px; height: 76px; } .hcard.train-big .hname { font-size: 18px; } .hcard.train-big .hcard-row .btn { flex: 1; } }
.gb { display: flex; flex-direction: column; gap: 10px; }
.gb-cap { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #b3bacb; font-weight: 700; }
.gb-sub { font-size: 12px; color: #bdc4d4; }
.gb-hero { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 14px; border-radius: 12px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,216,40,.22), transparent 55%), linear-gradient(180deg, #1d1712, #121014);
  border: 1px solid rgba(255,219,60,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.35); }
.gb-hero-pts { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; min-width: 0; }
.gb-hero-ic { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffe15c, #c7a510 70%); box-shadow: 0 0 14px rgba(255,216,40,.45), inset 0 -3px 6px rgba(0,0,0,.35); }
.gb-hero-ic svg { width: 28px; height: 28px; color: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.gb-hero-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gb-big { font-size: 30px; line-height: 1; color: #ffea8a; text-shadow: 0 0 12px rgba(255,219,60,.35); font-variant-numeric: tabular-nums; }
.gb-meter { position: relative; height: 16px; border-radius: 8px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.gb-meter-fill { height: 100%; background: linear-gradient(90deg, #c7a510, #ffdb3c); border-radius: 8px; transition: width .4s; }
.gb-meter-fill.full { background: linear-gradient(90deg, #ffdb3c, #ffd36b); box-shadow: 0 0 10px rgba(255,225,90,.6); }
.gb-meter span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.gb-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.gb-pips { display: flex; gap: 6px; }
.gb-pip { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,219,60,.6); background: rgba(255,219,60,.08); }
.gb-pip.used { background: radial-gradient(circle at 35% 30%, #ffea8a, #ffd61e); border-color: #ffe15c; box-shadow: 0 0 8px rgba(255,216,40,.5); }
.gb-role { margin-top: 2px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #d6dbe6; }
.gb-role small { font-weight: 500; color: #b3bacb; }
.gb-role.can { background: rgba(125,220,106,.12); border-color: rgba(125,220,106,.45); color: #a9f09a; }
.gb-onrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gb-onpill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; font-size: 12px;
  background: color-mix(in srgb, var(--gbc) 16%, #111); border: 1px solid color-mix(in srgb, var(--gbc) 55%, transparent); color: #eef1f6; }
.gb-onpill i svg { width: 15px; height: 15px; color: var(--gbc); }
.gb-onpill b { color: var(--gbc); font-variant-numeric: tabular-nums; }
.gb-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,219,60,.22); }
.gb-title b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #ffe15c; }
.gb-title small { font-size: 11px; color: #b3bacb; }
.gb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.gb-card { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gbc) 10%, #17181d), #121318); border: 1px solid color-mix(in srgb, var(--gbc) 28%, rgba(255,255,255,.06));
  transition: transform .15s, box-shadow .15s; }
.gb-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, var(--gbc), transparent); opacity: .7; }
.gb-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.4), 0 0 0 1px color-mix(in srgb, var(--gbc) 35%, transparent); }
.gb-card.on { border-color: var(--gbc); box-shadow: 0 0 14px color-mix(in srgb, var(--gbc) 35%, transparent); }
.gb-card-top { display: flex; align-items: center; justify-content: space-between; }
.gb-card-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--gbc) 20%, #0d0e12); border: 1px solid color-mix(in srgb, var(--gbc) 50%, transparent); }
.gb-card-ic svg { width: 22px; height: 22px; color: var(--gbc); }
.gb-card-val { font-size: 22px; color: var(--gbc); text-shadow: 0 0 10px color-mix(in srgb, var(--gbc) 45%, transparent); }
.gb-card-name { font-size: 14px; color: #f1f3f7; }
.gb-card-desc { font-size: 12px; color: #b3bacb; line-height: 1.35; min-height: 32px; }
.gb-card-left { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--gbc); }
.gb-card-left.off { color: #8b93a7; font-weight: 600; }
.gb-tbar { position: relative; height: 6px; border-radius: 4px; background: rgba(0,0,0,.45); overflow: hidden; }
.gb-tbar > div { height: 100%; border-radius: 4px; background: var(--gbc, #ffdb3c); }
.gb-tbar.big { height: 18px; border-radius: 9px; border: 1px solid rgba(255,255,255,.08); }
.gb-tbar.big > div { background: linear-gradient(90deg, #c7a510, #ffdb3c); border-radius: 9px; }
.gb-tbar.big span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.gb-tbar.thin { height: 5px; }
.gb-tbar.thin > div { background: linear-gradient(90deg, #c7a510, #ffe15c); }
.gb-buy { margin-top: auto; align-self: stretch; justify-content: center; background: color-mix(in srgb, var(--gbc) 22%, #1a1b20) !important;
  border: 1px solid color-mix(in srgb, var(--gbc) 60%, transparent) !important; color: #fff !important; font-weight: 700; }
.gb-buy:hover:not(:disabled) { background: color-mix(in srgb, var(--gbc) 38%, #1a1b20) !important; }
.gb-buy:disabled { opacity: .45; }
.gb-buy small { font-weight: 500; opacity: .8; }
.gb-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.gb-box { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, #181a20, #121318); border: 1px solid rgba(255,255,255,.08); }
.gb-box-h { display: flex; align-items: center; gap: 7px; }
.gb-box-h > i svg { width: 18px; height: 18px; color: #ffe15c; }
.gb-box-h b { font-size: 13px; color: #f1f3f7; }
.gb-box-h small { margin-left: auto; font-size: 11px; color: #b3bacb; }
.gb-gem { width: 20px; height: 20px; }
.gb-empty { font-size: 12px; color: #b3bacb; padding: 10px; text-align: center; border: 1px dashed rgba(255,255,255,.12); border-radius: 10px; }
.gb-task-main { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; }
.gb-task-face { width: 72px; height: 72px; border-radius: 12px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 65%, rgba(255,219,60,.22), rgba(0,0,0,.35) 70%); border: 1px solid rgba(255,219,60,.3); }
.gb-task-face > i svg { width: 30px; height: 30px; color: #8b93a7; }
.gb-task-main.done .gb-task-face { border-color: rgba(125,220,106,.55); background: radial-gradient(circle at 50% 65%, rgba(125,220,106,.22), rgba(0,0,0,.35) 70%); }
.gb-task-main.done .gb-tbar.big > div { background: linear-gradient(90deg, #2f8f3a, #7ddc6a); }
.gb-task-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gb-task-mon { font-size: 15px; color: #f1f3f7; }
.gb-ok { font-size: 11px; color: #a9f09a; }
.gb-task-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gb-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #bdc4d4; }
.gb-mon { max-width: 190px; }
.gb-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #d6dbe6; cursor: pointer; user-select: none; }
.gb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.gb-knob { position: relative; width: 34px; height: 18px; border-radius: 9px; background: #2a2d36; border: 1px solid rgba(255,255,255,.15); transition: background .15s; flex: none; }
.gb-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #cfd4de; transition: transform .15s, background .15s; }
.gb-switch input:checked + .gb-knob { background: #c7a510; border-color: #ffdb3c; }
.gb-switch input:checked + .gb-knob::after { transform: translateX(16px); background: #fff; }
.gb-note { font-size: 11px; color: #9aa2b4; line-height: 1.35; }
.gb-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-chip { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; color: #d9c2ff;
  background: rgba(168,110,255,.12); border: 1px solid rgba(168,110,255,.4); }
.gb-chip:hover { background: rgba(168,110,255,.25); }
.gb-pp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gb-in { width: 90px; }
.gb-pp-prev { font-size: 13px; color: #a9f09a; min-width: 90px; }
.gb-pp-prev.bad { color: #ff9a8a; font-weight: 600; }
.gb-donors { display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow: auto; padding-right: 2px; }
.gb-donor { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.gb-donor.me { border-color: rgba(255,219,60,.5); background: rgba(255,219,60,.07); }
.gb-donor-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gb-donor-main small { font-size: 11px; color: #9aa2b4; }
.gb-donor-tot { color: #ffea8a; font-size: 12px; }
.gb-pos { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #cfd4de; background: rgba(255,255,255,.07); }
.gb-donor.top1 .gb-pos { background: radial-gradient(circle at 35% 30%, #fff1b0, #e0a21a); color: #3a2600; box-shadow: 0 0 10px rgba(255,200,60,.45); }
.gb-donor.top2 .gb-pos { background: radial-gradient(circle at 35% 30%, #ffffff, #9aa3b5); color: #20242c; }
.gb-donor.top3 .gb-pos { background: radial-gradient(circle at 35% 30%, #ffd2a8, #b0972a); color: #2c1606; }
.gb-log { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow: auto; }
.gb-log-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 12px; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.025); }
.gb-log-ic { width: 20px; height: 20px; display: grid; place-items: center; }
.gb-log-ic svg { width: 16px; height: 16px; color: var(--gbc, #ffe15c); }
.gb-log-gem { width: 18px; height: 18px; }
.gb-log-txt { min-width: 0; color: #d6dbe6; }
.gb-neg { color: #ff9a8a; font-weight: 700; }
.gb-plus { color: #a9f09a; font-weight: 700; }
@media (max-width: 560px) {
  .gb-hero { grid-template-columns: 1fr; }
  .gb-hero-side { align-items: flex-start; text-align: left; }
  .gb-grid { grid-template-columns: repeat(2, 1fr); }
}
.ha-tabs { display: flex; gap: 4px; margin: 6px 0 6px; border-bottom: 1px solid var(--line); }
.ha-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 6px 6px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .3px; cursor: pointer; margin-bottom: -1px; }
.ha-tab:hover { color: var(--text); }
.ha-tab.on { color: #ffe15c; border-bottom-color: #ffd51a; }
.ha-tab .ha-n { font-style: normal; font-weight: 600; font-size: 10.5px; color: var(--text-2); background: rgba(255,255,255,.06); border-radius: 8px; padding: 0 6px; }
.ha-tab .ha-n:empty { display: none; }
.ha-pane[hidden] { display: none !important; }
.dm-box.ha-pane { margin-top: 0; border-top: 0; padding-top: 0; }
.dm-box.ha-pane .dm-head { cursor: default; margin-top: 6px; }
.jutsu-bar .jutsu-sep.tog { flex: none; align-self: center; width: 34px; height: 40px; padding: 0; margin: 0 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 8px; border: 1px solid rgba(255,210,87,.55); background: linear-gradient(180deg, rgba(255,210,87,.16), rgba(40,30,10,.55)); box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.win[data-win="hotbar"] .jutsu-bar .jutsu-sep.tog { padding: 0; margin: 0 2px; width: 34px; }
.jutsu-bar .jutsu-sep.tog::after { display: none; }
.jutsu-sep.tog .tg-ic { color: #ffd257; font-size: 15px; line-height: 1; text-shadow: 0 0 6px rgba(255,210,87,.8); }
.jutsu-sep.tog .tg-t { font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .2px; color: #ffe7a6; line-height: 1; white-space: nowrap; }
.jutsu-sep.tog:hover { border-color: #ffd257; background: linear-gradient(180deg, rgba(255,210,87,.3), rgba(60,42,10,.6)); }
.jutsu-sep.tog.on { border-color: #ffdd43; background: linear-gradient(180deg, rgba(255,221,67,.45), rgba(80,36,6,.7)); }
.jutsu-sep.tog.on .tg-ic { color: #fff1d6; }
.jutsu-sep.tog.hint { position: relative; }
.jutsu-sep.tog.hint::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 12px rgba(255,210,87,.9); animation: glowFade 1.6s ease-in-out infinite; }
.spell-icon.kawa-ic { display: block; overflow: hidden; border-radius: 7px; background: radial-gradient(circle at 50% 45%, #1c2a44, #070a12); }
.spell-icon.kawa-ic img { display: block; width: 100%; height: 100%; max-width: none; image-rendering: pixelated; }
@media (min-width: 761px) {
  .win[data-win="hotbar"].fit { width: max-content !important; height: auto !important; max-width: calc(calc(100 * var(--vw)) - 24px); }
  .win[data-win="hotbar"].fit .win-body { height: auto; }
  .win[data-win="hotbar"].fit .jutsu-bar { flex-wrap: nowrap; width: max-content; height: auto; overflow: hidden; }
  .win[data-win="hotbar"].fit .win-rz { display: none; }
}
.voc-card .drop-badge { position: absolute; top: 6px; right: 7px; z-index: 1; font-size: 9px; font-weight: 900; letter-spacing: .8px; padding: 1px 6px; border-radius: 6px;
  background: linear-gradient(135deg, #c79bff, #7a3fe0); color: #12051f; box-shadow: 0 0 10px rgba(167,110,255,.5); white-space: nowrap; }
.voc-lock-note.drop { color: #e6d6ff; background: linear-gradient(90deg, rgba(150,95,255,.18), rgba(150,95,255,.04)); border-color: rgba(167,110,255,.45); }
.tooltip:has(.vsp-tip) { max-width: 380px; }
.vsp-tip { display: grid; gap: 7px; }
.vsp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line-2); padding-bottom: 5px; }
.vsp-head b { color: #fff; font-size: 13px; } .vsp-head small { color: var(--muted); }
.vsp-row { display: flex; gap: 8px; align-items: flex-start; }
.vsp-ic { flex: none; width: 30px; height: 30px; border-radius: 6px; background: #000; display: grid; place-items: center; color: #f2d03b; font-size: 14px; }
.vsp-tx { min-width: 0; }
.vsp-name { display: flex; gap: 6px; align-items: baseline; } .vsp-name b { color: #ffe77a; } .vsp-name em { color: var(--muted); font-style: normal; font-size: 11px; }
.vsp-sum { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; margin-top: 2px; font-size: 11px; color: #aeb6c4; }
.vsp-desc { margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--text-2); }
.ps-spchip { display: inline-block; margin: 1px 0; padding: 2px 9px; border-radius: 999px; border: 1px solid rgba(242,208,59,.45); background: rgba(242,208,59,.1); color: #ffe77a; font-size: 11px; cursor: help; }
.ps-spchip:hover { background: rgba(242,208,59,.22); border-color: #f2d03b; }
.vsw-card .ps-spchip { font-size: 10px; padding: 1px 7px; }
.char-row.cr-here { box-shadow: inset 0 0 0 1px rgba(70,190,120,.55), 0 0 14px rgba(70,190,120,.18); }
.char-row .cr-tab { font-size: 12px; padding: 6px 10px; }
body:has(#screen-chars.active) :is(.tut-veil, .tut-box) { display: none !important; }
.ps-card.skin .ps-card-art { background: radial-gradient(ellipse at 50% 88%, rgba(242,208,59,.28), transparent 60%), #0c0b10; }
.ps-skin-fig { display: grid; place-items: end center; height: 100%; padding-bottom: 6px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.vsp-pvp { margin: 3px 0 0; padding-left: 14px; display: grid; gap: 2px; font-size: 11.5px; line-height: 1.35; color: var(--text-2); }
.vsp-pvp li::marker { color: #f2d03b; }
.vsp-pvp li::first-letter { text-transform: uppercase; }
.ha-mobs { margin-top: 6px; }
.ha-mob-list { display: flex; flex-direction: column; gap: 3px; max-height: 180px; overflow-y: auto; }
.ha-mob { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 52px; align-items: center; gap: 6px; padding: 1px 6px; font-size: 11.5px; background: #0c0f16; border: 1px solid var(--line); border-radius: 5px; }
.ha-mob > * { position: relative; }
.ha-mob .dm-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,213,26,.14); pointer-events: none; border-radius: 5px; }
.ha-mob .dm-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-mob .dm-h { text-align: right; color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.ha-mob-f { width: 22px; height: 22px; display: grid; place-items: center; overflow: hidden; }
.tooltip:has(.item-cmp) { max-width: 600px; }
.item-cmp { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.item-cmp-col { flex: 1 1 250px; min-width: 0; }
.item-cmp-col.now { padding-left: 12px; border-left: 1px solid var(--line-2); opacity: .9; }
.item-cmp-t { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.item-cmp-col.now .item-cmp-t { color: var(--gold); }
@media (max-width: 760px) { .item-cmp-col.now { padding-left: 0; border-left: 0; padding-top: 10px; border-top: 1px solid var(--line-2); } }
.bossbar .bb-next { pointer-events: auto; flex: none; align-self: center; white-space: nowrap; animation: bbNextIn .25s ease-out; }
.bossbar .bb-next:disabled { opacity: .7; }
@keyframes bbNextIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .bossbar.mec:has(.bb-next) { flex-wrap: wrap; } .bossbar .bb-next { width: 100%; } }
.tk-gtask { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.tk-gtask .tk-acts { flex-direction: row; justify-content: flex-end; }