@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(../assets/fonts/noto-serif-sc-600.woff2) format("woff2");
}
@font-face {
  font-family: "Noto Serif SC";
  font-style: normal;
  font-display: swap;
  font-weight: 800 1000;
  src: url(../assets/fonts/noto-serif-sc-900.woff2) format("woff2");
}
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-display: swap;
  font-weight: 400 1000;
  src: url(../assets/fonts/ma-shan-zheng-400.woff2) format("woff2");
}
:root {
  --ink: #2b1e17;
  --ink-2: #5a4636;
  --ink-3: #4a382c;
  --muted: #7d6a58;
  --ink-bg: #2b1e17;
  --ink-on: #2b1e17;
  --paper: #f3e8cf;
  --paper-2: #ebdfc2;
  --paper-3: #dccaa4;
  --line: #d6c49e;
  --hi: #f5ebd6;
  --edge: transparent;
  --slate: initial;
  --green-t: initial;
  --red-t: initial;
  --blue-t: initial;
  --purple-t: initial;
  --gold-t: initial;
  --shadow: 0 10px 26px #2a161247, 0 2px 6px #2a161229;
  --shadow-sm: 0 4px 12px #2a161238;
  --w55: #f5ebd68c;
  --w70: #f5ebd6b3;
  --w82: #f5ebd6d1;
  --w85: #f5ebd6d9;
  --w86: #f5ebd6db;
  --w88: #f5ebd6e0;
  --w90: #f5ebd6e6;
  --w92: #f5ebd6eb;
  --w93: #f5ebd6ed;
  --w94: #f5ebd6f0;
  --w95: #f5ebd6f2;
  --w96: #f5ebd6f5;
  --w97: #f5ebd6f7;
  --k-c8f0ff: #e0e2dd;
  --k-d8c8ff: #e8ddda;
  --k-c9d6ff: #e1e3dd;
  --k-cfe0ff: #e5e6df;
  --k-e3e6ef: #eae7de;
  --k-d4ecff: #e8e8e0;
  --k-e6d6ff: #efe5e0;
  --k-d8e2ff: #ebeae2;
  --k-e6e9f2: #eceae1;
  --k-e3f6ff: #f0efe7;
  --k-e9e4ff: #f4ede7;
  --k-e4f1ff: #f1efe8;
  --k-e4ecff: #f1efe8;
  --k-e6efff: #f2f0e9;
  --k-f0f2f6: #f3f0e9;
  --k-e8f1ff: #f3f1ea;
  --k-e8f0ff: #f3f1ea;
  --k-f1e9ff: #f6f0ea;
  --k-eaf6ff: #f4f2eb;
  --k-efeaff: #f6f1ea;
  --k-eef3fb: #f4f2eb;
  --k-eef2fb: #f4f2eb;
  --k-f4ecff: #f7f1ec;
  --k-f2f5fa: #f5f3ed;
  --k-f1edff: #f7f2ec;
  --k-eef2ff: #f5f3ed;
  --k-eef4ff: #f5f3ed;
  --k-f4f5fb: #f6f4ef;
  --k-f4f6fb: #f6f4ef;
  --k-f1f6ff: #f6f5f0;
  --k-c8f5d6: #dbe4d0;
  --k-dcf8e4: #eaecdc;
  --k-dff6e7: #eaeddc;
  --k-e2f8e9: #edeee0;
  --k-e6f9ec: #f0f0e2;
  --k-e8f7ec: #f0f0e2;
  --k-e4fbe9: #f0f0e2;
  --k-e6faee: #f0f0e3;
  --k-e6fbe9: #f0f0e4;
  --k-eafbf0: #f2f2e6;
  --k-f0ffe8: #f3f3e7;
  --k-e8ffef: #f3f3e7;
  --k-f1fbf3: #f5f5eb;
  --k-f4fff0: #f6f6ed;
  --k-f4fff8: #f8f7f0;
  --k-d6d0e8: #e1d3d5;
  --k-d8d4e8: #e3d5d6;
  --k-d9d4e8: #e3d5d6;
  --k-d8d2ec: #e4d7d7;
  --k-d9d4ea: #e4d7d7;
  --k-d8d3ec: #e4d7d7;
  --k-d6cff0: #e4d7d7;
  --k-e4e0ef: #ece1dd;
  --k-e4dcf4: #ece2de;
  --k-e6e3ef: #ede4de;
  --k-e4e0f4: #eee4df;
  --k-e9e6f4: #f0e8e2;
  --k-ece9f4: #f1eae4;
  --k-ebe7f7: #f2eae4;
  --k-ece4fa: #f2eae4;
  --k-eeebf6: #f3ece6;
  --k-ece8fb: #f4ede7;
  --k-f1f1f5: #f4f0e8;
  --k-f1eefa: #f6f0ea;
  --k-f2f2f8: #f5f2eb;
  --k-f3eefc: #f6f1eb;
  --k-f4f2fa: #f7f2ec;
  --k-f6f4fc: #f8f3ef;
  --k-f6f3ff: #f9f5f0;
  --k-fbfaff: #f5ebd6;
  --k-ffe2c2: #f1dcc6;
  --k-fff0e0: #f7ecde;
  --k-fff1e4: #f8eee1;
  --k-fff3e6: #f8efe3;
  --k-ffe0f4: #f6eae0;
  --k-ffe6f3: #f7ede5;
  --k-ffe7fb: #f7ede6;
  --k-ffe8f4: #f7efe6;
  --k-ffe9f5: #f8efe7;
  --k-fff0fa: #f9f3ec;
  --k-fff3fb: #faf4ee;
  --k-f0b8ff: #e0d2d5;
  --k-ffc9cc: #f4d8ca;
  --k-ffd0d8: #f5ded0;
  --k-ffd0da: #f5ded0;
  --k-ffd6d6: #f6e2d5;
  --k-ffe0dc: #f7e6da;
  --k-ffdede: #f7e8dc;
  --k-ffe1e3: #f8e9de;
  --k-ffe4e6: #f8ebe1;
  --k-fde8e8: #f8ece2;
  --k-ffe8ea: #f9eee4;
  --k-ffe8e8: #f9eee4;
  --k-ffe9ea: #f9eee5;
  --k-ffecec: #f9f0e7;
  --k-fff0f0: #faf2eb;
  --k-fff1f1: #faf2ec;
  --k-fff3b8: #f0dfbd;
  --k-fff6c0: #f1e2c3;
  --k-fff1c2: #f2e3c5;
  --k-fff3c4: #f2e4c7;
  --k-fff7c8: #f3e5ca;
  --k-fff4c8: #f3e5ca;
  --k-fff4cc: #f3e7ce;
  --k-fff3d0: #f4e8d1;
  --k-fff6d0: #f4e8d1;
  --k-fff4d0: #f4e8d1;
  --k-fff3d6: #f5ebd6;
  --k-fff6d6: #f5ebd6;
  --k-fff6d8: #f5ebd8;
  --k-fff8d9: #f5ecd8;
  --k-fff6dc: #f6eddb;
  --k-fff8dc: #f6eddb;
  --k-fff3dc: #f6eddb;
  --k-fff6dd: #f6eddc;
  --k-fff9e0: #f7efde;
  --k-fff8e0: #f7efde;
  --k-fff8e6: #f8f1e3;
  --k-fffbe8: #f8f2e4;
  --k-fffbea: #f9f3e6;
  --k-fffaf0: #faf5eb;
  --k-fffdf6: #fbf7f0;
  --k-ffe58a: #e6c88d;
  --k-ffcfa6: #ebcab0;
  --k-ffe7b0: #eedcb7;
  --k-ffd86a: #deb86a;
  --k-ffe08a: #e6c88d;
  --k-ffe9a8: #edd9b0;
}
:root[data-theme="dark"] {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --ink: #eeede5;
  --ink-2: #9db2c2;
  --ink-3: #bacad7;
  --muted: #718ca0;
  --ink-bg: #3a5366;
  --slate: #465e70;
  --paper: #392822;
  --paper-2: #2e1f1a;
  --paper-3: #2e4150;
  --line: #334756;
  --hi: #f5ebd612;
  --edge: #80acce29;
  --green-t: #6fbb95;
  --red-t: #e9948e;
  --blue-t: #9ebfd9;
  --purple-t: #d9d3c9;
  --gold-t: #dcb25e;
  --shadow: 0 12px 32px #0000008c, 0 2px 8px #00000066;
  --shadow-sm: 0 4px 14px #00000073;
  --w55: #3a28228c;
  --w70: #3a2822b3;
  --w82: #3a2822d1;
  --w85: #3a2822d9;
  --w86: #3a2822db;
  --w88: #3a2822e0;
  --w90: #3a2822e6;
  --w92: #3a2822eb;
  --w93: #3a2822ed;
  --w94: #3a2822f0;
  --w95: #3a2822f2;
  --w96: #3a2822f5;
  --w97: #3a2822f7;
  --k-c8f0ff: #233e53;
  --k-d8c8ff: #49342d;
  --k-c9d6ff: #233e52;
  --k-cfe0ff: #492f25;
  --k-e3e6ef: #402e29;
  --k-d4ecff: #452c23;
  --k-e6d6ff: #432b22;
  --k-d8e2ff: #412a22;
  --k-e6e9f2: #372e2b;
  --k-e3f6ff: #39251d;
  --k-e9e4ff: #37241d;
  --k-e4f1ff: #37241d;
  --k-e4ecff: #37241d;
  --k-e6efff: #36231c;
  --k-f0f2f6: #31231f;
  --k-e8f1ff: #35221b;
  --k-e8f0ff: #35221b;
  --k-f1e9ff: #34221b;
  --k-eaf6ff: #33211a;
  --k-efeaff: #33211a;
  --k-eef3fb: #30221d;
  --k-eef2fb: #30221d;
  --k-f4ecff: #311f19;
  --k-f2f5fa: #2b211e;
  --k-f1edff: #311f19;
  --k-eef2ff: #301f19;
  --k-eef4ff: #301f19;
  --k-f4f5fb: #2a201c;
  --k-f4f6fb: #2a201c;
  --k-f1f6ff: #2e1d17;
  --k-c8f5d6: #2f5341;
  --k-dcf8e4: #412d26;
  --k-dff6e7: #3e2d27;
  --k-e2f8e9: #3b2a24;
  --k-e6f9ec: #382822;
  --k-e8f7ec: #352924;
  --k-e4fbe9: #3a261f;
  --k-e6faee: #382620;
  --k-e6fbe9: #38261f;
  --k-eafbf0: #34241e;
  --k-f0ffe8: #35221b;
  --k-e8ffef: #35221b;
  --k-f1fbf3: #2d211d;
  --k-f4fff0: #2e1e18;
  --k-f4fff8: #2c1c16;
  --k-d6d0e8: #313f4a;
  --k-d8d4e8: #303e49;
  --k-d9d4e8: #303e49;
  --k-d8d2ec: #303e48;
  --k-d9d4ea: #303e48;
  --k-d8d3ec: #303e48;
  --k-d6cff0: #303e48;
  --k-e4e0ef: #43332d;
  --k-e4dcf4: #43322c;
  --k-e6e3ef: #42322c;
  --k-e4e0f4: #41322c;
  --k-e9e6f4: #40302a;
  --k-ece9f4: #2e231f;
  --k-ebe7f7: #2e231f;
  --k-ece4fa: #2e231f;
  --k-eeebf6: #2e231f;
  --k-ece8fb: #2e231f;
  --k-f1f1f5: #2e231f;
  --k-f1eefa: #2e231f;
  --k-f2f2f8: #2e231f;
  --k-f3eefc: #2e231f;
  --k-f4f2fa: #2e231f;
  --k-f6f4fc: #2e231f;
  --k-f6f3ff: #322622;
  --k-fbfaff: #322622;
  --k-ffe2c2: #583826;
  --k-fff0e0: #3b261e;
  --k-fff1e4: #37241d;
  --k-fff3e6: #36231c;
  --k-ffe0f4: #3b261e;
  --k-ffe6f3: #36231c;
  --k-ffe7fb: #35221c;
  --k-ffe8f4: #35221b;
  --k-ffe9f5: #34221b;
  --k-fff0fa: #2e1e18;
  --k-fff3fb: #2c1c16;
  --k-f0b8ff: #463059;
  --k-ffc9cc: #522623;
  --k-ffd0d8: #482e25;
  --k-ffd0da: #482e25;
  --k-ffd6d6: #432b22;
  --k-ffe0dc: #3e2820;
  --k-ffdede: #3c271f;
  --k-ffe1e3: #3a251e;
  --k-ffe4e6: #37241d;
  --k-fde8e8: #36231c;
  --k-ffe8ea: #35221b;
  --k-ffe8e8: #35221b;
  --k-ffe9ea: #34221b;
  --k-ffecec: #311f19;
  --k-fff0f0: #2e1e18;
  --k-fff1f1: #2e1d17;
  --k-fff3b8: #604e29;
  --k-fff6c0: #594826;
  --k-fff1c2: #584726;
  --k-fff3c4: #564625;
  --k-fff7c8: #534323;
  --k-fff4c8: #534323;
  --k-fff4cc: #4f4022;
  --k-fff3d0: #482e25;
  --k-fff6d0: #482e25;
  --k-fff4d0: #482e25;
  --k-fff3d6: #432b22;
  --k-fff6d6: #432b22;
  --k-fff6d8: #412a22;
  --k-fff8d9: #402921;
  --k-fff6dc: #3e2820;
  --k-fff8dc: #3e2820;
  --k-fff3dc: #3e2820;
  --k-fff6dd: #3d2820;
  --k-fff9e0: #3b261e;
  --k-fff8e0: #3b261e;
  --k-fff8e6: #36231c;
  --k-fffbe8: #35221b;
  --k-fffbea: #33211a;
  --k-fffaf0: #2e1e18;
  --k-fffdf6: #2c1c16;
  --k-ffe58a: #715a2b;
  --k-ffcfa6: #673e27;
  --k-ffe7b0: #634f26;
  --k-ffd86a: #7c622f;
  --k-ffe08a: #715a2b;
  --k-ffe9a8: #665127;
}
:root[data-theme="dark"] .panel {
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px var(--edge);
}
:root[data-theme="dark"] .pill.on {
  background: var(--ink-bg);
  color: #fef8ec;
  box-shadow:
    0 2px 0 #00000059,
    var(--shadow-sm);
}
:root[data-theme="dark"] .seg {
  box-shadow: inset 0 1px 3px #00000066;
}
:root[data-theme="dark"] .switch {
  background: #3b5161;
  box-shadow: inset 0 2px 4px #00000066;
}
:root[data-theme="dark"] .switch.on {
  background: var(--c, var(--green));
}
:root[data-theme="dark"] .switch i {
  background: #eeede5;
}
:root[data-theme="dark"] .dx-tile.unk > canvas:first-child {
  filter: brightness(0) invert();
  opacity: 0.2;
}
:root[data-theme="dark"] .ls-mate.off img {
  filter: brightness(0) invert() opacity(0.25);
}
:root[data-theme="dark"] .ic.locked .ic-art > img {
  filter: brightness(0) invert() opacity(0.22);
}
:root[data-theme="dark"] .q-card.secret .q-ic img {
  filter: brightness(0) invert() opacity(0.3);
}
:root[data-theme="dark"] .rs-fam.unk .rs-ring img {
  filter: brightness(0) invert() opacity(0.2);
}
:root[data-theme="dark"] .rg-stop.leg small,
:root[data-theme="dark"] .rg-miles .rg-stop.leg em {
  color: var(--gold-t);
}
:root[data-theme="dark"] {
  --bp-gold-d: #dcb25e;
  --bp-ok: var(--green-t);
}
:root[data-theme="dark"] .timer:before {
  box-shadow: 0 0 0 2px var(--ink);
}
:root[data-theme="dark"] .timer:after {
  background: var(--ink);
}
:root[data-theme="dark"] .tl-next img {
  filter: brightness(0) invert() opacity(0.7);
}
:root[data-theme="dark"] .wallet > b {
  color: var(--gold-t);
}
:root[data-theme="dark"] .bb-sub:not(.move) {
  color: var(--green-t);
}
:root[data-theme="dark"] .bossbar.mini .bb-sub {
  color: var(--ink-2);
}
:root[data-theme="dark"] .bossbar.immune .bb-sub {
  color: var(--muted);
}
:root[data-theme="dark"] .bossbar.shield .bb-sub {
  color: var(--blue-t);
}
:root[data-theme="dark"] .coop-bar span {
  color: #fef8ec;
  text-shadow:
    0 1px 2px #000000d9,
    0 0 3px #00000099;
}
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light only;
  /* 汉漆与青绿山水的矿物颜料 */
  --red: #b4281e;
  --red-d: #861a14;
  --orange: #b4642c;
  --yellow: #d9a943;
  --yellow-d: #a8792a;
  --blue: #2f6491;
  --blue-d: #214a6d;
  --green: #3f7e60;
  --green-d: #2b5c45;
  --purple: #6b4a86;
  --purple-d: #4a3163;
  --lacquer: #2a1612;
  --bronze: #b98b3e;
  --bronze-l: #e3c27a;
  --radius: 6px;
  --font-title: "Noto Serif SC", "Songti SC", serif;
  --font: "Noto Serif SC", "Songti SC", serif;
  --font-brush: "Ma Shan Zheng", "Kaiti SC", "STKaiti", "KaiTi", serif;
  --r0: #8c8274;
  --r1: #4f8a68;
  --r2: #3a72a6;
  --r3: #7b52a0;
  --r4: #c9922e;
  /* 云气纹：替代糖果条纹的织锦底纹 */
  --stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='44' viewBox='0 0 64 44'%3E%3Cdefs%3E%3Cpath id='c' fill='none' d='M2 15c-2-4 2-8 6-6 3 2 2 6-1 6-2 0-2-3 0-3M8 9c4-6 13-7 17-1M25 8c2-3 7-3 8 0 2 2-1 5-3 4-2-1-1-3 1-2'/%3E%3C/defs%3E%3Cg stroke='#fff' stroke-opacity='.15' stroke-width='1.8' stroke-linecap='round'%3E%3Cuse href='#c'/%3E%3Cuse href='#c' x='32' y='22'/%3E%3Cuse href='#c' x='-32' y='22'/%3E%3C/g%3E%3C/svg%3E");
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  color: var(--ink);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  background: #2e1e18;
  margin: 0;
  font-weight: 700;
  overflow: hidden;
}
canvas#game {
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  inset: 0;
}
#ui {
  pointer-events: none;
  z-index: 10;
  position: fixed;
  inset: 0;
}
#ui > * {
  pointer-events: auto;
}
#ui .passthru {
  pointer-events: none;
}
button {
  font-family: var(--font-title);
  cursor: pointer;
}
input {
  font-family: var(--font);
}
.panel {
  background: var(--w97);
  border-radius: var(--radius);
  box-shadow:
    0 0 0 2px var(--frame, #3b2519),
    inset 0 0 0 4px var(--w97),
    inset 0 0 0 5px #b98b3e73,
    var(--shadow);
}
.btn {
  --c: var(--yellow);
  --cd: var(--yellow-d);
  --tc: var(--ink-on);
  color: var(--tc);
  letter-spacing: 0.3px;
  background: var(--c);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, white) 0%, var(--c) 60%, var(--cd) 100%);
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--cd) 70%, black),
    var(--shadow-sm);
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  font-size: 17px;
  font-weight: 800;
  transition:
    transform 0.1s,
    box-shadow 0.1s,
    filter 0.12s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.btn:after {
  content: "";
  background: var(--stripes);
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px) scale(1.02);
}
.btn:active {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--cd) 70%, black);
  transform: translateY(2px);
}
.btn:disabled {
  filter: grayscale(0.85) brightness(0.95);
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
.btn.red {
  --c: var(--red);
  --cd: var(--red-d);
  --tc: #f5ebd6;
}
.btn.armed,
.btn.ghost.armed {
  --c: var(--red);
  --cd: var(--red-d);
  --tc: #f5ebd6;
  animation: 0.6s ease-in-out infinite alternate armed-pulse;
}
@keyframes armed-pulse {
  to {
    filter: brightness(1.15);
    transform: scale(1.04);
  }
}
.btn.blue {
  --c: var(--blue);
  --cd: var(--blue-d);
  --tc: #f5ebd6;
}
.btn.green {
  --c: var(--green);
  --cd: var(--green-d);
  --tc: #f5ebd6;
}
.btn.ghost {
  --c: var(--paper);
  --cd: var(--paper-3);
  --tc: var(--ink);
}
.btn.ghost:after {
  display: none;
}
.btn.small {
  padding: 7px 14px;
  font-size: 13px;
}
.btn.big {
  padding: 16px 38px;
  font-size: 22px;
}
.title {
  font-family: var(--font-title);
  font-weight: 800;
}
.chip {
  font-family: var(--font-title);
  color: #fef8ec;
  text-shadow: 0 1px 1px #00000040;
  letter-spacing: 0.3px;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  box-shadow: inset 0 -2px #00000026;
}
.tag {
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  font-weight: 900;
}
.muted {
  color: var(--muted);
}
.row {
  align-items: center;
  gap: 10px;
  display: flex;
}
.col {
  flex-direction: column;
  gap: 10px;
  display: flex;
}
.grow {
  flex: 1;
}
.center {
  justify-content: center;
  align-items: center;
  display: flex;
}
.pix {
  image-rendering: pixelated;
}
.scroll {
  scrollbar-width: thin;
  scrollbar-color: #d1c9be transparent;
  overflow-y: auto;
}
.field {
  border: 2px solid var(--line);
  background: var(--paper-2);
  width: 100%;
  color: var(--ink);
  border-radius: 4px;
  outline: none;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
}
.field:focus {
  border-color: var(--blue);
  background: var(--paper);
}
.err {
  color: var(--red-t, var(--red-d));
  min-height: 20px;
  font-weight: 800;
}
.bar {
  background: #563d34;
  border-radius: 4px;
  height: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 3px #0000004d;
}
.bar > i {
  transform-origin: 0;
  background: linear-gradient(#84c5a5, #44906a);
  border-radius: 4px;
  transition: transform 0.15s;
  position: absolute;
  inset: 0;
}
.bar > b {
  font-family: var(--font-title);
  color: #fef8ec;
  text-shadow: 0 1px 2px #00000099;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  position: absolute;
  inset: 0;
}
.screen {
  isolation: isolate;
  flex-direction: column;
  padding: 18px 24px 20px;
  animation: 0.25s ease-out fadeIn;
  display: flex;
  position: absolute;
  inset: 0;
}
.screen.dim {
  background: radial-gradient(#3b261f26, #2a1b169e);
}
.screen.blur {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes float {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes shine {
  0% {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.currency {
  background: var(--w95);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-title);
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 6px 8px;
  font-size: 17px;
  font-weight: 800;
  display: inline-flex;
}
.currency img {
  width: 28px;
  height: 28px;
}
.stat-row {
  grid-template-columns: 78px 1fr 34px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  display: grid;
}
.stat-row .sb {
  background: var(--paper-3);
  border-radius: 9px;
  height: 9px;
  overflow: hidden;
}
.stat-row .sb i {
  background: var(--blue);
  border-radius: 9px;
  height: 100%;
  display: block;
}
.list {
  flex-direction: column;
  gap: 10px;
  display: flex;
}
.item-row {
  background: var(--paper);
  border-radius: 6px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  display: flex;
  box-shadow: 0 2px 8px #3a251e14;
}
.item-row img.ic {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}
.item-row h4 {
  font-family: var(--font-title);
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}
.pips {
  gap: 4px;
  margin-top: 6px;
  display: flex;
}
.pips i {
  background: var(--line);
  border-radius: 6px;
  width: 18px;
  height: 6px;
}
.pips i.on {
  background: linear-gradient(90deg, var(--orange), var(--yellow));
}
#hud {
  pointer-events: none;
  font-family: var(--font-title);
  position: absolute;
  inset: 0;
}
#hud * {
  pointer-events: none;
}
.hud-tl,
.hud-party,
.hud-tr,
.hud-bl,
.hud-br {
  scale: var(--hs, 1);
}
.hud-tl,
.hud-party,
.hud-top,
.hud-tr,
.hud-bl,
.hud-br,
.streak {
  opacity: var(--ho, 1);
}
.hud-party {
  transform-origin: 0 0;
}
.hud-tr {
  transform-origin: 100% 0;
}
.hud-bl {
  transform-origin: 0 100%;
}
.hud-br {
  transform-origin: 100% 100%;
}
#hud.no-minimap .minimap,
#hud.no-toasts .toasts,
#hud.no-streak .streak,
#hud.no-items .hud-br {
  display: none !important;
}
.hpbar {
  height: 14px;
}
.hpbar:before {
  content: none;
}
.hpbar > i {
  background: linear-gradient(#84c5a5 0%, #44906a 100%);
  left: 0;
}
.hpbar.mid > i {
  background: linear-gradient(#e2c07c, #c3902b);
}
.hpbar.low > i {
  background: linear-gradient(#e9918a, #ca3126);
  animation: 0.5s infinite alternate pulse;
}
.hpbar > s {
  transform-origin: 0;
  background: #8ab2d1bf;
  border-radius: 4px;
  position: absolute;
  inset: 0;
}
.hpbar > b {
  font-size: 9px;
}
@keyframes pulse {
  to {
    filter: brightness(1.35);
  }
}
.xpbar {
  height: 9px;
  box-shadow:
    0 0 0 2px var(--paper),
    0 2px 4px #00000059;
  background: #47332b;
  margin-top: 2px;
  overflow: visible;
}
.xpbar > i {
  background: linear-gradient(90deg, #4e8bba, #6d9fc6 60%, #ced7d7) 0 0/200% 100%;
  transition: transform 0.12s cubic-bezier(0.3, 1.6, 0.5, 1);
  animation: 1.6s linear infinite xpShine;
  box-shadow: 0 0 6px #6d9fc6b3;
}
.xpbar > em {
  opacity: 0;
  background: radial-gradient(closest-side, #c9d4d6f2, #6d9fc600);
  border-radius: 4px;
  position: absolute;
  inset: -3px;
}
.xpbar.gain > em {
  animation: 0.28s ease-out xpFlash;
}
.xpbar.gain {
  animation: 0.22s ease-out xpBump;
}
.xpbar.big > em {
  background: radial-gradient(closest-side, #e3d6d7, #a689bf00);
  animation-duration: 0.5s;
}
@keyframes xpShine {
  0% {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
@keyframes xpFlash {
  0% {
    opacity: 0.95;
  }
  to {
    opacity: 0;
  }
}
@keyframes xpBump {
  0% {
    transform: scaleY(1.6);
  }
  to {
    transform: scaleY(1);
  }
}
.xpbar > b {
  color: var(--ink-2);
  text-shadow: none;
  justify-content: flex-start;
  font-size: 10px;
  position: absolute;
  inset: 8px 0 auto;
}
.hud-top {
  --bc: #3e8562;
  transform-origin: top;
  background: var(--w96);
  width: max-content;
  box-shadow: var(--shadow);
  border-radius: 7px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 10px 18px 8px;
  display: grid;
  position: absolute;
  top: 12px;
  left: 50%;
  overflow: visible;
  transform: translate(-50%);
}
.hud-top:before {
  content: "";
  background: var(--stripes), linear-gradient(90deg, var(--bc), color-mix(in srgb, var(--bc) 60%, #d39e36));
  border-radius: 7px 7px 0 0;
  height: 6px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.ht-l {
  flex-direction: column;
  justify-self: start;
  gap: 3px;
  min-width: 0;
  padding-right: 18px;
  display: flex;
}
.ht-biome {
  font-family: var(--font-title);
  color: var(--ink);
  white-space: nowrap;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.05;
}
.ht-row {
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  display: flex;
}
.ht-zone {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 900;
}
.ht-pips {
  gap: 3px;
  display: flex;
}
.ht-pips i {
  background: var(--k-ece9f4);
  border: 2px solid #d1c9bc;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: relative;
}
.ht-pips i:after {
  content: "";
  background: var(--paper);
  border-radius: 1px;
  width: 4px;
  height: 4px;
  margin: -2px;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 0 1.5px #d1c9bc;
}
.ht-pips i.now {
  border-color: var(--ink);
  background: radial-gradient(circle at 35% 30%, #eda8a3, #c83126 60%, #94241c);
  animation: 1.2s ease-in-out infinite pipNow;
}
.ht-pips i.now:after {
  box-shadow: 0 0 0 1.5px var(--ink);
}
.ht-pips i.done {
  background: radial-gradient(circle at 35% 30%, #cfe0c8, #4ea67a 50%, #367355);
  border-color: #367355;
}
.ht-pips i.done:after {
  box-shadow: 0 0 0 1.5px #367355;
}
.ht-pips i.sanct:not(.now):not(.done) {
  background: radial-gradient(circle at 35% 30%, #f2e4c7, #e2c07c 40%, #ae8126);
  border-color: #ae8126;
}
@keyframes pipNow {
  50% {
    transform: scale(1.18);
  }
}
.ht-tier {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fef8ec;
  background: #47966f;
  border-radius: 4px;
  padding: 1px 9px;
  font-size: 10px;
  font-weight: 900;
}
.ht-tier[data-t="1"] {
  background: #c76932;
}
.ht-tier[data-t="2"] {
  background: #875fa9;
}
.ht-weather {
  color: var(--blue-t, #3d739d);
  background: var(--k-e4f1ff);
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  padding: 1px 8px 1px 3px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}
.ht-weather em {
  color: #875fa9;
  font-style: normal;
}
.ht-c {
  z-index: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: -4px 0 -80px;
  display: flex;
}
.danger {
  --dc: #47966f;
  background: var(--paper);
  box-shadow: var(--shadow);
  white-space: nowrap;
  border-radius: 4px;
  align-items: center;
  gap: 7px;
  padding: 2px 9px 2px 10px;
  display: flex;
}
.danger b {
  letter-spacing: 0.8px;
  text-transform: uppercase;
  min-width: 86px;
  color: var(--dc);
  text-align: center;
  font-size: 11px;
  font-weight: 900;
}
.dg-seg {
  gap: 3px;
  display: flex;
}
.dg-seg i {
  background: var(--k-e6e3ef);
  border-radius: 3px;
  width: 13px;
  height: 7px;
  overflow: hidden;
}
.dg-seg em {
  background: var(--c);
  transform-origin: 0;
  height: 100%;
  transition: transform 0.4s linear;
  display: block;
}
.danger.up {
  animation: 0.6s ease-out dangerUp;
}
.danger[data-b="5"] b,
.danger[data-b="6"] b,
.evpill.siege b {
  animation: 0.5s infinite alternate pulse;
}
@keyframes dangerUp {
  0% {
    box-shadow:
      0 0 0 4px var(--dc),
      var(--shadow);
    transform: scale(1.35);
  }
  to {
    transform: scale(1);
  }
}
.timer {
  font-family: var(--font-title);
  color: #fef8ec;
  letter-spacing: 1px;
  box-shadow:
    0 0 0 4px var(--paper),
    var(--shadow);
  background: linear-gradient(#554068 0 50%, #483128 50%);
  border-radius: 4px;
  padding: 3px 24px 4px 46px;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  position: relative;
}
.timer:before {
  content: "";
  background: radial-gradient(circle at 35% 30%, #f2e4c7 0 8%, #d4a23d 34%, #a87c25 74%, #7d421f);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  position: absolute;
  top: 50%;
  left: 12px;
  box-shadow: 0 0 0 2px #402b24;
}
.timer:after {
  content: "";
  background: #402b24;
  border-radius: 1px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  position: absolute;
  top: 50%;
  left: 19px;
  box-shadow: 0 0 0 1.5px #7d421f;
}
.timer.final {
  background: linear-gradient(180deg, #e26f66 0 50%, var(--red-d) 50%);
  animation: 0.4s infinite alternate pulse;
}
.ht-r {
  justify-self: end;
  padding-left: 18px;
}
.runclock {
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  display: flex;
}
.runclock b {
  font-family: var(--font-title);
  letter-spacing: 0.5px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}
.runclock small {
  color: var(--ink-2);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 900;
}
.runclock.ahead small {
  color: #3c805e;
}
.runclock.behind small {
  color: var(--red-t, var(--red-d));
}
.hud-top.compact {
  grid-template-columns: auto auto auto;
  padding: 8px 12px 6px;
}
.hud-top.compact .ht-r {
  padding-left: 10px;
}
.hud-top.compact .runclock small {
  display: none;
}
.hud-top.slim {
  grid-template-columns: auto;
}
.hud-top.slim .ht-l,
.hud-top.slim .ht-r {
  display: none;
}
.hud-top.compact .ht-weather {
  padding-right: 3px;
  font-size: 0;
}
.hud-tr {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  display: flex;
  position: absolute;
  top: 14px;
  right: 14px;
}
.minimap {
  width: calc(212px * var(--mm, 1));
  height: calc(212px * var(--mm, 1));
  box-shadow:
    var(--shadow-sm),
    0 0 0 4px var(--paper),
    0 0 0 7px var(--red);
  background: #402b2473;
  border-radius: 50%;
}
.counters {
  gap: 8px;
  display: flex;
}
.wallet {
  background: var(--paper);
  box-shadow: var(--shadow);
  white-space: nowrap;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 5px;
  font-weight: 900;
  display: flex;
}
.wallet > img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
.wallet > b {
  font-family: var(--font-title);
  color: #946e21;
  min-width: 2ch;
  padding-right: 4px;
  font-size: 17px;
}
.wl-ball {
  color: var(--red-t, var(--red-d));
  background: var(--k-ffe8ea);
  border-radius: 4px;
  align-items: center;
  gap: 2px;
  padding: 1px 8px 1px 3px;
  font-size: 12px;
  display: inline-flex;
}
.wl-ball img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
.wl-ball em {
  font-style: normal;
}
.wl-ball.ok {
  color: var(--green-t, #367355);
  background: var(--k-e2f8e9);
}
.counter {
  background: var(--w95);
  box-shadow: var(--shadow-sm);
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 3px 12px 3px 5px;
  font-size: 15px;
  font-weight: 900;
  display: flex;
}
.counter img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
.hud-bl {
  flex-direction: column;
  gap: 8px;
  display: flex;
  position: absolute;
  bottom: 14px;
  left: 14px;
}
.slots {
  gap: 8px;
  display: flex;
}
.slot {
  background: var(--paper);
  width: 64px;
  height: 64px;
  box-shadow:
    var(--shadow-sm),
    inset 0 -3px 0 #00000026;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.slot.empty {
  background: #f5ebd647;
  box-shadow: inset 0 0 0 2px #f5ebd68c;
}
.slot.locked {
  color: #fef8ec;
  background: #402b248c;
}
.slot .cd {
  transform-origin: bottom;
  background: #24171280;
  position: absolute;
  inset: 0;
}
.slot .lvl {
  color: #fef8ec;
  text-shadow: 0 1px 2px #000000b3;
  font-size: 12px;
  font-weight: 900;
  position: absolute;
  bottom: 2px;
  right: 6px;
}
.slot .nm {
  text-align: center;
  color: #fef8ec;
  text-shadow: 0 1px 2px #000000b3;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 900;
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  overflow: hidden;
}
.slot img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
}
.slot.mini {
  border-radius: 5px;
  width: 42px;
  height: 42px;
}
.slot.mini img {
  width: 28px;
  height: 28px;
}
.typeicon {
  color: #fef8ec;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  font-size: 16px;
  display: flex;
  box-shadow:
    inset 0 -2px #00000033,
    0 0 0 2px #f5ebd6d9;
}
.hud-br {
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
  gap: 6px;
  max-width: 360px;
  max-height: 36vh;
  display: flex;
  position: absolute;
  bottom: 14px;
  right: 14px;
  overflow: hidden;
}
.itm {
  background: var(--paper);
  width: 40px;
  height: 40px;
  box-shadow: var(--shadow-sm);
  border-bottom: 3px solid var(--r0);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.itm img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}
.itm b {
  background: var(--ink-bg);
  color: #fef8ec;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 11px;
  position: absolute;
  bottom: -5px;
  right: -5px;
}
.prompt {
  background: var(--w96);
  box-shadow: var(--shadow);
  white-space: nowrap;
  border-radius: 4px;
  align-items: center;
  gap: 10px;
  padding: 9px 22px 9px 9px;
  font-size: 17px;
  font-weight: 800;
  animation: 0.2s popIn;
  display: flex;
  position: absolute;
  bottom: 24%;
  left: 50%;
  transform: translate(-50%);
}
.toasts {
  transform: translateX(-50%) scale(var(--hs, 1));
  transform-origin: top;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  display: flex;
  position: absolute;
  top: 158px;
  left: 50%;
}
.toast {
  background: var(--w96);
  box-shadow: var(--shadow-sm);
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 7px 18px 7px 8px;
  font-size: 15px;
  font-weight: 800;
  animation: 0.25s ease-out popIn;
  display: flex;
}
.toast img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.rival-toast {
  color: #402b24;
  border: 2px solid #95cdb1;
  font-size: 14px;
}
.rival-toast img {
  width: 32px;
  height: 32px;
  margin: -4px 0;
}
.banner {
  text-align: center;
  pointer-events: none;
  justify-content: center;
  padding: 0 16px;
  animation: 3.2s ease-out forwards bannerIn;
  display: flex;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
}
.bn-row {
  align-items: center;
  max-width: 100%;
  display: inline-flex;
}
.bn-txt {
  flex-direction: column;
  align-items: center;
  min-width: 0;
  display: flex;
}
.banner h1 {
  color: #fef8ec;
  background: var(--stripes),
    linear-gradient(100deg, var(--c, var(--red)), color-mix(in srgb, var(--c, var(--red)) 60%, #402b24));
  box-shadow: var(--shadow);
  text-shadow: 0 3px #00000033;
  border-radius: 6px;
  margin: 0;
  padding: 8px 40px;
  font-size: clamp(28px, 4.2vw, 54px);
  font-weight: 900;
  display: inline-block;
  transform: skew(-8deg);
}
.banner p {
  color: #fef8ec;
  background: #281a149e;
  border-radius: 4px;
  margin: 10px 0 0;
  padding: 5px 18px;
  font-size: 17px;
  font-weight: 800;
  display: inline-block;
  box-shadow: 0 4px 14px #0000002e;
}
.banner.has-pt .bn-txt {
  align-items: flex-start;
}
.banner.has-pt h1 {
  margin-left: -46px;
  padding-left: 66px;
}
.banner.has-pt p {
  margin-left: 18px;
}
.bn-pt {
  z-index: 1;
  background: radial-gradient(circle at 50% 38%, var(--paper) 55%, color-mix(in srgb, var(--c) 22%, var(--paper)));
  border: 5px solid var(--c);
  width: 104px;
  height: 104px;
  box-shadow:
    var(--shadow),
    0 0 0 5px #f5ebd6cc;
  border-radius: 50%;
  flex: none;
  place-items: center;
  animation: 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both bnPt;
  display: grid;
  position: relative;
  overflow: hidden;
}
.bn-pt img,
.cap-pt img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.bn-pt.shiny,
.cap-pt.shiny,
.evo-portrait.shiny {
  box-shadow:
    var(--shadow),
    0 0 0 5px #f5ebd6cc,
    0 0 26px 6px #dfa9b2cc;
}
@keyframes bnPt {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-25deg);
  }
}
#hud.capturing > :not(.capcine):not(.cap-reveal) {
  transition: opacity 0.3s;
  opacity: 0 !important;
}
.capcine {
  pointer-events: none;
  z-index: 30;
  animation: 0.3s fadeIn;
  position: absolute;
  inset: 0;
}
.capcine.out {
  opacity: 0;
  transition: opacity 0.45s;
}
.capcine .lb {
  background: #150e0b;
  height: 10vh;
  position: absolute;
  left: 0;
  right: 0;
}
.capcine .lb.top {
  animation: 0.45s ease-out lbTop;
  top: 0;
}
.capcine .lb.bottom {
  animation: 0.45s ease-out lbBottom;
  bottom: 0;
}
.cap-vig {
  background: radial-gradient(at 50% 55%, #150e0b00 30%, #150e0b80 78%, #150e0bbf);
  position: absolute;
  inset: 0;
}
.cap-plate {
  background: var(--paper);
  box-shadow: var(--shadow);
  border-bottom: 5px solid var(--c);
  border-radius: 4px;
  align-items: center;
  gap: 14px;
  padding: 10px 26px 10px 10px;
  animation: 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.2s both capPlateIn;
  display: flex;
  position: absolute;
  bottom: calc(10vh + 16px);
  left: 50%;
  transform: translate(-50%);
}
@keyframes capPlateIn {
  0% {
    opacity: 0;
    transform: translate(-50%, 40px) scale(0.9);
  }
}
.cap-pt {
  background: var(--paper-2);
  border: 4px solid var(--c);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
  overflow: hidden;
}
.cap-info p {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
  font-size: 12px;
  font-weight: 900;
}
.cap-info h2 {
  font-family: var(--font-title);
  color: var(--ink);
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.05;
  display: flex;
}
.cap-info h2 .shiny-mark {
  position: static;
}
.cap-pips {
  gap: 6px;
  display: flex;
}
.cap-pips i {
  background: var(--paper-2);
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  display: grid;
}
.cap-pips img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  filter: grayscale() opacity(0.35);
  transition: filter 0.2s;
}
.cap-pips i.on {
  animation: 0.35s ease-out pipPop;
}
.cap-pips i.on img {
  filter: none;
}
.cap-plate.ok {
  border-bottom-color: var(--yellow);
  animation: 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) capOk;
}
.cap-plate.ok p {
  color: var(--yellow-d);
  font-size: 14px;
}
.cap-plate.ok .cap-pips i {
  background: var(--k-fff3c4);
  box-shadow: 0 0 0 2px var(--yellow);
}
@keyframes capOk {
  0% {
    transform: translate(-50%) scale(1);
  }
  40% {
    transform: translate(-50%) scale(1.12);
  }
  to {
    transform: translate(-50%) scale(1);
  }
}
.cap-plate.fail {
  border-bottom-color: var(--red);
  animation: 0.45s capFail;
}
.cap-plate.fail p {
  color: var(--red-t, var(--red-d));
}
@keyframes capFail {
  20% {
    transform: translate(calc(-50% - 10px));
  }
  40% {
    transform: translate(calc(9px - 50%));
  }
  60% {
    transform: translate(calc(-50% - 6px));
  }
  80% {
    transform: translate(calc(3px - 50%));
  }
}
.cap-reveal {
  pointer-events: none;
  z-index: 31;
  align-items: center;
  gap: 18px;
  animation: 3.6s cubic-bezier(0.2, 1.4, 0.4, 1) forwards capReveal;
  display: flex;
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translate(-50%);
}
@keyframes capReveal {
  0% {
    opacity: 0;
    transform: translate(-50%) scale(0.6);
  }
  10% {
    opacity: 1;
    transform: translate(-50%) scale(1.06);
  }
  17% {
    transform: translate(-50%) scale(1);
  }
  88% {
    opacity: 1;
    transform: translate(-50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%) translateY(-20px) scale(0.96);
  }
}
.cap-reveal .evo-portrait {
  width: 112px;
  height: 112px;
  position: relative;
  overflow: visible;
}
.cap-reveal .evo-portrait img:first-child {
  border-radius: 50%;
}
.cap-stamp {
  background: var(--paper);
  width: 42px;
  height: 42px;
  box-shadow: var(--shadow-sm);
  border-radius: 50%;
  place-items: center;
  animation: 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 0.35s both stampBall;
  display: grid;
  position: absolute;
  bottom: -6px;
  right: -8px;
}
.cap-stamp img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
@keyframes stampBall {
  0% {
    opacity: 0;
    transform: scale(2.4) rotate(-90deg);
  }
}
.cap-reveal .evo-card {
  max-width: min(520px, 70vw);
}
.cap-reveal .evo-card p {
  color: var(--c);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 900;
}
.cap-reveal .evo-card h1 {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.1;
}
.cap-sub {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 800;
}
.cap-note .shiny-mark {
  flex: none;
  position: static;
}
.cap-note {
  background: var(--k-fff0fa);
  color: var(--purple-t, #943746);
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 900;
  display: flex;
}
.cap-reveal ~ .banner {
  top: 36%;
}
.cap-reveal:has(.cap-note) {
  animation-duration: 6s;
}
.capcine.friend .cap-pips i.on img,
.cap-reveal.friend .cap-stamp img {
  filter: hue-rotate(115deg) saturate(1.1);
}
.capcine.friend .cap-plate.ok {
  border-bottom-color: #47966f;
}
.capcine.friend .cap-plate.ok p {
  color: var(--green-t, #387757);
}
.capcine.friend .cap-plate.ok .cap-pips i {
  background: var(--k-dcf8e4);
  box-shadow: 0 0 0 2px #47966f;
}
.cap-info h2 .cap-tag {
  background: var(--k-dcf8e4);
  color: var(--green-t, #387757);
  font-family: var(--font);
  letter-spacing: 0.3px;
  white-space: nowrap;
  border-radius: 4px;
  margin-left: 4px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 900;
}
.cap-reveal.friend .cap-note {
  background: var(--k-e6f9ec);
  color: var(--green-t, #367355);
}
@media (max-width: 640px) {
  .bn-pt {
    width: 72px;
    height: 72px;
  }
  .banner.has-pt h1 {
    margin-left: -34px;
    padding-left: 46px;
    padding-right: 22px;
  }
  .cap-reveal {
    justify-content: center;
    gap: 10px;
    width: calc(100% - 32px);
  }
  .cap-reveal .evo-portrait {
    width: 80px;
    height: 80px;
  }
}
@media (max-height: 520px) {
  .cap-reveal,
  .evo-reveal {
    gap: 8px;
    top: 18%;
  }
  .cap-reveal .evo-portrait,
  .evo-reveal .evo-portrait {
    border-width: 3px;
    width: 54px;
    height: 54px;
  }
  .cap-stamp {
    width: 24px;
    height: 24px;
    bottom: -4px;
    right: -6px;
  }
  .cap-stamp img {
    width: 18px;
    height: 18px;
  }
  .evo-burst {
    width: 140px;
    height: 140px;
    margin: -70px 0 0 -70px;
    left: 27px;
  }
  .evo-card {
    border-top-width: 4px;
    border-radius: 4px;
    min-width: 0;
    padding: 5px 12px 6px;
  }
  .cap-reveal .evo-card {
    max-width: min(340px, 60vw);
  }
  .evo-card p {
    font-size: 10px;
  }
  .evo-card h1,
  .cap-reveal .evo-card h1 {
    margin: 1px 0 3px;
    font-size: 16px;
  }
  .evo-types {
    margin-bottom: 2px;
  }
  .evo-types .chip {
    padding: 1px 8px;
    font-size: 10px;
  }
  .cap-sub,
  .evo-stat {
    font-size: 11px;
  }
  .evo-stat b.up {
    font-size: 12px;
  }
  .cap-note {
    margin-top: 4px;
    padding: 3px 8px;
    font-size: 11px;
  }
  .banner {
    top: 22%;
  }
  .banner h1 {
    border-radius: 4px;
    padding: 4px 22px;
    font-size: 22px;
  }
  .banner p {
    margin-top: 5px;
    padding: 3px 12px;
    font-size: 12px;
  }
  .bn-pt {
    border-width: 3px;
    width: 56px;
    height: 56px;
  }
  .banner.has-pt h1 {
    margin-left: -26px;
    padding-left: 34px;
    padding-right: 18px;
  }
  .stageintro h1 {
    padding: 4px 20px;
    font-size: 22px;
  }
  .stageintro p {
    margin-bottom: 4px;
    font-size: 14px;
  }
}
@keyframes bannerIn {
  0% {
    opacity: 0;
    transform: translate(-60px);
  }
  10% {
    opacity: 1;
    transform: none;
  }
  82% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(40px);
  }
}
.popup {
  color: var(--c);
  -webkit-text-stroke: 4px #fef8ecf2;
  paint-order: stroke fill;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 900;
  animation: 0.9s ease-out forwards popupUp;
  position: absolute;
  transform: translate(-50%, -50%);
}
.banner.long {
  animation-duration: 5.2s;
}
.banner.long h1 {
  box-shadow:
    var(--shadow),
    0 0 0 4px var(--paper),
    0 0 26px 6px #dfa9b2bf;
}
.shiny-flash {
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
  background: radial-gradient(#f5ebd680, #dfa9b259 40%, #aac8de40 70%, #00000000 100%);
  animation: 1.8s ease-out forwards shinyFlash;
  position: absolute;
  inset: 0;
}
.shiny-flash.classic {
  background: radial-gradient(#f5ebd68c, #d39e3673 40%, #c6683247 70%, #00000000 100%);
}
.bn-pt.classic,
.cap-reveal.classic .evo-portrait {
  box-shadow:
    var(--shadow),
    0 0 0 5px #f5ebd6e6,
    0 0 28px 8px #d29d33d9;
}
.banner.classic h1 {
  box-shadow:
    var(--shadow),
    0 0 0 4px var(--k-fff3b8),
    0 0 26px 6px #d29d33cc;
}
.sm-mon.classic {
  background: var(--k-fff9e0);
  box-shadow: inset 0 0 0 2px #d29d33;
}
.revive-flash {
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(#f5ebd6bf, #e2bf7973 35%, #d39f384d 70%, #c668328c 100%);
  animation: 1.6s ease-out forwards reviveFlash;
  position: absolute;
  inset: 0;
}
@keyframes reviveFlash {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes shinyFlash {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  30% {
    opacity: 0.55;
  }
  45% {
    opacity: 0.85;
  }
  to {
    opacity: 0;
  }
}
@keyframes popupUp {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -150%) scale(1);
  }
}
.flash {
  opacity: 0;
  transition: opacity 0.3s;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 120px 30px #d033288c;
}
.flash.on {
  opacity: 1;
  transition: none;
}
.lowhp {
  animation: 0.8s infinite alternate pulse;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 160px 50px #c5302566;
}
.reticle {
  border: 3px solid var(--red);
  width: 56px;
  height: 56px;
  box-shadow: 0 0 0 2px var(--paper);
  border-radius: 50%;
  margin: -28px 0 0 -28px;
  animation: 3s linear infinite spin;
  position: absolute;
}
.reticle:before,
.reticle:after {
  content: "";
  background: var(--red);
  position: absolute;
}
.reticle:before {
  width: 3px;
  height: 14px;
  margin-left: -1.5px;
  top: -10px;
  left: 50%;
}
.reticle:after {
  width: 3px;
  height: 14px;
  margin-left: -1.5px;
  bottom: -10px;
  left: 50%;
}
.crosshair {
  border: 2px solid var(--paper);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin: -9px;
  position: absolute;
  top: 45%;
  left: 50%;
  box-shadow: 0 0 0 2px #402b2499;
}
.mapbadge {
  --s: 26px;
  width: var(--s);
  height: var(--s);
  background: var(--paper);
  border: 3px solid var(--rc);
  box-sizing: border-box;
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
  overflow: hidden;
  box-shadow: 0 0 0 2px #301f18;
}
.wlabel .mapbadge img,
.mapbadge img {
  width: 82%;
  height: 82%;
  image-rendering: pixelated;
}
.mapbadge.round img {
  width: 108%;
  height: 108%;
  margin-top: 4%;
}
.wlabel:has(.mapbadge) {
  padding-left: 2px;
}
.compass {
  pointer-events: none;
  z-index: 2;
  width: 0;
  height: 0;
  position: absolute;
}
.compass .cp-ic {
  filter: drop-shadow(0 2px 4px #00000073);
  animation: 1.1s ease-in-out infinite cpPulse;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}
.compass .cp-tip {
  border-left: 12px solid #00000000;
  border-right: 12px solid #00000000;
  border-bottom: 18px solid var(--rc);
  transform-origin: 12px 46px;
  filter: drop-shadow(0 1px #301f18) drop-shadow(0 2px 3px #00000059);
  width: 0;
  height: 0;
  position: absolute;
  top: -46px;
  left: -12px;
}
.compass .cp-d {
  background: var(--paper);
  color: var(--purple-t, #301f18);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 900;
  position: absolute;
  top: 26px;
  left: 0;
  transform: translate(-50%);
}
@keyframes cpPulse {
  50% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}
.bossbar {
  --c: #ab3f51;
  top: calc(var(--hb, 76px) + 12px);
  left: var(--hc, 50%);
  transform: translateX(-50%) scale(var(--hs, 1));
  transform-origin: top;
  width: min(600px, 62vw, calc(var(--hw, 100vw) / var(--hs, 1)));
  pointer-events: none;
  align-items: center;
  gap: 0;
  animation: 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) bbIn;
  display: flex;
  position: absolute;
}
@keyframes bbIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -14px) scale(var(--hs, 1));
  }
}
.bb-pt {
  z-index: 1;
  background: radial-gradient(circle at 50% 38%, var(--paper) 55%, color-mix(in srgb, var(--c) 25%, var(--paper)));
  border: 4px solid var(--c);
  width: 64px;
  height: 64px;
  box-shadow:
    var(--shadow-sm),
    0 0 0 3px var(--paper);
  border-radius: 50%;
  flex: none;
  place-items: center;
  margin-right: -22px;
  display: grid;
  position: relative;
  overflow: hidden;
}
.bb-pt img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.bb-body {
  background: var(--w96);
  min-width: 0;
  box-shadow: var(--shadow);
  border-bottom: 4px solid var(--c);
  border-radius: 6px;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding: 6px 16px 8px 30px;
  display: flex;
}
.bb-head {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}
.bb-name {
  font-family: var(--font-title);
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  overflow: hidden;
}
.bb-tag {
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fef8ec;
  background: var(--c);
  border-radius: 4px;
  padding: 1px 9px;
  font-size: 10px;
  font-weight: 900;
}
.bb-rage {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fef8ec;
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 12px #d83e33b3;
  background: linear-gradient(#db4d43, #b22c22);
  border-radius: 4px;
  margin-left: auto;
  padding: 1px 10px;
  font-size: 11px;
  font-weight: 900;
  animation: 0.45s infinite alternate pulse;
}
.bb-bar {
  background: #483128;
  border-radius: 4px;
  height: 15px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 3px #00000059;
}
.bb-bar > u,
.bb-bar > i {
  transform-origin: 0;
  border-radius: 4px;
  position: absolute;
  inset: 0;
}
.bb-bar > u {
  background: var(--k-ffd0d8);
  transition: none;
}
.bb-bar > i {
  background: linear-gradient(#dfa9b2 0 30%, #db4d43 30%, #b62c23);
  transition: transform 0.12s;
}
.bb-bar > s {
  background: var(--w90);
  width: 3px;
  margin-left: -1px;
  position: absolute;
  top: 0;
  bottom: 0;
}
.bb-bar > b {
  font-family: var(--font-title);
  color: #fef8ec;
  text-shadow: 0 1px 2px #000000b3;
  justify-content: flex-end;
  align-items: center;
  padding-right: 10px;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  position: absolute;
  inset: 0;
}
.bb-sub {
  letter-spacing: 1px;
  color: #3a7c5b;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.bb-sub.move {
  color: var(--red-t, var(--red-d));
  font-size: 13px;
}
.bb-sub.pop {
  animation: 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) movePop;
}
.bb-foot {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 12px;
  display: flex;
}
.bb-foot > .bb-sub {
  min-width: 0;
}
.bb-st {
  align-items: center;
  gap: 4px;
  display: flex;
}
.bb-sti {
  align-items: center;
  animation: 0.25s ease-out miniIn;
  display: inline-flex;
}
.bb-sti > b {
  font-family: var(--font-title);
  color: var(--ink);
  margin-left: 1px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.bossbar.mini .bb-sti .uiicon {
  width: 18px !important;
  height: 18px !important;
}
.bossbar.mini .bb-sti > b {
  font-size: 11px;
}
.bossbar.rage .bb-body {
  box-shadow:
    var(--shadow),
    0 0 0 2px #d83c3180;
  border-bottom-color: #d83c31;
}
.bossbar.legend {
  --c: #418965;
}
.bossbar.legend .bb-body {
  background: linear-gradient(180deg, var(--paper) 70%, var(--k-f0ffe8));
}
.bossbar.legend .bb-bar > i {
  background: linear-gradient(#cbdfc7 0 30%, #52ad80 30%, #3a7c5b);
}
.bossbar.immune .bb-bar > i {
  background: repeating-linear-gradient(135deg, #c0cad2 0 8px, #bab0a3 8px 16px);
}
.bossbar.immune .bb-sub {
  color: #a09381;
}
.bossbar.shield .bb-bar > i:nth-child(2) {
  background: linear-gradient(180deg, var(--k-c8f0ff), #7ca9cc);
}
.bossbar.shield .bb-sub {
  color: #4e8bba;
}
.minibars {
  top: calc(var(--hb, 76px) + 12px);
  left: var(--hc, 50%);
  transform: translateX(-50%) scale(var(--hs, 1));
  transform-origin: top;
  width: min(460px, 50vw, calc(var(--hw, 100vw) / var(--hs, 1)));
  pointer-events: none;
  flex-direction: column;
  gap: 8px;
  display: flex;
  position: absolute;
}
.minibars.below {
  top: calc(var(--hb, 76px) + 102px);
}
.bossbar.mini {
  width: 100%;
  animation: 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) miniIn;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}
@keyframes miniIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
.bossbar.mini .bb-pt {
  border-width: 3px;
  width: 48px;
  height: 48px;
  margin-right: -18px;
}
.bossbar.mini .bb-body {
  border-bottom-width: 3px;
  border-radius: 5px;
  gap: 3px;
  padding: 5px 14px 6px 24px;
}
.bossbar.mini .bb-name {
  font-size: 15px;
}
.bossbar.mini .bb-bar {
  height: 11px;
}
.bossbar.mini .bb-bar > b {
  font-size: 10px;
}
.bossbar.mini .bb-sub {
  color: var(--ink-2);
  font-size: 11px;
}
.bossbar.mini .bb-sub.move {
  font-size: 12px;
}
.bossbar.totem .bb-tag {
  background: linear-gradient(#b097c7, #775298);
}
.bossbar.totem .bb-bar > i {
  background: linear-gradient(180deg, var(--k-f0b8ff) 0 30%, #9c7bb8 30%, #724e91);
}
.bossbar.summoner .bb-tag {
  background: linear-gradient(#6fbb95, #3a7c5b);
}
.bossbar.summoner .bb-bar > i {
  background: linear-gradient(#cbdfc7 0 30%, #52ad80 30%, #3a7c5b);
}
@keyframes movePop {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
}
.fps {
  color: #fef8ec;
  text-shadow: 0 1px 2px #000000;
  font-size: 12px;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translate(-50%);
}
.wlabel {
  background: var(--w95);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 3px 12px 3px 5px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  position: absolute;
  transform: translate(-50%, -100%);
}
.wlabel img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.wlabel.cost {
  color: var(--green-t, var(--green-d));
}
.wlabel.nocost {
  color: var(--red-t, var(--red-d));
}
.charge {
  background: conic-gradient(var(--ac, #4e8bba) calc(var(--p) * 1%), #f5ebd659 0);
  width: 66px;
  height: 66px;
  box-shadow: var(--shadow-sm);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  transform: translate(-50%, -50%);
}
.charge span {
  background: var(--w96);
  width: 52px;
  height: 52px;
  color: var(--ink);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  font-weight: 900;
  display: flex;
}
.modal {
  pointer-events: auto;
  z-index: 20;
  background: radial-gradient(#3b261f4d, #2a1b16bf);
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  gap: 18px;
  padding: 20px;
  animation: 0.2s fadeIn;
  display: flex;
  position: absolute;
  inset: 0;
}
/* 横幅：两端燕尾的朱红旗，与页面标题的军旗同一语言 */
.modal h1 {
  font-family: var(--font-brush);
  color: #fbf1dc;
  isolation: isolate;
  filter: drop-shadow(0 3px 0 #5e140e) drop-shadow(0 8px 14px #2a161266);
  letter-spacing: 0.06em;
  margin: 0;
  padding: 2px 48px 4px;
  font-size: 42px;
  font-weight: 400;
  position: relative;
}
.modal h1:before {
  content: "";
  z-index: -1;
  background: var(--stripes), linear-gradient(180deg, #c2342a, var(--red) 55%, #9a1f17);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%, 18px 50%);
  position: absolute;
  inset: 0;
}
.modal h1:after {
  content: "";
  z-index: -1;
  border-top: 1px solid #e3c27a99;
  border-bottom: 1px solid #e3c27a99;
  position: absolute;
  inset: 4px 24px;
}
.modal h1.small {
  font-size: 28px;
}
.modal {
  overscroll-behavior: contain;
  overflow-y: auto;
}
.shop-modal > * {
  flex-shrink: 0;
}
.shop-sell {
  overscroll-behavior: contain;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
  max-height: min(24vh, 200px);
  padding: 4px;
  overflow-y: auto;
}
.shop-exit {
  z-index: 2;
  box-shadow: var(--shadow);
  position: sticky;
  bottom: 0;
}
.cards {
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  display: flex;
}
.cards.scroll {
  overscroll-behavior: contain;
  gap: 12px;
  max-width: min(1180px, 100%);
  max-height: min(64vh, 100dvh - 190px);
  padding: 8px 10px 12px;
  overflow-y: auto;
}
.card.mini {
  border-radius: 6px;
  width: 178px;
  min-height: 0;
}
.card.mini .top {
  height: 74px;
}
.card.mini .top img {
  width: 48px;
  height: 48px;
}
.card.mini .bd {
  gap: 4px;
  padding: 10px 12px;
}
.card.mini h3 {
  font-size: 16px;
}
.card.mini p {
  font-size: 12.5px;
}
.card {
  --rc: var(--r0);
  background: var(--paper);
  width: 236px;
  min-height: 300px;
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  color: var(--ink);
  border: none;
  border-radius: 8px;
  flex-direction: column;
  padding: 0;
  transition:
    transform 0.12s,
    box-shadow 0.15s;
  animation: 0.35s ease-out backwards cardIn;
  display: flex;
  overflow: hidden;
}
.card:nth-child(2) {
  animation-delay: 60ms;
}
.card:nth-child(3) {
  animation-delay: 0.12s;
}
.card:nth-child(4) {
  animation-delay: 0.18s;
}
@keyframes cardIn {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
}
.card:hover {
  box-shadow:
    0 0 0 4px var(--rc),
    0 18px 40px #3a251e59;
  transform: translateY(-4px) scale(1.05);
}
.card .top {
  background: var(--rc);
  background: var(--stripes), linear-gradient(135deg, color-mix(in srgb, var(--rc) 55%, white), var(--rc));
  justify-content: center;
  align-items: center;
  height: 110px;
  display: flex;
  position: relative;
}
.card .top:after {
  content: "";
  opacity: var(--shine, 0);
  background: linear-gradient(110deg, #00000000 30%, #f5ebd699 50%, #00000000 70%) 0 0/200% 100%;
  animation: 2.4s infinite shine;
  position: absolute;
  inset: 0;
}
.card .top img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 4px #00000040);
}
.card .top .typeicon {
  width: 66px;
  height: 66px;
  font-size: 30px;
}
.card .rar {
  font-family: var(--font-title);
  background: var(--w92);
  color: var(--ink);
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 900;
  position: absolute;
  top: 10px;
  left: 10px;
}
.card .kind {
  color: #fef8ec;
  background: #402b24bf;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 900;
  position: absolute;
  top: 10px;
  right: 10px;
}
.card .kind.price {
  z-index: 1;
  font-family: var(--font-title);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  font-size: 15px;
}
.card .bd .kind.price {
  white-space: nowrap;
  background: var(--k-f4f5fb);
  box-shadow: none;
  align-self: flex-start;
  margin: 0 0 6px;
  padding: 2px 12px;
  font-size: 17px;
  display: inline-block;
  position: static;
}
.card .kind.price.ok {
  color: var(--green-t, var(--green-d));
}
.card .kind.price.no {
  color: var(--red-t, var(--red-d));
}
.card .kind.price.sold {
  color: var(--ink-2);
}
.card .bd {
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 14px 16px;
  display: flex;
}
.card h3 {
  font-family: var(--font-title);
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.1;
}
.card .sub {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}
.card ul {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 15px;
  font-weight: 800;
}
.card ul li {
  margin: 3px 0;
}
.card ul li::marker {
  color: var(--rc);
}
.card p {
  color: var(--ink-2);
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.card .key {
  font-family: var(--font-title);
  color: #fef8ec;
  background: var(--slate, var(--ink-2));
  border-radius: 8px;
  align-self: flex-end;
  margin-top: auto;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 900;
}
.ban-warn {
  background: var(--k-fde8e8);
  color: var(--red-t, #a0271e);
  border-radius: 8px;
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  display: none;
}
.cards.banning .ban-warn {
  display: block;
}
.ban-tag {
  color: #fef8ec;
  text-transform: uppercase;
  vertical-align: middle;
  background: #c43026;
  border-radius: 4px;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.card.offer {
  animation: offerIn 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) calc(var(--i, 0) * 50ms) backwards;
  position: relative;
}
@keyframes offerIn {
  0% {
    opacity: 0;
    transform: translateY(36px) scale(0.88);
  }
}
.card.offer:after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  background: var(--paper);
  opacity: 0;
  animation: offerFlash 0.3s ease-out calc(var(--i, 0) * 50ms + 0.12s) backwards;
  position: absolute;
  inset: 0;
}
@keyframes offerFlash {
  0% {
    opacity: 0.7;
  }
  to {
    opacity: 0;
  }
}
.actions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  display: flex;
}
.evo {
  pointer-events: none;
  z-index: 30;
  background: radial-gradient(circle at 50% 52%, #21151100 18%, #2115118c 70%, #140d0acc);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 7%;
  animation: 0.6s fadeIn;
  display: flex;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.evo-rays {
  opacity: 0;
  width: 220vmax;
  height: 220vmax;
  animation: evoRays var(--evo-d, 3.6s) ease-in forwards;
  background: repeating-conic-gradient(#f5ebd629 0deg 6deg, #f5ebd600 6deg 18deg);
  margin: -110vmax 0 0 -110vmax;
  position: absolute;
  top: 52%;
  left: 50%;
  -webkit-mask: radial-gradient(circle, #00000000 4%, #000000 12%, #00000000 45%);
  mask: radial-gradient(circle, #00000000 4%, #000000 12%, #00000000 45%);
}
@keyframes evoRays {
  0% {
    opacity: 0;
    transform: rotate(0);
  }
  25% {
    opacity: 0.7;
  }
  to {
    opacity: 1;
    transform: rotate(220deg) scale(1.15);
  }
}
.evo h2 {
  font-family: var(--font-title);
  color: var(--ink);
  background: var(--w95);
  box-shadow: var(--shadow);
  animation:
    popIn 0.4s,
    evoTitleOut 0.3s calc(var(--evo-d, 3.6s) - 0.35s) forwards;
  border-radius: 6px;
  margin: 0;
  padding: 8px 30px;
  font-size: 30px;
  font-weight: 900;
  position: relative;
}
@keyframes evoTitleOut {
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
.evo-white {
  background: var(--paper);
  opacity: 0;
  animation:
    evoWhite 0.25s calc(var(--evo-d, 3.6s) - 0.25s) ease-in forwards,
    evoWhiteOut 0.45s var(--evo-d, 3.6s) ease-out forwards;
  position: absolute;
  inset: 0;
}
@keyframes evoWhite {
  to {
    opacity: 1;
  }
}
@keyframes evoWhiteOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#hud.cinematic > :not(.evo):not(.evo-reveal):not(.bossintro):not(.toasts) {
  opacity: 0;
  transition: opacity 0.4s;
}
.evo-reveal {
  pointer-events: none;
  z-index: 31;
  align-items: center;
  gap: 18px;
  animation: 2.6s cubic-bezier(0.2, 1.4, 0.4, 1) forwards evoReveal;
  display: flex;
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translate(-50%);
}
@keyframes evoReveal {
  0% {
    opacity: 0;
    transform: translate(-50%) scale(0.6);
  }
  12% {
    opacity: 1;
    transform: translate(-50%) scale(1.06);
  }
  20% {
    transform: translate(-50%) scale(1);
  }
  85% {
    opacity: 1;
    transform: translate(-50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%) translateY(-20px) scale(0.96);
  }
}
.evo-burst {
  z-index: -1;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--c) 70%, white) 0deg 10deg,
    transparent 10deg 24deg
  );
  opacity: 0.8;
  border-radius: 50%;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  animation: 6s linear infinite spin;
  position: absolute;
  top: 50%;
  left: 46px;
  -webkit-mask: radial-gradient(circle, #000000 30%, #00000000 70%);
  mask: radial-gradient(circle, #000000 30%, #00000000 70%);
}
.evo-portrait {
  background: var(--paper);
  border: 5px solid var(--c);
  width: 92px;
  height: 92px;
  box-shadow:
    var(--shadow),
    0 0 0 6px #f5ebd6b3;
  border-radius: 50%;
  place-items: center;
  display: grid;
  overflow: hidden;
}
.evo-portrait img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.evo-card {
  background: var(--paper);
  box-shadow: var(--shadow);
  border-top: 6px solid var(--c);
  border-radius: 6px;
  min-width: 260px;
  padding: 10px 22px 12px;
}
.evo-card p {
  color: var(--ink-2);
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}
.evo-card h1 {
  font-family: var(--font-title);
  color: var(--ink);
  margin: 2px 0 6px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}
.evo-types {
  gap: 6px;
  margin-bottom: 6px;
}
.evo-stat {
  color: var(--ink-2);
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  display: flex;
}
.evo-stat b {
  color: var(--ink);
}
.evo-stat b.up {
  color: var(--green-t, #3c805e);
  font-size: 17px;
}
.fade {
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s;
  position: absolute;
  inset: 0;
}
.fade.on {
  opacity: 1;
}
.loading {
  background: var(--stripes), linear-gradient(160deg, #df5e54, #db4d43 45%, #916db0);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  display: flex;
  position: absolute;
  inset: 0;
}
.loading .bar {
  background: #f5ebd659;
  width: min(420px, 80vw);
  height: 18px;
}
.loading .bar > i {
  background: #f5ebd6;
}
.loading .bar > b {
  color: var(--ink-on);
  text-shadow: none;
}
.loading .gl-help {
  background: var(--paper);
  width: min(520px, 100vw - 32px);
  max-height: 46vh;
  color: var(--ink);
  text-align: center;
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  display: flex;
  overflow: auto;
  box-shadow: 0 6px 24px #0000002e;
}
.loading .gl-help p {
  margin: 0;
  font-size: 14px;
}
.loading .gl-help small {
  opacity: 0.55;
  word-break: break-word;
  font-size: 11px;
}
.gl-lost {
  z-index: 9000;
  background: #32201a8c;
  justify-content: center;
  align-items: center;
  padding: 16px;
  display: flex;
  position: fixed;
  inset: 0;
}
.gl-lost .panel {
  text-align: center;
  max-width: 420px;
}
.gl-lost [hidden] {
  display: none !important;
}
.run-loading {
  text-align: center;
  pointer-events: auto;
  z-index: 30;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px;
  transition: opacity 0.3s;
  display: flex;
  position: absolute;
  inset: 0;
}
.run-loading.out {
  opacity: 0;
}
.run-loading [hidden] {
  display: none !important;
}
.run-loading h2 {
  font-family: var(--font-title);
  color: var(--ink);
  margin: 0;
  font-size: 30px;
  font-weight: 900;
}
.run-loading .bar {
  width: min(420px, 80vw);
  height: 18px;
}
.run-loading .ld-slow {
  max-width: 440px;
  color: var(--ink-2);
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}
.run-loading .ld-tip {
  max-width: 560px;
  color: var(--ink-2);
  margin: 0 auto;
  font-size: 15px;
  font-weight: 800;
  position: absolute;
  bottom: 8%;
  left: 16px;
  right: 16px;
}
.coin-spin {
  border: 4px solid var(--ink);
  background: radial-gradient(circle at 35% 30%, #f2e4c7 0 8%, #d4a23d 34%, #a87c25 74%, #7d421f);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  animation: 1s linear infinite spin;
  position: relative;
}
.coin-spin:after {
  content: "";
  background: var(--ink-bg);
  border: 4px solid var(--ink);
  border-radius: 3px;
  width: 20px;
  height: 20px;
  margin: -10px;
  position: absolute;
  top: 50%;
  left: 50%;
}
.stageintro {
  text-align: center;
  animation: 3.2s ease-out forwards bannerIn;
  position: absolute;
  top: 34%;
  left: 0;
  right: 0;
}
.stageintro h1 {
  font-family: var(--font-title);
  color: #fef8ec;
  background: var(--stripes), linear-gradient(100deg, var(--blue), var(--purple));
  box-shadow: var(--shadow);
  border-radius: 7px;
  margin: 0;
  padding: 7px 30px;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 900;
  display: inline-block;
  transform: skew(-8deg);
}
.stageintro .si-tier {
  color: #fef8ec;
  box-shadow: var(--shadow);
  background: #c76932;
  border-radius: 4px;
  margin: 10px auto 0;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 900;
  display: table;
}
.stageintro .si-tier[data-t="2"] {
  background: #875fa9;
}
.stageintro.sanct h1 {
  background: var(--stripes), linear-gradient(100deg, #3a7c5b, #25465f);
}
.stageintro p {
  font-family: var(--font-title);
  color: #fef8ec;
  text-shadow: 0 2px 6px #00000099;
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 900;
}
.help {
  color: #fef8ec;
  text-shadow: 0 1px 3px #000000cc;
  opacity: 0.9;
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 900px) {
  .minimap {
    width: calc(144px * var(--mm, 1));
    height: calc(144px * var(--mm, 1));
  }
  .card {
    width: 44vw;
    min-height: 260px;
  }
}
.typeicon img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.typeicon {
  box-shadow: none;
  background: 0 0;
}
.uiicon {
  image-rendering: pixelated;
  flex: none;
}
.evo-arrow {
  border-top: 3px solid var(--ink-2);
  border-right: 3px solid var(--ink-2);
  width: 10px;
  height: 10px;
  margin: 0 4px;
  transform: rotate(45deg);
}
.btn .uiicon {
  margin-right: 2px;
}
.streak {
  text-align: right;
  pointer-events: none;
  --sc: #f5ebd6;
  contain: layout style;
  position: absolute;
  top: 36%;
  right: 26px;
}
.hud-tr > .streak {
  margin: 4px 12px 0 0;
  position: static;
}
.streak small {
  letter-spacing: 2px;
  color: var(--sc);
  text-shadow: 0 2px 4px #00000099;
  font-size: 12px;
  font-weight: 900;
  display: block;
}
.streak b {
  font-family: var(--font-title);
  color: var(--sc);
  -webkit-text-stroke: 2px #402b24;
  paint-order: stroke fill;
  text-shadow: 0 4px #00000040;
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
  display: block;
}
.streak i {
  background: #00000059;
  border-radius: 3px;
  height: 5px;
  margin-top: 4px;
  display: block;
  overflow: hidden;
}
.streak i u {
  background: var(--sc);
  transform-origin: 100%;
  height: 100%;
  display: block;
}
.streak[data-tier="1"] {
  --sc: #d7a747;
}
.streak[data-tier="2"] {
  --sc: #ce713a;
}
.streak[data-tier="3"] {
  --sc: #df5e54;
}
.streak[data-tier="4"] {
  --sc: #d99aa4;
}
.streak[data-tier="4"] b {
  animation: 1.2s steps(8, end) infinite rainbow;
}
@keyframes rainbow {
  0% {
    filter: hue-rotate();
  }
  to {
    filter: hue-rotate(360deg);
  }
}
.bossintro {
  pointer-events: none;
  z-index: 30;
  animation: fadeOut 0.4s calc(var(--d, 2.6s) - 0.4s) forwards;
  position: absolute;
  inset: 0;
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
.bossintro .lb {
  background: #150e0b;
  height: 12vh;
  position: absolute;
  left: 0;
  right: 0;
}
.bossintro .lb.top {
  animation: 0.4s ease-out lbTop;
  top: 0;
}
.bossintro .lb.bottom {
  animation: 0.4s ease-out lbBottom;
  bottom: 0;
}
@keyframes lbTop {
  0% {
    transform: translateY(-100%);
  }
}
@keyframes lbBottom {
  0% {
    transform: translateY(100%);
  }
}
.bossintro .plate {
  background: var(--paper);
  border-left: 10px solid var(--c);
  box-shadow: var(--shadow);
  border-radius: 6px;
  align-items: center;
  gap: 16px;
  padding: 12px 30px 12px 14px;
  animation: 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) 0.25s both plateIn;
  display: flex;
  position: absolute;
  bottom: 16vh;
  right: 6%;
  transform: skew(-8deg);
}
.bossintro .plate > * {
  transform: skew(8deg);
}
@keyframes plateIn {
  0% {
    opacity: 0;
    transform: translate(120%) skew(-8deg);
  }
}
.bossintro .plate p {
  letter-spacing: 2px;
  color: var(--c);
  margin: 0;
  font-size: 13px;
  font-weight: 900;
}
.bossintro .plate h1 {
  font-family: var(--font-title);
  color: var(--ink);
  margin: 0 0 4px;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
}
.bossintro .evo-portrait {
  border-color: var(--c);
}
.bossintro.legend .plate {
  background: linear-gradient(100deg, var(--paper) 60%, var(--k-fff4c8));
}
.shiny-mark {
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  background: linear-gradient(135deg, #e2c07c, #dfa9b2 60%, #aac8de);
  width: 14px;
  height: 14px;
  position: absolute;
  top: 4px;
  left: 4px;
}
.shiny-chip {
  background: linear-gradient(100deg, #dfa9b2, #bba5ce 50%, #7ca9cc);
}
.hud-tl {
  --tc: var(--blue);
  transform-origin: 0 0;
  align-items: flex-start;
  max-width: calc(100vw - 28px);
  display: flex;
  position: absolute;
  top: 12px;
  left: 14px;
}
.tl-medal {
  z-index: 2;
  flex: none;
  width: 108px;
  height: 108px;
  position: relative;
}
.tl-ring {
  background: conic-gradient(#4e8bba, #6d9fc6 calc(var(--p, 0) * 1%), var(--line) 0);
  box-shadow:
    0 0 0 3px var(--paper),
    var(--shadow-sm);
  border-radius: 50%;
  position: absolute;
  inset: 0;
}
.tl-ring > em {
  opacity: 0;
  border-radius: 50%;
  position: absolute;
  inset: -4px;
  box-shadow: 0 0 14px 6px #8ab2d1f2;
}
.tl-ring.gain > em {
  animation: 0.3s ease-out xpFlash;
}
.tl-ring.big > em {
  animation-duration: 0.6s;
  box-shadow: 0 0 18px 8px #cdc4b6;
}
.tl-portrait {
  background: radial-gradient(circle at 50% 36%, var(--paper) 48%, color-mix(in srgb, var(--tc) 35%, var(--paper)));
  border: 4px solid var(--tc);
  box-shadow: 0 0 0 3px var(--paper);
  border-radius: 50%;
  place-items: center;
  transition: filter 0.25s;
  display: grid;
  position: absolute;
  inset: 10px;
  overflow: hidden;
}
.tl-portrait img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.tl-lvl {
  color: #fef8ec;
  font-family: var(--font-title);
  box-shadow:
    0 0 0 3px var(--paper),
    0 3px 6px #0000004d;
  white-space: nowrap;
  background: linear-gradient(#554068 0 50%, #483128 50%);
  border-radius: 9px;
  align-items: baseline;
  gap: 3px;
  padding: 1px 12px 2px;
  line-height: 1;
  display: flex;
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translate(-50%) skew(-12deg);
}
.tl-lvl small {
  opacity: 0.8;
  font-size: 10px;
  font-weight: 800;
}
.tl-lvl b {
  font-size: 20px;
  font-weight: 900;
}
.tl-lvl.pop {
  animation: 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) tlLvlPop;
}
@keyframes tlLvlPop {
  0% {
    background: var(--yellow);
    color: var(--ink-on);
    transform: translate(-50%) skew(-12deg) scale(1.7);
  }
  to {
    transform: translate(-50%) skew(-12deg);
  }
}
.tl-plate {
  z-index: 1;
  isolation: isolate;
  flex-direction: column;
  gap: 3px;
  min-width: 240px;
  margin: 12px 0 0 -34px;
  padding: 8px 26px 9px 46px;
  display: flex;
  position: relative;
}
.tl-plate:before,
.tl-plate:after {
  content: "";
  transform-origin: 0 100%;
  border-radius: 4px 6px 6px 4px;
  position: absolute;
  inset: 0;
  transform: skew(-14deg);
}
.tl-plate:before {
  z-index: -1;
  background: var(--w97);
  box-shadow: var(--shadow);
}
.tl-plate:after {
  z-index: -2;
  background: var(--stripes), linear-gradient(100deg, var(--tc), color-mix(in srgb, var(--tc) 55%, #402b24));
  inset: 7px -9px -7px 9px;
}
.tl-head {
  align-items: center;
  gap: 8px;
  display: flex;
}
.tl-name {
  font-family: var(--font-title);
  color: var(--ink);
  white-space: nowrap;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.05;
}
.tl-types {
  gap: 4px;
  display: flex;
}
.tl-lives {
  color: #9b7322;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
}
.tl-lives img {
  width: 20px;
  height: 20px;
}
.tl-types .chip {
  padding: 1px 9px;
  font-size: 10.5px;
}
.tl-evo {
  color: var(--ink-2);
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 900;
  display: flex;
}
.tl-arrow {
  border-top: 2.5px solid var(--ink-2);
  border-right: 2.5px solid var(--ink-2);
  width: 7px;
  height: 7px;
  margin-right: 1px;
  transform: rotate(45deg);
}
.tl-next {
  background: var(--paper-2);
  width: 24px;
  height: 24px;
  box-shadow: inset 0 0 0 2px var(--line);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
  overflow: hidden;
}
.tl-next img {
  width: 135%;
  height: 135%;
  image-rendering: pixelated;
  filter: brightness(0) opacity(0.7);
}
.tl-next.q {
  font-family: var(--font-title);
  color: var(--ink-2);
  font-size: 13px;
}
.tl-final {
  background: var(--k-fff3c4);
  color: var(--yellow-d);
  border-radius: 4px;
  padding: 0 8px;
}
.tl-evlv {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}
@media (max-width: 900px) {
  .hud-tl {
    transform: scale(0.78);
  }
}
.train-chip {
  white-space: nowrap;
  background: linear-gradient(180deg, var(--k-fff6d0), var(--k-ffd86a));
  color: #462d24;
  box-shadow:
    0 0 0 2px var(--paper),
    0 3px 8px #0000004d;
  pointer-events: none;
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 5px;
  font-size: 13px;
  font-weight: 900;
  animation: 2.6s ease-out forwards trainUp;
  display: flex;
  position: absolute;
  bottom: calc(100% + 70px);
  left: 50%;
}
.train-chip b {
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gold-t, #926c20);
  font-size: 10px;
}
.train-chip img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}
.train-chip em {
  color: var(--gold-t, #926c20);
  font-size: 11px;
  font-style: normal;
}
.train-chip.again {
  animation: 2.6s ease-out forwards trainAgain;
}
@keyframes trainAgain {
  0% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1.1);
  }
  10% {
    transform: translate(-50%, -8px) scale(1);
  }
  80% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(-50%, -34px) scale(1);
  }
}
@keyframes trainUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.6);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.08);
  }
  20% {
    transform: translate(-50%, -8px) scale(1);
  }
  80% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(-50%, -34px) scale(1);
  }
}
.pz-train {
  margin-bottom: 8px;
}
.under {
  width: 132px;
  transform: translateX(-50%) scale(var(--hs, 1));
  transform-origin: top;
  filter: drop-shadow(0 2px 4px #00000066);
  position: absolute;
}
.under .hpbar {
  border: 2.5px solid var(--paper);
  background: #554068;
  height: 18px;
  padding: 0;
  box-shadow: inset 0 2px 3px #0000004d;
}
.under .hpbar > i {
  z-index: 2;
  background: linear-gradient(#97ceb3 0%, #4fa97c 45%, #3f8662 100%);
  box-shadow: inset 0 -2px #0000001f;
}
.under .hpbar.mid > i {
  background: linear-gradient(#ead19f 0%, #d39e36 45%, #ba8a29 100%);
}
.under .hpbar.low > i {
  background: linear-gradient(#eda8a3 0%, #df5e54 45%, #c33025 100%);
}
.under .hpbar.wound {
  border-color: #e26f66;
  animation: 0.45s infinite alternate wound;
}
@keyframes wound {
  to {
    border-color: var(--k-ffd0da);
  }
}
.under .hpbar:after {
  content: "";
  z-index: 3;
  background: #f5ebd659;
  border-radius: 4px;
  height: 35%;
  position: absolute;
  top: 2px;
  left: 4px;
  right: 4px;
}
.under .hpbar > s {
  z-index: 3;
}
.under .hpbar.oh > s {
  bottom: 50%;
}
.under .hpbar > b {
  z-index: 4;
  letter-spacing: 0.3px;
  -webkit-text-stroke: 2.5px #402b24;
  paint-order: stroke fill;
  text-shadow: none;
  padding-left: 8px;
  font-size: 11px;
}
.under .hpbar > em {
  z-index: 3;
  transform-origin: 0;
  background: linear-gradient(90deg, #d7a747e6, #eddab2f2 50%, #cb962de6) 0 0/200% 100%;
  border-radius: 4px;
  animation: 1.6s linear infinite ohShine;
  position: absolute;
  inset: 0;
  transform: scaleX(0);
}
.under .hpbar.oh > em {
  top: 50%;
}
.under .hpbar.oh {
  border-color: #e2c07c;
  box-shadow:
    inset 0 2px 3px #0000004d,
    0 0 8px #d7a747b3;
}
@keyframes ohShine {
  0% {
    background-position: 0 0;
  }
  to {
    background-position: -200% 0;
  }
}
.pw-row {
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
  display: flex;
}
.pw-row:empty {
  display: none;
}
.pw-chip {
  --p: 1;
  background: conic-gradient(var(--c) calc(var(--p) * 360deg), #3f29218c 0);
  border-radius: 50%;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 2.5px;
  animation: 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) pwIn;
  display: grid;
}
.pw-chip img {
  background: var(--paper);
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
  border-radius: 50%;
}
.pw-chip.end {
  animation: 0.25s infinite alternate pwEnd;
}
.pw-chip.egg img {
  background: var(--k-f4fff0);
}
.pw-chip.egg.end {
  animation: 0.18s infinite alternate pwRattle;
}
@keyframes pwRattle {
  0% {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(8deg);
  }
}
@keyframes pwIn {
  0% {
    transform: scale(0.2);
  }
}
@keyframes pwEnd {
  to {
    opacity: 0.45;
  }
}
.ult.deny .ult-ring {
  animation: 0.3s ultDeny;
}
@keyframes ultDeny {
  20% {
    transform: translate(-4px);
  }
  40% {
    transform: translate(4px);
  }
  60% {
    transform: translate(-3px);
  }
  80% {
    transform: translate(2px);
  }
}
.bl-row {
  align-items: flex-end;
  gap: 14px;
  display: flex;
}
.ult {
  flex: none;
  width: 74px;
  height: 74px;
  margin-bottom: -5px;
  position: relative;
}
.ult-ring {
  background: conic-gradient(var(--c) calc(var(--p, 0) * 1%), #563d34 0);
  box-shadow:
    0 0 0 3px var(--paper),
    var(--shadow-sm);
  border-radius: 50%;
  position: absolute;
  inset: 0;
}
.ult-core {
  background: radial-gradient(circle at 40% 30%, #5b4270, var(--ink-bg));
  filter: grayscale(0.75) brightness(0.75);
  border-radius: 50%;
  place-items: center;
  transition: filter 0.25s;
  display: grid;
  position: absolute;
  inset: 8px;
}
.ult-core img {
  width: 34px;
  height: 34px;
}
.ult-nm {
  white-space: nowrap;
  color: #fef8ec;
  opacity: 0.75;
  background: #281a149e;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 900;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%);
}
.ult.ready .ult-ring {
  background: var(--stripes), conic-gradient(var(--c), #d39e36, var(--c));
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 10px 1px var(--c);
}
.ult.ready .ult-core {
  filter: none;
  animation: 0.7s ease-in-out infinite alternate ultPulse;
}
.ult.ready .ult-nm {
  opacity: 1;
  background: var(--stripes), linear-gradient(100deg, var(--c), color-mix(in srgb, var(--c) 55%, #402b24));
}
.ult.active .ult-core {
  filter: brightness(1.35);
}
.ult.auto:after {
  content: attr(data-auto);
  height: 18px;
  font-family: var(--font-title);
  letter-spacing: 0.04em;
  color: #fef8ec;
  background: var(--green, #428b67);
  pointer-events: none;
  border-radius: 4px;
  place-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 900;
  display: grid;
  position: absolute;
  bottom: -3px;
  left: -6px;
  box-shadow: 0 2px #00000040;
}
@keyframes ultPulse {
  to {
    transform: scale(1.08);
  }
}
.ultcut {
  z-index: 30;
  height: 160px;
  animation: 1.3s forwards ucOut;
  position: absolute;
  top: 26%;
  left: 0;
  right: 0;
}
.uc-band {
  transform-origin: 0;
  background: var(--stripes),
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--c) 35%, #2d1d17),
      var(--c) 38%,
      color-mix(in srgb, var(--c) 55%, var(--paper)) 64%,
      color-mix(in srgb, var(--c) 35%, #2d1d17)
    );
  height: 92px;
  box-shadow:
    0 0 0 4px var(--paper),
    var(--shadow);
  animation: 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) forwards ucBand;
  position: absolute;
  top: 34px;
  left: -10%;
  right: -10%;
  transform: skewY(-4deg) scaleX(0);
}
.uc-row {
  justify-content: center;
  align-items: center;
  gap: 20px;
  animation: 1.3s cubic-bezier(0.2, 0.9, 0.3, 1) forwards ucRow;
  display: flex;
  position: absolute;
  inset: 0;
}
.uc-pt {
  background: radial-gradient(circle at 40% 35%, var(--paper), color-mix(in srgb, var(--c) 30%, var(--paper)));
  width: 150px;
  height: 150px;
  box-shadow:
    0 0 0 5px var(--paper),
    0 0 0 10px var(--c),
    var(--shadow);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
  overflow: hidden;
}
.uc-pt img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.uc-txt {
  flex-direction: column;
  display: flex;
  transform: skew(-8deg);
}
.uc-txt small {
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #deb86a;
  background: #281a14c7;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 2px 12px;
  font-size: 14px;
  font-weight: 900;
}
.uc-txt b {
  white-space: nowrap;
  color: #fef8ec;
  text-shadow:
    0 4px 0 #00000047,
    0 0 22px var(--c);
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 900;
  line-height: 1;
}
@keyframes ucBand {
  to {
    transform: skewY(-4deg) scaleX(1);
  }
}
@keyframes ucRow {
  0% {
    opacity: 0;
    transform: translate(-60vw);
  }
  18% {
    opacity: 1;
    transform: translate(12px);
  }
  26% {
    transform: none;
  }
  76% {
    opacity: 1;
    transform: translate(24px);
  }
  to {
    opacity: 0;
    transform: translate(70vw);
  }
}
@keyframes ucOut {
  0%,
  78% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media (max-width: 640px) {
  .uc-pt {
    width: 96px;
    height: 96px;
  }
  .ultcut {
    height: 120px;
  }
  .uc-band {
    height: 72px;
    top: 24px;
  }
}
.hpbar > u {
  z-index: 1;
  transform-origin: 0;
  background: #df5e54;
  border-radius: 4px;
  position: absolute;
  inset: 0;
}
.btn-ball {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px #00000033);
}
.shake {
  animation: 0.35s shake !important;
}
@keyframes shake {
  20% {
    translate: -8px;
  }
  40% {
    translate: 7px;
  }
  60% {
    translate: -5px;
  }
  80% {
    translate: 3px;
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }
}
@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translate(-30px);
  }
}
@keyframes bob {
  to {
    translate: 0 -5px;
  }
}
@keyframes badgePulse {
  50% {
    transform: scale(1.15);
  }
}
@keyframes wobble {
  0%,
  64%,
  to {
    transform: rotate(0);
  }
  70% {
    transform: rotate(-16deg);
  }
  78% {
    transform: rotate(14deg);
  }
  86% {
    transform: rotate(-6deg);
  }
}
@keyframes plateIn2 {
  0% {
    opacity: 0;
    transform: translate(-40px) skew(-8deg);
  }
}
.logo {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-title);
  color: #fef8ec;
  flex-direction: column;
  align-items: center;
  font-weight: 900;
  animation: 3.4s ease-in-out infinite float;
  display: flex;
  position: relative;
}
.logo-word {
  font-family: var(--font-brush);
  letter-spacing: 2px;
  -webkit-text-stroke: 5px var(--lacquer);
  paint-order: stroke fill;
  color: #f7ecd2;
  text-shadow:
    0 6px #7d1912,
    0 14px 30px #2a161273;
  font-size: clamp(56px, 8.5vw, 112px);
  line-height: 0.92;
  position: relative;
  transform: rotate(-3deg);
}
.logo-word span {
  color: var(--bronze-l);
}
.logo-ball {
  width: 0.6em;
  height: 0.6em;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px var(--lacquer));
  animation: 2.6s ease-in-out infinite wobble;
  position: absolute;
  top: -0.18em;
  right: -0.42em;
}
.logo-ver {
  background: var(--w94);
  color: var(--ink-2);
  font-family: var(--font);
  letter-spacing: 0.4px;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 4px 13px 4px 5px;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  transform: rotate(-3deg);
  box-shadow: 0 3px #2e577659;
}
.logo-ver b {
  color: #fef8ec;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(#d27d4c, #c43025);
  border-radius: 4px;
  padding: 1px 9px;
  font-size: 12px;
}
button.logo-ver {
  cursor: pointer;
  border: 0;
  transition: transform 0.12s;
  position: relative;
}
.logo > .logo-ver {
  z-index: 1;
  white-space: nowrap;
  position: absolute;
  top: 54%;
  left: calc(100% + 12px);
  transform: translateY(-50%) rotate(-3deg);
}
.logo > button.logo-ver:hover {
  transform: translateY(-50%) rotate(-3deg) scale(1.06);
}
button.logo-ver:hover {
  transform: rotate(-3deg) scale(1.06);
}
@media (max-width: 700px) {
  .logo > .logo-ver {
    margin-top: 8px;
    position: relative;
    top: auto;
    left: auto;
    transform: rotate(-3deg);
  }
  .logo > button.logo-ver:hover {
    transform: rotate(-3deg) scale(1.06);
  }
}
.logo-ver.fresh:after {
  content: "";
  width: 11px;
  height: 11px;
  box-shadow: 0 0 0 2px var(--paper);
  background: #d83c31;
  border-radius: 50%;
  animation: 0.8s infinite alternate pulse;
  position: absolute;
  top: -3px;
  right: -3px;
}
.rel-list {
  text-align: left;
  flex-direction: column;
  gap: 10px;
  max-height: min(62vh, 520px);
  padding-right: 4px;
  display: flex;
  overflow-y: auto;
}
.rel {
  background: var(--k-f4f5fb);
  border-radius: 5px;
  padding: 10px 14px;
}
.rel-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}
.rel-head b {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 18px;
}
.rel-head small {
  color: var(--ink-2);
  margin-left: auto;
  font-weight: 700;
}
.rel-patch,
.rel-now {
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #fef8ec;
  border-radius: 4px;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 900;
}
.rel-patch {
  background: linear-gradient(#d27d4c, #c43025);
}
.rel-now {
  background: linear-gradient(#52ad80, #3a7c5b);
}
.rel ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.rel li {
  color: var(--ink);
  margin: 4px 0;
  font-size: 14px;
  line-height: 1.35;
}
.rel-modal .cl-modal {
  width: min(640px, 100vw - 32px);
}
.rel-title {
  color: var(--ink-2);
  flex-basis: 100%;
  order: 10;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}
.rel-body {
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  display: flex;
}
.rel-cat {
  background: var(--paper);
  box-shadow: inset 4px 0 0 var(--rc);
  border-radius: 4px;
  padding: 7px 10px 6px 14px;
}
.rel-cat-h {
  align-items: center;
  gap: 6px;
  display: flex;
}
.rel-cat-h b {
  font-family: var(--font-title);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--rc);
  font-size: 13px;
}
.rel-cat-h small {
  background: var(--rc);
  color: #fef8ec;
  border-radius: 4px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 900;
}
.rel-cat ul {
  margin: 4px 0 0;
}
.rel li b {
  color: var(--ink);
  font-weight: 900;
}
.rel li::marker {
  color: var(--rc, var(--ink-2));
}
.logo.small {
  align-items: flex-start;
}
.logo.small .logo-word {
  font-size: clamp(42px, 5vw, 72px);
}
.logo.hero {
  align-items: flex-start;
}
.logo.hero .logo-word {
  white-space: nowrap;
  font-size: clamp(72px, 9.5vw, 156px);
}
.logo.hero .logo-word span i {
  transform-origin: 50% 90%;
  animation: logoHop 5.5s calc(1.2s + var(--i) * 90ms) infinite;
  font-style: normal;
  display: inline-block;
}
.logo-glint {
  pointer-events: none;
  color: #00000000;
  -webkit-text-stroke: 0;
  text-shadow: none;
  white-space: nowrap;
  background: linear-gradient(105deg, #00000000 0 42%, #f5ebd6f2 48%, #f5ebd68c 52%, #00000000 58% 100%) 0 0/250% 100%
    no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 5.5s ease-in-out 1.2s infinite logoGlint;
  position: absolute;
  inset: 0;
}
.logo-tw {
  pointer-events: none;
  opacity: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  width: 0.16em;
  height: 0.16em;
  animation: logoTw 5.5s calc(1.45s + var(--i) * 0.3s) infinite;
  background: radial-gradient(#f5ebd6 35%, #f1e2c3);
  position: absolute;
}
.logo-tw:first-of-type {
  top: 2%;
  left: 4%;
}
.logo-tw:nth-of-type(2) {
  width: 0.12em;
  height: 0.12em;
  top: 70%;
  left: 46%;
}
.logo-tw:nth-of-type(3) {
  width: 0.2em;
  height: 0.2em;
  top: 4%;
  right: 16%;
}
@keyframes logoGlint {
  0% {
    background-position: 100% 0;
  }
  22%,
  to {
    background-position: 0 0;
  }
}
@keyframes logoTw {
  0%,
  16%,
  to {
    opacity: 0;
    transform: scale(0) rotate(0);
  }
  5% {
    opacity: 1;
    transform: scale(1.25) rotate(45deg);
  }
  10% {
    opacity: 1;
    transform: scale(0.8) rotate(70deg);
  }
}
@keyframes logoHop {
  0%,
  44%,
  60%,
  to {
    transform: none;
  }
  48% {
    transform: translateY(-0.17em) scale(0.92, 1.1);
  }
  52% {
    transform: translateY(0) scale(1.14, 0.84);
  }
  56% {
    transform: scale(0.97, 1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo.hero .logo-word span i,
  .logo-glint,
  .logo-tw {
    animation: none;
  }
}
.ribbon {
  font-family: var(--font-brush);
  color: #fbf1dc;
  text-shadow: 0 2px #5e140e;
  letter-spacing: 0.05em;
  background: var(--stripes), linear-gradient(180deg, #c2342a, var(--red) 55%, #9a1f17);
  box-shadow: inset 0 -1px #e3c27a80;
  margin: -26px -26px 4px;
  padding: 14px 22px;
  font-size: 28px;
  font-weight: 400;
}
.scr-head {
  flex: none;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  animation: 0.35s both slideDown;
  display: flex;
}
.back-btn {
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 3px 0 #3a251e40,
    var(--shadow-sm);
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 6px;
  font-size: 15px;
  font-weight: 900;
  transition: transform 0.12s;
  display: inline-flex;
}
.back-btn:hover {
  transform: translate(-3px);
}
.hd-ball {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px #00000033);
}
.scr-title {
  color: #fbf1dc;
  isolation: isolate;
  filter: drop-shadow(0 3px 0 #5e140e) drop-shadow(0 6px 10px #2a161259);
  align-items: baseline;
  gap: 12px;
  padding: 3px 40px 5px 24px;
  display: flex;
  position: relative;
}
/* 军旗：左侧旗杆套，右侧燕尾缺口，金线滚边 */
.scr-title:before,
.scr-title:after {
  content: "";
  z-index: -1;
  position: absolute;
}
.scr-title:before {
  background: linear-gradient(90deg, var(--lacquer) 0 7px, #00000000 7px), var(--stripes),
    linear-gradient(180deg, #c2342a, var(--red) 55%, #9a1f17);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
  inset: 0;
}
.scr-title:after {
  border: 1px solid #e3c27a99;
  border-right: none;
  inset: 4px 26px 4px 11px;
}
.scr-title h1 {
  font-family: var(--font-brush);
  letter-spacing: 0.06em;
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
}
.scr-title span {
  color: var(--bronze-l);
  font-size: 13px;
  font-weight: 700;
}
.keys {
  color: #fef8ec;
  text-shadow: 0 1px 3px #000000cc;
  white-space: pre;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}
.mm {
  padding: 0;
}
.mm:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #2a1b1699 0%, #2a1b164d 34%, #2a1b1600 58%),
    linear-gradient(#2a1b1600 82%, #2a1b1659);
  position: absolute;
  inset: 0;
}
.mm {
  --mm-gutter: clamp(22px, 5vw, 84px);
}
.mm-top {
  z-index: 2;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
  position: absolute;
  top: 18px;
  left: 22px;
  right: 22px;
}
.trainer {
  background: var(--w96);
  box-shadow: var(--shadow-sm);
  border-radius: 4px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  animation: 0.4s both slideDown;
  display: flex;
}
.tr-tx {
  flex-direction: column;
  padding-right: 6px;
  display: flex;
}
.tr-tx b {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
}
.tr-tx small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.tr-cur {
  border-left: 2px solid var(--line);
  gap: 6px;
  padding: 0 6px 0 12px;
  display: flex;
}
.tr-cur .currency {
  background: var(--paper-2);
  padding: 4px 12px 4px 5px;
  font-size: 15px;
  box-shadow: inset 0 1px 3px #3a251e14;
}
.tr-cur .currency img {
  width: 24px;
  height: 24px;
}
@media (max-width: 700px) {
  .tr-tx small {
    display: none;
  }
}
.mm-badge {
  background: var(--red);
  color: #fef8ec;
  min-width: 24px;
  height: 24px;
  font-family: var(--font-title);
  box-shadow:
    0 0 0 3px var(--paper),
    var(--shadow-sm);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 0 7px;
  font-size: 13px;
  font-weight: 900;
  animation: 1.2s ease-in-out infinite badgePulse;
  display: flex;
  position: absolute;
  top: -9px;
  right: -7px;
}
.mm-season {
  z-index: 1;
  background: var(--w96);
  width: clamp(340px, 26vw, 400px);
  max-height: min(640px, 100dvh - 170px);
  box-shadow: var(--shadow);
  border-radius: 8px;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  animation: 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) 0.25s both plateIn;
  display: flex;
  position: absolute;
  top: 52%;
  right: clamp(22px, 3vw, 56px);
  overflow: hidden;
  translate: 0 -50%;
}
.mm-sp-head {
  color: #fef8ec;
  background: var(--stripes), linear-gradient(100deg, var(--yellow-d), #b7602e);
  align-items: center;
  gap: 10px;
  margin: -14px -14px 0;
  padding: 12px 16px;
  display: flex;
}
.mm-sp-head > div {
  flex-direction: column;
  display: flex;
}
.mm-sp-head b {
  font-family: var(--font-title);
  text-shadow: 0 2px #0000002e;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
}
.mm-sp-head span {
  opacity: 0.95;
  font-size: 12px;
  font-weight: 800;
}
.mm-sp-tabs {
  align-self: stretch;
}
.mm-sp-tabs .pill {
  flex: 1 1 0;
  gap: 5px;
  min-width: 0;
  padding: 7px 8px;
}
.mm-sp-tabs .pill:not(.on) {
  flex: none;
  padding: 7px 11px;
}
.mm-sp-tabs .pill:not(.on) span {
  display: none;
}
.mm-sp-tabs .pill span {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.mm-sp-row .mm-sp-reg {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.mm-sp-tabs .pill img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.mm-sp-sub {
  z-index: 3;
  margin-top: -2px;
  position: relative;
}
.mm-sp-ladder {
  width: 100%;
}
.mm-sp-ladder .pill {
  flex: 1 1 0;
  padding: 5px 8px;
  font-size: 12px;
}
.mm-sp-scope {
  position: relative;
}
.mm-sp-scope-btn {
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: var(--ink);
  text-align: left;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 2px var(--line);
  border: none;
  border-radius: 5px;
  align-items: center;
  gap: 9px;
  padding: 6px 12px 6px 8px;
  transition:
    box-shadow 0.12s,
    background 0.12s;
  display: flex;
}
.mm-sp-scope-btn:hover,
.mm-sp-scope.open .mm-sp-scope-btn {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.mm-sp-scope-btn > span,
.mm-sp-menu button > span {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.1;
  display: flex;
}
.mm-sp-scope-btn b,
.mm-sp-menu b {
  font-family: var(--font-title);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 900;
  overflow: hidden;
}
.mm-sp-scope-btn small,
.mm-sp-menu button small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.mm-sp-caret {
  border: solid var(--ink-2);
  border-width: 0 3px 3px 0;
  flex: none;
  width: 9px;
  height: 9px;
  margin: -4px 2px 0 0;
  transition:
    rotate 0.15s,
    margin 0.15s;
  rotate: 45deg;
}
.mm-sp-scope.open .mm-sp-caret {
  margin-top: 4px;
  rotate: -135deg;
}
.mm-sp-dot {
  background: linear-gradient(180deg, var(--sky) 0 48%, var(--gr) 52%);
  border-radius: 50%;
  flex: none;
  width: 22px;
  height: 22px;
  box-shadow:
    inset 0 0 0 2px #f5ebd6d9,
    0 0 0 1px #3a251e2e;
}
.mm-sp-dot.mon {
  background: var(--paper-2);
  overflow: hidden;
}
.mm-sp-dot.mon img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.mm-sp-menu {
  background: var(--paper);
  max-height: 300px;
  box-shadow:
    var(--shadow),
    0 0 0 2px var(--line);
  border-radius: 6px;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  animation: 0.18s cubic-bezier(0.2, 1.3, 0.4, 1) both plateIn;
  display: flex;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  overflow-y: auto;
}
.mm-sp-menu button {
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  background: 0 0;
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  display: flex;
}
.mm-sp-menu button:hover {
  background: var(--k-e8f0ff);
}
.mm-sp-menu button.on {
  background: var(--k-fff3c4);
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.mm-sp-menu-h {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-2);
  border-top: 2px dashed var(--line);
  margin-top: 3px;
  padding: 6px 8px 2px;
  font-size: 10px;
  font-weight: 900;
}
.mm-sp-body {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--yellow-d) 55%, #f5ebd6) transparent;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-height: 0;
  padding-right: 2px;
  display: flex;
  overflow: hidden auto;
}
.mm-sp-pod {
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: color-mix(in srgb, var(--mc) 18%, var(--paper));
  width: 100%;
  min-width: 0;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mc) 60%, var(--paper));
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  transition:
    background 0.12s,
    box-shadow 0.12s;
  display: flex;
}
.mm-sp-pod:hover {
  background: color-mix(in srgb, var(--mc) 30%, var(--paper));
  box-shadow: inset 0 0 0 3px var(--mc);
}
.mm-sp-row:hover {
  background: var(--k-e8f0ff);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.mm-sp-pod.p1 {
  --mc: #bc8b29;
  padding: 10px 12px;
}
.mm-sp-pod.p2 {
  --mc: #95abbc;
}
.mm-sp-pod.p3 {
  --mc: #be6531;
}
.mm-sp-pod.me {
  box-shadow: inset 0 0 0 3px var(--yellow);
}
.mm-sp-who {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}
.mm-sp-who b {
  font-family: var(--font-title);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.12;
  display: -webkit-box;
  overflow: hidden;
}
.mm-sp-pod.p1 .mm-sp-who b {
  font-size: 19px;
}
.mm-sp-who small {
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: center;
  gap: 0;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  overflow: hidden;
}
.mm-sp-val {
  flex-direction: column;
  flex: none;
  align-items: flex-end;
  display: flex;
}
.mm-sp-val em {
  font-style: normal;
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}
.mm-sp-pod.p1 .mm-sp-val em {
  font-size: 24px;
}
.mm-sp-val small {
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 800;
}
.mm-sp-duo {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  display: grid;
}
.mm-sp-list {
  flex-direction: column;
  gap: 3px;
  display: flex;
}
.mm-sp-row {
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: var(--ink);
  text-align: left;
  background: 0 0;
  border: none;
  border-radius: 4px;
  grid-template-columns: 28px 30px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 800;
  transition:
    background 0.12s,
    box-shadow 0.12s;
  display: grid;
}
.mm-sp-row:nth-child(odd) {
  background: var(--paper-2);
}
.mm-sp-row.me {
  background: var(--k-fff3c4);
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.mm-sp-row b {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.mm-sp-row em {
  font-style: normal;
  font-family: var(--font-title);
  font-weight: 900;
}
.mm-sp-cut {
  text-align: center;
  color: var(--ink-2);
  border-top: 2px dashed var(--line);
  padding-top: 5px;
  font-size: 11px;
  font-weight: 900;
}
.mm-sp-me {
  background: var(--paper-2);
  box-shadow: inset 0 0 0 2px var(--yellow);
  border-radius: 5px;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  display: flex;
}
.mm-sp-me > small {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 900;
}
.mm-sp-me-row {
  align-items: center;
  gap: 8px;
  display: flex;
}
.mm-sp-me-row b,
.mm-sp-me > b {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
}
.mm-sp-hint {
  color: var(--blue-t, var(--blue-d, var(--blue)));
  font-size: 12px;
  font-weight: 800;
}
.mm-sp-empty {
  text-align: center;
  color: var(--ink-2);
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 8px;
  font-weight: 800;
  display: flex;
}
.mm-sp-empty img {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  animation: 2s infinite wobble;
}
.mm-sp-empty b {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 17px;
}
.mm-sp-prizes {
  background: var(--paper-2);
  border-radius: 4px;
  justify-content: space-between;
  padding: 4px 6px;
  display: flex;
}
.mm-sp-prizes > span {
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
}
.mm-sp-prizes > span > span {
  flex-direction: column;
  line-height: 1.05;
  display: flex;
}
.mm-sp-prizes small {
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 800;
}
.mm-sp-all {
  width: 100%;
}
@media (max-height: 720px) {
  .mm-sp-list {
    display: none;
  }
}
.mm-foot {
  color: #fef8ec;
  text-shadow: 0 1px 3px #000000cc;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}
.mm-foot button,
.mm-foot a {
  pointer-events: auto;
}
@media (min-width: 1001px) {
  .mm.auth .mm-foot {
    right: calc(clamp(22px, 6vw, 120px) + min(470px, 100vw - 44px) + 12px);
  }
}
.mm-legal {
  text-align: center;
  opacity: 0.82;
  max-width: 980px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
}
.mm-legal p {
  margin: 0;
}
.mm-legal .mm-legal-links {
  margin-top: 3px;
}
.mm-legal .mm-author a {
  color: var(--yellow);
  font-weight: 900;
  text-decoration: none;
}
.mm-legal .mm-author a:hover,
.mm-legal .mm-author a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}
.mm-legal a {
  color: inherit;
  text-underline-offset: 2px;
  text-decoration: underline;
}
.mm-legal a:hover {
  opacity: 0.8;
}
.ls-main {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 520px);
  gap: 16px;
  min-height: 0;
  display: grid;
}
.ls-show {
  --c: var(--red);
  --c2: var(--c);
  background: radial-gradient(ellipse 70% 55% at 50% 72%, color-mix(in srgb, var(--c) 34%, #00000000), #00000000 70%),
    radial-gradient(ellipse 120% 80% at 50% 110%, color-mix(in srgb, var(--c2) 55%, #2a1612) 0%, #00000000 65%),
    linear-gradient(180deg, #f3e8cf, color-mix(in srgb, var(--c) 18%, #e6d6b2));
  min-height: 260px;
  box-shadow:
    0 0 0 2px #3b2519,
    inset 0 0 0 5px #f3e8cf,
    inset 0 0 0 6px #b98b3e8c,
    var(--shadow);
  border-radius: 8px;
  animation: 0.35s both popIn;
  position: relative;
  overflow: hidden;
}
.ls-rays {
  display: none;
  aspect-ratio: 1;
  background: repeating-conic-gradient(#f5ebd62e 0deg 8deg, #f5ebd600 8deg 20deg);
  width: 180%;
  animation: 40s linear infinite spin;
  position: absolute;
  top: 62%;
  left: 50%;
  translate: -50% -50%;
  -webkit-mask: radial-gradient(circle, #000000 8%, #00000000 58%);
  mask: radial-gradient(circle, #000000 8%, #00000000 58%);
}
.ls-num {
  font-family: var(--font-brush);
  letter-spacing: 0;
  color: #2a161226;
  font-size: clamp(60px, 9vw, 140px);
  font-weight: 900;
  line-height: 1;
  animation: 0.45s both slideDown;
  position: absolute;
  top: 4px;
  right: 22px;
}
.ls-stage {
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: absolute;
  inset: 4% 0 30%;
}
.ls-pedestal {
  background: radial-gradient(at 50% 45%, #f5ebd68c, #f5ebd624 70%);
  border: 3px solid #f5ebd699;
  border-radius: 50%;
  width: min(62%, 360px);
  height: 70px;
  position: absolute;
  bottom: -34px;
  left: 50%;
  translate: -50%;
  box-shadow: 0 10px #00000024;
}
.ls-spr {
  max-width: 92%;
  max-height: 120%;
  image-rendering: pixelated;
  transform-origin: 50% 75%;
  filter: drop-shadow(0 6px #0000002e);
  animation: 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both sprIn;
  position: relative;
  translate: 0 27%;
}
@keyframes sprIn {
  0% {
    opacity: 0;
    transform: scale(0.3, 0.15);
  }
  55% {
    opacity: 1;
    transform: scale(1.12, 0.9);
  }
  to {
    transform: none;
  }
}
.ls-plate {
  background: var(--paper);
  border-left: 6px solid var(--c);
  box-shadow:
    0 0 0 1.5px #3b2519,
    var(--shadow);
  border-radius: 2px;
  flex-direction: column;
  gap: 5px;
  padding: 8px 30px 12px 20px;
  animation: 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both plateIn2;
  display: flex;
  position: absolute;
  bottom: 18px;
  left: 18px;
}
.ls-plate small {
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 900;
}
.ls-plate h1 {
  font-family: var(--font-brush);
  margin: 0;
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1;
}
.ls-flash {
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.ls-stamp {
  white-space: nowrap;
  opacity: 0;
  font-family: var(--font-brush);
  color: #fbf1dc;
  background: var(--red);
  box-shadow:
    inset 0 0 0 3px var(--red),
    inset 0 0 0 5px #fbf1dccc,
    0 6px 16px #2a161266;
  border-radius: 3px;
  padding: 8px 26px;
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 400;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg) scale(0);
}
.ls-show.go .ls-flash {
  animation: 0.7s ease-out flashOut;
}
.ls-show.go .ls-stamp {
  animation: 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.12s forwards stampIn;
}
.ls-show.go .ls-spr {
  animation: 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) sprJump;
}
.ls-show.go .ls-rays {
  animation-duration: 2.5s;
}
@keyframes flashOut {
  0% {
    opacity: 0.95;
  }
  to {
    opacity: 0;
  }
}
@keyframes stampIn {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-6deg) scale(1);
  }
}
@keyframes sprJump {
  0% {
    transform: none;
  }
  30% {
    transform: translateY(-22%) scale(0.94, 1.08);
  }
  62% {
    transform: scale(1.12, 0.88);
  }
  to {
    transform: none;
  }
}
.screen.sp {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 28px 32px;
  display: flex;
}
.sp-head {
  text-align: center;
  color: #fef8ec;
  text-shadow: 0 2px 6px #00000073;
  animation: 0.45s both slideDown;
}
.sp-head small {
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.9;
  font-size: 13px;
  font-weight: 900;
}
.sp-head h1 {
  font-family: var(--font-brush);
  letter-spacing: 0.06em;
  margin: 4px 0 8px;
  font-size: clamp(38px, 4.8vw, 66px);
  font-weight: 400;
  line-height: 1;
}
.sp-head p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}
.sp-row {
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: 22px;
  width: 100%;
  display: grid;
}
.sp-card {
  background: var(--paper);
  text-align: left;
  color: var(--ink);
  box-shadow: var(--shadow);
  opacity: 0.78;
  animation: popIn 0.4s var(--d, 0s) both;
  border: none;
  border-radius: 8px;
  flex-direction: column;
  padding: 0;
  transition:
    transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1),
    opacity 0.25s,
    box-shadow 0.25s;
  display: flex;
  transform: scale(0.94);
}
.sp-card.on {
  opacity: 1;
  box-shadow:
    0 0 0 4px var(--paper),
    0 0 0 8px var(--red),
    var(--shadow);
  transform: translateY(-8px) scale(1.02);
}
.sp-card.out {
  opacity: 0.3;
  filter: grayscale(0.7);
  transform: scale(0.88);
}
.sp-show {
  border-radius: 8px 8px 8px 8px;
  min-height: 300px;
  animation: none;
}
.sp-show .ls-num {
  font-size: 76px;
}
.sp-show .ls-plate {
  padding: 6px 22px 9px 14px;
  bottom: 12px;
  left: 12px;
}
.sp-show .ls-plate h1 {
  font-size: 30px;
}
.sp-show .ls-stamp {
  padding: 6px 22px;
  font-size: 30px;
}
.sp-info {
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 18px;
  display: flex;
}
.sp-pas {
  color: var(--ink-2);
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  display: flex;
}
.sp-pas small,
.sp-move small {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.sp-pas b,
.sp-move b {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}
.sp-move {
  background: var(--paper-2);
  border-radius: 5px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: flex;
}
.sp-move > span {
  flex-direction: column;
  line-height: 1.15;
  display: flex;
}
.sp-foot {
  color: #fef8ec;
  text-shadow: 0 1px 3px #000000cc;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}
.sp-go {
  min-width: 340px;
}
@media (max-width: 900px) {
  .sp-row {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
  .sp-show {
    min-height: 220px;
  }
  .sp-info {
    display: none;
  }
}
.ls-ult {
  background: var(--stripes), linear-gradient(100deg, color-mix(in srgb, var(--c) 18%, var(--paper)), var(--paper) 70%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, var(--paper));
  border-radius: 5px;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  display: flex;
}
.ult-row {
  align-items: center;
  gap: 8px;
  display: flex;
}
.ult-row img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  flex: none;
}
.ult-row b {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 900;
}
.ult-row .muted {
  font-size: 12px;
  line-height: 1.25;
}
.ult-note {
  font-size: 11px;
}
.ult-pt {
  background: var(--paper);
  width: 36px;
  height: 36px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, var(--paper));
  border-radius: 50%;
  flex: none;
  overflow: hidden;
}
.ult-row .ult-pt img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.ls-share {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  display: flex;
}
.ls-share.muted {
  color: var(--ink-2);
  margin-top: 4px;
  font-size: 12px;
}
.ls-mates {
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  display: flex;
}
.ls-mate {
  background: var(--paper-2);
  border: none;
  border-radius: 4px;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1);
  display: grid;
}
.ls-mate:hover {
  transform: translateY(-3px);
}
.ls-mate img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
}
.ls-mate.off img {
  filter: brightness(0) opacity(0.3);
}
.ls-chal {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 900;
}
.ls-ready {
  background: var(--k-e6faee);
  color: var(--green-t, var(--green-d));
  border-radius: 5px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-weight: 800;
  display: flex;
}
.ls-shiny-note {
  background: var(--k-fff3fb);
  color: var(--purple-t, #8c3543);
  border-radius: 4px;
  margin: 10px 0 0;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.ls-ready img {
  width: 32px;
  height: 32px;
  animation: 1.2s infinite float;
}
.ls-rank {
  font-family: var(--font-title);
  color: #fef8ec;
  background: var(--rk);
  white-space: nowrap;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 900;
}
[data-rank="common"] {
  --rk: #928065;
}
[data-rank="uncommon"] {
  --rk: var(--green-d);
}
[data-rank="rare"] {
  --rk: var(--blue);
}
[data-rank="legendary"] {
  --rk: linear-gradient(100deg, #c3912b, #d83c31);
}
.ls-conds {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.ls-cond {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.ls-cond-head {
  font-family: var(--font-title);
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  display: flex;
}
.ls-cond-head b:empty {
  display: none;
}
.ls-cond-head b {
  background: var(--green);
  color: #fef8ec;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  display: grid;
}
.ls-cond-head b img,
.ls-cond-head b svg {
  width: 14px;
  height: 14px;
}
.ls-cond.ok .ls-cond-head span {
  color: var(--green-t, var(--green-d));
}
.ls-cond .bar {
  height: 16px;
}
.ls-grid .ls-tile[data-rank="rare"] {
  box-shadow: 0 0 0 2px var(--blue) inset;
}
.ls-grid .ls-tile[data-rank="legendary"] {
  box-shadow:
    inset 0 0 0 2px #c3912b,
    0 0 10px #c3912b73;
}
.stat-row .sb i {
  width: var(--w, 0);
  animation: barGrow 0.7s calc(var(--i, 0) * 50ms) cubic-bezier(0.2, 1, 0.3, 1) backwards;
}
@keyframes barGrow {
  0% {
    width: 0;
  }
}
.evo-line {
  padding: 4px 2px 6px;
  display: flex;
  overflow-x: auto;
}
.evo-step {
  align-items: center;
  gap: 6px;
  display: flex;
}
.evo-branches {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.evo-mon {
  cursor: pointer;
  font: inherit;
  background: 0 0;
  border: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  display: flex;
}
.evo-pt {
  background: var(--paper-2);
  border-radius: 50%;
  place-items: center;
  width: 76px;
  height: 76px;
  transition: transform 0.12s;
  display: grid;
  overflow: hidden;
  box-shadow: inset 0 -3px #0000000f;
}
.evo-pt img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.evo-mon small {
  max-width: 84px;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
}
.evo-mon:hover .evo-pt {
  transform: scale(1.06);
}
.evo-mon.on .evo-pt {
  background: var(--k-fff3c4);
  box-shadow: 0 0 0 3px var(--yellow);
}
.evo-mon.unk canvas {
  width: 78%;
  height: 78%;
  image-rendering: pixelated;
  opacity: 0.32;
}
.evo-mon.unk small {
  color: var(--ink-2);
}
.ls-roster {
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  animation: 0.35s both popIn;
  display: flex;
}
.ls-roster-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 8px;
  display: flex;
}
.ls-seg .pill {
  padding: 5px 12px;
  font-size: 13px;
}
.ls-count {
  font-family: var(--font-title);
  color: var(--ink-2);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}
.ls-count:empty {
  display: none;
}
.ls-roster .ls-types {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 0;
}
.ls-types .dx-type {
  flex: 0 auto;
  min-width: 0;
}
.ls-types .typeicon {
  aspect-ratio: 1;
  width: min(24px, 5.55556cqw - 4.22222px);
  height: auto;
}
.ls-roster {
  container-type: inline-size;
}
.ls-grid .ls-tile {
  aspect-ratio: auto;
  border-radius: 5px;
  flex-direction: column;
  gap: 2px;
  padding: 5px 5px 4px;
  display: flex;
}
.ls-grid .ls-portrait {
  aspect-ratio: 1;
  width: 100%;
  position: relative;
  inset: auto;
}
.ls-name {
  font-family: var(--font-title);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  overflow: hidden;
}
.ls-tile.locked .ls-name {
  color: #fef8ec99;
}
.ls-grid .ls-prog {
  bottom: 24px;
}
.ls-foot {
  background: var(--paper-2);
  border-radius: 6px;
  flex-direction: column;
  flex: none;
  gap: 8px;
  padding: 10px 12px;
  display: flex;
}
.ls-foot-head {
  align-items: center;
  gap: 10px;
  display: flex;
}
.ls-foot-head b {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 900;
}
.ls-foot .bar {
  height: 10px;
}
.ls-nears {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  display: grid;
}
.ls-near {
  background: var(--paper);
  text-align: left;
  min-width: 0;
  color: var(--ink);
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1);
  display: flex;
  box-shadow: 0 1px 3px #3a251e1a;
}
.ls-near:hover {
  transform: translateY(-2px);
}
.ls-near > .grow {
  min-width: 0;
}
.ls-near-ic {
  background: linear-gradient(#6b4c41, #47332b);
  border-radius: 9px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}
.ls-near-ic img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  filter: brightness(0) invert() opacity(0.35);
}
.ls-near.ready .ls-near-ic {
  background: radial-gradient(circle, #d0e0c9, #47966f);
}
.ls-near.ready .ls-near-ic img {
  filter: brightness(0) opacity(0.55);
}
.ls-near small {
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  display: block;
  overflow: hidden;
}
.ls-near-bar {
  background: var(--paper-3);
  border-radius: 5px;
  height: 5px;
  margin-top: 3px;
  display: block;
  overflow: hidden;
}
.ls-near-bar i {
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  height: 100%;
  display: block;
}
.ls-near > b {
  font-family: var(--font-title);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 900;
}
@media (max-height: 700px) {
  .ls-nears,
  .rg-about .rg-desc {
    display: none;
  }
}
.ls-grid .ls-tile.on {
  transform: scale(1.08);
}
.ls-grid .ls-tile.on:before {
  display: none;
}
.ls-grid {
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 10px 9px 9px;
  display: grid;
}
.ls-tile {
  --c: var(--blue);
  aspect-ratio: 1;
  cursor: pointer;
  background: radial-gradient(
    circle at 50% 35%,
    color-mix(in srgb, var(--c) 25%, var(--paper)),
    color-mix(in srgb, var(--c) 72%, var(--paper)) 75%
  );
  animation: tileIn 0.35s var(--d, 0s) backwards;
  border: none;
  border-radius: 6px;
  padding: 0;
  transition:
    transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.12s;
  position: relative;
  box-shadow:
    inset 0 -4px #0000001f,
    0 2px 4px #3a251e26;
}
.ls-portrait {
  inset: 0;
  background: #f5ebd659;
  border-radius: 4px;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 5px;
  overflow: hidden;
}
.ls-portrait img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  transition: transform 0.15s;
}
.ls-tile:hover {
  z-index: 2;
  transform: translateY(-4px) scale(1.06);
}
.ls-tile:hover .ls-portrait img {
  transform: scale(1.12);
}
.ls-tile.on {
  z-index: 3;
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 6px var(--yellow),
    0 10px 18px #3a251e59;
  transform: translateY(-6px) scale(1.1);
}
.ls-tile.on:before {
  content: "";
  border: 9px solid #00000000;
  border-top: 12px solid var(--yellow);
  filter: drop-shadow(0 2px #8a661e);
  z-index: 4;
  margin-left: -9px;
  animation: 0.5s ease-in-out infinite alternate bob;
  position: absolute;
  top: -24px;
  left: 50%;
}
.ls-tile.locked {
  background: linear-gradient(#6b4c41, #47332b);
}
.ls-tile.locked .ls-portrait {
  background: 0 0;
}
.ls-tile.locked .ls-portrait img {
  object-fit: contain;
  filter: brightness(0) invert() opacity(0.28);
  transform: scale(1.15);
}
.ls-tile.ready .ls-portrait img {
  filter: brightness(0) opacity(0.55);
}
.ls-steps {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.ls-step {
  background: var(--paper-2);
  opacity: 0.6;
  border-radius: 5px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  display: flex;
}
.ls-step > b {
  background: var(--slate, var(--ink-2));
  color: #fef8ec;
  width: 30px;
  height: 30px;
  font-family: var(--font-title);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-weight: 900;
  display: grid;
}
.ls-step strong {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 900;
  display: block;
}
.ls-step small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}
.ls-step.now {
  opacity: 1;
  background: var(--k-fff6d8);
  box-shadow: 0 0 0 2px var(--yellow);
}
.ls-step.now > b {
  background: var(--yellow-d);
  animation: 1.2s ease-in-out infinite badgePulse;
}
.ls-step.done {
  opacity: 1;
  background: var(--k-e6faee);
}
.ls-step.done > b {
  background: var(--green);
}
.ls-tile.ready {
  animation:
    tileIn 0.35s var(--d, 0s) backwards,
    readyGlow 1s ease-in-out infinite alternate;
  background: radial-gradient(circle, #d0e0c9, #47966f);
}
@keyframes readyGlow {
  to {
    box-shadow:
      0 0 0 3px var(--paper),
      0 0 20px 4px var(--green);
  }
}
@keyframes tileIn {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.85);
  }
}
.ls-lock {
  display: flex;
  position: absolute;
  top: 3px;
  right: 3px;
}
.ls-lock img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
.ls-prog {
  background: #f5ebd62e;
  border-radius: 5px;
  height: 5px;
  position: absolute;
  bottom: 6px;
  left: 9px;
  right: 9px;
  overflow: hidden;
}
.ls-prog i {
  background: linear-gradient(90deg, var(--orange), var(--yellow));
  height: 100%;
  display: block;
}
.ls-go {
  white-space: nowrap;
  border-radius: 8px;
  flex: none;
  width: 100%;
  padding: 13px 22px;
  font-size: 22px;
}
.ls-go:disabled {
  font-size: 17px;
}
.ls .ls-stamp {
  font-size: clamp(26px, 3vw, 44px);
}
.ls-hero {
  flex-direction: column;
  min-height: 0;
  animation: 0.35s 50ms both popIn;
  display: flex;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
.ls-top {
  border-bottom: 2px solid var(--line);
  background: linear-gradient(180deg, var(--k-f6f4fc), var(--paper));
  flex: none;
  grid-template-columns: 200px minmax(170px, 1fr) minmax(0, 1.6fr);
  gap: 16px;
  padding: 14px 16px;
  display: grid;
}
.ls-stagecard {
  aspect-ratio: 1;
  border-radius: 6px;
  min-height: 0;
  animation: none;
  box-shadow:
    inset 0 0 0 3px #f5ebd68c,
    0 4px #3a251e1f;
}
.ls-stagecard .ls-stage {
  top: 4%;
  bottom: 22%;
}
.ls-stagecard .ls-pedestal {
  border-width: 2px;
  width: 72%;
  height: 34px;
  bottom: -17px;
  box-shadow: 0 5px #00000024;
}
.ls-stagecard .ls-spr {
  max-width: 96%;
  max-height: 112%;
  translate: 0 22%;
}
.ls-id {
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  display: flex;
}
.ls-id-top {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  display: flex;
}
.ls-id-top small {
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.ls-id h1 {
  font-family: var(--font-title);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 900;
  line-height: 1.05;
  animation: 0.35s backwards slideRight;
  overflow: hidden;
}
.ls-id-types {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}
.ls-id-lock {
  color: var(--ink-2);
  align-items: center;
  gap: 6px;
  font-size: 13px;
  display: flex;
}
.ls-evo {
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  display: flex;
}
.ls-evo small {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 900;
}
.ls-evo-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  display: flex;
}
.ls-evo-mon {
  background: var(--paper-2);
  width: 42px;
  height: 42px;
  box-shadow: inset 0 0 0 2px var(--line);
  cursor: help;
  border-radius: 50%;
  flex: none;
  place-items: center;
  transition: transform 0.14s;
  display: grid;
  overflow: hidden;
}
.ls-evo-mon:hover {
  transform: translateY(-2px);
}
.ls-evo-mon img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.ls-evo-mon.on {
  background: var(--k-fff3c4);
  box-shadow: 0 0 0 3px var(--yellow);
}
.ls-evo-arrow {
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0 3px;
  display: flex;
}
.ls-evo-arrow small {
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  font-size: 10px;
}
.ls-evo-arrow:after {
  content: "";
  border-top: 3px solid var(--ink-2);
  border-right: 3px solid var(--ink-2);
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
}
.ls-evo-branch {
  gap: 2px;
  display: flex;
}
.ls-evo-branch .ls-evo-mon {
  width: 36px;
  height: 36px;
}
.ls-top-stats {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-width: 0;
  display: grid;
}
.ls-top-chal {
  align-self: center;
  display: block;
}
.ls-top .tag,
.ls-sec > .tag {
  margin-bottom: 6px;
}
.ls-stats {
  flex-direction: column;
  gap: 3px;
  display: flex;
}
.ls-stats .stat-row {
  cursor: help;
  border-radius: 8px;
  grid-template-columns: 60px 1fr 26px;
  gap: 6px;
  padding: 1px 4px;
  font-size: 12px;
}
.ls-stats .stat-row:hover,
.ls-run-row:hover {
  background: var(--k-fff3c4);
}
.ls-run {
  flex-direction: column;
  gap: 1px;
  display: flex;
}
.ls-run-row {
  cursor: help;
  border-radius: 8px;
  justify-content: space-between;
  gap: 8px;
  padding: 1px 8px;
  font-size: 12px;
  display: flex;
}
.ls-run-row:nth-child(odd) {
  background: var(--paper-2);
}
.ls-run-row span {
  color: var(--ink-2);
  white-space: nowrap;
}
.ls-run-row b {
  font-family: var(--font-title);
  font-weight: 900;
}
.ls-stats .stat-row:focus-visible,
.ls-run-row:focus-visible,
.ls-evo-mon:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
.ls-body {
  background: var(--paper-2);
  flex: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
  padding: 12px 16px;
  display: grid;
}
.ls-card {
  background: var(--paper);
  border-radius: 6px;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
  box-shadow:
    0 2px #3a251e0f,
    0 4px 14px #3a251e14;
}
.ls-card-head {
  color: #fef8ec;
  text-shadow: 0 1px 2px #0000004d;
  background: var(--stripes),
    linear-gradient(
      100deg,
      var(--mc, var(--slate, var(--ink-2))),
      color-mix(in srgb, var(--mc, var(--slate, var(--ink-2))) 55%, #402b24)
    );
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  display: flex;
}
.ls-card-head b {
  font-family: var(--font-title);
  letter-spacing: 0.3px;
  font-size: 14px;
  font-weight: 900;
}
.ls-card-head .typeicon,
.ls-card-head img {
  filter: drop-shadow(0 1px 1px #00000040);
  flex: none;
  width: 22px;
  height: 22px;
}
.ls-card-body {
  scrollbar-width: thin;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  min-height: 0;
  padding: 10px 14px 12px;
  display: flex;
  overflow-y: auto;
}
.ls-card-body > .ls-sec + .ls-sec,
.ls-card-body > .ls-ult + .ls-sec {
  border-top: 2px dashed var(--line);
  padding-top: 8px;
}
.ls-card .ls-ult {
  box-shadow: none;
  background: 0 0;
  padding: 0;
}
.ls-card-body > .ls-sec:last-child {
  flex-direction: column;
  flex: 1 0 auto;
  display: flex;
}
.ls-card-body > .ls-sec:last-child > .ls-kit {
  flex: 1;
  grid-auto-rows: 1fr;
}
.ls-kit .ls-move {
  align-items: center;
}
.ls-card .ls-passive {
  background: 0 0;
  padding: 0;
}
.ls-rec {
  flex-wrap: wrap;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}
.ls-rec small {
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.ls-rec span {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line);
  color: var(--ink-2);
  white-space: nowrap;
  border-radius: 4px;
  align-items: baseline;
  gap: 5px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}
.ls-rec span b {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}
.ls-body > * {
  animation: 0.35s backwards slideUp;
}
.ls-body > :nth-child(2) {
  animation-delay: 60ms;
}
.ls-passive {
  background: var(--paper-2);
  border-radius: 5px;
  padding: 10px 12px;
}
.ls-passive b {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.15;
  display: block;
}
.ls-passive p {
  color: var(--ink-2);
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.ls-mods {
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
  display: flex;
}
.ls-mods span {
  background: var(--k-e6faee);
  color: var(--green-t, var(--green-d));
  font-family: var(--font-title);
  border-radius: 4px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 900;
}
.ls-kit {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}
.ls-move {
  --c: var(--blue);
  cursor: help;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 14%, var(--paper)), var(--paper) 80%);
  min-width: 0;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 28%, var(--paper));
  animation: slideUp 0.3s calc(var(--i, 0) * 40ms) backwards;
  border-radius: 5px;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  transition:
    transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.14s;
  display: flex;
}
.ls-move:hover,
.ls-move:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--c),
    0 6px 14px #3a251e24;
  outline: none;
  transform: translateY(-2px);
}
.ls-move .typeicon {
  flex: none;
}
.ls-move-tx {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  display: flex;
}
.ls-move-top {
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  display: flex;
}
.ls-move-top b {
  min-width: 0;
  font-family: var(--font-title);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  overflow: hidden;
}
.ls-gate {
  background: var(--slate, var(--ink-2));
  color: #fef8ec;
  font-family: var(--font-title);
  border-radius: 4px;
  flex: none;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 900;
}
.ls-gate.first {
  background: var(--green);
}
.ls-move small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.ls-move-desc {
  color: var(--ink);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
}
.ls-move-chips {
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
  display: flex;
}
.ls-move-chips span {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-title);
  white-space: nowrap;
  border-radius: 8px;
  align-items: baseline;
  gap: 4px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}
.ls-move-chips i {
  font-family: var(--font);
  color: var(--ink-2);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.ls-hero .ls-mate {
  border-radius: 9px;
  width: 30px;
  height: 30px;
}
.ls-hero .ls-mate img {
  width: 28px;
  height: 28px;
}
.ls-mu-box {
  flex-direction: column;
  gap: 5px;
  display: flex;
}
.ls-mu-row {
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 8px;
  display: grid;
}
.ls-mu-row > span {
  font-size: 12px;
  font-weight: 900;
}
.ls-mu-row.weak > span {
  color: var(--red-t, var(--red-d));
}
.ls-mu-row.res > span {
  color: var(--blue-t, var(--blue-d));
}
.ls-mu-row.strong > span {
  color: var(--green-t, var(--green-d));
}
.ls-mu-icons {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}
.ls-mu-icons em {
  color: var(--ink-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}
.ls-mu {
  background: var(--paper-2);
  cursor: help;
  border-radius: 9px;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 4px 2px;
  transition: transform 0.14s;
  display: flex;
}
.ls-mu:hover,
.ls-mu:focus-visible {
  background: var(--k-fff3c4);
  outline: none;
  transform: translateY(-2px);
}
.ls-mu small {
  font-family: var(--font-title);
  color: var(--ink-2);
  font-size: 9px;
  font-weight: 900;
}
.ls-cta {
  border-top: 2px solid var(--line);
  background: var(--paper);
  flex: none;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  display: flex;
}
.ls-cta-tx {
  min-width: 0;
  color: var(--ink-2);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 13px;
  overflow: hidden;
}
.ls-cta-tx b {
  font-family: var(--font-title);
  color: var(--ink);
}
.ls-hero .ls-go {
  width: auto;
  min-width: 280px;
  padding: 10px 26px;
  font-size: 20px;
}
.ls-hero > .ls-flash {
  z-index: 5;
}
.ls-hero > .ls-stamp {
  z-index: 6;
  top: 42%;
}
.ls-hero.go .ls-flash {
  animation: 0.7s ease-out flashOut;
}
.ls-hero.go .ls-stamp {
  animation: 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.12s forwards stampIn;
}
.ls-hero.go .ls-spr {
  animation: 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) sprJump;
}
.ls-hero.go .ls-rays {
  animation-duration: 2.5s;
}
@container (width<=860px) {
  .ls-top {
    grid-template-columns: 170px minmax(0, 1fr);
  }
  .ls-top-stats {
    grid-column: 1/-1;
  }
}
@container (width<=640px) {
  .ls-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .ls-card {
    min-height: auto;
    overflow: visible;
  }
  .ls-card-body {
    overflow: visible;
  }
  .ls-hero .ls-go {
    min-width: 0;
    font-size: 18px;
  }
}
@container (width<=440px) {
  .ls-top {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  .ls-top-stats,
  .ls-kit {
    grid-template-columns: 1fr;
  }
  .ls-cta-tx {
    display: none;
  }
  .ls-hero .ls-go {
    flex: 1;
  }
}
.tt {
  z-index: 1000;
  background: var(--paper);
  max-width: 300px;
  color: var(--ink);
  pointer-events: none;
  font-family: var(--font);
  box-shadow:
    0 0 0 2px #402b2414,
    var(--shadow);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  animation: 0.12s ease-out ttIn;
  position: fixed;
  overflow: hidden;
}
.tt.below {
  animation-name: ttInBelow;
}
@keyframes ttIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
}
@keyframes ttInBelow {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.tt-card {
  --tc: var(--ink-2);
  flex-direction: column;
  gap: 7px;
  padding: 0 12px 11px;
  display: flex;
}
.tt-head {
  color: #fef8ec;
  text-shadow: 0 1px 2px #0000004d;
  background: var(--stripes), linear-gradient(100deg, var(--tc), color-mix(in srgb, var(--tc) 55%, #402b24));
  align-items: center;
  gap: 8px;
  margin: 0 -12px;
  padding: 8px 12px;
  display: flex;
}
.tt-head b {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  display: block;
}
.tt-head small {
  opacity: 0.92;
  font-size: 11px;
  font-weight: 800;
  display: block;
}
.tt-head .typeicon {
  flex: none;
}
.tt-mon {
  background: var(--w85);
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  border-radius: 50%;
  flex: none;
}
.tt-card p {
  margin: 0;
}
.tt-note {
  color: var(--ink-2);
  font-size: 11.5px;
}
.tt-ok {
  color: var(--green-t, var(--green-d));
}
.tt-facts {
  background: var(--paper-2);
  border-radius: 4px;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  padding: 6px 10px;
  font-size: 12px;
  display: grid;
}
.tt-facts span {
  color: var(--ink-2);
}
.tt-facts b {
  text-align: right;
  font-family: var(--font-title);
  font-weight: 900;
}
.tt-sub {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 900;
  display: block;
}
.tt-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 3px 12px;
  font-size: 12px;
  display: grid;
}
.tt-stats span {
  justify-content: space-between;
  gap: 6px;
  display: flex;
}
.tt-stats i {
  color: var(--ink-2);
  font-style: normal;
  font-weight: 800;
}
.tt-types {
  gap: 4px;
  display: flex;
}
.tt-cond {
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  display: flex;
}
.tt-cond + .tt-cond {
  margin-top: 3px;
}
.tt-cond b {
  font-family: var(--font-title);
  white-space: nowrap;
}
.tt-rank {
  background: var(--rk);
  color: #fef8ec;
  font-family: var(--font-title);
  border-radius: 4px;
  align-self: flex-start;
  padding: 1px 9px;
  font-size: 10px;
  font-weight: 900;
}
.tt-kit {
  flex-direction: column;
  gap: 3px;
  display: flex;
}
.tt-kit span {
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}
.screen.ls,
.screen.rg {
  --sec-w: 1640px;
  padding-inline: max(24px, calc((100vw - var(--sec-w)) / 2));
}
.rg:before {
  content: "";
  pointer-events: none;
  background: linear-gradient(#2a1b1680, #2a1b1600 20% 55%, #2a1b1666);
  position: absolute;
  inset: 0;
}
.rg > * {
  position: relative;
}
.rg-veil {
  z-index: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(9px) saturate(0.85);
  background: radial-gradient(at 50% 40%, #2e1e182e, #2e1e1873);
  animation: 0.4s fadeIn;
  position: fixed;
  inset: 0;
}
.screen.rg > :not(.rg-veil) {
  z-index: 1;
  position: relative;
}
.rg-main {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: 16px;
  min-height: 0;
  display: grid;
}
.rg-regions {
  scrollbar-width: thin;
  scrollbar-color: #f5ebd680 transparent;
  flex: none;
  grid-auto-columns: minmax(170px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  margin: -4px -4px 10px;
  padding: 4px 4px 6px;
  display: grid;
  overflow-x: auto;
}
.rg-item {
  --sky: #9bbed8;
  --gr: #4ca176;
  background: var(--w96);
  min-width: 0;
  color: var(--ink);
  text-align: left;
  box-shadow:
    0 3px 0 #3a251e2e,
    var(--shadow-sm);
  animation: slideDown 0.35s var(--d, 0s) backwards;
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  transition:
    transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.12s;
  display: flex;
  position: relative;
}
.rg-item-md {
  flex: none;
  display: flex;
}
.rg-sw {
  background: linear-gradient(180deg, var(--sky) 0 55%, var(--gr) 55%);
  border-radius: 4px;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
  overflow: hidden;
  box-shadow: inset 0 -3px #00000026;
}
.rg-sw img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  transform: translateY(4px) scale(1.1);
}
.rg-tx {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.rg-tx b {
  font-family: var(--font-title);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 900;
  overflow: hidden;
}
.rg-item:hover {
  transform: translateY(-2px);
}
.rg-item.on {
  background: linear-gradient(100deg, var(--k-fff6d8), var(--k-ffe08a));
  box-shadow:
    0 0 0 3px var(--yellow-d),
    var(--shadow-sm);
  transform: translateY(-3px);
}
.rg-item.locked {
  color: #938166;
  cursor: not-allowed;
  background: #f1eae4e6;
}
.rg-item.locked .rg-sw {
  filter: grayscale() brightness(0.55);
}
.rg-item.locked .typeicon {
  filter: grayscale();
  opacity: 0.6;
}
.rg-soon {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #938166;
  font-size: 11px;
  font-weight: 900;
}
.rg-view {
  flex-direction: column;
  min-height: 0;
  display: flex;
}
.rg-window {
  --bc: #3e8562;
  min-height: 110px;
  box-shadow:
    inset 0 0 0 5px #f5ebd6e6,
    var(--shadow);
  border-radius: 8px;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  display: flex;
  position: relative;
}
.rg-name {
  flex-direction: column;
  align-items: flex-start;
  padding: 0 8px;
  animation: 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both plateIn2;
  display: flex;
}
.rg-name small {
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fef8ec;
  text-shadow: 0 2px 4px #000000b3;
  font-size: 12px;
  font-weight: 900;
}
.rg-name h1 {
  font-family: var(--font-title);
  color: #fef8ec;
  -webkit-text-stroke: 3px #402b24;
  paint-order: stroke fill;
  text-shadow: 0 5px #402b24;
  margin: 0;
  font-size: clamp(36px, 4.6vw, 66px);
  font-weight: 900;
  line-height: 1.05;
}
.rg-flash {
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  position: fixed;
  inset: 0;
}
.rg-flash.on {
  animation: 0.55s ease-out rgFlash;
}
@keyframes rgFlash {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}
.rg-about {
  background: var(--w90);
  border-radius: 6px;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
  margin-top: 10px;
  padding: 10px 14px;
  animation: 0.4s 0.1s backwards slideRight;
  display: flex;
  box-shadow: 0 3px #0000001f;
}
.rg-window .rg-boss {
  background: var(--w92);
  max-width: 100%;
  box-shadow:
    0 4px 0 #00000024,
    var(--shadow-sm);
  border-radius: 6px;
  align-self: flex-start;
  padding: 10px 12px 12px;
  animation: 0.4s 0.15s backwards slideUp;
}
.rg-window .rg-boss .tag {
  margin-bottom: 6px;
}
.rg-window .rg-stop {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line);
}
.rg-window .rg-stop.leg {
  background: linear-gradient(180deg, var(--k-fff8dc), var(--k-ffe9a8));
  box-shadow: inset 0 0 0 2px #d3a039;
}
.rg-side {
  --bc: #3e8562;
  border-bottom: 5px solid var(--bc);
  flex-direction: column;
  min-height: 0;
  animation: 0.35s both popIn;
  display: flex;
  position: relative;
  overflow: hidden;
}
.rg-side-head {
  color: #fef8ec;
  background: var(--stripes), linear-gradient(100deg, var(--bc), color-mix(in srgb, var(--bc) 55%, #d39e36));
  text-shadow: 0 2px #0000002e;
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 12px 18px;
  display: flex;
}
.rg-side-head b {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 900;
}
.rg-side-head span {
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.95;
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
}
.rg-side-body {
  flex-direction: column;
  flex: 1;
  gap: 18px;
  min-height: 0;
  padding: 16px;
  display: flex;
}
.rg-side .rg-go {
  border-top: 2px solid var(--line);
  flex: none;
  padding: 12px 16px 16px;
}
.rg-side .rg-go .btn {
  white-space: nowrap;
  width: 100%;
  padding: 14px 18px;
}
.rg-sec {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.rg-sec-head {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  display: flex;
}
.rg-side-body .rg-sec-head .tag {
  margin: 0;
}
.rg-sec-head .rg-hint {
  font-size: 11px;
}
.rg-link {
  background: var(--paper-2);
  color: var(--blue-t, var(--blue-d));
  cursor: pointer;
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 6px;
  font-size: 12px;
  font-weight: 900;
  transition:
    background 0.12s,
    transform 0.12s;
  display: inline-flex;
}
.rg-link:hover {
  background: var(--k-e4ecff);
  transform: translateY(-1px);
}
.rg-season {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  display: flex;
}
.rg-headrow {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}
.rg-headrow .rg-name {
  min-width: 0;
}
.rg-window .rg-partner {
  background: var(--w92);
  box-shadow:
    0 4px 0 #00000024,
    var(--shadow-sm);
  border-radius: 8px;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  animation: 0.4s 0.1s backwards slideDown;
  display: flex;
}
.rg-pn {
  flex-direction: column;
  gap: 2px;
  padding-right: 4px;
  display: flex;
}
.rg-pn .chip {
  padding: 1px 8px;
  font-size: 10px;
}
.rg-window .rg-partner .rg-link {
  align-self: flex-start;
}
.rg-hint {
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
  opacity: 0.8;
  font-weight: 800;
}
.rg-route {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}
.rg-stop {
  background: var(--paper-2);
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 8px 7px;
  display: flex;
}
.rg-stop small {
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 900;
}
.rg-stop.leg {
  background: linear-gradient(180deg, var(--k-fff8dc), var(--k-ffe9a8));
  box-shadow: inset 0 0 0 2px #d3a039;
}
.rg-stop.leg small {
  color: #936d20;
}
.rg-mons {
  gap: 4px;
  display: flex;
}
.rg-chev {
  border-top: 3px solid #d1c9bc;
  border-right: 3px solid #d1c9bc;
  width: 9px;
  height: 9px;
  margin: 14px 2px 0 -2px;
  transform: rotate(45deg);
}
.rg-desc {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}
.rg-rec {
  background: var(--ink-bg);
}
.rg-bic {
  --c: #938166;
  background: radial-gradient(circle at 50% 38%, var(--paper) 55%, color-mix(in srgb, var(--c) 25%, var(--paper)));
  border: 3px solid var(--c);
  border-radius: 50%;
  place-items: center;
  width: 44px;
  height: 44px;
  transition: transform 0.15s;
  display: grid;
  overflow: hidden;
  box-shadow: 0 2px 5px #3a251e2e;
}
.rg-bic:hover {
  transform: translateY(-3px) scale(1.08);
}
.rg-bic img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.rg-bic.leg {
  border-color: #b48527;
}
.rg-bic.unseen {
  background: linear-gradient(160deg, var(--k-fff6d8), #d7a747);
  border-color: #b48527;
}
.rg-bic.unseen img {
  filter: brightness(0) opacity(0.5);
}
.rg-tiers {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.rg-tier {
  --c: var(--green);
  background: var(--paper-2);
  color: var(--ink);
  border: none;
  border-radius: 5px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1);
  display: flex;
  box-shadow: inset 0 -3px #00000014;
}
.rg-tier b {
  font-family: var(--font-title);
  align-items: center;
  gap: 4px;
  font-size: 17px;
  font-weight: 900;
  display: flex;
}
.rg-tier small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.rg-tier:hover {
  transform: translate(3px);
}
.rg-tier.on {
  color: #fef8ec;
  background: var(--stripes), var(--c);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 60%, black);
  transform: translate(4px);
}
.rg-tier.on small {
  color: #fef8eceb;
}
.rg-tier.locked {
  opacity: 0.5;
  cursor: not-allowed;
}
.rg-go {
  align-items: center;
  gap: 12px;
  display: flex;
}
.rg-go .btn {
  border-radius: 8px;
}
.rg-pt {
  border: 3px solid var(--c, var(--blue));
  background: radial-gradient(
    circle at 50% 38%,
    var(--paper) 55%,
    color-mix(in srgb, var(--c, var(--blue)) 25%, var(--paper))
  );
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 60px;
  height: 60px;
  display: grid;
  overflow: hidden;
}
.rg-pt img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.rg-partner small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  display: block;
}
.rg-partner b {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}
.wipe {
  z-index: 100;
  position: fixed;
  inset: 0;
}
.wipe i {
  height: 50%;
  position: absolute;
  left: 0;
  right: 0;
}
.w-top {
  background: var(--stripes), linear-gradient(180deg, #e3756d, var(--red-d));
  border-bottom: 8px solid var(--ink);
  animation: 0.42s cubic-bezier(0.6, 0, 0.3, 1) both wTopIn;
  top: 0;
}
.w-bot {
  background: linear-gradient(180deg, var(--paper), var(--line));
  border-top: 8px solid var(--ink);
  animation: 0.42s cubic-bezier(0.6, 0, 0.3, 1) both wBotIn;
  bottom: 0;
}
.w-btn {
  border: 12px solid var(--ink);
  background: radial-gradient(circle, var(--paper) 0 30%, var(--k-d8d4e8) 31% 36%, var(--paper) 37%);
  border-radius: 50%;
  width: 130px;
  height: 130px;
  margin: -65px;
  animation: 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) 0.3s both wBtnIn;
  position: absolute;
  top: 50%;
  left: 50%;
}
.wipe.open .w-top {
  animation: 0.5s cubic-bezier(0.6, 0, 0.3, 1) forwards wTopOut;
}
.wipe.open .w-bot {
  animation: 0.5s cubic-bezier(0.6, 0, 0.3, 1) forwards wBotOut;
}
.wipe.open .w-btn {
  animation: 0.2s ease-in forwards wBtnOut;
}
@keyframes wTopIn {
  0% {
    transform: translateY(-105%);
  }
}
@keyframes wBotIn {
  0% {
    transform: translateY(105%);
  }
}
@keyframes wTopOut {
  to {
    transform: translateY(-105%);
  }
}
@keyframes wBotOut {
  to {
    transform: translateY(105%);
  }
}
@keyframes wBtnIn {
  0% {
    transform: scale(0) rotate(-200deg);
  }
}
@keyframes wBtnOut {
  to {
    opacity: 0;
    transform: scale(0);
  }
}
@media (max-width: 1100px) {
  .keys {
    display: none;
  }
}
@media (max-width: 1300px) and (min-width: 901px) {
  .rg-main {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 12px;
  }
  .rg-regions {
    gap: 8px;
  }
  .ls-main {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    gap: 12px;
  }
  .ls-grid {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 6px;
  }
  .ls-near small {
    display: none;
  }
  .ls-near-bar {
    margin-top: 0;
  }
}
@media (max-width: 900px) {
  .screen {
    overflow-y: auto;
  }
  .ls-main,
  .rg-main {
    flex: none;
    grid-template-columns: 1fr;
  }
  .ls-show {
    min-height: 280px;
  }
  .ls-grid {
    max-height: 300px;
  }
  .rg-window {
    min-height: 360px;
  }
  .rg-regions {
    grid-auto-columns: minmax(150px, 1fr);
  }
}
.seg {
  background: var(--paper-2);
  border-radius: 4px;
  gap: 4px;
  padding: 4px;
  display: flex;
  box-shadow: inset 0 1px 3px #3a251e14;
}
.pill {
  color: var(--ink-2);
  white-space: nowrap;
  background: 0 0;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 900;
  transition:
    background 0.12s,
    color 0.12s,
    transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1);
  display: inline-flex;
}
.pill:hover {
  color: var(--ink);
  transform: translateY(-1px);
}
.pill.on {
  background: var(--paper);
  color: var(--ink);
  box-shadow:
    0 2px 0 #3a251e1f,
    var(--shadow-sm);
}
.pill .uiicon {
  width: 18px;
  height: 18px;
}
.grp-head {
  border-left: 6px solid var(--c, var(--red));
  color: #fef8ec;
  text-shadow: 0 2px 4px #00000099;
  align-items: baseline;
  gap: 10px;
  margin: 4px 0 10px;
  padding-left: 12px;
  display: flex;
}
.grp-head b {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 900;
}
.grp-head small {
  font-size: 13px;
  font-weight: 800;
}
.hd-stat {
  background: var(--w95);
  box-shadow: var(--shadow-sm);
  border-radius: 6px;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 8px;
  padding: 6px 16px 8px;
  display: grid;
}
.hd-stat small {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.hd-stat b {
  font-family: var(--font-title);
  text-align: right;
  font-size: 18px;
  font-weight: 900;
}
.hd-bar {
  background: var(--line);
  border-radius: 6px;
  grid-column: 1/-1;
  height: 6px;
  margin-top: 3px;
  overflow: hidden;
}
.hd-bar i {
  background: linear-gradient(90deg, var(--red), var(--orange));
  border-radius: 6px;
  height: 100%;
  animation: 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.2s backwards barGrow;
  display: block;
}
.currency.dust b,
.currency.dust span {
  min-width: 3ch;
}
.currency.bump {
  animation: 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) dustBump;
}
@keyframes dustBump {
  40% {
    transform: scale(1.18);
  }
}
.floater {
  z-index: 60;
  pointer-events: none;
  font-family: var(--font-title);
  color: #fef8ec;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  align-items: center;
  gap: 4px;
  font-size: 26px;
  font-weight: 900;
  animation: 1s cubic-bezier(0.2, 0.8, 0.3, 1) forwards floatUp;
  display: flex;
  position: fixed;
  translate: -50% -100%;
}
.floater img {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}
@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: scale(1.2);
  }
  30% {
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-70px);
  }
}
.spark {
  z-index: 59;
  pointer-events: none;
  border-radius: 2px;
  width: 9px;
  height: 9px;
  margin: -4.5px;
  animation: 0.65s cubic-bezier(0.2, 0.8, 0.3, 1) forwards spark;
  position: fixed;
  box-shadow: 0 0 6px #f5ebd6cc;
}
@keyframes spark {
  to {
    transform: translate(var(--dx), var(--dy)) rotate(200deg) scale(0.2);
    opacity: 0;
  }
}
.sec .scroll {
  scrollbar-color: #f5ebd680 transparent;
}
.screen.sec {
  --sec-w: 1480px;
  padding-inline: max(24px, calc((100vw - var(--sec-w)) / 2));
  background: linear-gradient(
      90deg,
      #2a1b1680,
      #2a1b161f calc((100vw - var(--sec-w)) / 2 + 40px),
      #2a1b161f calc((100vw + var(--sec-w)) / 2 - 40px),
      #2a1b1680
    ),
    radial-gradient(ellipse at center, #3b261f26, #2a1b169e);
}
.auth-hero {
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  position: absolute;
  top: 50%;
  left: clamp(28px, 6vw, 120px);
  translate: 0 -50%;
}
.auth-side {
  z-index: 1;
  width: min(470px, 100vw - 44px);
  position: absolute;
  top: 52%;
  right: clamp(22px, 6vw, 120px);
  translate: 0 -50%;
}
.auth-side .auth-card {
  scrollbar-width: thin;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}
@media (max-width: 1000px) {
  .auth-hero {
    align-items: center;
    top: 60px;
    left: 0;
    right: 0;
    translate: none;
  }
  .auth-hero .logo.hero .logo-word {
    font-size: clamp(56px, 11vw, 96px);
  }
  .auth-side {
    top: calc(100px + clamp(56px, 11vw, 96px));
    left: 50%;
    right: auto;
    translate: -50%;
  }
}
.auth-card {
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  animation: 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) 0.1s backwards slideRight;
  display: flex;
  overflow: hidden;
  transform: skew(-3deg);
}
.auth-card > * {
  transform: skew(3deg);
}
.auth-card .ribbon {
  align-items: center;
  gap: 10px;
  display: flex;
  transform: none;
}
.auth-body {
  gap: 12px;
  animation: 0.25s fadeIn;
}
.auth-body .btn {
  white-space: nowrap;
  width: 100%;
  padding: 14px 20px;
  font-size: 20px;
}
.auth-body.reg {
  gap: 9px;
}
.auth-body.reg .field {
  padding: 10px 16px;
  font-size: 15px;
}
.auth-body.reg .btn {
  padding: 11px 20px;
  font-size: 19px;
}
@media (max-height: 820px) {
  .auth-card {
    gap: 10px;
    padding: 20px 22px;
  }
}
.auth-perks {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.auth-perks div {
  background: var(--paper-2);
  border-radius: 5px;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  font-size: 14px;
  font-weight: 800;
  display: flex;
}
.auth-perks img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}
.auth-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
@keyframes blink {
  50% {
    opacity: 0.35;
  }
}
.mt-card {
  width: min(440px, 100%);
}
.mt-ribbon {
  background: var(--stripes), linear-gradient(100deg, #ce713a, #d19b2e);
  background-size:
    28px 28px,
    100% 100%;
  animation: 1.2s linear infinite mtStripes;
}
@keyframes mtStripes {
  to {
    background-position:
      28px 0,
      0 0;
  }
}
.mt-body {
  flex-direction: column;
  gap: 12px;
  animation: 0.4s fadeIn;
  display: flex;
}
.mt-title {
  font-family: var(--font-title);
  color: var(--ink);
  margin: 0;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.15;
}
.mt-msg {
  color: var(--ink-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
  max-height: 38vh;
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  overflow-y: auto;
}
.mt-eta {
  background: var(--stripes), linear-gradient(135deg, var(--blue), var(--purple));
  color: #fef8ec;
  text-align: center;
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 16px;
  display: flex;
}
.mt-eta span {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.85;
  font-size: 12px;
  font-weight: 900;
}
.mt-eta b {
  font-family: var(--font-title);
  text-shadow: 0 3px #0000002e;
  font-variant-numeric: tabular-nums;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.1;
}
.mt-eta small {
  opacity: 0.9;
  font-size: 13px;
  font-weight: 800;
}
.mt-foot {
  border-top: 2px dashed var(--line);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  display: flex;
}
.mt-sign {
  text-align: right;
  color: var(--ink-2);
  margin-top: -4px;
  font-size: 14px;
  font-weight: 800;
}
.mt-sign a {
  color: var(--blue, #417ba7);
  font-weight: 900;
  text-decoration: none;
}
.mt-sign a:hover,
.mt-sign a:focus-visible {
  text-decoration: underline;
}
.mt-support {
  color: var(--ink-2);
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}
.mt-x {
  color: #fef8ec;
  background: var(--stripes), linear-gradient(100deg, #4f3932, #1a1614 60%, #000000);
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  text-decoration: none;
  transition: transform 0.12s;
  display: inline-flex;
  box-shadow: 0 3px #000000;
}
.mt-x:hover,
.mt-x:focus-visible {
  transform: translateY(-2px) scale(1.03);
}
.mt-x .x-logo {
  background: #f5ebd624;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}
.mt-x .x-logo svg {
  width: 14px;
  height: auto;
  display: block;
}
.mt-x b {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 900;
}
.mt-live {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
}
.mt-live i {
  background: var(--green);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: 1.6s ease-out infinite mtPulse;
  box-shadow: 0 0 #47966f99;
}
@keyframes mtPulse {
  70% {
    box-shadow: 0 0 0 9px #47966f00;
  }
  to {
    box-shadow: 0 0 #47966f00;
  }
}
.mt-admin {
  z-index: 90;
  background: var(--stripes), linear-gradient(100deg, #ce713a, #d19b2e);
  color: #fef8ec;
  text-shadow: 0 1px 2px #00000040;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  position: fixed;
  top: 10px;
  left: 50%;
  translate: -50%;
}
.dx-main {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 16px;
  min-height: 0;
  display: grid;
}
.dx-left {
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  animation: 0.35s both popIn;
  display: flex;
}
.dx-bar {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}
.dx-search {
  flex: 1;
  min-width: 200px;
  padding: 9px 16px;
  font-size: 15px;
}
.dx-count {
  color: var(--ink-2);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}
.dx-types {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}
.dx-type {
  opacity: 0.5;
  background: 0 0;
  border: none;
  border-radius: 50%;
  padding: 2px;
  transition:
    opacity 0.12s,
    transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.dx-type:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.dx-type.on {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--yellow);
  transform: scale(1.18);
}
.dx-grid {
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 6px 4px;
  display: grid;
}
.dx-tile {
  --c: var(--blue);
  aspect-ratio: 1;
  cursor: pointer;
  background: radial-gradient(circle at 50% 40%, var(--paper) 30%, color-mix(in srgb, var(--c) 30%, var(--paper)));
  animation: tileIn 0.3s var(--d, 0s) backwards;
  border-radius: 6px;
  transition:
    transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.12s;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 -3px #00000014,
    0 2px 5px #3a251e1f;
}
.dx-tile > img:first-child {
  object-fit: contain;
  width: 82%;
  height: 76%;
  image-rendering: pixelated;
  border-radius: 4px;
  position: absolute;
  inset: 9% 9% 15%;
}
.dx-tile small {
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 900;
  position: absolute;
  bottom: 3px;
  left: 7px;
}
.dx-tile:hover {
  z-index: 2;
  transform: translateY(-3px) scale(1.05);
}
.dx-tile.on {
  z-index: 3;
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 6px var(--yellow),
    var(--shadow-sm);
  background: radial-gradient(circle at 50% 40%, var(--k-fffbe8) 30%, var(--k-ffe08a));
  transform: scale(1.08);
}
.dx-tile.unk {
  background: linear-gradient(180deg, var(--k-e9e6f4), var(--k-d8d4e8));
}
.dx-tile.unk > canvas:first-child {
  object-fit: contain;
  width: 82%;
  height: 76%;
  image-rendering: pixelated;
  opacity: 0.3;
  position: absolute;
  inset: 9% 9% 15%;
}
.dx-ball {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  position: absolute;
  top: 4px;
  right: 4px;
}
.dx-tile .shiny-mark {
  top: 5px;
  left: 5px;
}
.dx-empty {
  color: var(--ink-2);
  flex-direction: column;
  grid-column: 1/-1;
  align-items: center;
  gap: 8px;
  padding: 50px;
  font-weight: 800;
  display: flex;
}
.dx-empty img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  opacity: 0.6;
}
.dx-right {
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  display: flex;
}
.dx-show {
  flex: none;
  height: 300px;
  min-height: 0;
}
.dx-show .ls-num {
  font-size: 90px;
}
.dx-show .ls-plate h1 {
  font-size: 32px;
}
.dx-shiny {
  background: var(--w90);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 5px 8px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  position: absolute;
  top: 14px;
  left: 14px;
}
.dx-shiny .shiny-mark {
  width: 16px;
  height: 16px;
  position: static;
}
.dx-shiny.on {
  color: #fef8ec;
  background: linear-gradient(100deg, #dfa9b2, #bba5ce 50%, #7ca9cc);
}
.dx-info {
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-height: 0;
  padding: 16px 18px;
  animation: 0.35s 50ms both popIn;
  display: flex;
}
.dx-info .tag {
  margin-bottom: 6px;
}
.dx-entry {
  background: var(--paper-2);
  border-left: 5px solid var(--red);
  border-radius: 5px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.dx-chip {
  background: var(--slate, var(--ink-2));
}
.lab-wrap,
.q-wrap {
  flex-direction: column;
  flex: 1;
  gap: 18px;
  min-height: 0;
  padding: 4px 6px 10px;
  display: flex;
}
.lab-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  display: grid;
}
.lab-card {
  --c: var(--purple);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  animation: tileIn 0.35s var(--d, 0s) backwards;
  border-radius: 7px;
  flex-direction: column;
  transition:
    transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.14s;
  display: flex;
  position: relative;
  overflow: hidden;
}
.settled .lab-card,
.settled .q-card {
  animation: none;
}
.lab-card:hover {
  box-shadow:
    0 0 0 3px var(--c),
    var(--shadow);
  transform: translateY(-4px);
}
.lab-top {
  background: var(--stripes), linear-gradient(135deg, color-mix(in srgb, var(--c) 60%, var(--paper)), var(--c));
  justify-content: center;
  align-items: center;
  height: 70px;
  display: flex;
  position: relative;
}
.lab-ic {
  background: var(--paper);
  border-radius: 50%;
  place-items: center;
  width: 54px;
  height: 54px;
  display: grid;
  transform: translateY(18px);
  box-shadow: 0 3px #00000026;
}
.lab-ic img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}
.lab-card:hover .lab-ic img {
  animation: 1.2s ease-in-out infinite wobble;
}
.lab-lv {
  background: var(--w92);
  font-family: var(--font-title);
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 900;
  position: absolute;
  top: 8px;
  right: 10px;
}
.lab-bd {
  text-align: center;
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 4px;
  padding: 24px 14px 10px;
  display: flex;
}
.lab-bd h3 {
  font-family: var(--font-title);
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}
.lab-bd p {
  color: var(--ink-2);
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.lab-bd p.lab-note {
  color: var(--blue);
  font-size: 12px;
}
.lab-bd .pips {
  margin-top: auto;
  padding-top: 8px;
}
.pips i.new {
  animation: 0.6s cubic-bezier(0.2, 1.8, 0.4, 1) pipPop;
}
@keyframes pipPop {
  0% {
    filter: brightness(1.6);
    transform: scale(2.4);
  }
}
.lab-buy {
  font-family: var(--font-title);
  color: #fef8ec;
  cursor: not-allowed;
  background: #c0b5a5;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 4px 12px 12px;
  padding: 9px;
  font-size: 17px;
  font-weight: 900;
  transition:
    transform 0.1s,
    filter 0.12s;
  display: flex;
  box-shadow: 0 3px #938166;
}
.lab-buy.can {
  cursor: pointer;
  background: var(--stripes), linear-gradient(180deg, #59b185, var(--green-d));
  box-shadow: 0 4px #2e6148;
}
.lab-buy.can:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
.lab-buy.can:active {
  transform: translateY(2px);
  box-shadow: 0 1px #2e6148;
}
.lab-buy.max {
  cursor: default;
  background: linear-gradient(180deg, #e2c07c, var(--yellow-d));
  color: var(--ink-on);
  box-shadow: 0 3px #906b20;
}
.lab-card.max .lab-top {
  background: var(--stripes), linear-gradient(135deg, #ebd4a5, var(--yellow-d));
}
.lab-card.bought {
  animation: 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) bought;
}
.lab-card.bought:after {
  content: "";
  background: var(--paper);
  pointer-events: none;
  animation: 0.5s ease-out forwards flashOut;
  position: absolute;
  inset: 0;
}
@keyframes bought {
  0% {
    transform: scale(0.92);
  }
  50% {
    transform: scale(1.06);
  }
  to {
    transform: none;
  }
}
.lab-hub {
  gap: 8px;
  display: flex;
}
.lab-mode {
  --c: var(--purple);
  text-align: left;
  color: var(--ink);
  background: var(--w82);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  transition:
    transform 0.16s cubic-bezier(0.3, 1.6, 0.5, 1),
    background 0.16s,
    box-shadow 0.16s;
  display: flex;
  position: relative;
}
.lab-mode:hover {
  background: var(--paper);
  transform: translateY(-2px);
}
.lab-mode.on {
  background: var(--paper);
  box-shadow:
    0 0 0 3px var(--c),
    0 8px 20px #2e1e1840;
}
.lm-ic {
  background: var(--stripes), linear-gradient(135deg, color-mix(in srgb, var(--c) 50%, var(--paper)), var(--c));
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  display: grid;
  box-shadow: 0 3px #00000029;
}
.lm-ic img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}
.lab-mode:not(.on) .lm-ic {
  filter: saturate(0.55) brightness(1.05);
}
.lab-mode:hover .lm-ic img,
.lab-mode.on .lm-ic img {
  animation: 1.4s ease-in-out infinite wobble;
}
.lm-tx {
  flex-direction: column;
  line-height: 1.05;
  display: flex;
}
.lm-tx b {
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 900;
}
.lm-tx em {
  color: var(--ink-2);
  white-space: nowrap;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.lm-chip {
  font-family: var(--font-title);
  white-space: nowrap;
  border-radius: 4px;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
}
.lm-chip .uiicon {
  width: 15px;
  height: 15px;
}
.lm-chip.go {
  background: var(--k-e6faee);
  color: var(--green-t, var(--green-d));
}
.lm-chip.hot {
  color: var(--ink-on);
  background: var(--stripes), linear-gradient(180deg, #e2c07c, var(--yellow-d));
  animation: 1.1s ease-in-out infinite badgePulse;
  box-shadow: 0 2px #906b20;
}
.lm-new {
  background: var(--red);
  color: #fef8ec;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 900;
  animation: 1.1s ease-in-out infinite badgePulse;
  position: absolute;
  top: -8px;
  right: 10px;
  box-shadow: 0 2px #0000002e;
}
.it-tools {
  flex-wrap: wrap;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 0 6px 10px;
  display: flex;
}
.it-tools[hidden] {
  display: none;
}
.it-filters {
  background: var(--w90);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}
.it-f .it-n {
  background: var(--paper-2);
  text-align: center;
  border-radius: 4px;
  min-width: 22px;
  padding: 1px 7px;
  font-size: 12px;
}
.it-f.on .it-n {
  background: var(--ink-bg);
  color: #fef8ec;
}
.it-f.hot .it-n {
  background: var(--yellow);
  color: var(--ink-on);
}
.it-f:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
.it-slots {
  background: var(--w90);
  box-shadow: var(--shadow-sm);
  border-radius: 4px;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 3px 14px 3px 6px;
  display: flex;
}
.it-slots img {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}
.it-slots > span {
  flex-direction: column;
  line-height: 1.15;
  display: flex;
}
.it-slots b {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 900;
}
.it-slots small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.it-slots.none {
  opacity: 0.75;
}
.it-sec {
  flex-direction: column;
  display: flex;
}
.it-sec h4 {
  color: #fef8ec;
  font-family: var(--font-title);
  text-shadow: 0 2px 4px #0000008c;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  font-size: 16px;
  font-weight: 900;
  display: flex;
}
.it-sec h4 i {
  background: var(--c);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 3px #f5ebd6d9;
}
.it-sec h4 span {
  background: var(--w88);
  color: var(--ink-2);
  text-shadow: none;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 12px;
}
.lab-wrap {
  overflow-x: hidden;
}
.ic.ready .ic-foot {
  border-top-color: #f2e3c5;
}
.ic-grid {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
  display: grid;
}
.ic {
  --c: #cdd0cd;
  background: var(--paper);
  animation: tileIn 0.3s var(--d, 0s) backwards;
  border-radius: 8px;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 12px;
  transition:
    transform 0.16s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.16s,
    opacity 0.3s;
  display: flex;
  position: relative;
  box-shadow:
    0 2px #3a251e0d,
    0 8px 20px #3a251e1f;
}
.settled .ic {
  animation: none;
}
.ic:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px #3a251e0d,
    0 14px 28px #3a251e2e;
}
.ic-top {
  align-items: center;
  gap: 12px;
  display: flex;
}
.ic-art {
  background: radial-gradient(
    circle at 50% 45%,
    color-mix(in srgb, var(--c) 34%, var(--paper)) 0%,
    color-mix(in srgb, var(--c) 12%, var(--paper)) 64%,
    transparent 74%
  );
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 66px;
  height: 66px;
  display: grid;
  position: relative;
}
.ic-art > img {
  z-index: 2;
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 2px #3a251e29);
  animation: icFloat 2.8s var(--f, 0s) ease-in-out infinite;
  transition: transform 0.25s cubic-bezier(0.3, 1.8, 0.5, 1);
  position: relative;
}
.ic-shadow {
  z-index: 1;
  width: 30px;
  height: 6px;
  animation: icShadow 2.8s var(--f, 0s) ease-in-out infinite;
  background: #3a251e2e;
  border-radius: 50%;
  margin-left: -15px;
  position: absolute;
  bottom: 7px;
  left: 50%;
}
.ic-rays {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
  inset: -6px;
}
.ic.r2 .ic-rays {
  opacity: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent) 0%, transparent 68%);
  animation: icBreath 2.8s var(--f, 0s) ease-in-out infinite;
}
.ic.r3 .ic-rays,
.ic.r4 .ic-rays {
  opacity: 0.55;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--c) 55%, transparent) 0deg 10deg,
    transparent 10deg 30deg
  );
  animation: 14s linear infinite icSpin;
  inset: -10px;
  -webkit-mask: radial-gradient(circle, #000000 30%, #00000000 70%);
  mask: radial-gradient(circle, #000000 30%, #00000000 70%);
}
.ic.r4 .ic-rays {
  opacity: 0.8;
  animation-duration: 9s;
}
.ic-spark {
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle, var(--paper) 0 18%, transparent 20%),
    conic-gradient(
      from 45deg,
      transparent 0 20deg,
      var(--paper) 20deg 25deg,
      transparent 25deg 110deg,
      var(--paper) 110deg 115deg,
      transparent 115deg 200deg,
      var(--paper) 200deg 205deg,
      transparent 205deg 290deg,
      var(--paper) 290deg 295deg,
      transparent 295deg
    );
  width: 12px;
  height: 12px;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 80%, #f5ebd6));
  animation: icTwinkle 2.4s var(--f, 0s) ease-in-out infinite;
  position: absolute;
  top: 6px;
  right: 8px;
}
.ic:hover .ic-art > img {
  transform: scale(1.18) rotate(-8deg);
}
.ic:hover .ic-rays {
  opacity: 1;
}
.ic.locked .ic-art > img,
.ic.locked .ic-shadow {
  animation: none;
}
.ic.locked .ic-rays,
.ic.off .ic-rays {
  display: none;
}
@keyframes icFloat {
  50% {
    translate: 0 -5px;
  }
}
@keyframes icShadow {
  50% {
    opacity: 0.55;
    transform: scaleX(0.72);
  }
}
@keyframes icBreath {
  50% {
    opacity: 0.6;
    transform: scale(1.12);
  }
}
@keyframes icSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes icTwinkle {
  0%,
  60%,
  to {
    opacity: 0;
    transform: scale(0) rotate(0);
  }
  75% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ic-art > img,
  .ic-shadow,
  .ic-rays,
  .ic-spark {
    animation: none !important;
  }
}
.ic-name {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}
.ic-name b {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.1;
}
.ic-name small {
  color: var(--ink-2);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}
.ic-dot {
  background: var(--c);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.ic-desc {
  color: var(--ink-3);
  flex: 1;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.ic-foot small {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #927ba7;
  font-size: 10px;
  font-weight: 900;
}
.ic-foot {
  border-top: 1px solid var(--k-eeebf6);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding-top: 10px;
  display: flex;
}
.ic-note {
  color: var(--ink-2);
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
}
.ic-note.green {
  color: var(--green-t, var(--green-d));
}
.ic-note.gold {
  color: var(--gold-t, #906b20);
}
.ic-note .uiicon {
  width: 15px;
  height: 15px;
}
.ic-buy {
  color: #fef8ec;
  font-family: var(--font-title);
  cursor: pointer;
  background: var(--stripes), linear-gradient(180deg, #59b185, var(--green-d));
  border: none;
  border-radius: 4px;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  font-size: 14px;
  font-weight: 900;
  transition:
    transform 0.12s,
    filter 0.12s;
  display: flex;
  box-shadow: 0 3px #2e6148;
}
.ic-buy em {
  background: #0000002e;
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  font-style: normal;
  display: flex;
}
.ic-buy:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.ic-buy:active {
  transform: translateY(2px);
  box-shadow: 0 1px #2e6148;
}
.ic-buy.poor {
  background: #d9cad0;
  box-shadow: 0 3px #a48fb7;
}
.ic-buy.off {
  background: var(--k-e4e0ef);
  color: #7e6991;
  cursor: default;
  justify-content: center;
  padding-right: 16px;
  box-shadow: 0 3px #d9cad0;
}
.ic-buy.off:hover {
  filter: none;
  transform: none;
}
.screen.shop .scr-title {
  background: linear-gradient(110deg, #325e80, #3b7d5c 55%, #4da479);
}
.shop-wrap .it-sec {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.shop-wrap .shop-intro {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.shop-btn {
  isolation: isolate;
  cursor: pointer;
  color: #fef8ec;
  letter-spacing: 0.3px;
  text-shadow: 0 1px #281a1473;
  background: linear-gradient(110deg, #336183 0%, #3b7d5c 55%, #4da479 100%);
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 7px;
  height: 40px;
  margin-right: auto;
  padding: 0 16px 0 8px;
  font-size: 14px;
  font-weight: 900;
  transition: transform 0.15s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 12px #3a251e47,
    inset 0 -3px #2e1e1840,
    inset 0 2px #f5ebd659;
}
.shop-btn:hover {
  transform: translateY(-2px) scale(1.03);
}
.shop-btn:before {
  content: "";
  z-index: -1;
  background: var(--stripes);
  opacity: 0.55;
  position: absolute;
  inset: 0;
}
.shop-btn-ic {
  background: radial-gradient(circle at 35% 30%, #f5ebd6bf, #f5ebd61f 70%);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}
.shop-btn-ic img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px #0000004d);
}
.mm-top > .fs-btn:has(+ .tz-btn) {
  margin-right: 0;
}
@media (max-height: 560px) {
  .mm:not(.auth) .mm-top .shop-btn {
    order: 3;
    justify-content: center;
    width: 40px;
    margin: 0;
    padding: 0;
  }
  .mm:not(.auth) .mm-top .shop-btn-lbl {
    display: none;
  }
}
.shop-intro {
  background: var(--paper);
  border-radius: 8px;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 18px;
  display: flex;
  box-shadow: 0 4px #2e1e181f;
}
.shop-intro img {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  flex: none;
}
.shop-intro b {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
  display: block;
}
.shop-intro small {
  color: var(--ink-2);
  font-weight: 700;
  line-height: 1.35;
  display: block;
}
.shop-meta {
  color: var(--ink-2);
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
}
.ic-link {
  color: var(--ink-2);
  cursor: pointer;
  background: 0 0;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 900;
}
.ic-link:hover:not(:disabled) {
  background: var(--paper-2);
  color: var(--ink);
}
.ic-link:disabled {
  opacity: 0.4;
  cursor: default;
}
.ic.locked {
  background: var(--w86);
}
.ic.locked .ic-art {
  background: radial-gradient(circle, var(--k-eeebf6) 0%, transparent 72%);
}
.ic.locked .ic-art > img {
  filter: brightness(0) opacity(0.25);
}
.ic.locked .ic-name b {
  color: #927ba7;
  letter-spacing: 0.12em;
}
.ic-lock {
  background: var(--paper);
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  display: grid;
  position: absolute;
  bottom: -2px;
  right: -2px;
  box-shadow: 0 1px 3px #0000004d;
}
.ic-lock .uiicon {
  width: 13px;
  height: 13px;
}
.ic.off {
  opacity: 0.6;
}
.ic.off .ic-art > img {
  filter: grayscale();
}
.ic.bought {
  animation: 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) bought;
}
.it-empty {
  background: var(--w90);
  color: var(--ink-2);
  border-radius: 7px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px;
  font-weight: 900;
  display: flex;
}
.it-empty img {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  opacity: 0.5;
}
@media (max-width: 760px) {
  .lab-hub {
    order: 10;
    width: 100%;
  }
  .lab-mode {
    flex: 1;
    padding-right: 10px;
  }
  .lm-tx em {
    display: none;
  }
  .it-slots {
    margin-left: 0;
  }
  .ic-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.q-grid {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 10px;
  display: grid;
}
.q-page {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
  display: flex;
}
.q-seg {
  scrollbar-width: none;
  flex: none;
  align-self: flex-start;
  max-width: 100%;
  overflow-x: auto;
}
.q-seg .pill {
  white-space: nowrap;
  flex: none;
}
@media (max-width: 1000px) {
  .q-seg {
    gap: 2px;
  }
  .q-seg .pill {
    padding: 7px 9px;
  }
}
.q-title {
  background: var(--k-fff3c4);
  color: var(--gold-t, #715419);
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 10px 2px 6px;
  font-size: 12px;
  font-weight: 900;
  display: inline-flex;
}
.q-card.secret h3 {
  letter-spacing: 3px;
}
.q-card.secret .q-ic img {
  filter: brightness(0) opacity(0.35);
}
.q-card {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  animation: tileIn 0.35s var(--d, 0s) backwards;
  border-radius: 6px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.q-ic {
  background: var(--paper-2);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  display: grid;
}
.q-ic img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}
.q-card h3 {
  font-family: var(--font-title);
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}
.q-card p {
  color: var(--ink-3);
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 700;
}
.q-bar {
  height: 16px;
  margin-top: 7px;
}
.q-bar > i {
  background: linear-gradient(#428b67, #30674c);
}
.q-bar > b {
  text-shadow:
    0 0 2px #251813f2,
    0 1px 2px #251813e6;
  font-size: 11.5px;
}
.q-reward {
  background: var(--paper-2);
  font-family: var(--font-title);
  border-radius: 4px;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 6px 14px 6px 8px;
  font-weight: 900;
  display: flex;
}
.q-reward.done {
  color: var(--green-t, var(--green-d));
  background: var(--k-e6faee);
}
.q-card.ready {
  box-shadow:
    0 0 0 3px var(--yellow),
    0 0 22px #d19b2e8c,
    var(--shadow-sm);
  background: linear-gradient(100deg, var(--paper) 55%, var(--k-fff6d8));
}
.q-card.ready .q-ic {
  background: var(--k-fff3c4);
}
.q-card.ready .q-ic img {
  animation: 1.4s ease-in-out infinite wobble;
}
.q-card.done {
  opacity: 0.62;
}
.q-claim {
  color: #fef8ec;
  background: var(--stripes), linear-gradient(180deg, #59b185, var(--green-d));
  border: none;
  border-radius: 6px;
  flex-direction: column;
  flex: none;
  align-items: center;
  padding: 8px 18px;
  transition: filter 0.12s;
  animation: 1.1s ease-in-out infinite badgePulse;
  display: flex;
  box-shadow: 0 4px #2e6148;
}
.q-claim:hover {
  filter: brightness(1.1);
}
.q-claim b {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 900;
}
.q-claim small {
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
}
.q-stamp {
  border: 4px solid var(--green-d);
  color: var(--green-t, var(--green-d));
  background: var(--w90);
  font-family: var(--font-title);
  opacity: 0;
  pointer-events: none;
  border-radius: 4px;
  padding: 4px 16px;
  font-size: 24px;
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%) rotate(-12deg) scale(2.2);
}
.q-card.claimed .q-stamp {
  animation: 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) forwards stampDown;
}
.q-card.claimed .q-claim {
  visibility: hidden;
}
@keyframes stampDown {
  to {
    opacity: 1;
    transform: translateY(-50%) rotate(-12deg) scale(1);
  }
}
.q-group.ready .grp-head {
  --c: var(--yellow);
}
.q-group.todo .grp-head {
  --c: var(--blue);
}
.q-group.done .grp-head {
  --c: var(--green);
}
.q-group.done .q-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.q-card.done {
  opacity: 1;
  background: var(--w94);
  box-shadow:
    inset 4px 0 0 var(--green),
    var(--shadow-sm);
  border-radius: 5px;
  gap: 10px;
  padding: 8px 12px 8px 8px;
}
.q-card.done .q-ic {
  background: var(--k-e6faee);
  width: 38px;
  height: 38px;
}
.q-card.done .q-ic img {
  width: 28px;
  height: 28px;
}
.q-card.done h3 {
  font-size: 15px;
}
.q-card.done p {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}
.q-card.done .grow {
  min-width: 0;
}
.q-card.done .q-reward {
  gap: 0;
  padding: 4px;
  font-size: 0;
}
.av {
  --s: 48px;
  width: var(--s);
  height: var(--s);
  flex: none;
  place-items: center;
  display: inline-grid;
  position: relative;
}
.av-pic {
  background: radial-gradient(circle at 40% 35%, var(--paper), var(--k-e4e0f4));
  width: 100%;
  height: 100%;
  box-shadow:
    0 0 0 max(2px, calc(var(--s) * 0.05)) var(--paper),
    0 2px 6px #3a251e40;
  border-radius: 50%;
  place-items: center;
  display: grid;
  overflow: hidden;
}
.av-pic img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: cover;
}
.av.framed .av-pic {
  width: 84%;
  height: 84%;
  box-shadow: none;
}
.av-frame {
  width: calc(var(--s) * 0.72 / 0.48 * 1.04);
  height: calc(var(--s) * 0.72 / 0.48 * 1.04);
  transform: translate(calc(-50% - var(--fx, 0) * 100%), calc(-50% - var(--fy, 0) * 100%));
  pointer-events: none;
  image-rendering: auto;
  filter: drop-shadow(0 2px 3px #3a251e4d);
  position: absolute;
  top: 50%;
  left: 50%;
}
.mm-sp-dust {
  background: var(--paper);
  color: var(--purple-t, var(--purple-d));
  border-radius: 4px;
  margin-left: auto;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 900;
}
.mm-sp-dust:empty {
  display: none;
}
.mm-sp-break {
  background: var(--k-e8f0ff);
  box-shadow: inset 0 0 0 2px var(--blue);
  color: var(--blue-t, var(--blue-d));
  border-radius: 5px;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}
.mm-sp-break b {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 15px;
}
.mm-sp-msg {
  background: var(--k-fff3c4);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
}
.bd-empty {
  text-align: center;
  flex-direction: column;
  align-self: center;
  align-items: center;
  gap: 6px;
  margin-top: 30px;
  padding: 30px 40px;
  display: flex;
}
.bd-empty img {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  animation: 2s infinite wobble;
}
.bd-empty h3 {
  font-family: var(--font-title);
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}
.bd-empty p {
  color: var(--ink-2);
  margin: 0;
  font-weight: 700;
}
.season-card.lk-card {
  width: min(640px, 100% - 32px);
  max-height: calc(100dvh - 40px);
}
.lk-head {
  align-items: center;
  gap: 22px;
  display: flex;
}
.lk-head small {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.lk-head h2 {
  font-family: var(--font-title);
  margin: 0;
  font-size: 26px;
  font-weight: 900;
}
.lk-head p {
  margin: 4px 0 0;
  font-size: 13px;
  text-align: left !important;
}
.lk-prev {
  background: radial-gradient(circle, var(--paper-2) 55%, transparent 70%);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 180px;
  height: 180px;
  display: grid;
}
.lk-card > .seg {
  align-self: center;
}
.lk-grid {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  max-height: 300px;
  padding: 6px;
  display: grid;
  overflow: hidden auto;
}
.lk-cell {
  background: var(--paper-2);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  border: none;
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 4px 8px;
  transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1);
  display: flex;
  position: relative;
}
.lk-cell:hover {
  transform: translateY(-3px);
}
.lk-cell small {
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}
.lk-cell.on {
  background: var(--k-fff3c4);
  box-shadow: inset 0 0 0 3px var(--yellow);
}
.lk-cell.locked .av {
  filter: grayscale() brightness(0.7) opacity(0.55);
}
.lk-cell.locked small {
  color: var(--ink-2);
}
.lk-lock {
  position: absolute;
  top: 6px;
  right: 6px;
}
.lk-info {
  min-height: 1.3em;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}
.tr-av {
  cursor: pointer;
  background: 0 0;
  border: none;
  flex: none;
  place-items: center;
  padding: 0;
  display: grid;
}
.mm-sp-av {
  flex: none;
  place-items: center;
  margin: 4px;
  display: grid;
  position: relative;
}
.mm-sp-av > i {
  position: absolute;
  bottom: -8px;
  right: -10px;
}
.mm-sp-mini {
  place-items: center;
  display: grid;
}
.mm-sp-prizes {
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mm-sp-prizes > small {
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 900;
}
.mm-sp-prizes > div {
  justify-content: space-between;
  width: 100%;
  display: flex;
}
.mm-sp-prizes > div > span {
  flex-direction: column;
  align-items: center;
  line-height: 1;
  display: flex;
}
.pf-av {
  flex-direction: column;
  flex: none;
  align-items: center;
  gap: 14px;
  padding: 18px 26px 0;
  display: flex;
  position: relative;
}
.pf-look {
  padding: 4px 12px;
  font-size: 12px;
}
.st-wrap {
  flex: 1;
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  width: min(1180px, 100%);
  min-height: 0;
  margin: 0 auto;
  padding: 4px;
  display: grid;
}
.st-tabs {
  flex-direction: column;
  gap: 10px;
  padding: 2px 14px 2px 0;
  display: flex;
}
.st-tab {
  --c: var(--blue);
  background: var(--w96);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-sm);
  animation: slideRight 0.35s var(--d, 0s) backwards;
  border: none;
  border-radius: 7px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  transition:
    transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.2s;
  display: flex;
  position: relative;
}
.st-tab:before {
  content: "";
  background: var(--c);
  border-radius: 0 6px 6px 0;
  width: 5px;
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
}
.st-tab:hover {
  transform: translate(5px);
}
.st-tab .st-ic {
  width: 44px;
  height: 44px;
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--c) 30%, var(--paper)),
    0 3px 0 #00000014;
}
.st-tx {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}
.st-tab .st-tx b {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
}
.st-tab .st-tx small {
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}
.st-tab.on {
  color: #fef8ec;
  background: var(--stripes), linear-gradient(100deg, color-mix(in srgb, var(--c) 72%, var(--paper)), var(--c));
  box-shadow:
    var(--shadow),
    0 0 0 3px var(--paper);
  transform: translate(12px);
}
.st-tab.on:before {
  content: none;
}
.st-tab.on .st-tx b {
  text-shadow: 0 2px #00000026;
}
.st-tab.on .st-tx small {
  color: #fef8eceb;
}
.st-tab.on .st-ic {
  box-shadow: 0 3px #00000026;
}
.st-tab.on:after {
  content: "";
  border: 11px solid #00000000;
  border-right: 0;
  border-left-color: var(--c);
  margin-top: -11px;
  position: absolute;
  top: 50%;
  right: -10px;
}
.st-pane {
  --c: var(--blue);
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  display: flex;
  overflow: hidden;
}
.st-head {
  color: #fef8ec;
  background: var(--stripes), linear-gradient(100deg, color-mix(in srgb, var(--c) 70%, var(--paper)), var(--c));
  flex: none;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  display: flex;
}
.st-head .st-tx b {
  font-family: var(--font-title);
  text-shadow: 0 2px #00000026;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
}
.st-head .st-tx small {
  opacity: 0.92;
  font-size: 13px;
  font-weight: 800;
}
.st-ic {
  background: var(--paper);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 50px;
  height: 50px;
  display: grid;
  box-shadow: 0 3px #00000026;
}
.st-ic img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
}
.st-tab .st-ic img {
  width: 30px;
  height: 30px;
}
.st-reset {
  flex: none;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}
.st-reset img {
  width: 18px;
  height: 18px;
}
.st-body {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 18px 20px 20px;
  display: grid;
  overflow: hidden auto;
}
.st-body > * {
  animation: 0.3s backwards tileIn;
}
.st-body > :nth-child(2) {
  animation-delay: 30ms;
}
.st-body > :nth-child(3) {
  animation-delay: 60ms;
}
.st-body > :nth-child(4) {
  animation-delay: 90ms;
}
.st-body > :nth-child(5) {
  animation-delay: 0.12s;
}
.st-body > :nth-child(6) {
  animation-delay: 0.15s;
}
.st-body > :nth-child(n + 7) {
  animation-delay: 0.18s;
}
.st-row {
  background: var(--paper-2);
  border-radius: 6px;
  grid-template-columns: 1fr auto;
  grid-template-areas: "l o" "c c";
  align-items: center;
  gap: 6px 10px;
  min-height: 52px;
  padding: 12px 16px;
  font-weight: 800;
  transition:
    box-shadow 0.15s,
    background 0.15s;
  display: grid;
  box-shadow: inset 0 0 0 2px #00000000;
}
.st-row:hover {
  background: var(--paper);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent),
    0 4px 12px #3a251e14;
}
.st-row.wide {
  grid-column: 1/-1;
}
.st-row .st-val,
.st-row .seg {
  background: var(--paper);
}
.st-row > span:first-child {
  grid-area: l;
}
.st-row > :nth-child(2) {
  grid-area: c;
}
.st-row > :nth-child(3) {
  grid-area: o;
}
.st-row.tog {
  cursor: pointer;
  grid-template-areas: "l c";
}
.st-row.tog > :nth-child(3) {
  display: none;
}
.st-row small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  display: block;
}
.st-row .seg .pill {
  flex: 1;
}
.st-val {
  background: var(--paper-2);
  text-align: center;
  min-width: 48px;
  font-family: var(--font-title);
  border-radius: 4px;
  padding: 2px 10px;
  font-weight: 900;
}
.st-range {
  --p: 50%;
  appearance: none;
  cursor: pointer;
  background: linear-gradient(90deg, var(--c) var(--p), var(--line) var(--p));
  border-radius: 4px;
  outline: none;
  width: 100%;
  height: 12px;
  margin: 8px 0;
  box-shadow: inset 0 2px 3px #00000026;
}
.st-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 3px solid var(--ink);
  cursor: grab;
  background: radial-gradient(circle, var(--paper) 0 17%, var(--ink-bg) 18% 30%, transparent 31%),
    linear-gradient(180deg, var(--red) 0 43%, var(--ink-bg) 43% 57%, var(--paper) 57%);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.5, 1);
  box-shadow: 0 2px 4px #00000059;
}
.st-range::-moz-range-thumb {
  border: 3px solid var(--ink);
  cursor: grab;
  background: radial-gradient(circle, var(--paper) 0 17%, var(--ink-bg) 18% 30%, transparent 31%),
    linear-gradient(180deg, var(--red) 0 43%, var(--ink-bg) 43% 57%, var(--paper) 57%);
  border-radius: 50%;
  width: 22px;
  height: 22px;
}
.st-range:hover::-webkit-slider-thumb {
  transform: scale(1.15) rotate(25deg);
}
.st-range:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.25) rotate(-25deg);
}
.switch {
  background: #dfd1d4;
  border: none;
  border-radius: 4px;
  flex: none;
  justify-self: end;
  width: 58px;
  height: 32px;
  padding: 0;
  transition: background 0.2s;
  position: relative;
  box-shadow: inset 0 2px 4px #00000026;
}
.switch i {
  background: var(--paper);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  transition: transform 0.22s cubic-bezier(0.3, 1.6, 0.5, 1);
  position: absolute;
  top: 4px;
  left: 4px;
  box-shadow: 0 2px 4px #00000040;
}
.switch.on {
  background: var(--c, var(--green));
}
.switch.on i {
  transform: translate(26px);
}
.pz-st {
  flex-direction: column;
  width: min(1200px, 100%);
  min-height: 0;
  max-height: 100%;
  padding: 16px;
  animation: 0.3s ease-out popIn;
  display: flex;
}
.ml-cols {
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  min-height: 0;
  margin-top: 10px;
  display: grid;
  overflow: auto;
}
.ml-col {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  border-radius: 6px;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  display: flex;
}
.ml-col .tag {
  align-self: flex-start;
  margin-bottom: 4px;
}
.ml-grid {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}
.ml-row {
  background: var(--k-f4f2fa);
  border-radius: 4px;
  align-items: center;
  gap: 12px;
  padding: 4px 6px;
  display: flex;
}
.ml-row b {
  font-size: 15px;
  display: block;
}
.ml-row .grow {
  flex: 1;
  min-width: 0;
}
.ml-n {
  color: #fef8ec;
  background: #301f18;
  border-radius: 4px;
  flex: none;
  padding: 2px 9px;
  font-size: 13px;
  font-weight: 900;
}
.ml-row small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  display: block;
}
.ml-row.off {
  opacity: 0.62;
  background: 0 0;
  padding: 2px 6px;
}
.ml-row.off b {
  font-size: 13px;
}
.ml-places .tag + .ml-grid + .tag {
  margin-top: 12px;
}
.ml-ring i {
  background: #d1c9bc;
  border-radius: 50% 50% 40% 40%;
  width: 46%;
  height: 52%;
}
.ml-dot {
  background: #422b22bf;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
  position: relative;
}
.ml-dot:after {
  content: "";
  background: #df5e54;
  width: 9px;
  height: 9px;
}
.ml-dot.elite:after {
  background: #d39e36;
  border-radius: 50%;
  width: 11px;
  height: 11px;
}
.ml-dot.mate:after {
  background: #92ccaf;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 2px #301f18;
}
.ml-dot.me:after {
  background: var(--paper);
  clip-path: polygon(50% 0, 100% 100%, 50% 75%, 0 100%);
  width: 18px;
  height: 18px;
}
@media (max-width: 1000px) {
  .ml-cols,
  .ml-grid {
    grid-template-columns: 1fr;
  }
}
.pz-st .scr-title h1 {
  box-shadow: none;
  background: 0 0;
  border-radius: 0;
  padding: 0;
  transform: none;
}
@media (max-width: 640px) {
  .st-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .dx-main {
    flex: none;
    grid-template-columns: 1fr;
  }
  .dx-left {
    height: 70vh;
  }
  .st-wrap {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .st-tabs {
    flex-direction: row;
    padding: 0 0 4px;
    overflow-x: auto;
  }
  .st-tab {
    flex: 1 0 auto;
    padding: 6px 14px 6px 6px;
  }
  .st-tab .st-tx small,
  .st-tab.on:after {
    display: none;
  }
  .st-tab.on,
  .st-tab:hover {
    transform: none;
  }
  .q-grid {
    grid-template-columns: 1fr;
  }
  .scr-head {
    flex-wrap: wrap;
  }
}
.app-notice {
  z-index: 200;
  background: var(--ink-bg);
  color: #fef8ec;
  box-shadow: var(--shadow);
  pointer-events: none;
  border-radius: 4px;
  padding: 12px 22px;
  font-weight: 900;
  transition: opacity 0.5s;
  animation: 0.3s both popIn;
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%);
}
.app-notice.out {
  opacity: 0;
}
.upd-bar {
  z-index: 210;
  background: var(--paper);
  width: min(560px, 100vw - 32px);
  box-shadow:
    inset 0 0 0 3px var(--green),
    var(--shadow);
  border-radius: 6px;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  padding: 10px 12px 10px 16px;
  animation: 0.3s both popIn;
  display: flex;
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
}
.upd-bar .uiicon {
  flex: none;
}
.upd-bar > div {
  min-width: 0;
  color: var(--ink-2);
  flex-direction: column;
  flex: 1;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
}
.upd-bar b {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}
.upd-x {
  background: var(--k-f0f2f6);
  width: 30px;
  height: 30px;
  color: var(--ink-2);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  flex: none;
  font-size: 18px;
  font-weight: 900;
}
.split-pop {
  background: var(--w96);
  box-shadow: var(--shadow);
  border-radius: 4px;
  align-items: baseline;
  gap: 12px;
  padding: 10px 22px;
  transition:
    opacity 0.5s,
    transform 0.5s;
  animation: 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both splitIn;
  display: flex;
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translate(-50%);
}
.split-pop small {
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 900;
}
.split-pop b {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 900;
}
.split-pop em {
  font-style: normal;
  font-family: var(--font-title);
  color: var(--ink-2);
  font-size: 22px;
  font-weight: 900;
}
.split-pop.ahead {
  box-shadow:
    0 0 0 3px var(--green),
    var(--shadow);
}
.split-pop.ahead em {
  color: var(--green-t, var(--green-d));
}
.split-pop.behind {
  box-shadow:
    0 0 0 3px var(--red),
    var(--shadow);
}
.split-pop.behind em {
  color: var(--red-t, var(--red-d));
}
.split-pop.out {
  opacity: 0;
  transform: translate(-50%, -14px);
}
@keyframes splitIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px) scale(0.7);
  }
}
@keyframes medalIn {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-20deg);
  }
}
.rg-medals {
  gap: 6px;
  display: flex;
}
.rg-md {
  background: var(--paper-2);
  border-radius: 4px;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 58px;
  padding: 4px 0;
  display: flex;
}
.rg-md .uiicon {
  filter: grayscale() brightness(0.75) opacity(0.45);
}
.rg-md small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.rg-md.on {
  background: var(--k-fff8dc);
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.rg-md.on .uiicon {
  filter: none;
}
.rg-pb {
  background: var(--paper-2);
  border-radius: 6px;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  line-height: 1.15;
  display: flex;
}
.rg-pb small {
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.rg-pb > b {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 900;
}
.rg-rank {
  color: var(--ink-2);
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}
.rg-rank b {
  color: var(--ink);
}
.rg-rival {
  color: var(--red-t, var(--red-d));
}
.season-modal {
  z-index: 150;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #2518138c;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}
.season-card {
  flex-direction: column;
  gap: 14px;
  width: min(520px, 100% - 32px);
  padding: 22px;
  animation: 0.4s both popIn;
  display: flex;
}
.season-card p {
  text-align: center;
  margin: 0;
}
.evpill {
  --c: #b097c7;
  color: #fef8ec;
  width: 100%;
  box-shadow:
    var(--shadow-sm),
    inset 3px 0 0 var(--c);
  background: #402b24d1;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 5px 10px;
  animation: 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) miniIn;
  display: flex;
}
.evpill b {
  color: var(--c);
  letter-spacing: 0.3px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}
.evpill span {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 900;
}
.rg-tt-pb {
  align-items: baseline;
  gap: 6px;
  display: flex;
}
.rg-tt-pb small {
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.rg-tt-pb b {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
}
.rg-sec .rg-medals {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}
.rg-sec .rg-md {
  text-align: left;
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  padding: 5px 10px 5px 6px;
}
.rg-sec .rg-md > span {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}
.rg-sec .rg-md b {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 900;
}
.rg-sec .rg-md small {
  color: var(--ink-2);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}
.rg-sec .rg-md:not(.on) b {
  color: var(--ink-2);
}
.rg-top {
  color: var(--green-t, var(--green-d));
  font-weight: 900;
}
.pf-body {
  flex-direction: column;
  flex: 1;
  gap: 14px;
  min-height: 0;
  padding: 0 4px 12px;
  display: flex;
}
.pf-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.rp-note {
  resize: vertical;
  width: 100%;
  min-height: 80px;
  font-family: var(--font);
}
.pf-hero {
  background: linear-gradient(120deg, var(--paper) 55%, color-mix(in srgb, var(--c) 30%, var(--paper)));
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  animation: 0.35s both popIn;
  display: flex;
}
.pf-id {
  flex: 1;
  min-width: 0;
}
.pf-id h2 {
  font-family: var(--font-title);
  margin: 0;
  font-size: 32px;
  font-weight: 900;
}
.pf-stats {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  display: grid;
}
.pf-stat {
  background: var(--w95);
  box-shadow: var(--shadow-sm);
  border-radius: 6px;
  grid-template-rows: auto auto;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px;
  animation: 0.4s both cardIn;
  display: grid;
}
.pf-sic {
  grid-row: span 2;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
}
.pf-sic img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}
.pf-stat b {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 900;
}
.pf-stat small {
  color: var(--ink-2);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
}
.pf-cols {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}
.pf-box {
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  display: flex;
}
.pf-maps {
  flex-direction: column;
  gap: 5px;
  display: flex;
}
.pf-map {
  background: var(--paper-2);
  border-left: 6px solid var(--gr);
  border-radius: 4px;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 14px;
  display: grid;
}
.pf-mname b {
  font-size: 14px;
  display: block;
}
.pf-mname small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.pf-mk,
.pf-mt {
  font-family: var(--font-title);
  align-items: center;
  gap: 4px;
  font-weight: 900;
  display: flex;
}
.pf-mk small {
  font-family: var(--font);
  color: var(--ink-2);
  font-size: 11px;
}
.pf-recent {
  grid-template-columns: 52px minmax(110px, 150px) minmax(160px, 1fr) max-content max-content max-content max-content max-content;
  gap: 5px 10px;
  display: grid;
}
.pf-run {
  grid-column: 1/-1;
  grid-template-columns: subgrid;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sky) 14%, var(--paper-2)) 0%, var(--paper-2) 55%);
  border-left: 6px solid var(--mc);
  border-radius: 5px;
  align-items: center;
  padding: 5px 10px 5px 8px;
  font-size: 14px;
  font-weight: 800;
  animation: 0.3s both cardIn;
  display: grid;
}
.pf-run-mon {
  justify-content: flex-end;
  align-items: center;
  height: 38px;
  display: flex;
  position: relative;
}
.pf-run-mon img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}
.pf-run-mon i {
  opacity: 0.75;
  position: absolute;
  bottom: -3px;
  left: -2px;
}
.pf-run-mon i img {
  width: 24px;
  height: 24px;
}
.pf-run-who,
.pf-run-where {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}
.pf-run-who b,
.pf-run-where small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.pf-run-who small,
.pf-run-where small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.pf-mode {
  background: var(--mc);
  color: #fef8ec;
  font-style: normal;
  font-family: var(--font-title);
  border-radius: 4px;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  padding: 1px 9px 1px 4px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}
.pf-mode img {
  width: 16px !important;
  height: 16px !important;
}
.pf-run-where small {
  border-left: 3px solid var(--gr);
  margin-top: 2px;
  padding-left: 5px;
}
.pf-run-end {
  white-space: nowrap;
  font-family: var(--font-title);
  align-items: center;
  gap: 4px;
  font-weight: 900;
  display: inline-flex;
}
.pf-run-end.win {
  color: var(--green-t, var(--green-d, #387757));
}
.pf-run-end small {
  color: #79539a;
  align-items: center;
  gap: 1px;
  font-size: 11px;
  display: inline-flex;
}
.pf-run-num {
  text-align: right;
  font-family: var(--font-title);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  justify-self: end;
  font-weight: 900;
}
.pf-run-tags {
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  display: flex;
}
.pf-run > .pf-build {
  justify-self: end;
}
.pf-tag {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line, var(--k-e3e6ef));
  border-radius: 4px;
  align-items: center;
  gap: 2px;
  padding: 1px 7px 1px 3px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}
.pf-tag img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
.pf-tag.fu {
  color: var(--gold-t, #894822);
  box-shadow: inset 0 0 0 2px #c36731;
}
.pf-tag.bag {
  padding: 1px 4px;
  box-shadow: inset 0 0 0 2px #51ac7e;
}
.pf-tag.ta {
  color: var(--gold-t, #7e5d1c);
  box-shadow: inset 0 0 0 2px #bb8b29;
}
.pf-run.win {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--green) 45%, transparent);
}
.pf-rtabs {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}
.pf-rtabs:empty {
  display: none;
}
.pf-rtabs .pill {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}
.pf-rtabs .pill img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
.pf-rtabs .pill small {
  opacity: 0.7;
  font-size: 11px;
}
.pf-rtabs .pill.on {
  background: var(--mc);
  border-color: var(--mc);
  color: #fef8ec;
}
.pf-evmap .pf-mname b {
  align-items: center;
  gap: 2px;
  display: flex;
}
.pf-evmap .pf-mk img {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}
@media (max-width: 900px) {
  .pf-cols {
    grid-template-columns: 1fr;
  }
  .pf-hero {
    flex-wrap: wrap;
  }
  .pf-recent {
    flex-direction: column;
    display: flex;
  }
  .pf-run {
    grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 2px 8px;
  }
  .pf-run-num {
    justify-self: start;
  }
  .pf-run-tags {
    flex-wrap: wrap;
  }
  .pf-run-mon {
    grid-row: span 2;
  }
  .pf-run-end {
    grid-area: 2/2;
    font-size: 13px;
  }
  .pf-run-num.kl {
    grid-area: 2/3;
    font-size: 13px;
  }
  .pf-run-num.tm {
    display: none;
  }
  .pf-run-tags {
    grid-area: 3/1 / auto/3;
    justify-content: flex-start;
  }
  .pf-run-tags:empty {
    display: none;
  }
  .pf-run > .pf-build {
    grid-area: 3/3;
    justify-self: end;
  }
  .pf-run > span:last-child:empty {
    display: none;
  }
}
.pf-box .grp-head {
  color: var(--ink);
  text-shadow: none;
  margin: 0 0 4px;
}
.pf-box .grp-head b {
  font-size: 19px;
}
.pf-box .grp-head small {
  color: var(--ink-2);
}
.pf-stats {
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 900px) {
  .pf-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
.tk-main {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 6px 6px 14px;
  display: grid;
  overflow-y: auto;
}
.tk-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 18px;
  display: grid;
}
.tk-col,
.tk-bagpanel {
  --hc: #ba8a29;
  background: var(--w97);
  box-shadow:
    0 6px 0 #3a251e1f,
    var(--shadow);
  border-radius: 8px;
  flex-direction: column;
  animation: 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both plateIn;
  display: flex;
  overflow: hidden;
}
.tk-col.weekly {
  --hc: #8760a9;
  animation-delay: 80ms;
}
.tk-bagpanel {
  --hc: #4481b0;
  align-self: start;
  animation-delay: 0.16s;
  position: sticky;
  top: 0;
}
.quiet,
.quiet * {
  animation-delay: 0s !important;
}
.tk-col.quiet,
.tk-bagpanel.quiet,
.quiet .tk-head,
.quiet .tk-card:not(.just),
.quiet .tk-prize:not(.just) {
  animation: none;
}
.tk-head {
  color: #fef8ec;
  background: var(--stripes),
    linear-gradient(
      110deg,
      color-mix(in srgb, var(--hc) 70%, white),
      var(--hc) 55%,
      color-mix(in srgb, var(--hc) 75%, black)
    );
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 14px;
  display: flex;
  position: relative;
}
.tk-head-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}
.tk-head-tx {
  flex-direction: column;
  min-width: 0;
  display: flex;
}
.tk-head-tx small {
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.9;
  font-size: 12px;
  font-weight: 900;
}
.tk-head-tx h2 {
  font-family: var(--font-title);
  text-shadow: 0 3px #0000002e;
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
}
.tk-left {
  opacity: 0.95;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 800;
}
.tk-streak {
  white-space: nowrap;
  background: #0000002e;
  border-radius: 4px;
  flex: none;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 900;
}
.tk-streak.on {
  background: var(--paper);
  color: #b7602e;
  box-shadow: 0 2px #0000001f;
}
.tk-track {
  --p: 0;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  display: flex;
  position: relative;
}
.tk-track:before,
.tk-track-fill {
  content: "";
  background: #00000033;
  border-radius: 3px;
  height: 6px;
  margin-top: -3px;
  position: absolute;
  top: 50%;
  left: 18px;
  right: 28px;
}
.tk-track-fill {
  width: calc((100% - 46px) * var(--p));
  background: var(--paper);
  transition: width 0.6s cubic-bezier(0.3, 1.2, 0.5, 1);
  right: auto;
  box-shadow: 0 0 8px #f5ebd6cc;
}
.tk-node {
  z-index: 1;
  background: color-mix(in srgb, var(--hc) 60%, black);
  color: #fef8eccc;
  width: 26px;
  height: 26px;
  font-family: var(--font-title);
  border-radius: 50%;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  display: grid;
  position: relative;
  box-shadow: inset 0 0 0 2px #f5ebd68c;
}
.tk-node.on {
  background: var(--paper);
  color: var(--hc);
  box-shadow: 0 0 10px #f5ebd6e6;
}
.tk-node.on .uiicon {
  filter: none;
}
.tk-node.pop {
  animation: 0.55s cubic-bezier(0.3, 1.8, 0.5, 1) tkPop;
}
.tk-node.goal {
  background: #00000038;
  border-radius: 5px;
  width: 40px;
  height: 40px;
  box-shadow: inset 0 0 0 2px #f5ebd68c;
}
.tk-node.goal img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  filter: grayscale(0.5) brightness(0.9);
}
.tk-node.goal.ready {
  background: var(--k-fff3c4);
  box-shadow:
    0 0 0 3px var(--yellow),
    0 0 16px #d19b2ecc;
  animation: 1.1s ease-in-out infinite badgePulse;
}
.tk-node.goal.ready img,
.tk-node.goal.on img {
  filter: none;
}
.tk-node.goal.on {
  background: var(--paper);
}
.tk-card {
  animation: tileIn 0.35s var(--d, 0s) backwards;
  align-items: center;
  gap: 14px;
  margin: 0 12px;
  padding: 14px 6px;
  transition:
    opacity 0.35s,
    background 0.35s;
  display: flex;
  position: relative;
}
.tk-card + .tk-card {
  border-top: 2px solid var(--paper-2);
}
.tk-head + .tk-card {
  margin-top: 4px;
}
.tk-card.lv0 {
  --lv: #47966f;
}
.tk-card.lv1 {
  --lv: #4e8bba;
}
.tk-card.lv2 {
  --lv: #df5e54;
}
.tk-ball {
  background: color-mix(in srgb, var(--lv) 14%, var(--paper));
  width: 54px;
  height: 54px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lv) 35%, var(--paper));
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
  position: relative;
}
.tk-ball img {
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
}
.tk-tick {
  background: var(--green-d);
  width: 22px;
  height: 22px;
  box-shadow: 0 0 0 2px var(--paper);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  bottom: -3px;
  right: -3px;
}
.tk-tick .uiicon {
  filter: brightness(10);
}
.tk-body {
  flex: 1;
  min-width: 0;
}
.tk-title {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}
.tk-lv {
  background: var(--lv);
  color: #fef8ec;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 4px;
  flex: none;
  padding: 1px 9px;
  font-size: 10px;
  font-weight: 900;
}
.tk-body h3 {
  min-width: 0;
  font-family: var(--font-title);
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  overflow: hidden;
}
.tk-body p {
  color: var(--ink-2);
  margin: 3px 0 0;
  font-size: 13px;
  font-weight: 700;
}
.tk-bar {
  height: 15px;
  margin-top: 8px;
}
.tk-col .tk-bar i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--hc) 65%, white), var(--hc));
}
.tk-donetx {
  color: var(--green-t, var(--green-d));
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
}
.tk-side {
  flex-direction: column;
  flex: none;
  align-items: flex-end;
  gap: 6px;
  display: flex;
}
.tk-reward {
  background: var(--paper-2);
  font-family: var(--font-title);
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 6px 14px 6px 8px;
  font-weight: 900;
  display: flex;
}
.tk-reward.done {
  color: var(--green-t, var(--green-d));
  background: var(--k-e6faee);
}
.tk-reroll {
  color: var(--ink-2);
  cursor: pointer;
  background: 0 0;
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 900;
  transition:
    background 0.12s,
    color 0.12s;
  display: flex;
}
.tk-reroll:hover {
  background: var(--k-e4ecff);
  color: var(--blue-t, var(--blue-d));
}
.tk-claim {
  color: #fef8ec;
  cursor: pointer;
  background: var(--stripes), linear-gradient(180deg, #59b185, var(--green-d));
  border: none;
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  padding: 8px 18px;
  transition:
    filter 0.12s,
    transform 0.1s;
  animation: 1.1s ease-in-out infinite badgePulse;
  display: flex;
  box-shadow: 0 4px #2e6148;
}
.tk-claim:hover {
  filter: brightness(1.1);
}
.tk-claim:active {
  transform: translateY(3px);
  box-shadow: 0 1px #2e6148;
}
.tk-claim b {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 900;
}
.tk-claim small {
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
}
.tk-claim.big {
  align-self: stretch;
  padding: 12px;
}
.tk-claim.big b {
  font-size: 20px;
}
.tk-card.ready {
  background: linear-gradient(100deg, var(--paper) 55%, var(--k-fff6d8));
  box-shadow:
    0 0 0 3px var(--yellow),
    0 0 20px #d19b2e80;
  border-radius: 6px;
  margin: 4px 8px;
  padding: 14px 10px;
  overflow: hidden;
}
.tk-card.ready + .tk-card,
.tk-card + .tk-card.ready {
  border-top: none;
}
.tk-card.ready:after,
.tk-prize.ready:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #f5ebd600, #f5ebd6b3, #f5ebd600);
  width: 70px;
  animation: 3.2s ease-in-out infinite tkShine;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.tk-card.ready .tk-ball img {
  animation: 1.4s ease-in-out infinite wobble;
}
.tk-card.done > :not(.tk-stamp) {
  opacity: 0.55;
}
.tk-card.done .tk-ball {
  opacity: 1;
}
.tk-stamp {
  border: 4px solid var(--green-d);
  color: var(--green-t, var(--green-d));
  background: var(--w92);
  font-family: var(--font-title);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: 4px;
  padding: 3px 14px;
  font-size: 22px;
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%) rotate(-12deg) scale(2.2);
}
.claimed .tk-stamp {
  animation: 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) forwards stampDown;
}
.claimed .tk-claim {
  visibility: hidden;
}
.tk-card.done .tk-stamp {
  opacity: 0.9;
  right: 10px;
  transform: translateY(-50%) rotate(-12deg) scale(0.8);
}
.tk-card.done .tk-side {
  visibility: hidden;
}
.tk-card.just,
.tk-prize.just {
  animation: 0.45s ease-out both tkSwap;
}
.tk-prize {
  background: var(--stripes), linear-gradient(120deg, var(--k-fffaf0), color-mix(in srgb, var(--hc) 12%, var(--paper)));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hc) 25%, var(--paper));
  border-radius: 6px;
  flex-direction: column;
  gap: 10px;
  margin: 8px 12px 12px;
  padding: 14px 16px;
  transition: opacity 0.35s;
  display: flex;
  position: relative;
  overflow: hidden;
}
.tk-prize-hd {
  align-items: center;
  gap: 10px;
  display: flex;
}
.tk-prize-ic {
  background: var(--paper);
  width: 38px;
  height: 38px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hc) 30%, var(--paper));
  border-radius: 4px;
  flex: none;
  place-items: center;
  display: grid;
}
.tk-prize-hd b {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
  display: block;
}
.tk-prize-hd small {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}
.tk-prize-items {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}
.tk-pi {
  background: var(--paper);
  min-width: 84px;
  box-shadow: 0 0 0 2px var(--k-ece4fa);
  text-align: center;
  border-radius: 5px;
  flex-direction: column;
  align-items: center;
  padding: 8px 10px;
  display: flex;
}
.tk-pi img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
}
.tk-pi b {
  font-size: 13px;
  font-weight: 900;
}
.tk-pi small {
  color: var(--ink-2);
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
}
.tk-pi.dust b {
  font-family: var(--font-title);
  font-size: 18px;
}
.tk-prize.ready {
  box-shadow:
    0 0 0 3px var(--yellow),
    0 0 22px #d19b2e8c;
}
.tk-prize.ready .tk-prize-ic {
  background: var(--k-fff3c4);
  animation: 1.4s ease-in-out infinite wobble;
}
.tk-prize.done > :not(.tk-stamp) {
  opacity: 0.6;
}
.tk-prize.done .tk-stamp {
  opacity: 0.9;
  transform: translateY(-50%) rotate(-12deg) scale(0.8);
}
.tk-bag-list {
  flex-direction: column;
  padding: 6px 12px;
  display: flex;
}
.tk-boost {
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  display: flex;
}
.tk-boost + .tk-boost {
  border-top: 2px solid var(--paper-2);
}
.tk-boost-ic {
  background: color-mix(in srgb, var(--hc) 12%, var(--paper));
  border-radius: 5px;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  display: grid;
  position: relative;
}
.tk-boost-ic img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
}
.tk-count {
  background: var(--ink-bg);
  color: #fef8ec;
  font-family: var(--font-title);
  box-shadow: 0 0 0 2px var(--paper);
  border-radius: 4px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 900;
  position: absolute;
  bottom: -6px;
  right: -6px;
}
.tk-boost b {
  font-size: 14px;
  font-weight: 900;
  display: block;
}
.tk-boost small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.tk-boost.none .tk-boost-ic {
  background: var(--paper-2);
}
.tk-boost.none .tk-boost-ic img {
  filter: grayscale(0.6) opacity(0.75);
}
.tk-boost.none .tk-count {
  background: #cfc6b9;
}
.tk-note {
  background: var(--paper-2);
  color: var(--ink-2);
  text-align: center;
  border-radius: 4px;
  margin: 0 12px 14px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
}
@keyframes tkPop {
  0% {
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.35);
  }
  to {
    transform: scale(1);
  }
}
@keyframes tkSwap {
  0% {
    opacity: 0.3;
    filter: brightness(1.15);
  }
}
@keyframes tkShine {
  0%,
  55% {
    transform: translate(-120%) skew(-20deg);
  }
  to {
    transform: translate(900%) skew(-20deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tk-card.ready:after,
  .tk-prize.ready:after,
  .tk-node.pop,
  .tk-node.goal.ready,
  .tk-claim {
    animation: none;
  }
}
@media (max-width: 1250px) {
  .tk-main {
    grid-template-columns: 1fr;
  }
  .tk-bagpanel {
    position: static;
  }
  .tk-bag-list {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    column-gap: 14px;
    display: grid;
  }
  .tk-boost + .tk-boost {
    border-top: none;
  }
}
@media (max-width: 900px) {
  .tk-cols {
    grid-template-columns: 1fr;
  }
}
.rg-bag {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}
.rg-boost {
  background: var(--paper-2);
  text-align: left;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 12px 6px 6px;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
  display: flex;
  position: relative;
}
.rg-boost:hover {
  transform: translateY(-2px);
}
.rg-boost img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  flex: none;
}
.rg-boost span {
  flex-direction: column;
  min-width: 0;
  display: flex;
}
.rg-boost b {
  font-size: 13px;
  font-weight: 900;
}
.rg-boost small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.rg-boost i {
  background: var(--ink-bg);
  color: #fef8ec;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  position: absolute;
  top: -6px;
  right: -4px;
}
.rg-boost.on {
  background: var(--k-e6faee);
  box-shadow: 0 0 0 3px var(--green);
}
.hud-party {
  flex-direction: column;
  gap: 6px;
  display: flex;
  position: absolute;
  top: 142px;
  left: 22px;
}
.ally {
  align-items: center;
  animation: 0.35s both popIn;
  display: flex;
}
.ally-pt {
  z-index: 1;
  background: radial-gradient(circle at 50% 38%, var(--paper) 55%, color-mix(in srgb, var(--tc) 25%, var(--paper)));
  border: 3px solid var(--tc);
  width: 46px;
  height: 46px;
  box-shadow:
    var(--shadow-sm),
    0 0 0 2px var(--paper);
  border-radius: 50%;
  flex: none;
  place-items: center;
  margin-right: -16px;
  display: grid;
  position: relative;
  overflow: hidden;
}
.ally-pt img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.ally-tx {
  background: var(--w95);
  box-shadow: var(--shadow-sm);
  border-bottom: 3px solid var(--tc);
  border-radius: 5px;
  flex-direction: column;
  padding: 7px 12px 5px 22px;
  line-height: 1.15;
  display: flex;
  position: relative;
  overflow: hidden;
}
.ally-tx:before {
  content: "";
  background: var(--stripes), var(--tc);
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.ally-tx b {
  font-family: var(--font-title);
  color: var(--ink);
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
}
.ally-tx b em {
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fef8ec;
  background: #47966f;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 9px;
  font-style: normal;
}
.ally-tx small {
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 800;
}
.ally-bond {
  gap: 2px;
  margin-top: 2px;
  display: flex;
}
.ally-bond i {
  background: var(--k-e4dcf4);
  width: 9px;
  height: 8px;
  clip-path: path("M4.5 8 L0.6 4 A2.2 2.2 0 0 1 4.5 1.4 A2.2 2.2 0 0 1 8.4 4 Z");
}
.ally-bond i.on {
  background: #ce7a88;
}
.pz-ability {
  background: var(--paper-2);
  border-radius: 6px;
  padding: 10px 12px;
}
.pz-ability small,
.pz-eff small {
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 900;
  display: block;
}
.pz-ability b {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 900;
}
.pz-ability p {
  color: var(--ink-2);
  margin: 2px 0 0;
  font-size: 13px;
}
.pz-moves {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.pz-move {
  --c: var(--blue);
  background: var(--paper);
  box-shadow:
    0 2px 8px #3a251e14,
    inset 4px 0 0 var(--c);
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  display: flex;
}
.pz-move .grow {
  flex: 1;
  min-width: 0;
}
.pz-mh {
  justify-content: space-between;
  gap: 6px;
  display: flex;
}
.pz-mh b {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 900;
}
.pz-mh span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 900;
}
.pz-move .muted {
  font-size: 11px;
}
.pz-share {
  background: var(--paper-2);
  border-radius: 4px;
  height: 6px;
  margin: 4px 0 2px;
  overflow: hidden;
}
.pz-share i {
  background: var(--c);
  border-radius: 4px;
  height: 100%;
  display: block;
}
.pz-move small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.pz-team {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}
.pz-ally {
  background: var(--paper-2);
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  font-size: 12px;
  display: flex;
}
.pz-ally img {
  background: var(--paper);
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  border-radius: 50%;
}
.pz-centre .sm-cbody > * {
  flex-shrink: 0;
}
.pz-items {
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 8px;
  display: grid;
}
.pz-item {
  --rc: var(--r0);
  aspect-ratio: 1;
  cursor: pointer;
  background: var(--stripes),
    linear-gradient(135deg, color-mix(in srgb, var(--rc) 35%, var(--paper)), color-mix(in srgb, var(--rc) 70%, white));
  border: none;
  border-radius: 6px;
  place-items: center;
  padding: 0;
  transition:
    transform 0.1s,
    box-shadow 0.12s;
  animation: 0.3s ease-out backwards cardIn;
  display: grid;
  position: relative;
  box-shadow: inset 0 -3px #0000001a;
}
.pz-item img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 2px #00000040);
}
.pz-item b {
  background: var(--ink-bg);
  color: #fef8ec;
  font-family: var(--font-title);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 900;
  position: absolute;
  bottom: 2px;
  right: 3px;
}
.pz-item:hover,
.pz-item.sel {
  box-shadow:
    0 0 0 3px var(--rc),
    0 6px 14px #3a251e38;
  outline: none;
  transform: translateY(-2px);
}
.pz-detail {
  background: var(--paper-2);
  border-radius: 6px;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 12px 14px;
  display: flex;
}
.pz-dtop {
  --rc: var(--r0);
  align-items: center;
  gap: 12px;
  display: flex;
}
.pz-dtop img {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  background: var(--stripes), linear-gradient(135deg, color-mix(in srgb, var(--rc) 50%, var(--paper)), var(--rc));
  border-radius: 6px;
  flex: none;
  padding: 6px;
}
.pz-dtop h3 {
  font-family: var(--font-title);
  margin: 0 0 3px;
  font-size: 19px;
  font-weight: 900;
}
.pz-rar {
  background: var(--rc);
  color: #fef8ec;
  font-family: var(--font-title);
  text-shadow: 0 1px 1px #00000033;
  border-radius: 4px;
  padding: 1px 10px;
  font-size: 11px;
  font-weight: 900;
}
.pz-count {
  background: var(--paper);
  font-family: var(--font-title);
  color: var(--ink-2);
  border-radius: 4px;
  padding: 1px 10px;
  font-size: 11px;
  font-weight: 900;
}
.pz-desc {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}
.pz-eff {
  background: var(--paper);
  border-radius: 4px;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  display: flex;
}
.pz-eff div {
  color: var(--green-t, var(--green-d));
  font-size: 13px;
  font-weight: 900;
}
.pz-eff div:before {
  content: "▸ ";
  color: var(--ink-2);
}
.pz-dealt {
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
}
.pz-empty {
  color: var(--ink-2);
  margin: 0;
  font-size: 13px;
}
.pz-vits {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  display: grid;
}
.pz-vit {
  background: var(--k-f1edff);
  border-radius: 5px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  display: flex;
}
.pz-vit img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}
.pz-vit b {
  font-size: 13px;
  font-weight: 900;
  display: block;
}
.pz-vit span {
  color: var(--purple-t, var(--purple-d));
  font-size: 12px;
  font-weight: 900;
}
.pz-group {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.pz-stats {
  flex-direction: column;
  display: flex;
}
.pz-stats div {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  gap: 8px;
  padding: 3px 2px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}
.pz-stats div.up b {
  color: var(--green-t, var(--green-d));
}
.pz-stats div.down b {
  color: var(--red-t, var(--red-d));
}
.sm-modal {
  padding: 20px 24px;
}
.modal.sm-modal {
  -webkit-backdrop-filter: blur(5px);
}
.modal:has(> .pz-st) {
  -webkit-backdrop-filter: blur(5px);
}
.sm {
  flex-direction: column;
  gap: 14px;
  width: min(1340px, 100%);
  min-height: 0;
  max-height: 100%;
  padding: 14px;
  animation: 0.35s ease-out popIn;
  display: flex;
}
.sm-hero {
  color: #fef8ec;
  box-shadow: var(--shadow-sm);
  background: var(--stripes),
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--sky) 80%, #3b261f) 0%,
      color-mix(in srgb, var(--gr) 75%, #3b261f) 100%
    );
  border-radius: 7px;
  flex: none;
  align-items: center;
  gap: 18px;
  padding: 14px 18px 14px 14px;
  display: flex;
}
.sm-hero.lose {
  background: var(--stripes),
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--red-d) 70%, #3b261f) 0%,
      color-mix(in srgb, var(--sky) 45%, #3b261f) 100%
    );
}
.sm-av {
  background: var(--paper);
  width: 84px;
  height: 84px;
  box-shadow:
    0 0 0 3px var(--bronze),
    0 0 0 5px var(--lacquer),
    var(--shadow-sm);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
  position: relative;
}
.sm-hero.lose .sm-av {
  box-shadow:
    0 0 0 4px var(--paper),
    var(--shadow-sm);
}
.sm-av img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  border-radius: 50%;
}
.sm-av span {
  background: var(--ink-bg);
  font-family: var(--font-title);
  white-space: nowrap;
  border-radius: 4px;
  padding: 1px 10px;
  font-size: 12px;
  font-weight: 900;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translate(-50%);
}
.sm-hero-tx {
  flex: 1;
  min-width: 0;
}
.sm-hero-tx small {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.9;
  font-size: 11px;
  font-weight: 900;
}
.sm-hero-tx h2 {
  font-family: var(--font-brush);
  text-shadow: 0 3px #00000033;
  letter-spacing: 0.04em;
  margin: 0;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.05;
}
.sm-hero.win h2 {
  color: var(--yellow);
}
.sm-hero-tx p {
  opacity: 0.95;
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 800;
}
.sm-kpis {
  flex: none;
  grid-template-columns: repeat(4, minmax(104px, auto));
  gap: 8px;
  display: grid;
}
.sm-kpi {
  background: var(--w95);
  color: var(--ink);
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  display: flex;
  box-shadow: inset 0 -3px #00000014;
}
.sm-kpi b {
  font-family: var(--font-title);
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
}
.sm-kpi span {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 900;
}
.sm-body {
  flex: 1;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  display: grid;
}
.sm-card {
  background: var(--paper-2);
  border-radius: 6px;
  flex-direction: column;
  min-height: 0;
  animation: 0.4s both cardIn;
  display: flex;
  overflow: hidden;
}
.sm-card:nth-child(2) {
  animation-delay: 60ms;
}
.sm-card:nth-child(3) {
  animation-delay: 0.12s;
}
.sm-card > header {
  color: #fef8ec;
  background: var(--stripes), linear-gradient(100deg, var(--c1), var(--c2));
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  display: flex;
}
.sm-card > header b {
  font-family: var(--font-title);
  text-shadow: 0 1px #00000026;
  font-size: 17px;
  font-weight: 900;
}
.sm-card > header small {
  opacity: 0.92;
  font-size: 12px;
  font-weight: 900;
}
.sm-recs {
  --c1: var(--orange);
  --c2: var(--red);
}
.sm-run {
  --c1: var(--green);
  --c2: #325e7f;
}
.sm-dex {
  --c1: var(--blue);
  --c2: var(--purple);
}
.sm-cbody {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  display: flex;
  overflow: hidden auto;
}
.sm-sect {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.sm-empty {
  background: var(--paper);
  text-align: center;
  color: var(--ink-2);
  border-radius: 4px;
  margin: 0;
  padding: 10px;
  font-size: 13px;
}
.sm-rec {
  flex-direction: column;
  gap: 10px;
  display: flex;
}
.sm-best {
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  display: flex;
}
.sm-best-n {
  background: var(--paper);
  border-radius: 5px;
  flex-direction: column;
  flex: 150px;
  justify-content: center;
  min-width: 0;
  padding: 8px 12px;
  display: flex;
}
.sm-best-n small {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.sm-best-n b {
  font-family: var(--font-title);
  font-size: 46px;
  font-weight: 900;
  line-height: 1;
}
.sm-best-n em {
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}
.sm-best.pb .sm-best-n {
  box-shadow: inset 0 0 0 2px var(--yellow);
  background: var(--k-fffbea);
}
.sm-best.pb .sm-best-n small {
  color: var(--yellow-d);
  animation: 0.5s infinite alternate pulse;
}
.sm-best.pb .sm-best-n b {
  color: var(--yellow-d);
  text-shadow: 0 3px #00000014;
}
.sm-note {
  background: var(--paper);
  color: var(--ink-2);
  border-radius: 5px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.35;
  display: flex;
}
.sm-note .uiicon {
  flex: none;
}
.sm-note > div {
  flex-direction: column;
  gap: 2px;
  display: flex;
}
.sm-note b {
  color: var(--ink);
}
.sm-note em {
  color: var(--red-t, var(--red-d));
  font-style: normal;
  font-weight: 900;
}
.sm-note.top {
  background: var(--k-fff8dc);
  box-shadow: inset 0 0 0 2px var(--yellow);
  color: var(--ink);
}
.sm-note.warn {
  background: var(--k-fff0f0);
  box-shadow: inset 0 0 0 2px var(--red);
}
.sm-note.review {
  background: var(--k-fff8e6);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px #c96932;
}
.sm-tt {
  background: var(--paper);
  border-radius: 5px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: flex;
}
.sm-tt > div:first-child {
  flex-direction: column;
  flex: 1;
  min-width: 150px;
  display: flex;
}
.sm-tt small,
.sm-next small,
.sm-medal small {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 900;
}
.sm-tt > div:first-child b {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}
.sm-tt em {
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}
.sm-best-n em.ahead,
.sm-tt em.ahead {
  color: var(--green-t, var(--green-d));
}
.sm-best-n em.behind,
.sm-tt em.behind {
  color: var(--red-t, var(--red-d));
}
.sm-next,
.sm-medal {
  background: var(--paper-2);
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 6px;
  display: flex;
}
.sm-next > div,
.sm-medal > div {
  flex-direction: column;
  line-height: 1.15;
  display: flex;
}
.sm-next b {
  font-size: 13px;
  font-weight: 900;
}
.sm-medal {
  background: var(--paper);
  box-shadow:
    0 0 0 3px var(--yellow),
    var(--shadow-sm);
  animation: 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) 0.3s both medalIn;
}
.sm-medal .uiicon {
  animation: 1.6s infinite wobble;
}
.sm-medal b {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
}
.sm-medal span {
  color: var(--purple-t, var(--purple-d));
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
}
.sm-dust {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--purple) 35%, var(--paper));
  border-radius: 5px;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  display: flex;
}
.sm-dust img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
.sm-dust b {
  font-family: var(--font-title);
  color: var(--purple-t, var(--purple-d));
  font-size: 22px;
  font-weight: 900;
}
.sm-dust span {
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 900;
}
.sm-facts {
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  gap: 6px;
  display: grid;
}
.sm-facts > div {
  background: var(--paper);
  border-radius: 4px;
  flex-direction: column;
  align-items: center;
  padding: 6px 4px;
  display: flex;
}
.sm-facts b {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}
.sm-facts span {
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 900;
}
.sm-mons {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  display: grid;
}
.sm-mon,
.sm-task {
  background: var(--paper);
  border-radius: 5px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 10px 5px 5px;
  animation: 0.4s both cardIn;
  display: flex;
}
.sm-mon > div:last-child,
.sm-task > div {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}
.sm-mon b,
.sm-task b {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 14px;
  font-weight: 900;
  overflow: hidden;
}
.sm-mon small,
.sm-task small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.sm-mon .sm-skin {
  color: var(--purple-t, #943746);
  white-space: normal;
  margin-top: 3px;
  display: block;
}
.sm-ic {
  background: var(--paper-2);
  width: 42px;
  height: 42px;
  box-shadow: 0 0 0 3px var(--yellow);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
  overflow: hidden;
}
.sm-ic img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.sm-mon .chip {
  background: var(--yellow-d);
  padding: 1px 9px;
  font-size: 11px;
}
.sm-mon.shiny .sm-ic {
  box-shadow: 0 0 0 3px #dfa9b2;
}
.sm-mon.shiny .chip {
  background: linear-gradient(100deg, #dfa9b2, #bba5ce 50%, #7ca9cc);
}
.sm-mon.ally .sm-ic {
  box-shadow: 0 0 0 3px #4ea67a;
}
.sm-task {
  background: var(--k-fff6d8);
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.sm-kills {
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
  display: grid;
}
.sm-kill {
  background: var(--paper);
  border-radius: 5px;
  flex-direction: column;
  align-items: center;
  padding: 5px 2px 3px;
  display: flex;
  position: relative;
}
.sm-kill img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}
.sm-kill b {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 900;
}
.sm-kill.new {
  background: var(--k-eaf6ff);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.sm-kill i {
  background: var(--blue);
  color: #fef8ec;
  letter-spacing: 0.5px;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  position: absolute;
  top: -6px;
  right: -4px;
}
.sm-research {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px;
  display: grid;
}
.sm-rs {
  background: var(--paper);
  border-radius: 5px;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  display: flex;
}
.sm-rs img {
  background: var(--paper-2);
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
  border-radius: 50%;
  flex: none;
}
.sm-rs > div {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  line-height: 1.1;
  display: flex;
}
.sm-rs b {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
}
.sm-rs i {
  background: var(--paper-2);
  border-radius: 4px;
  height: 6px;
  display: block;
  overflow: hidden;
}
.sm-rs i span {
  background: linear-gradient(90deg, var(--blue), var(--purple));
  border-radius: 4px;
  height: 100%;
  display: block;
}
.sm-rs small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.sm-rs.ready {
  box-shadow: inset 0 0 0 2px var(--green);
}
.sm-rs.ready i span {
  background: var(--green);
}
.sm-rs.ready small {
  color: var(--green-t, var(--green-d));
}
.sm-foot {
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  display: flex;
}
.sm-foot .actions {
  flex-wrap: nowrap;
  flex: none;
  align-items: center;
  margin: 0;
}
.sm-foot .help {
  min-width: 0;
  color: var(--ink-2);
  text-shadow: none;
  flex: 1;
}
.pz > .sm-foot {
  flex-wrap: wrap;
  row-gap: 6px;
}
.pz > .sm-foot .help {
  flex: 100%;
  line-height: 1.6;
}
.pz > .sm-foot .actions {
  flex-wrap: wrap;
  flex: auto;
  justify-content: flex-end;
  row-gap: 6px;
}
.pz-body {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.2fr);
}
.pz-left {
  --c1: var(--blue);
  --c2: #3c719a;
}
.pz-centre {
  --c1: var(--yellow-d);
  --c2: var(--orange);
}
.pz-right {
  --c1: var(--purple);
  --c2: #be4f61;
}
.pz-hero .sm-hero-tx small {
  align-items: center;
  gap: 8px;
  display: flex;
}
.pz-pill {
  background: var(--paper);
  color: var(--red-t, var(--red-d));
  letter-spacing: 1px;
  border-radius: 4px;
  padding: 1px 10px;
  font-style: normal;
}
.pz-name {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
  display: flex;
}
.pz-name h2 {
  font-family: var(--font-title);
  text-shadow: 0 3px #00000033;
  margin: 0 6px 0 0;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.05;
}
.pz-bars {
  flex-direction: column;
  gap: 4px;
  max-width: 420px;
  display: flex;
}
.pz-bar {
  grid-template-columns: 34px 1fr 76px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  display: grid;
}
.pz-bar b {
  text-align: right;
  font-size: 12px;
}
.pz-track {
  background: #2a1b1666;
  border-radius: 4px;
  height: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px #00000040;
}
.pz-track i {
  background: linear-gradient(180deg, #95cdb1, var(--green));
  border-radius: 4px;
  height: 100%;
  display: block;
}
.pz-bar.xp .pz-track i {
  background: linear-gradient(180deg, #9bbed8, var(--blue));
}
.pz-kpis {
  grid-template-columns: repeat(6, minmax(86px, auto));
}
.pz .pz-ability,
.pz .pz-detail,
.pz .pz-ally {
  background: var(--paper);
}
.pz .pz-move {
  box-shadow: inset 4px 0 0 var(--c);
}
.pz-statcols {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: start;
  gap: 6px 14px;
  display: grid;
}
.pz-statcols > .pz-group {
  gap: 10px;
}
.pz .pz-stats {
  background: var(--paper);
  border-radius: 4px;
  padding: 2px 10px;
}
.pz .pz-stats div:last-child {
  border-bottom: none;
}
.pz-help {
  font-size: 12px;
  line-height: 1.8;
}
@media (max-width: 1180px) {
  .pz .pz-kpis {
    grid-template-columns: repeat(3, minmax(80px, auto));
  }
  .sm-kpis {
    grid-template-columns: repeat(2, minmax(96px, auto));
  }
  .sm-kpi {
    padding: 4px 12px;
  }
  .sm-kpi b {
    font-size: 20px;
  }
}
@media (max-width: 900px), (max-height: 520px) {
  .sm {
    overflow-y: auto;
  }
  .sm-hero {
    flex-wrap: wrap;
  }
  .sm-hero-tx h2 {
    font-size: 30px;
  }
  .sm-kpis {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
  }
  .sm-body {
    flex-direction: column;
    flex: none;
    display: flex;
  }
  .sm-cbody {
    overflow: visible;
  }
  .sm-foot .help {
    display: none;
  }
}
.cl-modal {
  width: min(460px, 100% - 32px);
}
.cl-mh {
  font-family: var(--font-title);
  text-align: center;
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}
.cl-mbtns {
  justify-content: center;
  gap: 10px;
}
.ml-wrap {
  flex-direction: column;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 4px 4px 14px;
  display: flex;
  overflow-y: auto;
}
.ml-card {
  width: min(760px, 100%);
  animation: slideRight 0.35s var(--d, 0s) backwards;
  align-items: center;
  gap: 18px;
  padding: 14px 20px;
  display: flex;
}
.ml-card.new {
  box-shadow:
    0 0 0 3px var(--yellow),
    var(--shadow);
}
.ml-card.done {
  opacity: 0.75;
}
.ml-card > .uiicon {
  width: 64px !important;
  height: 64px !important;
}
.ml-tx {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.ml-tx small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}
.ml-tx h3 {
  font-family: var(--font-title);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  display: flex;
}
.ml-tx p {
  color: var(--ink-2);
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.ml-link {
  color: var(--blue-t, var(--blue-d));
  font: inherit;
  cursor: pointer;
  background: 0 0;
  border: none;
  padding: 0;
  font-weight: 900;
  text-decoration: underline;
}
.ml-btns {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  display: flex;
}
.ml-state {
  background: var(--slate, var(--ink-2));
}
.ml-av {
  flex: none;
  place-items: center;
  display: grid;
  position: relative;
}
.ml-avic {
  background: var(--paper);
  width: 36px;
  height: 36px;
  box-shadow: var(--shadow-sm);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  bottom: -6px;
  right: -8px;
}
.ml-avic .uiicon {
  width: 28px !important;
  height: 28px !important;
}
.pf-actions .btn .uiicon {
  width: 20px !important;
  height: 20px !important;
}
.ml-state.ok {
  background: var(--green);
}
.ml-state.removed {
  background: var(--red);
}
.ml-msg {
  background: var(--k-f2f5fa);
  border-radius: 4px;
  padding: 6px 10px;
  font-style: italic;
  color: var(--ink) !important;
  margin-top: 4px !important;
}
.ml-text {
  white-space: pre-line;
  color: var(--ink) !important;
}
.ml-rich {
  font-size: 14.5px;
  line-height: 1.5;
}
.ml-rich p {
  margin: 0 0 8px;
  color: var(--ink) !important;
}
.ml-rich > :last-child {
  margin-bottom: 0;
}
.ml-rich a {
  color: var(--blue-t, var(--blue-d));
  font-weight: 900;
}
.ml-vanish {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-2) !important;
  margin-top: 6px !important;
}
.ml-season {
  align-items: flex-start;
}
.ml-res {
  flex-direction: column;
  gap: 5px;
  margin: 6px 0 4px;
  display: flex;
}
.ml-res-row {
  background: var(--paper-2);
  border-radius: 4px;
  grid-template-columns: 30px 58px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  display: grid;
}
.ml-res-row b {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
}
.ml-res-row span {
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}
.ml-res-row small {
  color: var(--ink-2);
  font-size: 11px;
}
.ml-res-row em {
  color: var(--purple-t, var(--purple-d));
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-weight: 900;
  display: flex;
}
.ml-res-row.m6 {
  background: linear-gradient(100deg, var(--k-fff1c2), var(--k-ffe0f4));
}
.ml-res-row.m5 {
  background: linear-gradient(100deg, var(--k-ffe7fb), var(--k-e3f6ff));
}
.ml-res-row.m4 {
  background: var(--k-fff6d6);
}
.ml-note {
  color: #fef8ec;
  text-shadow: 0 1px 3px #000000b3;
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 800;
}
.sm-note.clan {
  background: var(--k-eef4ff);
  box-shadow: inset 0 0 0 2px var(--blue);
  color: var(--ink);
}
.sm-note.mon {
  color: var(--ink);
}
.sm-note.mon small {
  color: var(--ink-2);
  font-size: 11.5px;
}
.sm-note .sm-mon {
  background: var(--paper-2);
  border-radius: 4px;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  animation: none;
  display: block;
  overflow: hidden;
}
.sm-note .sm-mon img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.lc {
  --lc: var(--blue);
  flex-direction: column;
  padding: 0;
  display: flex;
  overflow: hidden;
}
.ms2-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}
.ms2 {
  background: color-mix(in srgb, var(--mc) 9%, var(--paper));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mc) 28%, var(--paper));
  border-radius: 6px;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 10px;
  display: flex;
}
.ms2.done {
  background: linear-gradient(160deg, var(--k-fff6d6), var(--paper));
  box-shadow:
    inset 0 0 0 3px var(--yellow),
    0 0 14px #bc8b2959;
}
.ms2-head {
  align-items: center;
  gap: 10px;
  min-height: 48px;
  display: flex;
}
.ms2-ic {
  background: var(--paper);
  width: 48px;
  height: 48px;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--mc) 30%, transparent);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
}
.ms2-ic img {
  width: 36px !important;
  height: 36px !important;
}
.ms2-head b {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}
.ms2-num {
  align-items: baseline;
  gap: 2px;
  display: flex;
}
.ms2-num b {
  font-family: var(--font-title);
  color: color-mix(in srgb, var(--mc) 75%, #3b261f);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}
.ms2-num span {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 900;
}
.ms2-track {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 2px 12px 16px 0;
  display: grid;
}
.ms2-step {
  background: var(--paper);
  border-radius: 4px;
  height: 12px;
  position: relative;
  box-shadow: inset 0 1px 2px #3a251e2e;
}
.ms2-step > i {
  background: var(--mc);
  border-radius: 4px;
  transition: width 0.5s;
  position: absolute;
  inset: 0 auto 0 0;
}
.ms2-star {
  z-index: 1;
  background: var(--k-d6d0e8);
  clip-path: polygon(50% 0, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 78%, 20% 100%, 30% 60%, 0 38%, 38% 35%);
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  right: -13px;
  translate: 0 -50%;
}
.ms2-step.on .ms2-star {
  filter: drop-shadow(0 0 4px #bc8b29cc);
  background: #bc8b29;
}
.ms2-step small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
  position: absolute;
  top: 16px;
  right: -10px;
}
.ms2-foot {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}
.ms2-foot > span {
  color: var(--blue-t, var(--blue-d));
  flex: none;
  font-size: 12.5px;
  font-weight: 900;
}
.ms2-foot small {
  color: var(--ink-2);
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
}
.ms2-bottom {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 14px;
  display: flex;
}
@media (max-width: 980px) {
  .ms2-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .ms2-bottom {
    flex-direction: column;
    align-items: stretch;
  }
}
.nw-wrap {
  flex: 1;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 18px;
  min-height: 0;
  display: grid;
}
.nw-list {
  flex-direction: column;
  gap: 10px;
  padding: 4px 8px 12px 4px;
  display: flex;
}
.nw-none {
  color: #fef8ec;
  opacity: 0.8;
  text-align: center;
}
.nw-card {
  --c: var(--blue);
  background: var(--w94);
  color: var(--ink);
  text-align: left;
  box-shadow:
    0 4px 0 #3a251e2e,
    var(--shadow-sm);
  animation: slideRight 0.4s var(--d, 0s) cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
  border: none;
  border-radius: 6px;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  transition:
    transform 0.16s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.14s;
  display: flex;
  position: relative;
}
.nw-card:before {
  content: "";
  background: var(--c);
  border-radius: 0 6px 6px 0;
  width: 5px;
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
}
.nw-card:hover {
  transform: translate(4px);
}
.nw-card.on {
  background: var(--paper);
  box-shadow:
    0 0 0 3px var(--c),
    0 5px 0 color-mix(in srgb, var(--c) 55%, black),
    var(--shadow);
  transform: translate(8px);
}
.nw-thumb {
  background: var(--stripes), color-mix(in srgb, var(--c) 18%, var(--paper));
  border-radius: 5px;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
  overflow: hidden;
}
.nw-thumb.img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.nw-ctx {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.nw-ctx > b {
  font-family: var(--font-title);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  display: -webkit-box;
  overflow: hidden;
}
.nw-sum {
  color: var(--ink-2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  font-weight: 700;
  display: -webkit-box;
  overflow: hidden;
}
.nw-dot {
  background: var(--red);
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 3px var(--paper);
  border-radius: 50%;
  animation: 1.2s ease-in-out infinite badgePulse;
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
}
.nw-reader {
  flex-direction: column;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.nw-reader.swap {
  animation: 0.35s both popIn;
}
.nw-scroll {
  flex: 1;
  min-height: 0;
  padding: 22px 30px 24px;
}
.sec .nw-reader .scroll {
  scrollbar-color: #d1c9be transparent;
}
.nw-foot {
  border-top: 2px dashed var(--line);
  color: var(--ink-2);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding-top: 16px;
  font-size: 13px;
  display: flex;
}
.nw-empty {
  text-align: center;
  max-width: 420px;
  color: var(--ink-2);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: auto;
  padding: 40px;
  display: flex;
}
.nw-empty b {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 22px;
}
@media (max-width: 1000px), (max-height: 640px) {
  .nw-scroll {
    padding: 16px 20px 18px;
  }
}
@media (max-width: 860px) {
  .nw-wrap {
    grid-template-rows: 190px 1fr;
    grid-template-columns: 1fr;
  }
}
.rg-modes {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}
.rg-mode {
  --c: var(--red);
  background: var(--paper-2);
  color: var(--ink);
  text-align: left;
  border: none;
  border-radius: 5px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1);
  display: flex;
  box-shadow: inset 0 -3px #00000014;
}
.rg-mode.endless {
  --c: #7d56a0;
}
.rg-mode img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  flex: none;
}
.rg-mode b {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
  display: block;
}
.rg-mode small {
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 800;
  display: block;
}
.rg-mode:hover {
  transform: translateY(-2px);
}
.rg-mode.on {
  color: #fef8ec;
  background: var(--stripes), var(--c);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 60%, black);
}
.rg-mode.on small {
  color: #fef8ece6;
}
.rg-miles .rg-stop em {
  color: var(--ink-2);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.rg-miles .rg-stop.leg em {
  color: #936d20;
}
.rg-how {
  background: var(--paper-2);
  color: var(--ink-2);
  border-radius: 5px;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  padding: 10px 12px 10px 26px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}
.rg-how b {
  color: var(--ink);
}
.milepill {
  --c: #c25b6c;
  color: #fef8ec;
  width: 100%;
  box-shadow:
    var(--shadow-sm),
    inset 3px 0 0 var(--c);
  background: #402b24d1;
  border-radius: 5px;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 4px 10px 4px 4px;
  display: flex;
}
.mp-pt {
  background: radial-gradient(circle at 50% 38%, var(--paper) 55%, color-mix(in srgb, var(--c) 30%, var(--paper)));
  width: 34px;
  height: 34px;
  box-shadow: 0 0 0 2px var(--c);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
  overflow: hidden;
}
.mp-pt img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.mp-tx {
  flex-direction: column;
  min-width: 0;
  display: flex;
}
.mp-tx small {
  letter-spacing: 0.4px;
  color: var(--c);
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 900;
}
.mp-tx b {
  font-family: var(--font-title);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
}
.ht-tier[data-t="endless"] {
  background: #7d56a0;
}
.ht-pacts {
  background: var(--k-efeaff);
  border-radius: 4px;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  display: inline-flex;
}
.ht-pacts em {
  color: #7d56a0;
  margin-right: 2px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.ht-pacts i {
  background: var(--paper);
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 2px var(--c);
  border-radius: 50%;
  place-items: center;
  display: grid;
}
.ht-pacts img {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
}
.stageintro.endless h1 {
  background: var(--stripes), linear-gradient(100deg, #b097c7, #573c6f);
}
.stageintro.tower h1 {
  background: var(--stripes), linear-gradient(100deg, #bba5ce, #54396b);
}
.card.pact .top {
  background: var(--stripes), linear-gradient(135deg, color-mix(in srgb, var(--rc) 40%, #402b24), #402b24);
}
.card.pact .top img {
  width: 60px;
  height: 60px;
}
.pact-line {
  border-radius: 4px;
  flex-direction: column;
  padding: 5px 9px;
  display: flex;
}
.pact-line small {
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
}
.pact-line b {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}
.pact-line.boon {
  background: var(--k-e6fbe9);
  color: var(--green-t, #31684d);
}
.pact-line.bane {
  background: var(--k-ffe9ea);
  color: var(--red-t, #9f2e26);
}
.card.trade .top img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}
.trade-mon img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  vertical-align: middle;
  margin-right: 8px;
}
.sm-pacts {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}
.sm-pact {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--c);
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  display: flex;
}
.sm-pact img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
.sm-pact b {
  font-size: 12px;
  font-weight: 900;
}
.pf-end-head {
  margin-top: 10px;
}
.lang-btn {
  background: var(--w95);
  height: 40px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 9px;
  font-size: 14px;
  font-weight: 900;
  transition: transform 0.15s;
  display: inline-flex;
}
.lang-btn:hover {
  transform: translateY(-2px);
}
.lang-btn .uiicon {
  width: 22px !important;
  height: 22px !important;
}
.mm.auth .mm-top {
  justify-content: flex-start;
}
.ally.shiny .ally-pt {
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 12px 3px #dfa9b2d9;
}
.ally.shiny .ally-tx b em {
  background: linear-gradient(100deg, #dfa9b2, #bba5ce 50%, #7ca9cc);
}
.pz-ally.shiny img {
  box-shadow: 0 0 0 2px #dfa9b2;
}
.sm-mon.ally.shiny .sm-ic {
  box-shadow: 0 0 0 3px #dfa9b2;
}
.ls-tile .shiny-mark {
  z-index: 3;
  top: 5px;
  left: auto;
  right: 5px;
}
.hd-click {
  cursor: pointer;
  transition: transform 0.15s;
}
.hd-click:hover {
  transform: translateY(-2px);
}
.dx-coll {
  background: linear-gradient(120deg, #dfa9b22e, #bba5ce24 50%, #7ca9cc29);
  border-radius: 6px;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  display: flex;
}
.dx-coll-head {
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}
.dx-coll-head .tag {
  margin-bottom: 0;
}
.dx-coll-head b {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 900;
}
.dx-ms {
  background: var(--w85);
  border-radius: 4px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  display: flex;
}
.dx-ms > div {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.2;
  display: flex;
}
.dx-ms b {
  font-size: 13px;
  font-weight: 900;
}
.dx-ms small {
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
}
.dx-ms-n {
  background: var(--k-e4dcf4);
  width: 30px;
  height: 30px;
  font-family: var(--font-title);
  color: var(--ink-2);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 13px;
  font-weight: 900;
  display: grid;
}
.dx-ms.ok .dx-ms-n {
  background: linear-gradient(135deg, #e2c07c, #dfa9b2 60%, #aac8de);
}
.dx-ms:not(.ok) {
  opacity: 0.85;
}
.dx-ms.charm {
  box-shadow: inset 0 0 0 2px #dfa9b2;
}
.dx-ms-bar {
  background: var(--k-e4dcf4);
  border-radius: 4px;
  height: 5px;
  margin-top: 3px;
  display: block;
  overflow: hidden;
}
.dx-ms-bar i {
  background: linear-gradient(90deg, #dfa9b2, #bba5ce 50%, #7ca9cc);
  height: 100%;
  display: block;
}
.dx-skin {
  background: var(--paper-2);
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}
.dx-skin .shiny-mark {
  flex: none;
  position: static;
}
.sl-cab {
  --sl: 92px;
  background: linear-gradient(180deg, var(--k-fffdf6), var(--k-fff3dc));
  box-shadow:
    inset 0 0 0 4px #d39e36,
    inset 0 0 0 8px #9d261e,
    var(--shadow);
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 18px 14px;
  display: flex;
  position: relative;
}
.sl-marq {
  box-shadow:
    inset 0 0 0 3px #d39e36,
    0 6px 0 #652530,
    var(--shadow);
  background: linear-gradient(#32201a, #1a110e);
  border-radius: 7px;
  margin-top: -20px;
  padding: 10px 26px 8px;
  position: relative;
}
.sl-logo {
  font-family: var(--font-title);
  letter-spacing: 0.5px;
  color: #f1e2c3;
  text-shadow:
    0 0 10px #d39e36bf,
    0 3px #652530;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 900;
  display: flex;
}
.sl-r {
  background: var(--paper);
  color: #cc3227;
  width: 36px;
  height: 36px;
  text-shadow: none;
  border-radius: 50%;
  place-items: center;
  font-size: 26px;
  line-height: 1;
  display: grid;
  box-shadow: inset 0 0 0 3px #cc3227;
}
.sl-bulbs {
  pointer-events: none;
  justify-content: space-between;
  display: flex;
  position: absolute;
  inset: 4px 8px auto;
}
.sl-bulbs i {
  background: #e4c382;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1.1s step-end infinite slBulb;
  box-shadow: 0 0 6px 2px #daaf59cc;
}
.sl-bulbs i:nth-child(odd) {
  animation-delay: -0.55s;
}
@keyframes slBulb {
  50% {
    box-shadow: none;
    background: #6a3b20;
  }
}
.sl-cab.spinning .sl-bulbs i {
  animation-duration: 0.3s;
}
.sl-cab.win .sl-bulbs i {
  animation: 0.6s linear infinite slChase;
}
.sl-cab.win .sl-bulbs i:nth-child(4n + 1) {
  animation-delay: 0s;
}
.sl-cab.win .sl-bulbs i:nth-child(4n + 2) {
  animation-delay: -0.15s;
}
.sl-cab.win .sl-bulbs i:nth-child(4n + 3) {
  animation-delay: -0.3s;
}
.sl-cab.win .sl-bulbs i:nth-child(4n) {
  animation-delay: -0.45s;
}
@keyframes slChase {
  0%,
  24% {
    background: var(--paper);
    box-shadow: 0 0 10px 4px #d39e36;
  }
  25%,
  to {
    box-shadow: none;
    background: #6a3b20;
  }
}
.sl-cab.bad .sl-bulbs i {
  background: #df5e54;
  box-shadow: 0 0 6px 2px #d83e33cc;
}
.sl-cab.gengar .sl-bulbs i {
  background: #b097c7;
  box-shadow: 0 0 6px 2px #9c7bb8cc;
}
.sl-row {
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  display: flex;
}
.sl-window {
  box-shadow:
    inset 0 0 0 4px #d39e36,
    0 8px 0 #652530,
    var(--shadow);
  background: linear-gradient(#cc3227, #9d261e);
  border-radius: 7px;
  gap: 10px;
  padding: 12px;
  display: flex;
  position: relative;
}
.sl-reel {
  width: var(--sl);
  height: calc(var(--sl) * 3);
  background: linear-gradient(180deg, var(--k-d9d4e8), var(--paper) 22%, var(--paper) 78%, var(--k-d9d4e8));
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 14px 16px -8px #00000073,
    inset 0 -14px 16px -8px #00000073;
}
.sl-reel.stop {
  animation: 0.28s cubic-bezier(0.3, 1.8, 0.5, 1) slStop;
}
@keyframes slStop {
  30% {
    transform: translateY(5px);
  }
}
.sl-reel.tease {
  animation: 0.32s ease-in-out infinite alternate slTease;
  box-shadow:
    inset 0 14px 16px -8px #00000073,
    inset 0 -14px 16px -8px #00000073,
    0 0 0 3px #d39e36,
    0 0 18px 6px #d39e36d9;
}
@keyframes slTease {
  to {
    box-shadow:
      inset 0 14px 16px -8px #00000073,
      inset 0 -14px 16px -8px #00000073,
      0 0 0 3px var(--k-fff6c0),
      0 0 28px 10px #d39e36;
  }
}
.sl-strip {
  will-change: transform;
}
.sl-strip.blur .sl-cell > * {
  filter: blur(2.5px);
  transform: scaleY(1.15);
}
.sl-cell {
  height: var(--sl);
  justify-content: center;
  align-items: center;
  display: flex;
}
.sl-cell img {
  width: calc(var(--sl) * 0.76);
  height: calc(var(--sl) * 0.76);
  image-rendering: pixelated;
}
.sl-cell.hit > * {
  animation: 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) 3 alternate slHit;
}
@keyframes slHit {
  to {
    filter: drop-shadow(0 0 8px #d39e36) drop-shadow(0 0 3px #f5ebd6);
    transform: scale(1.18);
  }
}
.sl-cab.bad .sl-cell.hit > * {
  animation-name: slHitBad;
}
@keyframes slHitBad {
  to {
    filter: drop-shadow(0 0 8px #db4d43);
    transform: scale(1.14) rotate(-6deg);
  }
}
.sl-7 {
  font-family: var(--font-title);
  font-size: calc(var(--sl) * 0.72);
  color: #d83c31;
  -webkit-text-stroke: 3px #652530;
  text-shadow: 0 4px #652530;
  font-weight: 900;
  line-height: 1;
}
.sl-glass {
  pointer-events: none;
  background: linear-gradient(115deg, #f5ebd661 0%, #f5ebd600 28% 62%, #f5ebd629 70%, #f5ebd600 78%);
  border-radius: 4px;
  position: absolute;
  inset: 12px;
}
.sl-line {
  pointer-events: none;
  background: #d83e33b3;
  height: 3px;
  margin-top: -1px;
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
}
.sl-cab.win .sl-line {
  background: #d39e36;
  height: 4px;
  box-shadow: 0 0 10px 3px #d39e36e6;
}
.sl-arr {
  pointer-events: none;
  border: 9px solid #00000000;
  width: 0;
  height: 0;
  margin-top: -9px;
  position: absolute;
  top: 50%;
}
.sl-arr.l {
  border-left-color: #d39e36;
  left: -6px;
}
.sl-arr.r {
  border-right-color: #d39e36;
  right: -6px;
}
.sl-cab.win .sl-arr {
  animation: 0.35s ease-in-out infinite alternate slArr;
}
@keyframes slArr {
  to {
    filter: drop-shadow(0 0 6px #f5ebd6);
    transform: scale(1.3);
  }
}
.sl-cab.win .sl-window {
  animation: 0.3s 6 alternate slWin;
}
.sl-cab.bad .sl-window {
  animation: 0.25s 4 alternate slBad;
}
@keyframes slWin {
  to {
    box-shadow:
      inset 0 0 0 4px var(--k-fff6c0),
      0 8px 0 #652530,
      0 0 44px 12px #d39e36;
  }
}
@keyframes slBad {
  to {
    box-shadow:
      inset 0 0 0 4px var(--paper),
      0 8px 0 #652530,
      0 0 44px 12px #d83c31;
  }
}
.sl-cab.seven .sl-window {
  animation: 0.18s 14 alternate slJack;
}
@keyframes slJack {
  0% {
    filter: hue-rotate() brightness(1.1);
  }
  to {
    filter: hue-rotate(40deg) brightness(1.35);
    box-shadow:
      inset 0 0 0 4px var(--paper),
      0 8px 0 #652530,
      0 0 60px 20px #d39e36;
  }
}
.sl-cab.voltorb {
  animation: 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) 2 slShake;
}
@keyframes slShake {
  10%,
  90% {
    transform: translate(-2px);
  }
  20%,
  80% {
    transform: translate(4px);
  }
  30%,
  50%,
  70% {
    transform: translate(-7px) rotate(-0.6deg);
  }
  40%,
  60% {
    transform: translate(7px) rotate(0.6deg);
  }
}
.sl-window:after {
  content: "";
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(at 50% 60%, #724f92bf, #422d5559 60%, #00000000 80%);
  border-radius: 7px;
  position: absolute;
  inset: 0;
}
.sl-cab.gengar .sl-window:after {
  animation: 2.2s ease-out forwards slFog;
}
@keyframes slFog {
  15% {
    opacity: 1;
  }
  to {
    opacity: 0.35;
  }
}
.sl-lever {
  width: 30px;
  height: calc(var(--sl) * 2.4);
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0;
  position: relative;
}
.sl-lever:disabled {
  cursor: default;
}
.sl-stick {
  background: linear-gradient(90deg, #a39684, var(--k-f2f2f8) 45%, #a39684);
  transform-origin: bottom;
  border-radius: 4px;
  width: 8px;
  height: 100%;
  margin-left: -4px;
  position: absolute;
  bottom: 0;
  left: 50%;
  box-shadow: 0 2px #5d5346;
}
.sl-stick:after {
  content: "";
  background: #652530;
  border-radius: 6px;
  width: 22px;
  height: 14px;
  position: absolute;
  bottom: -6px;
  left: -7px;
  box-shadow: inset 0 0 0 2px #d39e36;
}
.sl-knob {
  background: radial-gradient(circle at 35% 30%, #eca19c, #cc3227 45%, #812019);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  position: absolute;
  top: -10px;
  left: 50%;
  box-shadow: 0 3px #422b22;
}
.sl-lever:not(:disabled):hover .sl-knob {
  filter: brightness(1.12);
}
.sl-lever.pull .sl-stick {
  animation: 0.55s cubic-bezier(0.3, 0.8, 0.4, 1) slPullStick;
}
.sl-lever.pull .sl-knob {
  animation: 0.55s cubic-bezier(0.3, 0.8, 0.4, 1) slPullKnob;
}
@keyframes slPullStick {
  35% {
    transform: scaleY(0.38);
  }
}
@keyframes slPullKnob {
  35% {
    transform: translateY(calc(var(--sl) * 1.5));
  }
}
.sl-msg {
  min-height: 30px;
  color: var(--ink);
  text-align: center;
  font-size: 22px;
  font-weight: 900;
}
.sl-msg.win {
  color: var(--green-t, var(--green-d));
  animation: 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) slPop;
}
.sl-msg.win.big {
  color: var(--yellow-d);
  font-size: 38px;
  font-family: var(--font-title);
  -webkit-text-stroke: 1px #652530;
  animation: 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) slBig;
}
@keyframes slPop {
  40% {
    transform: scale(1.12);
  }
}
@keyframes slBig {
  0% {
    transform: scale(0.2) rotate(-8deg);
  }
  60% {
    transform: scale(1.25) rotate(3deg);
  }
}
.sl-msg.tease {
  color: var(--yellow-d);
  animation: 0.32s ease-in-out infinite alternate slPulse;
}
@keyframes slPulse {
  to {
    transform: scale(1.08);
  }
}
.sl-msg.bad {
  color: var(--red-t, var(--red-d));
  animation: 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) slPop;
}
.sl-msg.miss {
  color: #928065;
}
.sl-led {
  color: #d39e36;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px #d39e3699;
  background: #1a110e;
  border-radius: 4px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 16px;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  box-shadow: inset 0 0 0 2px #5a242d;
}
.sl-led > span {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}
.sl-led .sl-ledhint {
  color: #bc959c;
  text-shadow: none;
  font-size: 12px;
  font-weight: 700;
}
.sl-pay {
  color: var(--ink);
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
  font-size: 13px;
  display: grid;
}
.sl-payrow {
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 2px 6px;
  transition: background 0.2s;
  display: flex;
}
.sl-payrow.bad {
  color: var(--red-t, var(--red-d));
}
.sl-payrow.off {
  opacity: 0.45;
}
.sl-payrow.on {
  color: #311f19;
  background: #eedcb7;
  animation: 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) slPop;
  box-shadow: inset 0 0 0 2px #d39e36;
}
.sl-payrow.bad.on {
  background: var(--k-ffe0dc);
  box-shadow: inset 0 0 0 2px #e26f66;
}
.sl-mini {
  gap: 1px;
  display: inline-flex;
}
.sl-mini img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
.sl-mini .sl-7 {
  -webkit-text-stroke: 1px #652530;
  text-shadow: 0 1px #652530;
  text-align: center;
  width: 22px;
  font-size: 20px;
}
.sl-fx {
  pointer-events: none;
  z-index: 2;
  position: absolute;
  inset: 0;
  overflow: visible;
}
.sl-p {
  image-rendering: pixelated;
  position: absolute;
}
.sl-confetti {
  border-radius: 2px;
  width: 8px;
  height: 12px;
}
.btn.sl-no {
  animation: 0.35s slNo;
}
@keyframes slNo {
  25% {
    transform: translate(-6px);
  }
  75% {
    transform: translate(6px);
  }
}
.sl-cab.calm .sl-bulbs i,
.sl-cab.calm .sl-window,
.sl-cab.calm .sl-arr,
.sl-cab.calm .sl-reel.tease,
.sl-cab.calm .sl-cell.hit > *,
.sl-cab.calm .sl-msg.tease {
  animation: none !important;
}
.sl-cab.calm .sl-reel.tease {
  box-shadow:
    inset 0 14px 16px -8px #00000073,
    inset 0 -14px 16px -8px #00000073,
    0 0 0 3px #d39e36;
}
@media (max-width: 520px) {
  .sl-cab {
    --sl: 68px;
    padding: 0 10px 12px;
  }
  .sl-window {
    gap: 6px;
    padding: 9px;
  }
  .sl-glass {
    inset: 9px;
  }
  .sl-logo {
    font-size: 20px;
  }
  .sl-pay {
    grid-template-columns: 1fr;
    font-size: 12px;
  }
  .sl-led .sl-ledhint {
    display: none;
  }
}
@media (max-height: 640px) {
  .sl-cab {
    --sl: 66px;
  }
  .sl-pay {
    gap: 2px 14px;
    font-size: 12px;
  }
}
@media (max-height: 520px) {
  .sl-cab {
    zoom: 0.78;
  }
  .modal:has(.sl-cab) {
    gap: 8px;
  }
}
.fs-btn {
  justify-content: center;
  width: 40px;
  padding: 0;
}
.card .affects {
  background: color-mix(in srgb, var(--rc, var(--blue)) 14%, var(--paper));
  color: var(--ink);
  border-radius: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}
.card .affects.none {
  background: var(--k-f1f1f5);
  color: var(--ink-2);
}
.pz-vit .affects,
.pz-detail .affects,
.tt-card .affects {
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
}
.pz-vit .affects {
  margin-top: 2px;
}
.pz-vit .affects:not(.none),
.tt-card .affects:not(.none) {
  color: var(--blue-t, var(--blue-d, #386b91));
}
.pz-detail .affects {
  background: var(--k-eef4ff);
  color: var(--ink);
  border-radius: 4px;
  padding: 4px 10px;
}
.pz-detail .affects.none {
  background: var(--k-f1f1f5);
  color: var(--ink-2);
}
.tt-head img.pix {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  flex: none;
}
.card .cap {
  color: var(--ink-2);
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  display: block;
}
.dx-nb {
  color: #fef8ec;
  text-align: left;
  background: var(--stripes), linear-gradient(120deg, #d23328, #9f2e26);
  box-shadow:
    0 3px 0 #6c2833,
    var(--shadow-sm);
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 5px 16px 5px 8px;
  transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.5, 1);
  display: flex;
}
.dx-nb:hover {
  transform: translateY(-3px) rotate(-1deg);
}
.dx-nb img {
  filter: drop-shadow(0 2px #00000040);
}
.dx-nb span {
  flex-direction: column;
  line-height: 1.05;
  display: flex;
}
.dx-nb small {
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.9;
  font-size: 10.5px;
  font-weight: 900;
}
.dx-nb b {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
}
.dx-rs-done {
  text-align: left;
  width: 100%;
  color: var(--ink);
  background: linear-gradient(100deg, var(--k-e4fbe9), var(--paper));
  box-shadow: inset 0 0 0 2px var(--green);
  border: none;
  border-radius: 5px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: flex;
}
.dx-rs-done span {
  flex-direction: column;
  gap: 1px;
  display: flex;
}
.dx-rs-done b {
  color: var(--green-t, var(--green-d));
  font-size: 14px;
  font-weight: 900;
}
.dx-rs-done small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}
.dx-rs-done:hover {
  box-shadow: inset 0 0 0 3px var(--green);
}
.lk-note {
  color: var(--ink-2);
  text-align: center;
  grid-column: 1/-1;
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 800;
}
.rs-main {
  flex: 1;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  display: grid;
}
.rs-side {
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 14px;
  animation: 0.35s both popIn;
  display: flex;
}
.rs-side > .tag {
  margin: 6px 0 2px;
}
.rs-cover {
  --p: 0;
  color: #fef8ec;
  background: var(--stripes), linear-gradient(135deg, #da453b, #9f2e26);
  border-radius: 6px;
  align-items: center;
  gap: 14px;
  padding: 14px;
  display: flex;
  box-shadow:
    inset 6px 0 #6c2833,
    0 4px #6c2833;
}
.rs-cover h3 {
  font-family: var(--font-title);
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 900;
}
.rs-cover p {
  opacity: 0.95;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.rs-cover-ring {
  width: 92px;
  height: 92px;
  color: var(--ink-on);
  background: radial-gradient(circle, var(--paper) 58%, transparent 59%),
    conic-gradient(#d7a747 calc(var(--p) * 360deg), #f5ebd64d 0);
  border-radius: 50%;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}
.rs-cover-ring b {
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}
.rs-cover-ring small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.rs-ms {
  background: var(--paper-2);
  border-radius: 6px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  display: flex;
}
.rs-ms > div {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.2;
  display: flex;
}
.rs-ms b {
  font-size: 14px;
  font-weight: 900;
}
.rs-ms small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}
.rs-ms:not(.ok) .av {
  filter: grayscale(0.9) brightness(0.85) opacity(0.6);
}
.rs-ms.ok {
  background: linear-gradient(100deg, var(--k-fff6d8), var(--paper));
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.rs-ms.next {
  box-shadow: inset 0 0 0 2px #d6cfc5;
}
.rs-ms .dx-ms-bar i {
  background: linear-gradient(90deg, #da453b, #d27d4c);
}
.rs-body {
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 14px 16px;
  animation: 0.35s 50ms both popIn;
  display: flex;
}
.rs-body > .seg {
  align-self: flex-start;
}
.rs-frames {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  display: grid;
}
.rs-frame {
  --c: var(--blue);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, var(--paper)), var(--paper) 70%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 35%, var(--paper));
  color: var(--ink);
  animation: tileIn 0.35s var(--d, 0s) backwards;
  border: none;
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px 10px;
  transition:
    transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.14s;
  display: flex;
  position: relative;
}
.rs-frame:hover {
  transform: translateY(-4px);
}
.rs-frame:not(.ok) .av {
  filter: grayscale(0.85) brightness(0.9) opacity(0.55);
}
.rs-frame:hover:not(.ok) .av {
  filter: grayscale(0.3) opacity(0.85);
}
.rs-frame.ok {
  box-shadow:
    inset 0 0 0 2px var(--c),
    0 4px 14px color-mix(in srgb, var(--c) 45%, transparent);
}
.rs-frame.on {
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 6px var(--yellow),
    var(--shadow-sm);
  transform: translateY(-3px);
}
.rs-frame > .av {
  margin: 4px 0 8px;
}
.rs-frame-n {
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
}
.rs-pips {
  gap: 4px;
  display: flex;
}
.rs-pips i {
  background: var(--line);
  border-radius: 3px;
  width: 14px;
  height: 6px;
}
.rs-pips i.on {
  background: var(--c);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 60%, #000000) inset;
}
.rs-badge {
  background: var(--green);
  width: 24px;
  height: 24px;
  box-shadow: 0 2px 0 var(--green-d);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: 6px;
  right: 6px;
}
.rs-detail {
  --c: var(--blue);
  background: color-mix(in srgb, var(--c) 10%, var(--paper));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 30%, var(--paper));
  border-radius: 6px;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  display: flex;
}
.rs-detail-head {
  align-items: center;
  gap: 16px;
  display: flex;
}
.rs-detail-head small {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.rs-detail.ok .rs-detail-head small {
  color: var(--green-t, var(--green-d));
}
.rs-detail-head h3 {
  font-family: var(--font-title);
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}
.rs-detail-head p {
  color: var(--ink-2);
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 700;
}
.rs-detail:not(.ok) .rs-detail-head .av {
  filter: grayscale(0.85) opacity(0.6);
}
.rs-hint {
  color: var(--ink-2);
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}
.rs-fams {
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  display: grid;
}
.rs-fam {
  --p: 0;
  --c: var(--blue);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  animation: tileIn 0.3s var(--d, 0s) backwards;
  border: none;
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px 6px;
  transition: transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1);
  display: flex;
  position: relative;
}
.rs-fam:hover {
  transform: translateY(-3px) scale(1.04);
}
.rs-ring {
  background: radial-gradient(circle, var(--paper-2) 62%, transparent 63%),
    conic-gradient(var(--c) calc(var(--p) * 360deg), var(--line) 0);
  border-radius: 50%;
  place-items: center;
  width: 60px;
  height: 60px;
  display: grid;
}
.rs-ring img {
  object-fit: cover;
  width: 50px;
  height: 50px;
  image-rendering: pixelated;
  border-radius: 50%;
}
.rs-fam small {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 4px;
  font-size: 11.5px;
  font-weight: 900;
  overflow: hidden;
}
.rs-fam.unk .rs-ring img {
  object-fit: contain;
  filter: brightness(0) opacity(0.22);
  border-radius: 0;
  width: 44px;
  height: 44px;
}
.rs-fam.unk small {
  color: var(--ink-2);
}
.rs-fam.ok {
  background: linear-gradient(180deg, var(--k-fff6d8), var(--paper));
  box-shadow:
    inset 0 0 0 2px var(--yellow),
    var(--shadow-sm);
}
.rs-fam.ok .rs-ring {
  background: radial-gradient(circle, var(--k-fffbe8) 62%, transparent 63%), var(--yellow-d);
}
.rs-tick {
  background: var(--green);
  width: 20px;
  height: 20px;
  box-shadow: 0 2px 0 var(--green-d);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: 4px;
  right: 6px;
}
.rs-tick img {
  width: 14px !important;
  height: 14px !important;
}
.sm-looks {
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 4px 2px;
  display: flex;
}
.sm-look {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 900;
  animation: 0.5s 0.3s both popIn;
  display: flex;
}
@media (max-width: 900px) {
  .rs-main {
    flex: none;
    grid-template-columns: 1fr;
  }
  .rs-frames {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  }
}
.dx-nb {
  position: relative;
}
.dx-nb-new {
  animation: 1.2s ease-in-out infinite badgePulse;
}
.rs-ms {
  position: relative;
}
.rs-new {
  z-index: 2;
  background: var(--red);
  color: #fef8ec;
  font-family: var(--font-title);
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--red-d);
  pointer-events: none;
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 900;
  animation: 1.2s ease-in-out infinite rsNew;
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translate(-50%) rotate(-4deg);
}
@keyframes rsNew {
  50% {
    scale: 1.12;
  }
}
.rs-ms .rs-new {
  left: auto;
  right: 34px;
  transform: rotate(-4deg);
}
.rs-pill-new {
  background: var(--red);
  color: #fef8ec;
  border-radius: 4px;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 900;
  display: inline-grid;
}
.bd-title {
  max-width: 100%;
  color: var(--yellow-d);
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 900;
  display: inline-flex;
  overflow: hidden;
}
.bd-title .uiicon,
.bd-title img {
  flex: none;
  width: 12px;
  height: 12px;
}
.pf-title {
  background: var(--k-fff4cc);
  width: -moz-fit-content;
  width: fit-content;
  color: var(--gold-t, #7e5d1c);
  border-radius: 4px;
  gap: 5px;
  margin: 6px 0;
  padding: 4px 12px 4px 8px;
  font-size: 13px;
  display: flex;
  box-shadow: inset 0 0 0 2px #d39e36;
}
.pf-title .uiicon,
.pf-title img {
  width: 16px;
  height: 16px;
}
.pf-since {
  font-size: 13px;
  font-weight: 800;
  display: block;
}
.lk-prev {
  flex-direction: column;
  gap: 6px;
}
.lk-title {
  font-size: 12px;
}
.lk-title-cell {
  background: var(--paper-2);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
  border: none;
  border-radius: 5px;
  grid-column: 1/-1;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: flex;
}
.lk-title-cell > span:last-child {
  flex-direction: column;
  line-height: 1.15;
  display: flex;
}
.lk-title-cell b {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 900;
}
.lk-title-cell small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.lk-title-cell.on {
  background: var(--k-fff3c4);
  box-shadow: inset 0 0 0 3px var(--yellow);
}
.lk-title-pic {
  background: var(--paper);
  border-radius: 4px;
  flex: none;
  width: 36px;
  height: 36px;
  overflow: hidden;
}
.lk-title-pic img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.sm-note.mon em {
  color: var(--purple-t, var(--purple-d));
  font-size: 11.5px;
}
.bigmap {
  width: min(1200px, 100%);
}
.bm-body {
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  min-height: 0;
  padding: 4px;
  display: flex;
  overflow: auto;
}
.bm-cv {
  box-shadow:
    var(--shadow-sm),
    0 0 0 4px var(--paper),
    0 0 0 7px var(--red);
  touch-action: none;
  cursor: grab;
  background: #452c23;
  border-radius: 6px;
  flex: none;
  display: block;
}
.bm-wrap {
  flex: none;
  position: relative;
}
.bm-zoom {
  flex-direction: column;
  gap: 6px;
  display: flex;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.bm-zb {
  background: var(--paper);
  min-width: 44px;
  height: 44px;
  color: var(--ink);
  font-family: var(--font-title);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.bm-zb:hover {
  filter: brightness(0.95);
}
.bm-zb:active {
  transform: translateY(1px);
}
.bm-side {
  flex-direction: column;
  flex: 260px;
  gap: 8px;
  min-width: 220px;
  max-width: 360px;
  padding-right: 4px;
  display: flex;
  overflow-y: auto;
}
.bm-grid {
  grid-template-columns: 1fr;
}
.bm-note {
  color: var(--ink-2);
  margin: 4px 2px 0;
  font-size: 12px;
  font-weight: 700;
}
@media (max-aspect-ratio: 11/10) {
  .bm-body {
    flex-direction: column;
    align-items: center;
  }
  .bm-side {
    width: 100%;
    max-width: none;
  }
}
.leftpill {
  background: var(--w92);
  max-width: 230px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  border-radius: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: flex-end;
  align-items: center;
  gap: 4px 8px;
  margin: 6px 12px 0 0;
  padding: 5px 10px;
  font-weight: 900;
  display: flex;
}
.leftpill small {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
}
.leftpill .lp-i {
  align-items: center;
  gap: 3px;
  display: inline-flex;
}
.leftpill b {
  font-size: 14px;
}
html.touch .minimap {
  pointer-events: auto;
  cursor: pointer;
}
.mp-open {
  align-self: flex-start;
  gap: 8px;
  margin-top: 8px;
}
.ls-cta .mp-open {
  flex: none;
  align-self: center;
  margin: 0;
  padding: 10px 16px;
  font-size: 14px;
}
.mp-ov {
  z-index: 900;
  -webkit-backdrop-filter: blur(5px);
  background: #3a251e8c;
  place-items: center;
  padding: 14px;
  animation: 0.18s fadeIn;
  display: grid;
  position: fixed;
  inset: 0;
}
.mp-panel {
  background: var(--paper-2);
  width: min(960px, 100%);
  min-height: 0;
  max-height: 100%;
  box-shadow:
    0 0 0 3px var(--paper),
    var(--shadow);
  border-radius: 8px;
  flex-direction: column;
  animation: 0.25s ease-out popIn;
  display: flex;
  overflow: hidden;
}
.mp-head {
  color: #fef8ec;
  text-shadow: 0 1px 2px #0000004d;
  background: var(--stripes),
    linear-gradient(
      100deg,
      var(--mc, var(--slate, var(--ink-2))),
      color-mix(in srgb, var(--mc, var(--slate, var(--ink-2))) 55%, #402b24)
    );
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  display: flex;
}
.mp-head > div {
  flex-direction: column;
  min-width: 0;
  display: flex;
}
.mp-head b {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 900;
}
.mp-head small {
  opacity: 0.9;
  font-size: 12px;
  font-weight: 800;
}
.mp-head .btn {
  text-shadow: none;
  flex: none;
}
.mp-panel > .mp-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.mp-body {
  flex-direction: column;
  gap: 14px;
  padding: 12px 16px 16px;
  display: flex;
}
.mp-sec {
  background: var(--paper);
  border-radius: 6px;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  display: flex;
  box-shadow:
    0 2px #3a251e0f,
    0 4px 14px #3a251e14;
}
.mp-hint {
  color: var(--ink-2);
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.mp-none {
  color: var(--ink-2);
  margin: 4px 0;
  font-size: 13px;
  font-weight: 800;
}
.mp-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
  display: grid;
}
.mp-move {
  --c: var(--blue);
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 14%, var(--paper)), var(--paper) 80%);
  min-width: 0;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 28%, var(--paper));
  border-radius: 5px;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  display: flex;
}
.mp-move.off {
  opacity: 0.55;
  filter: saturate(0.6);
}
.mp-move .typeicon {
  flex: none;
  margin-top: 1px;
}
.mp-tx {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  display: flex;
}
.mp-top {
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  display: flex;
}
.mp-top b {
  min-width: 0;
  font-family: var(--font-title);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  overflow: hidden;
}
.mp-tag {
  background: var(--slate, var(--ink-2));
  color: #fef8ec;
  font-family: var(--font-title);
  border-radius: 4px;
  flex: none;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 900;
}
.mp-tag.first {
  background: var(--green);
}
.mp-tag.lock {
  background: #938166;
}
.mp-move small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.mp-desc {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
}
.mp-from {
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-top: 3px;
  display: flex;
}
.mp-from i {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-2);
  margin-right: 4px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.mp-from img {
  background: var(--paper);
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  border-radius: 50%;
}
.mp-who {
  background: color-mix(in srgb, var(--c) 14%, var(--paper));
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 2px;
  display: inline-flex;
}
.mp-who small {
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}
.mp-type {
  --c: var(--blue);
  background: color-mix(in srgb, var(--c) 10%, var(--paper));
  border-radius: 4px;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  display: flex;
}
.mp-type-h {
  align-items: center;
  gap: 6px;
  display: flex;
}
.mp-type-h b {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 900;
}
.mp-type-h small {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
  border-radius: 4px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 900;
}
.mp-chips {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}
.mp-chips span {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, var(--paper));
  cursor: help;
  border-radius: 4px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 800;
}
.pz-st.mp-pause > .mp-body {
  background: 0 0;
  flex: 1;
  min-height: 0;
  padding: 4px 2px 8px;
  overflow-y: auto;
}
.pz-st.mp-pause > .fi-pause {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  flex: 1;
  min-height: 0;
  padding: 4px 2px 8px;
  overflow-y: auto;
}
.pz-st.mp-pause > .fi-pause > * {
  flex: none;
}
.mp-closed {
  border: 2px dashed var(--line);
  color: var(--ink-2);
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}
.mp-slots {
  background: var(--k-fff3d6);
  color: var(--gold-t, #715419);
  border-radius: 5px;
  margin: 0;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
}
@media (max-width: 700px), (max-height: 480px) {
  .mp-ov {
    padding: 6px;
  }
  .mp-grid {
    grid-template-columns: 1fr;
  }
  .mp-head {
    padding: 8px 12px;
  }
  .mp-head b {
    font-size: 16px;
  }
  .mp-body {
    gap: 10px;
    padding: 8px 10px 12px;
  }
  .mp-desc {
    -webkit-line-clamp: 4;
  }
}
@media (max-height: 480px) and (min-width: 560px) {
  .mp-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.ls-random {
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 13px;
  display: inline-flex;
}
.pf-build {
  background: var(--blue);
  color: #fef8ec;
  font-family: var(--font-title);
  box-shadow: 0 2px 0 var(--blue-d, #3a6d95);
  border: none;
  border-radius: 4px;
  margin-left: auto;
  padding: 2px 11px;
  font-size: 11px;
  font-weight: 900;
}
.pf-build:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.pf-mk,
.pf-mt {
  flex-wrap: wrap;
}
.bv-head {
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  display: flex;
}
.bv-head small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}
.bv-mon {
  background: var(--paper);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  display: grid;
  box-shadow: 0 0 0 3px #f5ebd699;
}
.bv-mon img {
  width: 46px;
  height: 46px;
  image-rendering: pixelated;
}
.bv-share {
  background: #3a251e1a;
  border-radius: 4px;
  height: 7px;
  margin: 3px 0 1px;
  overflow: hidden;
}
.bv-share i {
  background: var(--c, var(--blue));
  border-radius: 4px;
  height: 100%;
  display: block;
}
.bv-items {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
  display: grid;
}
.bv-item {
  --rc: var(--r0);
  background: var(--paper-2);
  box-shadow: inset 0 0 0 2px var(--rc);
  cursor: help;
  border-radius: 4px;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  display: flex;
  position: relative;
}
.bv-item img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  flex: none;
}
.bv-item span {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
}
.bv-item b {
  background: var(--ink-bg);
  color: #fef8ec;
  font-family: var(--font-title);
  border-radius: 4px;
  flex: none;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 900;
}
.bv-vits {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  display: grid;
}
.bv-vit {
  background: var(--paper-2);
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  display: flex;
}
.bv-vit img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  flex: none;
}
.bv-vit b {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 900;
  display: block;
}
.bv-vit small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.bv-pas {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.bv-stats {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 4px 12px;
  display: grid;
}
.bv-stats > div {
  border-bottom: 1px dashed var(--line);
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}
.bv-stats span {
  color: var(--ink-2);
}
.bv-stats b {
  font-family: var(--font-title);
  font-weight: 900;
}
@media (max-width: 700px), (max-height: 480px) {
  .bv-items {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  .bv-mon {
    width: 40px;
    height: 40px;
  }
  .bv-mon img {
    width: 36px;
    height: 36px;
  }
}
.pz-guide {
  align-self: flex-start;
  margin-top: 6px;
}
.pz-guides {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}
@container (width<=420px) {
  .ls-roster-head .ls-count {
    display: none;
  }
  .ls-roster-head .ls-random {
    margin-right: 0;
  }
}
.compass.mkpin .cp-d {
  top: 22px;
}
.compass.mktag .cp-d {
  top: -8px;
  transform: translate(-50%, -100%);
}
.mk-dot {
  box-sizing: border-box;
  background: #d39e36;
  border: 3px solid #301f18;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: block;
  position: relative;
}
.mk-dot:after {
  content: "";
  background: var(--paper);
  position: absolute;
  inset: 6px;
  transform: rotate(45deg) scale(0.8);
}
.compass.mkpin .mapbadge {
  box-shadow:
    0 0 0 3px #d39e36,
    0 0 0 5px #301f18;
}
.bm-peek {
  z-index: 30;
  pointer-events: none;
  background: #22161261;
  place-items: center;
  display: grid;
  position: fixed;
  inset: 0;
}
.bm-peek .bm-cv {
  opacity: 0.94;
}
.ult.ready .ult-core {
  will-change: transform;
  backface-visibility: hidden;
}
.ult {
  contain: layout style;
}
.ms2-step .ms2-prize {
  background: var(--k-f4ecff);
  color: var(--purple-t, #7d56a0);
  white-space: nowrap;
  border-radius: 4px;
  align-items: center;
  gap: 1px;
  padding: 0 5px 0 2px;
  font-size: 10.5px;
  font-weight: 900;
  display: inline-flex;
  position: absolute;
  top: 31px;
  right: -14px;
}
.ms2-step.on .ms2-prize {
  background: var(--k-fff3c4);
  color: var(--gold-t, #715419);
}
.ms2-track {
  margin-bottom: 34px !important;
}
@media (min-width: 981px) and (min-height: 600px) and (max-height: 760px) {
  .ms2-step .ms2-prize {
    top: 28px;
  }
}
.pz-guide .pz-gn {
  background: var(--ink-bg);
  color: #fef8ec;
  border-radius: 4px;
  margin-left: 6px;
  padding: 0 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
.al .al-zones {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 10px 0;
  display: grid;
}
.al .al-zone {
  background: var(--paper-2);
  border-radius: 5px;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  display: flex;
}
.al .al-zone .tag {
  align-self: flex-start;
  margin-bottom: 2px;
}
.al .al-row {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  display: flex;
}
.al .al-row:last-child {
  border-bottom: none;
}
.al .al-row b {
  font-family: var(--font-title);
  color: var(--green-t, var(--green-d));
  font-size: 14px;
  font-weight: 900;
}
.al .al-row.bad b {
  color: var(--red-t, var(--red-d));
}
.al .al-row.roar b {
  color: #a15528;
  font-size: 13px;
}
.al .al-row small {
  text-align: right;
  max-width: 50%;
  color: var(--ink-2);
  flex: none;
  font-size: 11px;
  font-weight: 800;
}
.al .al-total {
  max-width: 420px;
}
.pz-live .tag {
  cursor: help;
}
.ht-weather em.ht-roar {
  color: #a15528;
}
html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --st: env(safe-area-inset-top, 0px);
}
html.touch body {
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  position: fixed;
  inset: 0;
}
html.touch,
html.touch * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html.touch input,
html.touch .nw-body {
  -webkit-user-select: text;
  user-select: text;
}
html.touch img {
  -webkit-user-drag: none;
}
html.touch canvas#game {
  touch-action: none;
}
html.touch .scroll,
html.touch [class*="scroll"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html.touch .keys,
html.touch .card .key {
  display: none !important;
}
@media (hover: none) {
  .btn:hover,
  .card:hover {
    filter: none;
    transform: none;
  }
}
.rotate-hint {
  z-index: 100000;
  text-align: center;
  color: #fef8ec;
  font-family: var(--font-title);
  background: var(--stripes), radial-gradient(ellipse at 50% 40%, #563b6e, #2e1e18 70%);
  place-items: center;
  display: none;
  position: fixed;
  inset: 0;
}
.rotate-hint > div {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px;
  display: flex;
}
.rotate-hint img {
  width: 120px;
  height: 120px;
  image-rendering: pixelated;
  animation: 2.4s ease-in-out infinite rotHint;
}
.rotate-hint b {
  font-size: 26px;
  font-weight: 900;
}
.rotate-hint span {
  opacity: 0.8;
  font-size: 16px;
}
@keyframes rotHint {
  0%,
  25% {
    transform: rotate(0);
  }
  50%,
  75% {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(0);
  }
}
@media (orientation: portrait) and (max-aspect-ratio: 5/6) {
  html.touch .rotate-hint {
    display: grid;
  }
}
.tc {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  display: none;
  position: absolute;
  inset: 0;
}
#ui .tc.on {
  pointer-events: auto;
  display: block;
}
.tc-btn {
  touch-action: none;
  zoom: var(--tcs, 1);
  background: var(--w90);
  border-radius: 50%;
  place-items: center;
  transition:
    transform 80ms,
    filter 80ms;
  display: grid;
  position: absolute;
  box-shadow:
    0 4px #3a251e40,
    0 6px 16px #3a251e4d;
}
.tc-btn.on {
  filter: brightness(0.92);
  transform: scale(0.88) translateY(2px);
}
.tc-btn img {
  width: 60%;
  height: 60%;
  image-rendering: pixelated;
  pointer-events: none;
}
.tc-jump {
  right: calc(22px + var(--sr));
  bottom: calc(22px + var(--sb));
  background: var(--stripes), radial-gradient(circle at 50% 30%, #e58078, var(--red) 60%, var(--red-d));
  width: 100px;
  height: 100px;
  box-shadow:
    0 0 0 4px var(--paper),
    0 5px 0 4px #3a251e40,
    0 8px 18px #3a251e59;
}
.tc-dash {
  right: calc(140px + var(--sr));
  bottom: calc(16px + var(--sb));
  background: var(--stripes), radial-gradient(circle at 50% 30%, #8cb4d2, var(--blue) 65%, var(--blue-d));
  width: 74px;
  height: 74px;
  box-shadow:
    0 0 0 4px var(--paper),
    0 4px 0 4px #3a251e38,
    0 6px 14px #3a251e4d;
}
.tc-lock {
  right: calc(136px + var(--sr));
  bottom: calc(110px + var(--sb));
  width: 58px;
  height: 58px;
}
.tc.locking .tc-lock {
  background: var(--k-ffe4e6);
  box-shadow:
    0 0 0 3px var(--red),
    0 6px 16px #3a251e4d;
}
.tc-ultb.ult {
  right: calc(32px + var(--sr));
  bottom: calc(140px + var(--sb));
  width: 82px;
  height: 82px;
  box-shadow: none;
  background: 0 0;
  margin: 0;
}
.tc-ultb .ult-core img {
  width: 38px;
  height: 38px;
}
.tc-ultb .ult-nm {
  display: none;
}
.tc-ultb.ready .ult-nm {
  font-size: 10px;
  display: block;
}
.tc-act {
  right: calc(128px + var(--sr));
  bottom: calc(180px + var(--sb));
  height: 50px;
  font-family: var(--font-title);
  color: var(--ink);
  white-space: nowrap;
  box-shadow:
    0 0 0 3px var(--red),
    0 6px 16px #3a251e4d;
  border-radius: 4px;
  align-items: center;
  gap: 10px;
  padding: 0 22px 0 8px;
  font-size: 17px;
  font-weight: 900;
  animation: 0.2s popIn;
  display: flex;
}
.tc-act > i {
  background: radial-gradient(circle at 35% 30%, #e58078, var(--red) 55%, #91231c);
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
  box-shadow: inset 0 0 0 2px #402b24;
}
.tc-act > i > b {
  background: #d4a23d;
  border-radius: 2px;
  width: 14px;
  height: 14px;
  font-size: 0;
  box-shadow: 0 0 0 3px #402b24;
}
.tc-act > i > img {
  width: 32px;
  height: 32px;
}
.tc-sm {
  width: 50px;
  height: 50px;
  top: calc(12px + var(--st));
  right: calc(12px + var(--sr));
}
.tc-fs {
  right: calc(70px + var(--sr));
}
.tc-aim {
  top: calc(70px + var(--st));
  border-radius: 6px;
  flex-direction: column;
  gap: 0;
  height: 62px;
  padding-top: 4px;
  display: flex;
}
.tc-aim img {
  width: 30px;
  height: 30px;
}
.tc-aim span {
  font-family: var(--font-title);
  color: var(--blue-t, var(--blue-d));
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.tc-aim.manual span {
  color: var(--red-t, var(--red-d));
}
.tc-stick {
  left: calc(120px + var(--sl));
  bottom: calc(110px + var(--sb));
  width: calc(128px * var(--tcs, 1));
  height: calc(128px * var(--tcs, 1));
  margin: calc(-64px * var(--tcs, 1)) 0 0 calc(-64px * var(--tcs, 1));
  opacity: 0.55;
  pointer-events: none;
  background: radial-gradient(circle, #f5ebd614 55%, #f5ebd647);
  border-radius: 50%;
  transition: opacity 0.15s;
  position: absolute;
  transform: translateY(50%);
  box-shadow: inset 0 0 0 3px #f5ebd68c;
}
.tc-stick.on {
  opacity: 1;
  transform: none;
}
.tc-stick.on.fixed {
  transform: translateY(50%);
}
.tc-stick > i {
  width: calc(58px * var(--tcs, 1));
  height: calc(58px * var(--tcs, 1));
  margin: calc(-29px * var(--tcs, 1));
  background: radial-gradient(circle at 50% 35%, var(--paper), var(--paper-3));
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow:
    0 0 0 3px #f5ebd699,
    0 4px 10px #3a251e59;
}
html.touch .prompt {
  display: none !important;
}
html.touch .hud-bl {
  left: 50%;
  bottom: calc(10px + var(--sb));
  scale: none;
  transform: translateX(-50%) scale(var(--hs, 1));
  transform-origin: bottom;
  align-items: center;
}
html.touch .hud-bl .ult {
  display: none;
}
html.touch .hud-bl .slot {
  border-radius: 5px;
  width: 54px;
  height: 54px;
}
html.touch .hud-bl .slot.mini {
  border-radius: 4px;
  width: 38px;
  height: 38px;
}
html.touch .hud-tl {
  left: calc(14px + var(--sl));
}
html.touch .hud-tr {
  right: calc(74px + var(--sr));
}
html.touch .hud-tr .minimap {
  width: calc(140px * var(--mm, 1));
  height: calc(140px * var(--mm, 1));
}
html.touch .streak {
  right: auto;
  left: calc(18px + var(--sl));
  text-align: left;
  scale: var(--hs, 1);
  transform-origin: 0;
  top: 38%;
}
html.touch .streak i u {
  transform-origin: 0;
}
html.touch .hud-br {
  display: none !important;
}
html.touch .hud-tr .hud-br {
  flex-wrap: wrap;
  gap: 4px;
  max-width: 340px;
  max-height: 112px;
  padding: 2px 4px 4px;
  position: static;
  overflow: hidden;
}
html.touch .hud-tr .itm {
  border-radius: 4px;
  width: 32px;
  height: 32px;
}
html.touch .hud-tr .itm img {
  width: 24px;
  height: 24px;
}
html.touch .hud-tr .itm b {
  padding: 0 4px;
  font-size: 9px;
  bottom: -3px;
  right: -3px;
}
@media (max-height: 560px) {
  .logo > .logo-ver {
    padding: 2px 10px 2px 4px;
    font-size: 12px;
    left: calc(100% + 8px);
  }
  .logo > .logo-ver b {
    font-size: 10px;
  }
  .hud-tl {
    transform: scale(0.72);
  }
  .hud-party {
    transform-origin: 0 0;
    top: 96px;
    transform: scale(0.8);
  }
  .hud-top {
    top: 8px;
  }
  .hud-tr {
    transform-origin: 100% 0;
    gap: 6px;
    top: 8px;
    transform: scale(0.85);
  }
  .bossbar {
    transform: translateX(-50%) scale(calc(0.62 * var(--hs, 1)));
    transform-origin: top;
    opacity: 0.88;
  }
  .minibars {
    transform: translateX(-50%) scale(calc(0.6 * var(--hs, 1)));
    transform-origin: top;
    opacity: 0.85;
    gap: 4px;
  }
  .minibars > :nth-child(n + 3) {
    display: none;
  }
  .toasts {
    transform: translateX(-50%) scale(calc(0.78 * var(--hs, 1)));
    top: 112px;
  }
  .hud-bl {
    transform-origin: 0 100%;
    transform: scale(0.9);
  }
  html.touch .hud-bl {
    transform: translateX(-50%) scale(calc(0.9 * var(--hs, 1)));
    transform-origin: bottom;
  }
  .modal {
    gap: 10px;
    padding: 10px 14px;
  }
  .modal h1 {
    padding: 3px 26px;
    font-size: 28px;
  }
  .modal h1.small {
    font-size: 21px;
  }
  .modal .help {
    font-size: 13px !important;
  }
  .cards {
    gap: 10px;
  }
  .card {
    border-radius: 6px;
    width: 212px;
    min-height: 0;
  }
  .card .top {
    height: 78px;
  }
  .card .top img {
    width: 48px;
    height: 48px;
  }
  .card .top .typeicon {
    width: 50px;
    height: 50px;
  }
  .card .bd {
    gap: 4px;
    padding: 10px 13px;
  }
  .card h3 {
    font-size: 18px;
  }
  .card ul {
    font-size: 14px;
  }
  .card p {
    font-size: 13px;
  }
  .shop-modal .cards {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .shop-modal .card {
    width: 190px;
  }
  .shop-modal .card .top {
    height: 64px;
  }
  .shop-modal .card .top img {
    width: 40px;
    height: 40px;
    margin-top: 12px;
  }
  .shop-modal .card .bd {
    padding: 8px 10px;
  }
  .shop-modal .card h3 {
    font-size: 16px;
  }
  .shop-modal .card ul,
  .shop-modal .card p {
    font-size: 12px;
  }
}
@media (max-height: 560px) and (min-width: 760px) {
  .sm-modal {
    padding: 8px 12px;
  }
  .sm {
    border-radius: 6px;
    gap: 8px;
    padding: 8px;
    overflow: hidden;
  }
  .sm-hero {
    border-radius: 6px;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 8px 12px 8px 8px;
  }
  .sm-av {
    width: 58px;
    height: 58px;
    box-shadow:
      0 0 0 3px var(--yellow),
      var(--shadow-sm);
  }
  .sm-av span {
    font-size: 10px;
    bottom: -6px;
  }
  .sm-hero-tx small {
    font-size: 9.5px;
  }
  .sm-hero-tx h2 {
    font-size: 24px;
  }
  .sm-hero-tx p {
    font-size: 12px;
  }
  .pz-bars {
    gap: 2px;
    max-width: 300px;
  }
  .sm-kpis,
  .pz .pz-kpis {
    grid-template-columns: repeat(3, minmax(70px, auto));
    gap: 4px;
    width: auto;
  }
  .sm-kpi {
    border-radius: 4px;
    padding: 2px 10px;
  }
  .sm-kpi b {
    font-size: 16px;
  }
  .sm-kpi span {
    font-size: 8.5px;
  }
  .sm-body {
    flex: 1;
    gap: 8px;
    display: grid;
  }
  .sm-card > header {
    padding: 5px 12px;
  }
  .sm-card > header b {
    font-size: 15px;
  }
  .sm-cbody {
    gap: 8px;
    padding: 8px;
    overflow: hidden auto;
  }
  .sm-foot {
    justify-content: flex-end;
    gap: 8px;
  }
  .sm-foot .help {
    display: none;
  }
  .sm-foot .btn {
    padding: 8px 18px;
    font-size: 16px;
  }
  .sm-foot .btn.big {
    padding: 9px 26px;
    font-size: 19px;
  }
}
@media (max-height: 560px) {
  .screen {
    padding: calc(10px + var(--st)) calc(16px + var(--sr)) calc(10px + var(--sb)) calc(16px + var(--sl));
  }
  .screen.sec {
    padding-inline: max(calc(16px + var(--sl)), calc((100vw - var(--sec-w)) / 2));
  }
  .scr-head {
    gap: 10px;
    margin-bottom: 8px;
  }
  .scr-title {
    padding: 4px 22px 5px 16px;
  }
  .scr-title h1 {
    font-size: 22px;
  }
  .scr-title {
    flex: none;
  }
  .scr-title span {
    white-space: nowrap;
    font-size: 12px;
  }
  .back-btn {
    padding-block: 5px;
  }
  .rg-regions {
    grid-auto-columns: minmax(140px, 1fr);
    margin-bottom: 6px;
  }
  .rg-item {
    gap: 6px;
    padding: 4px 8px 4px 4px;
  }
  .rg-sw {
    width: 36px;
    height: 36px;
  }
  .rg-tx b {
    font-size: 14px;
  }
  .rg-window {
    scrollbar-width: thin;
    gap: 8px;
    padding: 10px;
    overflow: hidden auto;
  }
  .rg-name h1 {
    font-size: 34px;
  }
  .rg-window .rg-boss,
  .rg-window .rg-partner,
  .rg-about {
    zoom: 0.8;
  }
  .rg-side-head {
    padding: 8px 14px;
  }
  .rg-side-body {
    gap: 10px;
    padding: 10px 12px;
    overflow: hidden auto;
  }
  .rg-side .rg-go {
    padding: 8px 12px 10px;
  }
  .rg-side .rg-go .btn {
    padding: 9px 16px;
  }
  .st-wrap {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 14px;
  }
  .st-tabs {
    flex-direction: column;
    gap: 6px;
    padding: 0 10px 0 0;
    overflow: visible;
  }
  .st-tab {
    border-radius: 5px;
    flex: none;
    gap: 8px;
    padding: 5px 12px 5px 6px;
  }
  .st-tab.on:after {
    display: block;
  }
  .st-tab .st-tx small {
    display: none;
  }
  .st-tab .st-tx b {
    font-size: 15px;
  }
  .st-tab .st-ic {
    width: 32px;
    height: 32px;
  }
  .st-tab .st-ic img {
    width: 24px;
    height: 24px;
  }
  .st-tab.on {
    transform: translate(8px);
  }
  .st-head {
    gap: 10px;
    padding: 7px 14px;
  }
  .st-head .st-tx b {
    font-size: 19px;
  }
  .st-head .st-tx small {
    font-size: 11px;
  }
  .st-ic {
    width: 36px;
    height: 36px;
  }
  .st-ic img {
    width: 26px;
    height: 26px;
  }
  .st-body {
    gap: 8px;
    padding: 10px 12px 12px;
  }
  .st-row {
    border-radius: 4px;
    gap: 2px 10px;
    min-height: 0;
    padding: 6px 12px;
  }
  .st-range {
    margin: 4px 0;
  }
  .pz-st {
    padding: 10px;
  }
  .tk-main {
    zoom: 0.8;
    gap: 14px;
  }
  .tk-head {
    padding: 10px 14px;
  }
  .tk-head-tx h2 {
    font-size: 28px;
  }
  .auth-hero {
    left: calc(24px + var(--sl));
    align-items: flex-start;
    top: 50%;
    right: auto;
    translate: 0 -50%;
  }
  .auth-hero .logo.hero .logo-word {
    font-size: clamp(44px, 6.5vw, 64px);
  }
  .auth-side {
    left: auto;
    right: calc(28px + var(--sr));
    width: min(440px, 52vw);
    top: 50%;
    translate: 0 -50%;
  }
  .auth-card {
    gap: 9px;
    padding: 14px 18px;
  }
  .mm.auth .mm-foot {
    right: auto;
    left: calc(16px + var(--sl));
    align-items: flex-start;
    width: min(380px, 42vw);
  }
  .mm.auth .mm-foot .mm-legal {
    text-align: left;
  }
}
@media (max-height: 560px) and (max-width: 980px) {
  .mm-top {
    zoom: 0.85;
  }
  .mm-top .tr-tx small {
    display: none;
  }
}
@media (max-height: 560px) {
  .nw-wrap {
    grid-template-rows: none;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 10px;
  }
  .screen.sp {
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 18px;
  }
  .sp-row {
    grid-template-columns: repeat(3, minmax(0, 260px));
    gap: 12px;
    max-width: none;
  }
  .sp-show {
    height: 52vh;
    min-height: 0;
  }
  .sp-show .ls-num {
    font-size: 52px;
  }
  .sp-show .ls-plate h1 {
    font-size: 22px;
  }
  .sp-info {
    display: none;
  }
}
@media (max-height: 560px), (max-width: 1100px), (pointer: coarse) {
  .ls-hero {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    overflow: hidden auto;
  }
  .ls-body {
    flex: none;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .ls-card,
  .ls-card-body {
    overflow: visible;
  }
  .ls-cta {
    z-index: 4;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    box-shadow: 0 -6px 16px #3a251e1a;
  }
}
@media (max-width: 900px) and (min-height: 561px) {
  .ls-hero {
    overscroll-behavior: auto;
    overflow: clip;
  }
}
@media (max-height: 560px) {
  .ls-main {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 40%);
    gap: 10px;
  }
  .ls-top {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 10px 12px;
  }
  .ls-top-stats {
    grid-column: 1/-1;
    gap: 10px;
  }
  .ls-id {
    gap: 5px;
  }
  .ls-id h1 {
    font-size: 26px;
  }
  .ls-body {
    gap: 10px;
    padding: 10px 12px;
  }
  .ls-cta {
    padding: 8px 12px;
  }
  .ls-cta .ls-rec {
    display: none;
  }
  .ls-cta-tx {
    white-space: normal;
    font-size: 12px;
    line-height: 1.25;
  }
  .ls-hero .ls-go {
    flex: 1;
    min-width: 0;
    padding: 9px 18px;
    font-size: 18px;
  }
  .ls-roster {
    gap: 6px;
    padding: 8px 10px;
  }
  .ls-roster .seg .pill {
    padding: 5px 12px;
    font-size: 13px;
  }
  .ls-foot {
    display: none;
  }
  .ls-grid {
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 6px;
    padding: 8px 2px 4px;
  }
  .ls-grid .ls-name {
    font-size: 10px;
  }
  .ls-tile.on:before {
    display: none;
  }
}
@media (max-height: 560px), (max-width: 1300px), (pointer: coarse) {
  .rg-regions {
    display: flex;
  }
  .rg-item {
    flex: 1 0 170px;
  }
  .rg-item.soon {
    flex: none;
    padding: 6px;
  }
  .rg-item.soon .rg-tx {
    display: none;
  }
}
@media (max-height: 560px) {
  .rg-main {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 36%);
    gap: 10px;
  }
  .rg-window {
    border-radius: 7px;
  }
  .rg-window .rg-partner {
    gap: 6px;
    padding: 4px 6px 4px 4px;
  }
  .rg-pt {
    width: 44px;
    height: 44px;
  }
  .rg-side-head {
    padding: 7px 14px;
  }
  .rg-side-body {
    gap: 10px;
  }
  .rg-sec {
    gap: 5px;
  }
  .rg-mode {
    gap: 6px;
    padding: 6px 8px;
  }
  .rg-mode small {
    display: none;
  }
  .rg-tiers {
    flex-direction: row;
    gap: 5px;
  }
  .rg-tier {
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    padding: 6px 9px;
  }
  .rg-tier:hover,
  .rg-tier.on {
    transform: none;
  }
  .rg-tier b {
    font-size: 15px;
  }
  .rg-tier small {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 9.5px;
    overflow: hidden;
  }
  .rg-side .rg-go {
    padding: 8px 12px 10px;
  }
  .rg-side .rg-go .btn {
    padding: 9px 16px;
    font-size: 19px;
  }
  .dx-main {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
    gap: 10px;
  }
  .dx-left {
    gap: 6px;
    padding: 8px 10px;
  }
  .dx-bar {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .dx-search {
    min-width: 0;
    padding: 6px 12px;
    font-size: 14px;
  }
  .dx-bar .seg .pill {
    padding: 5px 10px;
    font-size: 13px;
  }
  .dx-count {
    display: none;
  }
  .dx-left > .dx-types {
    scrollbar-width: none;
    flex-wrap: nowrap;
    flex: none;
    overflow-x: auto;
  }
  .dx-left > .dx-types .typeicon {
    width: 24px;
    height: 24px;
  }
  .dx-grid {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
  }
  .dx-right {
    gap: 8px;
  }
  .dx-show {
    height: 54%;
  }
  .dx-info {
    gap: 8px;
    padding: 10px 12px;
    overflow-y: auto;
  }
  .dx-entry {
    padding: 8px 10px;
    font-size: 13px;
  }
  .scr-head {
    flex-wrap: nowrap;
  }
  .scr-head .hd-stat {
    border-radius: 4px;
    padding: 4px 12px;
  }
  .scr-head .hd-bar {
    display: none;
  }
}
@media (max-height: 560px) and (max-width: 1000px) {
  .screen.dx .scr-title span {
    display: none;
  }
  .scr-head .hd-stat small {
    font-size: 9px;
  }
}
@media (max-height: 560px) and (max-width: 1100px) {
  .screen.lab .scr-title span,
  .lab-mode .lm-tx em {
    display: none;
  }
  .lab-mode {
    gap: 6px;
    padding-right: 10px;
  }
  .screen.lab .scr-head .currency {
    zoom: 0.85;
  }
}
@media (max-height: 560px) and (max-width: 900px) {
  .screen.ls,
  .screen.rg,
  .screen.dx,
  .screen.bd {
    overflow: hidden;
  }
  .ls-main,
  .rg-main,
  .dx-main {
    flex: 1;
    min-height: 0;
  }
  .ls-main {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 40%);
  }
  .rg-main {
    grid-template-columns: minmax(0, 1fr) minmax(270px, 40%);
  }
  .dx-main {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 36%);
  }
  .ls-show.ls-stagecard {
    min-height: 0;
  }
  .ls-grid {
    max-height: none;
  }
  .ls-top {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .rg-window {
    min-height: 0;
  }
  .dx-left {
    height: auto;
  }
}
.pz-tabs {
  display: none;
}
@media (max-height: 560px), (max-width: 1100px) {
  .sm-modal:has(> .pz) {
    padding: calc(8px + var(--st)) calc(12px + var(--sr)) calc(8px + var(--sb)) calc(12px + var(--sl));
  }
  .sm.pz {
    grid-template: "hero tabs" "hero body" minmax(0, 1fr) "foot body" / minmax(230px, 28%) minmax(0, 1fr);
    gap: 8px 12px;
    width: min(1100px, 100%);
    height: 100%;
    max-height: 100%;
    padding: 10px;
    display: grid;
    overflow: hidden;
  }
  .pz > .pz-hero {
    grid-area: hero;
    grid-template-columns: 58px minmax(0, 1fr);
    align-content: start;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 10px;
    display: grid;
    overflow: hidden;
  }
  .pz > .pz-hero .sm-av {
    width: 58px;
    height: 58px;
  }
  .pz > .pz-hero .sm-av span {
    font-size: 10px;
    bottom: -6px;
  }
  .pz > .pz-hero .sm-hero-tx small {
    letter-spacing: 0.8px;
    justify-items: start;
    gap: 3px;
    font-size: 9px;
    display: grid;
  }
  .pz > .pz-hero .pz-name {
    gap: 4px;
    margin: 2px 0 0;
  }
  .pz > .pz-hero .pz-name h2 {
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    margin: 0;
    font-size: 22px;
    overflow: hidden;
  }
  .pz > .pz-hero .pz-name .chip {
    padding: 0 7px;
    font-size: 9.5px;
  }
  .pz > .pz-hero .pz-bars {
    grid-column: 1/-1;
    max-width: none;
    margin-top: 2px;
  }
  .pz > .pz-hero .sm-hero-tx {
    display: contents;
  }
  .pz > .pz-hero .sm-hero-tx > small,
  .pz > .pz-hero .sm-hero-tx > .pz-name {
    grid-column: 2;
  }
  .pz > .pz-hero .sm-hero-tx > small {
    grid-row: 1;
    align-self: end;
  }
  .pz > .pz-hero .sm-hero-tx > .pz-name {
    grid-row: 2;
    align-self: start;
  }
  .pz > .pz-hero .sm-av {
    grid-row: 1/3;
  }
  .pz-bar {
    grid-template-columns: 30px 1fr auto;
    gap: 6px;
    font-size: 11px;
  }
  .pz-bar b {
    font-size: 11px;
  }
  .pz > .pz-hero .pz-kpis {
    grid-column: 1/-1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    width: auto;
  }
  .pz > .pz-hero .sm-kpi {
    grid-column: span 2;
  }
  .pz > .pz-hero .sm-kpi:nth-child(n + 4) {
    grid-column: span 3;
  }
  .pz > .pz-hero .sm-kpi {
    border-radius: 4px;
    min-width: 0;
    padding: 3px 4px;
  }
  .pz > .pz-hero .sm-kpi b {
    font-size: 15px;
  }
  .pz > .pz-hero .sm-kpi span {
    white-space: nowrap;
    font-size: 8px;
  }
  .pz > .sm-foot {
    grid-area: foot;
    padding: 0;
  }
  .pz > .sm-foot .help {
    display: none;
  }
  .pz > .sm-foot .actions {
    flex: 1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    display: grid;
  }
  .pz > .sm-foot .actions .btn {
    white-space: nowrap;
    grid-column: span 2;
    justify-content: center;
    min-width: 0;
    padding: 7px 6px;
    font-size: 13px;
    overflow: hidden;
  }
  .pz > .sm-foot .actions .btn.big {
    order: -1;
    grid-column: 1/-1;
    padding: 9px 12px;
    font-size: 19px;
  }
  .pz > .sm-foot .actions > :nth-child(-n + 2) {
    order: 1;
    grid-column: span 3;
  }
  .pz > .pz-tabs {
    background: var(--paper-2);
    border-radius: 6px;
    grid-area: tabs;
    gap: 6px;
    padding: 4px;
    display: flex;
  }
  .pz-tab {
    font-family: var(--font-title);
    color: var(--ink-2);
    cursor: pointer;
    background: 0 0;
    border: none;
    border-radius: 4px;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    font-size: 15px;
    font-weight: 900;
    display: flex;
  }
  .pz-tab i {
    background: #3a251e1a;
    border-radius: 4px;
    min-width: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-style: normal;
  }
  .pz-tab.on {
    color: #fef8ec;
    background: var(--stripes), var(--blue);
    box-shadow: 0 3px 0 var(--blue-d);
  }
  .pz[data-tab="items"] .pz-tab.on {
    background: var(--stripes), var(--orange);
    box-shadow: 0 3px 0 var(--yellow-d);
  }
  .pz[data-tab="stats"] .pz-tab.on {
    background: var(--stripes), var(--purple);
    box-shadow: 0 3px #674783;
  }
  .pz-tab.on i {
    background: #f5ebd64d;
  }
  .pz > .pz-body {
    grid-area: body;
    min-height: 0;
    display: block;
  }
  .pz[data-tab="moves"] :is(.pz-centre, .pz-right),
  .pz[data-tab="items"] :is(.pz-left, .pz-right),
  .pz[data-tab="stats"] :is(.pz-left, .pz-centre) {
    display: none;
  }
  .pz > .pz-body > .sm-card {
    height: 100%;
    animation: none;
  }
  .pz > .pz-body > .sm-card > header {
    display: none;
  }
  .pz > .pz-body .sm-cbody {
    overscroll-behavior: contain;
    padding: 10px;
    overflow: hidden auto;
  }
  .pz .pz-moves {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
    display: grid;
  }
  .pz-centre .sm-cbody {
    flex-flow: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: flex;
  }
  .pz-centre .sm-cbody > * {
    flex: 100%;
    min-width: 0;
  }
  .pz-centre .sm-cbody > .pz-items {
    flex: 240px;
    align-content: start;
  }
  .pz-centre .sm-cbody > .pz-items + .pz-detail {
    flex: 220px;
    min-height: 0;
    position: sticky;
    top: 0;
  }
  .pz-centre .sm-cbody > .pz-vits,
  .pz-centre .sm-cbody > .pz-group {
    flex-basis: 100%;
  }
  .pz .pz-statcols {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
@media (max-width: 1100px) and (min-height: 561px) {
  .pz > .pz-hero {
    grid-template-columns: 84px minmax(0, 1fr);
    align-content: center;
    gap: 14px 12px;
    padding: 16px 14px;
  }
  .pz > .pz-hero .sm-av {
    width: 84px;
    height: 84px;
  }
  .pz > .pz-hero .pz-name h2 {
    font-size: 28px;
  }
  .pz > .pz-hero .sm-kpi b {
    font-size: 19px;
  }
  .pz > .pz-hero .sm-kpi span {
    font-size: 9px;
  }
  .pz-bar,
  .pz-bar b {
    font-size: 12px;
  }
  .pz-track {
    height: 12px;
  }
  .pz > .sm-foot .actions .btn {
    padding: 10px 8px;
    font-size: 15px;
  }
}
html.touch .ls-move {
  cursor: pointer;
  gap: 10px;
  padding: 10px 12px;
}
html.touch .ls-move .typeicon {
  width: 40px !important;
  height: 40px !important;
}
html.touch .ls-move-top b {
  font-size: 16px;
}
html.touch .ls-gate {
  font-size: 12px;
}
html.touch .ls-move small {
  font-size: 13px;
}
html.touch .ls-move-desc {
  -webkit-line-clamp: unset;
  font-size: 14px;
  line-height: 1.35;
  display: block;
}
html.touch .ls-move-chips span {
  padding: 1px 8px;
  font-size: 12.5px;
}
html.touch .ls-move-chips i {
  font-size: 11px;
}
html.touch .ls-passive b {
  font-size: 19px;
}
html.touch .ls-passive p {
  font-size: 14.5px;
  line-height: 1.45;
}
html.touch .ls-mods span {
  font-size: 12.5px;
}
html.touch .ls-mu small {
  font-size: 11px;
}
html.touch .tt {
  max-width: min(420px, 72vw);
  font-size: 15px;
}
html.touch .tt-head b {
  font-size: 17px;
}
html.touch .tt-head small {
  font-size: 12.5px;
}
html.touch .tt-note {
  font-size: 13px;
}
html.touch .tt-facts,
html.touch .tt-stats,
html.touch .tt-cond {
  font-size: 14px;
}
html.touch .tt-sub {
  font-size: 11px;
}
.currency.dust,
@media (max-width: 760px) and (max-height: 560px) {
  .screen.lab .scr-head {
    flex-wrap: nowrap;
  }
  .screen.lab .lab-hub {
    flex: 1 1 0;
    order: 0;
    width: auto;
    min-width: 0;
  }
  .screen.lab .lab-mode {
    min-width: 0;
  }
  .screen.lab .scr-title {
    flex: none;
  }
}
@media (max-height: 560px) {
  .screen.lab,
  .screen.qs {
    overflow: hidden;
  }
  .lab-wrap,
  .q-wrap,
  .q-page > :last-child {
    overscroll-behavior: contain;
    touch-action: pan-y;
    min-height: 0;
  }
  .dx-show .ls-stage {
    top: 2%;
    bottom: 42%;
  }
  .dx-show .ls-plate {
    padding: 5px 18px 8px 12px;
    bottom: 10px;
    left: 10px;
  }
  .dx-show .ls-plate h1 {
    font-size: 20px;
  }
  .dx-show .ls-num {
    font-size: 46px;
    top: 2px;
    right: 12px;
  }
}
.tc .tc-sm {
  zoom: 1;
}
.bossbar:not(.mini),
.minibars {
  opacity: var(--bo, 1);
}
.hud-party {
  top: calc(26px + 122px * var(--hs, 1));
}
@media (max-width: 900px) {
  .hud-party {
    top: calc(22px + 96px * var(--hs, 1));
  }
}
.season-modal > .season-card:not(.fb-card) {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}
.lk-grid {
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.ls-wins {
  z-index: 2;
  pointer-events: none;
  gap: 2px;
  display: flex;
  position: absolute;
  top: 5px;
  left: 5px;
}
.ls-wins i {
  background: var(--c);
  width: 9px;
  height: 9px;
  box-shadow:
    0 0 0 1.5px var(--paper),
    0 1px 3px #0000004d;
  border-radius: 50%;
}
.ls-wonrow {
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  display: flex;
}
.ls-wonrow small {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-right: 2px;
  font-size: 10px;
  font-weight: 900;
}
.ls-won {
  background: var(--paper-2);
  color: var(--ink-2);
  opacity: 0.7;
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}
.ls-won.on {
  background: var(--c);
  color: #fef8ec;
  opacity: 1;
}
.ls-seg-star {
  vertical-align: -2px;
  margin-right: 4px;
  display: inline-block;
  position: static;
}
.wlabel.shop {
  color: var(--gold-t, #715419);
  border: 3px solid #d39e36;
  padding: 4px 18px 4px 5px;
  font-size: 14px;
  animation: 1s ease-in-out infinite alternate shopPulse;
  box-shadow:
    0 0 0 3px #d39e3673,
    0 0 18px 4px #d39e36d9;
}
@keyframes shopPulse {
  to {
    box-shadow:
      0 0 0 5px #d39e3699,
      0 0 28px 8px #d39e36;
  }
}
html.touch .screen {
  padding-left: max(24px, calc(var(--sl) + 12px));
  padding-right: max(24px, calc(var(--sr) + 12px));
  padding-bottom: max(20px, calc(var(--sb) + 8px));
}
html.touch .modal {
  padding-left: max(20px, calc(var(--sl) + 8px));
  padding-right: max(20px, calc(var(--sr) + 8px));
}
html.touch .season-modal {
  padding: 0 var(--sr) var(--sb) var(--sl);
}
@media (max-height: 560px) {
  .cap-reveal {
    top: calc(var(--hb, 64px) + 6px);
    left: var(--hc, 50%);
    max-width: calc(var(--hw, 100vw) - 8px);
    gap: 6px;
    animation-duration: 2.6s;
  }
  .cap-reveal:has(.cap-note) {
    animation-duration: 4.4s;
  }
  .cap-reveal .evo-burst,
  .cap-reveal .evo-types {
    display: none;
  }
  .cap-reveal .evo-portrait {
    width: 42px;
    height: 42px;
    box-shadow: var(--shadow-sm);
    border-width: 3px;
  }
  .cap-stamp {
    width: 20px;
    height: 20px;
    bottom: -4px;
    right: -5px;
  }
  .cap-stamp img {
    width: 15px;
    height: 15px;
  }
  .cap-reveal .evo-card {
    border-top-width: 3px;
    border-radius: 4px;
    min-width: 0;
    max-width: none;
    padding: 3px 10px 4px;
  }
  .cap-reveal .evo-card p {
    letter-spacing: 0.5px;
    font-size: 9px;
  }
  .evo-card h1,
  .cap-reveal .evo-card h1 {
    margin: 0 0 1px;
    font-size: 14px;
  }
  .cap-sub {
    font-size: 10px;
    line-height: 1.15;
  }
  .cap-reveal.friend .cap-sub {
    display: none;
  }
  .cap-note {
    border-radius: 8px;
    margin-top: 3px;
    padding: 2px 7px;
    font-size: 10px;
  }
  .cap-plate {
    border-bottom-width: 3px;
    gap: 8px;
    padding: 5px 16px 5px 5px;
    bottom: calc(10vh + 6px);
  }
  .cap-pt {
    border-width: 3px;
    width: 40px;
    height: 40px;
  }
  .cap-info p {
    letter-spacing: 1px;
    font-size: 9px;
  }
  .cap-info h2 {
    margin-bottom: 2px;
    font-size: 17px;
  }
  .cap-info h2 .cap-tag {
    padding: 1px 6px;
    font-size: 9px;
  }
  .cap-pips i {
    width: 18px;
    height: 18px;
  }
  .cap-pips img {
    width: 16px;
    height: 16px;
  }
  .banner {
    top: calc(var(--hb, 64px) + 52px);
    animation-duration: 2.6s;
  }
  .banner.long {
    animation-duration: 4s;
  }
  .banner h1 {
    border-radius: 9px;
    padding: 3px 16px;
    font-size: 17px;
  }
  .banner p {
    max-width: 70vw;
    margin-top: 3px;
    padding: 2px 10px;
    font-size: 10.5px;
  }
  .bn-pt {
    width: 40px;
    height: 40px;
    box-shadow: var(--shadow-sm);
    border-width: 3px;
  }
  .banner.has-pt h1 {
    margin-left: -20px;
    padding-left: 26px;
    padding-right: 14px;
  }
  .banner.has-pt p {
    margin-left: 12px;
  }
  .bossbar:not(.mini),
  .minibars {
    transform: translateX(-50%) scale(calc(0.5 * var(--hs, 1)));
  }
  .hud-party {
    top: calc(18px + 88px * var(--hs, 1));
  }
  .ally-tx small {
    display: none;
  }
  .shop-modal .cards {
    -webkit-overflow-scrolling: touch;
    justify-content: safe center;
    max-width: 100%;
    overflow-x: auto;
  }
  .shop-modal .card {
    flex: 0 190px;
    width: auto;
    min-width: 128px;
  }
  .season-card.lk-card {
    gap: 6px;
    width: min(780px, 100% - 24px);
    padding: 10px 14px;
  }
  .lk-head {
    gap: 12px;
  }
  .lk-prev {
    width: 84px;
    height: 84px;
  }
  .lk-prev .av {
    --s: 64px !important;
  }
  .lk-head h2 {
    font-size: 18px;
  }
  .lk-head p {
    display: none;
  }
  .lk-grid {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    max-height: max(130px, 100dvh - 210px);
  }
  .lk-cell {
    gap: 6px;
    padding: 12px 2px 6px;
  }
  .lk-cell .av {
    --s: 52px !important;
  }
}
.mm-top {
  pointer-events: none;
}
.mm-top > * {
  pointer-events: auto;
}
.mm-left > .logo {
  z-index: 3;
  position: relative;
}
@media (max-width: 860px) {
  .mm-left > .logo.hero {
    margin-bottom: 22px;
  }
  .mm-left > .logo.hero > .logo-ver,
  .mm-left > .logo.hero > button.logo-ver:hover {
    top: 100%;
    left: 8px;
    transform: translateY(-2px) rotate(-3deg);
  }
  .mm-left > .logo.hero > button.logo-ver:hover {
    transform: translateY(-2px) rotate(-3deg) scale(1.06);
  }
}
@media (max-width: 900px) {
  .rs-main {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    grid-auto-rows: max-content;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
  }
  .rs-side,
  .rs-body {
    overflow: visible;
  }
}
html.calm-fx .fade {
  background: #261914;
  transition-duration: 0.6s;
}
html.calm-fx .evo-white {
  background: #261914;
  animation-name: evoWhite, evoWhiteOut;
}
html.calm-fx .ls-flash,
html.calm-fx .rg-flash {
  background: #261914;
}
html.calm-fx .shiny-flash,
html.calm-fx .revive-flash,
html.calm-fx .card.offer:after,
html.calm-fx .lab-card.bought:after {
  opacity: 0;
  animation: none;
}
html.calm-fx .flash.on {
  opacity: 0.5;
}
.sl-led .sl-fast {
  color: #bc959c;
  cursor: pointer;
  background: #37241d;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 2px #5a242d;
}
.sl-led .sl-fast.on {
  color: #37241d;
  box-shadow: none;
  background: #d39e36;
}
.pz-bans {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}
.pz-ban {
  background: var(--k-f1f1f5);
  color: var(--ink-2);
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 3px 12px 3px 6px;
  font-size: 12.5px;
  font-weight: 800;
  display: inline-flex;
}
.pz-ban img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
.pz-ban .uiicon,
.pz-ban svg {
  width: 20px;
  height: 20px;
}
.release-ally {
  z-index: 6;
  pointer-events: auto;
  background: var(--w96);
  box-shadow: var(--shadow);
  color: var(--ink);
  cursor: pointer;
  gap: 8px;
  padding: 6px 16px 6px 7px;
  font-size: 14px;
  font-weight: 800;
  position: absolute;
  bottom: calc(24% - 46px);
  left: 50%;
  transform: translate(-50%);
}
@supports not (justify-content: safe center) {
  .modal {
    justify-content: flex-start;
  }
  .modal > :first-child {
    margin-top: auto;
  }
  .modal > :last-child {
    margin-bottom: auto;
  }
}
.card,
.card .bd,
.card h3,
.card p,
.card li,
.card .affects,
.pz-detail,
.pz-detail p {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
  min-width: 0;
}
.card h3 {
  word-break: break-word;
}
html.touch .under {
  width: 100px;
}
html.touch .under .hpbar {
  height: 14px;
}
html.touch .under .hpbar > b {
  font-size: 10px;
}
html.touch .bm-zoom {
  flex-direction: row;
  gap: 4px;
  bottom: 6px;
  right: 6px;
}
html.touch .bm-zb {
  opacity: 0.8;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  font-size: 16px;
}
html.touch,
html.touch body {
  overscroll-behavior: none;
}
.modal > h1,
.modal > .cards,
.modal > .actions,
.modal > .help,
.modal > .row {
  flex-shrink: 0;
}
html.touch .modal {
  padding-top: max(10px, calc(var(--st) + 6px));
  padding-bottom: max(36px, calc(var(--sb) + 14px));
  -webkit-overflow-scrolling: touch;
}
html.touch .modal:has(> .pz) {
  padding-top: calc(8px + var(--st));
  padding-bottom: calc(8px + var(--sb));
}
.card .top {
  background-color: var(--rc);
}
.card.pact .top {
  background-color: #402b24;
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .card .affects {
    background: var(--k-eef2fb);
  }
  .card .affects.none {
    background: var(--k-f1f1f5);
  }
  .card.fusion .top {
    background: var(--t1);
  }
}
.mp-panel,
.mv-panel,
.gl-panel,
.pk-panel,
.mp-move,
.mp-top b,
.pk-move,
.mv-sheet,
.tt {
  color: var(--ink);
}
.ls-move-top b,
.mp-top b,
.pz-mh b,
.pk-move .mp-top b {
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
}
.fu-pair {
  flex-wrap: wrap;
}
.fu-chip {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
  text-overflow: ellipsis;
  flex: none;
  max-width: 100%;
  overflow: hidden;
}
@media (max-width: 980px) {
  .screen.cf {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
}
.sp-confirm .center {
  justify-content: center;
  display: flex;
}
.sp-confirm .center img {
  background: var(--paper-2);
  width: 112px;
  height: 112px;
  image-rendering: pixelated;
  box-shadow: 0 0 0 4px var(--yellow);
  border-radius: 50%;
}
.ls-roster-head .ls-random {
  margin-right: 0;
}
.ls-search {
  border-width: 2px;
  flex: 120px;
  width: auto;
  min-width: 0;
  max-width: 220px;
  padding: 5px 12px;
  font-size: 13px;
}
.ls-roster-head .ls-count {
  margin-left: auto;
}
@media (max-height: 560px) and (max-width: 900px) {
  .mm:not(.auth) .mm-top .trainer {
    gap: 5px;
    padding: 4px 6px 4px 4px;
  }
  .mm:not(.auth) .mm-top .tr-cur {
    gap: 3px;
    padding: 0 4px 0 6px;
  }
  .mm:not(.auth) .mm-top .tr-cur .currency {
    padding: 2px 8px 2px 3px;
    font-size: 13px;
  }
  .mm:not(.auth) .mm-top .tr-cur .currency img {
    width: 20px;
    height: 20px;
  }
  .mm:not(.auth) .mm-top .trainer .btn.small {
    padding: 4px 9px;
    font-size: 11px;
  }
  html .mm:not(.auth) .mm-top {
    zoom: 0.8;
  }
  .mm .mm-left .logo.hero .logo-word {
    -webkit-text-stroke-width: 2.5px;
    font-size: 36px;
  }
}
@media (min-width: 1101px) and (min-height: 561px) and (max-height: 860px) {
  .ls-hero {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    overflow: hidden auto;
  }
  .ls-body {
    flex: none;
    overflow: visible;
  }
  .ls-card,
  .ls-card-body {
    overflow: visible;
  }
  .ls-cta {
    z-index: 4;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    box-shadow: 0 -6px 16px #3a251e1a;
  }
}
.ls-roster-head .ls-seg {
  flex: 100%;
  max-width: 100%;
}
.ls-roster-head .ls-seg .pill {
  white-space: nowrap;
  flex: auto;
  padding-inline: 8px;
}
.ls-roster-head .ls-seg {
  border-radius: 8px;
  flex-wrap: wrap;
}
.ls-roster .ls-roster-head .ls-seg .pill {
  padding: 4px 10px;
  font-size: 12.5px;
}
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.mm:not(.auth) {
  --mm-w: min(520px, calc(100vw - 2 * var(--mm-gutter)));
}
.mm-left {
  left: var(--mm-gutter);
  width: var(--mm-w);
  z-index: 1;
  flex-direction: column;
  gap: 18px;
  display: flex;
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
}
.mm-left .logo.hero .logo-word {
  font-size: clamp(48px, min(6vw, 10vh), 88px);
}
.mm-left > .logo.hero {
  margin: -26px 0 8px;
}
.mm-nav {
  z-index: 4;
  flex-direction: column;
  gap: 12px;
  display: flex;
  position: relative;
}
.mm-modes,
.mm-today,
.mm-tiles,
.mm-small {
  gap: 10px;
  display: flex;
}
.mm-modes {
  height: clamp(100px, 14vh, 124px);
}
.mm-today {
  min-height: 72px;
}
.mm-today > .mm-item {
  flex: 1 1 0;
  min-width: 0;
}
.mm-today > .event {
  flex-grow: 1.45;
}
.mm-tiles {
  gap: 8px;
}
.mm-small {
  align-items: center;
  gap: 8px;
}
.mm-item {
  --c: var(--blue);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  box-shadow:
    0 4px 0 #3a251e33,
    var(--shadow-sm);
  animation: mmIn 0.5s var(--d, 0s) cubic-bezier(0.2, 1.3, 0.4, 1) backwards;
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 12px;
  transition:
    transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.16s,
    filter 0.16s;
  display: flex;
  position: relative;
  transform: skew(-6deg);
}
.mm-item > * {
  transform: skew(6deg);
}
.mm-item:before {
  content: "";
  background: var(--c);
  border-radius: 6px 0 0 6px;
  width: 7px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.mm-item.focus {
  z-index: 1;
  filter: brightness(1.03);
  box-shadow:
    0 0 0 3px var(--c),
    0 7px 0 color-mix(in srgb, var(--c) 55%, black),
    var(--shadow);
  transform: skew(-6deg) translateY(-4px) scale(1.03);
}
.mm-item:active {
  transform: skew(-6deg) translateY(-1px) scale(0.97);
}
.mm-item.focus:after {
  content: "";
  border: 10px solid #00000000;
  border-top: 13px solid var(--paper);
  filter: drop-shadow(0 2px 1px #00000073);
  border-bottom: 0;
  margin-left: -10px;
  animation: 0.45s ease-in-out infinite alternate mmCursor;
  position: absolute;
  top: -22px;
  left: 50%;
}
.mm-ic {
  background: color-mix(in srgb, var(--c) 16%, var(--paper));
  border-radius: 5px;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
}
.mm-ic img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}
.mm-item.focus .mm-ic img {
  animation: 1.4s ease-in-out infinite wobble;
}
.mm-tx {
  flex-direction: column;
  min-width: 0;
  display: flex;
}
.mm-tx b {
  font-family: var(--font-title);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.15;
}
.mm-tx small {
  font-family: var(--font);
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
}
.mm-item .mm-badge {
  z-index: 2;
}
.mm-item.play {
  color: #fef8ec;
  background: var(--stripes), linear-gradient(180deg, #e58078, var(--red) 58%, var(--red-d));
  flex: 1 1 0;
  gap: 16px;
  min-width: 0;
  padding: 0 16px 0 14px;
  box-shadow:
    inset 0 0 0 4px #f5ebd6e6,
    0 6px #99251d,
    0 14px 30px #c3302566;
}
.mm-item.play:before {
  display: none;
}
.mm-item.play .mm-ic {
  background: var(--paper);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  box-shadow:
    inset 0 -4px #00000014,
    0 3px 8px #6d1b154d;
}
.mm-item.play .mm-ic img {
  width: 52px;
  height: 52px;
  animation: 2.2s ease-in-out infinite mmBall;
}
.mm-item.play .mm-tx {
  flex: 1;
}
.mm-item.play b {
  letter-spacing: 0.5px;
  text-shadow: 0 3px #00000033;
  font-size: clamp(34px, 4.6vh, 42px);
  line-height: 1;
}
.mm-item.play small {
  color: #fef8ecf2;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.2;
  display: -webkit-box;
}
.mm-item.play.focus {
  box-shadow:
    inset 0 0 0 4px var(--paper),
    0 0 0 4px #f5ebd68c,
    0 8px 0 #99251d,
    0 16px 34px #c3302580;
}
.mm-partner {
  background: #f5ebd638;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
  box-shadow: inset 0 0 0 2px #f5ebd659;
}
.mm-partner img {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  border-radius: 4px;
  animation: 2.6s ease-in-out infinite mmFloat;
}
.mm-shine {
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mm-shine:before {
  content: "";
  background: linear-gradient(90deg, #f5ebd600, #f5ebd680, #f5ebd600);
  width: 80px;
  animation: 4s ease-in-out 1s infinite mmShine;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.mm-item.endless {
  color: #fef8ec;
  text-align: center;
  background: radial-gradient(circle at 70% 18%, #f5ebd647, transparent 38%), var(--stripes),
    linear-gradient(160deg, #b097c7, #7d56a0 50%, #49325e);
  flex-direction: column;
  flex: 0 0 132px;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 10px 8px;
  transition:
    transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.16s,
    flex-basis 0.32s cubic-bezier(0.3, 1.4, 0.5, 1);
  animation: 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) 0.12s backwards mmDock;
  box-shadow:
    0 6px #47332b,
    0 12px 26px #5d407666;
}
.mm-item.endless:before {
  display: none;
}
.mm-modes:has(.endless.focus) .endless {
  flex-basis: 172px;
}
.mm-item.endless .mm-ic {
  background: #f5ebd62e;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  position: relative;
  box-shadow:
    inset 0 0 0 3px #f5ebd659,
    0 0 18px #cdc4b68c;
}
.mm-item.endless .mm-ic img {
  width: 40px;
  height: 40px;
}
.mm-item.endless .mm-tx {
  align-items: center;
  max-width: 100%;
}
.mm-item.endless b {
  letter-spacing: -0.2px;
  text-shadow: 0 2px #00000033;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 16px;
  overflow: hidden;
}
.mm-item.endless small {
  color: #fef8eceb;
  font-size: 11px;
}
.mm-item.endless.focus {
  box-shadow:
    0 0 0 4px var(--paper),
    0 8px 0 #47332b,
    var(--shadow);
}
.mm-star {
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px #f5ebd6);
  width: 7px;
  height: 7px;
  animation: modeOrbit 4.5s calc(var(--k) * -1.5s) linear infinite;
  background: #f3e5ca;
  margin: -3.5px;
  position: absolute;
  top: 50%;
  left: 50%;
}
.mm-item.endless.focus .mm-star {
  animation-duration: 2s;
}
.mm-item.event {
  --c: #a689bf;
  color: #fef8ec;
  background:
    linear-gradient(100deg, #452c23f0, #593d71c7 55%, #77529873),
    var(--ev-img, none) center / cover,
    #48325c;
  box-shadow:
    0 5px 0 #3f2921,
    0 0 22px #a689bf66,
    var(--shadow-sm);
  gap: 10px;
  padding: 8px 12px 8px 10px;
}
.mm-item.event:before {
  background: linear-gradient(#d27d4c, #a689bf);
}
.mm-item.event .mm-ic {
  background: #f5ebd624;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  box-shadow:
    inset 0 0 0 3px #e6c98f8c,
    0 0 16px #d27d4c73;
}
.mm-item.event .mm-ic img {
  width: 38px;
  height: 38px;
  animation: 2.4s ease-in-out infinite mmFloat;
}
.mm-item.event b {
  text-shadow: 0 2px #00000059;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 15px;
  line-height: 1.12;
  display: -webkit-box;
  overflow: hidden;
}
.mm-item.event small {
  color: #e6c88d;
  order: -1;
  font-size: 11px;
}
.mm-item.event.focus {
  box-shadow:
    0 0 0 3px #e6c88d,
    0 6px 0 #3f2921,
    0 0 26px #a689bf99,
    var(--shadow);
}
.mm-item.tasks {
  background: var(--stripes), linear-gradient(100deg, var(--paper) 55%, var(--k-fff3d0));
  gap: 10px;
  padding: 8px 12px;
}
.mm-item.tasks .mm-ic {
  width: 44px;
  height: 44px;
}
.mm-item.tasks .mm-ic img {
  width: 34px;
  height: 34px;
}
.mm-item.tasks b {
  font-size: 16px;
}
.mm-item.tasks small {
  font-size: 11px;
}
.mm-pips {
  gap: 4px;
  margin: 3px 0 2px;
  display: flex;
}
.mm-pips i {
  background: 0 0;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  box-shadow: inset 0 0 0 2px #ba8a29;
}
.mm-pips i.on {
  background: #ba8a29;
  animation: 1.8s ease-out infinite mmPip;
}
.mm-today:empty {
  display: none;
}
.mm-item.tile {
  text-align: center;
  flex-direction: column;
  flex: 1 1 0;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 10px 4px 13px;
}
.mm-item.tile:before {
  border-radius: 0 0 6px 6px;
  width: auto;
  height: 5px;
  top: auto;
  right: 0;
}
.mm-item.tile .mm-ic {
  width: 44px;
  height: 44px;
  margin-bottom: 1px;
}
.mm-item.tile .mm-ic img {
  width: 32px;
  height: 32px;
}
.mm-item.tile .mm-tx {
  align-items: center;
  max-width: 100%;
}
.mm-item.tile {
  container-type: inline-size;
}
.mm-item.tile b {
  max-width: 100%;
  font-size: min(14.5px, calc(100cqw / (var(--n, 8) * 0.66)));
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.mm-item.tile small {
  max-width: 100%;
  font-size: 11px;
}
.mm-item.tile .mm-badge {
  top: -9px;
  right: -6px;
}
.mm-item.mini {
  border-radius: 4px;
  padding: 5px 18px 5px 5px;
  animation-name: mmPop;
}
.mm-item.mini:before {
  display: none;
}
.mm-item.mini .mm-ic {
  border-radius: 50%;
  width: 34px;
  height: 34px;
}
.mm-item.mini .mm-ic img {
  width: 26px;
  height: 26px;
}
.mm-item.mini b {
  font-size: 15px;
}
.mm-item.mini small {
  display: none;
}
.mm-item.mini.round {
  padding: 5px;
}
.mm-item.mini.round .mm-tx {
  display: none;
}
.mm-item.mini.focus:after {
  border-width: 10px 8px 0;
  border-bottom-style: none;
  border-bottom-color: currentColor;
  margin-left: -8px;
  top: -19px;
}
.mm-item.mini.x {
  color: #fef8ec;
  background: var(--stripes), linear-gradient(100deg, #4f3932, #1a1614 60%, #000000);
}
.mm-item.mini.x .mm-ic {
  background: #f5ebd624;
}
.mm-item.mini.x .x-logo {
  color: #fef8ec;
  place-items: center;
  width: 16px;
  display: grid;
}
.mm-item.mini.x .x-logo svg {
  width: 100%;
  height: auto;
  display: block;
}
.mm-item.mini.x.focus {
  box-shadow:
    0 0 0 3px var(--paper),
    0 5px 0 #000000,
    var(--shadow);
}
.mm-season {
  width: clamp(300px, 26vw, 400px);
}
.mm-sp-head {
  position: relative;
  overflow: hidden;
}
.mm-sp-head:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #f5ebd600, #f5ebd673, #f5ebd600);
  width: 70px;
  animation: 6s ease-in-out 2.5s infinite mmShine;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.mm-sp-head > .uiicon {
  animation: 3s ease-in-out infinite mmFloat;
}
@keyframes mmIn {
  0% {
    opacity: 0;
    transform: skew(-6deg) translateY(16px) scale(0.94);
  }
}
@keyframes mmPop {
  0% {
    opacity: 0;
    transform: skew(-6deg) scale(0.6);
  }
}
@keyframes mmDock {
  0% {
    opacity: 0;
    transform: skew(-6deg) translate(60px) scale(0.8);
  }
  70% {
    opacity: 1;
    transform: skew(-6deg) translate(-6px) scale(1.02);
  }
}
@keyframes mmCursor {
  to {
    transform: translateY(-5px);
  }
}
@keyframes mmBall {
  0%,
  to {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-4px) rotate(8deg);
  }
}
@keyframes mmFloat {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@keyframes mmShine {
  0%,
  62% {
    transform: translate(-120%) skew(-20deg);
  }
  to {
    transform: translate(900%) skew(-20deg);
  }
}
@keyframes mmPip {
  0% {
    box-shadow:
      inset 0 0 0 2px #ba8a29,
      0 0 #ba8a298c;
  }
  70%,
  to {
    box-shadow:
      inset 0 0 0 2px #ba8a29,
      0 0 0 6px #ba8a2900;
  }
}
@keyframes modeOrbit {
  0% {
    transform: rotate(0) translate(31px) scale(0.7);
  }
  50% {
    transform: rotate(180deg) translate(31px) scale(1.15);
  }
  to {
    transform: rotate(360deg) translate(31px) scale(0.7);
  }
}
@media (max-width: 1100px) {
  .mm:not(.auth) {
    --mm-w: min(480px, 56vw);
    --mm-gutter: clamp(20px, 4vw, 48px);
  }
  .mm-season {
    width: min(320px, 34vw);
    right: 20px;
  }
}
@media (max-height: 760px) and (min-height: 561px) {
  .mm-left {
    gap: 12px;
  }
  .mm-left .logo.hero .logo-word {
    font-size: clamp(48px, 9vh, 70px);
  }
  .mm-nav {
    gap: 10px;
  }
  .mm-modes {
    height: 100px;
  }
  .mm-today {
    min-height: 64px;
  }
  .mm-item.tile {
    padding: 8px 4px 11px;
  }
  .mm-item.tile .mm-ic {
    width: 40px;
    height: 40px;
  }
}
@media (max-height: 560px) {
  .mm-top {
    top: calc(8px + var(--st));
    right: calc(14px + var(--sr));
  }
  .mm:not(.auth) .mm-top {
    zoom: 0.85;
  }
  .mm:not(.auth) .mm-top .tr-tx small,
  .mm:not(.auth) .mm-top .lang-btn > b {
    display: none;
  }
  .mm:not(.auth) .mm-top .lang-btn {
    justify-content: center;
    width: 40px;
    padding: 0;
  }
  .mm-left {
    left: calc(22px + var(--sl));
    top: calc(10px + var(--st));
    gap: 8px;
    transform: none;
  }
  .mm-left > .logo.hero {
    margin: 0 0 4px;
  }
  .mm-left .logo.hero .logo-word {
    -webkit-text-stroke-width: 3px;
    text-shadow:
      0 4px #2e5776,
      0 8px 18px #2e1e1873;
    font-size: 48px;
  }
  .mm-nav {
    gap: 9px;
  }
  .mm-modes,
  .mm-today,
  .mm-tiles,
  .mm-small {
    gap: 8px;
  }
  .mm-item {
    border-radius: 5px;
    gap: 8px;
    padding: 6px 10px 6px 8px;
  }
  .mm-item:before {
    border-radius: 5px 0 0 5px;
    width: 6px;
  }
  .mm-item.focus:after {
    border-width: 10px 8px 0;
    border-bottom-style: none;
    border-bottom-color: currentColor;
    margin-left: -8px;
    top: -17px;
  }
  .mm-ic {
    border-radius: 4px;
    width: 36px;
    height: 36px;
  }
  .mm-ic img {
    width: 28px;
    height: 28px;
  }
  .mm-modes {
    height: 94px;
  }
  .mm-item.play {
    gap: 12px;
    padding: 0 12px 0 10px;
  }
  .mm-item.play .mm-ic {
    width: 62px;
    height: 62px;
  }
  .mm-item.play .mm-ic img {
    width: 46px;
    height: 46px;
  }
  .mm-item.play b {
    font-size: 34px;
  }
  .mm-item.play small {
    font-size: 11px;
  }
  .mm-partner {
    border-radius: 5px;
    width: 56px;
    height: 56px;
  }
  .mm-partner img {
    width: 50px;
    height: 50px;
  }
  .mm-item.endless {
    flex-basis: 116px;
    gap: 3px;
    padding: 6px;
  }
  .mm-modes:has(.endless.focus) .endless {
    flex-basis: 132px;
  }
  .mm-item.endless .mm-ic {
    width: 44px;
    height: 44px;
  }
  .mm-item.endless .mm-ic img {
    width: 32px;
    height: 32px;
  }
  .mm-item.endless b {
    font-size: 14px;
  }
  .mm-item.endless small {
    font-size: 10px;
  }
  .mm-star {
    width: 6px;
    height: 6px;
    margin: -3px;
  }
  .mm-today {
    min-height: 60px;
  }
  .mm-item.event,
  .mm-item.tasks {
    padding: 5px 10px 5px 8px;
  }
  .mm-item.event .mm-ic {
    width: 44px;
    height: 44px;
  }
  .mm-item.event .mm-ic img {
    width: 34px;
    height: 34px;
  }
  .mm-item.event b {
    font-size: 14px;
  }
  .mm-item.event small {
    font-size: 10px;
  }
  .mm-item.tasks .mm-ic {
    width: 38px;
    height: 38px;
  }
  .mm-item.tasks .mm-ic img {
    width: 28px;
    height: 28px;
  }
  .mm-item.tasks b {
    font-size: 14px;
  }
  .mm-item.tasks small {
    font-size: 10px;
  }
  .mm-pips {
    margin: 2px 0 1px;
  }
  .mm-pips i {
    width: 10px;
    height: 10px;
  }
  .mm-item.tile {
    gap: 2px;
    padding: 7px 2px 10px;
  }
  .mm-item.tile .mm-ic {
    width: 40px;
    height: 40px;
  }
  .mm-item.tile .mm-ic img {
    width: 30px;
    height: 30px;
  }
  .mm-item.tile b {
    font-size: min(13px, calc(100cqw / (var(--n, 8) * 0.66)));
  }
  .mm-item.tile small {
    font-size: 10px;
  }
  .mm-item.mini {
    padding: 4px 14px 4px 4px;
  }
  .mm-item.mini.round {
    padding: 4px;
  }
  .mm-item.mini .mm-ic {
    width: 32px;
    height: 32px;
  }
  .mm-item.mini .mm-ic img {
    width: 24px;
    height: 24px;
  }
  .mm-item.mini b {
    font-size: 14px;
  }
  .mm-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 11px;
  }
  .mm-season {
    top: calc(62px + var(--st));
    right: calc(14px + var(--sr));
    width: min(300px, 32vw);
    max-height: calc(100dvh - 130px - var(--st) - var(--sb));
    border-radius: 6px;
    gap: 7px;
    padding: 10px;
    translate: none;
  }
  .mm-sp-head {
    gap: 8px;
    margin: -10px -10px 0;
    padding: 7px 12px;
  }
  .mm-sp-head b {
    font-size: 17px;
  }
  .mm-sp-head span {
    font-size: 11px;
  }
  .mm-sp-head > .uiicon {
    width: 24px !important;
    height: 24px !important;
  }
  .mm-sp-tabs .pill {
    padding: 5px 6px;
    font-size: 12px;
  }
  .mm-sp-tabs .pill img {
    width: 16px;
    height: 16px;
  }
  .mm-sp-scope-btn {
    padding: 4px 10px 4px 6px;
  }
  .mm-sp-scope-btn b {
    font-size: 13px;
  }
  .mm-sp-list,
  .mm-sp-prizes,
  .mm-sp-cut,
  .mm-sp-all {
    display: none;
  }
  .mm-foot {
    left: auto;
    right: calc(10px + var(--sr));
    bottom: calc(6px + var(--sb));
    align-items: flex-end;
    width: min(300px, 32vw);
    padding: 0;
  }
  .mm-foot .mm-legal {
    text-align: right;
    font-size: 8.5px;
    line-height: 1.3;
  }
}
@media (max-height: 560px) and (max-width: 940px) {
  .mm:not(.auth) {
    --mm-w: min(470px, 54vw);
  }
  .mm-season,
  .mm-foot {
    width: min(280px, 36vw);
  }
  .mm-season {
    max-height: calc(100dvh - 172px - var(--st) - var(--sb));
  }
  .mm-item.play small,
  .mm:not(.auth) .mm-top .tr-tx {
    display: none;
  }
  .mm-left .logo.hero .logo-word {
    font-size: 42px;
  }
  .mm-left > .logo.hero {
    margin-bottom: 0;
  }
  .mm-left > .logo.hero > .logo-ver,
  .mm-left > .logo.hero > button.logo-ver:hover {
    top: 54%;
    left: calc(100% + 6px);
    transform: translateY(-50%) rotate(-3deg);
  }
  .mm-left > .logo.hero > .logo-ver b {
    display: none;
  }
}
@media (max-width: 860px) and (min-height: 561px) {
  .mm:not(.auth) {
    --mm-w: min(560px, 100%);
    padding: 96px 16px 20px;
    display: block;
    overflow-y: auto;
  }
  .mm:not(.auth) .mm-top .tr-tx small {
    display: none;
  }
  .mm:not(.auth) .mm-left {
    margin: 0 auto;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }
  .mm:not(.auth) .mm-season {
    width: var(--mm-w);
    max-height: 560px;
    margin: 22px auto 0;
    position: relative;
    top: auto;
    right: auto;
    translate: none;
  }
  .mm:not(.auth) .mm-foot {
    margin-top: 18px;
    padding: 0;
    position: relative;
    bottom: auto;
  }
}
@media (max-width: 480px) and (min-height: 561px) {
  .mm-item.tile {
    padding: 8px 2px 11px;
  }
  .mm-item.tile b {
    font-size: min(11px, calc(100cqw / (var(--n, 8) * 0.66)));
  }
  .mm-item.tile small,
  .mm-partner {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mm-item,
  .mm-item.endless,
  .mm-item.focus:after,
  .mm-item .mm-ic img,
  .mm-partner img,
  .mm-shine:before,
  .mm-pips i.on,
  .mm-sp-head:after,
  .mm-sp-head > .uiicon {
    animation: none !important;
  }
}
.av-frame.tf {
  filter: none;
  --c1: #bf6430;
  --c2: #ce992d;
  --c3: #ebd4a5;
  --c4: #741c16;
  --m1: #e9bfa7;
  --m2: #af5c2c;
  --m3: #601712;
  --m4: #180f0c;
  --g1: #eca19c;
  --g2: #94241c;
  display: block;
}
.av-frame.tf-grass {
  --c1: #397859;
  --c2: #5eb389;
  --c3: #cadec6;
  --c4: #2a1b16;
  --m1: #dce5d1;
  --m2: #4ea57a;
  --m3: #347052;
  --m4: #211511;
  --g1: #d7e3cd;
  --g2: #2f654a;
}
.av-frame.tf-water {
  --c1: #3e759f;
  --c2: #5f97c1;
  --c3: #f2f0e9;
  --c4: #3f2921;
  --m1: #f5ebd6;
  --m2: #d2d9d7;
  --m3: #427daa;
  --m4: #203d54;
  --g1: #f5ebd6;
  --g2: #3f78a3;
}
.tf > i {
  pointer-events: none;
  border-radius: 50%;
  position: absolute;
  inset: 0;
}
.tf-svg {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}
.tf-svg * {
  transform-origin: 0 0;
}
.tf-svg .wv,
.tf-svg .ripple {
  transform-origin: 100px 100px;
}
.tf-glow {
  background: radial-gradient(
    circle closest-side,
    transparent 50%,
    color-mix(in srgb, var(--c2) 60%, transparent) 70%,
    transparent 100%
  );
  opacity: 0.7;
}
.tf-e .tf-glow {
  animation: 2.4s ease-in-out infinite tfPulse;
}
.tf-s .tf-glow {
  opacity: 0.4;
}
.tf-shine {
  background: conic-gradient(from 0deg, transparent 0 78%, #f5ebd600 80%, #f5ebd6cc 88%, transparent 94%);
  mix-blend-mode: soft-light;
  animation: 5s linear infinite tfSpin;
  -webkit-mask: radial-gradient(circle closest-side, #00000000 0 50%, #000000 51% 65.5%, #00000000 66.5%);
  mask: radial-gradient(circle closest-side, #00000000 0 50%, #000000 51% 65.5%, #00000000 66.5%);
}
.tf-s .tf-shine {
  animation-duration: 8s;
}
.tf-svg .rg-sh {
  fill: none;
  stroke: #00000066;
  stroke-width: 3px;
}
.tf-svg .rg-ol {
  fill: none;
  stroke: var(--m4);
  stroke-width: 2.6px;
}
.tf-svg .rg-band {
  fill: none;
  stroke-width: 12.4px;
}
.tf-svg .rg-hi {
  fill: none;
  stroke-width: 1.3px;
}
.tf-svg .rg-in {
  fill: none;
  stroke: #0000008c;
  stroke-width: 1.8px;
}
.tf-svg .rg-fil {
  fill: none;
  stroke: var(--m4);
  stroke-width: 0.9px;
  opacity: 0.75;
  stroke-linejoin: round;
}
.tf-svg .rg-bead {
  fill: none;
  stroke: var(--m1);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-dasharray: 0.1 3.55;
}
.tf-svg .rg-bead2 {
  fill: none;
  stroke: var(--m1);
  stroke-width: 0.7px;
  stroke-linecap: round;
  stroke-dasharray: 0.1 2.5;
  opacity: 0.7;
}
.tf-svg .gem-bz {
  fill: var(--m4);
}
.tf-svg .gem-ol {
  fill: none;
  stroke: #00000080;
  stroke-width: 0.6px;
}
.tf-svg .gem-hi {
  fill: #fef8ec;
  opacity: 0.85;
}
.tf-svg .gem {
  animation: tfGem 2.8s ease-in-out var(--d, 0s) infinite;
}
.tf-svg .rivet {
  fill: var(--m3);
  stroke: var(--m4);
  stroke-width: 0.6px;
}
.tf-svg .rivet-hi {
  fill: var(--m1);
  opacity: 0.85;
}
.tf-svg .fl {
  animation: tfFl var(--t, 1s) ease-in-out var(--d, 0s) infinite alternate;
}
.tf-svg .fl-a {
  fill: #761d16;
  stroke: #261914;
  stroke-width: 0.7px;
}
.tf-svg .fl-b {
  fill: var(--c1);
}
.tf-svg .fl-c {
  fill: var(--c2);
}
.tf-svg .fl-d {
  fill: var(--c3);
}
.tf-svg .cracks {
  filter: drop-shadow(0 0 1.4px #b9612e);
}
.tf-svg .crack {
  fill: none;
  stroke: #d7a747;
  stroke-width: 1.1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: tfCrack 1.9s ease-in-out var(--d, 0s) infinite;
}
.tf-svg .sp {
  fill: var(--c3);
  opacity: 0;
  animation: tfSpark var(--t, 2s) ease-out var(--d, 0s) infinite;
}
.tf-fire.tf-e .tf-glow {
  background: radial-gradient(circle closest-side, #00000000 50%, #bb622fb3 72%, #00000000 100%);
}
.tf-fire .rg-band {
  filter: saturate(1.1);
}
.tf-svg .vn-o {
  fill: none;
  stroke: #2d1d17;
  stroke-width: 3.8px;
  stroke-linejoin: round;
}
.tf-svg .vn {
  fill: none;
  stroke: #47966e;
  stroke-width: 2px;
  stroke-linejoin: round;
}
.tf-svg .vn-b {
  stroke: #66b78e;
}
.tf-svg .lf {
  animation: tfSway var(--t, 3s) ease-in-out var(--d, 0s) infinite alternate;
}
.tf-svg .lf-b {
  fill: var(--c1);
  stroke: #2a1b16;
  stroke-width: 0.7px;
  stroke-linejoin: round;
}
.tf-svg .lf-big .lf-b {
  fill: #2e6248;
}
.tf-svg .lf-s .lf-b {
  fill: var(--c2);
}
.tf-svg .lf-v {
  fill: none;
  stroke: var(--c3);
  stroke-width: 0.7px;
  opacity: 0.85;
}
.tf-svg .tendril {
  fill: none;
  stroke: #53ae80;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tf-svg .pt {
  fill: #f6eae0;
  stroke: #bf5265;
  stroke-width: 0.6px;
}
.tf-svg .ct {
  fill: #d39e36;
  stroke: #946e21;
  stroke-width: 0.5px;
}
.tf-svg .ct-hi {
  fill: #eedcb7;
}
.tf-svg .bl {
  animation: tfBloom var(--t, 5s) ease-in-out var(--d, 0s) infinite;
}
.tf-svg .pol {
  fill: var(--c3);
  opacity: 0;
  animation: tfSpark var(--t, 3s) ease-out var(--d, 0s) infinite;
}
.tf-svg .pol-p {
  fill: #ebcec5;
}
.tf-grass.tf-e .tf-glow {
  background: radial-gradient(circle closest-side, #00000000 50%, #5eb3898c 72%, #00000000 100%);
}
.tf-svg .wv-a {
  animation: 17s linear infinite tfSpin;
}
.tf-svg .wv-b {
  animation: 11s linear infinite tfSpinR;
}
.tf-svg .wv-s {
  animation: 30s linear infinite tfSpin;
}
.tf-svg .wv-fill {
  fill: var(--c2);
  opacity: 0.7;
}
.tf-svg .crest {
  fill: none;
  stroke: #fef8ec;
  stroke-width: 1.4px;
  stroke-linejoin: round;
  opacity: 0.95;
}
.tf-svg .crest-b {
  stroke: var(--c3);
  stroke-width: 1px;
  opacity: 0.7;
}
.tf-svg .ripple {
  fill: none;
  stroke: var(--c3);
  stroke-width: 0.8px;
  stroke-dasharray: 6 5 2 7;
  opacity: 0.5;
  animation: 32s linear infinite tfSpin;
}
.tf-svg .drop {
  fill: var(--c3);
  stroke: var(--c2);
  stroke-width: 0.5px;
  opacity: 0;
  animation: tfDrop var(--t, 2.4s) ease-out var(--d, 0s) infinite;
}
.tf-svg .bub {
  opacity: 0;
  animation: tfBub var(--t, 3s) ease-out var(--d, 0s) infinite;
}
.tf-svg .bub-c {
  fill: #d9deda40;
  stroke: #fef8ec;
  stroke-width: 0.6px;
}
.tf-svg .bub-h {
  fill: #fef8ec;
}
.tf-water.tf-e .tf-glow {
  background: radial-gradient(circle closest-side, #00000000 50%, #5f97c199 72%, #00000000 100%);
}
.tf-water .tf-shine {
  mix-blend-mode: normal;
  opacity: 0.75;
}
@keyframes tfSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes tfSpinR {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes tfPulse {
  0%,
  to {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}
@keyframes tfGem {
  0%,
  to {
    filter: brightness();
  }
  50% {
    filter: brightness(1.45);
  }
}
@keyframes tfFl {
  0% {
    transform: scale(0.92, 0.8) skew(-6deg);
  }
  to {
    transform: scale(1.06, 1.2) skew(7deg);
  }
}
@keyframes tfCrack {
  0%,
  to {
    opacity: 0.3;
    stroke: #c76932;
  }
  50% {
    opacity: 1;
    stroke: #eedcb7;
  }
}
@keyframes tfSpark {
  0% {
    opacity: 0;
    transform: translate(0) scale(1);
  }
  15% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(var(--x, 0px), -26px) scale(0.25);
  }
}
@keyframes tfSway {
  0% {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(8deg);
  }
}
@keyframes tfBloom {
  0%,
  to {
    transform: scale(0.3) rotate(-25deg);
  }
  35%,
  65% {
    transform: scale(1) rotate(0);
  }
}
@keyframes tfDrop {
  0% {
    opacity: 0;
    transform: translate(0) scale(0.6);
  }
  20% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(var(--x, 0px), -20px) scale(1);
  }
}
@keyframes tfBub {
  0% {
    opacity: 0;
    transform: translate(0) scale(0.5);
  }
  15%,
  80% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(var(--x, 0px), -16px) scale(1.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tf *,
  .tf {
    animation: none !important;
  }
  .tf-svg .sp,
  .tf-svg .pol,
  .tf-svg .drop,
  .tf-svg .bub {
    opacity: 0.85;
  }
  .tf-svg .bl {
    transform: scale(0.9);
  }
  .tf-shine {
    display: none;
  }
}
.tour {
  z-index: 9500;
  touch-action: none;
  overscroll-behavior: contain;
  position: fixed;
  inset: 0;
}
.tour.blind {
  background: #3a251ea8;
}
.tour-spot {
  pointer-events: none;
  width: 0;
  height: 0;
  box-shadow:
    0 0 0 100vmax #3a251ea8,
    0 0 0 3px var(--paper),
    0 0 22px 4px #f5ebd68c;
  border-radius: 6px;
  transition:
    left 0.18s ease-out,
    top 0.18s ease-out,
    width 0.18s ease-out,
    height 0.18s ease-out;
  animation: 1.6s ease-in-out infinite tourPulse;
  position: fixed;
  top: 0;
  left: 0;
}
.tour.blind .tour-spot {
  display: none;
}
@keyframes tourPulse {
  50% {
    box-shadow:
      0 0 0 100vmax #3a251ea8,
      0 0 0 5px var(--paper),
      0 0 30px 8px #f5ebd6bf;
  }
}
.tour-card {
  box-sizing: border-box;
  isolation: isolate;
  background: var(--paper);
  width: 340px;
  max-width: calc(100vw - 20px);
  color: var(--ink);
  box-shadow:
    var(--shadow),
    0 5px 0 #3a251e29;
  border-radius: 8px;
  padding: 18px 18px 14px;
  animation: 0.22s ease-out popIn;
  position: fixed;
}
.tour.blind .tour-card {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tour-card:before {
  content: "";
  background: var(--stripes), linear-gradient(100deg, var(--purple), var(--blue));
  border-radius: 8px 8px 0 0;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.tour-top {
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  display: flex;
}
.tour-ic {
  background: var(--yellow);
  width: 30px;
  height: 30px;
  box-shadow: 0 2px 0 var(--yellow-d);
  border-radius: 50%;
  place-items: center;
  display: grid;
}
.tour-top small {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 900;
}
.tour-card h3 {
  font-family: var(--font-title);
  margin: 8px 0 4px;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.15;
}
.tour-card p {
  color: var(--ink-3);
  white-space: pre-line;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.tour-dots {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 10px;
  display: flex;
}
.tour-dots i {
  background: var(--k-d9d4ea);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  transition:
    background 0.15s,
    transform 0.15s;
}
.tour-dots i.on {
  background: var(--purple);
  transform: scale(1.35);
}
.tour-foot {
  align-items: center;
  gap: 8px;
  display: flex;
}
.tour-skip {
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  background: 0 0;
  border: none;
  padding: 6px 4px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: underline;
}
.tour-skip:hover {
  color: var(--ink);
}
.tour-back[disabled] {
  opacity: 0.4;
  pointer-events: none;
}
.tour-card .btn.small {
  padding: 8px 18px;
  font-size: 14px;
}
.tour-arrow {
  z-index: -1;
  background: var(--paper);
  border-radius: 3px;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  display: none;
  position: absolute;
  transform: rotate(45deg);
}
.tour-card[data-side="below"] .tour-arrow {
  display: block;
  top: 0;
}
.tour-card[data-side="above"] .tour-arrow {
  display: block;
  top: 100%;
}
.tour-card[data-side="right"] .tour-arrow {
  display: block;
  left: 0;
}
.tour-card[data-side="left"] .tour-arrow {
  display: block;
  left: 100%;
}
.tour.compact .tour-card {
  border-radius: 7px;
  width: auto;
  max-width: none;
  padding: 14px 14px 12px;
}
.tour.compact .tour-card h3 {
  font-size: 18px;
}
.tour.compact .tour-card p {
  font-size: 14px;
  line-height: 1.35;
}
.tour.compact .tour-dots {
  margin: 8px 0;
}
.tour.compact.blind .tour-card {
  top: auto;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: none;
}
@media (max-height: 560px) {
  .tour-card {
    width: 300px;
    padding: 14px 14px 10px;
  }
  .tour-card h3 {
    margin: 4px 0 2px;
    font-size: 17px;
  }
  .tour-card p {
    font-size: 13px;
    line-height: 1.3;
  }
  .tour-dots {
    margin: 6px 0;
  }
  .tour.compact .tour-card {
    width: auto;
  }
}
.run-hint {
  left: 50%;
  top: calc(88px + env(safe-area-inset-top));
  z-index: 60;
  pointer-events: none;
  background: var(--w97);
  width: max-content;
  max-width: min(440px, 100vw - 24px);
  color: var(--ink);
  box-shadow: var(--shadow);
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  transition:
    opacity 0.35s,
    transform 0.35s;
  animation: 0.3s cubic-bezier(0.3, 1.4, 0.5, 1) hintIn;
  display: flex;
  position: fixed;
  transform: translate(-50%);
}
.run-hint.out {
  opacity: 0;
  transform: translate(-50%) translateY(-8px);
}
.run-hint .rh-ic {
  background: var(--stripes), linear-gradient(135deg, var(--k-fff3c4), var(--yellow));
  width: 40px;
  height: 40px;
  box-shadow: 0 3px 0 var(--yellow-d);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
}
.run-hint .rh-ic img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
}
.run-hint b {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
  display: block;
}
.run-hint span {
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  display: block;
}
@keyframes hintIn {
  0% {
    opacity: 0;
    transform: translate(-50%) translateY(-14px) scale(0.9);
  }
}
@media (max-width: 760px), (max-height: 560px) {
  .run-hint {
    top: calc(54px + env(safe-area-inset-top));
    border-radius: 6px;
    gap: 8px;
    max-width: min(360px, 100vw - 150px);
    padding: 5px 12px 5px 5px;
  }
  .run-hint .rh-ic {
    width: 30px;
    height: 30px;
  }
  .run-hint .rh-ic img {
    width: 22px;
    height: 22px;
  }
  .run-hint b {
    font-size: 12px;
  }
  .run-hint span {
    font-size: 11px;
    line-height: 1.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-spot,
  .tour-card,
  .run-hint {
    transition: none;
    animation: none;
  }
}
.run-hint.low {
  top: auto;
  bottom: calc(10px + env(safe-area-inset-bottom));
}
@keyframes hintInLow {
  0% {
    opacity: 0;
    transform: translate(-50%) translateY(14px) scale(0.9);
  }
}
.run-hint.low {
  animation-name: hintInLow;
}
.run-hint.low.out {
  transform: translate(-50%) translateY(8px);
}
@media (max-width: 760px), (max-height: 560px) {
  .run-hint.low {
    top: auto;
    bottom: calc(6px + env(safe-area-inset-bottom));
  }
}
.fu-cards.scroll {
  flex-wrap: wrap;
  max-height: min(64vh, 100dvh - 190px);
  padding: 6px;
  overflow-y: auto;
}
.fu-actions {
  z-index: 2;
  padding: 4px 0;
  position: sticky;
  bottom: 0;
}
html.touch .fu-cards.scroll {
  max-height: none;
  overflow: visible;
}
.card.fusion {
  width: 250px;
}
.card.fusion .top {
  background: var(--t1);
  background: var(--stripes),
    linear-gradient(120deg, color-mix(in srgb, var(--t1) 55%, #402b24), color-mix(in srgb, var(--t2) 55%, #402b24));
  position: relative;
}
.card.fusion .top:after {
  content: "";
  background: linear-gradient(90deg, var(--t1), var(--rc), var(--t2));
  height: 4px;
  position: absolute;
  inset: auto 0 0;
}
.card.fusion .top img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}
.card.fusion .rar {
  background: var(--rc);
  color: #402b24;
}
.card.fusion h3 {
  color: var(--ink);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .card.fusion h3 {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--t1) 80%, #402b24),
      color-mix(in srgb, var(--t2) 80%, #402b24)
    );
    color: #00000000;
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.card.fusion.locked {
  opacity: 0.8;
  filter: saturate(0.6);
}
.card.fusion.locked:hover {
  transform: none;
}
.fu-types {
  gap: 4px;
  display: inline-flex;
}
.fu-types img {
  width: 34px !important;
  height: 34px !important;
}
.fu-pair {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 2px 0 4px;
  display: flex;
}
.fu-pair > b {
  font-family: var(--font-title);
  color: var(--ink-2);
  font-size: 15px;
}
.fu-chip {
  color: #fef8ec;
  background: var(--tc);
  background: color-mix(in srgb, var(--tc) 85%, #402b24);
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 3px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  box-shadow: inset 0 -2px #0000002e;
}
.fu-desc {
  color: var(--ink-2);
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.slot.fused,
.chip.fused {
  box-shadow:
    0 0 0 2px var(--t1, #d39e36),
    0 0 0 4px var(--t2, #6d9fc6);
}
.slot.fused .lvl {
  color: #d39e36;
  text-shadow: 0 1px #402b24;
}
.fi-types {
  flex: none;
  gap: 3px;
  display: inline-flex;
}
.fi-tags {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 2px 0 5px;
  display: flex;
}
.fi-type {
  background: var(--tc);
  background: color-mix(in srgb, var(--tc) 85%, #402b24);
  color: #fef8ec;
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  padding: 1px 8px 1px 3px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  box-shadow: inset 0 -2px #0000002e;
}
.fi-cls {
  font-family: var(--font-title);
  color: #fef8ec;
  border-radius: 4px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 900;
}
.fi-cls.physical {
  background: #934d25;
}
.fi-cls.special {
  background: #3d739d;
}
.fi-shape,
.fi-st {
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink-2);
  border-radius: 4px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 900;
}
.fi-warn {
  background: var(--k-fff3d6);
  border-radius: 4px;
  margin: 4px 0 2px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
  box-shadow: inset 0 0 0 1.5px #d8aa4f;
}
.fi-ready {
  color: var(--green-t, #3b7c5b);
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 900;
}
.fi-need {
  color: var(--red-t, #a1322a);
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 800;
}
.fu-chip small {
  color: #fef8ec;
  background: #f5ebd647;
  border-radius: 4px;
  margin-left: 3px;
  padding: 0 6px;
  font-size: 9.5px;
  font-weight: 900;
}
.fu-chip.have {
  box-shadow:
    inset 0 -2px 0 #0000002e,
    0 0 0 2px var(--green);
}
.fu-chip.any {
  background: var(--tc);
  background: color-mix(in srgb, var(--tc) 70%, #402b24);
}
.fi-arrow {
  font-style: normal;
  font-family: var(--font-title);
  color: var(--ink-2);
  font-size: 15px;
}
.fi-card {
  box-shadow:
    0 0 0 2px var(--t1),
    0 0 0 4px var(--t2);
  margin: 4px;
}
.fi-card .fi-kind {
  background: var(--rc);
  color: #402b24;
}
.fi-card.made {
  background: var(--k-f1fbf3);
}
.fi-card .fu-pair,
.fi-card .fi-tags {
  justify-content: flex-start;
}
.fi-art img {
  background: var(--paper);
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  border-radius: 50%;
  flex: none;
}
.fi-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.fi-to {
  align-items: flex-start;
  gap: 6px;
  display: flex;
}
.fi-to .fi-arrow {
  margin-top: 1px;
}
.fi-gl .fi-tags {
  justify-content: flex-start;
  margin: 3px 0;
}
.fi-pause {
  flex-direction: column;
  gap: 10px;
  display: flex;
}
.card.fusion .fi-tags {
  margin: 2px 0 4px;
}
.card.fusion .fi-warn {
  margin: 0 0 6px;
}
.card.fusion .mp-nums {
  justify-content: center;
  margin-bottom: 6px;
}
@media (max-width: 560px) {
  .fi-grid {
    grid-template-columns: 1fr;
  }
}
.fi-cls.rand {
  background: linear-gradient(90deg, #934d25, #3d739d);
}
.fi-card .mp-top {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.fi-card .mp-top b {
  white-space: normal;
  overflow: visible;
}
.fi-card .mp-tags {
  gap: 4px;
  margin-left: auto;
  display: inline-flex;
}
.fi-uses {
  background: var(--paper-2);
  text-align: left;
  border-radius: 4px;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 4px;
  padding: 6px 9px;
  display: flex;
}
.fi-sub {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 3px;
  font-size: 10px;
  font-weight: 900;
}
.fi-parts {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}
.fi-part {
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line);
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  padding: 1px 3px 1px 8px;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
}
.fi-part b {
  font-weight: 900;
}
.fi-part i {
  background: var(--k-e8f1ff);
  color: var(--blue-t, var(--blue-d));
  border-radius: 4px;
  padding: 0 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.fi-use {
  grid-template-columns: 92px 1fr;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  display: grid;
}
.fi-use > b {
  overflow-wrap: anywhere;
  font-family: var(--font-title);
  font-size: 11.5px;
  font-weight: 900;
}
.fi-use.none {
  color: var(--ink-2);
}
.fi-use.none > b {
  font-weight: 800;
}
.fi-fixed {
  color: var(--ink-2);
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
}
.card.fusion .fi-uses {
  margin: 2px 0 6px;
}
.bp-opt .fi-uses {
  margin: 4px 0 0;
}
.fi-shape {
  white-space: nowrap;
}
.tt:has(.mv-sheet) {
  max-width: min(360px, 100vw - 16px);
}
.mv-sheet {
  gap: 8px;
}
.mv-sheet p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
}
.mv-badge {
  background: var(--tc, var(--blue));
  color: #fef8ec;
  font-family: var(--font-title);
  letter-spacing: 0.3px;
  text-shadow: 0 1px 1px #00000040;
  border-radius: 4px;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  padding: 1px 10px 1px 7px;
  font-size: 10.5px;
  font-weight: 900;
  display: inline-flex;
}
.mv-badge.own {
  background: var(--slate, var(--ink-2));
}
.mv-facts {
  background: var(--paper-2);
  border-radius: 4px;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  padding: 7px 11px;
  font-size: 12px;
  display: grid;
}
.mv-facts span {
  color: var(--ink-2);
  font-weight: 800;
}
.mv-facts b {
  text-align: right;
  font-family: var(--font-title);
  font-weight: 900;
}
.mv-sec {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.mv-sec > small {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 900;
  display: block;
}
.mv-scale,
.mv-stats {
  font-weight: 800;
}
.mv-note,
.mv-more {
  color: var(--ink-2);
  font-weight: 700;
  font-size: 11.5px !important;
}
.mv-basis {
  border-top: 1px dashed var(--line);
  color: var(--ink-2);
  padding-top: 2px;
  font-weight: 700;
  font-size: 11px !important;
}
.mv-chips {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}
.mv-chip {
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--line);
  white-space: nowrap;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 1px 8px 1px 3px;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
}
.mv-chip img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
}
.mv-chip.vit {
  background: var(--k-f3eefc);
  box-shadow: inset 0 0 0 1.5px #dbd5cb;
}
.mv-chip.have {
  background: var(--k-e6f9ec);
  box-shadow: inset 0 0 0 2px var(--green);
}
.mv-chip b {
  background: var(--green);
  color: #fef8ec;
  font-family: var(--font-title);
  border-radius: 4px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 900;
}
.mv-group {
  background: var(--paper-2);
  border-radius: 4px;
  flex-direction: column;
  gap: 3px;
  padding: 5px 8px;
  display: flex;
}
.mv-group > b {
  font-family: var(--font-title);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
}
.mv-group > b i {
  background: var(--k-e8f1ff);
  color: var(--blue-t, var(--blue-d));
  border-radius: 4px;
  padding: 0 7px;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 900;
}
.mv-levels {
  background: var(--paper-2);
  border-radius: 4px;
  grid-template-columns: repeat(8, 1fr);
  align-items: end;
  gap: 4px;
  padding: 8px 6px 4px;
  display: grid;
}
.mv-lv {
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 1px;
  min-width: 0;
  display: flex;
  position: relative;
}
.mv-lv i {
  background: color-mix(in srgb, var(--tc, var(--blue)) 55%, var(--paper));
  border-radius: 6px 6px 0 0;
  width: 100%;
  display: block;
}
.mv-lv.cur i {
  background: var(--tc, var(--blue));
}
.mv-lv b {
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.mv-lv small {
  color: var(--ink-2);
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1.2;
}
.mv-lv.cur small {
  color: var(--tc, var(--blue));
}
.mv-ups {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 3px 10px;
  display: grid;
}
.mv-ups span {
  background: var(--k-e8f1ff);
  color: var(--blue-t, var(--blue-d));
  border-radius: 8px;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 900;
  display: flex;
}
.mv-ups i {
  color: var(--ink);
  font-style: normal;
}
.mv-ov {
  z-index: 960;
}
.mv-panel {
  width: min(640px, 100%);
}
.mv-scroll {
  flex: 1;
  min-height: 0;
  padding: 12px 16px 16px;
  overflow-y: auto;
}
.mv-sheet.full {
  padding: 0;
}
.mv-sheet.full .tt-head {
  display: none;
}
.mv-sheet.full > p:first-of-type {
  font-size: 13.5px;
}
.mv-clickable {
  cursor: pointer;
}
.mv-diff {
  background: var(--k-f1f6ff);
  border-radius: 4px;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding: 5px 9px;
  display: flex;
}
.mv-diff small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.mv-diff-row {
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
}
.mv-diff-row span {
  color: var(--ink-2);
}
.mv-diff-row b {
  font-family: var(--font-title);
  color: var(--green-t, var(--green-d, #387757));
  white-space: nowrap;
  font-weight: 900;
}
.mv-diff-row b s {
  color: var(--ink-2);
  font-weight: 800;
  text-decoration: none;
}
.mv-diff-row.bad b {
  color: var(--ink-2);
}
.mp-move.mv-clickable {
  cursor: pointer;
  transition:
    transform 0.1s,
    box-shadow 0.12s;
}
.mp-move.mv-clickable:hover,
.mp-move.mv-clickable:focus-visible {
  box-shadow:
    0 0 0 2px var(--c),
    0 4px 10px #3a251e26;
  outline: none;
  transform: translateY(-1px);
}
.mp-nums {
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
  display: flex;
}
.mp-nums span {
  background: color-mix(in srgb, var(--c) 12%, var(--paper));
  border-radius: 4px;
  align-items: baseline;
  gap: 4px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}
.mp-nums i {
  color: var(--ink-2);
  text-transform: uppercase;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
}
.mp-badge {
  background: var(--c);
  color: #fef8ec;
  font-family: var(--font-title);
  letter-spacing: 0.3px;
  text-shadow: 0 1px 1px #00000040;
  border-radius: 4px;
  flex: none;
  padding: 1px 8px;
  font-size: 9.5px;
  font-weight: 900;
}
.mp-badge-evo {
  background: var(--purple, #8259a6);
}
.mp-tags {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
  display: flex;
}
.mp-evo-h {
  align-items: center;
  gap: 8px;
  display: flex;
}
.mp-evo-h img {
  background: var(--paper);
  width: 34px;
  height: 34px;
  box-shadow: 0 0 0 2px var(--c, var(--blue));
  image-rendering: pixelated;
  border-radius: 50%;
}
.mp-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  flex: none;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 16px;
  display: flex;
}
.mp-bar-types {
  flex-wrap: wrap;
  gap: 3px;
  display: flex;
}
.mp-ft {
  background: var(--paper-2);
  cursor: pointer;
  opacity: 0.62;
  border: none;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  transition:
    opacity 0.1s,
    transform 0.1s,
    box-shadow 0.1s;
  display: grid;
}
.mp-ft:hover {
  opacity: 1;
  transform: translateY(-1px);
}
.mp-ft.on {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--blue);
  background: var(--paper);
}
.mp-seg {
  background: var(--paper-2);
  border-radius: 4px;
  padding: 2px;
  display: inline-flex;
}
.mp-seg button {
  font-family: var(--font-title);
  color: var(--ink-2);
  cursor: pointer;
  background: 0 0;
  border: none;
  border-radius: 4px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 900;
}
.mp-seg button.on {
  background: var(--blue);
  color: #fef8ec;
}
.mp-sel {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-2);
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}
.mp-sel select {
  border: 2px solid var(--line);
  background: var(--paper);
  max-width: 150px;
  font-family: var(--font);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 800;
}
.mp-count {
  color: var(--ink-2);
  margin-left: auto;
  font-size: 12px;
  font-weight: 900;
}
.mp-reset {
  padding: 4px 12px !important;
}
.gl-panel {
  width: min(900px, 100%);
  height: min(720px, 100%);
}
.gl-tabs {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  flex: none;
  gap: 6px;
  padding: 8px 16px;
  display: flex;
}
.gl-tabs button {
  background: var(--paper-2);
  font-family: var(--font-title);
  color: var(--ink-2);
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 900;
}
.gl-tabs button.on {
  background: var(--blue);
  color: #fef8ec;
  box-shadow: 0 3px #00000026;
}
.gl-body {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
  padding: 12px 16px 16px;
  display: flex;
  overflow-y: auto;
}
.gl-intro {
  color: var(--ink-2);
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.gl-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px;
  display: grid;
}
.gl-row {
  --c: var(--blue);
  background: var(--paper);
  box-shadow:
    0 2px 8px #3a251e14,
    inset 4px 0 0 var(--c);
  border-radius: 5px;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 11px;
  display: flex;
}
.gl-row > div {
  min-width: 0;
}
.gl-row b {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  display: block;
}
.gl-row p {
  color: var(--ink-2);
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}
.gl-row em {
  color: var(--blue-t, var(--blue-d));
  margin-top: 3px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
  display: block;
}
.gl-row .typeicon,
.gl-row > img {
  flex: none;
  margin-top: 1px;
}
.gl-combo {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  display: flex;
}
.gl-combo i {
  color: var(--ink-2);
  font-style: normal;
  font-weight: 900;
}
.gl-combo span {
  background: var(--paper-2);
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 1px 9px 1px 3px;
  font-size: 11.5px;
  font-weight: 800;
  display: inline-flex;
}
.gl-sec {
  font-family: var(--font-title);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 4px 0 -2px;
  font-size: 11px;
  font-weight: 900;
}
.gl-btn {
  align-self: flex-start;
  gap: 6px;
  margin-top: 6px;
}
.pk-ov {
  z-index: 950;
}
.pk-panel {
  width: min(1040px, 100%);
}
.pk-body {
  flex: 1;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-height: 0;
  padding: 12px 16px 16px;
  display: grid;
  overflow-y: auto;
}
.pk-body > section {
  background: var(--paper);
  border-radius: 6px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px 12px;
  display: flex;
  box-shadow:
    0 2px #3a251e0f,
    0 4px 14px #3a251e14;
}
.pk-body .mp-sec {
  box-shadow: none;
  padding: 0;
}
.pk-h {
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  display: flex;
}
.pk-h small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}
.pk-moves {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.pk-move {
  --c: var(--blue);
  background: var(--paper-2);
  box-shadow: inset 4px 0 0 var(--c);
  border-radius: 5px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  display: flex;
}
.pk-move .grow {
  flex: 1;
  min-width: 0;
}
.pk-move .mp-top b {
  font-size: 13.5px;
}
.pk-vits {
  flex-direction: column;
  gap: 5px;
  display: flex;
}
.pk-vit {
  background: var(--paper-2);
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  display: flex;
}
.pk-vit img {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  flex: none;
}
.pk-vit b {
  font-family: var(--font-title);
  font-size: 12.5px;
  font-weight: 900;
  display: block;
}
.pk-vit small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.pk-items {
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
  max-height: 260px;
  padding: 3px;
  display: grid;
  overflow-y: auto;
}
.pk-item {
  --rc: var(--r0);
  aspect-ratio: 1;
  cursor: help;
  background: var(--stripes),
    linear-gradient(135deg, color-mix(in srgb, var(--rc) 35%, var(--paper)), color-mix(in srgb, var(--rc) 70%, white));
  border: none;
  border-radius: 5px;
  place-items: center;
  padding: 0;
  display: grid;
  position: relative;
  box-shadow: inset 0 -3px #0000001a;
}
.pk-item img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 2px #00000040);
}
.pk-item b {
  background: var(--ink-bg);
  color: #fef8ec;
  font-family: var(--font-title);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 900;
  position: absolute;
  bottom: 1px;
  right: 2px;
}
.pk-item:hover,
.pk-item:focus-visible {
  box-shadow:
    0 0 0 3px var(--rc),
    0 4px 10px #3a251e33;
  outline: none;
}
.pk-stats {
  grid-template-columns: 1fr;
  gap: 0;
  display: grid;
}
.pk-stats > div {
  border-bottom: 1px dashed var(--line);
  justify-content: space-between;
  gap: 8px;
  padding: 3px 2px;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
}
.pk-stats > div span {
  color: var(--ink-2);
}
.pk-stats > div b {
  font-family: var(--font-title);
  text-align: right;
  font-weight: 900;
}
.pk-stats > div.up b {
  color: var(--green-t, var(--green-d, #387757));
}
.pk-stats > div.down b {
  color: var(--red);
}
.pk-stats > div.warn b {
  color: var(--gold-t, #956e21);
}
.pk-gtitle {
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 6px 0 0;
  font-size: 10px;
  font-weight: 900;
}
.pk-help {
  background: var(--paper);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  text-align: center;
  flex: none;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 800;
}
.pk-btn {
  gap: 6px;
}
.pk-note {
  background: var(--k-fff3d6);
  color: var(--gold-t, #715419);
  border-radius: 4px;
  margin: 4px 0 0;
  padding: 5px 9px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
}
.mv-dmg {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.mv-dmg-row {
  --c: var(--blue);
  align-items: center;
  gap: 8px;
  display: flex;
}
.mv-dmg-row > div:not(.typeicon) {
  flex: 1;
  min-width: 0;
}
.mv-dmg-row > .typeicon {
  flex: none;
}
.mv-dmg-top {
  justify-content: space-between;
  gap: 6px;
  display: flex;
}
.mv-dmg-top b {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 900;
}
.mv-dmg-top span {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.mv-dmg-dot {
  background: var(--slate, var(--ink-2));
  border-radius: 50%;
  flex: none;
  width: 22px;
  height: 22px;
}
.mv-dmg-row .pz-share {
  margin: 2px 0;
}
.mv-dmg-row small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.pz-centre .pz-items {
  overscroll-behavior: contain;
  max-height: min(34vh, 250px);
  margin: -4px;
  padding: 4px;
  overflow-y: auto;
}
.pz-nums {
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
  display: flex;
}
.pz-nums span {
  background: color-mix(in srgb, var(--c) 12%, var(--paper));
  border-radius: 4px;
  align-items: baseline;
  gap: 3px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}
.pz-nums i {
  color: var(--ink-2);
  text-transform: uppercase;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
}
.pz-ups {
  color: var(--green-t, #367355);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 900;
  display: flex;
}
.pz-ups i {
  color: var(--ink-2);
  text-transform: uppercase;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
}
.pz-mdesc {
  color: var(--ink-2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 3px 0 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
}
.pz-move.mv-clickable:hover,
.pz-move.mv-clickable:focus-visible {
  box-shadow:
    0 0 0 2px var(--c),
    0 4px 10px #3a251e26;
  outline: none;
}
.pz-gloss {
  align-self: flex-start;
}
@media (max-width: 900px), (max-height: 480px) {
  .pk-body {
    grid-template-columns: 1fr;
  }
  .mp-bar {
    padding: 6px 10px;
  }
  .gl-body,
  .mv-scroll {
    padding: 8px 10px 12px;
  }
  .gl-grid {
    grid-template-columns: 1fr;
  }
  .mv-ups {
    grid-template-columns: 1fr 1fr;
  }
}
.pz-stats > div.warn b {
  color: var(--gold-t, #956e21);
}
.gl-ov {
  z-index: 960;
}
.mp-body > .mp-bar {
  z-index: 3;
  border-radius: 5px;
  position: sticky;
  top: 0;
  box-shadow: 0 3px 10px #3a251e1f;
}
.mv-diff.mv-diff-card {
  background: 0 0;
  flex-flow: wrap;
  gap: 0 10px;
  margin-top: 3px;
  padding: 0;
}
.mv-diff-card .mv-diff-row {
  justify-content: flex-start;
  gap: 5px;
  font-size: 11.5px;
  line-height: 1.3;
}
.mv-diff-card small {
  font-size: 10.5px;
}
.pk-row {
  justify-content: center;
  margin-top: 8px;
  display: flex;
}
.pk-row .pk-btn {
  opacity: 0.85;
}
.pk-row .pk-btn:hover,
.pk-row .pk-btn:focus-visible {
  opacity: 1;
}
.pz-pfacts {
  --c: #8d67ad;
  margin-top: 6px;
}
.pz-dps {
  color: var(--ink-2);
  margin-top: 1px;
  font-weight: 800;
  display: block;
}
.pz-dps b {
  color: var(--ink);
  font-weight: 900;
}
.pz-dps i {
  opacity: 0.75;
  font-style: normal;
  font-weight: 700;
}
.pz-others {
  margin-top: 10px;
}
.pz-other {
  background: color-mix(in srgb, var(--c) 9%, var(--paper));
  border-left: 4px solid var(--c);
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding: 6px 9px;
  display: flex;
}
.pz-other .pz-mh {
  justify-content: space-between;
  gap: 8px;
  display: flex;
}
.pz-other .pz-mh span {
  color: var(--ink-2);
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 800;
}
.pz-other small {
  color: var(--ink-2);
  font-weight: 800;
}
.pz-other .mv-dmg-dot {
  flex: none;
  width: 20px;
  height: 20px;
}
.mv-dmg-row > img,
.pz-other > img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  object-fit: contain;
  flex: none;
}
:root {
  --bp-gold: #b18327;
  --bp-gold-d: #8f6a1f;
  --bp-gold-bg: #b1832729;
  --bp-gold-bg-2: #b1832757;
  --bp-badge-a: #d39e36;
  --bp-badge-b: #b18327;
  --bp-badge-ink: #311f19;
  --bp-ing-a: #e6c88d;
  --bp-ing-b: #d4a23c;
  --bp-surface: var(--paper);
  --bp-surface-2: var(--paper-2);
  --bp-line: var(--line);
  --bp-ink: var(--ink);
  --bp-ink-2: var(--ink-2);
  --bp-ok: var(--green-d);
  --bp-ok-bg: #47966f29;
}
.card.bp-on {
  position: relative;
}
.card.bp-on:before {
  content: "";
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 3px var(--bp-gold),
    inset 0 0 14px #b1832759;
  position: absolute;
  inset: 0;
}
.bp-badge {
  z-index: 5;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--bp-badge-a), var(--bp-badge-b));
  color: var(--bp-badge-ink);
  font-family: var(--font-title);
  letter-spacing: 0.3px;
  pointer-events: none;
  text-shadow: none;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 2px 11px 2px 7px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translate(-50%);
  box-shadow:
    0 2px #60321859,
    0 3px 8px #00000033;
}
.bp-badge.ing {
  background: linear-gradient(180deg, var(--bp-ing-a), var(--bp-ing-b));
}
.bp-badge .bp-star {
  color: var(--bp-badge-ink);
}
.card.bp-on > .bp-badge {
  inset: 8px 8px auto auto;
  transform: none;
}
.bp-ov {
  padding: 4vh 14px;
}
.bp-ov .bp-panel {
  width: min(1060px, 100vw - 28px);
  height: min(720px, 92vh);
  max-height: 100%;
}
.bp-sum {
  background: var(--bp-surface);
  flex: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 0.7fr) minmax(0, 1.15fr);
  gap: 8px;
  padding: 10px 16px;
  display: grid;
  box-shadow: 0 2px #3a251e14;
}
.bp-sum-grp {
  background: var(--bp-surface-2);
  border-radius: 5px;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 6px 8px 8px;
  transition: box-shadow 0.12s;
  display: flex;
  box-shadow: inset 0 0 0 2px #00000000;
}
.bp-sum-grp.cur {
  box-shadow: inset 0 0 0 2px var(--bp-gold);
}
.bp-sum-lbl {
  color: var(--bp-ink);
  font-family: var(--font-title);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  background: 0 0;
  border: none;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 900;
  display: inline-flex;
}
.bp-sum-lbl:hover,
.bp-sum-lbl:focus-visible {
  color: var(--bp-gold-d);
  outline: none;
}
.bp-slots {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}
.bp-slots.open {
  scrollbar-width: thin;
  max-height: 76px;
  margin: -4px -4px 0 0;
  padding: 4px 4px 0 0;
  overflow-y: auto;
}
.bp-slot {
  width: 34px;
  height: 34px;
  box-shadow: none;
  background: 0 0;
  border: none;
  border-radius: 50%;
  flex: none;
  place-items: center;
  padding: 0;
  display: grid;
  position: relative;
}
span.bp-slot {
  box-shadow: none;
  border: 2px dashed var(--bp-line);
}
.bp-slot.on {
  cursor: pointer;
  background: var(--bp-gold-bg);
  box-shadow: inset 0 0 0 2.5px var(--bp-gold);
  transition: transform 0.12s;
}
.bp-slot.on:hover,
.bp-slot.on:focus-visible {
  outline: none;
  transform: scale(1.1);
}
.bp-slot-img {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}
.bp-slot .fi-art img,
.bp-slot img {
  max-width: 28px;
  max-height: 28px;
}
.bp-slot-x {
  background: var(--ink-bg, #402b24);
  color: #fef8ec;
  opacity: 0;
  border-radius: 50%;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  transition:
    opacity 0.12s,
    transform 0.12s;
  display: grid;
  position: absolute;
  top: -4px;
  right: -4px;
  transform: scale(0.6);
}
.bp-slot.on:hover .bp-slot-x,
.bp-slot.on:focus-visible .bp-slot-x {
  opacity: 1;
  transform: none;
}
.bp-bar {
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 6px;
  display: flex;
}
.bp-bar .seg {
  flex: none;
}
.bp-bar .field {
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
  font-size: 14px;
}
.bp-pillcount {
  background: var(--bp-surface-2);
  color: var(--bp-ink-2);
  border-radius: 4px;
  margin-left: 7px;
  padding: 0 7px;
  font-size: 11.5px;
  font-weight: 900;
}
.pill.on .bp-pillcount {
  background: var(--bp-gold-bg-2);
  color: var(--bp-gold-d);
}
.bp-note {
  min-height: 20px;
  color: var(--bp-gold-d);
  flex: none;
  padding: 0 16px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 20px;
}
.bp-body {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
  padding: 6px 16px 16px;
  display: flex;
  overflow-y: auto;
}
.bp-count {
  background: var(--bp-surface);
  font-family: var(--font-title);
  letter-spacing: 0;
  color: var(--bp-ink-2);
  border-radius: 4px;
  padding: 1px 10px;
  font-size: 12px;
  font-weight: 900;
}
.bp-count.full {
  background: var(--bp-gold-bg-2);
  color: var(--bp-gold-d);
}
.bp-count.shake {
  animation: 0.4s bpShake;
}
@keyframes bpShake {
  20%,
  60% {
    transform: translate(-4px);
  }
  40%,
  80% {
    transform: translate(4px);
  }
}
.bp-types {
  flex-wrap: wrap;
  gap: 3px;
  display: flex;
}
.bp-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  display: grid;
}
.bp-grid.fus {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.bp-opt {
  --c: var(--blue);
  text-align: left;
  cursor: pointer;
  background: var(--bp-surface);
  min-width: 0;
  color: var(--bp-ink);
  box-shadow: inset 0 0 0 2px var(--bp-line);
  border: none;
  border-radius: 5px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  transition:
    transform 0.1s,
    box-shadow 0.12s,
    background 0.12s,
    opacity 0.12s;
  display: flex;
  position: relative;
}
.bp-opt:hover,
.bp-opt:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--c),
    0 3px 8px #3a251e1f;
  outline: none;
  transform: translateY(-1px);
}
.bp-opt.on {
  background: var(--bp-gold-bg-2);
  box-shadow: inset 0 0 0 3px var(--bp-gold);
}
.bp-opt.ing {
  box-shadow: inset 0 0 0 2px var(--bp-ing-b);
}
.bp-opt.lock {
  opacity: 0.45;
  filter: saturate(0.5);
}
.bp-opt.lock:hover,
.bp-opt.lock:focus-visible {
  box-shadow: inset 0 0 0 2px var(--bp-line);
  transform: none;
}
.bp-opt .typeicon {
  flex: none;
}
.bp-tx {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  line-height: 1.2;
  display: flex;
}
.bp-tx b {
  font-family: var(--font-title);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 900;
  overflow: hidden;
}
.bp-tx small {
  color: var(--bp-ink-2);
  font-size: 11px;
  font-weight: 800;
}
.bp-opt.vit .bp-tx small {
  white-space: normal;
}
.bp-tick {
  background: var(--bp-gold);
  width: 22px;
  height: 22px;
  color: var(--bp-badge-ink);
  border-radius: 50%;
  flex: none;
  place-items: center;
  margin-left: auto;
  display: grid;
  box-shadow: 0 1px #60321866;
}
.bp-tick .uiicon,
.bp-tick img {
  width: 14px;
  height: 14px;
}
.bp-opt.fus .bp-tick {
  align-self: flex-start;
}
.bp-star {
  color: var(--bp-gold);
  vertical-align: middle;
  flex: none;
  line-height: 0;
  display: inline-block;
}
.bp-ing {
  background: var(--bp-gold-bg-2);
  border-radius: 4px;
  flex: none;
  padding: 0 8px;
  color: var(--bp-gold-d) !important;
}
.bp-vit-img {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
  flex: none;
}
.bp-opt.fus {
  align-items: flex-start;
}
.bp-opt.fus .bp-tx b {
  white-space: normal;
}
.bp-opt.fus .fi-art img,
.bp-opt.fus .fi-art {
  flex: none;
}
.bp-open .bp-star {
  color: var(--bp-gold);
}
.bp-open.has {
  box-shadow: inset 0 0 0 2px var(--bp-gold);
}
.ls-cta .bp-open {
  flex: none;
  align-self: center;
  margin: 0;
  padding: 10px 14px;
  font-size: 14px;
}
.bp-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}
.bp-prog {
  background: var(--bp-gold-bg);
  box-shadow: inset 0 0 0 2px var(--bp-gold);
  border-radius: 5px;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px 11px;
  display: flex;
}
.bp-prog-head {
  color: var(--bp-ink-2);
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
}
.bp-prog-head b {
  font-family: var(--font-title);
  color: var(--bp-ink);
  font-size: 14px;
  font-weight: 900;
}
.bp-prog-head span {
  margin-left: auto;
}
.bp-prog-bar {
  background: #00000014;
  border-radius: 4px;
  height: 7px;
  overflow: hidden;
}
.bp-prog-bar i {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bp-badge-a), var(--bp-badge-b));
  height: 100%;
  transition: width 0.3s;
  display: block;
}
.bp-pcs {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}
.bp-pc {
  background: var(--bp-surface);
  box-shadow: inset 0 0 0 1.5px var(--bp-line);
  opacity: 0.75;
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 5px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
}
.bp-pc.ok {
  opacity: 1;
  background: var(--bp-ok-bg);
  box-shadow: inset 0 0 0 2px var(--green);
  color: var(--bp-ink);
}
.bp-pc-img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
@media (max-width: 640px), (max-height: 560px) {
  .bp-ov {
    padding: 6px;
  }
  .bp-ov .bp-panel {
    height: calc(100vh - 12px);
  }
  .bp-note {
    min-height: 0;
    line-height: 1.2;
  }
  .bp-note:empty {
    display: none;
  }
  .bp-types {
    scrollbar-width: none;
    flex-wrap: nowrap;
    flex: none;
    overflow-x: auto;
  }
  .bp-sum {
    gap: 6px;
    padding: 6px 10px;
  }
  .bp-sum-grp {
    padding: 4px 6px 6px;
  }
  .bp-slot {
    width: 30px;
    height: 30px;
  }
  .bp-slot-img {
    width: 20px;
    height: 20px;
  }
  .bp-bar {
    gap: 6px;
    padding: 6px 10px 4px;
  }
  .bp-bar .pill {
    padding: 5px 10px;
    font-size: 12.5px;
  }
  .bp-body {
    gap: 8px;
    padding: 4px 10px 12px;
  }
  .bp-grid,
  .bp-grid.fus {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
  .bp-badge {
    padding: 1px 9px 1px 6px;
    font-size: 10px;
    bottom: 6px;
  }
}
@media (max-width: 640px) {
  .bp-sum {
    grid-template-columns: 1fr;
  }
  .bp-sum-grp {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .bp-sum-lbl {
    flex: none;
  }
  .bp-slots {
    flex-wrap: nowrap;
  }
  .bp-slots.open {
    scrollbar-width: none;
    min-width: 0;
    max-height: none;
    overflow: auto hidden;
  }
  .bp-slot {
    width: 26px;
    height: 26px;
  }
  .bp-slot-img {
    width: 18px;
    height: 18px;
  }
  .bp-bar {
    flex-wrap: wrap;
  }
  .bp-bar .seg {
    width: 100%;
  }
  .bp-bar .seg .pill {
    flex: 1;
    padding: 5px 4px;
  }
  .bp-pillcount {
    display: none;
  }
}
@media (hover: none) {
  .bp-slot-x {
    opacity: 1;
    transform: none;
  }
}
:root {
  --bp-warn: var(--red-t, #aa2f26);
  --bp-warn-bg: #c530261f;
}
.bp-slot.on.warn {
  box-shadow: inset 0 0 0 2.5px var(--bp-gold);
}
.bp-slot.warn:after {
  content: "!";
  color: #fef8ec;
  width: 15px;
  height: 15px;
  font-family: var(--font-title);
  background: #c53026;
  border-radius: 50%;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  position: absolute;
  bottom: -3px;
  left: -3px;
  box-shadow: 0 1px #0000004d;
}
.bp-alert {
  color: #fef8ec;
  width: 15px;
  height: 15px;
  font-family: var(--font-title);
  background: #c53026;
  border-radius: 50%;
  flex: none;
  place-items: center;
  margin-left: 5px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  display: inline-grid;
}
.bp-warnbox {
  background: var(--bp-warn-bg);
  border-radius: 5px;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: flex;
  box-shadow: inset 0 0 0 2px #c53026;
}
.bp-warn-tx {
  flex-direction: column;
  flex: 1;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.bp-warn-tx p {
  color: var(--bp-ink);
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
  display: flex;
}
.bp-warn-tx b {
  font-family: var(--font-title);
  color: var(--bp-warn);
  font-weight: 900;
}
.bp-warn-img {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  flex: none;
}
.bp-warnbox .btn {
  flex: none;
}
.bp-grid.items {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.bp-opt.item {
  align-items: flex-start;
}
.bp-opt.item .bp-vit-img {
  margin-top: 2px;
}
.bp-opt.item .bp-tx b {
  white-space: normal;
}
.bp-rar {
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  display: flex;
}
.bp-dot {
  background: var(--c, var(--rc, var(--bp-line)));
  border-radius: 50%;
  flex: none;
  width: 8px;
  height: 8px;
  display: inline-block;
}
.bp-desc {
  white-space: normal;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden;
  font-weight: 700 !important;
}
.bp-un {
  background: var(--bp-warn-bg);
  color: var(--bp-warn);
  border-radius: 4px;
  padding: 0 8px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 900;
  box-shadow: inset 0 0 0 1.5px #c53026;
}
.bp-opt.item.unreach:not(.on) {
  box-shadow: inset 0 0 0 2px var(--bp-line);
}
.bp-rars {
  gap: 5px;
}
.bp-rarf {
  --rc: var(--bp-line);
  background: var(--bp-surface-2);
  color: var(--bp-ink-2);
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--bp-line);
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 900;
  display: inline-flex;
}
.bp-rarf .bp-dot {
  background: var(--rc);
}
.bp-rarf:hover,
.bp-rarf:focus-visible {
  color: var(--bp-ink);
  box-shadow: inset 0 0 0 2px var(--rc);
  outline: none;
}
.bp-rarf.on {
  background: var(--bp-surface);
  color: var(--bp-ink);
  box-shadow:
    inset 0 0 0 2.5px var(--rc),
    var(--shadow-sm);
}
:root[data-theme="dark"] {
  --bp-warn: #e88c86;
  --bp-warn-bg: #df5e5429;
}
@media (max-height: 560px) {
  .bp-warnbox {
    gap: 6px;
    padding: 4px 8px;
  }
  .bp-warn-tx p {
    font-size: 11.5px;
  }
  .bp-warn-img {
    width: 16px;
    height: 16px;
  }
}
.lk-fx {
  --lk: #f5ebd6;
}
.lk-fx-neon,
.lk-fx-shadow,
.lk-fx-aurora,
.lk-fx-galaxy {
  animation: 2.4s ease-in-out infinite lkPulse;
}
.lk-fx-flame,
.lk-fx-magma {
  animation: 1.1s ease-in-out infinite lkFlicker;
}
.lk-fx-crystal,
.lk-fx-metal {
  animation: 2.8s ease-in-out infinite lkShine;
}
.lk-fx-holo {
  animation: 3.6s linear infinite lkHolo;
}
@keyframes lkPulse {
  0%,
  to {
    filter: drop-shadow(0 0 2px var(--lk));
  }
  50% {
    filter: drop-shadow(0 0 8px var(--lk));
  }
}
@keyframes lkFlicker {
  0%,
  to {
    filter: brightness(1) drop-shadow(0 0 3px var(--lk));
  }
  40% {
    filter: brightness(1.14) drop-shadow(0 0 7px var(--lk));
  }
  70% {
    filter: brightness(0.96) drop-shadow(0 0 4px var(--lk));
  }
}
@keyframes lkShine {
  0%,
  to {
    filter: brightness();
  }
  50% {
    filter: brightness(1.22) contrast(1.06);
  }
}
@keyframes lkHolo {
  0% {
    filter: hue-rotate(-28deg);
  }
  50% {
    filter: hue-rotate(28deg);
  }
  to {
    filter: hue-rotate(-28deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lk-fx {
    animation: none !important;
  }
}
.lk-lockbadge {
  z-index: 3;
  background: var(--paper);
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  display: grid;
  position: absolute;
  bottom: -2px;
  right: -2px;
  box-shadow: 0 1px 4px #3a251e59;
}
.lk-lockbadge img {
  width: 14px;
  height: 14px;
}
.av.lk-av .av-pic {
  background: var(--paper-2);
}
.wd-card .lk-av {
  flex: none;
  margin: 16px;
}
.q-lkwho .lk-av {
  margin: 8px 8px 8px 6px;
}
.q-card .lk-q-ic {
  margin: 0 8px;
}
.q-card .lk-q-ic .lk-av {
  margin: 10px 4px;
}
.lk-av {
  position: relative;
}
.ls-roster .wd {
  display: none;
}
.ls-roster.wd-on .wd {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
  display: flex;
}
.ls-roster.wd-on .ls-types,
.ls-roster.wd-on .ls-grid,
.ls-roster.wd-on .ls-foot,
.ls-roster.wd-on .ls-team {
  display: none;
}
.wd-strip {
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  background: var(--paper-2);
  border-radius: 6px;
  flex: none;
  gap: 6px;
  padding: 6px 4px 8px;
  display: flex;
  overflow-x: auto;
}
.wd-mon {
  background: var(--paper);
  cursor: pointer;
  scroll-snap-align: center;
  box-shadow: inset 0 0 0 2px var(--line);
  border: none;
  border-radius: 50%;
  flex: none;
  padding: 3px;
  transition: transform 0.12s;
  position: relative;
}
.wd-mon:hover,
.wd-mon:focus-visible {
  box-shadow: inset 0 0 0 2px var(--blue);
  outline: none;
  transform: translateY(-2px);
}
.wd-mon.on {
  box-shadow:
    0 0 0 3px var(--yellow),
    0 0 12px #d19b2e99;
  transform: scale(1.08);
}
.wd-n {
  background: var(--purple);
  color: #fef8ec;
  text-align: center;
  border-radius: 4px;
  min-width: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 900;
  line-height: 18px;
  position: absolute;
  bottom: -3px;
  right: -3px;
  box-shadow: 0 1px 3px #3a251e66;
}
.wd-team {
  background: var(--yellow);
  clip-path: polygon(50% 0, 62% 35%, 98% 35%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 35%, 38% 35%);
  filter: drop-shadow(0 1px 1px #3a251e80);
  width: 17px;
  height: 17px;
  position: absolute;
  top: -2px;
  left: -2px;
}
.wd-pane {
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-height: 0;
  padding: 2px 4px 6px;
  display: flex;
  overflow-y: auto;
}
.wd-head {
  align-items: center;
  gap: 14px;
  display: flex;
}
.wd-pvbox {
  background: linear-gradient(160deg, var(--k-e9e4ff), var(--k-d4ecff));
  border-radius: 6px;
  flex-direction: column;
  flex: none;
  align-items: center;
  gap: 2px;
  width: 128px;
  padding: 8px;
  display: none;
  box-shadow: inset 0 0 0 3px #f5ebd699;
}
.wd-pv {
  place-items: end center;
  height: 104px;
  display: grid;
}
.wd-pv canvas {
  max-width: 112px;
  max-height: 104px;
  image-rendering: pixelated;
}
.wd-pvbox small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 900;
}
.wd-who small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 900;
}
.wd-who h2 {
  font-family: var(--font-title);
  color: var(--ink);
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}
.wd-count {
  background: var(--k-f1e9ff);
  color: var(--purple-t, var(--purple-d));
  border-radius: 4px;
  margin-top: 2px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 900;
  display: inline-block;
}
.wd-who p {
  color: var(--ink-3);
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 700;
}
.wd-cards {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-items: start;
  gap: 10px;
  display: grid;
}
.wd-card {
  --lc: #8297a7;
  background: var(--paper);
  box-shadow:
    inset 0 0 0 2px var(--line),
    0 3px 0 #3a251e1a;
  cursor: default;
  border-radius: 6px;
  outline: none;
  flex-direction: column;
  gap: 4px;
  padding: 6px 12px 12px 0;
  transition:
    transform 0.12s,
    box-shadow 0.15s;
  display: flex;
  position: relative;
}
.wd-card:not(.locked) {
  cursor: pointer;
}
.wd-card:hover,
.wd-card:focus-within {
  box-shadow:
    inset 0 0 0 3px var(--lc),
    0 5px 0 #3a251e24;
  transform: translateY(-2px);
}
.wd-card.worn {
  background: var(--k-f4fff8);
  box-shadow:
    inset 0 0 0 3px var(--green),
    0 3px 0 #3a251e24;
}
.wd-card.ready {
  box-shadow:
    inset 0 0 0 3px var(--yellow),
    0 0 14px #d19b2e99;
}
.wd-card.locked .av {
  filter: grayscale(0.85) brightness(0.92);
  opacity: 0.75;
}
.wd-card.pop {
  animation: 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) lkPop;
}
@keyframes lkPop {
  0% {
    transform: scale(0.94);
  }
  50% {
    transform: scale(1.05);
  }
  to {
    transform: scale(1);
  }
}
.wd-c-top {
  align-items: center;
  display: flex;
}
.wd-c-tx {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  display: flex;
}
.wd-c-tx b {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
}
.wd-c-tx small {
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 800;
}
.wd-c-desc,
.wd-card .lk-how,
.wd-card .lk-bar,
.wd-c-act {
  margin-left: 12px;
}
.wd-c-desc {
  color: var(--ink-3);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}
.wd-card .lk-how {
  color: var(--ink);
  align-items: flex-start;
  gap: 6px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
  display: flex;
}
.wd-card .lk-how img {
  flex: none;
  margin-top: 1px;
}
.wd-c-act {
  justify-content: flex-end;
  margin-top: 2px;
  display: flex;
}
.lk-rar {
  color: #fef8ec;
  background: var(--lc);
  border-radius: 4px;
  padding: 1px 9px;
  font-size: 10.5px;
  font-weight: 900;
}
.lk-bar {
  height: 16px;
  margin-top: 4px;
}
.lk-bar > i {
  background: linear-gradient(#8cb4d2, #437fac);
}
.lk-bar.ready > i {
  background: linear-gradient(#daaf59, #ba8a29);
}
.lk-bar > b {
  text-shadow:
    0 0 2px #251813f2,
    0 1px 2px #251813e6;
  font-size: 11.5px;
}
.lk-worn {
  background: var(--k-e6faee);
  color: var(--green-t, var(--green-d));
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 6px 14px 6px 8px;
  font-size: 13px;
  font-weight: 900;
  display: inline-flex;
}
.ls-stagecard.lk-flash:after {
  content: "";
  border-radius: inherit;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  animation: 0.5s ease-out lkFlash;
  position: absolute;
  inset: 0;
}
@keyframes lkFlash {
  0% {
    opacity: 0.75;
  }
  to {
    opacity: 0;
  }
}
.ls-wd-btn {
  z-index: 3;
  background: var(--paper);
  color: var(--ink);
  font: 900 12px var(--font);
  cursor: pointer;
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  padding: 3px 12px 3px 7px;
  display: inline-flex;
  position: absolute;
  bottom: 8px;
  left: 50%;
  translate: -50%;
  box-shadow: 0 2px #3a251e33;
}
.ls-wd-btn:hover,
.ls-wd-btn:focus-visible {
  background: var(--k-f1e9ff);
  outline: none;
}
.ls-team {
  background: var(--paper-2);
  border-radius: 6px;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  display: flex;
}
.ls-team-head {
  flex-direction: column;
  line-height: 1.1;
  display: flex;
}
.ls-team-head b {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}
.ls-team-head small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.ls-team-row {
  flex: 1;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  display: flex;
}
.ls-tslot {
  --c: #8297a7;
  aspect-ratio: 1;
  background: var(--paper);
  cursor: pointer;
  min-width: 0;
  box-shadow: inset 0 0 0 2px var(--c);
  border: none;
  border-radius: 5px;
  flex: 0 46px;
  place-items: center;
  padding: 0;
  display: grid;
}
.ls-tslot.on {
  box-shadow:
    0 0 0 3px var(--yellow),
    inset 0 0 0 2px var(--c);
}
.ls-tslot:hover,
.ls-tslot:focus-visible {
  outline: none;
  transform: translateY(-2px);
}
.ls-tslot.empty {
  box-shadow: inset 0 0 0 2px var(--line);
  background: 0 0;
  border: 2px dashed #d6cec3;
}
.ls-tpic {
  border-radius: 4px;
  place-items: center;
  width: 100%;
  height: 100%;
  display: grid;
  overflow: hidden;
}
.ls-tpic img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: cover;
}
.ls-plus {
  width: 14px;
  height: 14px;
  position: relative;
}
.ls-plus:before,
.ls-plus:after {
  content: "";
  background: #ad98c0;
  border-radius: 2px;
  position: absolute;
}
.ls-plus:before {
  width: 3px;
  height: 14px;
  top: 0;
  left: 6px;
}
.ls-plus:after {
  width: 14px;
  height: 3px;
  top: 6px;
  left: 0;
}
.ls-star,
.ls-star-ic {
  clip-path: polygon(50% 0, 62% 35%, 98% 35%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 35%, 38% 35%);
  background: #f5ebd6;
}
.ls-star {
  z-index: 4;
  background: var(--k-d8d3ec);
  opacity: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 0;
  transition:
    opacity 0.12s,
    transform 0.12s;
  position: absolute;
  top: 3px;
  left: 3px;
}
.ls-tile:hover .ls-star,
.ls-tile:focus-visible .ls-star,
.ls-star.on {
  opacity: 1;
}
.ls-star.on {
  background: var(--yellow);
  filter: drop-shadow(0 1px 1px #3a251e99);
}
.ls-star:hover {
  transform: scale(1.2);
}
@media (hover: none) {
  .ls-star:not(.on) {
    opacity: 0.55;
  }
}
.ls-namerow {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  display: flex;
}
.ls-namerow h1 {
  margin: 0;
}
.ls-fav {
  background: var(--paper-2);
  color: var(--ink-2);
  font: 900 12px var(--font);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line);
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  display: inline-flex;
}
.ls-fav .ls-star-ic {
  background: #d0c8bb;
  width: 16px;
  height: 16px;
}
.ls-fav.on {
  background: var(--k-fff6d8);
  color: var(--gold-t, #715419);
  box-shadow: inset 0 0 0 2px var(--yellow);
}
.ls-fav.on .ls-star-ic {
  background: var(--yellow-d);
}
.ls-fav:hover,
.ls-fav:focus-visible {
  filter: brightness(1.05);
  outline: none;
}
.pf-teamrow {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  display: grid;
}
.pf-tmon {
  --c: #8297a7;
  background: var(--paper);
  box-shadow:
    inset 0 0 0 2px var(--c),
    var(--shadow-sm);
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 6px;
  display: flex;
}
.pf-tmon-pic {
  background: var(--paper-2);
  border-radius: 50%;
  place-items: center;
  width: 64px;
  height: 64px;
  display: grid;
  overflow: hidden;
}
.pf-tmon-pic img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  object-fit: cover;
}
.pf-tmon b {
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}
.ls-lkcount {
  z-index: 3;
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  padding: 1px 6px 1px 4px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  position: absolute;
  top: 4px;
  right: 4px;
  box-shadow: 0 1px 3px #3a251e4d;
}
.ls-lkcount .shiny-mark {
  width: 11px;
  height: 11px;
  position: static;
}
.dx-classic {
  z-index: 3;
  line-height: 0;
  position: absolute;
  bottom: 4px;
  right: 4px;
}
.dx-skin img.uiicon {
  flex: none;
}
.lk-un-ov {
  z-index: 80;
  background: #2a1b169e;
  place-items: center;
  padding: 16px;
  animation: 0.25s ease-out lkFade;
  display: grid;
  position: fixed;
  inset: 0;
}
@keyframes lkFade {
  0% {
    opacity: 0;
  }
}
.lk-un {
  --lc: #9d7db9;
  background: var(--paper);
  text-align: center;
  width: min(440px, 100%);
  box-shadow:
    var(--shadow),
    0 0 0 4px var(--lc);
  border-radius: 8px;
  padding: 18px 20px 20px;
  animation: 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) lkUn;
  position: relative;
  overflow: hidden;
}
@keyframes lkUn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(30px);
  }
}
.lk-un-rays {
  background: repeating-conic-gradient(from 0deg, #f5ebd600 0 12deg, #daaf5947 12deg 24deg);
  pointer-events: none;
  animation: 22s linear infinite lkSpin;
  position: absolute;
  inset: -60%;
}
@keyframes lkSpin {
  to {
    transform: rotate(360deg);
  }
}
.lk-un > * {
  position: relative;
}
.lk-un > .lk-un-rays {
  position: absolute;
}
.lk-un small {
  font-family: var(--font-title);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lc);
  font-size: 14px;
  font-weight: 900;
  display: block;
}
.lk-un-stage {
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 160px;
  margin: 12px 0 20px;
  display: flex;
}
.lk-un-stage canvas {
  max-width: 45%;
  height: auto;
  max-height: 170px;
  image-rendering: pixelated;
}
.lk-un h2 {
  font-family: var(--font-title);
  color: var(--ink);
  margin: 2px 0 4px;
  font-size: 26px;
  font-weight: 900;
}
.lk-un-sub {
  color: var(--ink-2);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}
.lk-un p {
  color: var(--ink-3);
  margin: 8px 0 12px;
  font-size: 14px;
  font-weight: 700;
}
.lk-un-act {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  display: flex;
}
.lk-q-ic {
  background: 0 0 !important;
  width: auto !important;
  height: auto !important;
}
.q-card.done .lk-q-ic {
  width: auto;
}
.q-card.q-look .lk-q-ic img.uiicon {
  width: 14px;
  height: 14px;
}
.q-card.focus {
  animation: 1.4s ease-out 2 lkFocus;
}
@keyframes lkFocus {
  0%,
  to {
    box-shadow: var(--shadow-sm);
  }
  50% {
    box-shadow:
      0 0 0 4px var(--blue),
      var(--shadow-sm);
  }
}
.q-lknote {
  opacity: 0.85;
  background: #0000000d;
  border-radius: 4px;
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
}
.q-lkgrid {
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 12px;
  display: grid;
}
.q-lkmon {
  background: var(--w55);
  box-shadow: inset 0 0 0 2px var(--line);
  border-radius: 7px;
  padding: 8px;
}
.q-lkmon.out {
  opacity: 0.55;
  filter: saturate(0.55);
}
.q-lkwho {
  align-items: center;
  gap: 10px;
  padding: 2px 6px 8px;
  display: flex;
}
.q-lkwho b {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 900;
}
.q-lkwho small {
  color: var(--ink-2);
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}
.q-lkpair {
  gap: 8px;
  display: grid;
}
.q-lkmon .q-card {
  gap: 10px;
  padding: 8px 10px;
}
.q-lkmon .q-card h3 {
  font-size: 15px;
}
.q-lkmon .q-card p {
  font-size: 12px;
}
.q-lkmon .q-card.done {
  padding: 6px 10px;
}
.q-lkmon .q-card.done p {
  white-space: normal;
}
@media (max-width: 900px) {
  .wd-pvbox {
    display: flex;
  }
  .ls-roster.wd-on .wd {
    flex: none;
  }
  .wd-pane {
    overflow: visible;
  }
  .wd-strip {
    z-index: 5;
    position: sticky;
    top: 0;
  }
}
@media (max-width: 900px) and (max-height: 560px) {
  .ls-roster.wd-on {
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    overflow-y: auto;
  }
}
@media (max-height: 560px) {
  .wd-who p {
    display: none;
  }
  .wd-card {
    padding-bottom: 8px;
  }
}
@media (max-width: 640px) {
  .wd-cards {
    grid-template-columns: 1fr;
  }
  .wd-card .btn {
    min-height: 40px;
  }
  .q-lkgrid {
    grid-template-columns: 1fr;
  }
  .lk-un h2 {
    font-size: 22px;
  }
}
html.touch .wd-strip.scroll {
  overscroll-behavior-y: auto;
}
@media (pointer: coarse), (max-height: 560px) {
  .wd-pvbox {
    display: flex;
  }
}
:root {
  --dxp-surface: var(--paper);
  --dxp-surface-2: var(--paper-2);
  --dxp-line: var(--line);
  --dxp-ink: var(--ink);
  --dxp-ink-2: var(--ink-2);
  --dxp-sel: var(--yellow);
  --dxp-sel-bg: #d19b2e29;
  --dxp-gold: var(--bp-gold, #b18327);
  --dxp-gold-bg: var(--bp-gold-bg);
  --dxp-off: 0.55;
}
.dxp-tabs {
  flex: none;
}
.dxp-tabs .pill {
  padding: 8px 18px;
  font-size: 15px;
}
.dxp-tabs .pill .uiicon,
.dxp-tabs .pill img {
  width: 18px;
  height: 18px;
}
.screen.dx .scr-head {
  min-width: 0;
}
.screen.dx .scr-title {
  flex: none;
}
.dx-hdbtn {
  flex: none;
  min-height: 44px;
}
.dx-hdbtn .dx-hdtx {
  white-space: nowrap;
}
.dx-gloss {
  background: var(--paper);
  box-shadow:
    0 3px 0 #3a251e40,
    var(--shadow-sm);
  gap: 8px;
  padding: 6px 16px;
  font-size: 14px;
}
.dx-gloss:hover {
  transform: translateY(-2px);
}
.dx-nb-new {
  position: absolute;
  top: -7px;
  right: -7px;
}
@media (max-width: 1240px) {
  .dx-hdbtn {
    padding: 6px 10px;
  }
  .dx-gloss .dx-hdtx,
  .dx-nb .dx-hdtx small {
    display: none;
  }
}
@media (max-width: 1000px) {
  .dx-nb .dx-hdtx {
    display: none;
  }
  .dxp-tabs .pill {
    padding: 7px 13px;
    font-size: 14px;
  }
}
.dx-stats {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}
.dx-chipstat {
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  border: none;
  border-radius: 4px;
  align-items: baseline;
  gap: 7px;
  padding: 3px 12px 5px;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.dx-chipstat small {
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 900;
}
.dx-chipstat b {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 900;
}
.dx-chipstat:after {
  content: "";
  height: 3px;
  width: calc(var(--f, 0) * 100%);
  background: linear-gradient(90deg, var(--red), var(--orange));
  position: absolute;
  bottom: 0;
  left: 0;
}
button.dx-chipstat {
  cursor: pointer;
}
button.dx-chipstat:hover,
button.dx-chipstat:focus-visible {
  box-shadow: inset 0 0 0 2px var(--yellow);
  outline: none;
  transform: none;
}
.dxp-main .dx-bar {
  gap: 8px;
}
.dxp-shape {
  flex: none;
  max-width: 190px;
  padding: 8px 12px;
  font-size: 13px;
}
.dxp-list {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
}
.dxp-item {
  --c: var(--blue);
  text-align: left;
  cursor: pointer;
  background: var(--dxp-surface);
  min-width: 0;
  color: var(--dxp-ink);
  box-shadow: inset 0 0 0 2px var(--dxp-line);
  border: none;
  border-radius: 5px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  transition:
    transform 0.1s,
    box-shadow 0.12s;
  display: flex;
  position: relative;
}
.dxp-item:hover,
.dxp-item:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--c),
    0 3px 8px #3a251e1f;
  outline: none;
  transform: translateY(-2px);
}
.dxp-item.on {
  background: var(--dxp-sel-bg);
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 5px var(--dxp-sel),
    var(--shadow-sm);
  z-index: 2;
  transform: scale(1.02);
}
.dxp-item .typeicon,
.dxp-item .fi-types {
  flex: none;
}
.dxp-item > .bp-star {
  position: absolute;
  top: 5px;
  right: 6px;
}
.dxp-tx {
  flex-direction: column;
  flex: 1;
  gap: 1px;
  min-width: 0;
  line-height: 1.2;
  display: flex;
}
.dxp-tx b {
  font-family: var(--font-title);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 900;
  overflow: hidden;
}
.dxp-tx small {
  color: var(--dxp-ink-2);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
}
.dxp-vimg {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  flex: none;
}
.dxp-vbig {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 3px #00000033);
  flex: none;
}
.dxp-list.vits {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 10px;
  padding: 8px 6px;
}
.dxp-item.vit {
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, var(--dxp-surface)), var(--dxp-surface) 70%);
  border-radius: 6px;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  min-height: 142px;
  padding: 14px 10px 12px;
}
.dxp-item.vit .dxp-vimg {
  filter: drop-shadow(0 3px 2px #0000002e);
  width: 52px;
  height: 52px;
}
.dxp-item.vit .dxp-tx {
  flex: none;
  align-items: center;
  gap: 3px;
  width: 100%;
}
.dxp-item.vit .dxp-tx b {
  max-width: 100%;
  font-size: 15px;
}
.dxp-item.vit .dxp-tx small {
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  line-height: 1.25;
  display: -webkit-box;
}
.dxp-item.vit > .bp-star {
  top: 8px;
  right: 9px;
}
.dxp-info {
  gap: 12px;
}
.dxp-head {
  background: color-mix(in srgb, var(--c, var(--blue)) 14%, var(--dxp-surface));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c, var(--blue)) 45%, transparent);
  border-radius: 6px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}
.dxp-head h2 {
  font-family: var(--font-title);
  margin: 0;
  font-size: 21px;
  font-weight: 900;
}
.dxp-head small {
  color: var(--dxp-ink-2);
  font-size: 12.5px;
  font-weight: 800;
}
.dxp-head .fi-tags {
  margin-top: 4px;
}
.dxp-head .fi-art img {
  width: 44px;
  height: 44px;
}
.dxp-info .mv-sheet.full {
  padding: 0;
}
.dxp-sec {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.dxp-sec .tag {
  margin-bottom: 0;
}
.dxp-note {
  color: var(--dxp-ink-2);
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
}
.dxp-plan {
  background: var(--dxp-surface-2);
  border-radius: 5px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  display: flex;
}
.dxp-plan.on {
  background: var(--dxp-gold-bg);
  box-shadow: inset 0 0 0 2px var(--dxp-gold);
}
.dxp-plan label {
  flex-direction: column;
  flex: 100%;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.dxp-plan label small {
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--dxp-ink-2);
  font-size: 10.5px;
  font-weight: 900;
}
.dxp-sel {
  text-overflow: ellipsis;
  width: 100%;
  min-width: 0;
  padding: 7px 12px;
  font-size: 14px;
}
.dxp-planbtn .bp-star {
  color: currentColor;
}
.dxp-planbtn.shake {
  animation: 0.4s bpShake;
}
.dxp-planmax {
  background: var(--paper);
  font-family: var(--font-title);
  color: var(--dxp-ink-2);
  white-space: nowrap;
  border-radius: 4px;
  margin-left: auto;
  padding: 2px 11px;
  font-size: 12px;
  font-weight: 900;
}
.dxp-planmax.full {
  background: var(--bp-gold-bg-2);
  color: var(--bp-gold-d);
}
.dxp-plan .dxp-note {
  flex: 100%;
}
.dxp-plan.none {
  font-weight: 800;
}
.dxp-by {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}
.dxp-by > small {
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--dxp-ink-2);
  font-size: 11px;
  font-weight: 900;
}
.dxp-mons {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 5px;
  display: grid;
}
.dxp-mon {
  --c: var(--blue);
  background: var(--dxp-surface-2);
  min-width: 0;
  box-shadow: inset 0 0 0 1.5px var(--dxp-line);
  border-radius: 4px;
  align-items: stretch;
  display: flex;
  overflow: hidden;
}
.dxp-mon.off .dxp-mon-go {
  opacity: var(--dxp-off);
}
.dxp-mon.on {
  background: var(--dxp-gold-bg);
  box-shadow: inset 0 0 0 2px var(--dxp-gold);
}
.dxp-mon-go {
  min-width: 0;
  color: var(--dxp-ink);
  text-align: left;
  cursor: pointer;
  background: 0 0;
  border: none;
  flex: 1;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 3px;
  display: flex;
}
.dxp-mon-go:hover,
.dxp-mon-go:focus-visible {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  outline: none;
}
.dxp-mon-go img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  flex: none;
}
.dxp-mon-go span {
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  display: flex;
}
.dxp-mon-go b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 900;
  overflow: hidden;
}
.dxp-mon-go small {
  color: var(--dxp-ink-2);
  font-size: 10.5px;
  font-weight: 800;
}
.dxp-mon-go.solo {
  background: var(--dxp-gold-bg);
  box-shadow: inset 0 0 0 1.5px var(--dxp-gold);
  border-radius: 4px;
  flex: none;
  padding-right: 12px;
}
.dxp-mon-star {
  cursor: pointer;
  width: 34px;
  color: var(--dxp-line);
  background: 0 0;
  border: none;
  flex: none;
  place-items: center;
  display: grid;
}
.dxp-mon-star .bp-star {
  color: #d2cabf;
}
.dxp-mon-star:hover .bp-star,
.dxp-mon-star:focus-visible .bp-star,
.dxp-mon-star.on .bp-star {
  color: var(--dxp-gold);
}
.dxp-mon-star:focus-visible {
  outline: 2px solid var(--dxp-gold);
  outline-offset: -2px;
}
.dxp-fus {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.dxp-fu {
  background: var(--dxp-surface-2);
  color: var(--dxp-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t1) 55%, transparent);
  border: none;
  border-radius: 5px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  display: flex;
}
.dxp-fu:hover,
.dxp-fu:focus-visible {
  box-shadow:
    inset 0 0 0 2px var(--t1),
    0 0 0 2px var(--t2);
  outline: none;
}
.dxp-fu-tx {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}
.dxp-fu .fu-pair {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.dxp-fu-to {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}
.dxp-fu-to b {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 900;
}
.dxp-fu-to small {
  background: var(--rc);
  color: #402b24;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
}
.dxp-levels {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}
.dxp-lv {
  background: var(--dxp-surface-2);
  border-radius: 4px;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 4px;
  display: flex;
}
.dxp-lv small {
  color: var(--dxp-ink-2);
  font-size: 10.5px;
  font-weight: 900;
}
.dxp-lv b {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 900;
}
.dxp-lv.max {
  background: var(--dxp-gold-bg);
  box-shadow: inset 0 0 0 2px var(--dxp-gold);
}
.dxp-rar {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 5px;
  display: grid;
}
.dxp-rar-row {
  background: var(--dxp-surface-2);
  box-shadow: inset 4px 0 0 var(--rc);
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
}
.dxp-rar-row b {
  font-family: var(--font-title);
  font-weight: 900;
}
.dxp-extra {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}
.dxp-extra span {
  background: var(--dxp-surface-2);
  border-radius: 4px;
  gap: 8px;
  padding: 3px 12px;
  font-size: 12.5px;
  font-weight: 800;
  display: inline-flex;
}
@media (max-width: 900px) {
  .dxp-info {
    overflow: visible;
  }
  .dxp-main .dx-bar {
    flex-wrap: wrap;
  }
  .dxp-shape {
    flex: 140px;
    max-width: none;
  }
}
@media (max-height: 560px) {
  .dxp-main .dx-bar {
    flex-wrap: nowrap;
  }
  .dxp-shape {
    max-width: 100px;
    padding: 5px 6px;
    font-size: 11.5px;
  }
  .dxp-main .dx-bar .seg {
    padding: 3px;
  }
  .dxp-main .dx-bar .seg .pill {
    padding: 4px 8px;
    font-size: 12px;
  }
  .dxp-main .dx-search {
    flex: 60px;
    min-width: 60px;
    padding: 5px 10px;
    font-size: 13px;
  }
  .dxp-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 5px;
  }
  .dxp-item {
    padding: 5px 8px;
  }
  .dxp-tx b {
    font-size: 13px;
  }
  .dxp-head {
    padding: 6px 10px;
  }
  .dxp-head h2 {
    font-size: 17px;
  }
  .dxp-plan {
    gap: 6px;
    padding: 6px 10px;
  }
  .dxp-mons {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  .dxp-tabs .pill {
    padding: 5px 12px;
    font-size: 13px;
  }
  .dxp-levels {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.dxp-list.items {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}
.dxp-item.it {
  gap: 9px;
  padding: 8px 12px 8px 8px;
}
.dxp-item.it .dxp-tx small {
  align-items: center;
  gap: 5px;
  display: flex;
}
.dxp-item.it.off {
  opacity: 0.6;
}
.dxp-item.it.off .dxp-vimg {
  filter: grayscale();
}
.dxp-ia {
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
  position: relative;
}
.dxp-ia .dxp-vimg {
  width: 34px;
  height: 34px;
}
.dxp-ia .ic-lock {
  width: 17px;
  height: 17px;
  bottom: -4px;
  right: -5px;
}
.dxp-ia .ic-lock .uiicon,
.dxp-ibimg {
  width: 11px;
  height: 11px;
}
.dxp-ibimg {
  image-rendering: pixelated;
}
.dxp-ic {
  cursor: default;
  animation: none;
}
.dxp-ic:hover {
  transform: none;
  box-shadow:
    0 2px #3a251e0d,
    0 8px 20px #3a251e1f;
}
.dxp-ic .ic-art {
  width: 84px;
  height: 84px;
}
.dxp-ic .ic-art > img {
  width: 62px;
  height: 62px;
}
.dxp-ic .ic-shadow {
  width: 38px;
  margin-left: -19px;
  bottom: 9px;
}
.dxp-ic .ic-name b {
  font-size: 21px;
}
.dxp-ic .ic-desc {
  flex: none;
  font-size: 14.5px;
}
.dxp-ic .ic-foot {
  flex-wrap: wrap;
}
.dxp-ic .ic-note .dxp-ibimg {
  width: 15px;
  height: 15px;
}
.dxp-price {
  background: var(--dxp-surface-2);
  color: var(--dxp-ink);
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 9px;
  font-style: normal;
  display: inline-flex;
}
.dxp-lab {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}
.dxp-labimg {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
}
.dxp-flavor {
  color: var(--dxp-ink-2);
  margin: -4px 0 0;
  font-size: 12.5px;
  font-style: italic;
  font-weight: 700;
}
.dxp-facts {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}
.dxp-facts span {
  background: var(--dxp-surface-2);
  border-radius: 4px;
  align-items: baseline;
  gap: 8px;
  padding: 3px 12px;
  display: inline-flex;
}
.dxp-facts small {
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--dxp-ink-2);
  font-size: 10.5px;
  font-weight: 900;
}
.dxp-facts b {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 900;
}
.dxp-warn {
  margin-top: 0;
}
@media (max-height: 560px) {
  .dxp-main .dxp-bar-items {
    flex-wrap: wrap;
  }
  .dxp-bar-items .dx-search {
    flex: 110px;
  }
  .dxp-bar-items .dxp-shape {
    flex: 100px;
    max-width: none;
  }
  .dxp-ic .ic-art {
    width: 64px;
    height: 64px;
  }
  .dxp-ic .ic-art > img {
    width: 46px;
    height: 46px;
  }
  .dxp-ic .ic-name b {
    font-size: 17px;
  }
  .dxp-ic .ic-desc {
    font-size: 13px;
  }
}
.cp {
  --link: #46956e;
  --link-d: #377556;
}
.btn.busy {
  opacity: 0.7;
}
.btn.sent {
  --c: var(--paper-2);
  --cd: var(--line);
  --tc: var(--ink-2);
}
.screen.cp.entry {
  --sec-w: 1680px;
}
.mm-pair {
  flex-direction: column;
  flex: 0 0 172px;
  gap: 8px;
  min-width: 0;
  display: flex;
}
.mm-pair > .mm-item.endless {
  text-align: left;
  flex-direction: row;
  flex: 1 1 0;
  justify-content: flex-start;
  gap: 8px;
  min-height: 0;
  padding: 4px 10px 4px 6px;
}
.mm-pair > .mm-item.endless .mm-ic {
  flex: none;
  width: 34px;
  height: 34px;
}
.mm-pair > .mm-item.endless .mm-ic img {
  width: 28px;
  height: 28px;
}
.mm-pair > .mm-item.endless .mm-tx {
  align-items: flex-start;
  min-width: 0;
}
.mm-pair > .mm-item.endless b {
  letter-spacing: -0.3px;
  font-size: 13px;
}
.mm-pair > .mm-item.endless small {
  font-size: 10px;
}
.mm-modes:has(.mm-pair .focus) .mm-pair {
  flex-basis: 186px;
}
.mm-item.endless.coop {
  background: radial-gradient(circle at 70% 18%, #f5ebd647, transparent 38%), var(--stripes),
    linear-gradient(160deg, #59b185, #3b7d5c 50%, #26523c);
  box-shadow:
    0 6px #38241d,
    0 12px 26px #336d5066;
}
.mm-item.endless.coop .mm-ic {
  box-shadow:
    inset 0 0 0 3px #f5ebd659,
    0 0 18px #90cbae8c;
}
.mm-item.endless.coop.focus {
  box-shadow:
    0 0 0 4px var(--paper),
    0 8px 0 #38241d,
    var(--shadow);
}
.mm-pair > .mm-item.coop.off {
  filter: saturate(0.35);
}
.mm-item .mm-beta {
  background: var(--paper);
  color: var(--green-t, #26523c);
  letter-spacing: 1px;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 8px;
  font-weight: 900;
  position: absolute;
  top: 4px;
  right: 6px;
}
.coop-team {
  pointer-events: none;
  z-index: 3;
  transform-origin: 0 0;
  scale: var(--hs, 1);
  opacity: var(--ho, 1);
  flex-direction: column;
  gap: 12px;
  display: flex;
  position: absolute;
  top: 150px;
  left: 22px;
}
.coop-mate {
  --c: var(--blue);
  --hp: 1;
  align-items: center;
  height: 54px;
  display: flex;
  position: relative;
}
.coop-med {
  z-index: 2;
  background: conic-gradient(var(--hpc, #4ea67a) calc(var(--hp) * 360deg), var(--line) 0);
  width: 54px;
  height: 54px;
  box-shadow:
    0 0 0 3px var(--paper),
    var(--shadow-sm);
  border-radius: 50%;
  flex: none;
  position: relative;
}
.coop-med > img {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  image-rendering: pixelated;
  background: radial-gradient(circle at 50% 36%, var(--paper) 48%, color-mix(in srgb, var(--c) 35%, var(--paper)));
  border: 3px solid var(--c);
  box-sizing: border-box;
  border-radius: 50%;
  position: absolute;
  inset: 5px;
}
.coop-lvl {
  white-space: nowrap;
  color: #fef8ec;
  font: 900 11px/1.3 var(--font-title);
  box-shadow: 0 0 0 2px var(--paper);
  background: linear-gradient(#554068 0 50%, #483128 50%);
  border-radius: 6px;
  padding: 0 7px 1px;
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translate(-50%) skew(-12deg);
}
.coop-plate {
  z-index: 1;
  isolation: isolate;
  flex-direction: column;
  gap: 1px;
  min-width: 150px;
  margin-left: -18px;
  padding: 4px 18px 5px 26px;
  display: flex;
  position: relative;
}
.coop-plate:before,
.coop-plate:after {
  content: "";
  transform-origin: 0 100%;
  border-radius: 3px 4px 4px 3px;
  position: absolute;
  inset: 0;
  transform: skew(-14deg);
}
.coop-plate:before {
  z-index: -1;
  background: var(--w96);
  box-shadow: var(--shadow-sm);
}
.coop-plate:after {
  z-index: -2;
  background: var(--stripes), linear-gradient(100deg, var(--c), color-mix(in srgb, var(--c) 55%, #402b24));
  inset: 5px -6px -5px 6px;
}
.coop-plate b {
  font: 800 12px/1.1 var(--font-title);
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
  overflow: hidden;
}
.coop-bar {
  background: var(--line);
  border-radius: 7px;
  height: 13px;
  margin: 1px 0;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1.5px #402b242e;
}
.coop-bar i {
  background: linear-gradient(#84c5a5, #489971);
  border-radius: 7px;
  width: 100%;
  transition: width 0.2s;
  position: absolute;
  inset: 0 auto 0 0;
}
.coop-bar span {
  font: 900 10px/1 var(--font-title);
  color: #39251e;
  text-shadow:
    0 0 3px #f5ebd6,
    0 0 3px #f5ebd6;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}
.coop-mate.down .coop-bar i {
  background: linear-gradient(#e9918a, #ba2e23);
}
.coop-plate small {
  color: var(--ink-2);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 900;
}
.coop-mate.down {
  --hpc: var(--red);
}
.coop-mate.down .coop-med {
  animation: 1s ease-in-out infinite coopDown;
}
.coop-mate.down .coop-med > img {
  filter: grayscale(0.6);
}
.coop-mate.down small {
  color: var(--red-t, var(--red-d));
}
@keyframes coopDown {
  50% {
    box-shadow:
      0 0 0 3px var(--paper),
      0 0 0 7px #df5e548c,
      var(--shadow-sm);
  }
}
.coop-mate.portal small {
  color: var(--purple-t, var(--purple-d));
}
.coop-mate.out .coop-med > img,
.coop-mate.lost .coop-med > img {
  filter: grayscale() opacity(0.7);
}
.coop-mate.out,
.coop-mate.lost {
  opacity: 0.7;
}
.coop-tag {
  pointer-events: none;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  display: flex;
  position: absolute;
  transform: translate(-50%, -100%);
}
.coop-tag b {
  color: #fef8eceb;
  font: 800 10px var(--font-title);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px #00000080;
  background: #301f1880;
  border-radius: 4px;
  max-width: 110px;
  padding: 0 6px 1px;
  overflow: hidden;
}
.coop-tag .coop-hp {
  background: #301f1899;
  border-radius: 6px;
  width: 70px;
  height: 11px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px #f5ebd6b3;
}
.coop-tag .coop-hp span {
  font: 900 8px/1 var(--font-title);
  color: #fef8ec;
  text-shadow:
    0 0 2px #000000,
    0 0 2px #000000;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}
.coop-tag .coop-hp i {
  background: linear-gradient(90deg, #4ea67a, #84c5a5);
  height: 100%;
  display: block;
}
.coop-tag.down b {
  background: #b02d23d9;
}
.coop-down {
  left: 50%;
  bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  pointer-events: none;
  z-index: 4;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  display: flex;
  position: absolute;
  transform: translate(-50%);
}
.coop-down b {
  font: 900 clamp(26px, 4vw, 44px) var(--font-title);
  color: #fef8ec;
  text-shadow: 0 3px #00000059;
}
.coop-down span {
  color: #fef8ec;
  background: #301f18c7;
  border-radius: 4px;
  padding: 4px 14px;
  font-weight: 800;
}
.coop-down .coop-hp {
  width: 240px;
  height: 10px;
  box-shadow: 0 0 0 2px var(--paper);
  background: #301f1899;
  border-radius: 5px;
  overflow: hidden;
}
.coop-down .coop-hp i {
  background: linear-gradient(90deg, #4ea67a, #84c5a5);
  height: 100%;
  transition: width 0.2s;
  display: block;
}
.coop-down:not(.lifting) .coop-hp i {
  background: linear-gradient(90deg, #ba2e23, #e26f66);
}
.coop-down em {
  font: 900 16px var(--font-title);
  color: #fef8ec;
  text-shadow: 0 2px #00000066;
  font-style: normal;
}
.coop-lift {
  pointer-events: none;
  z-index: 4;
  background: #301f18cc;
  border-radius: 5px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 16px 9px;
  display: flex;
  position: absolute;
  bottom: 24%;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 0 2px #92ccaf;
}
.coop-lift b {
  font: 900 16px var(--font-title);
  color: #fef8ec;
}
.coop-lift .coop-hp {
  background: #f5ebd633;
  border-radius: 5px;
  width: 200px;
  height: 9px;
  overflow: hidden;
}
.coop-lift .coop-hp i {
  background: linear-gradient(90deg, #4ea67a, #84c5a5);
  width: 0;
  height: 100%;
  transition: width 0.1s linear;
  display: block;
}
.coop-tag .coop-help {
  background: var(--paper);
  color: var(--red-t, var(--red-d, #9f271e));
  font: 900 11px var(--font-title);
  white-space: nowrap;
  border-radius: 4px;
  padding: 1px 8px;
  box-shadow: 0 2px #00000040;
}
.coop-tag .coop-help:empty {
  display: none;
}
.coop-tag.down .coop-hp i {
  background: linear-gradient(90deg, #4ea67a, #84c5a5);
}
.coop-tag.edge {
  animation: 1s ease-in-out infinite coopEdge;
  transform: translate(-50%, -50%);
}
@keyframes coopEdge {
  50% {
    transform: translate(-50%, -50%) scale(1.12);
  }
}
.coop-watch {
  pointer-events: none;
  z-index: 4;
  background: var(--w95);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  border-radius: 4px;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 6px;
  display: flex;
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%);
}
.coop-watch img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
  background: var(--paper);
  box-sizing: border-box;
  border: 3px solid #92ccaf;
  border-radius: 50%;
}
.coop-watch b {
  font: 900 16px var(--font-title);
}
.coop-watch small {
  color: var(--ink-2);
  border-left: 2px solid var(--line);
  padding-left: 10px;
  font-size: 12px;
  font-weight: 900;
}
.coop-mate.bubble .coop-med {
  box-shadow:
    0 0 0 3px #aac8de,
    0 0 12px 3px #aac8decc;
}
.coop-watch[hidden],
.coop-down[hidden],
.coop-portal[hidden],
.coop-tag[hidden],
.coop-lift[hidden] {
  display: none;
}
.coop-portal {
  background: var(--stripes), linear-gradient(100deg, #7d569f, #a689bf);
  color: #fef8ec;
  font: 900 14px var(--font-title);
  pointer-events: none;
  z-index: 3;
  box-shadow: var(--shadow);
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 6px 18px 6px 8px;
  display: flex;
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translate(-50%);
}
@media (prefers-reduced-motion: reduce) {
  .coop-mate.down .coop-med,
  .coop-tag.edge {
    animation: none !important;
  }
}
.tr-av {
  box-shadow:
    0 0 0 3px var(--paper),
    0 0 0 5px var(--c);
  border-radius: 50%;
  flex: none;
  display: inline-flex;
}
.cp-sum {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.cp-sum-row {
  background: var(--paper);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--c, #a78bc0) 45%, var(--paper)),
    0 2px 0 #160e0c1a;
  border-radius: 6px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  display: grid;
}
.cp-sum-row.me {
  box-shadow:
    inset 0 0 0 3px var(--c, #a78bc0),
    0 2px 0 #160e0c1a;
}
.cp-sum-row.gone {
  opacity: 0.72;
}
.cp-sum-av {
  background: color-mix(in srgb, var(--c, #a78bc0) 22%, var(--paper));
  border-radius: 50%;
  place-items: center;
  width: 44px;
  height: 44px;
  display: grid;
  overflow: hidden;
}
.cp-sum-av img,
.cp-sum-av canvas {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.cp-sum-tx {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  display: flex;
}
.cp-sum-tx b {
  font: 900 15px var(--font-title);
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.cp-sum-tx small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}
.cp-sum-bar {
  background: var(--paper-3);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.cp-sum-bar i {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c, #a78bc0), color-mix(in srgb, var(--c, #a78bc0) 60%, var(--paper)));
  height: 100%;
  display: block;
}
.cp-sum-dmg {
  text-align: right;
  flex-direction: column;
  display: flex;
}
.cp-sum-dmg b {
  font: 900 17px var(--font-title);
  color: var(--ink);
}
.cp-sum-dmg small {
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 800;
}
.ap {
  background: var(--paper-2);
  border-radius: 6px;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  display: flex;
}
.ap-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 8px;
  display: flex;
}
.ap-head b {
  font-family: var(--font-title);
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}
.ap-head small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.ap-row {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line);
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  display: flex;
}
.ap-row.on {
  box-shadow: inset 0 0 0 2px var(--green);
}
.ap-name {
  background: var(--paper-2);
  width: 112px;
  min-width: 0;
  font: 800 13px var(--font);
  color: var(--ink);
  border: none;
  border-radius: 4px;
  flex: 0 112px;
  padding: 5px 8px;
}
.ap-icons {
  flex: auto;
  align-items: center;
  gap: 2px;
  min-width: 0;
  display: flex;
  overflow: hidden;
}
.ap-icons img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  flex: none;
}
.ap-icons small {
  color: var(--ink-2);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}
.ap-row .btn {
  flex: none;
}
@media (max-width: 560px) {
  .ap-row {
    flex-wrap: wrap;
  }
  .ap-name {
    flex: 100%;
    width: auto;
  }
  .ap-icons {
    flex: 100%;
  }
}
.ap-fold {
  cursor: pointer;
  text-align: left;
  background: 0 0;
  border: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
}
.ap-fold small {
  text-align: right;
  flex: auto;
  min-width: 0;
}
.ap-chev {
  border-right: 3px solid var(--ink-2);
  border-bottom: 3px solid var(--ink-2);
  flex: none;
  width: 8px;
  height: 8px;
  transition: transform 0.15s;
  transform: rotate(-45deg);
}
.ap-fold[aria-expanded="true"] .ap-chev {
  transform: rotate(45deg);
}
.ap.folded {
  padding: 8px 12px;
}
.ap-ic {
  cursor: pointer;
  background: 0 0;
  border: none;
  border-radius: 6px;
  flex: none;
  padding: 0;
}
.ap-ic img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  display: block;
}
.ap-ic:hover {
  background: var(--line);
}
.lab-wrap > .ap {
  margin: 0 6px 12px;
}
.ev-scr .ev-main {
  --ev: #a689bf;
  flex: 1;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 18px;
  width: 100%;
  max-width: 1380px;
  min-height: 0;
  margin: 0 auto;
  display: grid;
}
.ev-pts {
  font-size: 20px;
}
.ev-side {
  border-radius: var(--radius);
  background: var(--w97);
  min-height: 0;
  max-height: 100%;
  box-shadow: var(--shadow);
  flex-direction: column;
  align-self: start;
  animation: 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both plateIn;
  display: flex;
  overflow: hidden;
}
.ev-hero {
  background: #452c23 50% / cover no-repeat;
  flex: none;
  align-items: flex-end;
  height: clamp(190px, 36vh, 400px);
  display: flex;
  position: relative;
}
.ev-hero:after {
  content: "";
  background: var(--stripes), linear-gradient(0deg, #2c1c16eb, #2c1c1659 55%, #2c1c160d);
  position: absolute;
  inset: 0;
}
.ev-hero-tx {
  z-index: 1;
  color: #fef8ec;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 18px 16px;
  display: flex;
  position: relative;
}
.ev-hero-tx small {
  background: var(--ev);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 900;
}
.ev-hero-tx h1 {
  font-family: var(--font-title);
  text-shadow: 0 3px #00000059;
  margin: 0;
  font-size: 27px;
  line-height: 1.08;
}
.ev-when {
  color: #e6c88d;
  background: #00000059;
  border-radius: 4px;
  align-items: center;
  gap: 7px;
  padding: 3px 12px 3px 9px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
}
.ev-when i {
  background: #d3cbbf;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.ev-when.live i {
  background: #df5e54;
  animation: 1.6s ease-out infinite evLive;
  box-shadow: 0 0 #df5e5499;
}
.ev-side-body {
  scrollbar-width: thin;
  flex-direction: column;
  flex: none;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  display: flex;
  overflow-y: auto;
}
.ev-stats {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}
.ev-stat {
  background: var(--paper-2);
  border-radius: 6px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  display: flex;
}
.ev-stat > small {
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
}
.ev-stat > b {
  font-family: var(--font-title);
  color: var(--ink);
  align-items: center;
  gap: 6px;
  font-size: 22px;
  font-weight: 900;
  display: flex;
}
.ev-stat > b img {
  width: 26px;
  height: 26px;
}
.ev-next {
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: var(--ink);
  text-align: left;
  background: color-mix(in srgb, var(--ev) 12%, var(--paper));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ev) 35%, var(--paper));
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  transition:
    transform 0.14s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.14s;
  display: flex;
}
.ev-next:hover {
  box-shadow: inset 0 0 0 2px var(--ev);
  transform: translateY(-2px);
}
.ev-next > .grow {
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  display: flex;
}
.ev-next small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}
.ev-next b {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 900;
}
.ev-next-rw {
  flex: none;
  place-items: center;
  width: 52px;
  display: grid;
}
.ev-next-rw .ev-rw small {
  display: none;
}
.ev-next-rw .ev-titlechip {
  padding: 4px;
  font-size: 0;
}
.ev-next .ev-bar {
  flex: none;
  height: 10px;
  margin-top: 2px;
}
.ev-next.ready {
  background: linear-gradient(100deg, var(--paper) 40%, var(--k-fff3c4));
  box-shadow:
    0 0 0 3px var(--yellow),
    0 0 18px #d19b2e80;
  animation: 1.6s ease-in-out infinite evReady;
}
.ev-next.ready img {
  width: 30px;
  height: 30px;
  animation: 1.4s ease-in-out infinite wobble;
}
.ev-next.done {
  cursor: default;
  color: var(--green-t, var(--green-d));
}
.ev-go {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
}
.ev-go img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  animation: 2.4s ease-in-out infinite float;
}
.ev-content {
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  display: flex;
}
.ev-tabs {
  scrollbar-width: none;
  flex-wrap: nowrap;
  flex: none;
  align-self: flex-start;
  max-width: 100%;
  overflow-x: auto;
}
.ev-tabs .pill {
  flex: none;
  padding: 9px 16px;
  font-size: 14px;
  position: relative;
}
.ev-tabs .pill .mm-badge {
  margin-left: 4px;
  position: static;
}
.ev-body {
  flex-direction: column;
  flex: 1;
  gap: 12px;
  min-height: 0;
  padding-bottom: 18px;
  display: flex;
}
.ev-body > * {
  flex: none;
}
.ev-card {
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  animation: 0.3s both slideUp;
  display: flex;
}
.ev-card > b {
  font-size: 17px;
}
.ev-card small {
  color: var(--ink-2);
  font-weight: 700;
}
.ev-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.ev-how-h {
  font-family: var(--font-title);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fef8ec;
  text-shadow: 0 1px 3px #00000099;
  margin: 4px 2px -2px;
  font-size: 13px;
  font-weight: 900;
}
.ev-how {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.ev-how li {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  animation: slideUp 0.35s var(--d, 0s) both;
  border-radius: 6px;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  display: flex;
}
.ev-how-ic {
  background: color-mix(in srgb, var(--ev) 16%, var(--paper));
  border-radius: 5px;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
  position: relative;
}
.ev-how-ic img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
}
.ev-how-ic i {
  background: var(--ev);
  color: #fef8ec;
  width: 22px;
  height: 22px;
  box-shadow: 0 0 0 2px var(--paper);
  border-radius: 50%;
  place-items: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  display: grid;
  position: absolute;
  top: -6px;
  right: -6px;
}
.ev-trackhead {
  flex-flow: wrap;
  align-items: center;
  gap: 14px;
}
.ev-trackhead > .grow {
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  display: flex;
}
.ev-bar {
  flex: 220px;
  height: 22px;
}
.ev-bar i {
  transform-origin: 0;
  background: linear-gradient(90deg, #d27d4c, var(--ev));
  position: absolute;
  inset: 0;
}
.ev-bar b {
  color: #fef8ec;
  text-shadow: 0 1px #00000066;
  place-items: center;
  font-size: 12px;
  display: grid;
  position: absolute;
  inset: 0;
}
.ev-track {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  display: grid;
}
.ev-step {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-align: center;
  animation: slideUp 0.3s var(--d, 0s) both;
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  display: flex;
  position: relative;
}
.ev-step.todo {
  background: var(--w88);
}
.ev-step.todo .ev-step-rw {
  filter: saturate(0.55);
  opacity: 0.8;
}
.ev-step.ready {
  box-shadow:
    0 0 0 3px var(--yellow),
    0 0 18px #d19b2e80,
    var(--shadow-sm);
  animation:
    slideUp 0.3s var(--d, 0s) both,
    evReady 1.6s 0.4s ease-in-out infinite;
}
.ev-step.done {
  background: color-mix(in srgb, var(--green) 10%, var(--paper));
}
.ev-step.done .ev-step-rw {
  opacity: 0.7;
}
.ev-step-at {
  background: var(--ev);
  color: #fef8ec;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 13px;
  display: flex;
}
.ev-step.done .ev-step-at {
  background: var(--green-d);
}
.ev-step-rw {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 64px;
  display: flex;
}
.ev-step-st {
  color: var(--ink-2);
  align-items: center;
  gap: 4px;
  font-size: 12px;
  display: flex;
}
.ev-step.done .ev-step-st {
  color: var(--green-t, var(--green-d));
}
.ev-step .q-claim {
  width: 100%;
}
.ev-rw {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 150px;
  display: inline-flex;
}
.ev-rw small {
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.15;
}
.ev-rw > img,
.ev-rw .ev-pic img,
.ev-rw-bag img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}
.ev-pic {
  background: #452c23;
  border-radius: 50%;
  place-items: center;
  width: 44px;
  height: 44px;
  display: grid;
  overflow: hidden;
}
.ev-pic img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.ev-clanpic {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
}
.ev-titlechip {
  background: linear-gradient(90deg, var(--k-ffe7b0), var(--k-e6d6ff));
  color: var(--ink-on);
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  display: inline-flex;
}
.ev-qrw {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 4px;
  display: flex;
}
@keyframes evLive {
  0% {
    box-shadow: 0 0 #df5e5499;
  }
  70%,
  to {
    box-shadow: 0 0 0 7px #df5e5400;
  }
}
@keyframes evReady {
  0%,
  to {
    filter: none;
  }
  50% {
    filter: brightness(1.06);
  }
}
@media (max-width: 900px) {
  .ev-scr .ev-main {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .ev-side {
    flex-direction: row;
    align-self: stretch;
  }
  .ev-hero {
    flex: 45%;
    height: auto;
    min-height: 150px;
  }
  .ev-side-body {
    flex: 55%;
    overflow: visible;
  }
  .ev-go {
    margin-top: 0;
  }
}
@media (max-width: 560px) {
  .ev-side {
    flex-direction: column;
  }
  .ev-hero {
    flex: none;
    min-height: 120px;
  }
  .ev-hero-tx h1 {
    font-size: 22px;
  }
  .ev-track {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}
@media (max-height: 560px) {
  .ev-scr .ev-main {
    grid-template-rows: none;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
    gap: 12px;
  }
  .ev-side {
    flex-direction: column;
    align-self: start;
  }
  .ev-hero {
    flex: none;
    height: 104px;
  }
  .ev-hero-tx {
    gap: 4px;
    padding: 8px 12px 10px;
  }
  .ev-hero-tx small {
    padding: 2px 9px;
    font-size: 9px;
  }
  .ev-hero-tx h1 {
    font-size: 19px;
  }
  .ev-when {
    padding: 2px 10px 2px 8px;
    font-size: 11px;
  }
  .ev-side-body {
    flex: 1;
    gap: 8px;
    padding: 10px;
    overflow-y: auto;
  }
  .ev-stats {
    gap: 8px;
  }
  .ev-stat {
    border-radius: 4px;
    padding: 6px 10px;
  }
  .ev-stat > b {
    font-size: 17px;
  }
  .ev-stat > b img {
    width: 20px;
    height: 20px;
  }
  .ev-stat > small {
    font-size: 10px;
  }
  .ev-next {
    border-radius: 4px;
    gap: 8px;
    padding: 7px 10px;
  }
  .ev-next b {
    font-size: 14px;
  }
  .ev-next-rw {
    width: 40px;
  }
  .ev-next-rw .ev-rw > img,
  .ev-next-rw .ev-pic,
  .ev-next-rw .avatar {
    zoom: 0.8;
  }
  .ev-go {
    white-space: nowrap;
    gap: 8px;
    padding: 9px 10px;
    font-size: 15px;
  }
  .ev-side {
    justify-content: flex-start;
  }
  .ev-go img {
    width: 26px;
    height: 26px;
  }
  .ev-tabs .pill {
    padding: 6px 12px;
    font-size: 13px;
  }
  .ev-card {
    padding: 12px 14px;
  }
  .ev-desc {
    font-size: 14px;
  }
  .ev-how {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
  }
  .ev-how li {
    flex-direction: row;
    align-items: center;
    padding: 10px;
    font-size: 13px;
  }
  .ev-how-ic {
    width: 40px;
    height: 40px;
  }
  .ev-how-ic img {
    width: 28px;
    height: 28px;
  }
  .ev-track {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
  }
  .ev-step {
    gap: 6px;
    padding: 8px;
  }
  .ev-step-rw {
    min-height: 50px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ev-when.live i,
  .ev-next.ready,
  .ev-next.ready img,
  .ev-step.ready,
  .ev-go img {
    animation: none;
  }
}
.ev-body:has(> .ev-bme) {
  padding-bottom: 0;
}
@media (max-width: 560px) {
  .ev-scr .ev-main {
    overscroll-behavior: contain;
    scrollbar-width: none;
    flex-direction: column;
    display: flex;
    overflow-y: auto;
  }
  .ev-side,
  .ev-content {
    flex: none;
    min-height: auto;
    max-height: none;
  }
  .ev-body {
    flex: none;
    min-height: auto;
    overflow: visible;
  }
  .ev-tabs {
    z-index: 3;
    box-shadow: var(--shadow-sm);
    align-self: stretch;
    position: sticky;
    top: 0;
  }
}
.screen.tz .scr-title {
  background: linear-gradient(110deg, #c46071, #ce713a 55%, #ce992d);
}
@media (max-width: 860px) {
  .screen.tz .scr-title span {
    display: none;
  }
}
.nw-meta {
  color: var(--ink-2);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}
.nw-tag {
  --c: var(--blue);
  background: var(--c);
  color: #fef8ec;
  font-family: var(--font-title);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 900;
  box-shadow: inset 0 -2px #00000026;
}
.nw-hero {
  --c: var(--blue);
  color: #fef8ec;
  background: var(--stripes),
    linear-gradient(
      110deg,
      color-mix(in srgb, var(--c) 78%, white),
      var(--c) 55%,
      color-mix(in srgb, var(--c) 70%, black)
    );
  flex: none;
  align-items: center;
  gap: 22px;
  padding: 26px 30px;
  display: flex;
  position: relative;
}
.nw-hero > img {
  filter: drop-shadow(0 4px #0000002e);
  flex: none;
  animation: 3s ease-in-out infinite wobble;
}
.nw-hero-tx {
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  display: flex;
}
.nw-hero .nw-meta {
  color: #fef8eceb;
  font-weight: 800;
}
.nw-hero .nw-tag {
  background: var(--paper);
  color: var(--c);
}
.nw-hero h2 {
  font-family: var(--font-title);
  text-shadow: 0 3px #0000002e;
  margin: 0;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 900;
  line-height: 1.1;
}
.nw-hero p {
  opacity: 0.95;
  max-width: 760px;
  margin: 0;
  font-size: 15px;
}
.nw-pin {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}
@media (max-width: 1300px), (max-height: 820px) {
  .nw-hero {
    gap: 16px;
    padding: 18px 24px;
  }
  .nw-hero > img {
    width: 56px !important;
    height: 56px !important;
  }
  .nw-hero h2 {
    font-size: 24px;
  }
  .nw-hero p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    display: -webkit-box;
    overflow: hidden;
  }
  .nw-body {
    font-size: 15px;
  }
  .nw-body h3 {
    font-size: 19px;
  }
  .nw-body h4 {
    font-size: 16px;
  }
}
@media (max-width: 1000px), (max-height: 640px) {
  .nw-hero {
    gap: 12px;
    padding: 12px 18px;
  }
  .nw-hero > img {
    width: 40px !important;
    height: 40px !important;
  }
  .nw-hero-tx {
    gap: 5px;
  }
  .nw-hero h2 {
    font-size: 19px;
  }
  .nw-hero p {
    font-size: 13px;
  }
  .nw-body {
    font-size: 14px;
    line-height: 1.55;
  }
  .nw-body h3 {
    margin-top: 18px;
    font-size: 17px;
  }
  .nw-body h4 {
    font-size: 15px;
  }
}
.nw-body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-user-select: text;
  user-select: text;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}
.nw-body > :first-child {
  margin-top: 0;
}
.nw-body p {
  margin: 0 0 14px;
}
.nw-body h3 {
  font-family: var(--font-title);
  margin: 22px 0 10px;
  font-size: 22px;
  font-weight: 900;
}
.nw-body h4 {
  font-family: var(--font-title);
  color: var(--ink-2);
  margin: 18px 0 8px;
  font-size: 18px;
  font-weight: 900;
}
.nw-body b {
  font-weight: 900;
}
.nw-body mark {
  color: inherit;
  background: #e6c88d;
  border-radius: 6px;
  padding: 0 4px;
}
.nw-body a {
  color: var(--blue-t, var(--blue-d));
  text-underline-offset: 3px;
  font-weight: 800;
  text-decoration-thickness: 2px;
}
.nw-body ul,
.nw-body ol {
  margin: 0 0 14px;
  padding-left: 26px;
}
.nw-body li {
  margin: 4px 0;
}
.nw-body ul li::marker {
  color: var(--red);
  font-size: 1.1em;
}
.nw-body ol li::marker {
  color: var(--blue-t, var(--blue-d));
  font-family: var(--font-title);
  font-weight: 900;
}
.nw-body .nw-img {
  max-width: 100%;
  box-shadow: var(--shadow-sm);
  border-radius: 6px;
  display: block;
}
.nw-body p .nw-img {
  vertical-align: middle;
  max-height: 1.6em;
  box-shadow: none;
  border-radius: 4px;
  display: inline-block;
}
.nw-body .nw-obj {
  vertical-align: middle;
  width: 1.5em;
  height: 1.5em;
  image-rendering: pixelated;
  margin: -0.3em 0;
}
.nw-body .nw-mon {
  vertical-align: middle;
  width: 1.9em;
  height: 1.7em;
  margin: -0.35em 0;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.nw-body .nw-mon img {
  width: 2.94em;
  image-rendering: pixelated;
  position: absolute;
  top: -0.6em;
  left: -0.52em;
}
.nw-body .nw-box {
  --c: var(--blue);
  background: color-mix(in srgb, var(--c) 10%, var(--paper));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 35%, var(--paper));
  border-radius: 6px;
  margin: 0 0 16px;
  padding: 12px 16px 2px;
}
.nw-body .nw-box-h {
  background: var(--c);
  color: #fef8ec;
  font-family: var(--font-title);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 4px;
  margin-bottom: 6px;
  padding: 2px 10px;
  font-size: 12px;
  display: inline-block;
}
.nw-body .nw-nuevo {
  --c: var(--green-d);
}
.nw-body .nw-aviso {
  --c: var(--red-d);
}
.nw-body .nw-consejo {
  --c: var(--yellow-d);
}