/*! Card Battle Lab. Copyright (c) 2026 Dave Skilton. All rights reserved. See /LICENSE. https://cardbattlelab.com/ */
:root {
  --gcg-safe-top: env(safe-area-inset-top, 0px);
  --gcg-safe-right: env(safe-area-inset-right, 0px);
  --gcg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --gcg-safe-left: env(safe-area-inset-left, 0px);
  --gcg-viewport-top: var(--gcg-safe-top);
  --gcg-viewport-left: var(--gcg-safe-left);
  --gcg-viewport-width: calc(100vw - var(--gcg-safe-left) - var(--gcg-safe-right));
  --gcg-viewport-height: calc(100dvh - var(--gcg-safe-top) - var(--gcg-safe-bottom));
  color-scheme: dark;
  --c-hue: 0;
  --c-sat: 0%;
  --c-border-subtle: hsl(var(--c-hue) var(--c-sat) 18.4314%);
  --c-border: hsl(var(--c-hue) var(--c-sat) 17.4%);
  --c-border-strong: hsl(var(--c-hue) var(--c-sat) 25.3%);
  --t-fade-snap: .18s;
  --t-fade-fast: .4s;
  --t-fade-page: .8s;
  --t-fade-reveal: 1.5s;
  --c-app-bg: hsl(var(--c-hue) var(--c-sat) 3.9216%);
  --c-field: hsl(var(--c-hue) var(--c-sat) 5.098%);
  --c-panel: hsl(var(--c-hue) var(--c-sat) 12.6%);
  --c-panel-2: hsl(var(--c-hue) var(--c-sat) 3.9%);
  --c-panel-3: hsl(var(--c-hue) var(--c-sat) 11.7647%);
  --c-ctrl: hsl(var(--c-hue) var(--c-sat) 13.4%);
  --c-ctrl-2: hsl(var(--c-hue) var(--c-sat) 13.3333%);
  --c-ctrl-3: hsl(var(--c-hue) var(--c-sat) 19.7%);
  --c-ctrl-raised: hsl(var(--c-hue) var(--c-sat) 20.0%);
  --c-ctrl-hi: hsl(var(--c-hue) var(--c-sat) 22.7451%);
  --c-faction-white: hsl(var(--c-hue) var(--c-sat) 13.3333%);
  --panel-alpha: 0.19;
  --panel-bg: color-mix(in srgb, var(--c-panel), transparent calc((1 - var(--panel-alpha)) * 100%));
  --panel-bg-2: color-mix(in srgb, var(--c-panel-2), transparent calc((1 - var(--panel-alpha)) * 100%));
  --panel-bg-3: color-mix(in srgb, var(--c-panel-3), transparent calc((1 - var(--panel-alpha)) * 100%));
  --lift-hi: rgba(255,255,255,.06);
  --lift-lo: rgba(0,0,0,.24);
  --ctrl-lift:
    linear-gradient(
      
      180deg,
      var(--lift-hi),
      transparent 42%,
      var(--lift-lo));
  --ctrl-press:
    linear-gradient(
      
      180deg,
      var(--lift-lo),
      transparent 55%);
  --ctrl-face: var(--ctrl-lift), linear-gradient(var(--c-ctrl), var(--c-ctrl));
  --ctrl-face-hover: var(--ctrl-lift), linear-gradient(var(--c-ctrl-3), var(--c-ctrl-3));
  --ctrl-face-active: var(--ctrl-press), linear-gradient(var(--c-ctrl-2), var(--c-ctrl-2));
  --c-text-faint: hsl(var(--c-hue) var(--c-sat) 53.3333%);
  --c-text-subtle: hsl(var(--c-hue) var(--c-sat) 55.0%);
  --c-text-muted: hsl(var(--c-hue) var(--c-sat) 58.0%);
  --c-text-dim: hsl(var(--c-hue) var(--c-sat) 64.7%);
  --c-text: hsl(var(--c-hue) var(--c-sat) 80.0%);
  --c-text-bright: hsl(var(--c-hue) var(--c-sat) 86.6667%);
  --c-text-strong: hsl(var(--c-hue) var(--c-sat) 87.8431%);
  --c-text-hi: hsl(var(--c-hue) var(--c-sat) 93.3333%);
  --c-white: hsl(var(--c-hue) var(--c-sat) 100.0%);
  --c-accent: #d1d1d1;
  --c-danger: #ff6666;
  --c-danger-2: #f87171;
  --c-warn: #e0a94a;
  --c-success: #9dcc9d;
  --c-cloud: #82e6ff;
  --c-season: #82e6ff;
  --c-chroma: #00FF00;
  --c-success-surface: #2a3a2a;
  --c-success-surface-dim: #1a2a1a;
  --c-success-border: #4a6a4a;
  --c-info-surface: #1a2a3a;
  --c-on-accent: #0a1628;
  --c-on-danger: #2c0808;
  --c-on-burst: #1a0f00;
  --c-on-warn: #2a1c04;
  --c-ink-dark: #0a0a0a;
  --c-ink-light: var(--c-white);
  --z-pvp-chat-menu: 11960;
  --z-dialog: 12000;
  --z-menu: 13000;
  --z-menu-dialog: 13500;
  --z-notice: 14000;
  --r-s: 4px;
  --r-m: 6px;
  --r-l: 8px;
  --r-xl: 12px;
  --r-loz: 9px;
  --glass-t: 1;
  --glass-modal-tint: rgba(15, 15, 15, 0.55);
  --glass-modal-bg: var(--glass-modal-tint);
  --glass-modal-blur: blur(14px) saturate(115%);
  --scrim: rgba(0, 0, 0, 0.52);
  --surface-haze-tint: rgba(5, 5, 5, 0.56);
  --surface-haze: var(--surface-haze-tint);
  --slot-empty-border: 1px dotted color-mix(in srgb, var(--c-border) 55%, transparent);
  --c-game-trigger: #64d3d9;
  --c-game-activate: #64b3ec;
  --c-game-burst: #ca8834;
  --c-game-attack: #ff5a5a;
  --c-game-keyword: #f2f2f2;
  --c-game-block: var(--c-game-keyword);
  --c-game-pair: #ff8cba;
  --c-game-link: #fbe651;
  --c-game-damage: #d76cff;
  --c-game-buff: #f2a654;
  --c-game-debuff: #4250ff;
  --c-game-heal: #3adb6a;
  --c-game-unavailable: #9aa0a6;
  --c-game-prevent: #38c6d6;
  --c-game-destroy: #d84040;
  --c-game-rest: #367cfe;
  --c-game-interact: #f2f2f2;
  --c-game-once: #8b2222;
  --c-lz-trigger: var(--c-game-trigger);
  --c-lz-activate: var(--c-game-activate);
  --c-lz-pair: var(--c-game-pair);
  --c-lz-link: var(--c-game-link);
  --c-lz-burst: var(--c-game-burst);
  --c-lz-ability: var(--c-game-keyword);
  --c-lz-once: var(--c-game-once);
  --c-lz-timing: var(--c-game-trigger);
  --c-effect-target: var(--c-game-damage);
  --c-card-blue: #3a82c0;
  --c-card-green: #5fa83c;
  --c-card-red: #c41f54;
  --c-card-white: #f1f1e8;
  --c-card-purple: #9b5cc4;
  --c-card-token: #d6c98a;
  --s-spend: var(--c-game-link);
  --s-threat: var(--c-card-red);
  --s-boss: var(--c-danger);
  --s-boss2: var(--c-danger);
  --s-boss-1: var(--s-boss);
  --s-boss-2: color-mix(in srgb, var(--s-boss) 62%, var(--c-white));
  --s-boss-3: color-mix(in srgb, var(--s-boss) 74%, var(--c-app-bg));
  --s-gas: var(--c-game-trigger);
  --s-wall: var(--c-game-keyword);
  --s-dead: var(--c-game-debuff);
  --s-lvlock: var(--c-card-blue);
  --s-costlock: var(--c-warn);
  --s-otherlock: var(--dim);
  --s-resleft: var(--c-card-token);
  --s-exalive: var(--c-game-trigger);
  --s-kill: var(--c-card-red);
  --s-bar-lv: var(--c-game-trigger);
  --s-bar-cost: var(--c-game-link);
  --s-type-unit: var(--c-game-activate);
  --s-type-pilot: var(--c-game-link);
  --s-type-command: var(--c-game-trigger);
  --s-type-base: var(--c-game-burst);
  --s-legal: var(--c-success);
  --s-illegal: var(--c-danger);
  --s-invalid: var(--c-warn);
  --s-stat-power: var(--c-game-attack);
  --s-stat-ping: var(--c-game-damage);
  --s-stat-buff: var(--c-game-buff);
  --s-stat-base: var(--c-game-once);
  --s-stat-hp: var(--c-card-green);
  --s-stat-block: var(--c-game-keyword);
  --s-stat-heal: var(--c-game-heal);
  --s-stat-rush: var(--c-game-burst);
  --s-stat-haste: var(--c-game-link);
  --s-stat-draw: var(--c-game-trigger);
  --s-stat-tokens: var(--c-card-token);
  --s-stat-rest: var(--c-game-rest);
  --s-stat-bounce: var(--dim);
  --s-stat-debuff: var(--c-game-debuff);
  --s-stat-prevent: var(--c-game-prevent);
  --s-stat-destroy: var(--c-game-destroy);
  --p1: #6699ff;
  --p2: #ff6666;
  --c-edit: #3aa050;
  --c-ctx: #4fd07a;
  --c-commit: #c8c8c8;
  --c-on-commit: #06230f;
  --c-toggle-on: #aeaeae;
  --c-tier-0: var(--c-text-dim);
  --c-tier-1: var(--c-game-activate);
  --c-tier-2: var(--c-game-burst);
  --c-tier-3: #b46cff;
  --c-grade-bronze: #bf7b3c;
  --c-grade-silver: #a9bed6;
  --c-grade-gold: #f0c53f;
  --ink: #eeeeee;
  --dim: #6b6b6b;
  --mute: #949494;
  --mono:
    "Chakra Petch",
    ui-monospace,
    "Cascadia Code",
    Consolas,
    monospace;
  --font-display: "Orbitron", sans-serif;
  --font-body:
    "Chakra Petch",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --fs-display: 1.08;
  --fs-body: 1.08;
  --fs-mono: 1;
  --btn-fs: 12.5px;
  --hover-brightness: 1.42;
  --mix-fill-border: 72%;
  --mix-fill-top: 78%;
  --mix-fill-bottom: 82%;
  --mix-fill-hover-border: 55%;
  --mix-fill-hover-top: 52%;
  --mix-fill-hover-mid: 80%;
  --mix-fill-hover-bottom: 96%;
  --mix-fill-active-top: 90%;
  --mix-fill-active-mid: 68%;
  --mix-fill-active-bottom: 58%;
  --modal-pad: 12px;
  --group-pad: 8px;
  --msheet-pad: 14px var(--modal-pad, 16px) var(--modal-pad, 16px);
  --table-w: 1560px;
  --board-min-wide: 760px;
  --table-h: 490px;
  --pa-w: 1270px;
  --pa-gap: 24px;
  --flank-w: 133px;
  --msg-strip-h: 48px;
  --table-scale: 1;
  --wm-opacity: 1;
  --wm-result-opacity: 0.45;
  --glass-tint: rgba(13, 13, 13, 0.62);
  --glass-bg: var(--glass-tint);
  --glass-raised-tint: rgba(34, 34, 34, 0.55);
  --glass-bg-raised: var(--glass-raised-tint);
  --glass-blur: 7px;
  --divider-h: 30px;
  --table-cw: 840px;
  --table-ch: 700px;
  --pa-cw: 542px;
  --pa-c-row-gap: 8px;
  --flank-cw: 104px;
  --sidebar-w: 293px;
  --sidebar-rail-w: 40px;
  --dock-w: 330px;
  --sidebar-density-min: .72;
  --sidebar-density-ref-w: 293;
  --sidebar-density-ref-h: 720;
  --gcg-ui-density: 1;
  --gcg-ui-density-min: .78;
  --gcg-ui-density-ref-w: 440;
  --gcg-ui-density-ref-h: 720;
  --gcg-ui-fs-body: 1.08;
  --gcg-ui-fs-display: 1.08;
  --gcg-ui-fs-mono: 1;
  --gcg-ui-btn-fs: 12.5px;
  --gcg-ui-modal-pad: 16px;
  --gcg-mobile-bar-h: 52px;
  --gcg-disabled-opacity: 0.45;
  --gcg-message-density: 1;
  --gcg-message-density-min: .78;
  --gcg-message-density-ref-w: 440;
  --gcg-message-density-ref-h: 720;
  --gcg-message-x: 50vw;
  --gcg-message-y: 50vh;
  --gcg-message-fs-body: 1.08;
  --gcg-message-fs-display: 1.08;
  --gcg-message-btn-fs: 12.5px;
  --shell-pad: 0px;
  --shell-gap: 0px;
  --panel-radius: 0px;
  --panel-pad: 0px;
  --float-frame-pad: 0px;
  --panel-border-alpha: 0;
  --panel-border-color: color-mix(in srgb, var(--c-border-subtle) calc(var(--panel-border-alpha) * 100%), transparent);
  --float-border-color: color-mix(in srgb, var(--c-border) calc(var(--panel-border-alpha) * 100%), transparent);
  --app-bg-dim: 0.78;
  --screen-tint: rgba(15, 15, 15, 0.55);
  --gcg-count-glow:
    2px 2px 2px #000,
    2px 2px 5px #000,
    2px 2px 2px #000;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
button,
input,
select,
textarea {
  font-family: inherit;
}
html {
  background: var(--c-app-bg);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  color: var(--c-text-strong);
  background-color: var(--c-app-bg);
  background-image: var(--app-bg-image, url(/viewer/backgrounds/BG_1.webp));
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
html,
body {
  touch-action: manipulation;
}
.lab-handcard-real,
#board .card,
#board .stack-unit,
#board .stack-pilot,
#board .play-stack,
#board .play-area,
#board .lab-target-area {
  touch-action: none;
}
html,
body {
  overscroll-behavior: none;
}
img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
body {
  -webkit-user-select: none;
  user-select: none;
}
input,
textarea,
[contenteditable=true],
.selectable,
.selectable * {
  -webkit-user-select: text;
  user-select: text;
}
.container {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 8px;
  padding: 8px;
}
.screen {
  width: 100%;
  height: 100%;
}
.screen:not(.active) {
  display: none !important;
}
html.optimizer-disabled #menuOptimizerBtn,
html.optimizer-disabled #optimizerScreen {
  display: none !important;
}
body > .screen {
  position: absolute;
  top: var(--gcg-viewport-top);
  left: var(--gcg-viewport-left);
  width: var(--gcg-viewport-width);
  height: var(--gcg-viewport-height);
  min-height: 0;
  opacity: 0;
  transition: opacity var(--t-fade-fast) ease, display var(--t-fade-fast) allow-discrete;
}
.screen.active {
  opacity: 1;
  transition: opacity var(--t-fade-page) ease, display var(--t-fade-page) allow-discrete;
}
.screen:not(.active) {
  pointer-events: none;
}
.screen.active.fade-hold {
  opacity: 0;
}
#inspectorModal,
#cardPickerModal,
#botListModal {
  display: none;
}
#inspectorModal.modal-open,
#cardPickerModal.modal-open,
#botListModal.modal-open {
  display: flex;
}
.menu-modal,
#gameModesScreen,
#setupModal,
#gsModal,
#uiSettingsPanel,
#pvpBrowseModal {
  opacity: 0;
  transition: opacity var(--t-fade-fast) ease, display var(--t-fade-fast) allow-discrete;
}
.menu-modal.active,
#gameModesScreen.open,
#setupModal.open,
#gsModal.open,
#uiSettingsPanel.open,
#pvpBrowseModal.open {
  opacity: 1;
  transition: opacity var(--t-fade-page) ease, display var(--t-fade-page) allow-discrete;
}
.sel-overlay,
#inspectorModal,
#cardPickerModal,
#botListModal {
  opacity: 0;
  transition: opacity var(--t-fade-snap) ease, display var(--t-fade-snap) allow-discrete;
}
.sel-overlay.open,
#inspectorModal.modal-open,
#cardPickerModal.modal-open,
#botListModal.modal-open {
  opacity: 1;
}
.ui-dialog-overlay {
  transition: opacity var(--t-fade-fast) ease;
}
#setupModal.open.pvp-handoff {
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--t-fade-fast);
}
@starting-style {
  .screen.active,
  .menu-modal.active,
  #gameModesScreen.open,
  #setupModal.open,
  #gsModal.open,
  #uiSettingsPanel.open,
  #pvpBrowseModal.open,
  .ui-dialog-overlay,
  .sel-overlay.open,
  #inspectorModal.modal-open,
  #cardPickerModal.modal-open,
  #botListModal.modal-open {
    opacity: 0;
  }
}
body.game-idle #playScreen {
  visibility: hidden;
  opacity: 0;
}
body.booting #mainMenuModal,
body.booting #setupModal,
body.booting #gameModesScreen,
body.booting #deckManagerScreen {
  visibility: hidden;
  opacity: 0;
}
body.home-reveal #mainMenuModal,
body.home-reveal #setupModal,
body.home-reveal #gameModesScreen,
body.home-reveal #deckManagerScreen,
body.board-reveal #playScreen.active,
body.board-reveal #appDimmer {
  transition-duration: var(--t-fade-reveal);
}
#playScreen {
  display: flex;
  flex-direction: column;
  gap: var(--shell-gap);
  padding: var(--shell-pad);
  overflow: hidden;
  overflow: clip;
}
.play-body {
  display: flex;
  width: 100%;
  gap: var(--shell-gap);
  flex: 1;
  min-height: 0;
}
#playScreen:not(.narrow-shell) > #playBody {
  padding: var(--shell-pad);
  gap: var(--shell-gap);
}
.app-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 10px;
  background: var(--c-field);
  border: 0.5px solid var(--panel-border-color);
  border-radius: var(--panel-radius);
}
.app-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.play-brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  min-width: 0;
  height: 45px;
  container: play-brand / inline-size;
}
.play-brand-art {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.app-brand-mark {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  flex: 0 1 auto;
  object-fit: contain;
  object-position: left center;
}
.app-brand-mark--vert {
  display: none;
}
@container play-brand (max-width: 192px) {
  .app-brand-mark--horiz {
    display: none;
  }
  .app-brand-mark--vert {
    display: block;
    height: 100%;
    max-width: 100%;
  }
}
button.app-bar-menu-btn {
  width: 32px;
  height: 32px;
  font-size: calc(17px * var(--fs-body, 1));
  line-height: 1;
  flex-shrink: 0;
}
.app-bar-title {
  display: none;
}
.app-version-tag {
  flex-shrink: 0;
  font: 500 10px/1.2 var(--mono);
  font-size: calc(10px * var(--fs-mono, 1));
  letter-spacing: .4px;
  color: var(--c-text-faint);
  opacity: .7;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
.app-version-tag:empty {
  display: none;
}
.app-bar-center {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.app-bar-status {
  max-width: 100%;
  overflow: hidden;
}
.app-bar-status:empty {
  display: none;
}
.app-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
button.app-bar-gear-btn {
  width: 32px;
  height: 32px;
  font-size: calc(16px * var(--fs-body, 1));
}
.app-bar-right {
  position: relative;
}
#appBar {
  display: none;
}
#playScreen.narrow-shell {
  --appbar-h: var(--gcg-viewport-top);
}
.log-column {
  --navrail-gap: 5px;
}
.sidebar-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--navrail-gap);
  padding: 6px 8px 0;
  background: var(--c-ctrl-2);
  position: relative;
}
#playScreen.narrow-shell .sidebar-topbar {
  display: none;
}
.sidebar-topbar .play-brand-stack {
  flex: 1 1 auto;
  min-width: 44px;
  overflow: hidden;
}
body:not(.watch-view) .sidebar-topbar:has(> #playPlayerChipHost:not([hidden])) .play-brand-stack {
  flex: 0 0 calc((100% - var(--navrail-gap)) * 8 / 19);
  height: auto;
  aspect-ratio: 800 / 330;
}
.sidebar-topbar .app-brand-mark {
  width: auto;
  height: 100%;
  max-width: 100%;
}
@container play-brand (max-width: 192px) {
  .sidebar-topbar .app-brand-mark--vert {
    height: 100%;
    max-width: 100%;
  }
}
.sidebar-topbar .app-version-tag {
  font-size: calc(8px * var(--fs-mono, 1));
  line-height: 1;
}
.sidebar-topbar > #uiSettingsStub {
  position: absolute;
  right: 8px;
  top: 50%;
}
.log-column.rail-collapsed .sidebar-topbar {
  flex-direction: column;
  padding: 6px 0;
  gap: 6px;
}
.log-column.rail-collapsed .sidebar-topbar .app-bar-title,
.log-column.rail-collapsed .sidebar-topbar .app-brand-mark,
.log-column.rail-collapsed .sidebar-topbar .app-version-tag,
.log-column.rail-collapsed .sidebar-topbar #playPlayerChipHost {
  display: none;
}
body.watch-view #playPlayerChipHost {
  display: none !important;
}
.sidebar-navrail {
  display: flex;
  flex-direction: column;
  gap: var(--navrail-gap);
  flex-shrink: 0;
  padding: var(--navrail-gap) 8px 8px;
  background: var(--c-field);
}
.sidebar-navrail-primary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--navrail-gap);
}
.sidebar-navrail-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--navrail-gap);
}
#playScreen.narrow-shell .sidebar-navrail {
  display: none;
}
.log-column.rail-collapsed .sidebar-navrail {
  display: none;
}
.sidebar-navrail .navrail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  height: auto;
  font-size: calc(10px * var(--fs-body, 1));
  padding: 7px 0;
  cursor: pointer;
}
.navrail-btn .g {
  display: inline-flex;
  font-size: calc(15px * var(--fs-body, 1));
  line-height: 1;
}
.navrail-btn .g .gcg-tbi {
  width: 15px;
  height: 15px;
}
.sidebar-navrail .navrail-panel-btn {
  flex-direction: row;
  justify-content: flex-start;
  gap: 7px;
  width: 100%;
  height: 27px;
  padding: 0 8px;
  text-align: left;
}
.navrail-panel-btn .navrail-label {
  flex: 1 1 auto;
}
.navrail-panel-btn .nav-chevron {
  display: inline-flex;
  margin-left: auto;
  color: var(--c-text-muted);
  transition: transform .15s ease;
}
.navrail-panel-btn .nav-chevron .gcg-tbi {
  width: 13px;
  height: 13px;
}
.navrail-panel-btn:not(.active) .nav-chevron {
  transform: rotate(180deg);
}
#mainMenuBtn,
#setupBtn,
#gearMenuBtn {
  display: none;
}
.menu-modal.gcg-scrim {
  z-index: var(--z-menu);
  display: none;
  align-items: center;
  justify-content: center;
  top: var(--gcg-viewport-top, 0px);
  left: var(--gcg-viewport-left, 0px);
  right: auto;
  bottom: auto;
  width: var(--gcg-viewport-width, 100vw);
  height: var(--gcg-viewport-height, 100dvh);
}
.menu-modal.active {
  display: flex;
}
.menu-box {
  width: min(432px, calc(100vw - 32px));
  max-height: calc(var(--gcg-viewport-height, 100dvh) - 32px);
}
.menu-modal .menu-box {
  overflow-y: auto;
}
#mainMenuModal .menu-box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 860px) {
  #mainMenuModal .menu-box {
    width: min(960px, calc(100vw - 32px));
  }
}
#mainMenuModal .menu-head {
  position: relative;
  flex: 0 0 auto;
  min-height: max(56px, calc(72px * var(--gcg-ui-density)));
  container: home-header / inline-size;
}
#mainMenuModal .menu-sections {
  min-height: 0;
  overflow-y: auto;
}
#mainMenuModal .menu-group {
  flex-shrink: 0;
}
.menu-head {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: max(48px, calc(56px * var(--gcg-ui-density)));
  background: var(--glass-modal-bg);
}
.menu-head-right {
  display: flex;
  align-items: center;
  gap: 11px;
}
.menu-head .menu-x {
  font-size: calc(20px * var(--fs-body, 1));
  line-height: 1;
}
.menu-ver {
  font: 700 11px/1 var(--mono);
  font-size: calc(11px * var(--fs-mono, 1));
  letter-spacing: 0.5px;
  color: #7c7c7c;
  text-transform: none;
}
.menu-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(clamp(15px, 4vw, 20px) * var(--fs-display, 1));
  letter-spacing: 0.02em;
  text-transform: none;
  color: #f4f4f4;
  line-height: 1;
  white-space: nowrap;
}
.menu-title .ms {
  color: inherit;
}
.menu-acct {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  align-self: stretch;
}
.menu-brand-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.menu-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  align-self: stretch;
}
.menu-brand-title {
  display: block;
  width: auto;
  height: max(36px, calc(48px * var(--gcg-ui-density)));
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  object-fit: contain;
  object-position: left center;
}
.menu-head-right {
  align-self: stretch;
}
.menu-head-right .menu-x {
  align-self: center;
}
.acct-pill {
  --c-acct: var(--c-text-hi);
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  font-size: calc(12px * var(--fs-body, 1));
  letter-spacing: 0;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--r-loz);
  white-space: nowrap;
  color: var(--c-acct);
  background: color-mix(in srgb, var(--c-acct) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-acct) 55%, transparent);
  transition:
    background .12s ease,
    border-color .12s ease,
    color .12s ease;
}
.acct-pill:hover,
.acct-pill:focus-visible {
  background: color-mix(in srgb, var(--c-acct) 28%, transparent);
  border-color: var(--c-acct);
  color: color-mix(in srgb, var(--c-acct) 70%, var(--c-white));
}
.acct-pill[hidden],
.menu-acct-meta[hidden] {
  display: none !important;
}
.acct-pill[data-account=out] {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: calc(9.5px * var(--fs-display, 1));
  letter-spacing: 0.05em;
}
.acct-pill #menuAccountName {
  display: inline;
  min-width: 0;
}
.acct-pill .acct-name-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.acct-pill .acct-name {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 132px;
}
.menu-acct-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  height: 14px;
}
.menu-acct-meta #menuAccountTier:empty {
  display: none;
}
.menu-acct-meta .acct-badge {
  margin-left: 0;
}
.acct-sub {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: calc(10.5px * var(--fs-body, 1));
  line-height: 1.1;
  white-space: nowrap;
  color: var(--c-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .12s ease;
}
.acct-sub:hover,
.acct-sub:focus-visible {
  color: var(--c-text-hi);
}
@container home-header (max-width: 620px) {
  .acct-pill-tail {
    display: none;
  }
  .acct-pill .acct-name {
    max-width: 92px;
  }
  .acct-sub {
    font-size: calc(9px * var(--fs-body, 1));
  }
}
#accountModal .tst-panel[data-tstpanel=progress] .perk-body,
#accountModal .tst-panel[data-tstpanel=achievements] .perk-body,
#accountModal .tst-panel[data-tstpanel=ranked] .perk-body,
#accountModal .tst-panel[data-tstpanel=deckstats] .perk-body {
  padding: 0;
  overflow: visible;
}
#accountModal .tst-panel[data-tstpanel=progress] .perk-foot {
  padding: 12px 0 0;
}
.acct-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-2, 8px);
  background: var(--c-panel-2);
  overflow: hidden;
}
.acct-id-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.acct-id-row + .acct-id-row {
  border-top: 1px solid var(--c-border-subtle);
}
.acct-id-label {
  flex: 0 0 auto;
  min-width: 92px;
  font-size: calc(11px * var(--fs-body, 1));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
}
.acct-id-val {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.acct-id-name {
  font-weight: 700;
  color: var(--c-text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-id-acct {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-text-bright);
}
.acct-id-rec .acct-id-val,
.acct-id-rec span:first-child {
  color: var(--c-text-bright);
}
.acct-id-hint {
  font-size: calc(11px * var(--fs-body, 1));
  color: var(--c-text-dim);
}
.acct-id-btn {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-ctrl-2);
  color: var(--c-text-bright);
  font-size: calc(12px * var(--fs-body, 1));
  cursor: pointer;
  white-space: nowrap;
}
.acct-id-btn:hover {
  background: var(--c-ctrl-hi);
  color: var(--c-white);
  border-color: var(--c-border-strong);
}
.acct-id-btn + .acct-id-btn {
  margin-left: 0;
}
.acct-id-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.acct-id-signin {
  margin-left: 0;
  border-color: color-mix(in srgb, var(--c-success) 55%, transparent);
  color: var(--c-success);
}
.acct-id-signin:hover {
  background: color-mix(in srgb, var(--c-success) 18%, var(--c-ctrl-2));
  color: var(--c-success);
  border-color: var(--c-success);
}
.prg-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.prg-lv {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(20px * var(--fs-display, 1));
  color: var(--c-text-hi);
  letter-spacing: 0.04em;
}
.prg-xp {
  margin-left: auto;
  font-size: calc(12px * var(--fs-body, 1));
  color: var(--c-text-muted);
}
.prg-bar {
  height: 3px;
  border-radius: 999px;
  background: var(--c-ctrl-2);
  color: var(--c-warn);
}
.prg-bar > i {
  display: block;
  height: 100%;
  background: currentColor;
  border-radius: inherit;
  box-shadow:
    0 0 3px currentColor,
    0 0 7px currentColor,
    0 0 16px color-mix(in srgb, currentColor 70%, transparent);
  transition: width .8s cubic-bezier(.22, .61, .36, 1);
}
.xpgain {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 30px 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-m);
  background: var(--c-panel);
}
.xpgain-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.xpgain-lv {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(14px * var(--fs-display, 1));
  letter-spacing: .04em;
  color: var(--c-text-hi);
}
.xpgain-amt {
  margin-left: auto;
  white-space: nowrap;
  font-weight: 800;
  font-size: calc(12px * var(--fs-body, 1));
  letter-spacing: .04em;
  color: var(--c-warn);
}
.xpgain.leveled .xpgain-lv {
  color: var(--c-success);
  animation: xpgainPulse .9s ease-out 1;
}
@keyframes xpgainPulse {
  0% {
    transform: scale(1);
    text-shadow: 0 0 0 transparent;
  }
  35% {
    transform: scale(1.22);
    text-shadow: 0 0 14px color-mix(in srgb, var(--c-success) 70%, transparent);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 0 transparent;
  }
}
.prg-sec {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prg-sec + .prg-sec {
  border-top: 1px solid var(--c-border-subtle);
  padding-top: 12px;
}
.prg-sec-t {
  font-size: calc(11px * var(--fs-body, 1));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--c-text-muted);
}
.prg-grp-t {
  font-size: calc(10.5px * var(--fs-body, 1));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-text-dim);
}
.prg-grp-t + .prg-grp-t,
.qcard + .prg-grp-t {
  margin-top: 4px;
}
.prg-note {
  font-size: calc(12px * var(--fs-body, 1));
  color: var(--c-text-dim);
}
div.prg-rank > .gcg-row {
  cursor: default;
}
.prg-rank-v {
  color: var(--c-text-bright, #d1d1d1);
  font-family: var(--mono);
  font-size: calc(11px * var(--fs-mono, 1));
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.prg-rank-v.prov {
  color: var(--c-text-dim, #8a97ab);
}
#rankedStanding:not(:empty) {
  margin-bottom: 14px;
}
.acct-blk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.acct-blk-count {
  font-family: var(--mono);
  font-size: calc(10.5px * var(--fs-mono, 1));
  font-variant-numeric: tabular-nums;
  color: var(--c-text-dim);
}
.acct-blk-chev {
  margin-left: auto;
  color: var(--c-text-dim);
  font-size: calc(11px * var(--fs-body, 1));
  transition: transform .12s ease;
}
.acct-blk.open .acct-blk-chev {
  transform: rotate(90deg);
}
.acct-blk-head:hover .prg-sec-t,
.acct-blk-head:hover .acct-blk-count,
.acct-blk-head:hover .acct-blk-chev {
  color: var(--c-text-bright);
}
.acct-blk:not(.open) .acct-blk-list {
  display: none;
}
div.acct-blk-list > .gcg-row {
  cursor: default;
}
.acct-cr-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
}
.acct-cr .gcg-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.acct-cr-slot {
  display: grid;
  overflow-wrap: anywhere;
}
.acct-cr-slot > span {
  grid-area: 1 / 1;
}
.acct-cr-slot > .acct-cr-ghost {
  visibility: hidden;
}
.acct-cr-intro {
  font-size: calc(11.5px * var(--fs-body, 1));
  line-height: 1.4;
  color: var(--c-text-dim);
}
.acct-cr-status {
  font-size: calc(12px * var(--fs-body, 1));
  line-height: 1.4;
  color: var(--c-text-muted);
}
.acct-cr-status[data-status=approved] {
  color: var(--c-success);
}
.acct-cr-status[data-status=rejected],
.acct-cr-status[data-status=error] {
  color: var(--c-danger-2);
}
.acct-cr .gcg-action-row {
  justify-content: flex-end;
}
.acct-cr[hidden] {
  display: none;
}
.prg-cta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 14px;
  border-radius: var(--r-m);
  border: 1px solid color-mix(in srgb, var(--c-success) 45%, var(--c-border));
  background: color-mix(in srgb, var(--c-success) 8%, var(--c-panel));
}
.prg-cta-hd {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(14px * var(--fs-display, 1));
  letter-spacing: .02em;
  color: var(--c-text-hi);
}
.prg-cta-txt {
  font-size: calc(12px * var(--fs-body, 1));
  line-height: 1.45;
  color: var(--c-text-muted);
}
.prg-cta .acct-id-signin {
  align-self: flex-start;
}
.prg-locked .prg-sec:not(:first-child) {
  opacity: .5;
  filter: grayscale(.25);
  pointer-events: none;
  user-select: none;
}
.prg-signout {
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: calc(11px * var(--fs-display, 1));
  letter-spacing: 0.05em;
  padding: 10px 12px;
  border-radius: var(--r-loz);
  color: var(--c-danger-2);
  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-danger) 50%, transparent);
  transition:
    background .12s ease,
    border-color .12s ease,
    color .12s ease;
}
.prg-signout:hover,
.prg-signout:focus-visible {
  background: color-mix(in srgb, var(--c-danger) 26%, transparent);
  border-color: var(--c-danger);
  color: color-mix(in srgb, var(--c-danger-2) 70%, var(--c-white));
}
.gcg-tbi {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}
.gcg-tbi-glyph {
  display: inline-block;
  flex: 0 1 auto;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.qcard {
  --qg: var(--c-grade-bronze);
  container: qcard / inline-size;
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 10px 6px 3px;
  border: 1px solid color-mix(in srgb, var(--qg) 24%, var(--c-border-strong));
  border-radius: var(--r-m);
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-white) 8%, transparent) 0,
      transparent 38%),
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--qg) 16%, transparent) 0%,
      transparent 60%),
    var(--glass-bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 14%, transparent);
}
.qcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--qg);
  box-shadow: 0 0 4px var(--qg), 0 0 10px var(--qg);
}
.qcard--bronze {
  --qg: var(--c-grade-bronze);
}
.qcard--silver {
  --qg: var(--c-grade-silver);
}
.qcard--gold {
  --qg: var(--c-grade-gold);
}
.qcard.is-done {
  border-color: color-mix(in srgb, var(--qg) 60%, transparent);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-white) 10%, transparent) 0,
      transparent 40%),
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--qg) 34%, transparent) 0%,
      color-mix(in srgb, var(--qg) 10%, transparent) 55%,
      transparent 80%),
    var(--glass-bg);
}
.qcard.is-done .qc-icon {
  overflow: visible;
}
.qcard.is-done .qc-icon .gcg-tbi {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--qg) 70%, transparent));
}
.qcard.is-done .qc-title {
  background:
    linear-gradient(
      90deg,
      var(--c-text-strong),
      color-mix(in srgb, var(--qg) 60%, var(--c-white)),
      var(--c-text-strong));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qcard.is-locked {
  opacity: .84;
}
.qcard.is-hot {
  border-color: transparent;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 20%, transparent), 0 0 12px color-mix(in srgb, var(--qg) 30%, transparent);
}
.qcard.is-hot::before {
  width: auto;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    linear-gradient(
      90deg,
      var(--qg),
      color-mix(in srgb, var(--qg) 45%, var(--c-white)),
      color-mix(in srgb, var(--qg) 55%, var(--c-panel-2)),
      var(--qg),
      color-mix(in srgb, var(--qg) 45%, var(--c-white)),
      var(--qg)) 0 50% / 200% 100%;
  -webkit-mask: linear-gradient(var(--c-white) 0 0) content-box, linear-gradient(var(--c-white) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: none;
  pointer-events: none;
  animation: qcard-foil 3s linear infinite;
}
.qcard.is-hot::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      transparent,
      color-mix(in srgb, var(--c-white) 26%, transparent),
      transparent);
  animation: qcard-sheen 2.6s ease-in-out infinite;
}
@keyframes qcard-sheen {
  0% {
    translate: -130% 0;
  }
  55%, 100% {
    translate: 230% 0;
  }
}
@keyframes qcard-foil {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .qcard.is-hot::before,
  .qcard.is-hot::after {
    animation: none;
  }
  .qcard.is-hot::after {
    display: none;
  }
}
.qc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--qg);
  font-size: calc(19px * var(--fs-body, 1));
  line-height: 1;
  text-align: center;
}
.qc-icon .gcg-tbi {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}
.qc-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}
.qc-l1,
.qc-l2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  line-height: 1.3;
}
.qc-title {
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 700;
  color: var(--c-text-strong);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qc-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(11.5px * var(--fs-body, 1));
  color: var(--c-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qc-xp {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: calc(10.5px * var(--fs-body, 1));
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--qg);
  border: 1px solid color-mix(in srgb, var(--qg) 55%, transparent);
  background: color-mix(in srgb, var(--qg) 13%, transparent);
}
.qcard.is-hot .qc-xp {
  color: color-mix(in srgb, var(--qg) 55%, var(--c-white));
  border-color: var(--qg);
  background: color-mix(in srgb, var(--qg) 26%, transparent);
}
.qc-prog {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qc-prog .qc-count {
  text-align: right;
}
.qc-bar {
  display: block;
  width: 52px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-text) 17%, transparent);
}
.qc-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--qg);
  box-shadow:
    0 0 3px var(--qg),
    0 0 7px var(--qg),
    0 0 16px color-mix(in srgb, var(--qg) 70%, transparent);
}
.qc-count {
  font-family: var(--mono);
  font-size: calc(10px * var(--fs-mono, 1));
  color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
}
.qc-times {
  flex: 0 0 auto;
}
.qc-date {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: calc(10px * var(--fs-mono, 1));
  color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
}
.qc-done {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
  opacity: .3;
}
.qc-done .gcg-tbi {
  display: block;
  width: 20px;
  height: 20px;
}
.qcard.is-done .qc-done {
  color: var(--c-ctx);
  opacity: 1;
}
.qcard.is-done .qc-done .gcg-tbi {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c-ctx) 70%, transparent));
}
.qcard .gcg-tier-lock {
  margin-left: auto;
}
@container qcard (max-width: 300px) {
  .qcard--compact .qc-hint {
    display: none;
  }
}
.menu-sections {
  padding: var(--modal-pad, 16px);
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--gcg-ui-density));
}
@media (min-width: 860px) {
  #mainMenuModal .menu-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}
.settings-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
}
.settings-row:hover {
  background: var(--c-ctrl-3);
}
.settings-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--c-success, #4caf50);
}
.settings-row-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.settings-row-txt strong {
  font-size: calc(14px * var(--fs-body, 1));
  color: var(--c-text-hi);
}
.settings-row-txt span {
  font-size: calc(12px * var(--fs-body, 1));
  color: var(--c-text-dim);
  line-height: 1.4;
}
#changelogModal .menu-box {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
.cl-body {
  padding: var(--modal-pad, 16px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cl-empty {
  color: var(--c-text-dim);
  font-size: calc(13px * var(--fs-body, 1));
  text-align: center;
  padding: 24px 8px;
}
.cl-empty.cl-sm {
  padding: 2px 0 0;
  text-align: left;
  font-style: italic;
}
.cl-rel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cl-rel + .cl-rel {
  border-top: 1px solid var(--c-border-subtle);
  padding-top: 16px;
}
.cl-rel-hd {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cl-ver {
  font: 700 15px/1 var(--mono);
  font-size: calc(15px * var(--fs-mono, 1));
  letter-spacing: 0.5px;
  color: var(--c-text-hi);
}
.cl-date {
  font-size: calc(12px * var(--fs-body, 1));
  color: var(--c-text-dim);
}
.cl-cur {
  margin-left: auto;
  font-size: calc(10px * var(--fs-body, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--c-success);
  border: 1px solid var(--c-success);
  border-radius: 999px;
  padding: 2px 8px;
}
.cl-area {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cl-area + .cl-area {
  margin-top: 4px;
}
.cl-area-t {
  font-size: calc(12px * var(--fs-body, 1));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--c-text-hi);
}
.cl-area-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 10px;
  border-left: 1px solid var(--c-border-subtle);
}
.cl-grp {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cl-grp-t {
  font-size: calc(11px * var(--fs-body, 1));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.cl-new .cl-grp-t {
  color: var(--c-success);
}
.cl-improved .cl-grp-t {
  color: var(--c-warn);
}
.cl-fixed .cl-grp-t {
  color: var(--c-accent);
}
.cl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cl-item {
  position: relative;
  padding-left: 16px;
  font-size: calc(13px * var(--fs-body, 1));
  color: var(--c-text-bright);
  line-height: 1.45;
}
.cl-item::before {
  content: "›";
  position: absolute;
  left: 3px;
  top: 0;
  color: var(--c-text-muted);
}
#myReplaysModal .menu-box {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
.mr-cap {
  font-size: calc(11px * var(--fs-body, 1));
  font-weight: 600;
  color: var(--c-text-dim);
  margin-left: 8px;
  letter-spacing: 0.4px;
}
.mr-body {
  padding: var(--modal-pad, 16px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mr-empty {
  color: var(--c-text-dim);
  font-size: calc(13px * var(--fs-body, 1));
  text-align: center;
  padding: 24px 8px;
}
.mr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--c-border-subtle);
  border-radius: 8px;
  background: var(--c-panel-2);
  padding: 9px 11px;
}
.mr-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
}
.mr-main:hover .mr-title {
  color: var(--c-white);
}
.mr-title {
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 700;
  color: var(--c-text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mr-title .deck-btn-dot {
  width: 12px;
  height: 12px;
  font-size: calc(7px * var(--fs-body, 1));
  vertical-align: middle;
  margin: 0 3px 1px 0;
}
.mr-title .mr-dname {
  vertical-align: middle;
}
.mr-title .mr-vs {
  color: var(--c-text-dim);
  font-weight: 600;
  white-space: pre;
}
.mr-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: calc(11.5px * var(--fs-body, 1));
  color: var(--c-text-dim);
}
.mr-won {
  color: var(--c-success);
  font-weight: 700;
}
.mr-lost {
  color: var(--c-danger-2);
  font-weight: 700;
}
.mr-flag {
  font-size: calc(9.5px * var(--fs-body, 1));
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--c-warn);
  border: 1px solid var(--c-warn);
  border-radius: 999px;
  padding: 1px 7px;
}
.mr-acts {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}
.mr-btn {
  font-size: calc(11px * var(--fs-body, 1));
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--c-ctrl);
  border: 1px solid var(--c-border);
  color: var(--c-text-bright);
}
.mr-btn:hover {
  background: var(--c-ctrl-hi);
  color: var(--c-white);
}
.mr-btn.mr-del {
  background: none;
  border-color: var(--c-danger);
  color: var(--c-danger);
}
.mr-btn.mr-del:hover {
  border-color: var(--c-danger-2);
  color: var(--c-danger-2);
  background: color-mix(in srgb, var(--c-danger) 14%, transparent);
}
.mr-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.menu-group {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--gcg-ui-density));
}
.group-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--c-white);
  letter-spacing: 0.03em;
  line-height: 1;
  font-size: calc(clamp(21px, 5.4vw, 26px) * var(--fs-display, 1));
  text-shadow: 0 2px 10px color-mix(in srgb, var(--c-ink-dark) 95%, transparent), 0 1px 3px color-mix(in srgb, var(--c-ink-dark) 90%, transparent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.group-grid {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(8px * var(--gcg-ui-density));
}
.mode-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  min-width: 0;
  background: var(--surface-haze);
  border: 1px solid color-mix(in srgb, var(--c-white) 16%, transparent);
  border-radius: 7px;
  padding: max(7px, calc(9px * var(--gcg-ui-density))) calc(11px * var(--gcg-ui-density));
  cursor: pointer;
  backdrop-filter: blur(7px) saturate(120%);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  transition: background .12s ease, border-color .12s ease;
}
.mode-btn:hover {
  background: var(--glass-bg-raised);
  border-color: var(--c-text-muted);
}
.mode-btn[hidden] {
  display: none;
}
.mode-btn.play-primary {
  border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
  background: color-mix(in srgb, var(--c-ink-dark) 50%, transparent);
}
.mode-btn.play-primary:hover {
  border-color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 22%, var(--glass-bg-raised));
}
.mode-btn.menu-continue:not(:disabled) strong {
  color: var(--c-white);
}
.menu-continue-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.menu-continue-copy > span {
  display: block;
}
.gm-continue-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.gm-continue-mark {
  flex: none;
  display: inline-flex;
  width: 11px;
  height: 11px;
  align-items: center;
  justify-content: center;
  color: var(--c-ctx);
  font: 900 9px/1 sans-serif;
}
.gm-continue-mark .gcg-tbi {
  display: block;
  width: 11px;
  height: 11px;
}
.mode-btn.menu-continue:not(:disabled) .gm-continue-mark {
  color: var(--c-ctx);
}
.gm-continue-mark.gm-continue-mark--cloud,
.mode-btn.menu-continue:not(:disabled) .gm-continue-mark.gm-continue-mark--cloud,
.gm-chip--cont .gm-continue-mark.gm-continue-mark--cloud {
  color: var(--c-cloud);
}
.gm-action-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.gm-action-continue::before {
  content: "◆";
  flex: none;
  color: var(--c-ctx);
  font: 900 9px/1 sans-serif;
}
.gm-launch-continue.gcg-btn--fill.gm-action-continue::before,
#newGameBtn.gm-action-continue::before {
  text-shadow: 0 0 4px rgba(0, 0, 0, .58);
}
.mode-btn:disabled {
  cursor: default;
}
.mode-btn:disabled:hover {
  background: var(--surface-haze);
  border-color: color-mix(in srgb, var(--c-white) 16%, transparent);
}
.mode-btn:disabled strong {
  color: color-mix(in srgb, var(--c-text-faint) 78%, var(--c-ink-dark));
  text-shadow: none;
}
.mode-btn:disabled span {
  color: color-mix(in srgb, var(--c-text-faint) 65%, var(--c-ink-dark));
  text-shadow: none;
}
.mode-btn strong {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: calc(12px * var(--fs-display, 1));
  letter-spacing: 0.04em;
  color: var(--c-text-hi);
  line-height: 1;
  text-shadow: 0 1px 3px color-mix(in srgb, var(--c-ink-dark) 90%, transparent);
}
.mode-btn span {
  overflow-wrap: anywhere;
  font-size: calc(11px * var(--fs-body, 1));
  color: var(--c-text);
  line-height: 1.25;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--c-ink-dark) 90%, transparent);
}
.mode-btn .mode-presence {
  position: absolute;
  top: 7px;
  right: 8px;
  color: var(--p1);
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: calc(11px * var(--fs-mono, 1));
  line-height: 1.2;
  text-shadow: none;
}
.mode-btn .mode-presence[hidden] {
  display: none;
}
.mode-btn:has(> .mode-presence:not([hidden])) > strong {
  padding-right: 36px;
}
.mode-btn .menu-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: inherit;
  text-shadow: none;
}
.mode-btn .menu-btn-icon .gcg-tbi {
  display: block;
  width: 18px;
  height: 18px;
}
a.mode-btn {
  text-decoration: none;
}
.acct-lv {
  display: inline-block;
  vertical-align: baseline;
  margin-right: 5px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(8px * var(--fs-display, 1));
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--r-loz);
  white-space: nowrap;
  color: var(--c-text-hi);
  background: color-mix(in srgb, var(--c-text-dim) 18%, transparent);
  border: 1px solid var(--c-border-subtle);
  text-shadow: none;
}
.mode-btn .soon {
  position: absolute;
  top: 7px;
  right: 8px;
}
.mode-btn .ext {
  position: absolute;
  top: 7px;
  right: 9px;
  line-height: 0;
  color: var(--c-text-dim);
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--c-ink-dark) 90%, transparent));
}
.mode-btn .ext .gcg-tbi {
  display: block;
  width: 14px;
  height: 14px;
}
.mode-btn.locked {
  cursor: not-allowed;
}
.mode-btn.locked:hover {
  background: var(--surface-haze);
  border-color: color-mix(in srgb, var(--c-white) 16%, transparent);
}
.mode-btn.locked strong {
  color: color-mix(in srgb, var(--c-text-faint) 78%, var(--c-ink-dark));
  text-shadow: none;
}
.mode-btn.locked span {
  color: color-mix(in srgb, var(--c-text-faint) 65%, var(--c-ink-dark));
  text-shadow: none;
}
@media (max-width: 480px) {
  .group-grid {
    grid-template-columns: 1fr;
  }
}
.tests-screen {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: calc(12px * var(--gcg-ui-density));
  padding: calc(12px * var(--gcg-ui-density));
  background: var(--screen-tint);
  overflow: hidden;
  height: 100%;
}
@media (max-width: 700px) {
  .tests-screen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(320px, 1fr);
    overflow-y: auto;
  }
  .tests-screen > * {
    min-width: 0;
  }
}
section.tests-panel,
section.tests-history {
  padding: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
div.tests-head {
  margin-bottom: 0;
  padding: 10px 12px;
  background: var(--c-ctrl-2);
  border-bottom: 1px solid var(--c-border-subtle);
}
div.tests-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tests-panel-head > span {
  flex: 1;
}
.tests-form {
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tests-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tests-field label,
.tests-choice-title {
  font-size: calc(10px * var(--fs-body, 1));
  color: var(--c-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.tests-form input {
  width: 100%;
  box-sizing: border-box;
}
.tests-form select {
  width: 100%;
  box-sizing: border-box;
}
.tests-form select[multiple] {
  min-height: 96px;
}
.sel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.75);
  align-items: center;
  justify-content: center;
}
.sel-overlay.open {
  display: flex;
}
.sel-box {
  background: var(--c-panel-2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  width: 680px;
  max-width: 95vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--c-ctrl-2);
  border-bottom: 1px solid var(--c-border-subtle);
  flex-shrink: 0;
}
.sel-head span {
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 700;
  color: var(--c-text-bright);
}
.sel-head button {
  padding: 2px 8px;
}
.sel-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.sel-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--c-border-subtle);
}
.sel-col:last-child {
  border-right: none;
}
.sel-col-title {
  padding: 7px 14px;
  font-size: calc(10px * var(--fs-body, 1));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--c-text-subtle);
  background: var(--panel-bg-2);
  border-bottom: 1px solid var(--c-border-subtle);
  flex-shrink: 0;
}
.sel-list {
  flex: 1;
  overflow-y: auto;
}
.sel-group-label {
  padding: 7px 12px 3px;
  font-size: calc(9px * var(--fs-body, 1));
  color: var(--c-border-strong);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 700;
  border-top: 1px solid var(--c-border-subtle);
  margin-top: 2px;
}
.sel-group-label:first-child {
  border-top: none;
  margin-top: 0;
}
.sel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-size: calc(12px * var(--fs-body, 1));
  color: var(--c-text);
  cursor: pointer;
  user-select: none;
}
.sel-item:hover {
  background: var(--c-ctrl-2);
}
.sel-item input[type=checkbox] {
  accent-color: var(--c-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.sel-foot {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--c-border-subtle);
  background: var(--panel-bg);
  flex-shrink: 0;
  justify-content: flex-end;
}
.sel-preview {
  font-size: calc(11px * var(--fs-body, 1));
  color: var(--c-text-muted);
  padding: 5px 8px;
  background: var(--c-panel-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: 4px;
  min-height: 28px;
  line-height: 1.4;
  word-break: break-word;
}
.sel-edit-btn {
  align-self: flex-start;
  margin-top: 2px;
}
.tests-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tests-three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.tests-side {
  border: 1px solid var(--c-border-subtle);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tests-side-head,
.tests-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.tests-choice {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: calc(12px * var(--fs-body, 1));
  color: var(--c-text);
}
.tests-choice input {
  width: auto;
  accent-color: var(--c-accent);
}
.tests-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
div.tests-mode-toggle {
  display: flex;
}
div.tests-mode-toggle > button {
  flex: 1 1 0;
}
.tests-players-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tests-player-config {
  background: var(--panel-bg);
  border: 1px solid var(--c-border-subtle);
  border-radius: 6px;
  padding: 10px;
}
.tests-player-config .replay-deck-summary {
  align-items: flex-start;
  overflow: visible;
}
.tests-player-config .deck-btn-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: normal;
  overflow-y: auto;
  text-overflow: clip;
  max-height: 132px;
}
.tests-side-mode {
  margin-top: 2px;
}
.tests-form.mode-cross_product .tests-side-mode {
  display: none;
}
.tests-form.mode-random .tests-side-mode {
  display: block;
}
.tests-summary-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--panel-bg);
  border: 1px solid var(--c-border-subtle);
  border-radius: 6px;
  font-size: calc(12px * var(--fs-body, 1));
  color: var(--c-text);
}
.tests-sum-matchups {
  font-weight: 700;
  color: var(--c-text-hi);
}
.tests-sum-x,
.tests-sum-eq {
  color: var(--c-border-strong);
  font-size: calc(13px * var(--fs-body, 1));
}
.tests-sum-n {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tests-sum-n label {
  font-size: calc(10px * var(--fs-body, 1));
  color: var(--c-text-faint);
}
.tests-sum-n input {
  width: 52px;
  padding: 0 4px;
  text-align: center;
}
.tests-sum-total {
  font-weight: 700;
  color: var(--c-text-hi);
}
.tests-sum-est {
  font-size: calc(11px * var(--fs-body, 1));
  color: var(--c-success);
  margin-left: 2px;
}
.tests-estimate-btn {
  padding: 3px 8px;
  font-size: calc(11px * var(--fs-body, 1));
  background: var(--c-success-surface-dim);
  border: 1px solid #3a5a3a;
  color: #8dbc8d;
  border-radius: 4px;
}
.tests-estimate-btn:hover {
  background: #243424;
}
.bot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 2px;
}
.bot-chip {
  padding: 3px 8px;
  font-size: calc(11px * var(--fs-body, 1));
  border-radius: 12px;
  background: var(--c-panel-3);
  border: 1px solid var(--c-border);
  color: var(--c-text-subtle);
  cursor: pointer;
}
.bot-chip.active {
  background: color-mix(in srgb, var(--c-toggle-on) 22%, transparent);
  border-color: var(--c-accent);
  color: #dbe8ff;
}
.bot-chip:hover {
  border-color: var(--c-border-strong);
  color: var(--c-text-dim);
}
.bot-chip.active:hover {
  background: color-mix(in srgb, var(--c-toggle-on) 32%, transparent);
}
.bot-chip:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.bot-chip:disabled:hover {
  border-color: var(--c-border);
  color: var(--c-text-subtle);
}
.tests-advanced {
  margin-top: 0;
}
.tests-advanced > summary {
  font-size: calc(10px * var(--fs-body, 1));
  color: var(--c-border-strong);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 0;
  user-select: none;
  list-style: none;
}
.tests-advanced > summary::-webkit-details-marker {
  display: none;
}
.tests-advanced > summary:hover {
  color: var(--c-text-muted);
}
.tests-advanced[open] > summary {
  color: var(--c-text-muted);
}
.tests-actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--c-border-subtle);
  background: var(--panel-bg);
  flex-shrink: 0;
}
.tests-actions button {
  flex: 1 1 auto;
}
#testsClearBtn {
  flex: 0 0 auto;
}
#testsRunPendingBtn {
  flex: 0 0 auto;
}
.tests-list {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.batch-row {
  border: 1px solid var(--c-border-subtle);
  border-radius: 6px;
  background: var(--panel-bg);
  overflow: hidden;
  flex-shrink: 0;
}
.batch-row.pending {
  border-color: color-mix(in srgb, var(--c-warn) 45%, var(--c-border));
}
.batch-row.interrupted {
  border-color: color-mix(in srgb, var(--c-danger) 40%, var(--c-border));
}
.batch-row.running {
  border-color: color-mix(in srgb, var(--p1) 45%, var(--c-border));
}
.batch-top {
  display: grid;
  grid-template-columns: 64px minmax(104px, 1fr) 130px 1px 110px minmax(53px, 0.66fr) 140px minmax(53px, 0.66fr) 110px 1px 34px 44px 46px 64px 28px 28px 28px 28px;
  gap: 5px;
  align-items: center;
  padding: 5px 8px;
  height: 54px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.batch-top:hover {
  background: var(--c-panel-3);
}
.batch-date {
  font-size: calc(10px * var(--fs-body, 1));
  color: var(--c-text-subtle);
  line-height: 1.45;
  overflow: hidden;
}
.batch-title {
  font-size: calc(11px * var(--fs-body, 1));
  font-weight: 700;
  color: var(--c-text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
span.batch-played-badge {
  margin-left: 5px;
  padding: 1px 5px;
  font-size: calc(8px * var(--fs-body, 1));
  vertical-align: middle;
}
.batch-scb {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}
.batch-scb .batch-status {
  flex: 1;
  text-align: right;
  min-width: 0;
}
.batch-status {
  font-size: calc(10px * var(--fs-body, 1));
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--c-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-status.done {
  color: var(--c-success);
}
.batch-status.pending {
  color: var(--c-warn);
}
.batch-status.queued {
  color: var(--p1);
}
.batch-status.paused {
  color: var(--c-warn);
}
.batch-status.running {
  color: var(--c-accent);
}
.batch-status.error {
  color: var(--c-danger-2);
}
.batch-status.interrupted {
  color: var(--c-danger-2);
}
.batch-p1 {
  color: var(--p1, var(--c-accent));
}
.batch-p2 {
  color: var(--p2, var(--c-danger));
}
button.batch-sq-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: calc(15px * var(--fs-body, 1));
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
}
.batch-btn-ico {
  display: inline-flex;
}
.batch-btn-ico .gcg-tbi {
  width: 15px;
  height: 15px;
}
.batch-crit-ico {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.batch-crit-ico .gcg-tbi {
  width: 13px;
  height: 13px;
}
.batch-done-btn {
  background: transparent;
  border-color: var(--c-success-surface);
  color: var(--c-success);
  cursor: default;
  opacity: 0.7;
}
.batch-report-btn.loading {
  opacity: 0.5;
  pointer-events: none;
}
@keyframes batch-spin {
  to {
    transform: rotate(360deg);
  }
}
.batch-spin {
  display: inline-block;
  animation: batch-spin 1s linear infinite;
}
.batch-bot {
  font-size: calc(11px * var(--fs-body, 1));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}
.batch-deck {
  font-size: calc(11px * var(--fs-body, 1));
  color: var(--c-text-muted);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.3;
}
.batch-deck-name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
}
.batch-playlist {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  -webkit-line-clamp: 1;
}
.batch-pl-ico {
  display: inline-flex;
  align-items: center;
  color: var(--c-text-muted);
  flex-shrink: 0;
}
.batch-pl-ico .gcg-tbi {
  width: 18px;
  height: 18px;
}
.batch-pl-count {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: calc(13px * var(--fs-body, 1));
  letter-spacing: .02em;
  color: var(--c-text-bright);
}
.batch-pl-word {
  color: var(--c-text-muted);
}
.batch-pl-type {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(9px * var(--fs-display, 1));
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-muted);
}
.batch-deck-p1 {
  justify-content: flex-end;
  text-align: right;
}
.batch-deck-p1 .deck-line-dots {
  order: 2;
}
.batch-num {
  font-size: calc(11px * var(--fs-body, 1));
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.batch-col-label {
  font-size: calc(9px * var(--fs-body, 1));
  color: var(--c-border-strong);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
.batch-col-label--total {
  color: var(--c-text-muted);
}
.batch-sep {
  width: 1px;
  background: var(--c-border-subtle);
  align-self: stretch;
  margin: 6px 0;
  justify-self: center;
}
.batch-player-col {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}
.batch-player-label {
  font-size: calc(10px * var(--fs-body, 1));
  font-weight: 800;
  flex-shrink: 0;
}
.winbar {
  height: 18px;
  width: 100%;
  display: flex;
  background: var(--c-panel-3);
  border: 1px solid var(--c-border-subtle);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.winbar-p1 {
  background: var(--p1, var(--c-accent));
}
.winbar-p2 {
  background: var(--p2, var(--c-danger));
}
.wins-pct-overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: calc(10px * var(--fs-body, 1));
  font-weight: 700;
  color: var(--c-white);
  pointer-events: none;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.wins-pct-p1 {
  left: 5px;
}
.wins-pct-p2 {
  right: 5px;
}
.batch-progress-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--c-panel-2);
  pointer-events: none;
  z-index: 0;
}
.batch-progress-fill {
  height: 100%;
  transition: width 0.3s;
  opacity: 0.32;
}
.batch-top > *:not(.batch-progress-track) {
  position: relative;
  z-index: 1;
}
.batch-details {
  border-top: 1px solid var(--c-border-subtle);
  padding: 8px 8px 8px 20px;
  background: var(--panel-bg);
}
.game-table {
  --gt-font: 11px;
  --gt-pad-y: 5px;
  --gt-pad-x: 6px;
  --gt-th-font: 10px;
  --gt-th-spacing: 0.5px;
  --gt-line-height: 1.2;
  width: 100%;
  border-collapse: collapse;
  font-size: calc(var(--gt-font) * var(--fs-body, 1));
}
.game-table th,
.game-table td {
  padding: var(--gt-pad-y) var(--gt-pad-x);
  border-bottom: 1px solid var(--c-border-subtle);
  text-align: left;
  line-height: var(--gt-line-height);
}
.game-table th {
  color: var(--c-text-faint);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--gt-th-spacing);
  font-size: calc(var(--gt-th-font) * var(--fs-body, 1));
}
.game-table .deck-line-name {
  white-space: nowrap;
}
.game-bot {
  font-weight: 700;
}
.game-bot-p1 {
  color: var(--p1, var(--c-accent));
}
.game-bot-p2 {
  color: var(--p2, var(--c-danger));
}
.tests-empty {
  color: var(--c-text-faint);
  font-size: calc(12px * var(--fs-body, 1));
  padding: 18px;
  text-align: center;
}
.tests-running-hdr {
  color: var(--c-text-muted);
  font-size: calc(11px * var(--fs-body, 1));
  font-style: italic;
  padding: 4px 0 6px;
}
.log-column {
  width: min(440px, max(var(--sidebar-min-w, 287px), calc(var(--sidebar-w) * var(--sidebar-height-scale, 1))));
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  --sidebar-density: 1;
  background: var(--c-field);
  border: 0.5px solid var(--panel-border-color);
  border-radius: var(--panel-radius);
  overflow: hidden;
}
.sidebar-density-frame {
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  zoom: var(--sidebar-density);
}
.log-column.rail-collapsed {
  width: var(--sidebar-rail-w);
}
#playScreen.hdr-shell:not(.narrow-shell) .sidebar-section.collapsed > .sidebar-section-body {
  display: none;
}
.log-column.rail-collapsed .sidebar-section-body,
.log-column.rail-collapsed .sidebar-setup-summary {
  display: none !important;
}
.log-column.rail-collapsed .sidebar-rail-toggle {
  transform: rotate(180deg);
}
.sidebar-topbar .sidebar-rail-toggle {
  margin-left: auto;
  flex: 0 0 auto;
}
.sidebar-rail-toggle {
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: calc(12px * var(--fs-body, 1));
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text-dim);
  transition: transform 0.15s;
}
.sidebar-rail-toggle:hover {
  background: var(--c-ctrl);
}
.sidebar-sections {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.log-column.rail-collapsed .sidebar-sections {
  display: none;
}
.sidebar-section {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-bottom: 1px solid var(--c-border-subtle);
}
.sidebar-section.sec-setup {
  order: 1;
  border-bottom: none;
}
.sidebar-section.sec-log {
  order: 3;
  flex: 1;
  min-height: 0;
  border-bottom: none;
}
.sidebar-section.sec-playback {
  order: 4;
  flex-shrink: 0;
  border-bottom: none;
  border-top: 1px solid var(--c-border-subtle);
}
.sidebar-section-body {
  overflow: hidden;
  transition: max-height 0.24s ease, opacity 0.2s ease;
}
.sidebar-section.sec-log .sidebar-section-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-section.collapsed .sidebar-section-body {
  max-height: 0;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-section-body {
    transition: none;
  }
}
.sidebar-section.sec-log.collapsed {
  flex: 0 0 auto;
}
.log-header {
  padding: 10px 12px;
  background: var(--c-ctrl-2);
  border-bottom: 1px solid var(--c-border-subtle);
  font-size: calc(10px * var(--fs-body, 1));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-text-dim);
}
.log-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--panel-pad);
  font-size: calc(11px * var(--fs-body, 1));
  line-height: 1.5;
}
#logContent > *,
#mobileLogContent > * {
  overflow-anchor: none;
}
#logContent > .log-anchor,
#mobileLogContent > .log-anchor {
  height: 1px;
  flex: 0 0 1px;
  overflow-anchor: auto;
  pointer-events: none;
}
.log-entry {
  margin-bottom: 4px;
  padding: 5px 8px;
  background: var(--c-panel-2);
  border-left: 2px solid var(--c-border-strong);
  border-radius: 0 3px 3px 0;
}
.log-entry.current {
  border-left-color: var(--c-accent);
  background: var(--c-ctrl-2);
  color: var(--c-white);
}
#playScreen:not(.narrow-shell) #logContent .log-entry {
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0 0 2px;
  padding: 1px 2px;
  text-shadow: 0 1px 2px #000;
  border-left: 2px solid transparent;
  padding-left: 6px;
}
#logContent .log-entry [class^=lz-],
#logContent .log-entry [class*=" lz-"] {
  text-shadow: none;
}
#playScreen:not(.narrow-shell) #logContent .log-entry.current {
  background: none;
  color: var(--c-white);
  font-weight: 700;
  border: 0;
  border-left: 2px solid var(--c-white);
}
#logContent .log-entry {
  cursor: pointer;
}
#playScreen:not(.narrow-shell) #logContent .log-entry:hover {
  opacity: 1 !important;
  color: var(--c-white);
  border-left-color: rgba(255, 255, 255, 0.35);
}
#logContent .log-head,
#mobileLogContent .log-head {
  color: var(--c-text-bright);
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 2px 4px 6px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--c-border-subtle);
  text-shadow: 0 1px 2px #000;
}
#logContent .log-head .log-head-sub,
#mobileLogContent .log-head .log-head-sub {
  display: block;
  margin-top: 2px;
  color: var(--c-text-muted);
  font-weight: 600;
  font-size: .92em;
  letter-spacing: .02em;
}
.log-cp-dia {
  display: inline-block;
  width: 9px;
  height: 9px;
  color: var(--c-ctx);
  vertical-align: -1px;
  margin-right: 5px;
}
#playScreen:not(.narrow-shell) #playbackControls {
  justify-content: center;
}
#playScreen:not(.narrow-shell) #playbackControls > button:not(#pbStart):not(#pbPrevCtrl):not(#pbPrevStep):not(#pbPlay):not(#pbNextStep):not(#pbNextCtrl):not(#pbEnd):not(#pbPrevTurn):not(#pbNextTurn):not(#tickSpeedBtn) {
  display: none;
}
#playScreen:not(.narrow-shell) #playbackControls {
  --tc-size-base: 32px;
  --tc-size: calc(var(--tc-size-base) * var(--tc-comp, 1));
  --tc-aux-h: calc(var(--tc-size) * .75);
  padding: 6px 6px 8px;
  gap: 3px;
  grid-template-rows: var(--tc-size) var(--tc-aux-h);
}
#playScreen:not(.narrow-shell) #playbackControls .icon-btn.wide {
  min-width: var(--tc-size);
  padding: 0 4px;
}
#playScreen:not(.narrow-shell) #playbackControls #tickSpeedBtn {
  font-size: calc(10px * var(--fs-body, 1) * var(--tc-comp, 1));
}
#playScreen:not(.narrow-shell) #playbackControls .icon-btn svg.tc-ico {
  width: calc(18px * var(--tc-comp, 1));
  height: calc(18px * var(--tc-comp, 1));
}
#playScreen:not(.narrow-shell) #playbackControls .icon-btn svg.tc-step {
  width: calc(14px * var(--tc-comp, 1));
  height: calc(14px * var(--tc-comp, 1));
}
#playScreen:not(.narrow-shell) #playbackControls .icon-btn svg.tc-cv {
  width: calc(12px * var(--tc-comp, 1));
  height: calc(12px * var(--tc-comp, 1));
}
#playScreen:not(.narrow-shell) #playbackControls .icon-btn svg.tc-dia {
  width: calc(13px * var(--tc-comp, 1));
  height: calc(13px * var(--tc-comp, 1));
}
#playScreen:not(.narrow-shell) #playbackControls .icon-btn.tc-aux svg {
  width: calc(13px * var(--tc-comp, 1));
  height: calc(13px * var(--tc-comp, 1));
}
#playScreen:not(.narrow-shell) #sharedTimeline > #timelineCur,
#playScreen:not(.narrow-shell) #sharedTimeline > #timelineSlider,
#playScreen:not(.narrow-shell) #sharedTimeline > #timelineMax {
  display: none;
}
#playScreen:not(.narrow-shell) .sec-playback > .sidebar-section-body {
  display: flex;
  flex-direction: column;
}
#playScreen:not(.narrow-shell) .sec-playback #sharedTimeline {
  order: 1;
}
#playScreen:not(.narrow-shell) .sec-playback #playbackControls {
  order: 2;
}
#playScreen:not(.narrow-shell) .sec-playback #speedSkipRow {
  order: 3;
}
#sidebarRailToggle {
  display: none;
}
.lz-trigger,
.lz-activate,
.lz-pair,
.lz-link,
.lz-burst,
.lz-ability,
.lz-once {
  display: inline-block;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 0;
  margin: 0 1px;
}
.lz-trigger {
  background: var(--c-lz-trigger);
  color: var(--c-ink-dark);
}
.lz-activate {
  background: var(--c-lz-activate);
  color: var(--c-ink-dark);
}
.lz-pair {
  background: var(--c-lz-pair);
  color: var(--c-ink-dark);
}
.lz-link {
  background: var(--c-lz-link);
  color: var(--c-ink-dark);
}
.log-status-pair {
  color: var(--c-lz-pair);
  font-weight: 700;
}
.log-status-link {
  color: var(--c-lz-link);
  font-weight: 700;
}
.lz-burst {
  background: var(--c-lz-burst);
  color: var(--c-ink-light);
}
.lz-once {
  background: var(--c-lz-once);
  color: var(--c-ink-light);
}
.cost-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 .18em;
  margin: 0 .12em;
  border-radius: 999px;
  background: var(--c-white, #fff);
  color: var(--c-ink-dark, #111);
  font-weight: 800;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: middle;
}
.lz-ability {
  background: var(--c-lz-ability);
  color: var(--c-ink-dark);
  padding: 0 11px;
  clip-path: polygon(0 50%, 6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%);
}
.log-card {
  font-weight: 700;
}
@media (hover: none) {
  #logContent .log-card[data-code] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}
.log-card.p1 {
  color: var(--p1, var(--c-accent));
}
.log-card.p2 {
  color: var(--p2, var(--c-danger));
}
.log-p1 {
  color: var(--p1, var(--c-accent));
  font-weight: 600;
}
.log-p2 {
  color: var(--p2, var(--c-danger));
  font-weight: 600;
}
.sidebar-section.sec-stats {
  order: 2;
  flex: 0 0 auto;
  min-height: 0;
  border-bottom: none;
}
.sec-stats > .sidebar-section-body {
  height: var(--results-height, auto);
  max-height: var(--results-cap, 292px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#playScreen.narrow-shell .sec-stats > .sidebar-section-body {
  max-height: var(--results-cap, 292px);
}
#msBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 6px;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
.results-resize-handle {
  position: relative;
  flex: 0 0 14px;
  cursor: row-resize;
  touch-action: none;
  user-select: none;
  background: transparent;
}
.rp-tabs {
  flex: 0 0 auto;
}
.rp-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 2px;
}
.rp-grp {
}
.rp-preset-title {
  text-align: center;
  font-size: calc(10.5px * var(--fs-body, 1));
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-text-dim, #8a97ab);
}
.rp-preset-title .rp-preset-nm {
  font-weight: 700;
  color: var(--c-text);
}
.rp-preset-title.custom .rp-preset-nm {
  color: #e9b44c;
}
.rp-matchup {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  font-size: calc(14px * var(--fs-body, 1));
  white-space: nowrap;
}
.rp-name {
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
}
.rp-name.p1 {
  color: var(--p1, var(--c-accent));
}
.rp-name.p2 {
  color: var(--p2, var(--c-danger));
}
.rp-name:has(.acct-rank) {
  max-width: 130px;
}
.rp-name .acct-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
  display: inline-block;
  vertical-align: bottom;
}
.rp-scr {
  font-family: var(--mono);
  font-size: calc(19px * var(--fs-mono, 1));
  font-weight: 700;
  line-height: 1;
}
.rp-scr.p1 {
  color: var(--p1, var(--c-accent));
}
.rp-scr.p2 {
  color: var(--p2, var(--c-danger));
}
.rp-vs {
  font-size: calc(10px * var(--fs-body, 1));
  color: var(--c-text-muted, #8a97ab);
  font-weight: 700;
  letter-spacing: .05em;
}
.rp-bar {
  margin-top: 11px;
}
.rp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(11.5px * var(--fs-body, 1));
  color: var(--c-text-dim, #8a97ab);
  font-variant-numeric: tabular-nums;
}
.rp-meta .g {
  color: var(--c-text);
}
.rp-rate-up {
  color: var(--c-success, #9dcc9d);
}
.rp-rate-down {
  color: var(--c-danger, #ff6666);
}
.rp-rate-flat {
  color: var(--c-text-dim, #8a97ab);
}
.rp-meta .g.rp-notice {
  color: var(--c-warn);
}
.rp-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rp-scope {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--c-text-muted);
}
.rp-scope:has(.feat-lock),
.rp-empty:has(.feat-lock) {
  cursor: pointer;
}
.rp-streak .flame {
  filter: saturate(1.1);
}
.rp-streak b {
  font-weight: 700;
}
.rp-streak .p1 {
  color: var(--p1, var(--c-accent));
}
.rp-streak .p2 {
  color: var(--p2, var(--c-danger));
}
div.rp-lb {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
div.rp-lb .rp-row {
  grid-template-columns: 16px 1fr auto auto;
  font-size: calc(12px * var(--fs-body, 1));
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.rp-rank {
  color: var(--c-text-muted, #8a97ab);
  font-family: var(--mono);
  font-size: calc(11px * var(--fs-mono, 1));
}
.rp-row.lead .rp-rank {
  color: var(--c-accent);
}
div.rp-lb .rp-dname {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: calc(12px * var(--fs-body, 1));
}
.rp-dname .nm {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-dname .deck-btn-dot {
  width: 13px;
  height: 13px;
  font-size: calc(8px * var(--fs-body, 1));
}
div.rp-lb .rp-wl {
  font-size: calc(11px * var(--fs-body, 1));
}
.rp-pct {
  font-family: var(--mono);
  font-weight: 600;
  width: 36px;
  text-align: right;
}
.rp-pct.hi {
  color: var(--c-success, #9dcc9d);
}
.rp-pct.lo {
  color: var(--c-danger);
}
.rp-empty {
  font-size: calc(11px * var(--fs-body, 1));
  color: var(--c-text-muted, #8a97ab);
  padding: 4px 0;
}
.rp-run-score {
  width: 100%;
}
.rp-run-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--c-text-muted);
  font-size: calc(10px * var(--fs-body, 1));
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
div.rp-run-list {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.pf-grp {
  min-width: 0;
}
.pf-sec + .pf-sec {
  margin-top: 12px;
}
div.rp-run-list .rp-run-row {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  cursor: default;
  font-size: calc(12px * var(--fs-body, 1));
}
.rp-run-result {
  font: 800 calc(11px * var(--fs-mono, 1))/1 var(--mono);
  text-align: center;
}
.rp-run-result.win {
  color: var(--c-success);
}
.rp-run-result.loss {
  color: var(--c-danger);
}
.rp-run-result.draw {
  color: var(--c-text-muted);
}
.rp-run-opponent {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rp-run-match {
  color: var(--c-text-muted);
  font: calc(10.5px * var(--fs-mono, 1))/1 var(--mono);
}
.rp-mode-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.rp-mode-metric {
  min-width: 0;
  text-align: center;
}
.rp-mode-metric .fld-l {
  margin: 0 0 2px;
}
.rp-mode-value {
  color: var(--c-text-hi);
  font: 750 calc(13px * var(--fs-body, 1))/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-mode-value.none {
  color: var(--c-text-faint);
}
.board-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel-bg);
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border-subtle);
  flex-shrink: 0;
}
.ctrl-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
#playbackControls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 3px;
  padding: 10px;
}
#playbackControls > button {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
}
button {
  padding: 5px 12px;
  background: var(--c-ctrl-hi);
  color: var(--c-text-strong);
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
button:hover:not(:disabled) {
  filter: brightness(var(--hover-brightness, 1.18));
}
button:active:not(:disabled) {
  filter: brightness(1.3);
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
.icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: calc(15px * var(--fs-body, 1));
  line-height: 1;
}
.icon-btn.wide {
  width: auto;
  min-width: 34px;
  padding: 0 8px;
}
.icon-btn svg {
  display: block;
  flex: 0 0 auto;
}
.icon-btn svg.tc-ico {
  width: 16px;
  height: 16px;
}
.icon-btn svg.tc-step {
  width: 12px;
  height: 12px;
}
.icon-btn svg.tc-cv {
  width: 11px;
  height: 11px;
  color: var(--c-text-dim);
}
.icon-btn svg.tc-dia {
  width: 12px;
  height: 12px;
  color: var(--c-ctx);
}
button.tc-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0 3px;
  min-width: 30px;
}
.tc-ctrl:hover:not(:disabled) .tc-dia {
  color: #63e08d;
}
.speed-menu {
  position: fixed;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border-radius: 6px;
  background: var(--glass-modal-bg);
  -webkit-backdrop-filter: var(--glass-modal-blur);
  backdrop-filter: var(--glass-modal-blur);
  border: 1px solid hsl(0 0% 30% / .8);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.speed-menu-opt {
  min-width: 56px;
  padding: 6px 12px;
  font-size: calc(12px * var(--fs-body, 1));
  font-weight: 700;
  background: var(--c-ctrl-raised);
  color: var(--c-text-hi);
  border-radius: 4px;
  text-align: center;
}
.speed-menu-opt.on {
  background: color-mix(in srgb, var(--c-toggle-on) 54%, var(--c-panel-2));
  color: var(--c-white);
}
.speed-menu-opt.hot:not(:disabled),
.speed-menu-opt:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-accent) 30%, var(--c-ctrl-raised));
  color: var(--c-white);
  box-shadow: inset 0 0 0 2px var(--c-accent);
}
.speed-menu-opt.on.hot,
.speed-menu-opt.on:hover {
  background: color-mix(in srgb, var(--c-toggle-on) 72%, var(--c-panel-2));
}
#tickSpeedBtn {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
@media (pointer: coarse) {
  .speed-menu-opt {
    min-width: 64px;
    padding: 10px 16px;
  }
}
select {
  min-width: 0;
}
.step-info {
  margin-left: auto;
  font-size: calc(11px * var(--fs-body, 1));
  color: var(--c-text-muted);
}
.replay-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
#modeSetup {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#modeSetup #pbStatus {
  display: none;
}
#modeSetup .setup-bots {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.replay-setup-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.replay-setup-stack .replay-player-config {
  background: var(--panel-bg-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: 5px;
  padding: 7px;
}
.replay-player-config {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bot-row-line {
  display: flex;
  gap: 6px;
  align-items: center;
}
.bot-row-line > .bot-select-source {
  display: none;
}
.bot-list-trigger,
.replay-deck-summary,
#setupBody .deck-id2,
#spaceScreen .deck-id2,
.pb-menu-table-btn,
#spaceDeckHost .deck-id2 {
  background: var(--ctrl-face);
  border: 1px solid var(--c-border);
}
.bot-list-trigger:hover,
.replay-deck-summary:hover,
#setupBody .deck-id2:hover,
#spaceScreen .deck-id2:hover,
.pb-menu-table-btn:hover,
#spaceDeckHost .deck-id2:hover {
  background: var(--ctrl-face-hover);
  border-color: var(--c-accent);
}
.bot-list-trigger {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  border-radius: 5px;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
}
.bot-list-trigger:hover {
  color: var(--c-white);
}
.bot-list-trigger:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.bot-list-trigger:disabled:hover {
  background: var(--ctrl-face);
  border-color: var(--c-border);
  color: var(--c-text);
}
.bot-picker-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.bot-picker-name {
  overflow: hidden;
  color: var(--c-text-hi);
  font-size: calc(12px * var(--fs-body, 1));
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-picker-version {
  color: var(--c-text-faint);
  font: 9px var(--mono);
  font-size: calc(9px * var(--fs-mono, 1));
}
.bot-picker-button.bot-locked .bot-picker-name {
  color: var(--c-text-dim);
}
.bot-picker-lock {
  flex: 0 0 auto;
}
.bot-roster-item.bot-locked .bot-profile-name {
  color: var(--c-text-dim);
}
.gcg-field-row.feat-locked .gcg-field-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--c-text-dim);
}
.gcg-action.feat-locked .feat-lock {
  margin-left: 6px;
}
.gcg-select option.feat-locked {
  color: var(--c-text-dim);
}
.gs-btn.feat-locked,
.gs-tile.feat-locked .gs-cover {
  opacity: 0.45;
}
.gs-btn.feat-locked .feat-lock,
.gs-tile-nm .feat-lock {
  margin-left: 6px;
}
.gs-tile.feat-locked .gs-tile-nm {
  color: var(--c-text-dim);
}
.rp-tab.feat-locked {
  opacity: 0.6;
}
.rp-tab .feat-lock {
  margin-left: 5px;
}
.bot-picker-arrow {
  margin-left: auto;
  color: var(--c-text-faint);
  font-size: calc(14px * var(--fs-body, 1));
  line-height: 1;
}
.bot-picker-meters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.bot-picker-meter {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(12px, 1fr);
  gap: 4px;
  align-items: center;
}
.bot-picker-meter-label {
  color: var(--c-text-faint);
  font-size: calc(7px * var(--fs-body, 1));
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.bot-picker-meter-track {
  height: 3px;
  display: grid;
  grid-template-columns: repeat(5, minmax(1px, 1fr));
  gap: 1px;
}
.bot-picker-meter-segment {
  min-width: 1px;
  background: var(--c-panel);
}
.bot-picker-meter.quality .bot-picker-meter-segment.on {
  background: #a97aeb;
}
.bot-picker-meter.speed .bot-picker-meter-segment.on {
  background: #4aca8d;
}
.bot-picker-meter.horizon .bot-picker-meter-segment.on {
  background: #e89a48;
}
.bot-picker-meter.visibility .bot-picker-meter-segment.on {
  background: #64a9d8;
}
.bot-picker-meter.hidden .bot-picker-meter-segment.on {
  background: #ff7777;
}
.replay-player-title {
  font-size: calc(11px * var(--fs-body, 1));
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
}
.replay-player-title.p1 {
  color: var(--p1, var(--c-accent));
}
.replay-player-title.p2 {
  color: var(--p2, var(--c-danger));
}
.deck-pick-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.replay-deck-summary {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  border-radius: 4px;
  overflow: hidden;
  min-height: 32px;
  text-align: left;
  color: var(--c-text-strong);
  cursor: pointer;
}
.deck-reroll-btn {
  flex-shrink: 0;
  width: 32px;
  min-height: 32px;
  background: var(--ctrl-face);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-text-dim);
  cursor: pointer;
  font-size: calc(15px * var(--fs-body, 1));
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.deck-reroll-btn:hover {
  background: var(--ctrl-face-hover);
  border-color: var(--c-border-strong);
  color: var(--c-text-hi);
}
.mystery-btn.active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.player-label {
  font-size: calc(11px * var(--fs-body, 1));
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.player-label.p1 {
  color: var(--p1, var(--c-accent));
}
.player-label.p2 {
  color: var(--p2, var(--c-danger));
}
.deck-choose-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  text-align: left;
  background: var(--c-ctrl-3);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--c-text-strong);
  overflow: hidden;
}
.deck-choose-btn:hover {
  background: var(--c-ctrl-raised);
  border-color: var(--c-border-strong);
}
.deck-btn-dots {
  display: flex;
  flex-direction: row;
  gap: 3px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.deck-line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.deck-line-dots {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.deck-line-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deck-btn-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(9px * var(--fs-body, 1));
  font-weight: 900;
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}
.deck-btn-dot.White {
  color: var(--c-faction-white);
  border-color: var(--c-text-dim);
}
.deck-btn-dot.mystery-dot {
  background: var(--c-ctrl-2);
  color: var(--c-text-dim);
  border-color: var(--c-border-strong);
}
.deck-dot-all {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background:
    conic-gradient(
      var(--c-card-blue) 0deg 72deg,
      var(--c-card-green) 72deg 144deg,
      var(--c-card-red) 144deg 216deg,
      var(--c-card-white) 216deg 288deg,
      var(--c-card-purple) 288deg 360deg);
}
.deck-btn-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.deck-btn-name {
  font-size: calc(11px * var(--fs-body, 1));
  font-weight: 700;
  color: var(--c-text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deck-btn-name.placeholder {
  color: var(--c-border-strong);
  font-weight: 400;
}
.deck-btn-sub {
  font-size: calc(10px * var(--fs-body, 1));
  color: var(--c-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.bot-row label {
  font-size: calc(10px * var(--fs-body, 1));
  color: var(--c-text-faint);
  flex-shrink: 0;
  min-width: 26px;
}
.bot-row > select,
.bot-row > .bot-row-line {
  flex: 1;
  min-width: 0;
}
.replay-play-controls button {
  min-height: 28px;
}
#setupBody .bot-select-source {
  display: none;
}
#setupBody #modeSetup {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#setupBody .setup-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
#setupBody .setup-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font: 900 11px/1 var(--font-display);
  font-size: calc(11px * var(--fs-display, 1));
  letter-spacing: .08em;
  color: var(--c-text-strong);
  background: var(--ctrl-face);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
}
#setupBody .setup-btn:hover {
  color: var(--c-text-hi);
  border-color: var(--c-border-strong);
  background: var(--ctrl-face-hover);
}
#setupBody .setup-btn .gear {
  font-size: calc(12px * var(--fs-body, 1));
  opacity: .85;
}
#setupBody .setup-mode-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#setupBody .setup-mode-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
#setupBody #matchModeCover {
  flex: 1 1 auto;
  min-width: 0;
}
#setupBody .setup-btn-mini {
  flex: none;
  padding: 7px 9px;
  gap: 0;
  align-self: flex-start;
}
#setupBody .setup-mode-missions {
  padding: 2px 2px 0;
}
#setupBody .setup-mode-msn {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.challenge-score {
  width: 100%;
  min-width: 0;
}
.challenge-score-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
  grid-template-areas: "wins-head . losses-head record-head" "wins-value bar losses-value record-value";
  align-items: start;
  column-gap: 10px;
  row-gap: 1px;
}
.challenge-score.no-record .challenge-score-grid {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-areas: "wins-head . losses-head" "wins-value bar losses-value";
}
.challenge-score.no-record .challenge-score-record-head,
.challenge-score.no-record .challenge-score-record {
  display: none;
}
.challenge-score-head {
  margin: 0 !important;
  line-height: 1.05;
}
.challenge-score-wins-head {
  grid-area: wins-head;
}
.challenge-score-losses-head {
  grid-area: losses-head;
}
.challenge-score-record-head {
  grid-area: record-head;
}
.challenge-score-wins {
  grid-area: wins-value;
}
.challenge-score-bar {
  grid-area: bar;
  width: 100%;
  align-self: center;
}
.challenge-score-losses {
  grid-area: losses-value;
}
.challenge-score-record {
  grid-area: record-value;
}
.challenge-score-wins-head,
.challenge-score-losses-head,
.challenge-score-record-head,
.challenge-score-wins,
.challenge-score-losses,
.challenge-score-record {
  text-align: center;
}
.gcg-bar.challenge-score-bar > i {
  background: var(--c-cloud);
}
.challenge-score-value {
  color: var(--c-text-hi);
  font-size: calc(12px * var(--fs-body, 1));
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .15px;
}
.challenge-score-record.none {
  color: var(--c-text-faint);
  font-weight: 650;
}
#setupBody .setup-run-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#setupBody .setup-run-acts:empty {
  display: none;
}
#setupBody .seats {
  display: grid;
  grid-template-columns: 1fr 34px 1fr;
  gap: 0;
  align-items: stretch;
}
#setupBody .seats > .setup-mode-info {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 6px;
  min-width: 0;
  margin-bottom: 7px;
  padding: 0 2px;
}
#setupBody .seats > .setup-mode-info:not(:has(> :not([style*="display:none"]):not([style*="display: none"]))) {
  display: none;
}
#setupBody .setup-mode-desc {
  color: var(--c-text-dim);
  text-align: center;
  font-size: calc(11.5px * 1.1 * var(--fs-body, 1));
  line-height: 1.4;
}
body:where(.st-play-narrow):is(#st.st, *) #setupBody .setup-mode-desc {
  --fs-body: 1.08;
}
#setupBody #matchModeCover .gm-card-titlerow {
  top: 50%;
  transform: translateY(-50%);
}
#setupBody #matchModeCover .gm-mission-notches {
  display: none !important;
}
#setupBody .seats > .setup-mode-missions {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  margin-bottom: 7px;
}
#setupBody .seats > .pcard.p1 {
  grid-column: 1;
  grid-row: 2;
}
#setupBody .seats > .vs {
  grid-column: 2;
  grid-row: 2;
}
#setupBody .seats > .pcard.p2 {
  grid-column: 3;
  grid-row: 2;
}
@media (max-width: 600px) {
  #setupBody .seats {
    grid-template-columns: 1fr auto;
    gap: 6px;
  }
  #setupBody .seats > .setup-mode-info {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  #setupBody .seats > .setup-mode-missions {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
  }
  #setupBody .seats > .pcard.p1,
  #setupBody .seats > .vs,
  #setupBody .seats > .pcard.p2 {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }
  #setupBody .seats > .pcard.p2 {
    grid-row: 2;
  }
  #setupBody .seats > .vs {
    grid-row: 3;
  }
  #setupBody .seats > .pcard.p1 {
    grid-row: 4;
  }
}
@media (max-width: 410px) {
  #setupBody .seats {
    grid-template-columns: 1fr;
  }
  #setupBody .seats > .setup-mode-info {
    grid-column: 1;
    grid-row: 1;
  }
  #setupBody .seats > .setup-mode-missions {
    grid-column: 1;
    grid-row: 2;
  }
  #setupBody .seats > .pcard.p2 {
    grid-row: 3;
  }
  #setupBody .seats > .vs {
    grid-row: 4;
  }
  #setupBody .seats > .pcard.p1 {
    grid-row: 5;
  }
}
#setupBody .pcard {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--surface-haze, rgba(255,255,255,0.025));
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  min-width: 0;
}
#setupBody .pcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
}
#setupBody .pcard.p1::before {
  background: var(--p1, var(--c-accent));
}
#setupBody .pcard.p2::before {
  background: var(--p2, var(--c-danger));
}
#setupBody .pcard-top {
  display: flex;
  align-items: stretch;
  gap: 7px;
  flex: 1 1 auto;
}
#setupBody .seatcol {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  flex: none;
}
#setupBody .pcard .seat {
  font: 900 12px/1 var(--font-display);
  font-size: calc(12px * var(--fs-display, 1));
  letter-spacing: .06em;
}
#setupBody .pcard.p1 .seat {
  color: var(--p1, var(--c-accent));
}
#setupBody .pcard.p2 .seat {
  color: var(--p2, var(--c-danger));
}
#setupBody .bot-tagv {
  font: 700 9px/1 var(--font-display);
  font-size: calc(9px * var(--fs-display, 1));
  letter-spacing: .12em;
  color: var(--c-text-faint);
  text-transform: uppercase;
}
#setupBody .whog {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
#setupBody .whog .bot-list-trigger {
  min-height: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
}
#setupBody .whog .user-box,
#setupBody .whog .seat-chip-host {
  flex: 1 1 auto;
}
#setupBody .user-box {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  background: var(--panel-bg-2);
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  padding: 5px 9px 6px;
}
#setupBody .user-box .uin {
  background: transparent;
  border: none;
  box-shadow: none;
  width: 13ch;
  max-width: 100%;
  min-height: 0;
  color: var(--c-text-strong);
  font-size: calc(12.5px * var(--fs-body, 1));
  font-weight: 600;
  padding: 0;
}
#setupBody .user-box .uin:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 28%, transparent);
}
#setupBody .user-box .uin::placeholder {
  color: #666;
}
#setupBody .user-box .ust {
  font-size: calc(9.5px * var(--fs-body, 1));
  color: var(--c-text-dim);
}
#setupBody .user-box .uin-acct {
  display: flex;
  align-items: center;
  min-width: 0;
  line-height: 1.2;
}
#setupBody .user-box .uin-acct[hidden],
#setupBody .user-box .uin[hidden] {
  display: none;
}
#setupBody .user-box .uin-acct .acct-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
#setupBody .user-box .uin-acct .acct-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#setupBody .user-box .ust {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#setupBody .user-box .ust .acct-badge {
  margin-left: 0;
}
#setupBody .whog .off {
  opacity: .45;
}
#setupBody .user-box {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
#setupBody .user-box .ub-id {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
#setupBody .user-box .ub-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: auto;
}
#setupBody .user-box .ub-cta[hidden] {
  display: none;
}
#setupBody .user-box .ub-signin {
  margin: 0;
  padding: 3px 10px;
  text-align: center;
  font-size: calc(11px * var(--fs-body, 1));
}
#setupBody .user-box .ub-cta .acct-sub {
  text-align: center;
}
#setupBody .whog .seat-chip-host {
  --player-chip-scale: .58;
  width: 100%;
  max-width: 100%;
}
#setupBody .deck-block,
#spaceDeckHost .deck-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
  --deck-chip-h: 64px;
  --deck-act-gap: 4px;
  --deck-act-h: calc((var(--deck-chip-h) - var(--deck-act-gap)) / 2);
}
#setupBody .pl-head2,
#spaceDeckHost .pl-head2 {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 0 0 2px;
  min-height: var(--gcg-control-height-touch);
  font: 800 7.5px/1 var(--font-display);
  font-size: calc(7.5px * var(--fs-display, 1));
  letter-spacing: .13em;
  color: var(--c-text-faint);
  text-transform: uppercase;
}
#setupBody .pl-head2 .plh-lab,
#spaceDeckHost .pl-head2 .plh-lab {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
#setupBody .pl-head2 .plh-lab .plh-name,
#spaceDeckHost .pl-head2 .plh-lab .plh-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#setupBody .pl-head2 .plh-lab .cnt:empty,
#spaceDeckHost .pl-head2 .plh-lab .cnt:empty {
  display: none;
}
#setupBody .pl-head2 .plh-lab,
#spaceDeckHost .pl-head2 .plh-lab {
  display: contents;
}
#setupBody .pl-head2 .plh-lab .plh-name,
#spaceDeckHost .pl-head2 .plh-lab .plh-name {
  flex: 2 1 0;
  margin: 0 auto;
}
#setupBody .pl-head2 .plh-lab .cnt,
#spaceDeckHost .pl-head2 .plh-lab .cnt {
  flex: 1 1 0;
}
#setupBody .pl-head2 .plh-nav,
#spaceDeckHost .pl-head2 .plh-nav {
  flex: 2 1 0;
  justify-content: center;
  margin-left: 0;
}
#setupBody .pl-head2 .plh-lab .plh-name,
#spaceDeckHost .pl-head2 .plh-lab .plh-name {
  white-space: normal;
  text-align: center;
  font-size: calc(10px * var(--fs-display, 1));
  line-height: 1.3;
  letter-spacing: .14em;
  color: var(--c-text-dim);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#setupBody .pl-head2 .plh-lab .cnt,
#spaceDeckHost .pl-head2 .plh-lab .cnt {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
#setupBody .pl-head2 .plh-lab .cnt b,
#spaceDeckHost .pl-head2 .plh-lab .cnt b {
  font-size: calc(17px * var(--fs-display, 1));
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--c-text-strong);
}
#setupBody .pl-head2 .plh-lab .cnt .cnt-u,
#spaceDeckHost .pl-head2 .plh-lab .cnt .cnt-u {
  font-size: calc(7px * var(--fs-display, 1));
  letter-spacing: .16em;
  color: var(--c-text-faint);
}
#setupBody .plh-nav,
#spaceDeckHost .plh-nav {
  display: inline-flex;
  gap: var(--deck-act-gap);
  flex: none;
  margin-left: auto;
}
#setupBody .plh-nav .nav,
#setupBody :is(.deck-chip-acts, .setup-assign-row) .nav,
#spaceDeckHost .plh-nav .nav,
#spaceDeckHost .deck-chip-acts .nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gcg-control-height-touch);
  height: var(--gcg-control-height-touch);
  padding: 0;
  background: var(--ctrl-face);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-text-dim);
  cursor: pointer;
}
#setupBody .plh-nav .nav,
#spaceDeckHost .plh-nav .nav {
  height: var(--deck-act-h);
}
#setupBody .plh-nav .nav:hover,
#setupBody :is(.deck-chip-acts, .setup-assign-row) .nav:hover:not(:disabled),
#spaceDeckHost .plh-nav .nav:hover,
#spaceDeckHost .deck-chip-acts .nav:hover:not(:disabled) {
  color: var(--c-text-hi);
  border-color: var(--c-border-strong);
  background: var(--ctrl-face-hover);
}
#setupBody .plh-nav .nav .g,
#setupBody :is(.deck-chip-acts, .setup-assign-row) .nav .g,
#spaceDeckHost .plh-nav .nav .g,
#spaceDeckHost .deck-chip-acts .nav .g {
  display: inline-flex;
}
#setupBody .plh-nav .nav svg,
#setupBody :is(.deck-chip-acts, .setup-assign-row) .nav svg,
#spaceDeckHost .plh-nav .nav svg,
#spaceDeckHost .deck-chip-acts .nav svg {
  width: 18px;
  height: 18px;
  display: block;
}
#setupBody .plh-nav .nav:disabled,
#setupBody :is(.deck-chip-acts, .setup-assign-row) .nav:disabled,
#spaceDeckHost .plh-nav .nav:disabled,
#spaceDeckHost .deck-chip-acts .nav:disabled {
  opacity: .38;
  cursor: default;
  color: var(--c-text-faint);
  background: var(--ctrl-face);
  border-color: var(--c-border);
}
#setupBody .deck-id2,
#spaceScreen .deck-id2,
#spaceDeckHost .deck-id2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  border-radius: 5px;
  min-height: var(--deck-chip-h);
  padding: 7px 9px;
  color: var(--c-text-strong);
  cursor: pointer;
  text-align: left;
}
#setupBody .deck-chip-row,
#spaceDeckHost .deck-chip-row {
  display: flex;
  align-items: stretch;
  gap: var(--deck-act-gap);
}
#setupBody .deck-chip-row .deck-id-wrap,
#spaceDeckHost .deck-chip-row .deck-id-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}
#setupBody .deck-chip-row .deck-id2,
#spaceDeckHost .deck-chip-row .deck-id2 {
  flex: 1 1 auto;
  min-width: 0;
}
#setupBody .deck-chip-acts,
#spaceDeckHost .deck-chip-acts {
  display: flex;
  flex-direction: column;
  gap: var(--deck-act-gap);
  flex: none;
}
#setupBody .deck-chip-acts .nav,
#spaceDeckHost .deck-chip-acts .nav {
  flex: 1 1 0;
  width: var(--gcg-control-height-touch);
  height: auto;
  min-height: 0;
}
#setupBody .deck-chip-acts .nav[hidden],
#spaceDeckHost .deck-chip-acts .nav[hidden] {
  display: none;
}
#setupBody .deck-block.single .deck-chip-acts,
#spaceDeckHost .deck-block.single .deck-chip-acts {
  display: none;
}
#setupBody .deck-peek,
.setup-deck-list .sdl-peek,
#spaceDeckHost .deck-peek {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--c-text-dim);
  cursor: pointer;
}
#setupBody .deck-peek .g,
.setup-deck-list .sdl-peek .g,
#spaceDeckHost .deck-peek .g {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
}
#setupBody .deck-peek .g svg,
.setup-deck-list .sdl-peek .g svg,
#spaceDeckHost .deck-peek .g svg {
  width: 15px;
  height: 15px;
}
#setupBody .deck-peek:hover,
#setupBody .deck-peek:focus-visible,
.setup-deck-list .sdl-peek:hover,
.setup-deck-list .sdl-peek:focus-visible,
#spaceDeckHost .deck-peek:hover,
#spaceDeckHost .deck-peek:focus-visible {
  color: var(--c-text-strong);
}
#setupBody .deck-peek[hidden],
#spaceDeckHost .deck-peek[hidden] {
  display: none;
}
body.deck-preview-open #cardDetailV2 {
  z-index: calc(var(--z-dialog) + 1);
}
.ui-dialog-overlay .ui-dialog-box.deck-preview-box {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
}
.deck-preview-grid .dm-cardgrid {
  justify-content: start;
}
.deck-preview-grid {
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.setup-deck-list.gcg-menu {
  position: fixed;
  z-index: var(--z-menu-dialog, 13500);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.setup-deck-list .gcg-menu-row {
  justify-content: flex-start;
  min-height: 30px;
}
.setup-deck-list .sdl-dots {
  display: flex;
  gap: 3px;
  flex: none;
}
.setup-deck-list .sdl-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#setupBody .deck-id2 .cur-row,
#spaceScreen .deck-id2 .cur-row,
#spaceDeckHost .deck-id2 .cur-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
#setupBody .dots-v,
#spaceScreen .dots-v,
#spaceDeckHost .dots-v {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: none;
}
#setupBody .deck-id2 .dnm,
#spaceScreen .deck-id2 .dnm,
#spaceDeckHost .deck-id2 .dnm {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#setupBody .deck-id2 .dnm .cust,
#spaceScreen .deck-id2 .dnm .cust,
#spaceDeckHost .deck-id2 .dnm .cust {
  font-size: calc(12.5px * var(--fs-body, 1));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#setupBody .deck-id2 .dnm .cust.placeholder,
#spaceScreen .deck-id2 .dnm .cust.placeholder,
#spaceDeckHost .deck-id2 .dnm .cust.placeholder {
  color: var(--c-border-strong);
  font-weight: 400;
}
#setupBody .deck-id2 .dnm .gen,
#spaceScreen .deck-id2 .dnm .gen,
#spaceDeckHost .deck-id2 .dnm .gen {
  font-size: calc(10px * var(--fs-body, 1));
  color: var(--c-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#setupBody .deck-id2 .dnm .gen:empty,
#spaceScreen .deck-id2 .dnm .gen:empty,
#spaceDeckHost .deck-id2 .dnm .gen:empty {
  display: none;
}
#setupBody .whog .bot-list-trigger.bot-banner {
  padding: 0;
  border-width: 0;
  overflow: hidden;
  display: block;
  position: relative;
}
#setupBody .bot-banner .bot-banner-host {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  pointer-events: none;
}
#setupBody .bot-banner:hover .bot-banner-host {
  filter: brightness(1.12);
}
.player-banner .pb-bot-stats {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.player-banner .pb-bot-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 14px;
}
.player-banner .pb-bot-head .bot-picker-version {
  font-size: 12px;
  color: var(--c-text-dim);
}
.player-banner .pb-bot-head .bot-picker-arrow {
  font-size: 20px;
  color: var(--c-text-dim);
}
.player-banner .pb-bot-stats .bot-picker-meters {
  gap: 10px;
}
.player-banner .pb-bot-stats .bot-picker-meter {
  gap: 6px;
}
.player-banner .pb-bot-stats .bot-picker-meter-label {
  font-size: 11px;
  color: var(--c-text-dim);
}
.player-banner .pb-bot-stats .bot-picker-meter-track {
  height: 5px;
  gap: 2px;
}
#setupBody .whog.guest-banner .user-box {
  display: none !important;
}
.player-banner .pb-emblem-none {
  display: grid;
  place-items: center;
  color: var(--c-text-faint);
}
.player-banner .pb-emblem-none svg {
  width: 190%;
  height: 190%;
  margin: -45%;
}
.player-banner .pb-guest {
  position: absolute;
  top: 44px;
  z-index: 3;
  transform-origin: 0 0;
}
.player-banner .pb-guest-note {
  display: block;
  padding: 2px 4px;
  font: 900 24px/1.1 var(--font-display);
  color: var(--c-text-faint);
  white-space: nowrap;
}
.player-banner .pb-guest-cta {
  position: absolute;
  right: 14px;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
}
.player-banner .pb-guest-cta .ub-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.player-banner .pb-guest-cta .ub-cta[hidden] {
  display: none;
}
#setupBody .deck-id2,
#spaceDeckHost .deck-id2 {
  grid-template-rows: auto auto auto auto auto;
  align-content: center;
  touch-action: none;
}
#setupBody .deck-id2 .drum-nb,
#spaceDeckHost .deck-id2 .drum-nb {
  grid-column: 1;
  min-width: 0;
  padding: 3px 0;
  font-size: calc(12px * var(--fs-body, 1));
  line-height: 1.25;
  color: var(--c-text-faint);
  opacity: .7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
#setupBody .deck-id2 :is(.drum-prev2, .drum-next2),
#spaceDeckHost .deck-id2 :is(.drum-prev2, .drum-next2) {
  opacity: .22;
}
#setupBody .deck-id2 .drum-nb:not(:empty),
#spaceDeckHost .deck-id2 .drum-nb:not(:empty) {
  display: flex;
  align-items: center;
}
#setupBody .deck-id2 .drum-nb .nb-dots,
#spaceDeckHost .deck-id2 .drum-nb .nb-dots {
  display: flex;
  gap: 3px;
  flex: none;
  min-width: 35px;
  margin-right: 9px;
}
#setupBody .deck-id2 .drum-nb .deck-btn-dot,
#spaceDeckHost .deck-id2 .drum-nb .deck-btn-dot {
  width: 12px;
  height: 12px;
  font-size: calc(7px * var(--fs-body, 1));
}
#setupBody .deck-id2 .drum-nb .nb-nm,
#spaceDeckHost .deck-id2 .drum-nb .nb-nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#setupBody .deck-id2 .drum-nb:empty,
#spaceDeckHost .deck-id2 .drum-nb:empty {
  display: none;
}
#setupBody .deck-id2.drum .drum-nb:empty,
#spaceDeckHost .deck-id2.drum .drum-nb:empty {
  display: block;
}
#setupBody .deck-id2.drum .drum-nb:empty::before,
#spaceDeckHost .deck-id2.drum .drum-nb:empty::before {
  content: " ";
}
body:not(.pvp-mode) #setupBody .deck-id2:not(.drum),
#spaceDeckHost .deck-id2:not(.drum) {
  padding-top: 2px;
  padding-bottom: 2px;
}
body:not(.pvp-mode) #setupBody .deck-id2:not(.drum) .drum-nb,
#spaceDeckHost .deck-id2:not(.drum) .drum-nb {
  display: block;
  visibility: hidden;
  border-top: 1px solid transparent;
}
body:not(.pvp-mode) #setupBody .deck-id2:not(.drum) .drum-nb:empty::before,
#spaceDeckHost .deck-id2:not(.drum) .drum-nb:empty::before {
  content: " ";
}
#setupBody .deck-id2 .drum-prev2,
#spaceDeckHost .deck-id2 .drum-prev2 {
  grid-row: 1;
}
#setupBody .deck-id2 .drum-prev,
#spaceDeckHost .deck-id2 .drum-prev {
  grid-row: 2;
}
#setupBody .deck-id2 .cur-row,
#spaceDeckHost .deck-id2 .cur-row {
  grid-column: 1;
  grid-row: 3;
  padding: 5px 26px 5px 0;
}
#setupBody .deck-id2 .drum-next,
#spaceDeckHost .deck-id2 .drum-next {
  grid-row: 4;
}
#setupBody .deck-id2 .drum-next2,
#spaceDeckHost .deck-id2 .drum-next2 {
  grid-row: 5;
}
#setupBody .deck-id2.drum,
#spaceDeckHost .deck-id2.drum {
  padding-top: 2px;
  padding-bottom: 2px;
}
#setupBody .deck-id2.drum :is(.drum-prev2, .drum-prev),
#spaceDeckHost .deck-id2.drum :is(.drum-prev2, .drum-prev) {
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
}
#setupBody .deck-id2.drum :is(.drum-next, .drum-next2),
#spaceDeckHost .deck-id2.drum :is(.drum-next, .drum-next2) {
  border-top: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
}
#setupBody .deck-id2 .dots-v,
#spaceDeckHost .deck-id2 .dots-v {
  flex-direction: row;
  min-width: 35px;
}
#setupBody .deck-id2 .dnm .gen,
#spaceDeckHost .deck-id2 .dnm .gen {
  color: inherit;
}
#setupBody .deck-id2 .dnm .gen,
#spaceDeckHost .deck-id2 .dnm .gen {
  line-height: 1.3;
  font-size: calc(11px * var(--fs-body, 1));
}
#setupBody .deck-id2 .dnm .cust,
#spaceDeckHost .deck-id2 .dnm .cust {
  font-size: calc(14px * var(--fs-body, 1));
}
#setupBody .deck-id2 .dnm,
#spaceDeckHost .deck-id2 .dnm {
  --dnm-cust: calc(14px * var(--fs-body, 1));
  --dnm-gen: calc(11px * var(--fs-body, 1));
  height: calc(var(--dnm-cust) * 1.25 + var(--dnm-gen) * 1.3 + 1px);
  justify-content: center;
  position: relative;
  flex: 1 1 auto;
}
#setupBody .deck-id2 .dnm .cust,
#spaceDeckHost .deck-id2 .dnm .cust {
  line-height: 1.25;
}
#setupBody .deck-id2 .dnm .gen:empty,
#spaceDeckHost .deck-id2 .dnm .gen:empty {
  display: none;
}
#setupBody .deck-id2 .dnm:has(> #p1DeckFlag) > .gen,
#spaceDeckHost .deck-id2 .dnm:has(> #p1DeckFlag) > .gen {
  display: none;
}
#setupBody .deck-id2 .dnm > #p1DeckFlag,
#spaceDeckHost .deck-id2 .dnm > #p1DeckFlag {
  display: flex;
  align-items: center;
  height: calc(var(--dnm-gen) * 1.3);
  overflow: visible;
}
#setupBody .deck-id2 .dnm > #p1DeckFlag > *,
#spaceDeckHost .deck-id2 .dnm > #p1DeckFlag > * {
  zoom: .8;
}
body.pvp-lobby #setupBody #p2DeckBlock .deck-id2 .drum-nb {
  visibility: visible;
}
body.pvp-lobby #setupBody #p2DeckBlock .deck-id2 :is(.drum-prev2, .drum-prev) {
  border-top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
}
body.pvp-lobby #setupBody #p2DeckBlock .deck-id2 :is(.drum-next, .drum-next2) {
  border-top: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
}
#setupBody .seat-open .player-chip {
  opacity: .55;
}
@media (max-width: 600px) {
  #setupBody:not(.drum-roomy) .deck-id2 :is(.drum-prev2, .drum-next2),
  #spaceDeckHost .deck-id2 :is(.drum-prev2, .drum-next2) {
    display: none !important;
  }
}
#setupBody.drum-roomy .deck-id2 .dnm {
  --dnm-cust: calc(17px * var(--fs-body, 1));
  --dnm-gen: calc(12.5px * var(--fs-body, 1));
}
#setupBody.drum-roomy .deck-id2 .dnm .cust {
  font-size: var(--dnm-cust);
}
#setupBody.drum-roomy .deck-id2 .dnm .gen {
  font-size: var(--dnm-gen);
}
#setupBody.drum-roomy .deck-id2 .drum-nb {
  font-size: calc(14px * var(--fs-body, 1));
  padding: 5px 0;
}
#setupBody.drum-roomy .deck-id2 .drum-nb .deck-btn-dot {
  width: 14px;
  height: 14px;
  font-size: calc(8px * var(--fs-body, 1));
}
#setupBody.drum-roomy .deck-id2 .cur-row {
  padding-top: 8px;
  padding-bottom: 8px;
}
#setupBody .deck-id2,
#setupBody .deck-id2:hover,
#spaceDeckHost .deck-id2,
#spaceDeckHost .deck-id2:hover {
  background: var(--c-panel-2);
}
.setup-drum-scrim {
  z-index: calc(var(--z-menu-dialog, 13500) - 1);
}
.setup-deck-list.drum-open {
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.setup-deck-list.drum-open.dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.setup-deck-list.drum-open::-webkit-scrollbar {
  display: none;
}
.setup-deck-list.drum-open .gcg-menu-row {
  scroll-snap-align: center;
  box-sizing: border-box;
  height: calc(var(--sdl-row-fs, 32.8px) * var(--fs-body, 1) + 11px);
  gap: 9px;
  min-height: 0;
  padding: 0 26px 0 0;
  border-radius: 0;
  position: relative;
  cursor: inherit;
  font-size: calc(var(--sdl-nb, 12px) * var(--fs-body, 1));
  line-height: 1.25;
  color: var(--c-text-dim);
  background: none;
}
.setup-deck-list.drum-open.roomy {
  --sdl-nb: 14px;
  --sdl-mid: 17px;
  --sdl-sub: 12.5px;
  --sdl-row-fs: 38.5px;
}
.setup-deck-list.drum-open .gcg-menu-row + .gcg-menu-row {
  border-top: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
}
.setup-deck-list.drum-open .gcg-menu-row:hover {
  color: var(--c-text-hi);
}
.setup-deck-list.drum-open .gcg-menu-row:is(:hover, :focus-visible) {
  opacity: 1 !important;
}
.setup-deck-list.drum-open .sdl-dots {
  min-width: 35px;
}
.setup-deck-list.drum-open .deck-btn-dot {
  width: 12px;
  height: 12px;
  font-size: calc(7px * var(--fs-body, 1));
}
.setup-deck-list.drum-open .sdl-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.setup-deck-list.drum-open .sdl-sub {
  display: none;
  font-size: calc(var(--sdl-sub, 11px) * var(--fs-body, 1));
  font-weight: 400;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.setup-deck-list.drum-open .gcg-menu-row.on {
  background: none;
}
.setup-deck-list.drum-open .gcg-menu-row.mid {
  font-size: calc(var(--sdl-mid, 14px) * var(--fs-body, 1));
  font-weight: 600;
  color: var(--c-text-strong);
}
.setup-deck-list.drum-open .gcg-menu-row.mid .sdl-sub {
  display: block;
}
.setup-deck-list.drum-open .gcg-menu-row.mid .deck-btn-dot {
  width: 16px;
  height: 16px;
  font-size: calc(9px * var(--fs-body, 1));
}
#setupBody :is(#p1DeckPrev, #p1DeckNext, #p2DeckPrev, #p2DeckNext, #p1DeckList, #p2DeckList),
#spaceDeckHost :is(#p1DeckPrev, #p1DeckNext, #p1DeckList) {
  display: none;
}
#setupBody .plh-nav,
#spaceDeckHost .plh-nav {
  align-items: center;
}
#setupBody .plh-nav .nav.nav-word,
#spaceDeckHost .plh-nav .nav.nav-word {
  width: auto;
  gap: 5px;
  padding: 0 9px 0 7px;
}
#setupBody .plh-nav .nav.nav-word svg,
#spaceDeckHost .plh-nav .nav.nav-word svg {
  width: 15px;
  height: 15px;
}
#setupBody .nav-word .nav-lab,
#setupBody .deck-auto-host .gcg-checkbox,
#spaceDeckHost .nav-word .nav-lab,
#spaceDeckHost .deck-auto-host .gcg-checkbox {
  font: 700 calc(10.5px * var(--fs-body, 1))/1 var(--font-body, inherit);
  letter-spacing: 0;
  text-transform: none;
}
@media (min-width: 601px) {
  #setupBody .plh-nav .nav.nav-word,
  #spaceDeckHost .plh-nav .nav.nav-word {
    width: var(--deck-act-h);
    padding: 0;
  }
  #setupBody .nav-word .nav-lab,
  #spaceDeckHost .nav-word .nav-lab {
    display: none;
  }
}
#setupBody .deck-auto-host,
#spaceDeckHost .deck-auto-host {
  display: inline-flex;
}
#setupBody .deck-auto-host:empty,
#spaceDeckHost .deck-auto-host:empty {
  display: none;
}
#setupBody .plh-nav,
#spaceDeckHost .plh-nav {
  --plh-btn-w: 44px;
}
@media (max-width: 600px) {
  #setupBody .plh-nav,
  #spaceDeckHost .plh-nav {
    --plh-btn-w: 60px;
  }
}
@media (max-width: 600px) {
  #setupBody .seats > .setup-assign-row > .setup-assign-both.setup-assign-both {
    --sab-p1: 20px;
    --sab-p2: 20px;
  }
}
#setupBody .plh-nav .nav.nav-word,
#spaceDeckHost .plh-nav .nav.nav-word {
  width: var(--plh-btn-w) !important;
  justify-content: center;
}
#setupBody .deck-auto-host .gcg-checkbox,
#spaceDeckHost .deck-auto-host .gcg-checkbox {
  justify-content: center;
  width: var(--plh-btn-w);
  text-transform: uppercase;
  letter-spacing: .1em;
}
#setupBody .deck-auto-host .gcg-checkbox,
#spaceDeckHost .deck-auto-host .gcg-checkbox {
  box-sizing: border-box;
  height: var(--deck-act-h);
  min-height: 0;
  padding: 1px 0 0;
  border-radius: calc(var(--deck-act-h) / 2);
}
#setupBody .pcard.p1 {
  --seat-c: var(--p1);
}
#setupBody .pcard.p2 {
  --seat-c: var(--p2);
}
#setupBody .seats > .setup-assign-row {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--deck-act-gap);
  align-items: stretch;
}
#setupBody .setup-assign-row .nav {
  width: auto;
  height: auto;
  min-width: 44px;
  padding: 0 12px;
  gap: 6px;
  color: var(--c-text-strong);
  border-color: color-mix(in srgb, var(--seat-c) 55%, var(--c-border));
}
#setupBody .setup-assign-row .nav .g {
  color: var(--seat-c);
}
#setupBody .setup-assign-row .nav:hover:not(:disabled) {
  border-color: var(--seat-c);
  background: color-mix(in srgb, var(--seat-c) 16%, var(--c-panel-2));
}
#setupBody .setup-assign-row .nav-word .nav-lab {
  display: block;
  text-align: left;
  font: 800 8px/1.2 var(--font-display);
  font-size: calc(8px * var(--fs-display, 1));
  letter-spacing: .13em;
  text-transform: uppercase;
}
#setupBody .setup-assign-row > .nav:first-child {
  --seat-c: var(--p1);
}
#setupBody .setup-assign-row > .nav:last-child {
  --seat-c: var(--p2);
}
#setupBody .setup-assign-row .nav[hidden] {
  display: inline-flex;
  visibility: hidden;
}
#setupBody .seats > .setup-assign-row > .setup-assign-both {
  grid-column: 2;
  position: relative;
  --sab-p1: 48px;
  --sab-p2: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 12px 0 11px;
  border-radius: 7px;
  cursor: pointer;
  font: 900 15px/1 var(--font-display);
  font-size: calc(15px * var(--fs-display, 1));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-on-commit);
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 72%, #000);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-white) 22%, transparent) 0%,
      transparent 48%,
      color-mix(in srgb, #000 18%, transparent) 100%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--p1) 80%, var(--c-commit)) 0,
      var(--c-commit) calc(var(--sab-p1) * 2 + 30px),
      var(--c-commit) calc(100% - var(--sab-p2) * 2 - 30px),
      color-mix(in srgb, var(--p2) 80%, var(--c-commit)) 100%);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--p1) 14%, color-mix(in srgb, var(--p2) 14%, transparent)), inset 0 1px 0 color-mix(in srgb, var(--c-white) 30%, transparent);
}
#setupBody .seats .setup-assign-both:hover {
  border-color: color-mix(in srgb, var(--c-border-strong) 55%, #fff);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-white) 32%, transparent) 0%,
      color-mix(in srgb, var(--c-white) 8%, transparent) 48%,
      transparent 100%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--p1) 70%, #fff) 0,
      color-mix(in srgb, var(--c-commit) 60%, #fff) calc(var(--sab-p1) * 2 + 30px),
      color-mix(in srgb, var(--c-commit) 60%, #fff) calc(100% - var(--sab-p2) * 2 - 30px),
      color-mix(in srgb, var(--p2) 70%, #fff) 100%);
}
#setupBody .seats > .setup-assign-row > .setup-assign-both,
#setupBody .seats .setup-assign-both:hover {
  background-origin: border-box;
}
#setupBody .setup-assign-both .sab-p1,
#setupBody .setup-assign-both .sab-p2,
#spaceDeckHost .setup-assign-both .sab-p1,
#spaceDeckHost .setup-assign-both .sab-p2 {
  position: absolute;
  top: 50%;
  font: inherit;
  letter-spacing: inherit;
  color: var(--c-white);
}
#setupBody .setup-assign-both .sab-p1,
#spaceDeckHost .setup-assign-both .sab-p1 {
  left: var(--sab-p1);
  translate: -50% -50%;
}
#setupBody .setup-assign-both .sab-p2,
#spaceDeckHost .setup-assign-both .sab-p2 {
  right: var(--sab-p2);
  translate: 50% -50%;
}
@media (max-width: 600px) {
  #setupBody .seats > .setup-assign-row {
    grid-row: 5;
    margin-top: 4px;
  }
  #setupBody .setup-assign-row .nav-word {
    gap: 5px;
    padding: 0 7px;
  }
  #setupBody .setup-assign-both,
  #spaceDeckHost .setup-assign-both {
    white-space: nowrap;
  }
  #setupBody .setup-assign-both :is(.sab-p1, .sab-p2),
  #spaceDeckHost .setup-assign-both :is(.sab-p1, .sab-p2) {
    display: none;
  }
}
@media (max-width: 410px) {
  #setupBody .seats > .setup-assign-row {
    grid-row: 6;
  }
}
#setupBody .deck-id2:not(.drum) .drum-nb,
#setupBody .deck-chip-acts .nav-lab,
#spaceDeckHost .deck-id2:not(.drum) .drum-nb,
#spaceDeckHost .deck-chip-acts .nav-lab {
  display: none;
}
body.pvp-lobby #setupBody :is(.deck-auto-host, #p1DeckReroll, #p1DeckTitle, #p2DeckReroll, #p2DeckPrev, #p2DeckNext, #p2DeckTitle, .seats > .setup-assign-row),
body.pvp-lobby #p1DeckNav #p1QuickAdd .nav-lab,
#spaceScreen #spaceDeckHost #p1DeckNav #p1QuickAdd .nav-lab,
#spaceScreen #spaceDeckHost :is(.deck-auto-host, #p1DeckReroll, #p1DeckTitle) {
  display: none;
}
#setupBody .plh-nav > .seat-ghost,
#spaceDeckHost .plh-nav > .seat-ghost {
  display: none !important;
}
body.pvp-lobby #setupBody #p2DeckCnt {
  display: inline-flex !important;
  visibility: hidden;
}
body.pvp-lobby #setupBody #p2DeckNav > .seat-ghost {
  display: flex !important;
}
body.pvp-lobby #setupBody #p2DeckNav > .seat-ghost:disabled {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}
body.pvp-lobby #setupBody .pl-head2 .plh-lab .cnt,
#spaceScreen #spaceDeckHost .pl-head2 .plh-lab .cnt {
  flex: none;
  padding: 0 6px;
}
body.pvp-lobby #setupBody :is(#p1DeckNav, #p2DeckNav),
#spaceScreen #spaceDeckHost #p1DeckNav {
  flex: 1 1 auto;
  align-self: stretch;
  justify-content: flex-end;
}
body.pvp-lobby #setupBody :is(#p1DeckNav > #p1QuickAdd, #p2DeckNav > #p2ImportGhost),
#spaceScreen #spaceDeckHost #p1DeckNav > #p1QuickAdd {
  width: 44px;
  padding: 0;
}
body.pvp-lobby :is(#p1DeckNav, #p2DeckNav) > .setup-assign-both,
#spaceScreen #spaceDeckHost #p1DeckNav > .setup-assign-both {
  flex: 1 1 auto;
  height: var(--deck-act-h, 30px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 4px;
  cursor: pointer;
  font: 900 12px/1 var(--font-display);
  font-size: calc(12px * var(--fs-display, 1));
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-on-commit);
  border: 1px solid color-mix(in srgb, var(--c-border-strong) 72%, #000);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-white) 22%, transparent) 0%,
      transparent 48%,
      color-mix(in srgb, #000 18%, transparent) 100%),
    var(--c-commit);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--c-commit) 14%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-white) 30%, transparent);
}
body.pvp-lobby #p1DeckNav > .setup-assign-both:hover,
#spaceScreen #spaceDeckHost #p1DeckNav > .setup-assign-both:hover {
  border-color: color-mix(in srgb, var(--c-border-strong) 55%, #fff);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-white) 32%, transparent) 0%,
      color-mix(in srgb, var(--c-white) 8%, transparent) 48%,
      transparent 100%),
    color-mix(in srgb, var(--c-commit) 60%, #fff);
}
body.pvp-lobby #p1DeckNav > .setup-assign-both :is(.sab-p1, .sab-p2),
#spaceScreen #spaceDeckHost #p1DeckNav > .setup-assign-both :is(.sab-p1, .sab-p2) {
  display: none;
}
@keyframes mpcSeatPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 transparent;
  }
  40% {
    box-shadow: 0 0 0 3px var(--pulse-c), 0 0 14px 2px var(--pulse-c);
  }
}
body.mpc-pulse-p1 .dm-ba-badge.s-p1,
body.mpc-pulse-p1 .dm-playlist-row[data-player=p1] {
  --pulse-c: var(--p1);
  animation: mpcSeatPulse .8s ease-out 2;
}
body.mpc-pulse-p2 .dm-ba-badge.s-p2,
body.mpc-pulse-p2 .dm-playlist-row[data-player=p2] {
  --pulse-c: var(--p2);
  animation: mpcSeatPulse .8s ease-out 2;
}
#setupBody .pl-order {
  display: inline-flex;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  overflow: hidden;
  flex: none;
}
#setupBody .pl-order .ord-chip {
  padding: 0 9px;
  height: 28px;
  font-size: calc(10.5px * var(--fs-body, 1));
  font-weight: 700;
  background: var(--ctrl-face);
  color: var(--c-text-dim);
  cursor: pointer;
  border: 0;
  white-space: nowrap;
}
#setupBody .pl-order .ord-chip + .ord-chip {
  border-left: 1px solid var(--c-border);
}
#setupBody .pl-order .ord-chip:hover {
  color: var(--c-text-hi);
  background: var(--ctrl-face-hover);
}
#setupBody .pl-order .ord-chip.active {
  background: color-mix(in srgb, var(--c-accent) 26%, transparent);
  color: var(--c-text-strong);
}
#setupBody .pl-order .ord-chip.active:hover {
  background: color-mix(in srgb, var(--c-accent) 36%, transparent);
}
#modeSetup.mode-locked .bot-picker-button,
#modeSetup.mode-locked .deck-block:not(.slot-free) .deck-id2,
#modeSetup.mode-locked .deck-block:not(.slot-free) .plh-nav {
  opacity: .55;
  cursor: not-allowed;
}
#setupBody .deck-id2.deck-locked,
#spaceDeckHost .deck-id2.deck-locked {
  opacity: .55;
  cursor: not-allowed;
}
#modeSetup.mode-locked .bot-picker-button.bot-editable {
  opacity: 1;
  cursor: pointer;
}
#setupBody .deck-block.nav-locked .plh-nav,
#spaceDeckHost .deck-block.nav-locked .plh-nav {
  opacity: .55;
  cursor: not-allowed;
}
#setupBody .deck-block.single .pl-head2,
#spaceDeckHost .deck-block.single .pl-head2 {
  display: none;
}
#setupBody .pl-knobs {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 5px;
}
#setupBody .deck-block.knobs-on .pl-knobs,
#spaceDeckHost .deck-block.knobs-on .pl-knobs {
  display: flex;
}
#setupBody .pl-knobs .knob-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
#setupBody .pl-knobs .knob-lab {
  flex: none;
  width: 52px;
  font-size: calc(9.5px * var(--fs-body, 1));
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
#setupBody .pl-knobs .knob-seg {
  display: inline-flex;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  overflow: hidden;
  flex: none;
}
#setupBody .pl-knobs .knob-seg .ord-chip {
  padding: 0 9px;
  height: 26px;
  font-size: calc(10px * var(--fs-body, 1));
  font-weight: 700;
  background: var(--ctrl-face);
  color: var(--c-text-dim);
  cursor: pointer;
  border: 0;
  white-space: nowrap;
}
#setupBody .pl-knobs .knob-seg .ord-chip + .ord-chip {
  border-left: 1px solid var(--c-border);
}
#setupBody .pl-knobs .knob-seg .ord-chip:hover {
  color: var(--c-text-hi);
  background: var(--ctrl-face-hover);
}
#setupBody .pl-knobs .knob-seg .ord-chip.active {
  background: color-mix(in srgb, var(--c-accent) 26%, transparent);
  color: var(--c-text-strong);
}
#setupBody .pl-knobs .knob-seg .ord-chip.active:hover {
  background: color-mix(in srgb, var(--c-accent) 36%, transparent);
}
#setupBody .pl-knobs .knob-step {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  overflow: hidden;
}
#setupBody .pl-knobs .knob-step button {
  width: 26px;
  height: 26px;
  background: var(--ctrl-face);
  color: var(--c-text-dim);
  border: 0;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
#setupBody .pl-knobs .knob-step button + .kv {
  border-left: 1px solid var(--c-border);
}
#setupBody .pl-knobs .knob-step .kv + button {
  border-left: 1px solid var(--c-border);
}
#setupBody .pl-knobs .knob-step button:hover {
  color: var(--c-text-hi);
  background: var(--ctrl-face-hover);
}
#setupBody .pl-knobs .knob-step .kv {
  min-width: 30px;
  text-align: center;
  font-size: calc(10.5px * var(--fs-body, 1));
  font-weight: 700;
  color: var(--c-text-strong);
}
#modeSetup.mode-locked .deck-block:not(.slot-free) .pl-knobs {
  opacity: .55;
  pointer-events: none;
}
#setupBody .vs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
#setupBody .vs span {
  font: 900 11px/1 var(--font-display);
  font-size: calc(11px * var(--fs-display, 1));
  letter-spacing: .2em;
  color: var(--c-text-dim);
}
@media (max-width: 600px) {
  #setupBody .vs {
    padding: 2px 0;
  }
}
:is(#setupBody, .dm-af-pl-foot, .dm-action-surface, .pvp-browse-foot, .gm-hero-foot) .new-game {
  --c: var(--c-commit);
  width: 100%;
  padding: 12px 0 11px;
  margin: 0;
  font: 900 15px/1 var(--font-display);
  font-size: calc(15px * var(--fs-display, 1));
  letter-spacing: .12em;
  color: var(--c-on-commit);
  text-transform: uppercase;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-top, 78%), #fff) 0%,
      var(--c) 48%,
      color-mix(in srgb, var(--c) var(--mix-fill-bottom, 82%), #000) 100%);
  border: 1px solid color-mix(in srgb, var(--c) var(--mix-fill-border, 72%), #000);
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--c) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
:is(#setupBody, .dm-af-pl-foot, .dm-action-surface) .new-game.gcg-btn--load:disabled {
  opacity: 1;
  --c: color-mix(in srgb, var(--c-commit) 45%, var(--c-panel-2));
  color: color-mix(in srgb, var(--c-on-commit) 45%, var(--c-panel-2));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 7%, transparent);
}
:is(#setupBody, .dm-af-pl-foot, .dm-action-surface, .pvp-browse-foot, .gm-hero-foot) .new-game:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--c) var(--mix-fill-hover-border, 55%), #fff);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-top, 52%), #fff) 0%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-mid, 80%), #fff) 48%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-bottom, 96%), #fff) 100%);
}
:is(#setupBody, .dm-af-pl-foot, .dm-action-surface) .new-game.loading {
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--c) 55%, #0c130d) 50%,
      color-mix(in srgb, var(--c) 22%, #0c130d) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 0.6s ease;
  color: var(--c-text-hi);
  opacity: 1 !important;
  cursor: wait;
}
#setupBody .match-row {
  display: flex;
  gap: 6px;
}
#setupBody .match-row button {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 0;
  font-size: calc(11.5px * var(--fs-body, 1));
  font-weight: 600;
  white-space: nowrap;
  background: var(--ctrl-face);
  color: var(--c-text-strong);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  cursor: pointer;
}
#setupBody .match-row button:hover:not(:disabled) {
  color: var(--c-text-hi);
  border-color: var(--c-border-strong);
  background: var(--ctrl-face-hover);
}
#setupBody .match-row button:disabled {
  opacity: .5;
  cursor: default;
}
#setupBody .match-row .concede {
  background: transparent;
  border-color: color-mix(in srgb, var(--c-danger) 52%, var(--c-border));
  color: var(--c-danger);
}
#setupBody .match-row .concede:hover:not(:disabled) {
  border-color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 14%, transparent);
  color: var(--c-danger);
}
body.replay-view #secSetup,
body.replay-view #setupModal,
body.replay-view #setupBtn,
body.replay-view #newGameBtn,
body.replay-view #matchActionRow,
body.replay-view #shareReplayRow,
body.replay-view:not(.watch-view) #secStats,
body.replay-view:not(.watch-view) #mobileResultsOverlay {
  display: none !important;
}
body.watch-view #rpTabs {
  display: none !important;
}
body.watch-view #mobileResultsOverlay {
  top: max(var(--appbar-h, 44px), var(--rv-bar-bottom, 0px));
}
#replayViewBar {
  display: none;
}
body.replay-view #replayViewBar {
  position: fixed;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
body.watch-view #replayViewBar {
  top: max(42px, calc(var(--table-scale, 1) * 54px + 8px));
}
#replayViewBar .rv-badge {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: calc(10px * var(--fs-body, 1));
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--c-warn);
  border: 1px solid color-mix(in srgb, var(--c-warn) 55%, var(--c-border));
  background: color-mix(in srgb, var(--c-warn) 12%, var(--c-panel));
  pointer-events: auto;
  cursor: default;
}
#replayViewBar .rv-badge.bot,
#replayViewBar .rv-badge.watch {
  color: var(--c-accent);
  border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-border));
  background: color-mix(in srgb, var(--c-accent) 12%, var(--c-panel));
}
#replayViewBar #replayRevealBtn,
#replayViewBar #watchLeaveBtn {
  padding: 2px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: calc(10px * var(--fs-body, 1));
  font-weight: 600;
  color: var(--c-text-strong);
  border: 1px solid var(--c-border);
  background: var(--ctrl-face);
  pointer-events: auto;
}
#replayViewBar #replayRevealBtn:hover:not([aria-disabled=true]),
#replayViewBar #watchLeaveBtn:hover {
  color: var(--c-text-hi);
  border-color: var(--c-border-strong);
  background: var(--ctrl-face-hover);
}
#replayViewBar #replayRevealBtn[aria-disabled=true] {
  opacity: 0.4;
  cursor: default;
}
#replayViewBar #replayRevealBtn.on {
  color: var(--c-warn);
  border-color: color-mix(in srgb, var(--c-warn) 60%, var(--c-border));
  background: color-mix(in srgb, var(--c-warn) 14%, var(--c-ctrl));
}
#rpModal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 11800;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
#rpModal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.rp-panel {
  width: min(94vw, 720px);
  border-radius: var(--r-xl);
  border: 1px solid var(--c-border-strong);
  background: var(--c-panel);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}
#rpModal.replay-loading .rp-panel {
  transform: translateY(10px) scale(.985);
  transition: transform .32s ease;
}
#rpModal.replay-loading.active .rp-panel {
  transform: none;
}
.rp-card {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1200 / 630;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      120% 90% at 50% -10%,
      hsl(var(--c-hue) var(--c-sat) 10%) 0%,
      transparent 60%),
    linear-gradient(
      160deg,
      hsl(var(--c-hue) var(--c-sat) 7.5%) 0%,
      hsl(var(--c-hue) var(--c-sat) 3.2%) 55%,
      hsl(var(--c-hue) var(--c-sat) 5.5%) 100%);
}
.rp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 26px,
      rgba(255, 255, 255, .012) 26px 27px);
}
.rp-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 4.2cqw 5cqw 3.4cqw;
}
.rp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4cqw;
}
.rp-banner {
  display: block;
  width: 52cqw;
  max-width: 82cqw;
  height: auto;
}
.rp-chip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55cqw;
  letter-spacing: .28em;
  text-indent: .28em;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.rp-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.4cqw;
  margin-top: 1cqw;
}
.rp-seatmeta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4cqw;
  min-width: 0;
  align-self: start;
}
.rp-cover canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rp-cover.composed img {
  display: none;
}
.rp-cover {
  width: 100%;
  aspect-ratio: 16 / 9.5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: var(--r-l);
  border: 1px solid var(--c-border-strong);
  background: var(--c-panel-2);
  box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, .55);
  position: relative;
}
.rp-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transform: scale(1.7);
  transform-origin: center 30%;
  display: block;
}
.rp-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0, 0, 0, .5));
  pointer-events: none;
}
.rp-og {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.rp-result.rp-og-result {
  position: absolute;
  inset: auto;
  top: 50.4%;
  transform: translate(-50%, -50%);
}
.rp-og-result.p1 {
  left: 24.4%;
}
.rp-og-result.p2 {
  left: 75.6%;
}
.rp-deckname {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9cqw;
  max-width: 100%;
}
.rp-deckname .nm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5cqw;
  color: var(--c-text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-deckname .deck-btn-dot {
  width: 1.8cqw;
  height: 1.8cqw;
  font-size: 1cqw;
  box-shadow: 0 .15cqw .35cqw rgba(0, 0, 0, .7);
}
.rp-generated {
  max-width: 100%;
  color: var(--c-text-dim);
  text-align: center;
  font-size: 1.55cqw;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.rp-player {
  font-size: 1.9cqw;
  color: var(--c-text-muted);
  font-weight: 600;
  letter-spacing: .04em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-player b {
  color: var(--c-text-dim);
  font-weight: 700;
}
.rp-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#rpModal .rp-vs {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 6.5cqw;
  color: var(--c-text-hi);
  text-shadow: 0 0 4cqw rgba(255, 255, 255, .18);
  letter-spacing: .02em;
}
.rp-result {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4.6cqw;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  text-shadow: 0 .3cqw 1.4cqw rgba(0, 0, 0, .85);
}
.rp-result.p1 {
  color: var(--p1);
}
.rp-result.p2 {
  color: var(--p2);
}
.rp-result.win,
.rp-result.lose {
  text-shadow:
    0 .22cqw .12cqw rgba(0, 0, 0, 1),
    0 .55cqw 1.1cqw rgba(0, 0, 0, .98),
    0 0 2.4cqw color-mix(in srgb, currentColor 45%, transparent);
}
.rp-cover:has(.rp-result)::after {
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .35),
      rgba(0, 0, 0, .55));
}
.rp-flag {
  position: absolute;
  top: 1.5cqw;
  right: 1.7cqw;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.6cqw;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-on-warn);
  background: var(--c-warn);
  border-radius: var(--r-s);
  padding: .55cqw 1.6cqw;
}
.rp-flag.bot {
  color: var(--c-on-accent, #061018);
  background: var(--c-accent);
}
#rpModal.replay-loading .rp-btn:disabled {
  cursor: wait;
  opacity: .72;
}
#rpModal.replay-loading .rp-main {
  align-items: center;
}
#rpModal.replay-loading .rp-seatmeta {
  align-self: center;
  width: 100%;
}
#rpModal.replay-loading .rp-seat-banner.player-chip-host {
  width: 100%;
  max-width: 260px;
  height: auto;
  aspect-ratio: 320 / 96;
}
#rpModal.replay-loading .rp-seat-empty {
  visibility: hidden;
}
#rpModal.replay-loading .rp-statusrow {
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}
#rpModal.replay-loading .rp-status {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12px;
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-m);
  font-size: calc(13px * var(--fs-body, 1));
  color: var(--c-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#rpModal.replay-loading .rp-status-top {
  flex: none;
  align-self: center;
  width: 50%;
  min-width: 200px;
  margin: 14px 0 4px;
}
#rpModal.replay-loading .rp-inner--tv {
  justify-content: space-evenly;
}
#rpModal.replay-loading .rp-inner--tv > .rp-tvcover,
#rpModal.replay-loading .rp-inner--tv > .rp-status-top {
  margin: 0;
}
#rpModal.replay-loading .rp-inner--tv .rp-banner {
  width: 66cqw;
}
#rpModal.replay-loading .rp-tvcover {
  flex: none;
  align-self: stretch;
  min-width: 0;
  margin-top: 10px;
}
#rpModal.replay-loading .rp-tvcover > .gm-card {
  display: block;
  width: calc(100% - 2px);
  height: auto;
  pointer-events: none;
}
#rpModal.replay-loading .rp-leaveonly {
  justify-content: center;
}
#rpModal.replay-loading .rp-leaveonly > .rp-btn {
  width: 50%;
  min-width: 200px;
}
#rpModal.replay-loading {
  flex-direction: column;
  gap: 12px;
}
#rpModal.replay-loading .rp-tips {
  flex: none;
  width: min(94vw, 720px);
  height: 64px;
}
#rpModal.replay-loading .rp-player {
  font-size: max(2.6cqw, 15px);
  color: var(--c-text-hi);
}
#rpModal .rp-vs-icon {
  color: var(--c-text-dim);
  text-shadow: none;
  line-height: 1;
}
#rpModal .rp-vs-icon .gcg-tbi {
  display: block;
  width: 1.4em;
  height: 1.4em;
}
@media (prefers-reduced-motion: reduce) {
  #rpModal,
  #rpModal.replay-loading .rp-panel {
    transition: none;
  }
}
#rpModal .rp-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rp-stats {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding: 2px 0 0;
  flex-wrap: wrap;
}
.rp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 86px;
}
.rp-stat .v {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(20px * var(--fs-display, 1));
  color: var(--c-text-hi);
}
.rp-stat .v.win {
  text-shadow: 0 0 14px color-mix(in srgb, currentColor 35%, transparent);
}
.rp-stat .v.p1 {
  color: var(--p1);
}
.rp-stat .v.p2 {
  color: var(--p2);
}
.rp-stat .k {
  font-size: calc(10px * var(--fs-body, 1));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.rp-btnrow {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
#rpModal .rp-panel {
  position: relative;
}
#rpModal .rp-panel > .pb-menu-table-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}
@media (max-width: 560px) {
  #rpModal[data-kind=match] .rp-panel {
    padding-top: 38px;
  }
  #rpModal .rp-panel > .pb-menu-table-btn {
    top: 6px;
    right: 8px;
  }
  #rpModal .rp-stats {
    gap: 8px 12px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  #rpModal .rp-stat {
    min-width: 0;
  }
  #rpModal .rp-stat .v {
    font-size: calc(14px * var(--fs-display, 1));
    white-space: nowrap;
  }
  #rpModal .rp-stat .k {
    white-space: nowrap;
  }
  #rpModal .rp-pm-sec,
  #rpModal .rp-pm-pri {
    flex: 1 1 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}
#rpModal > .pb-menu-peekbar {
  display: none;
}
#rpModal.active.rp-minimized {
  background: transparent;
  pointer-events: none;
}
#rpModal.rp-minimized > .rp-panel {
  display: none;
}
#rpModal.rp-minimized > .pb-menu-peekbar {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  position: fixed;
  left: var(--gcg-message-table-x, 50vw);
  top: var(--gcg-message-table-y, 50vh);
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: 4px 4px 4px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-loz);
  background: var(--c-panel);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}
#rpModal.rp-minimized .pb-menu-peek-kicker {
  display: none;
}
#rpModal.rp-minimized .pb-menu-peek-copy {
  flex: none;
  min-width: 0;
}
#rpModal.rp-minimized .pb-menu-peek-label {
  white-space: nowrap;
  overflow: visible;
}
html.post-match-min .center-table-announcement.result {
  visibility: hidden;
}
#rpModal.rp-minimized .pb-menu-return-btn {
  padding-top: 6px;
  padding-bottom: 6px;
}
html.post-match-open .pb-float.gameover-morph .pb-mode-btn,
html.post-match-open .pb-float.gameover-morph .pb-pass-btn {
  display: none !important;
}
.rp-replay-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rp-replay-group .k {
  font-size: calc(10px * var(--fs-body, 1));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-right: 2px;
}
.rp-replay-group .rp-btn {
  padding: 12px 14px;
}
.rp-btn .ti,
.rp-btn svg {
  vertical-align: -2px;
}
.rp-btn:disabled {
  cursor: default;
  opacity: .6;
}
.rp-btn {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: calc(13px * var(--fs-display, 1));
  border-radius: var(--r-m);
  border: 1px solid var(--c-border-strong);
  cursor: pointer;
  padding: 12px 22px;
  color: var(--c-text-bright);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .06),
      transparent 42%,
      rgba(0, 0, 0, .24)),
    linear-gradient(var(--c-ctrl), var(--c-ctrl));
}
.rp-btn:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .06),
      transparent 42%,
      rgba(0, 0, 0, .24)),
    linear-gradient(var(--c-ctrl-3), var(--c-ctrl-3));
}
.rp-btn.primary {
  --c: var(--c-commit);
  color: var(--c-on-commit);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) 78%, #fff) 0%,
      var(--c) 48%,
      color-mix(in srgb, var(--c) 82%, #000) 100%);
  border: 1px solid color-mix(in srgb, var(--c) 72%, #000);
  box-shadow: 0 2px 14px color-mix(in srgb, var(--c) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, .30);
  padding: 14px 34px;
  font-size: calc(15px * var(--fs-display, 1));
}
.rp-btn.primary:hover {
  border-color: color-mix(in srgb, var(--c) 55%, #fff);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) 52%, #fff) 0%,
      color-mix(in srgb, var(--c) 80%, #fff) 48%,
      color-mix(in srgb, var(--c) 96%, #fff) 100%);
}
#setupBody .status {
  font-size: calc(11px * var(--fs-body, 1));
  color: var(--c-text-dim);
  text-align: center;
  min-height: 14px;
}
.replay-play-controls .icon-btn {
  flex: 1;
}
.timeline-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-bg);
  padding: 4px 8px;
  border-bottom: 1px solid var(--c-border-subtle);
}
#timelineSlider {
  flex: 1;
  cursor: pointer;
  accent-color: var(--c-accent);
}
.timeline-label {
  font-size: calc(10px * var(--fs-body, 1));
  color: var(--c-border-strong);
  white-space: nowrap;
}
button.tick-speed-btn {
  flex: 0 0 auto;
  width: 36px;
  box-sizing: border-box;
  text-align: center;
  font-size: calc(11px * var(--fs-body, 1));
  font-weight: 700;
  padding: 3px 2px;
  letter-spacing: 0.5px;
  --c: var(--c-accent);
  color: var(--c-accent);
}
button.tick-speed-btn:hover:not(:disabled) {
  color: var(--c-accent);
}
div.speed-skip-row {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 6px 10px;
}
div.speed-skip-row > button {
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
}
.board {
  flex: 1;
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: visible;
  position: relative;
  min-height: 0;
  user-select: none;
  -webkit-user-select: none;
}
.board-divider {
  border: none;
  border-top: 2px solid var(--c-border-subtle);
  margin: 0;
}
.board-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.table-scaler {
  flex-shrink: 0;
  position: relative;
  width: calc(var(--cur-table-w, var(--table-w)) * var(--table-scale));
  height: calc(var(--cur-table-h, var(--table-h)) * var(--table-scale));
}
.table-module {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cur-table-w, var(--table-w));
  height: var(--cur-table-h, var(--table-h));
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
}
.table-scaler[data-side=p1] .table-module {
  transform: scale(var(--table-scale));
}
.table-scaler[data-side=p2] .table-module {
  transform: translate(calc(var(--cur-table-w, var(--table-w)) * var(--table-scale)), calc(var(--cur-table-h, var(--table-h)) * var(--table-scale))) rotate(180deg) scale(var(--table-scale));
}
.player-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-border-strong);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.player-name.active {
  color: var(--c-accent);
}
.player-board {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.shield-col {
  flex-shrink: 0;
  width: var(--flank-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 8px;
}
.dt-col {
  flex-shrink: 0;
  width: var(--flank-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  align-self: stretch;
  position: relative;
}
.col-label {
  font-size: 10px;
  color: var(--c-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.shields-pile {
  flex: 1;
  position: relative;
  width: 133px;
  min-height: 131px;
}
.card.shield-card {
  position: absolute;
  transform: rotate(-90deg);
  left: 20px;
  cursor: default;
}
.card.burst-reveal {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 70;
  margin-left: calc(-47px * var(--tt-base-scale, 1));
  width: calc(94px * var(--tt-base-scale, 1));
  height: calc(131px * var(--tt-base-scale, 1));
  box-shadow: 0 0 12px var(--c-game-burst), 0 0 3px var(--c-game-burst);
}
.card.command-reveal {
  pointer-events: none;
}
.shield-empty {
  position: absolute;
  left: 20px;
  width: calc(94px * var(--tt-shield-scale, 1));
  height: calc(131px * var(--tt-shield-scale, 1));
  transform: rotate(-90deg);
  pointer-events: none;
  border-radius: 4px;
}
.shield-frame {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 18.5px;
  bottom: 18.5px;
  box-sizing: border-box;
  border-radius: 4px;
  border: none;
  display: flex;
  flex-direction: column;
  z-index: 0;
  pointer-events: none;
}
.shield-frame > * {
  flex: 1 1 0;
}
.shield-frame > .sf-card {
  flex: 0 0 94px;
}
.shield-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 34px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  translate: -50% -50%;
  pointer-events: none;
  z-index: 60;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
}
.shield-badge.count {
  width: 54px;
  height: 50px;
  background: none;
  color: #063a45;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.95)) drop-shadow(0 0 8px rgba(34, 211, 238, 0.60)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.shield-badge.count.is-one {
  padding-right: 4px;
}
.shield-badge.count::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(
      ellipse 70% 55% at 42% 30%,
      rgba(190, 250, 255, 0.95) 0%,
      rgba(120, 235, 255, 0) 60%),
    linear-gradient(
      158deg,
      #6fe9ff 0%,
      #22d3ee 42%,
      #0baccb 78%,
      #0791ad 100%);
  -webkit-mask: url(/viewer/fx/shield_icon.png) center / contain no-repeat;
  mask: url(/viewer/fx/shield_icon.png) center / contain no-repeat;
}
.shield-badge.lethal {
  --lethal-c: var(--c-game-attack);
  width: 62px;
  height: 62px;
  padding-bottom: 0;
  background: none;
  color: transparent;
  display: block;
  filter: drop-shadow(0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--lethal-c) var(--screen-fx-glow-core-opacity), transparent)) drop-shadow(0 0 var(--screen-fx-glow-bloom-blur) color-mix(in srgb, var(--lethal-c) var(--screen-fx-glow-bloom-opacity), transparent));
}
.shield-badge.lethal > .lethal-ic {
  position: absolute;
  inset: 0;
  background: var(--lethal-c);
  -webkit-mask: url(/viewer/fx/lethal_icon_a.png) center / contain no-repeat;
  mask: url(/viewer/fx/lethal_icon_a.png) center / contain no-repeat;
}
.card.shield-card:hover .shield-badge.count {
  opacity: 0;
  transition: opacity 0.12s;
}
.resources-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  padding: 4px 0;
  transform: translateX(var(--res-anchor-shift, 0px));
}
.resources-row > * + * {
  margin-left: var(--res-gap, 4px);
}
.resources-row > .ex-res-sep {
  margin-left: var(--res-sep-ml, var(--res-gap, 4px));
  z-index: 2;
}
.resources-row > .ex-res-sep + * {
  margin-left: var(--res-sep-next-ml, 0px);
}
.resources-row.res-overlap .resource-empty + .resource-empty::before {
  -webkit-clip-path: inset(0 0 0 calc(0px - var(--res-gap)));
  clip-path: inset(0 0 0 calc(0px - var(--res-gap)));
}
.resources-row > .card {
  z-index: 1;
}
.resource-empty {
  width: 50px;
  height: 70px;
  border: 1px dashed rgba(255, 255, 255, 0.32);
  border-radius: 3px;
  flex-shrink: 0;
}
.play-area-wrap.compact .resources-row .resource-empty {
  width: 40px;
  height: 56px;
}
.play-area-wrap.compact .resources-row > .card[data-res-slot],
.play-area-wrap.compact .resources-row > .card.ex-resource {
  width: 40px !important;
  height: 56px !important;
}
.resources-row .card.pb-pay-preview,
.resources-row .card.ex-marked {
  box-shadow:
    inset 0 0 0 3px #ffffff,
    0 0 2px 1px rgba(255, 255, 255, 0.95),
    0 0 8px 3px rgba(255, 255, 255, 0.6);
  transition: box-shadow 0.08s;
}
.resources-row .card {
  --screen-fx-glow-core-blur: 2px;
  --screen-fx-glow-bloom-blur: 8px;
  --screen-fx-glow-core-spread: 1px;
  --screen-fx-glow-bloom-spread: 3px;
}
.hand-row.overlap > * + * {
  margin-left: -40px;
}
.ex-res-sep {
  width: 2px;
  height: calc(60px * var(--res-card-scale, 1));
  background: var(--c-border);
  margin-right: 3px;
  flex-shrink: 0;
}
.res-row-label {
  position: absolute;
  left: auto;
  right: calc(50% + var(--res-content-w, 0px) / 2 + var(--res-edit-label-extra,0px) + 10px);
  top: 50%;
  bottom: auto;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 1.05;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;
}
.area-label.res-row-label {
  color: var(--c-text-muted);
}
.res-row-label .rl-short {
  display: none;
}
.res-row-label[data-cap=short] .rl-long,
.res-row-label[data-cap=lv] .rl-long {
  display: none;
}
.res-row-label[data-cap=short] .rl-short {
  display: inline;
}
.res-row-label[data-cap=lv] > .rl-detail {
  display: none;
}
.card.ex-resource .card-art,
.card.ex-resource {
  box-shadow: 0 0 0 2px #c9a227 inset;
}
.play-area-wrap {
  flex-shrink: 0;
  width: var(--pa-w);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  position: relative;
}
.area-label,
.zone-label {
  --cap-k: clamp(1, calc(0.8 / var(--table-scale, 1)), 2);
}
.area-label {
  font-size: calc(10px * var(--cap-k, 1));
  color: var(--c-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.play-area {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 0;
  width: var(--pa-w);
  box-sizing: border-box;
  padding: 6px 64px;
  min-height: 175px;
  overflow: visible;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.pa-outline {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  pointer-events: none;
  box-sizing: border-box;
  border-radius: 3px;
  width: 100%;
  height: 100%;
  translate: -50% -50%;
}
.hand-outline {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  box-sizing: border-box;
  border-radius: 3px;
  height: 175px;
  transform: translateX(-50%);
}
.pa-outline,
.hand-outline {
  --frame-c: var(--slot-a);
  --frame-lw: calc(var(--frame-line-w, 1px) / var(--table-scale, 1));
  --frame-ink: color-mix(in srgb, var(--frame-c) min(100%, calc(var(--frame-strength, 0.75) * 175%)), transparent);
  --rail: linear-gradient(var(--frame-ink), var(--frame-ink));
  --frame-hb: calc(var(--frame-lw) * 0.7);
  --dbksl:
    linear-gradient(
      
      45deg,
      transparent calc(50% - var(--frame-hb)),
      var(--frame-ink) calc(50% - var(--frame-hb)),
      var(--frame-ink) calc(50% + var(--frame-hb)),
      transparent calc(50% + var(--frame-hb)));
  --dfwsl:
    linear-gradient(
      
      135deg,
      transparent calc(50% - var(--frame-hb)),
      var(--frame-ink) calc(50% - var(--frame-hb)),
      var(--frame-ink) calc(50% + var(--frame-hb)),
      transparent calc(50% + var(--frame-hb)));
  --glow-c: color-mix(in srgb, var(--frame-c) calc(var(--frame-glow, 1) * 55%), transparent);
  --glow-th: calc((4px + var(--frame-glow, 1) * 9px) / var(--table-scale, 1));
  --glow-up:
    linear-gradient(
      
      to top,
      var(--glow-c),
      transparent);
  --glow-down:
    linear-gradient(
      
      to bottom,
      var(--glow-c),
      transparent);
  --glow-right:
    linear-gradient(
      
      to right,
      var(--glow-c),
      transparent);
  --glow-left:
    linear-gradient(
      
      to left,
      var(--glow-c),
      transparent);
  border: 0;
  background-repeat: no-repeat;
}
.pa-outline {
  background-image:
    var(--rail),
    var(--rail),
    var(--rail),
    var(--dfwsl),
    var(--dbksl),
    var(--glow-up),
    var(--glow-right),
    var(--glow-left);
  background-size:
    calc(100% - 2 * var(--frame-cut, 22px)) var(--frame-lw),
    var(--frame-lw) calc(100% - var(--frame-cut, 22px)),
    var(--frame-lw) calc(100% - var(--frame-cut, 22px)),
    var(--frame-cut, 22px) var(--frame-cut, 22px),
    var(--frame-cut, 22px) var(--frame-cut, 22px),
    calc(100% - 2 * var(--frame-cut, 22px)) var(--glow-th),
    var(--glow-th) calc(100% - var(--frame-cut, 22px)),
    var(--glow-th) calc(100% - var(--frame-cut, 22px));
  background-position:
    center bottom,
    left top,
    right top,
    right bottom,
    left bottom,
    center bottom,
    left top,
    right top;
}
.hand-outline {
  background-image:
    var(--rail),
    var(--rail),
    var(--rail),
    var(--rail),
    var(--dfwsl),
    var(--dbksl),
    var(--dfwsl),
    var(--dbksl),
    var(--glow-down),
    var(--glow-up),
    var(--glow-right),
    var(--glow-left);
  background-size:
    calc(100% - 2 * var(--frame-cut, 22px)) var(--frame-lw),
    calc(100% - 2 * var(--frame-cut, 22px)) var(--frame-lw),
    var(--frame-lw) calc(100% - 2 * var(--frame-cut, 22px)),
    var(--frame-lw) calc(100% - 2 * var(--frame-cut, 22px)),
    var(--frame-cut, 22px) var(--frame-cut, 22px),
    var(--frame-cut, 22px) var(--frame-cut, 22px),
    var(--frame-cut, 22px) var(--frame-cut, 22px),
    var(--frame-cut, 22px) var(--frame-cut, 22px),
    calc(100% - 2 * var(--frame-cut, 22px)) var(--glow-th),
    calc(100% - 2 * var(--frame-cut, 22px)) var(--glow-th),
    var(--glow-th) calc(100% - 2 * var(--frame-cut, 22px)),
    var(--glow-th) calc(100% - 2 * var(--frame-cut, 22px));
  background-position:
    center top,
    center bottom,
    left center,
    right center,
    left top,
    right top,
    right bottom,
    left bottom,
    center top,
    center bottom,
    left center,
    right center;
}
#board:not(.lab-play-mode):not(.pb-active) .play-area.lab-play-clickable .pa-outline,
#board:not(.lab-play-mode):not(.pb-active) .play-area-wrap:has(> .hand-row.lab-hand-clickable) .hand-outline {
  --frame-c: var(--c-edit);
}
#board:not(.lab-play-mode):not(.pb-active) .player-board,
#board:not(.lab-play-mode):not(.pb-active) .play-area.lab-play-clickable,
#board:not(.lab-play-mode):not(.pb-active) .resources-row.lab-res-clickable {
  --slot-a: var(--c-edit);
}
#board:not(.lab-play-mode):not(.pb-active) .play-area.lab-play-clickable:hover .pa-outline,
#board:not(.lab-play-mode):not(.pb-active) .play-area-wrap:has(> .hand-row.lab-hand-clickable:hover) .hand-outline {
  filter: brightness(1.5) saturate(1.15);
}
.hand-row > .card {
  width: calc(94px * var(--tt-hand-scale, 1));
  height: calc(131px * var(--tt-hand-scale, 1));
}
.hand-row > .lab-handadd {
  width: calc(94px * var(--tt-hand-scale, 1));
  height: calc(131px * var(--tt-hand-scale, 1));
}
.play-area .card,
.play-area .play-stack,
.play-area .stack-unit,
.play-area .stack-pilot {
  width: calc(94px * var(--tt-unit-scale, 1));
  height: calc(131px * var(--tt-unit-scale, 1));
}
.play-area .stack-pilot {
  top: calc(34px * var(--tt-unit-scale, 1));
}
.play-area .play-stack.has-pilot:not(.tapped) {
  translate: 0 calc(-17px * var(--tt-unit-scale, 1));
}
.play-area .play-stack.has-pilot:not(.tapped):hover {
  transform: scale(1.07);
}
.play-area .play-stack.has-pilot.tapped {
  translate: calc(17px * var(--tt-unit-scale, 1)) 0;
  transform: rotate(90deg);
}
.play-area .play-stack.has-pilot.tapped:hover {
  transform: rotate(90deg) scale(1.05);
}
.card.shield-card {
  width: calc(94px * var(--tt-shield-scale, 1));
  height: calc(131px * var(--tt-shield-scale, 1));
}
.shield-col > .card {
  width: calc(94px * var(--tt-base-scale, 1));
  height: calc(131px * var(--tt-base-scale, 1));
}
.resource-empty {
  width: calc(50px * var(--tt-res-scale, 1));
  height: calc(70px * var(--tt-res-scale, 1));
}
.msg-strip {
  height: var(--msg-strip-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
}
.msg-strip:empty {
  pointer-events: none;
}
.msg-strip .pb-effect-context .lz-ability {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-weight: 700;
}
.table-scaler[data-side=p2] .msg-strip {
  rotate: 180deg;
}
.msg-strip .pb-effect-context {
  margin: 0;
}
.play-area-wrap > .watch-plate {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin: 0;
  z-index: 1001;
  translate: -50% 0;
  pointer-events: none;
}
.table-scaler[data-side=p2] .watch-plate {
  rotate: 180deg;
}
html.opp-upright .table-scaler[data-side=p2] .card,
html.opp-upright .table-scaler[data-side=p2] .play-stack,
html.opp-upright .table-scaler[data-side=p2] .zone-back {
  rotate: 180deg;
}
html.opp-upright .table-scaler[data-side=p2] .hand-row > .card {
  rotate: none;
}
html.opp-upright .table-scaler[data-side=p2] .play-area .play-stack.has-pilot:not(.tapped) {
  translate: 0 calc(17px * var(--tt-unit-scale, 1));
}
html.opp-upright .table-scaler[data-side=p2] .play-area .play-stack.has-pilot.tapped {
  translate: calc(-17px * var(--tt-unit-scale, 1)) 0;
}
html.opp-upright .table-scaler[data-side=p2] .play-stack.has-pilot:not(.tapped) {
  translate: 0 17px;
}
html.opp-upright .table-scaler[data-side=p2] .play-stack.has-pilot.tapped {
  translate: -17px 0;
}
.slot-art,
.resource-empty,
.zone-back,
.lab-slot,
.lab-emptyslot {
  position: relative;
  border-color: transparent !important;
}
.shield-empty {
  border-color: transparent !important;
}
.slot-art::before,
.resource-empty::before,
.zone-back::before,
.shield-empty::before,
.lab-slot::before,
.lab-emptyslot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: url(/viewer/play_area/card_slot_1.webp);
  mask-image: url(/viewer/play_area/card_slot_1.webp);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background: color-mix(in srgb, var(--slot-a) calc(var(--slot-strength) * 100%), transparent);
}
html.glow-render-canvas .slot-art::before,
html.glow-render-canvas .resource-empty::before,
html.glow-render-canvas .zone-back::before,
html.glow-render-canvas .shield-empty::before,
html.glow-render-canvas .lab-slot::before,
html.glow-render-canvas .lab-emptyslot::before {
  --slot-glow-c: hsl(from var(--slot-a) h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
  filter: drop-shadow(0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--slot-glow-c) var(--screen-fx-glow-core-opacity), transparent)) drop-shadow(0 0 var(--screen-fx-glow-bloom-blur) color-mix(in srgb, var(--slot-glow-c) var(--screen-fx-glow-bloom-opacity), transparent));
}
.shield-empty.half-slot::before {
  clip-path: inset(0 0 0 var(--shield-crop-inset, 50%));
}
.zone {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: 100%;
}
.zone-label {
  font-size: calc(10px * var(--cap-k, 1));
  color: inherit;
  text-transform: uppercase;
}
.zone-back {
  width: 94px;
  height: 131px;
  background:
    linear-gradient(
      135deg,
      var(--c-ctrl-3) 0%,
      var(--c-panel) 100%);
  border-radius: 4px;
  border: 1px dashed rgba(255, 255, 255, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--c-border-strong);
}
.zone-back.trash {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.32);
}
.player-board.layout-compact {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  padding: 6px;
}
.shield-col.compact {
  width: var(--flank-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  gap: 8px;
}
.dt-col.compact {
  width: var(--flank-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  align-self: flex-start;
  gap: 8px;
}
.shields-pile.compact {
  flex: 0 0 auto;
  width: 133px;
  height: 190px;
  cursor: pointer;
}
.dt-col.compact .zone-back,
.dt-col.compact .zone {
  width: 84px;
}
.dt-col.compact .zone-back {
  width: 84px;
  height: 117px;
}
.player-board.layout-compact .shield-col > .card {
  width: calc(84px * var(--tt-base-scale, 1));
  height: calc(117px * var(--tt-base-scale, 1));
}
.player-board.layout-compact .card.shield-card {
  width: calc(84px * var(--tt-shield-scale, 1));
  height: calc(117px * var(--tt-shield-scale, 1));
}
.player-board.layout-compact .card.burst-reveal {
  margin-left: calc(-42px * var(--tt-base-scale, 1));
  width: calc(84px * var(--tt-base-scale, 1));
  height: calc(117px * var(--tt-base-scale, 1));
}
.player-board.layout-compact .shield-empty {
  width: calc(84px * var(--tt-shield-scale, 1));
  height: calc(117px * var(--tt-shield-scale, 1));
}
.player-board.layout-compact .shield-frame {
  top: 16.5px;
  bottom: 16.5px;
}
.player-board.layout-compact .shield-frame > .sf-card {
  flex: 0 0 84px;
}
.play-area.compact {
  flex-direction: column;
  flex-wrap: nowrap;
  width: var(--pa-cw);
  gap: var(--pa-c-row-gap);
  align-items: stretch;
  justify-content: flex-start;
  min-height: calc(2 * 175px + var(--pa-c-row-gap));
  padding-left: 40px;
  padding-right: 40px;
}
.play-area.compact .compact-row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 0;
  min-height: 175px;
}
.play-area.compact .compact-row.compact-row--overflow {
  justify-content: center;
}
.play-area.compact .compact-row:not(:last-child) {
  transform: translateY(-4px);
}
.play-area.compact .compact-row ~ .compact-row {
  transform: translateY(24px);
}
.play-area-wrap.compact {
  width: var(--pa-cw);
}
.play-area-wrap.compact {
  --msg-strip-h: 72px;
}
.play-area-wrap.compact .pb-effect-context {
  max-width: var(--pa-cw);
}
.hand-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  align-self: center;
}
.hand-strip .hs-backs {
  display: flex;
}
.hand-strip .hs-backs .card {
  width: 40px;
  height: 56px;
  border-radius: 3px;
  flex-shrink: 0;
}
.hand-strip .hs-backs .card + .card {
  margin-left: -22px;
}
.hand-strip .hs-label {
  font-size: 11px;
  color: var(--c-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.hand-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
@property --drag-lift { syntax: "<length>"; inherits: false; initial-value: 0px; }
.hand-row {
  display: flex;
  flex-wrap: nowrap;
  padding: 4px 12px 0;
  background: transparent;
  border-radius: 6px;
  min-height: 158px;
  align-items: flex-end;
  justify-content: center;
  max-width: 100%;
  align-self: center;
  position: relative;
  overflow: visible;
}
.hand-row {
  margin-top: -14px;
  margin-bottom: -6px;
}
.hand-row > .card,
.hand-row > .lab-emptyslot {
  flex-shrink: 0;
  transform-origin: bottom center;
  transition: transform 0.12s ease, scale 0.15s ease;
}
.hand-row > .card.hand-reorder-drag {
  z-index: 1001 !important;
  pointer-events: none;
}
html.glow-render-canvas .hand-row > .card {
  will-change: transform, scale;
}
html.glow-render-canvas #board .card,
html.glow-render-canvas #board .play-stack,
html.glow-render-canvas #board .stack-pilot {
  will-change:
    transform,
    translate,
    scale;
}
.hand-row > .card:not(.card-action-candidate):hover {
  z-index: 1000 !important;
  scale: 1.07;
}
#uiSettingsStub {
  position: relative;
}
#uiSettingsToggle {
  display: none;
}
#uiSettingsPanel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-menu);
  background: var(--glass-modal-bg);
  -webkit-backdrop-filter: var(--glass-modal-blur);
  backdrop-filter: var(--glass-modal-blur);
  border: 1px solid hsl(0 0% 30% / .8);
  border-radius: var(--r-xl);
  padding: var(--modal-pad, 16px);
  width: 260px;
  max-height: calc(100vh - 80px);
  overflow: hidden;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .62);
}
#uiSettingsPanel.open {
  display: flex;
  flex-direction: column;
}
#optsBackdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim, rgba(0,0,0,0.6));
  z-index: var(--z-menu);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#optsBackdrop.on {
  display: flex;
}
#uiSettingsPanel.opts-centered {
  position: static;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  transform: none;
  margin: 0;
  max-height: 82vh;
  padding: var(--msheet-pad);
}
#uiSettingsPanel {
  width: 272px;
}
#playScreen.narrow-shell #uiSettingsPanel {
  position: fixed;
  width: auto;
  top: auto;
  left: calc(var(--gcg-safe-left) + 8px);
  right: calc(var(--gcg-safe-right) + 8px);
  bottom: calc(var(--gcg-mobile-bar-h) + var(--gcg-safe-bottom) + 8px);
  max-height: 62vh;
  z-index: var(--z-menu);
}
#playScreen.narrow-shell #uiSettingsPanel.open {
  opacity: 1;
  transition: none;
}
.opt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0;
}
.opt-panel-title {
  font-family: var(--font-display);
  font-size: calc(12px * var(--fs-display, 1));
  font-weight: 900;
  color: var(--c-text-hi);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.opt-panel-x {
  font-size: calc(14px * var(--fs-body, 1));
  line-height: 1;
}
.opt-grp {
  margin-bottom: 8px;
}
.opt-grp:last-child {
  margin-bottom: 0;
}
.opt-groups {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.opt-col {
  display: contents;
}
#uiSettingsPanel.opts-centered {
  width: 744px;
  max-width: calc(100vw - 40px);
  max-height: min(88vh, 780px);
}
#uiSettingsPanel.opts-centered .opt-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
#uiSettingsPanel.opts-centered .opt-grp {
  margin-bottom: 12px;
}
#uiSettingsPanel.opts-centered .opt-grp:last-child {
  margin-bottom: 0;
}
#uiSettingsPanel.opts-centered .opt-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (max-width: 680px) {
  #optsBackdrop {
    padding: 12px;
  }
  #uiSettingsPanel.opts-centered {
    width: 360px;
    max-width: calc(100vw - 24px);
  }
  #uiSettingsPanel.opts-centered .opt-groups {
    display: block;
  }
  #uiSettingsPanel.opts-centered .opt-col {
    display: contents;
  }
}
.opt-grp-hd {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.opt-grp:not(.static) .opt-grp-hd:hover .opt-gt {
  color: var(--c-text-hi);
}
.opt-grp.static .opt-grp-hd {
  cursor: default;
}
.opt-chev {
  color: var(--c-text-faint);
  font-size: calc(10px * var(--fs-body, 1));
  width: 10px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.opt-grp.open .opt-chev {
  transform: rotate(90deg);
}
span.opt-gt {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
span.opt-badge {
  font-size: calc(9px * var(--fs-body, 1));
  flex-shrink: 0;
}
.opt-grp-bd {
  display: none;
}
.opt-grp.open .opt-grp-bd {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.cheat-warning {
  margin: 0;
  color: var(--c-text-faint);
  font-size: calc(10px * var(--fs-body, 1));
  line-height: 1.4;
}
.opt-notice {
  margin: 0;
  padding: 6px 8px;
  line-height: 1.4;
  font-size: calc(10px * var(--fs-body, 1));
  color: var(--c-warn);
  border: 1px solid var(--c-warn);
  border-left-width: 3px;
  border-radius: var(--r-sm, 4px);
  background: color-mix(in srgb, var(--c-warn) 12%, transparent);
}
.opt-notice.danger {
  color: var(--c-danger);
  border-color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
}
.opt-seedrow {
  display: flex;
  align-items: center;
  gap: 5px;
}
.opt-seedrow input {
  flex: 1;
  min-width: 0;
}
.opt-seed-dice {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-panel-3);
  border: 1px solid var(--c-border-subtle);
  color: var(--c-text-muted);
  padding: 5px 6px;
  cursor: pointer;
  border-radius: 4px;
  font-size: calc(12px * var(--fs-body, 1));
}
.opt-seed-dice .gcg-tbi {
  width: 14px;
  height: 14px;
}
.opt-seed-dice:hover {
  background: var(--c-ctrl-2);
  color: var(--c-text-hi);
}
.opt-panel-actionsbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 8px -10px -10px;
  padding: 8px 10px;
  border-top: 1px solid var(--c-border-subtle);
  background: transparent;
}
.opt-panel-actionsbar .opt-spacer {
  flex: 1 1 auto;
  min-width: 4px;
}
.opt-panel-actionsbar .gcg-action {
  flex: 0 1 auto;
  white-space: nowrap;
}
.opt-panel-actionsbar .opt-defaults {
  text-align: left;
}
@media (max-width: 380px) {
  .opt-panel-actionsbar {
    gap: 4px;
    padding-inline: 8px;
  }
  .opt-panel-actionsbar .gcg-action {
    padding-inline: 5px;
    font-size: 10px;
  }
}
#speedSkipRow {
  display: none;
}
.card {
  position: relative;
  width: 94px;
  height: 131px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid transparent;
  flex-shrink: 0;
  transition:
    transform 0.15s,
    scale 0.15s ease,
    border-color 0.15s,
    box-shadow 0.15s;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  background:
    linear-gradient(
      135deg,
      var(--c-ctrl) 0%,
      var(--c-panel) 100%);
}
html.glow-render-canvas .card {
  transition:
    transform 0.15s,
    scale 0.15s ease,
    border-color 0.15s;
}
img.card-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
  z-index: 1;
}
.card-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      135deg,
      var(--c-ctrl-3) 0%,
      var(--c-panel) 100%);
  font-size: 9px;
  text-align: center;
  padding: 4px;
  color: var(--c-text-muted);
  line-height: 1.3;
}
.card-fallback.art-loading {
  color: color-mix(in srgb, var(--c-text-muted) 45%, transparent);
  background:
    linear-gradient(
      135deg,
      var(--c-ctrl) 0%,
      var(--c-panel) 100%);
}
img.art-fade-in {
  animation: artFadeIn var(--t-fade-fast) ease;
}
@keyframes artFadeIn {
  from {
    opacity: 0;
  }
}
.card-fallback.token-face {
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background:
    radial-gradient(
      120% 90% at 50% 12%,
      color-mix(in srgb, var(--c-card-token) 55%, transparent) 0%,
      rgba(14, 13, 26, 0.97) 72%);
  color: var(--c-text-bright);
  text-align: center;
}
.token-face .token-ribbon {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 1px 6px;
  border-radius: 7px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid color-mix(in srgb, var(--c-card-token) 75%, #fff);
}
.token-face .token-name {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.18;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  overflow-wrap: anywhere;
}
.card-preview .card-fallback.token-face .token-name {
  font-size: 15px;
}
.card-preview .card-fallback.token-face .token-ribbon {
  font-size: 9px;
}
.card:hover {
  --card-hover-glow-c: hsl(from white h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
  box-shadow: 0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--card-hover-glow-c) var(--screen-fx-glow-core-opacity), transparent), 0 0 var(--screen-fx-glow-bloom-blur) color-mix(in srgb, var(--card-hover-glow-c) var(--screen-fx-glow-bloom-opacity), transparent);
  overflow: visible;
  z-index: 100;
}
.card.card-detail-focus,
.card-detail-focus > .card,
.card-detail-focus > .play-stack {
  scale: 1.07;
  z-index: 100;
  --card-hover-glow-c: hsl(from white h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
  box-shadow: 0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--card-hover-glow-c) var(--screen-fx-glow-core-opacity), transparent), 0 0 var(--screen-fx-glow-bloom-blur) color-mix(in srgb, var(--card-hover-glow-c) var(--screen-fx-glow-bloom-opacity), transparent);
}
.card.card-detail-focus,
.card-detail-focus > .card,
.card-detail-focus > .play-stack > .card {
  overflow: visible;
}
.stack-unit:hover,
.stack-pilot:hover,
.card-detail-focus > .play-stack > .stack-unit,
.card-detail-focus > .play-stack > .stack-pilot {
  overflow: visible;
}
.hand-row > .card.card-detail-focus {
  z-index: 1000 !important;
}
.card.tapped.card-detail-focus,
.card-detail-focus > .play-stack.tapped {
  scale: 1.05;
}
.hand-row > .card:hover,
.hand-row > .card.loz-armed,
.hand-row > .card.action-half-0,
.hand-row > .card.action-half-1 {
  scale: 1.07;
  z-index: 1000 !important;
}
.card.tapped {
  transform: rotate(90deg);
}
.card.tapped:hover {
  transform: rotate(90deg) scale(1.05);
}
.card:not(.tapped):hover {
  transform: scale(1.07);
}
.card.shield-card:hover {
  transform: rotate(-90deg) !important;
  box-shadow: 0 0 16px rgba(255, 255, 255, .45), 0 0 6px rgba(255, 255, 255, .25);
}
.sick-icon {
  position: absolute;
  top: 19px;
  left: 50%;
  translate: -50% 0;
  transform: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background:
    linear-gradient(
      180deg,
      rgba(37, 46, 60, 0.97),
      rgba(14, 19, 28, 0.97));
  border: 1px solid rgba(207, 224, 246, 0.62);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.78), inset 0 0 0 1px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 16;
  pointer-events: none;
}
.sick-icon img {
  width: 18px;
  height: 18px;
  display: block;
}
.pilot-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(74, 222, 128, 0.9);
  color: #000;
  font-size: 8px;
  font-weight: bold;
  border-radius: 2px;
  padding: 1px 4px;
  z-index: 10;
}
.hp-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--c-ctrl-raised);
}
.hp-fill {
  height: 100%;
  background: #4ade80;
  transition: width 0.2s;
}
.hp-fill.low {
  background: var(--c-danger-2);
}
.play-stack {
  position: relative;
  width: 94px;
  height: 131px;
  overflow: visible;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s, scale 0.15s ease;
}
.play-stack.tapped {
  transform: rotate(90deg);
}
.play-stack.tapped:hover {
  transform: rotate(90deg) scale(1.05);
}
.play-stack:not(.tapped):hover {
  transform: scale(1.07);
}
.play-stack:hover {
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.45), 0 0 6px rgba(255, 255, 255, 0.25);
}
.play-stack.has-pilot:not(.tapped) {
  translate: 0 -17px;
}
.play-stack.has-pilot:not(.tapped):hover {
  transform: scale(1.07);
}
.play-stack.has-pilot.tapped {
  translate: 17px 0;
  transform: rotate(90deg);
}
.play-stack.has-pilot.tapped:hover {
  transform: rotate(90deg) scale(1.05);
}
.no-hover-anim .card,
.no-hover-anim .play-stack {
  transition: none !important;
}
.hover-quiet .card:hover,
.hover-quiet .play-stack:hover {
  box-shadow: none;
}
.hover-quiet .card:not(.tapped):hover,
.hover-quiet .play-stack:not(.tapped):hover,
.hover-quiet .play-stack.has-pilot:not(.tapped):hover {
  transform: none;
}
.hover-quiet .card.tapped:hover,
.hover-quiet .play-stack.tapped:hover,
.hover-quiet .play-stack.has-pilot.tapped:hover {
  transform: rotate(90deg);
}
.hover-quiet .hand-row > .card:hover:not(.loz-armed):not(.action-half-0):not(.action-half-1) {
  scale: none;
}
.hover-quiet .card.shield-card:hover {
  transform: rotate(-90deg) !important;
  box-shadow: none;
}
.fx-flying {
  z-index: 400;
  will-change: translate, transform;
}
.stack-pilot.fx-pilot-travel {
  z-index: 1;
}
.fx-travel {
  pointer-events: none;
}
#fxLayer .fx-ghost {
  position: absolute;
  will-change: transform, opacity;
}
#fxLayer .fx-shuffle {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}
.fx-flip-back {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: opacity;
}
.stack-unit,
.stack-pilot {
  position: absolute;
  left: 0;
  width: 94px;
  height: 131px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid transparent;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  background:
    linear-gradient(
      135deg,
      var(--c-ctrl) 0%,
      var(--c-panel) 100%);
}
.stack-unit {
  top: 0;
  z-index: 2;
}
.stack-pilot {
  top: 34px;
  z-index: 1;
}
.stack-unit img,
.stack-pilot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.dock-right {
  width: var(--dock-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--c-field);
  border: 0.5px solid var(--panel-border-color);
  border-radius: var(--panel-radius);
  overflow: hidden;
}
#playScreen:not(.detail-right) .dock-right {
  display: none;
}
.dock-empty {
  order: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-faint);
  font-size: calc(12px * var(--fs-body, 1));
  padding: 14px;
  text-align: center;
}
#dockRight:has(#inspector.insp-show) .dock-empty,
#dockRight:has(#bigCard.bc-show) .dock-empty {
  display: none;
}
#dockRight #inspector {
  order: 0;
  min-height: 0;
}
.dock-spacer {
  order: 5;
  flex: 1 1 auto;
  min-height: 0;
}
#playScreen.narrow-shell .play-body {
  position: relative;
  overflow: hidden;
}
#playScreen.narrow-shell .log-column {
  position: fixed;
  z-index: 300;
  top: var(--appbar-h, 44px);
  bottom: calc(100dvh - var(--gcg-viewport-top) - var(--gcg-viewport-height) + var(--gcg-mobile-bar-h) + 4px);
  left: var(--gcg-viewport-left);
  width: min(300px, 84vw);
  border-radius: 0;
  transform: translateX(-101%);
  transition: transform 0.18s ease;
  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.5);
}
#playScreen.narrow-shell.drawer-open .log-column {
  transform: translateX(0);
}
#playScreen.narrow-shell .board-column {
  width: 100%;
  min-height: 0;
}
#playScreen.narrow-shell .dock-right {
  display: none !important;
}
#drawerScrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(0, 0, 0, 0.55);
}
#playScreen.narrow-shell.drawer-open #drawerScrim {
  display: block;
}
#bottomBar {
  display: none;
  height: var(--gcg-mobile-bar-h);
  flex-shrink: 0;
  align-items: center;
  gap: max(4px, calc(6px * var(--gcg-ui-density)));
  padding: 0 calc(8px * var(--gcg-ui-density));
  background: var(--c-field);
  border-top: 0.5px solid var(--c-border-subtle);
  position: relative;
  z-index: 310;
}
#playScreen.narrow-shell #bottomBar {
  display: flex;
}
#bottomBar .bb-menu-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: max(48px, calc(54px * var(--gcg-ui-density)));
  height: max(38px, calc(42px * var(--gcg-ui-density)));
  font-size: calc(10px * var(--fs-body, 1));
  cursor: pointer;
  flex-shrink: 0;
}
#bottomBar .bb-menu-btn .g {
  font-size: calc(15px * var(--fs-body, 1));
  line-height: 1;
}
#bottomBar .bb-navset {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  align-items: center;
}
#bottomBar .bb-navbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: max(50px, calc(58px * var(--gcg-ui-density)));
  height: max(38px, calc(44px * var(--gcg-ui-density)));
  font-size: calc(10px * var(--fs-body, 1));
  cursor: pointer;
  flex-shrink: 0;
}
#bottomBar .bb-navbtn .g {
  font-size: calc(15px * var(--fs-body, 1));
  line-height: 1;
}
#bottomBar .bb-navbtn .g .gcg-tbi,
#bottomBar .bb-menu-btn .g .gcg-tbi {
  width: 15px;
  height: 15px;
}
.bb-navbtn .g svg,
.bb-rise-btn .g svg {
  display: block;
  margin: 0 auto;
}
#bottomBar.bb-collapsed .bb-navset {
  display: none;
}
#bottomBar.bb-collapsed .bb-menu-btn {
  display: flex;
}
#bottomBar.bb-measure .bb-navset {
  display: flex !important;
}
#bottomBar.bb-measure .bb-menu-btn {
  display: none !important;
}
.bb-menu-stack {
  display: none;
  position: fixed;
  left: max(calc(10px * var(--gcg-ui-density)), env(safe-area-inset-left, 0px));
  bottom: calc(var(--gcg-mobile-bar-h) + 8px + env(safe-area-inset-bottom, 0px));
  z-index: 620;
  flex-direction: column;
  gap: calc(7px * var(--gcg-ui-density));
  width: max(164px, calc(190px * var(--gcg-ui-density)));
}
#playScreen.narrow-shell.bb-menu-open .bb-menu-stack {
  display: flex;
}
.bb-rise-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-panel-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: 9px;
  color: var(--c-text);
  font-size: calc(13px * var(--fs-body, 1));
  padding: max(8px, calc(11px * var(--gcg-ui-density))) calc(13px * var(--gcg-ui-density));
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  text-align: left;
}
.bb-rise-btn .g {
  font-size: calc(16px * var(--fs-body, 1));
  width: 18px;
  text-align: center;
  color: var(--c-text-dim);
  flex-shrink: 0;
}
.bb-rise-btn .g .gcg-tbi {
  width: 16px;
  height: 16px;
}
#bbMenuScrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, .5);
}
#playScreen.narrow-shell.bb-menu-open #bbMenuScrim {
  display: block;
}
#mobileLogOverlay {
  display: none;
  position: fixed;
  z-index: 250;
  top: var(--appbar-h, 44px);
  left: var(--gcg-viewport-left);
  right: auto;
  width: var(--gcg-viewport-width);
  height: calc(48vh - 72px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  background: transparent;
}
#playScreen.narrow-shell.mlog-open #mobileLogOverlay {
  display: block;
  opacity: 1;
}
#mobileLogOverlay .mlog-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 12px 18px;
  font-size: calc(12px * var(--fs-body, 1));
  line-height: 1.45;
  color: var(--c-text);
  text-shadow:
    0 0 3px #000,
    0 0 6px #000,
    0 1px 2px #000;
}
#mobileLogOverlay .log-entry [class^=lz-],
#mobileLogOverlay .log-entry [class*=" lz-"] {
  text-shadow: none;
}
#mobileLogOverlay .log-entry {
  opacity: 0.82;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
}
#mobileLogOverlay .log-entry.current {
  opacity: 1;
  font-weight: 700;
  background: none !important;
  border: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  #mobileLogOverlay {
    transition: none;
  }
}
#mobileResultsOverlay {
  display: none;
  position: fixed;
  z-index: 250;
  top: var(--appbar-h, 44px);
  left: var(--gcg-viewport-left);
  right: auto;
  width: var(--gcg-viewport-width);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
#playScreen.narrow-shell.mres-open #mobileResultsOverlay {
  display: block;
  opacity: 1;
}
#mobileResultsOverlay .mres-panel {
  pointer-events: auto;
  box-sizing: border-box;
  max-width: 300px;
  margin: 6px 8px 0;
  display: flex;
  flex-direction: column;
  max-height: var(--mres-cap, 300px);
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(9, 12, 18, 0.94) 0%,
      rgba(9, 12, 18, 0.80) 60%,
      rgba(9, 12, 18, 0.62) 100%);
  border: 1px solid var(--c-border-subtle);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.35);
}
#mobileResultsOverlay .mres-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 12px 2px;
  overscroll-behavior: contain;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
#mobileResultsOverlay #msBody {
  overflow: visible;
  flex: 0 0 auto;
  padding: 0 0 2px;
  min-height: 0;
}
#mobileResultsOverlay .rp-bar,
#mobileResultsOverlay .deck-btn-dot {
  text-shadow: none;
}
#mobileResultsOverlay .mres-handle {
  flex: 0 0 16px;
}
@media (prefers-reduced-motion: reduce) {
  #mobileResultsOverlay {
    transition: none;
  }
}
#mobileTimelineDock {
  display: none;
  position: fixed;
  z-index: 260;
  left: 0;
  right: 0;
  bottom: calc(var(--gcg-mobile-bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 2px 8px 4px;
  background:
    linear-gradient(
      0deg,
      var(--scrim),
      color-mix(in srgb, var(--scrim) 70%, transparent) 60%,
      transparent);
  --seismo-rest-h: 26px;
  pointer-events: none;
}
#mobileTimelineDock > * {
  pointer-events: auto;
}
#mobileTimelineDock #seismoHost {
  height: 26px;
  background: var(--scrim);
  border-radius: var(--r-s);
}
#mobileTimelineDock #seismoHost .zc-read {
  text-shadow: 0 1px 3px color-mix(in srgb, var(--c-ink-dark) 90%, transparent), 0 0 2px var(--c-ink-dark);
}
#playScreen.narrow-shell.mlog-open #mobileTimelineDock {
  display: block;
}
#mobileTimelineDock .mtd-transport {
  display: flex;
  align-items: center;
  margin-top: 3px;
}
#mobileTimelineDock .mtd-transport #playbackControls {
  padding: 0 !important;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  grid-template-rows: clamp(34px, calc(38px * var(--gcg-ui-density, 1)), 42px) clamp(26px, calc(28px * var(--gcg-ui-density, 1)), 32px);
}
#mobileTimelineDock .mtd-transport #playbackControls > button {
  padding: 0;
}
#mobileTimelineDock .mtd-transport .icon-btn svg.tc-ico {
  width: 22px;
  height: 22px;
}
#mobileTimelineDock .mtd-transport .icon-btn svg.tc-step {
  width: 17px;
  height: 17px;
}
#mobileTimelineDock .mtd-transport .icon-btn svg.tc-cv {
  width: 15px;
  height: 15px;
}
#mobileTimelineDock .mtd-transport .icon-btn svg.tc-dia {
  width: 16px;
  height: 16px;
}
#mobileTimelineDock .mtd-transport .icon-btn.tc-aux svg {
  width: 16px;
  height: 16px;
}
#mobileTimelineDock .mtd-transport #tickSpeedBtn {
  font-size: calc(12px * var(--fs-body, 1));
}
#playScreen.narrow-shell #board {
  height: auto;
}
#playScreen.narrow-shell.mlog-open #board {
  margin-bottom: var(--mtd-reserve, 0px);
}
#playScreen.narrow-shell .container#playBody {
  flex-direction: column;
}
.pb-float.narrow-bottom {
  position: relative !important;
  transform: none !important;
  z-index: auto;
  box-shadow: none;
  background: transparent;
  border: none;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
}
.pb-float.narrow-bottom .pb-sub {
  display: none;
}
.pb-float.narrow-bottom .pb-sub.has-clock,
.pb-float.narrow-bottom .pb-sub.has-pvp-clock {
  display: block;
  position: absolute;
  right: 2px;
  bottom: calc(100% + 4px);
  margin: 0;
  padding: 1px 7px;
  pointer-events: none;
  z-index: 1;
  background: color-mix(in srgb, var(--c-field) 88%, transparent);
  border: 0.5px solid var(--c-border-subtle);
  border-radius: 5px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  text-align: center;
  color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-transform: uppercase;
}
.pb-float.narrow-bottom .pb-float-grip {
  display: none;
}
.pb-float.narrow-bottom .pb-float-btns {
  flex-direction: row;
}
.pb-float.narrow-bottom.gameover-morph .pb-morph-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 1;
}
.pb-float.narrow-bottom.gameover-morph .pb-morph-stack .pb-mode-btn {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.pb-float.narrow-bottom.gameover-morph:has(.pb-sub.has-clock) .pb-morph-stack,
.pb-float.narrow-bottom.gameover-morph:has(.pb-sub.has-pvp-clock) .pb-morph-stack {
  bottom: calc(100% + 30px);
}
.pb-float.narrow-bottom .pb-actbtn.pb-pass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(15px * var(--gcg-ui-density));
  font-weight: 800;
  padding: 0 calc(20px * var(--gcg-ui-density));
  min-width: max(88px, calc(104px * var(--gcg-ui-density)));
  height: max(40px, calc(46px * var(--gcg-ui-density)));
  border-radius: 9px;
}
.pb-float.narrow-bottom .pb-pass-btn.active {
  background: #1f7a3a;
  border-color: var(--c-ctx);
  color: #eafff0;
}
.pb-float.narrow-bottom .pb-mode-btn {
  display: inline-flex;
  width: auto;
  align-items: center;
  justify-content: center;
  font-size: calc(14px * var(--gcg-ui-density));
  font-weight: 700;
  padding: 0 calc(16px * var(--gcg-ui-density));
  min-width: max(72px, calc(84px * var(--gcg-ui-density)));
  height: max(40px, calc(46px * var(--gcg-ui-density)));
  border-radius: 9px;
}
@media (max-width: 370px) {
  #bottomBar {
    gap: 8px;
    padding: 0 6px;
  }
  .pb-float.narrow-bottom {
    margin-left: 10px;
  }
}
body:where(.st-play-narrow):is(#st.st, *) #sw-root {
  display: none !important;
}
#sw-root,
.gcg-fab {
  display: none !important;
}
body:not(.game-idle):where(.st-play-narrow):is(#st.st, *) #serverBuildChip {
  bottom: calc(var(--gcg-mobile-bar-h) + 6px + env(safe-area-inset-bottom, 0px));
}
body:not(.game-idle):where(.st-play-narrow):where(:not(.st-menu-active)):is(#st#st.st.st, *) #serverBuildChip {
  display: none !important;
}
#inspector {
  z-index: 9500;
  display: none;
  flex-direction: column;
  gap: 6px;
  background: var(--c-field);
  border: 0.5px solid var(--panel-border-color);
  border-radius: var(--panel-radius);
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
#inspector.insp-show {
  display: flex;
}
#inspector[data-mode=top] {
  position: fixed;
  left: 8px;
  right: 8px;
  width: fit-content;
  min-width: 272px;
  max-width: min(430px, calc(100vw - 16px));
  margin: 0 auto;
  max-height: min(56vh, calc(100dvh - 150px));
  overflow-y: auto;
}
#inspector[data-mode=top] .insp-head {
  cursor: grab;
  touch-action: none;
}
#inspector:has(.duo-wrap[data-duo-single="1"]) .insp-head .t {
  display: none;
}
#inspector[data-mode=top] .insp-head::before {
  content: "⠿";
  color: var(--c-text-dim);
  font-size: calc(13px * var(--fs-body, 1));
  line-height: 1;
  margin-right: 6px;
}
#inspector[data-mode=top] .duo-panel {
  flex-direction: row;
  align-items: stretch;
}
#inspector[data-mode=top] .duo-art,
#inspector[data-mode=top] .duo-text {
  width: auto;
  flex: 1 1 var(--duo-zoom, 210px);
  max-width: var(--duo-zoom, 210px);
  min-width: 0;
}
#inspector[data-mode=top] .duo-panel {
  width: calc(var(--duo-zoom, 210px) * 2 + 8px);
  max-width: 100%;
}
#inspector[data-mode=top] .duo-panel.no-art,
#inspector[data-mode=top] .duo-panel.no-text {
  width: var(--duo-zoom, 210px);
}
#inspector[data-mode=top] .insp-head {
  position: sticky;
  top: -10px;
  z-index: 2;
  background: var(--glass-bg-raised);
  margin: -10px -10px 0;
  padding: 8px 10px;
}
#inspector[data-mode=top] .insp-head .x,
#inspector[data-mode=top] .insp-head .pin {
  width: max(30px, calc(34px * var(--gcg-ui-density)));
  height: max(30px, calc(34px * var(--gcg-ui-density)));
  font-size: calc(13px * var(--fs-body, 1));
}
#inspector[data-mode=float] {
  position: fixed;
  width: 348px;
  max-height: 80vh;
  overflow-y: auto;
}
#inspector[data-mode=top],
#inspector[data-mode=float] {
  background: var(--glass-bg);
  backdrop-filter: blur(11px) saturate(1.12);
  -webkit-backdrop-filter: blur(11px) saturate(1.12);
}
#inspector[data-mode=panel],
#inspector[data-mode=right] {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
  width: auto;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--c-border-subtle);
}
#inspector .insp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#inspector .insp-head .t {
  font-size: calc(10px * var(--fs-body, 1));
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#inspector .insp-head .pin,
#inspector .insp-head .x {
  font-size: calc(11px * var(--fs-body, 1));
}
#inspector .insp-head .pin.on {
  --c: var(--c-lz-link);
  color: var(--c-lz-link);
  border-color: var(--c-lz-link);
}
#inspector .insp-head .x {
  margin-left: auto;
}
#inspector[data-mode=panel] .insp-head,
#inspector[data-mode=right] .insp-head {
  display: none;
}
:is(#inspector[data-mode=panel], #inspector[data-mode=right], .duo-dock) .duo-text {
  aspect-ratio: auto;
  height: auto;
  width: 100%;
}
:is(#inspector[data-mode=panel], #inspector[data-mode=right], .duo-dock) .duo-art {
  width: 100%;
  max-width: none;
}
:is(#inspector[data-mode=panel], #inspector[data-mode=right], .duo-dock) .duo-in {
  height: auto;
}
:is(#inspector[data-mode=panel], #inspector[data-mode=right], .duo-dock) .duo-effect {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 46vh;
  background: transparent;
}
#inspector[data-mode=panel],
#inspector[data-mode=right] {
  padding: 5px;
  gap: 4px;
}
:is(#inspector[data-mode=panel], #inspector[data-mode=right], .duo-dock) :is(.duo-wrap, .duo-panel) {
  gap: 5px;
}
:is(#inspector[data-mode=panel], #inspector[data-mode=right], .duo-dock) .duo-text {
  background: transparent;
  border-color: var(--panel-border-color);
}
:is(#inspector[data-mode=top], #inspector[data-mode=float]) :is(.duo-text, .duo-effect) {
  background: transparent;
}
#bigCard {
  position: fixed;
  z-index: 9500;
  width: 220px;
  height: 307px;
  display: none;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.75);
}
#bigCard.bc-show {
  display: block;
}
#dockRight #bigCard.bc-docked {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
  width: 100%;
  height: auto;
  aspect-ratio: 104 / 145;
  margin: 0;
  box-shadow: none;
  border: 1px solid var(--c-border-subtle);
  border-radius: 8px;
}
#dockRight #bigCard.bc-docked.bc-show {
  display: block;
}
#dockRight:has(#bigCard.bc-docked.bc-show) {
  padding: 10px;
}
#inspector[data-mode=float] .insp-head {
  cursor: grab;
}
#inspector.dragging,
#bigCard.dragging {
  cursor: grabbing;
  user-select: none;
}
body.scrubbing #inspector,
body.scrubbing #bigCard {
  pointer-events: none;
}
#bigCard .bc-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
#bigCard .bc-code {
  position: absolute;
  top: 7px;
  left: 9px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--mono);
  text-shadow: 0 1px 2px #000;
}
#bigCard .bc-name {
  position: absolute;
  bottom: 88px;
  left: 9px;
  right: 9px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px #000;
}
#bigCard .bc-stats {
  position: absolute;
  bottom: 68px;
  left: 9px;
  right: 9px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}
#bigCard .bc-stats span.bc-stat-mod {
  color: var(--c-game-buff);
  text-shadow: 0 1px 2px #000, 0 0 7px color-mix(in srgb, var(--c-game-buff) 55%, transparent);
}
#bigCard .bc-acts {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#bigCard .bc-acts button {
  width: 100%;
  text-align: center;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(20, 22, 27, 0.88);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text-hi);
  cursor: pointer;
  font-size: 12px;
}
#bigCard .bc-acts button.atk {
  background: rgba(58, 36, 48, 0.92);
  border-color: #7d3350;
  color: #ff9db4;
}
#bigCard {
  pointer-events: none;
}
#bigCard .bc-acts,
#bigCard .bc-acts button {
  pointer-events: auto;
}
#cardDetailV2 {
  position: fixed;
  z-index: 9500;
  display: none;
  overflow: hidden;
  border-radius: 11px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .6);
  cursor: grab;
  touch-action: none;
}
#cardDetailV2.cd-show {
  display: block;
}
#cardDetailV2.dragging,
#cardDetailV2.resizing {
  cursor: grabbing;
  user-select: none;
}
body.scrubbing #cardDetailV2 {
  pointer-events: none;
}
#cardDetailV2.cd-peek-in {
  animation: cdPeekIn var(--t-fade-snap) ease-out both;
}
@keyframes cdPeekIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#cardDetailV2.cd-fading {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cd-fade-out, var(--t-fade-fast)) ease;
}
.cd.info {
  width: 330px;
  background: var(--glass-bg);
  border: 1px solid #ffffff2b;
  backdrop-filter: blur(11px) saturate(1.12);
  -webkit-backdrop-filter: blur(11px) saturate(1.12);
}
.cd .cd-top {
  display: flex;
  gap: calc(11px * var(--cd-scale,1));
  padding: calc(11px * var(--cd-scale,1));
}
.cd .cd-art {
  flex: 0 0 calc(92px * var(--cd-scale,1));
  width: calc(92px * var(--cd-scale,1));
  aspect-ratio: 63/88;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  position: relative;
  container-type: inline-size;
}
.cd .cd-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-tools {
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card-view-chip {
  order: 0;
}
.card-help-chip {
  order: 1;
}
.card-bug-chip {
  order: 2;
}
:is(.card-view-chip, .card-help-chip, .card-bug-chip):not(.gcg-ico) {
  background: color-mix(in srgb, var(--c-ink-dark) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-white) 33%, transparent);
  border-radius: 5px;
  color: var(--c-white);
  line-height: 0;
  padding: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card-view-chip .gcg-tbi,
.card-help-chip .gcg-tbi,
.card-bug-chip .gcg-tbi {
  display: block;
  width: 13px;
  height: 13px;
}
:is(.card-view-chip, .card-help-chip, .card-bug-chip):not(.gcg-ico):is(:hover, .act-pressed, :active) {
  background: var(--c-ink-dark);
  border-color: var(--c-white);
}
.card-tools .ct-label {
  display: none;
}
.wl-heart {
  order: 1;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  color: var(--c-text-dim);
  --wl-h: 24px;
}
.wl-heart button {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wl-heart .wl-heart-main {
  position: relative;
  width: var(--wl-h);
  height: var(--wl-h);
  color: var(--c-text-hi);
}
.wl-heart-main .wl-heart-ico {
  display: block;
  width: 100%;
  height: 100%;
}
.wl-heart.on .wl-heart-main {
  color: var(--c-accent);
}
.wl-heart-n {
  position: absolute;
  inset: 0 0 8% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 10px/1 var(--font-body);
  color: var(--c-on-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  pointer-events: none;
}
.wl-heart-n:empty {
  display: none;
}
.wl-heart :is(.wl-heart-dn, .wl-heart-up) {
  width: 16px;
  height: var(--wl-h);
}
.wl-heart :is(.wl-heart-dn, .wl-heart-up) .gcg-tbi {
  display: block;
  width: 14px;
  height: 14px;
}
.wl-heart :is(.wl-heart-dn, .wl-heart-up):disabled {
  opacity: .28;
  cursor: default;
}
.wl-heart button:not(:disabled):hover {
  color: var(--c-text-hi);
}
.wl-heart .wl-heart-main:not(:disabled):hover {
  color: var(--c-accent);
}
.wl-heart button:not(:disabled):active {
  translate: 0 1px;
}
.duo-art > .card-tools > .wl-heart {
  --wl-h: 22px;
  filter: drop-shadow(0 1px 2px var(--c-ink-dark));
}
.duo-art > .card-tools > .wl-heart :is(.wl-heart-dn, .wl-heart-up) {
  display: none;
}
.duo-buy.duo-actions {
  --ct-h: 26px;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.duo-actions > .card-tools {
  display: contents;
}
.duo-actions .tcg-buy {
  order: 0;
  height: var(--ct-h);
}
.duo-actions .wl-heart {
  --wl-h: var(--ct-h);
}
.duo-actions .card-help-chip {
  order: 3;
}
.duo-actions .card-bug-chip {
  order: 4;
}
.duo-actions .gcg-ico {
  width: var(--ct-h);
  height: var(--ct-h);
}
.duo-actions .gcg-ico .gcg-tbi {
  display: block;
  width: 14px;
  height: 14px;
}
.card-tools.cd-tray {
  position: static;
  translate: none;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 4px 0;
  --ct-h: 30px;
  cursor: default;
}
#cardDetailV2.cd-tray-open > .card-tools.cd-tray {
  display: flex;
}
#cardDetailV2.art.cd-tray-open {
  overflow: visible;
  box-shadow: none;
}
#cardDetailV2.art.cd-tray-open > .big {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--c-ink-dark) 60%, transparent);
}
#cardDetailV2.art.cd-tray-open,
#cardDetailV2.art.cd-tray-open > .card-tools.cd-tray {
  pointer-events: none;
}
body:not(.scrubbing) #cardDetailV2.art.cd-tray-open > :not(.cd-tray),
body:not(.scrubbing) #cardDetailV2.art.cd-tray-open > .cd-tray > * {
  pointer-events: auto;
}
.cd-tray .gcg-ico {
  width: var(--ct-h);
  height: var(--ct-h);
}
.cd-tray .gcg-ico .gcg-tbi {
  display: block;
  width: 16px;
  height: 16px;
}
.cd-tray .wl-heart {
  --wl-h: var(--ct-h);
}
.cd-tray .card-view-chip {
  order: 0;
}
.cd-tray .wl-heart {
  order: 1;
}
.cd-tray .card-help-chip {
  order: 2;
}
.cd-tray .card-bug-chip {
  order: 3;
}
.cd-tray-btn.gcg-ico {
  position: absolute;
  top: 7%;
  right: 4px;
  z-index: 6;
  width: 30px;
  height: 30px;
}
.cd-tray-btn .gcg-tbi {
  display: block;
  width: 16px;
  height: 16px;
}
[data-help] {
  cursor: help;
}
html.help-tips-off [data-help] {
  cursor: inherit;
}
.help-pop {
  position: fixed;
  z-index: 12000;
  display: none;
  max-width: 320px;
  box-sizing: border-box;
  padding: 9px 11px 10px;
  border-radius: var(--r-md, 8px);
  background: var(--c-panel-2);
  border: 1px solid var(--c-border);
  box-shadow: 0 8px 24px #0009;
  color: var(--c-text);
  font-size: calc(12px * var(--fs-body, 1));
  line-height: 1.45;
}
.help-pop.help-show {
  display: block;
}
.help-pop.pinned {
  max-height: 70vh;
  overflow-y: auto;
}
.help-pop-kind {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.help-pop-term {
  font-size: 13px;
  font-weight: 800;
  color: var(--c-text-hi);
  margin: 1px 0 4px;
}
.help-pop-gloss {
  color: var(--c-text-dim);
}
.help-pop-acts {
  margin-top: 8px;
  display: flex;
  gap: 10px;
}
.help-pop-link {
  color: var(--c-ctx);
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}
.help-pop-link .gcg-tbi {
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.1em;
}
.help-pop-link:hover {
  color: var(--c-success);
  text-decoration: underline;
}
.help-pop-row {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--c-border-subtle);
}
.help-pop-rowhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: space-between;
}
.help-pop-rowterm {
  font-weight: 800;
  color: var(--c-text-bright);
}
.help-pop-rowgloss {
  color: var(--c-text-dim);
}
.duo-text {
  position: relative;
}
.cd .cd-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(7px * var(--cd-scale,1));
}
.cd .name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: space-between;
}
.cd .name {
  font-size: calc(16px * var(--cd-scale,1));
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  min-width: 0;
}
.cd .code {
  font-size: calc(10px * var(--cd-scale,1));
  color: var(--c-text-subtle);
  font-family: var(--mono);
  white-space: nowrap;
}
.cd .type-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cd .cbadge {
  width: calc(16px * var(--cd-scale,1));
  height: calc(16px * var(--cd-scale,1));
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: calc(10px * var(--cd-scale,1));
  font-weight: 800;
  color: #fff;
  flex: 0 0 auto;
}
.cd .type {
  font-size: calc(10px * var(--cd-scale,1));
  font-weight: 800;
  letter-spacing: 1.1px;
  color: var(--c-text);
  flex: 0 0 auto;
}
.cd .setname {
  font-size: calc(10px * var(--cd-scale,1));
  color: var(--c-text-subtle);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd .stats {
  display: flex;
  gap: calc(5px * var(--cd-scale,1));
}
.cd .stat {
  flex: 1;
  background: var(--c-panel-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: 5px;
  padding: calc(3px * var(--cd-scale,1)) 0;
  text-align: center;
  min-width: 0;
}
.cd .stat .k {
  display: block;
  font-size: calc(8px * var(--cd-scale,1));
  letter-spacing: .5px;
  color: var(--c-text-subtle);
  font-weight: 700;
}
.cd .stat .v {
  font-size: calc(14px * var(--cd-scale,1));
  font-weight: 800;
  color: var(--c-text-hi);
}
.cd .stat.ap .v {
  color: #ffd7b0;
}
.cd .stat.hp .v {
  color: #b8e6c0;
}
.cd .tags {
  font-size: calc(11px * var(--cd-scale,1));
  color: var(--c-text-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
}
.cd .tags b {
  color: var(--c-text);
  font-weight: 700;
}
.cd .cd-effect {
  padding: calc(9px * var(--cd-scale,1)) calc(11px * var(--cd-scale,1)) calc(11px * var(--cd-scale,1));
  border-top: 1px solid var(--c-border-subtle);
  touch-action: none;
  font-size: calc(12.5px * var(--cd-scale,1));
  line-height: 1.46;
  color: var(--c-text);
  max-height: 42vh;
  overflow-y: auto;
}
#bigCard .bc-acts button.sel,
.insp-actions button.sel,
.duo-acts button.sel {
  background: rgba(30, 58, 42, .92);
  border-color: #3a7d55;
  color: #9de8b6;
}
#bigCard .bc-acts button,
.insp-actions button,
.duo-acts button {
  transition: box-shadow .1s, filter .1s;
}
#bigCard .bc-acts button:hover,
.insp-actions button:hover,
.duo-acts button:hover {
  filter: saturate(1.3) brightness(1.05);
  box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgba(255, 255, 255, .5);
  border-color: #fff;
}
.cd.art {
  width: 236px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.cd.art .big {
  width: 100%;
  aspect-ratio: 63/88;
  background: #000;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  container-type: inline-size;
}
.cd.art .big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#cardDetailV2 .cd-rez {
  position: absolute;
  z-index: 5;
  touch-action: none;
}
#cardDetailV2 .cd-rez-n {
  top: -4px;
  left: 14px;
  right: 14px;
  height: 9px;
  cursor: ns-resize;
}
#cardDetailV2 .cd-rez-s {
  bottom: -4px;
  left: 14px;
  right: 14px;
  height: 9px;
  cursor: ns-resize;
}
#cardDetailV2 .cd-rez-e {
  top: 14px;
  bottom: 14px;
  right: -4px;
  width: 9px;
  cursor: ew-resize;
}
#cardDetailV2 .cd-rez-w {
  top: 14px;
  bottom: 14px;
  left: -4px;
  width: 9px;
  cursor: ew-resize;
}
#cardDetailV2 .cd-rez-ne {
  top: -4px;
  right: -4px;
  width: 15px;
  height: 15px;
  cursor: nesw-resize;
}
#cardDetailV2 .cd-rez-nw {
  top: -4px;
  left: -4px;
  width: 15px;
  height: 15px;
  cursor: nwse-resize;
}
#cardDetailV2 .cd-rez-se {
  bottom: -4px;
  right: -4px;
  width: 15px;
  height: 15px;
  cursor: nwse-resize;
}
#cardDetailV2 .cd-rez-sw {
  bottom: -4px;
  left: -4px;
  width: 15px;
  height: 15px;
  cursor: nesw-resize;
}
#cdModSide {
  position: fixed;
  z-index: 9500;
  display: none;
  pointer-events: none;
  max-width: 168px;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--c-text-hi);
  text-shadow: var(--gcg-count-glow);
}
#cdModSide.on {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#cdModSide.left {
  text-align: right;
  align-items: flex-end;
}
#cdModSide.under {
  max-width: none;
}
#cdModSide .passive-row {
  padding: 0;
}
#cdModSide .passive-src {
  font-weight: 600;
}
#cdModSide .lz-ability {
  text-shadow: none;
}
.cd.cd-docked {
  position: relative;
  display: block;
  width: auto;
  max-width: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: default;
  overflow: visible;
}
.cd.cd-docked .cd-top {
  padding: 0 0 9px;
}
.cd.cd-docked .cd-effect {
  max-height: none;
}
.cd.cd-docked.art {
  width: auto;
}
.cd.cd-docked.art .big {
  max-width: 100%;
}
#inspector .card-viewer-content {
  flex-direction: column;
  align-items: stretch;
  padding: calc(6px * var(--gcg-ui-density));
  gap: calc(8px * var(--gcg-ui-density));
  overflow-x: hidden;
  position: relative;
}
#inspector .card-viewer-content .card-preview {
  width: 100%;
  aspect-ratio: 63/88;
  min-height: 0;
  max-height: none;
  flex: 0 0 auto;
}
#inspector .card-viewer-content .card-stats,
#inspector .card-viewer-content .card-effect,
#inspector .card-viewer-content .card-passives {
  width: 100%;
  min-width: 0;
}
.insp-actions {
  display: flex;
  gap: calc(6px * var(--gcg-ui-density));
  flex-wrap: wrap;
  margin-top: calc(6px * var(--gcg-ui-density));
  padding: 0 calc(10px * var(--gcg-ui-density)) calc(10px * var(--gcg-ui-density));
  flex-shrink: 0;
}
.insp-actions button {
  flex: 1;
  text-align: center;
  font-weight: 700;
  padding: max(5px, calc(7px * var(--gcg-ui-density))) calc(10px * var(--gcg-ui-density));
  border-radius: 6px;
  background: var(--c-panel-2);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text-hi);
  cursor: pointer;
  font-size: calc(12px * var(--fs-body, 1));
}
.insp-actions button.atk {
  background: #3a2430;
  border-color: #7d3350;
  color: #ff9db4;
}
.card-viewer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10px * var(--gcg-ui-density));
  padding: calc(14px * var(--gcg-ui-density));
  overflow-y: auto;
}
.card-preview {
  width: 100%;
  aspect-ratio: 104 / 145;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--c-border-subtle);
  position: relative;
  flex-shrink: 0;
}
.card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-preview .card-fallback {
  font-size: calc(12px * var(--fs-body, 1));
}
.card-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--gcg-ui-density));
}
.card-core-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(4px * var(--gcg-ui-density));
}
.card-core-stat {
  padding: calc(5px * var(--gcg-ui-density)) calc(4px * var(--gcg-ui-density));
  background: var(--c-panel-2);
  border-radius: 4px;
  text-align: center;
  font-size: calc(10px * var(--fs-body, 1));
}
.card-core-stat b {
  display: block;
  color: var(--c-text-subtle);
  font-size: calc(9px * var(--fs-body, 1));
  line-height: 1;
  margin-bottom: calc(3px * var(--gcg-ui-density));
  text-transform: uppercase;
}
.card-core-stat span {
  color: var(--c-text-bright);
  font-size: calc(12px * var(--fs-body, 1));
  font-weight: 700;
  line-height: 1;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  font-size: calc(11px * var(--fs-body, 1));
  padding: calc(4px * var(--gcg-ui-density)) calc(8px * var(--gcg-ui-density));
  background: var(--c-panel-2);
  border-radius: 3px;
}
.stat-label {
  color: var(--c-text-subtle);
}
.stat-value {
  font-weight: 600;
  color: var(--c-text-bright);
}
.card-effect {
  width: 100%;
  font-size: calc(11px * var(--fs-body, 1));
  color: var(--c-text);
  line-height: 1.6;
  padding: calc(8px * var(--gcg-ui-density));
  background: var(--c-panel-2);
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-word;
}
.duo-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.duo-ctrls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.duo-ctrls button {
  padding: calc(3px * var(--gcg-ui-density)) calc(8px * var(--gcg-ui-density));
  height: max(22px, calc(24px * var(--gcg-ui-density)));
  line-height: 1;
  font-size: calc(11px * var(--fs-body, 1));
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  background: var(--c-panel-3);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  color: var(--c-text-dim);
}
.duo-ctrls button.on {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 700;
}
.duo-ctrls > button {
  width: max(24px, calc(26px * var(--gcg-ui-density)));
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 700;
  color: var(--c-text-hi);
}
.duo-seg {
  display: inline-flex;
  margin-left: 4px;
  border: 1px solid var(--c-border);
  border-radius: 5px;
  overflow: hidden;
}
.duo-seg button {
  border: 0;
  border-radius: 0;
}
.duo-seg button + button {
  border-left: 1px solid var(--c-border);
}
.duo-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.duo-art,
.duo-text {
  aspect-ratio: 63 / 88;
  width: min(100%, var(--duo-zoom, 210px));
}
.duo-art {
  container-type: inline-size;
}
.duo-panel.no-art .duo-art {
  display: none;
}
.duo-panel.no-text .duo-text {
  display: none;
}
.duo-art {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--c-border-subtle);
  flex-shrink: 0;
}
.duo-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.duo-art .card-fallback {
  font-size: 12px;
}
.duo-text {
  container-type: inline-size;
  background: var(--c-panel-2);
  border: 1px solid var(--c-border-subtle);
  border-radius: 6px;
  overflow: hidden;
}
.duo-in {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: clamp(8px, 5.6cqw, 13px);
  color: var(--c-text);
}
.duo-head {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  padding: 4% 5% 0;
}
.duo-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  background: var(--c-ctrl-2);
  border-radius: 0.35em;
  padding: 0.3em 0.55em;
}
.duo-stat b {
  font-size: 0.62em;
  line-height: 1;
  color: var(--c-text-subtle);
  text-transform: uppercase;
}
.duo-stat span {
  font-size: 0.95em;
  line-height: 1;
  font-weight: 700;
  color: var(--c-text-bright);
}
.duo-code {
  margin-left: auto;
  text-align: right;
  font-size: 0.7em;
  line-height: 1.35;
  color: var(--c-text-dim);
  font-family: var(--mono);
}
.duo-ident {
  padding: 4% 5%;
}
.duo-type {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.8em;
  color: var(--c-text-dim);
  margin-bottom: 0.35em;
}
.duo-color-dot {
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  font-weight: 800;
  color: #fff;
}
.duo-color-dot.White {
  color: #222;
}
.duo-name {
  font-weight: 800;
  color: var(--c-text-bright);
  font-size: 1.25em;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.duo-name.long {
  font-size: 1.02em;
}
.duo-effect {
  margin: 0 4%;
  padding: 3% 4%;
  background: var(--c-field);
  border-radius: 0.35em;
  flex: 1 1 auto;
  min-height: 4.2em;
  overflow-y: auto;
  font-size: 0.92em;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.duo-effect .lz-ability,
.duo-effect [class^=lz-],
.duo-effect [class*=" lz-"] {
  font-size: 0.92em;
}
.duo-foot {
  display: flex;
  align-items: flex-end;
  gap: 0.5em;
  padding: 3% 4% 4%;
}
.duo-tls {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.duo-tl {
  font-size: 0.75em;
  color: var(--c-text-dim);
  display: flex;
  gap: 0.45em;
  align-items: baseline;
}
.duo-tl-label {
  text-transform: uppercase;
  font-size: 0.85em;
  color: var(--c-text-subtle);
  flex-shrink: 0;
}
.duo-tl > span:last-child {
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.duo-buy {
  padding: 0 4% 4%;
  display: flex;
  justify-content: flex-start;
}
.tcg-buy {
  width: auto;
  box-sizing: border-box;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.duo-buy .tcg-buy {
  padding: 3px 9px;
  min-height: 0;
  line-height: 1.3;
}
.tcg-buy-price {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--c-text-hi);
  white-space: nowrap;
}
.tcg-price-display {
  font-variant-numeric: tabular-nums;
  color: var(--c-text-hi);
}
.cd .type-row .tcg-price-display {
  margin-left: auto;
}
.cd .type-row .tcg-buy--mini .tcg-buy-price {
  font-size: calc(10px * var(--cd-scale,1));
}
.cd .type-row .tcg-buy--mini {
  margin-left: calc(6px * var(--cd-scale,1));
  flex: 0 0 auto;
  width: auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: calc(4px * var(--cd-scale,1));
  padding: calc(2px * var(--cd-scale,1)) calc(8px * var(--cd-scale,1));
  font-size: calc(10px * var(--cd-scale,1));
  font-weight: 700;
  line-height: 1.3;
  border-radius: 5px;
}
.cd .type-row .tcg-buy--mini .tcg-buy-ico {
  width: 1.1em;
  height: 1.1em;
}
.tcg-buy-ico {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: auto;
}
.duo-acts {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.duo-acts button {
  width: 100%;
  text-align: center;
  font-weight: 700;
  padding: max(5px, calc(7px * var(--gcg-ui-density))) calc(10px * var(--gcg-ui-density));
  border-radius: 6px;
  background: rgba(20, 22, 27, 0.88);
  border: 1px solid var(--c-border-strong);
  color: var(--c-text-hi);
  cursor: pointer;
  font-size: calc(12px * var(--fs-body, 1));
}
.duo-acts button.atk {
  background: rgba(58, 36, 48, 0.92);
  border-color: #7d3350;
  color: #ff9db4;
}
.duo-in .duo-acts {
  position: static;
  padding: 0 4% 4%;
}
.duo-text.duo-flat {
  aspect-ratio: auto;
}
.duo-flat.duo-in,
.duo-flat .duo-in {
  height: auto;
}
.duo-flat .duo-head {
  align-items: center;
}
.duo-flat .duo-stats {
  display: inline-flex;
  gap: 0.4em;
  flex: 0 0 auto;
}
.duo-flat .duo-type {
  margin: 0 auto;
}
.duo-flat .duo-code {
  margin-left: 0;
}
.duo-flat .duo-ident {
  padding-top: 0.6em;
}
.duo-flat .duo-name {
  text-align: center;
}
.duo-flat .duo-effect {
  flex: 0 0 auto;
  min-height: 0;
}
.card-effect .burst-tag {
  color: var(--c-danger-2);
  font-weight: 700;
}
.lab-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  gap: 8px;
}
.lab-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.lab-bar button {
  background: var(--c-ctrl-3);
  border: 1px solid var(--c-border);
  color: var(--c-text-bright);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.lab-bar button:hover {
  background: var(--c-ctrl-hi);
}
.lab-sep {
  color: var(--c-text-muted);
  margin-left: 6px;
}
.lab-status {
  color: var(--c-edit);
  margin-left: auto;
  font-family: var(--mono);
}
.lab-board {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lab-prow {
  border: 1px solid var(--c-border-subtle);
  border-radius: 5px;
  padding: 6px;
}
.lab-prow.p1 {
  background: color-mix(in srgb, var(--p1) 9%, #0d0f13);
}
.lab-prow.p2 {
  background: color-mix(in srgb, var(--p2) 9%, #0d0f13);
}
.lab-prow-head {
  font-size: 12px;
  color: var(--c-text-dim);
  margin-bottom: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.lab-slots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.lab-slot {
  width: 72px;
  min-height: 96px;
  border: 1px dashed var(--c-border-subtle);
  border-radius: 4px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--c-text-muted);
}
.lab-slot.filled {
  border-style: solid;
  border-color: #4a4a4a;
}
.lab-slot.tapped {
  transform: rotate(8deg);
  opacity: .85;
}
.lab-slot img {
  width: 100%;
  border-radius: 3px;
}
.lab-slot .lab-cardname {
  font-size: 9px;
  color: var(--c-text);
  text-align: center;
  padding: 1px;
  line-height: 1.1;
}
.lab-slot .lab-stat {
  font-size: 9px;
  color: var(--c-edit);
}
.lab-slot .lab-ops {
  position: absolute;
  top: 1px;
  right: 1px;
  display: flex;
  gap: 2px;
}
.lab-slot .lab-ops button {
  font-size: 10px;
  line-height: 1;
  padding: 1px 4px;
  background: #000a;
  border: 1px solid var(--c-border-strong);
  color: var(--c-white);
  border-radius: 3px;
  cursor: pointer;
}
.lab-add {
  font-size: 20px;
  color: var(--c-border-strong);
  cursor: pointer;
  background: none;
  border: none;
}
.lab-add:hover {
  color: var(--c-edit);
}
.lab-hand {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.lab-handcard {
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 2px;
  width: 64px;
  font-size: 9px;
  text-align: center;
}
.lab-handcard img {
  width: 100%;
  border-radius: 3px;
}
.lab-handcard button,
.lab-slot .lab-act {
  font-size: 10px;
  padding: 1px 4px;
  cursor: pointer;
  background: color-mix(in srgb, var(--c-commit) 18%, var(--c-panel-2));
  border: 1px solid color-mix(in srgb, var(--c-commit) 27%, var(--c-border));
  color: color-mix(in srgb, var(--c-commit) 18%, #fff);
  border-radius: 3px;
  margin-top: 2px;
}
.picker-modal-box {
  position: relative;
  width: 836px;
  max-width: min(94vw, 836px);
  overflow: visible !important;
}
.picker-dm-host {
  display: none;
  height: min(78vh, 820px);
  min-height: 420px;
  overflow: hidden;
}
#cardPickerModal.uses-shared-pool .picker-dm-host {
  display: block;
}
#cardPickerModal.uses-shared-pool .picker-toolbar-row,
#cardPickerModal.uses-shared-pool .picker-modal-box > .modal-body {
  display: none;
}
#cardPickerModal .dm-card-pool-mount {
  width: 100%;
  height: 100%;
}
#cardPickerModal .dm-card-pool-mount #dmBody {
  display: flex;
  height: 100%;
}
#cardPickerModal .dm-card-pool-mount #dmMain {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
#cardPickerModal .dm-card-pool-mount #dmToolRow,
#cardPickerModal .dm-card-pool-mount #dmCriteria,
#cardPickerModal .dm-card-pool-mount #dmMeta,
#cardPickerModal .dm-card-pool-mount #dmList,
#cardPickerModal .dm-card-pool-mount #dmCardDetail,
#cardPickerModal .dm-card-pool-mount #dmRightSlot,
#cardPickerModal .dm-card-pool-mount #dmStripGrip,
#cardPickerModal .dm-card-pool-mount #dmPanelStrip,
#cardPickerModal .dm-card-pool-mount #dmActionBar,
#cardPickerModal .dm-card-pool-mount #dmAssignFooter {
  display: none !important;
}
#cardPickerModal.uses-docked-detail {
  right: 0;
  background: transparent;
  pointer-events: none;
}
#cardPickerModal.uses-docked-detail::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--dock-w) + var(--shell-pad) + var(--shell-pad)) 0 0;
  background: var(--scrim);
  pointer-events: auto;
}
#cardPickerModal.uses-docked-detail .picker-modal-box {
  width: 836px;
  max-width: calc(100vw - var(--dock-w) - 34px);
  z-index: 1;
  pointer-events: auto;
}
#cardPickerModal.uses-docked-detail .picker-detail-col {
  display: none;
}
.picker-modal-box .modal-body {
  overflow: hidden;
  border-radius: 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px);
}
.picker-toolbar-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  padding: 6px 12px;
  background: var(--panel-bg-2);
  border-bottom: 1px solid var(--c-border-subtle);
  flex-shrink: 0;
}
.picker-all-filters {
  display: none;
  position: absolute;
  z-index: 2300;
  top: calc(100% + 4px);
  left: 12px;
  right: 12px;
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  background: var(--glass-modal-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
}
.picker-all-filters.open {
  display: flex;
}
.picker-showing {
  margin-left: auto;
  color: var(--c-text-dim);
  font-size: 11px;
  white-space: nowrap;
}
.picker-columns-label {
  color: var(--c-text-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.picker-toolbar-row .gcg-search {
  flex: 3;
  min-width: 180px;
}
.picker-toolbar-row input[type=text] {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
}
.picker-toolbar-row select {
  height: 30px;
  box-sizing: border-box;
}
.picker-toolbar-row select.picker-sort-sm {
  width: 84px;
  font-size: calc(11px * var(--fs-body, 1));
}
.picker-filter {
  position: relative;
}
.picker-filter-btn {
  height: 30px;
  box-sizing: border-box;
  padding: 0 10px;
  background: var(--ctrl-face);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: calc(12px * var(--fs-body, 1));
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.picker-filter-btn:hover {
  background: var(--ctrl-face-hover);
  border-color: var(--c-text-faint);
}
.card-picker-item {
  position: relative;
}
.card-review-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(12px * var(--fs-body, 1));
  font-weight: 800;
  color: #fff;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.card-review-badge.passed {
  background: #2f9c4f;
}
.card-review-badge.failed {
  background: #c0444c;
}
.card-review-actions {
  display: flex;
  gap: 8px;
  margin: 8px 0 2px;
  width: 100%;
  box-sizing: border-box;
}
.card-review-btn {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 700;
  border: 1px solid var(--c-border);
  background: var(--c-panel-3);
  color: var(--c-text);
}
.card-review-btn.pass:hover,
.card-review-btn.pass.active {
  background: color-mix(in srgb, var(--c-commit) 17%, var(--c-panel-2));
  border-color: color-mix(in srgb, var(--c-commit) 35%, var(--c-border));
  color: color-mix(in srgb, var(--c-commit) 47%, #fff);
}
.card-review-btn.fail:hover,
.card-review-btn.fail.active {
  background: color-mix(in srgb, var(--c-danger) 17%, var(--c-panel-2));
  border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-border));
  color: color-mix(in srgb, var(--c-danger) 47%, #fff);
}
.picker-filter-menu {
  display: none;
  position: absolute;
  z-index: 2100;
  top: calc(100% + 4px);
  left: 0;
  min-width: 150px;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.picker-filter.open .picker-filter-menu {
  display: block;
}
.picker-advanced-menu {
  width: min(680px, 78vw);
  max-height: min(62vh, 520px);
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  padding: 10px;
}
.picker-filter.open .picker-advanced-menu {
  display: grid;
}
.picker-advanced-group {
  min-width: 0;
}
.picker-advanced-title {
  color: var(--c-text-faint);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 3px 5px;
  border-bottom: 1px solid var(--c-border-subtle);
  margin-bottom: 3px;
}
.picker-filter-option {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 3px;
  color: var(--c-text-bright);
  font-size: calc(12px * var(--fs-body, 1));
  cursor: pointer;
}
.picker-filter-option input {
  width: auto;
  margin: 0;
  cursor: pointer;
}
.picker-sort-dir {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  background: var(--ctrl-face);
  color: var(--c-text-hi);
  cursor: pointer;
  flex-shrink: 0;
}
.picker-sort-dir:hover {
  background: var(--ctrl-face-hover);
  border-color: var(--c-text-faint);
}
.picker-sort-dir::before {
  content: "";
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(2px) rotate(45deg);
}
.picker-sort-dir[data-dir=desc]::before {
  transform: translateY(-2px) rotate(225deg);
}
.picker-col-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: calc(11px * var(--fs-body, 1));
  color: var(--c-text-muted);
  flex-shrink: 0;
}
.picker-col-zoom input[type=range] {
  width: 70px;
  accent-color: var(--c-success);
  cursor: pointer;
}
.picker-col-zoom span {
  min-width: 14px;
  text-align: center;
  color: var(--c-text-dim);
}
.picker-card-area {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 10px;
}
.card-picker-grid {
  display: grid;
  grid-template-columns: repeat(var(--picker-cols,8), minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}
.card-picker-item {
  cursor: pointer;
  border: 1px solid var(--c-border-subtle);
  border-radius: 4px;
  position: relative;
  aspect-ratio: 104/145;
  overflow: hidden;
  background: var(--c-panel-2);
  container-type: inline-size;
}
.card-picker-item:hover {
  border-color: var(--c-edit);
  box-shadow: 0 0 8px color-mix(in srgb, var(--c-edit) 35%, transparent);
}
.card-picker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}
.card-picker-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .78);
  padding: 2px 3px;
  font-size: calc(8px * var(--fs-body, 1));
  line-height: 1.2;
  color: var(--c-text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-picker-plus {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-edit);
  color: var(--c-on-accent);
  font-size: calc(16px * var(--fs-body,1));
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  transition: opacity .1s;
  pointer-events: none;
}
.card-picker-count {
  position: absolute;
  top: 4px;
  left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: rgba(0, 0, 0, .82);
  color: #fff;
  font-size: calc(12px * var(--fs-body, 1));
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 3px #000;
}
.card-picker-item:hover .card-picker-plus {
  opacity: 1;
}
.picker-detail-col {
  display: none;
}
.picker-detail-col .card-viewer-content {
  flex: 1;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .picker-toolbar-row {
    flex-wrap: wrap;
  }
  .picker-toolbar-row .gcg-search {
    flex: 1 0 calc(100% - 12px);
  }
  .picker-advanced-menu {
    position: fixed;
    left: 5vw;
    right: 5vw;
    top: 17vh;
    width: auto;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .picker-showing,
  .picker-columns-label {
    display: none;
  }
}
.picker-close {
  margin-left: auto;
  font-size: calc(20px * var(--fs-body, 1));
  line-height: 1;
}
.lab-emptyslot {
  width: 94px;
  height: 131px;
  flex-shrink: 0;
  border: 1px solid var(--c-edit);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--c-edit);
  cursor: pointer;
  opacity: .5;
}
.lab-emptyslot:hover {
  opacity: 1;
  background-color: color-mix(in srgb, var(--c-edit) 13%, transparent);
}
.play-area.lab-play-clickable {
  cursor: pointer;
}
.play-area.lab-play-clickable:hover {
  background: transparent;
}
.hand-row.lab-hand-clickable:hover {
  background: transparent;
}
.lab-ctl {
  position: absolute;
  z-index: 30;
  display: flex;
  gap: 3px;
  background: #000b;
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  padding: 2px;
}
.lab-ctl button {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--c-ctrl-3);
  border: 1px solid var(--c-border);
  color: var(--c-text-hi);
  border-radius: 3px;
  cursor: pointer;
}
.lab-ctl button:hover {
  background: var(--c-ctrl-hi);
}
#playScreen .board {
  position: relative;
}
.match-preset-row {
  margin-bottom: 8px;
}
.match-preset-select {
  width: 100%;
}
.match-preset-select optgroup {
  background: var(--c-panel-2);
  color: var(--c-text-dim);
  font-weight: 600;
}
.lab-mode-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.lab-mode-toggle button {
  flex: 1;
  padding: 6px 4px;
  background: var(--c-panel-2);
  border: 1px solid var(--c-border-subtle);
  color: var(--c-text-dim);
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.lab-mode-toggle button:hover {
  background: var(--c-ctrl-3);
}
.lab-mode-toggle button[data-mode=EDIT].active {
  --c-toggle-on:var(--c-edit);
  background: color-mix(in srgb, var(--c-toggle-on) 20%, var(--c-panel-2));
  border-color: color-mix(in srgb, var(--c-toggle-on) 45%, var(--c-border));
  color: color-mix(in srgb, var(--c-toggle-on) 30%, #fff);
  font-weight: 600;
}
.lab-mode-toggle button[data-mode=PLAY].active {
  background: color-mix(in srgb, var(--c-toggle-on) 20%, var(--c-panel-2));
  border-color: color-mix(in srgb, var(--c-toggle-on) 45%, var(--c-border));
  color: color-mix(in srgb, var(--c-toggle-on) 30%, #fff);
  font-weight: 600;
}
#board.lab-play-mode .lab-emptyslot.lab-handadd {
  display: none;
}
#board.lab-play-mode .play-area.lab-play-clickable {
  cursor: default;
}
#board.lab-play-mode .play-area.lab-play-clickable:hover {
  background: transparent;
}
#board.lab-play-mode .lab-emptyslot {
  display: none;
}
#board.lab-play-mode .lab-edit-add-surface {
  display: none;
}
#board.lab-play-mode .hand-row.lab-hand-clickable:hover {
  background: transparent;
}
.lab-handcard-real {
  cursor: pointer;
}
#board.pb-active .lab-emptyslot.lab-handadd {
  display: none;
}
#board.pb-active .lab-edit-add-surface {
  display: none;
}
#board.pb-active .hand-row.lab-hand-clickable:hover {
  background: transparent;
}
#board.pb-active .play-area.lab-play-clickable {
  cursor: default;
}
#board.pb-active .play-area.lab-play-clickable,
#board.pb-active .play-area.lab-play-clickable:hover {
  background: transparent;
  border-color: var(--c-border);
}
#board.pb-active [data-slot].lab-emptyslot {
  display: none;
}
.pb-float.pinned {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  transform: scale(var(--ctx-scale, 1)) !important;
  transform-origin: 0 0;
  z-index: 500;
  cursor: default;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: var(--float-frame-pad);
}
.pb-float.pinned .pb-float-grip {
  display: none;
}
.pb-float.pinned .pb-actbtn.pb-pass-btn {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 10px 18px;
  width: 172px;
  box-sizing: border-box;
  min-height: 40px;
  border-radius: 8px;
}
.pb-float.pinned .pb-pass-btn.active {
  background: #1f7a3a;
  border-color: var(--c-ctx);
  color: #eafff0;
}
.pb-float.pinned .pb-pass-btn.active:hover {
  background: #26913f;
}
.pb-float {
  position: fixed;
  z-index: 600;
  display: none;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid #3a5a7a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  cursor: move;
  user-select: none;
}
.pb-float.docked {
  position: absolute;
  transform: none !important;
  z-index: 40;
  cursor: default;
  box-shadow: none;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 6px;
}
.pb-float.docked .pb-float-grip {
  display: none;
}
.pb-float-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  align-items: stretch;
}
.pb-float-row {
  display: contents;
}
.pb-morph-stack {
  display: contents;
}
.pb-float-grip {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b8299;
  font-size: 13px;
  cursor: move;
  padding: 0 1px;
}
.pb-float .pb-pass-btn.active.auto-next-countdown {
  background-color: #1f7a3a;
  background-image:
    linear-gradient(
      90deg,
      #26913f,
      #26913f);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition:
    box-shadow .15s,
    opacity .15s,
    filter .13s,
    transform .13s,
    background-size 1s linear;
}
.pb-float .pb-pass-btn.active.auto-next-countdown:hover {
  background-color: #26913f;
  background-image:
    linear-gradient(
      90deg,
      #32a64d,
      #32a64d);
}
.pb-float .pb-pass-btn.pvp-grace-fill,
.pb-float .pb-pass-btn.active.pvp-grace-fill,
.pb-float .pb-pass-btn.active.pvp-grace-fill:hover,
.pb-float .pb-pass-btn.pvp-bank-fill,
.pb-float .pb-pass-btn.active.pvp-bank-fill,
.pb-float .pb-pass-btn.active.pvp-bank-fill:hover {
  --pvp-fill-c: color-mix(in oklch, var(--c-ctx), var(--c-danger) calc(var(--pvp-heat, 0) * 100%));
  background-color: color-mix(in srgb, var(--pvp-fill-c) 68%, var(--c-app-bg));
  background-image:
    linear-gradient(
      90deg,
      var(--pvp-fill-c),
      var(--pvp-fill-c));
  background-position: left center;
  background-repeat: no-repeat;
  border-color: var(--pvp-fill-c);
  --glow: var(--pvp-fill-c);
  color: var(--c-app-bg);
  transition:
    box-shadow .15s,
    opacity .15s,
    filter .13s,
    transform .13s;
}
.pb-float .pb-pass-btn.pvp-grace-fill,
.pb-float .pb-pass-btn.pvp-bank-fill {
  background-size: 0% 100%;
}
.pb-float .pb-pass-btn.pvp-grace-fill:hover,
.pb-float .pb-pass-btn.pvp-bank-fill:hover,
.pb-float .pb-pass-btn.active.pvp-grace-fill:hover,
.pb-float .pb-pass-btn.active.pvp-bank-fill:hover {
  filter: brightness(1.12);
}
.pb-actbtn {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  background: color-mix(in srgb, var(--c-accent) 24%, var(--c-panel-2));
  border: 1px solid color-mix(in srgb, var(--c-accent) 41%, var(--c-border));
  color: color-mix(in srgb, var(--c-accent) 31%, #fff);
  font-weight: 600;
}
.pb-actbtn:hover {
  background: color-mix(in srgb, var(--c-accent) 40%, var(--c-panel-2));
}
.pb-mode-btn {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--c-panel-2);
  border: 1px solid var(--c-border-subtle);
  color: var(--c-text-dim);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.pb-mode-btn:hover {
  background: var(--c-ctrl-3);
}
.pb-mode-btn.active {
  background: color-mix(in srgb, var(--c-toggle-on) 20%, var(--c-panel-2));
  border-color: color-mix(in srgb, var(--c-toggle-on) 45%, var(--c-border));
  color: color-mix(in srgb, var(--c-toggle-on) 30%, #fff);
  --glow: color-mix(in srgb, var(--c-toggle-on) 45%, var(--c-border));
}
.pb-float.gameover-morph .pb-mode-btn {
  background: color-mix(in srgb, var(--c-accent) 24%, var(--c-panel-2));
  border-color: color-mix(in srgb, var(--c-accent) 41%, var(--c-border));
  color: color-mix(in srgb, var(--c-accent) 31%, #fff);
}
.pb-float.gameover-morph .pb-mode-btn:hover {
  background: color-mix(in srgb, var(--c-accent) 40%, var(--c-panel-2));
}
.pb-pass-btn {
  transition:
    box-shadow 0.15s,
    opacity 0.15s,
    filter 0.13s,
    transform 0.13s;
}
.pb-pass-btn.active {
  --glow: var(--c-ctx);
  animation: none;
}
.pb-pass-btn .pb-pass-clock {
  display: inline-block;
  min-width: 6.5ch;
  margin-left: .5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}
.pb-sub .pvp-strike-you {
  color: var(--p1, var(--c-accent));
}
.pb-sub .pvp-strike-them {
  color: var(--p2, var(--c-danger));
}
.pb-sub .pvp-strike-sep {
  color: var(--c-text-faint);
  margin: 0 .45ch;
}
.pb-sub .pvp-clock-deciding {
  filter: brightness(1.4);
  font-weight: 900;
}
.pb-sub .pvp-strikes {
  display: inline-flex;
  align-items: center;
  gap: .18em;
}
.pb-sub .pvp-strike {
  display: inline-flex;
}
.pb-sub .pvp-strike.spent {
  visibility: hidden;
}
.pb-sub .pvp-strike .gcg-tbi {
  width: 1.15em;
  height: 1.15em;
  display: block;
}
.pb-float.pinned .pb-sub.has-pvp-clock,
.pb-float.narrow-bottom .pb-sub.has-pvp-clock {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-float .pb-sub {
  display: none;
}
.pb-float.pinned .pb-sub {
  display: block;
  height: 12px;
  line-height: 12px;
  margin-top: -4px;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-align: center;
  color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-transform: uppercase;
  pointer-events: none;
}
.pb-pass-btn,
.pb-mode-btn {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  border-width: 1.5px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.pb-pass-btn::before,
.pb-mode-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: color-mix(in srgb, var(--glow, #4a6a8a) 80%, #000);
  pointer-events: none;
}
.pb-context-wrap {
  --context-ret-c: var(--c-ctx);
  position: relative;
  display: flex;
  width: 100%;
  overflow: visible;
}
.pb-context-wrap:has(> .pb-pass-btn.pvp-grace-fill),
.pb-context-wrap:has(> .pb-pass-btn.pvp-bank-fill) {
  --context-ret-c: color-mix(in oklch, var(--c-ctx), var(--c-danger) calc(var(--pvp-heat, 0) * 100%));
}
.pb-context-wrap:has(.pb-pass-btn.burst.active) {
  --context-ret-c: var(--c-game-burst);
}
.pb-float.narrow-bottom .pb-context-wrap {
  width: auto;
}
.pb-context-wrap > .fx-ret.fx-context-ret {
  position: absolute;
  inset: -2px;
  left: -2px;
  top: -2px;
  width: auto;
  height: auto;
  z-index: 2;
  --ret-c: var(--context-ret-c);
  opacity: .44;
  animation: none;
  transition: opacity .18s;
}
.pb-context-wrap > .fx-context-ret .fr-t {
  display: none;
}
.pb-context-wrap:has(.pb-pass-btn:hover) > .fx-context-ret,
.pb-context-wrap:has(.pb-pass-btn:focus-visible) > .fx-context-ret {
  opacity: 1;
  animation: none;
}
.pb-context-wrap:has(.pb-pass-btn:hover) > .fx-context-ret .fr-t,
.pb-context-wrap:has(.pb-pass-btn:focus-visible) > .fx-context-ret .fr-t {
  display: block;
}
.pb-context-wrap:has(.pb-pass-btn:disabled) > .fx-context-ret:not(.fx-click-flash) {
  opacity: 0;
  animation: none;
}
.pb-pass-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --fx-local-scan-pitch: var(--fx-scan-pitch);
  --fx-local-scan-line: var(--screen-fx-scan-line);
  --fx-local-scan-origin-y: 0px;
  --fx-local-scan-dir: 1;
  --fx-local-scan-angle: 0deg;
  background:
    repeating-linear-gradient(
      var(--fx-local-scan-angle),
      color-mix(in srgb, var(--glow, var(--c-ctx)) 28%, transparent) 0 var(--fx-local-scan-line),
      transparent var(--fx-local-scan-line) var(--fx-local-scan-pitch));
  background-position: 0 calc(var(--fx-local-scan-pitch) * var(--fx-scan-phase) * var(--fx-local-scan-dir) - var(--fx-local-scan-origin-y));
  opacity: .7;
}
.pb-pass-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
html.effect-choice-open .pb-pass-btn {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
html.effect-choice-open .pb-float .pb-pass-btn.active,
html.effect-choice-open .pb-float .pb-pass-btn.burst.active {
  background: color-mix(in srgb, var(--c-accent) 24%, var(--c-panel-2));
  border-color: color-mix(in srgb, var(--c-accent) 41%, var(--c-border));
  color: color-mix(in srgb, var(--c-accent) 31%, #fff);
  --glow: initial;
}
html.effect-choice-open .pb-context-wrap > .fx-context-ret:not(.fx-click-flash) {
  opacity: 0;
  animation: none;
}
.pb-pass-btn.busy {
  cursor: wait;
}
.pb-pass-btn .pb-wash {
  display: none;
}
.pb-pass-btn:disabled.busy .pb-wash,
.pb-pass-btn:disabled.resolving .pb-wash,
.pb-pass-btn:disabled.thinking .pb-wash {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.pb-pass-btn:disabled.busy .pb-wash::before,
.pb-pass-btn:disabled.resolving .pb-wash::before,
.pb-pass-btn:disabled.thinking .pb-wash::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 220%;
  background:
    linear-gradient(
      100deg,
      transparent 35%,
      color-mix(in srgb, var(--c-white) 63%, transparent) 50%,
      transparent 65%);
  animation: pbWashK 1.5s linear infinite;
  animation-delay: inherit;
}
@keyframes pbWashK {
  from {
    transform: translateX(-70.909%);
  }
  to {
    transform: translateX(70.909%);
  }
}
.pb-float.pinned .pb-sub.has-think {
  text-transform: none;
}
.pb-pass-btn.burst.active,
.pb-float.pinned .pb-pass-btn.burst.active,
.pb-float.narrow-bottom .pb-pass-btn.burst.active {
  background: var(--c-game-burst);
  border-color: var(--c-game-burst);
  color: var(--c-on-burst);
  --glow: var(--c-game-burst);
}
.pb-pass-btn.burst.active:hover,
.pb-float.pinned .pb-pass-btn.burst.active:hover,
.pb-float.narrow-bottom .pb-pass-btn.burst.active:hover {
  background: var(--c-game-burst);
  filter: brightness(1.12);
}
.pb-loz {
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 9px;
  cursor: pointer;
  border: 1px solid;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  z-index: 130;
  white-space: nowrap;
  pointer-events: auto;
  transition: box-shadow 0.1s, filter 0.1s;
}
.pb-loz,
.shield-badge,
.zone-overlay,
.col-label,
.area-label {
  rotate: calc(var(--lz-m, 0deg) + var(--lz-u, 0deg) + var(--lz-t, 0deg) + var(--lz-s, 0deg) + var(--lz-arc, 0deg));
}
.table-scaler[data-side=p2] {
  --lz-m: -180deg;
}
html.opp-upright .table-scaler[data-side=p2] .card,
html.opp-upright .table-scaler[data-side=p2] .play-stack,
html.opp-upright .table-scaler[data-side=p2] .zone-back {
  --lz-u: 180deg;
}
.card.tapped,
.play-stack.tapped {
  --lz-t: -90deg;
}
.card.shield-card,
.shield-empty {
  --lz-s: 90deg;
}
.pb-loz:hover {
  box-shadow:
    0 0 0 2px #fff,
    0 0 10px 2px rgba(255, 255, 255, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.6);
  border-color: #fff;
}
.pb-loz:active,
.pb-loz.act-pressed {
  filter: brightness(1.45) saturate(1.15);
  scale: 0.93;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.45), 0 0 0 2px #fff;
}
#bigCard .bc-acts button:active,
.insp-actions button:active,
.duo-acts button:active,
#bigCard .bc-acts button.act-pressed,
.insp-actions button.act-pressed,
.duo-acts button.act-pressed,
.pb-pass-btn:active,
.pb-pass-btn.act-pressed,
.pb-mode-btn:active,
.pb-mode-btn.act-pressed {
  filter: brightness(1.45) saturate(1.15);
  transform: scale(0.95);
}
.pb-loz.attack {
  top: 50%;
  background: color-mix(in srgb, var(--c-game-attack) 58%, #111);
  border-color: var(--c-game-attack);
  color: var(--c-ink-light);
}
.pb-loz.attack:hover {
  background: var(--c-game-attack);
  filter: none;
}
.pb-loz.activate {
  top: 25%;
  background: var(--c-game-activate);
  border-color: var(--c-game-activate);
  color: var(--c-on-accent);
}
.pb-loz.activate:hover {
  filter: saturate(1.6) brightness(0.98);
}
.pb-loz.play {
  top: 50%;
  background: var(--c-game-trigger);
  border-color: var(--c-game-trigger);
  color: var(--c-on-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.pb-loz.play:hover {
  background: var(--c-game-trigger);
  filter: brightness(1.12);
}
html:not(.loz-arm-mode) .lab-handcard-real:hover .pb-loz.play {
  opacity: 1;
  pointer-events: auto;
}
.pb-loz.deploy {
  top: 50%;
  background: var(--c-game-trigger);
  border-color: var(--c-game-trigger);
  color: var(--c-on-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.pb-loz.deploy:hover {
  filter: saturate(1.6) brightness(0.98);
}
html:not(.loz-arm-mode) .lab-handcard-real:hover .pb-loz.deploy {
  opacity: 1;
  pointer-events: auto;
}
.pb-loz.select {
  top: 50%;
  background: var(--action-color, var(--c-game-damage));
  border-color: var(--action-color, var(--c-game-damage));
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.pb-loz.select:hover {
  filter: brightness(var(--hover-brightness, 1.18)) saturate(1.12);
}
html:not(.loz-arm-mode) [data-player][data-slot]:hover .pb-loz.select,
html:not(.loz-arm-mode) [data-base-player]:hover .pb-loz.select,
html:not(.loz-arm-mode) [data-next-shield-player]:hover .pb-loz.select,
html:not(.loz-arm-mode) [data-lethal-player]:hover .pb-loz.select,
html:not(.loz-arm-mode) .lab-target-area:hover .pb-loz.select,
html:not(.loz-arm-mode) .lab-handcard-real:hover .pb-loz.select {
  opacity: 1;
  pointer-events: auto;
}
.pb-loz.block {
  top: 50%;
  background: var(--c-game-block);
  border-color: var(--c-game-block);
  color: var(--c-on-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.pb-loz.block:hover {
  background: var(--c-game-block);
  filter: brightness(1.08);
}
html:not(.loz-arm-mode) [data-player][data-slot]:hover .pb-loz.block {
  opacity: 1;
  pointer-events: auto;
}
.pb-loz.move {
  top: 50%;
  background: var(--c-game-interact);
  border-color: var(--c-game-interact);
  color: #111;
}
.pb-loz.move:hover {
  background: var(--c-game-interact);
  filter: brightness(1.08);
}
.pb-loz.move {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
[data-player][data-slot]:hover .pb-loz.move,
.lab-handcard-real:hover .pb-loz.move,
[data-base-player]:hover .pb-loz.move {
  opacity: 1;
  pointer-events: auto;
}
.pb-loz.move.move-pilot {
  top: auto;
  bottom: 4px;
  font-size: 9px;
  padding: 1px 5px;
}
.pb-loz.rest {
  top: 25%;
  background: color-mix(in srgb, var(--c-game-rest) 65%, #111);
  border-color: var(--c-game-rest);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.pb-loz.rest:hover {
  background: var(--c-game-rest);
  filter: none;
}
[data-player][data-slot]:hover .pb-loz.rest,
[data-base-player]:hover .pb-loz.rest,
.resources-row .card:hover .pb-loz.rest {
  opacity: 1;
  pointer-events: auto;
}
.pb-loz.trash-loz {
  top: 8px;
  right: 5px;
  left: auto;
  translate: none;
  background: var(--c-game-unavailable);
  border-color: var(--c-game-unavailable);
  color: #111;
  padding: 0 5px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.pb-loz.trash-loz:hover {
  background: var(--c-game-unavailable);
  filter: brightness(1.12);
}
[data-player][data-slot]:hover .pb-loz.trash-loz,
[data-base-player]:hover .pb-loz.trash-loz,
.lab-handcard-real:hover .pb-loz.trash-loz,
.shield-card:hover .pb-loz.trash-loz {
  opacity: 1;
  pointer-events: auto;
}
.pb-loz.pair {
  top: 72%;
  background: var(--c-game-pair);
  border-color: var(--c-game-pair);
  color: #2a0014;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.pb-loz.pair:hover {
  filter: saturate(1.4) brightness(0.98);
}
[data-player][data-slot]:hover .pb-loz.pair {
  opacity: 1;
  pointer-events: auto;
}
.pb-loz.link {
  top: 72%;
  background: var(--c-game-link);
  border-color: var(--c-game-link);
  color: var(--c-on-burst);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.pb-loz.link:hover {
  filter: saturate(1.4) brightness(0.98);
}
[data-player][data-slot]:hover .pb-loz.link {
  opacity: 1;
  pointer-events: auto;
}
.pb-loz.damage-minus,
.pb-loz.damage-plus {
  top: auto;
  bottom: 5px;
  width: 24px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--c-game-damage);
  border-color: var(--c-game-damage);
  color: #fff;
}
.pb-loz.damage-minus {
  left: 7px;
  translate: none;
}
.pb-loz.damage-plus {
  left: auto;
  right: 7px;
  translate: none;
}
[data-player][data-slot]:hover .pb-loz.damage-minus,
[data-player][data-slot]:hover .pb-loz.damage-plus,
[data-base-player]:hover .pb-loz.damage-minus,
[data-base-player]:hover .pb-loz.damage-plus {
  opacity: 1;
  pointer-events: auto;
}
.resources-row.lab-res-clickable {
  position: relative;
}
.resource-empty.lab-res-slot-host {
  position: relative;
}
.lab-res-add-inslot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  --region-c:var(--c-edit);
  background-color: color-mix(in srgb, var(--c-edit) 20%, rgba(0, 0, 0, .72));
  border: 1px solid var(--c-edit);
  border-radius: 3px;
  color: var(--c-edit);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s;
}
.lab-res-add-inslot:hover {
  filter: brightness(1.25);
}
.lab-res-add-ex-tab {
  position: absolute;
  right: calc(50% + var(--res-content-w,0px) / 2 + 4px);
  top: 50%;
  translate: 0 -50%;
  width: calc(50px * var(--res-card-scale,1));
  height: calc(70px * var(--res-card-scale,1));
  border-radius: 3px;
  cursor: pointer;
  --region-c:var(--c-edit);
  background-color: color-mix(in srgb, var(--c-edit) 20%, rgba(0, 0, 0, .72));
  border: 1px solid var(--c-edit);
  color: var(--c-edit);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .12s;
}
.lab-res-add-ex-tab:hover {
  filter: brightness(1.25);
}
.resources-row.lab-res-clickable:hover .lab-res-add-inslot,
.resources-row.lab-res-clickable:hover .lab-res-add-ex-tab {
  opacity: 1;
}
.resources-row.lab-res-clickable:hover .resource-empty::before,
#board:not(.lab-play-mode):not(.pb-active) .zone-back:hover::before,
#board:not(.lab-play-mode):not(.pb-active) .shield-empty[data-shield-empty]:hover::before {
  filter: brightness(1.55) saturate(1.18);
}
[data-base-player][data-base-empty] {
  position: relative;
}
.shields-pile.lab-shield-clickable {
  cursor: pointer;
}
#board:not(.lab-play-mode):not(.pb-active) .shield-empty[data-shield-empty] {
  pointer-events: auto;
}
.shields-pile.lab-shield-clickable:hover {
  background: transparent;
  filter: brightness(1.3);
  border-radius: 6px;
}
[data-base-player][data-base-empty].lab-base-clickable:hover {
  background: transparent;
  filter: brightness(1.3);
}
.shield-card:hover .pb-loz.move {
  opacity: 1;
  pointer-events: auto;
}
.lab-move-target {
  outline: 2px solid var(--c-edit);
  outline-offset: 2px;
  cursor: pointer;
  box-shadow: 0 0 12px color-mix(in srgb, var(--c-edit) 33%, transparent);
}
.lab-move-target:hover {
  background: color-mix(in srgb, var(--c-edit) 13%, transparent);
}
.lab-emptyslot.lab-move-target,
.lab-emptyslot.lab-move-target.lab-handadd {
  border-color: var(--c-edit);
  background-color: color-mix(in srgb, var(--c-edit) 18%, transparent);
  opacity: 1;
}
.pb-loz.cmd-mode {
  top: 35%;
  background: var(--c-game-activate);
  border-color: var(--c-game-activate);
  color: var(--c-on-accent);
}
.pb-loz.pilot-mode {
  top: 60%;
  background: var(--c-game-pair);
  border-color: var(--c-game-pair);
  color: #2a0014;
}
.pb-loz.mainact {
  top: 50%;
  background: var(--c-game-activate);
  border-color: var(--c-game-activate);
  color: var(--c-on-accent);
}
.pb-loz.cmd-mode,
.pb-loz.pilot-mode {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  font-size: 9px;
}
html:not(.loz-arm-mode) .lab-handcard-real:hover .pb-loz.cmd-mode,
html:not(.loz-arm-mode) .lab-handcard-real:hover .pb-loz.pilot-mode {
  opacity: 1;
  pointer-events: auto;
}
.pb-loz {
  font-family: var(--font-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0;
  border-width: 1.4px;
  padding-left: 9px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .4),
    0 0 10px color-mix(in srgb, var(--glow, var(--c-game-activate)) 50%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
.pb-loz::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(0, 0, 0, .5);
  pointer-events: none;
}
.pb-loz.play {
  --glow: var(--c-game-trigger);
}
.pb-loz.deploy {
  --glow: var(--c-game-trigger);
}
.pb-loz.cmd-mode,
.pb-loz.mainact {
  --glow: var(--c-game-activate);
}
.pb-loz.pilot-mode {
  --glow: var(--c-game-pair);
}
.pb-loz.attack {
  --glow: var(--c-game-attack);
}
.pb-loz.activate {
  --glow: var(--c-game-activate);
}
.pb-loz.rest {
  --glow: var(--c-game-rest);
}
.pb-loz.select,
.pb-loz.move {
  --glow:var(--c-edit);
}
#board:not(.lab-play-mode):not(.pb-active) .pb-loz {
  --glow:var(--c-edit);
  background: var(--c-edit);
  border-color: var(--c-edit);
  color: var(--c-on-accent);
}
#board:not(.lab-play-mode):not(.pb-active) .pb-loz.rest {
  --glow:var(--c-game-rest);
  background: var(--c-game-rest);
  border-color: var(--c-game-rest);
}
#board:not(.lab-play-mode):not(.pb-active) .pb-loz.trash-loz {
  --glow:var(--c-game-unavailable);
  background: var(--c-game-unavailable);
  border-color: var(--c-game-unavailable);
}
.pb-loz.block {
  --glow: var(--c-game-block);
}
.pb-loz.pair {
  --glow: var(--c-game-pair);
}
.pb-loz.link {
  --glow: var(--c-game-link);
}
.pb-loz.damage-minus,
.pb-loz.damage-plus {
  --glow: var(--c-game-damage);
}
.pb-loz.trash-loz {
  --glow: var(--c-game-unavailable);
}
.pb-loz.cmd-mode:hover,
.pb-loz.mainact:hover {
  filter: saturate(1.5) brightness(0.98);
}
.pb-loz.pilot-mode:hover {
  filter: saturate(1.4) brightness(0.98);
}
.pb-loz.attack {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
html:not(.loz-arm-mode) [data-player][data-slot]:hover .pb-loz.attack {
  opacity: 1;
  pointer-events: auto;
}
html.loz-arm-mode .pb-loz.attack,
html.loz-arm-mode .pb-loz.activate,
html.loz-arm-mode .pb-loz.cmd-mode,
html.loz-arm-mode .pb-loz.pilot-mode,
html.loz-arm-mode .pb-loz.play,
html.loz-arm-mode .pb-loz.deploy,
html.loz-arm-mode .pb-loz.select,
html.loz-arm-mode .pb-loz.mainact,
html.loz-arm-mode .pb-loz.block {
  opacity: 0.72;
  pointer-events: none;
  transition: opacity 0.12s;
}
html.loz-arm-mode.cardacts-selected .pb-loz.attack,
html.loz-arm-mode.cardacts-selected .pb-loz.activate,
html.loz-arm-mode.cardacts-selected .pb-loz.cmd-mode,
html.loz-arm-mode.cardacts-selected .pb-loz.pilot-mode,
html.loz-arm-mode.cardacts-selected .pb-loz.play,
html.loz-arm-mode.cardacts-selected .pb-loz.deploy,
html.loz-arm-mode.cardacts-selected .pb-loz.select,
html.loz-arm-mode.cardacts-selected .pb-loz.mainact,
html.loz-arm-mode.cardacts-selected .pb-loz.block {
  opacity: 0;
  pointer-events: none;
}
html.loz-arm-mode [data-player][data-slot].loz-armed .pb-loz,
html.loz-arm-mode .lab-handcard-real.loz-armed .pb-loz,
html.loz-arm-mode [data-base-player].loz-armed .pb-loz,
html.loz-arm-mode [data-next-shield-player].loz-armed .pb-loz,
html.loz-arm-mode [data-lethal-player].loz-armed .pb-loz {
  opacity: 1;
  pointer-events: auto;
  padding: 6px 15px;
  font-size: 20px;
  border-radius: 14px;
}
html.loz-arm-mode .lab-handcard-real.loz-armed .pb-loz.cmd-mode,
html.loz-arm-mode .lab-handcard-real.loz-armed .pb-loz.pilot-mode {
  font-size: 15px;
  padding: 5px 12px;
}
html:not(.action-input-buttons) .pb-loz {
  display: none !important;
}
.lab-edit-regions {
  position: absolute;
  inset: 0;
  z-index: 85;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
  overflow: hidden;
  border-radius: inherit;
}
html:not(.action-input-buttons) .lab-edit-host:hover .lab-edit-regions,
html:not(.action-input-buttons) .lab-edit-host:focus-within .lab-edit-regions {
  opacity: 1;
  pointer-events: auto;
}
.lab-edit-region {
  position: relative;
  min-width: 0;
  border: 0;
  padding: 0;
  --region-c:var(--c-edit);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(7px, 10cqw, 11px);
  letter-spacing: .08em;
  text-shadow: 0 1px 3px #000, 0 0 5px #000;
  color: color-mix(in srgb, var(--region-c) 78%, #fff);
  background-color: color-mix(in srgb, var(--region-c) 24%, rgba(0, 0, 0, .55));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--region-c) 62%, transparent);
  cursor: pointer;
  opacity: .72;
}
.lab-edit-region:hover {
  opacity: 1;
  filter: brightness(1.28);
}
.lab-edit-region[data-edit-action=rest] {
  --region-c:var(--c-game-rest);
  grid-column: 1 / 4;
  grid-row: 1;
}
.lab-edit-region[data-edit-action=delete] {
  --region-c:var(--c-game-unavailable);
  grid-column: 4 / 7;
  grid-row: 1;
}
.lab-edit-region[data-edit-action=damage-minus] {
  --region-c:var(--c-game-attack);
  grid-column: 1 / 3;
  grid-row: 2;
}
.lab-edit-region[data-edit-action=damage-plus] {
  --region-c:var(--c-game-attack);
  grid-column: 5 / 7;
  grid-row: 2;
}
.lab-edit-region[data-edit-action=pair] {
  --region-c:var(--c-game-pair);
  grid-column: 1 / 4;
  grid-row: 3;
}
.lab-edit-region[data-edit-action=move] {
  --region-c:var(--c-edit);
  grid-column: 4 / 7;
  grid-row: 3;
}
.lab-edit-regions:not(:has([data-edit-action=pair])) .lab-edit-region[data-edit-action=move] {
  grid-column: 1 / 7;
}
.lab-edit-dmg-preview {
  display: none;
  z-index: 14;
}
.lab-edit-host:has(.lab-edit-region[data-edit-action=damage-minus]:hover) .lab-edit-dmg-preview,
.lab-edit-host:has(.lab-edit-region[data-edit-action=damage-plus]:hover) .lab-edit-dmg-preview {
  display: block;
}
.lab-edit-regions.compact-actions {
  grid-template-rows: 80% 20%;
  grid-template-columns: 1fr;
}
.lab-edit-regions.compact-actions .lab-edit-region[data-edit-action=move] {
  grid-column: 1;
  grid-row: 1;
}
.lab-edit-regions.compact-actions .lab-edit-region[data-edit-action=delete] {
  grid-column: 1;
  grid-row: 2;
}
.lab-edit-regions.resource-actions {
  grid-template-columns: 1fr;
  grid-template-rows: 80% 20%;
}
.lab-edit-regions.resource-actions .lab-edit-region[data-edit-action=rest] {
  grid-column: 1;
  grid-row: 1;
}
.lab-edit-regions.resource-actions .lab-edit-region[data-edit-action=delete] {
  grid-column: 1;
  grid-row: 2;
}
.lab-modal-host {
  position: relative;
}
.lab-modal-regions {
  position: absolute;
  inset: 0;
  z-index: 85;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
  overflow: hidden;
  border-radius: inherit;
}
.lab-modal-host:hover > .lab-modal-regions,
.lab-modal-host:focus-within > .lab-modal-regions {
  opacity: 1;
  pointer-events: auto;
}
.lab-modal-region {
  font-size: 11px;
}
.lab-modal-regions > .lab-modal-region {
  grid-column: 1 / -1;
}
.lab-modal-region[data-edit-action=view] {
  --region-c:var(--c-game-keyword);
  grid-row: 1;
}
.lab-modal-region[data-edit-action=swap] {
  --region-c:var(--c-edit);
  grid-row: 1;
}
.lab-modal-region[data-edit-action=draw] {
  --region-c:var(--c-game-activate);
  grid-row: 2;
}
.lab-modal-card-regions {
  grid-template-rows: 1fr 1fr 1fr;
}
.lab-modal-region[data-edit-action=delete] {
  --region-c:var(--c-game-unavailable);
  grid-row: 3;
}
.lab-modal-card-regions.delete-only {
  grid-template-rows: 1fr;
}
.lab-modal-card-regions.delete-only .lab-modal-region[data-edit-action=delete] {
  grid-row: 1;
}
.lab-modal-host.is-move-armed {
  outline: 2px solid var(--c-edit);
  outline-offset: 2px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--c-edit) 55%, transparent);
}
.lab-modal-host.is-move-armed .lab-modal-region[data-edit-action=swap] {
  opacity: 1;
  filter: brightness(1.4);
}
html.action-input-buttons .card-available-action > .card::after,
html.action-input-buttons .card-available-action > .play-stack > .stack-unit::after,
html.action-input-buttons .card-available-action > .play-stack > .stack-pilot::after,
html.action-input-buttons .card-available-action.card::after {
  content: none;
}
html.action-input-buttons .fx-cand-ret.card-available-action,
html.action-input-buttons .fx-ret-label.card-available-action {
  display: none;
}
html.action-input-buttons .card-action-candidate .pb-loz {
  opacity: .38 !important;
  pointer-events: none !important;
}
html.action-input-buttons.action-reveal-primed .card-action-candidate:not(:hover):not(.loz-armed) .pb-loz {
  opacity: 0 !important;
}
html.action-input-buttons .card-action-candidate:hover .pb-loz,
html.action-input-buttons .card-action-candidate:focus-within .pb-loz,
html.action-input-buttons .card-action-candidate.loz-armed .pb-loz {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.card-action-regions {
  position: absolute;
  inset: 0;
  z-index: 129;
  pointer-events: none;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr;
  opacity: 0;
  transition: opacity .12s;
  overflow: hidden;
  border-radius: inherit;
}
html.action-split-lr .card-action-regions {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
}
html.action-split-lr .tapped .card-action-regions {
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr;
}
html.action-input-direct .card-action-candidate:hover .card-action-regions,
html.action-input-direct .card-action-candidate.loz-armed .card-action-regions,
html.action-input-direct .card-action-candidate:focus-within .card-action-regions {
  opacity: 1;
}
html.action-input-twostep:not(.action-reveal-primed) .card-action-candidate .card-action-regions,
html.action-input-twostep .card-action-candidate:hover .card-action-regions,
html.action-input-twostep .card-action-candidate.loz-armed .card-action-regions,
html.action-input-twostep .card-action-candidate:focus-within .card-action-regions {
  opacity: 1;
}
body.fx-aim-active .card-action-regions {
  opacity: 0 !important;
}
html.action-input-direct .card-action-candidate.card:is(:hover, .loz-armed),
html.action-input-direct .card-action-candidate:is(:hover, .loz-armed) > .card,
html.action-input-direct .card-action-candidate:is(:hover, .loz-armed) > .play-stack {
  scale: 1.07;
  z-index: 100;
}
html.action-input-direct .hand-row > .card.card-action-candidate:is(:hover, .loz-armed, .card-detail-focus, :focus-within),
.hand-row > .card.lab-targetable:is(:hover, .loz-armed, .card-detail-focus, :focus-within) {
  z-index: 1000 !important;
}
.card-action-region,
.fx-scan-cover {
  --region-c: var(--c-game-interact);
  min-width: 0;
  min-height: 0;
  --fx-scan-cover-trough: var(--screen-fx-scan-trough);
  --fx-local-scan-pitch: var(--screen-fx-scan-pitch);
  --fx-local-scan-line: var(--screen-fx-scan-line);
  --fx-local-scan-origin-y: 0px;
  --fx-local-scan-dir: 1;
  --fx-local-scan-angle: 0deg;
  overflow: hidden;
  background: none;
  box-shadow: none;
}
.card-action-region.is-primed,
.fx-scan-cover {
  background:
    repeating-linear-gradient(
      var(--fx-local-scan-angle),
      color-mix(in srgb, var(--region-c) var(--fx-scan-cover-alpha), transparent) 0 var(--fx-local-scan-line),
      color-mix(in srgb, var(--region-c) calc(var(--fx-scan-cover-trough) * var(--fx-scan-cover-alpha)), transparent) var(--fx-local-scan-line) var(--fx-local-scan-pitch));
  background-position: 0 calc(var(--fx-local-scan-pitch) * var(--fx-scan-phase) * var(--fx-local-scan-dir) - var(--fx-local-scan-origin-y));
  box-shadow: none;
}
.card-action-region {
  --fx-scan-cover-alpha:66%;
  --fx-scan-cover-trough:0.62;
}
.fx-scan-cover {
  --region-c:var(--c-edit);
  --fx-scan-cover-alpha:66%;
  --fx-scan-cover-trough:0.62;
}
html.action-feedback-off .fx-ret.fx-selected,
html.action-feedback-off .fx-ret.fx-line-ret,
html.action-feedback-off .fx-ret-label.fx-selected,
html.action-feedback-off .fx-ret-label.fx-line-ret {
  display: none !important;
}
.pb-pilot-loz {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  padding: 0 1px 2px;
  background: none;
  border: none;
  box-shadow: none;
  text-shadow: 0 1px 3px #000, 0 0 4px #000;
  z-index: 131;
  white-space: nowrap;
  pointer-events: none;
}
.pb-pilot-loz::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  background: var(--dotc);
  box-shadow: 0 0 6px var(--dotc);
}
.pb-pilot-loz.link {
  --dotc: var(--c-game-link);
  color: color-mix(in srgb, var(--c-game-link) 82%, #fff);
  border-bottom: 1px dotted color-mix(in srgb, var(--c-game-link) 55%, transparent);
}
.pb-pilot-loz.pair {
  --dotc: var(--c-game-pair);
  color: color-mix(in srgb, var(--c-game-pair) 84%, #fff);
  border-bottom: 1px dotted color-mix(in srgb, var(--c-game-pair) 55%, transparent);
}
.pb-pilot-preview-host:hover .sick-icon {
  display: none;
}
.pb-menu-modal {
  position: fixed;
  z-index: 650;
  background: var(--glass-modal-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  backdrop-filter: var(--glass-modal-blur);
  -webkit-backdrop-filter: var(--glass-modal-blur);
  padding: calc(16px * var(--gcg-message-density, 1)) calc(18px * var(--gcg-message-density, 1));
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  box-sizing: border-box;
  width: max-content;
  max-width: min(94vw, 980px, var(--gcg-message-room, 100vw));
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 621px) {
  .pb-menu-modal.pb-menu-modal--pile {
    max-width: min(82vw, 780px, var(--gcg-message-room, 100vw));
  }
}
.pb-effect-modal {
  isolation: isolate;
}
.pb-menu-table-btn {
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 3;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--c-text);
  font-size: calc(10px * var(--fs-body, 1));
  font-weight: 800;
  letter-spacing: .04em;
}
.pb-menu-peekbar {
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pb-menu-peek-copy {
  min-width: 0;
  flex: 1;
}
.pb-menu-peek-kicker {
  color: var(--c-game-trigger);
  font-size: calc(9px * var(--fs-body, 1));
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pb-menu-peek-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text);
  font-size: calc(12px * var(--fs-body, 1));
}
.pb-menu-return-btn {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 7px;
  cursor: pointer;
  background: color-mix(in srgb, var(--c-accent) 20%, var(--c-panel-2));
  border: 1px solid color-mix(in srgb, var(--c-accent) 33%, var(--c-border));
  color: color-mix(in srgb, var(--c-accent) 24%, #fff);
  font-size: calc(11px * var(--fs-body, 1));
  font-weight: 800;
}
.pb-menu-return-btn:hover {
  background: color-mix(in srgb, var(--c-accent) 35%, var(--c-panel-2));
  border-color: var(--c-accent);
}
.pb-effect-modal.pb-menu-minimized {
  left: var(--gcg-message-modal-x, var(--gcg-message-x, 50vw));
  right: auto;
  top: var(--gcg-message-modal-y, var(--gcg-message-y, 50vh));
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(560px, var(--gcg-message-room, calc(100vw - 16px)));
  max-width: var(--gcg-message-room, calc(100vw - 16px));
  max-height: none;
  box-sizing: border-box;
  padding: 8px 10px;
  display: block;
  overflow: visible;
  border-width: 1px;
  border-radius: var(--r-loz);
}
.pb-effect-modal.pb-menu-minimized > * {
  display: none !important;
}
.pb-effect-modal.pb-menu-minimized > .pb-menu-peekbar {
  display: flex !important;
}
html.effect-choice-open #board .pb-loz,
html.effect-choice-open #board .card-action-region {
  pointer-events: none !important;
  opacity: .18 !important;
}
.pb-menu-modal > * {
  flex: 0 0 auto;
}
.pb-menu-title {
  color: var(--c-text);
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 700;
  margin-bottom: calc(12px * var(--gcg-message-density, 1));
  text-align: center;
}
.pb-menu-opts {
  display: flex;
  gap: calc(12px * var(--gcg-message-density, 1));
  justify-content: center;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-height: 0;
  align-content: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pb-menu-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 130px;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  background: var(--c-panel-3);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
.pb-menu-opt-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.pb-menu-opts--effect-order {
  flex-direction: column;
  flex-wrap: nowrap;
  width: min(465px, calc(94vw - 36px));
  align-self: center;
}
.pb-menu-opts--effect-order .pb-menu-opt {
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 14px;
  text-align: left;
}
.pb-menu-opts--effect-order .pb-menu-opt-img {
  margin: 0;
  flex: 0 0 auto;
}
.pb-menu-opts--effect-order .pb-menu-opt-copy {
  align-items: flex-start;
  flex: 1 1 auto;
  max-width: 330px;
}
.pb-menu-opts--effect-order .pb-menu-name {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
  text-align: left;
}
.pb-menu-opt:hover {
  background: var(--c-ctrl-2);
  border-color: var(--c-accent);
}
.pb-menu-opt-disabled {
  cursor: default;
  opacity: .42;
  filter: grayscale(.7);
}
.pb-menu-opt-disabled:hover {
  background: var(--c-panel-3);
  border-color: var(--c-border);
}
.pb-menu-name {
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 700;
}
.pb-menu-stats {
  font-size: calc(12px * var(--fs-body, 1));
  color: var(--c-text-dim);
}
.pb-menu-source {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.pb-menu-source-img {
  width: 84px;
  height: 117px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.pb-menu-source-meta {
  max-width: min(520px, 58vw);
  text-align: left;
}
.pb-menu-src-name {
  color: var(--c-text);
  font-weight: 700;
  font-size: calc(12px * var(--fs-body, 1));
  margin-bottom: 4px;
}
.pb-menu-src-eff {
  color: var(--c-text-muted, #9fb0c0);
  font-size: calc(11px * var(--fs-body, 1));
  line-height: 1.4;
}
.pb-menu-src-eff .ec-part {
  color: var(--c-text-dim);
  opacity: .72;
}
.pb-menu-src-eff .ec-part.ec-current {
  opacity: 1;
  color: var(--c-text-hi);
}
.pb-menu-source-img,
.pb-menu-viewed-img,
.pb-menu-opt-img,
.pb-burst-card img {
  cursor: zoom-in;
}
.pb-menu-viewed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 4px 0 12px;
}
.pb-menu-viewed-img {
  width: 132px;
  height: 184px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.pb-menu-viewed-name {
  color: #fff;
  font-weight: 700;
  font-size: calc(12px * var(--fs-body, 1));
}
.pb-menu-opt-img {
  width: 90px;
  height: 125px;
  border-radius: 4px;
  object-fit: cover;
  margin-bottom: 6px;
}
.pb-menu-opts--compact {
  gap: 8px;
}
.pb-menu-opt--chip {
  min-width: 0;
  padding: 6px;
  gap: 2px;
}
.pb-menu-opt--chip .pb-menu-opt-img {
  width: 48px;
  height: 67px;
  margin-bottom: 0;
}
.pb-menu-opt--chip .pb-menu-name {
  display: none;
}
.pb-menu-opts--cards .pb-menu-opt {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  min-width: 0;
  text-align: left;
}
.pb-menu-opts--cards .pb-menu-opt-img {
  margin: 0;
  flex: 0 0 auto;
}
.pb-menu-opts--cards .pb-menu-opt-copy {
  align-items: flex-start;
  flex: 0 1 auto;
}
.pb-menu-opts--cards .pb-menu-name {
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.25;
  text-align: left;
  min-width: 60px;
  max-width: 88px;
}
.pb-menu-opts--cards .pb-menu-stats {
  text-align: left;
}
.pb-menu-opt-selected {
  background: color-mix(in srgb, var(--c-commit) 18%, var(--c-panel));
  border-color: var(--c-commit);
  box-shadow: 0 0 0 2px var(--c-commit) inset;
}
.pb-menu-opt-selected:hover {
  background: color-mix(in srgb, var(--c-commit) 26%, var(--c-panel-2));
  border-color: color-mix(in srgb, var(--c-commit) 70%, #fff);
}
.pb-menu-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.pb-menu-confirm {
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 700;
  padding: 9px 22px;
  border-radius: 8px;
  cursor: pointer;
  --c: var(--c-commit);
  --ink: var(--c-on-commit);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--c) var(--mix-fill-border, 72%), #000);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-top, 78%), #fff) 0%,
      var(--c) 48%,
      color-mix(in srgb, var(--c) var(--mix-fill-bottom, 82%), #000) 100%);
}
.pb-menu-confirm:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--c) var(--mix-fill-hover-border, 55%), #fff);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-top, 52%), #fff) 0%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-mid, 80%), #fff) 48%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-bottom, 96%), #fff) 100%);
}
.pb-menu-confirm:disabled {
  opacity: .4;
  cursor: default;
}
.pb-menu-hint {
  color: var(--c-text-dim);
  font-size: calc(11px * var(--fs-body, 1));
  text-align: center;
  margin-top: 8px;
}
.pb-menu-confirm.pb-opt-use {
  background: var(--c-panel-2);
  border-color: var(--opt-c, var(--c-game-damage));
  color: var(--opt-c, var(--c-game-damage));
}
.pb-menu-confirm.pb-opt-use:hover:not(:disabled) {
  background: var(--c-ctrl);
  border-color: var(--opt-c, var(--c-game-damage));
  filter: brightness(1.35);
}
.pb-menu-confirm.pb-opt-decline {
  --c: hsl(0 0% 46%);
  --ink: var(--c-text);
  color: var(--ink);
  background: var(--ctrl-face);
  border-color: var(--c-border);
}
.pb-menu-confirm.pb-opt-decline:hover:not(:disabled) {
  color: var(--c-text-hi);
  background: var(--ctrl-face-hover);
  border-color: var(--c-border-strong);
}
@media (max-width: 620px) {
  .pb-menu-modal {
    padding: calc(12px * var(--gcg-message-density, 1)) calc(10px * var(--gcg-message-density, 1));
    max-width: min(96vw, var(--gcg-message-room, 100vw));
  }
  .pb-menu-opts {
    gap: calc(8px * var(--gcg-message-density, 1));
  }
  .pb-menu-opt {
    min-width: 0;
    padding: 8px 6px;
  }
  .pb-menu-opt-img {
    width: 68px;
    height: 95px;
    margin-bottom: 4px;
  }
  .pb-menu-name {
    font-size: calc(11px * var(--fs-body, 1));
    text-align: center;
  }
  .pb-menu-source-img {
    width: 64px;
    height: 89px;
  }
  .pb-menu-source-meta {
    max-width: none;
  }
  .pb-menu-viewed-img {
    width: 104px;
    height: 145px;
  }
  .pb-menu-opts--effect-order {
    width: calc(96vw - 20px);
  }
  .pb-menu-opts--effect-order .pb-menu-opt {
    gap: 10px;
  }
  .pb-menu-opts--cards .pb-menu-opt {
    padding: 6px 7px;
    gap: 8px;
  }
  .pb-menu-opts--cards .pb-menu-opt-img {
    width: 60px;
    height: 84px;
  }
  .pb-menu-opts--cards .pb-menu-name {
    min-width: 66px;
    max-width: 80px;
    text-align: left;
  }
}
.pb-burst-modal {
  position: fixed;
  z-index: 650;
  background: var(--glass-modal-bg);
  border: 2px solid var(--c-game-burst);
  border-radius: var(--r-xl);
  backdrop-filter: var(--glass-modal-blur);
  -webkit-backdrop-filter: var(--glass-modal-blur);
  padding: calc(18px * var(--gcg-message-density, 1)) calc(22px * var(--gcg-message-density, 1));
  box-shadow: 0 12px 40px rgba(0, 0, 0, .7);
  display: flex;
  gap: calc(18px * var(--gcg-message-density, 1));
  align-items: center;
  box-sizing: border-box;
  width: max-content;
  max-width: 96vw;
  max-height: 92vh;
  overflow: auto;
  flex-wrap: wrap;
}
.pb-burst-card {
  width: 188px;
  height: 262px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #0a0a0a;
}
.pb-burst-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pb-burst-right {
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--gcg-message-density, 1));
  max-width: 280px;
}
.pb-burst-title {
  color: #ffe;
  font-size: calc(16px * var(--fs-body, 1));
  font-weight: 700;
}
.pb-burst-effect {
  color: var(--c-text-dim);
  font-size: calc(12px * var(--fs-body, 1));
  line-height: 1.45;
  padding: 6px 8px;
  background: var(--panel-bg);
  border-radius: 4px;
}
.pb-burst-btns {
  display: flex;
  gap: calc(8px * var(--gcg-message-density, 1));
  margin-top: calc(4px * var(--gcg-message-density, 1));
}
.pb-burst-btn {
  font-size: calc(13px * var(--fs-body, 1));
  padding: calc(8px * var(--gcg-message-density, 1)) calc(14px * var(--gcg-message-density, 1));
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  border: 1px solid;
}
.pb-burst-btn.burst {
  --c: var(--c-game-burst);
  color: var(--c-on-burst);
  border-color: color-mix(in srgb, var(--c) var(--mix-fill-border, 72%), #000);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-top, 78%), #fff) 0%,
      var(--c) 48%,
      color-mix(in srgb, var(--c) var(--mix-fill-bottom, 82%), #000) 100%);
}
.pb-burst-btn.burst:hover {
  border-color: color-mix(in srgb, var(--c) var(--mix-fill-hover-border, 55%), #fff);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-top, 52%), #fff) 0%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-mid, 80%), #fff) 48%,
      color-mix(in srgb, var(--c) var(--mix-fill-hover-bottom, 96%), #fff) 100%);
}
.pb-burst-btn.pass {
  color: var(--c-text);
  border-color: var(--c-border);
  background: var(--ctrl-face);
}
.pb-burst-btn.pass:hover {
  color: var(--c-text-hi);
  border-color: var(--c-border-strong);
  background: var(--ctrl-face-hover);
}
@media (max-width: 620px) {
  .pb-burst-modal {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(12px * var(--gcg-message-density, 1));
    padding: calc(14px * var(--gcg-message-density, 1)) calc(16px * var(--gcg-message-density, 1));
  }
  .pb-burst-right {
    max-width: min(320px, 86vw);
  }
  .pb-burst-btns {
    justify-content: center;
  }
  .pb-burst-btn {
    padding: calc(10px * var(--gcg-message-density, 1)) calc(18px * var(--gcg-message-density, 1));
  }
}
.pb-effect-modal:not(.pb-menu-minimized) {
  padding-top: calc(40px * var(--gcg-message-density, 1));
}
@media (max-height: 500px) {
  .pb-menu-modal {
    padding: calc(12px * var(--gcg-message-density, 1)) calc(10px * var(--gcg-message-density, 1));
    max-height: 92vh;
  }
  .pb-menu-modal.pb-effect-modal:not(.pb-menu-minimized) {
    padding-top: calc(12px * var(--gcg-message-density, 1));
  }
  .pb-menu-source-img {
    width: 64px;
    height: 89px;
  }
  .pb-menu-opt {
    min-width: 0;
    padding: 8px 6px;
  }
  .pb-menu-opt-img {
    width: 68px;
    height: 95px;
    margin-bottom: 4px;
  }
  .pb-menu-opts--cards .pb-menu-opt {
    padding: 6px 7px;
    gap: 8px;
  }
  .pb-menu-opts--cards .pb-menu-opt-img {
    width: 60px;
    height: 84px;
  }
}
.lab-ghost {
  pointer-events: none;
}
.lab-targetable {
  cursor: pointer;
}
#board .card,
#board .play-stack,
.card.lab-targetable,
.lab-targetable > .card,
.lab-targetable > .play-stack > .stack-unit,
.lab-targetable > .play-stack > .stack-pilot,
.shield-empty.lab-targetable,
.lab-target-area.lab-targetable {
  overflow: visible;
  border-radius: 4px;
}
.card.lab-targetable::after,
.lab-targetable > .card::after,
.lab-targetable > .play-stack > .stack-unit::after,
.lab-targetable > .play-stack > .stack-pilot::after,
.shield-empty.lab-targetable::after,
.lab-target-area.lab-targetable::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  --candidate-glow-c: hsl(from currentColor h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
  box-shadow: 0 0 var(--screen-fx-glow-core-blur) var(--screen-fx-glow-core-spread) color-mix(in srgb, var(--candidate-glow-c) var(--screen-fx-glow-core-opacity), transparent), 0 0 var(--screen-fx-glow-bloom-blur) var(--screen-fx-glow-bloom-spread) color-mix(in srgb, var(--candidate-glow-c) var(--screen-fx-glow-bloom-opacity), transparent);
  opacity: .85;
}
.card.lab-targetable,
.lab-targetable > .card,
.lab-targetable > .play-stack {
  will-change: transform;
}
html.action-reveal-primed .lab-targetable:not(:hover):not(.loz-armed):not(.card-detail-focus):not(.cand-mandatory) > .card::after,
html.action-reveal-primed .lab-targetable:not(:hover):not(.loz-armed):not(.card-detail-focus):not(.cand-mandatory) > .play-stack > .stack-unit::after,
html.action-reveal-primed .lab-targetable:not(:hover):not(.loz-armed):not(.card-detail-focus):not(.cand-mandatory) > .play-stack > .stack-pilot::after,
html.action-reveal-primed .card.lab-targetable:not(:hover):not(.loz-armed):not(.card-detail-focus):not(.cand-mandatory)::after {
  content: none;
}
body.fx-aim-locked .card.lab-targetable::after,
body.fx-aim-locked .lab-targetable > .card::after,
body.fx-aim-locked .lab-targetable > .play-stack > .stack-unit::after,
body.fx-aim-locked .lab-targetable > .play-stack > .stack-pilot::after,
body.fx-aim-locked .shield-empty.lab-targetable::after,
body.fx-aim-locked .lab-target-area.lab-targetable::after {
  opacity: .22;
}
body.fx-aim-locked .fx-locked-card.card.lab-targetable::after,
body.fx-aim-locked .fx-locked-card.lab-targetable > .card::after,
body.fx-aim-locked .fx-locked-card.lab-targetable > .play-stack > .stack-unit::after,
body.fx-aim-locked .fx-locked-card.lab-targetable > .play-stack > .stack-pilot::after,
body.fx-aim-locked .fx-locked-card.shield-empty.lab-targetable::after,
body.fx-aim-locked .fx-locked-card.lab-target-area.lab-targetable::after {
  opacity: 1;
}
.fx-eff-target {
  --eff-c: var(--c-game-damage);
}
.fx-eff-target.card,
.fx-eff-target.shield-card,
.fx-eff-target > .card,
.fx-eff-target > .play-stack > .stack-unit,
.fx-eff-target > .play-stack > .stack-pilot {
  overflow: visible;
  border-radius: 6px;
}
.fx-eff-target.card::after,
.fx-eff-target.shield-card::after,
.fx-eff-target > .card::after,
.fx-eff-target > .play-stack > .stack-unit::after,
.fx-eff-target > .play-stack > .stack-pilot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 12px 3px var(--eff-c);
  opacity: .8;
}
.lab-target-area {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 39;
  border-radius: 6px;
  background: transparent;
}
:root {
  --screen-fx-pulse-period: 1.6s;
  --fx-pulse-t: var(--screen-fx-pulse-period);
  --screen-fx-scan-pitch: 5px;
  --screen-fx-scan-line: 2px;
  --screen-fx-scan-trough: 0.28;
  --fx-scan-cover-alpha: 28%;
  --screen-fx-glow-core-blur: 4px;
  --screen-fx-glow-core-opacity: 89%;
  --screen-fx-glow-bloom-blur: 17px;
  --screen-fx-glow-bloom-opacity: 73%;
  --screen-fx-glow-core-spread: 2px;
  --screen-fx-glow-bloom-spread: 5px;
  --screen-fx-ink-brightness: 1.15;
  --screen-fx-ink-saturation: 1;
  --screen-fx-glow-brightness: 1;
  --screen-fx-glow-saturation: 1.15;
  --screen-fx-line-width: 2px;
  --screen-fx-frame-corner-size: 26%;
  --screen-fx-frame-corner-max: 24px;
  --screen-fx-frame-triangle-size: 6px;
  --screen-fx-frame-triangle-offset: -2px;
  --screen-fx-line-aim-dash: 3px;
  --screen-fx-line-aim-gap: 8px;
  --screen-fx-line-trace-outer-width: 14px;
  --screen-fx-line-trace-body-width: 8px;
  --screen-fx-line-trace-core-width: 3.5px;
  --screen-fx-line-trace-outer-opacity: 0.45;
  --screen-fx-label-font: var(--font-display);
  --screen-fx-label-weight: 900;
  --screen-fx-label-scale: 0.85;
  --screen-fx-letter-spacing: 0.5px;
  --screen-fx-label-size: 13px;
  --screen-fx-label-aim-size: 11px;
  --screen-fx-label-aim-opacity: 0.85;
  --screen-fx-label-action-size: 12px;
  --screen-fx-label-damage-number-size: 22px;
  --screen-fx-label-damage-caption-size: 10px;
  --screen-fx-label-damage-gap: 4px;
  --fx-scan-pitch: var(--screen-fx-scan-pitch);
  --fx-scan-phase: 0;
}
.screen-fx-canvas {
  display: none !important;
}
html.glow-render-canvas .bg-track > span {
  --wm-hybrid-glow-c: hsl(from var(--wm-glow-col) h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
  color: transparent !important;
  text-shadow: 0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--wm-hybrid-glow-c) var(--screen-fx-glow-core-opacity), transparent) !important;
}
.screen-fx-glow,
.screen-fx-line-color {
  --ret-line-ink-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-ink-saturation)) calc(l * var(--screen-fx-ink-brightness)));
  --ret-line-glow-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
}
.screen-fx-glow {
  filter: drop-shadow(0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--ret-line-glow-c) var(--screen-fx-glow-core-opacity), transparent)) drop-shadow(0 0 var(--screen-fx-glow-bloom-blur) color-mix(in srgb, var(--ret-line-glow-c) var(--screen-fx-glow-bloom-opacity), transparent));
}
html.glow-render-canvas body.fx-aim-active #pb-aim-svg .screen-fx-glow {
  filter: drop-shadow(0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--ret-line-glow-c) var(--screen-fx-glow-core-opacity), transparent));
}
.fx-screen-glow-mask {
  --fx-local-scan-pitch: var(--screen-fx-scan-pitch);
  --fx-local-scan-line: var(--screen-fx-scan-line);
  --fx-local-scan-origin-y: 0px;
  --fx-local-scan-dir: 1;
  --fx-local-scan-angle: 0deg;
  -webkit-mask-image:
    repeating-linear-gradient(
      var(--fx-local-scan-angle),
      rgba(0, 0, 0, 1) 0 var(--fx-local-scan-line),
      rgba(0, 0, 0, var(--screen-fx-scan-trough)) var(--fx-local-scan-line) var(--fx-local-scan-pitch));
  mask-image:
    repeating-linear-gradient(
      var(--fx-local-scan-angle),
      rgba(0, 0, 0, 1) 0 var(--fx-local-scan-line),
      rgba(0, 0, 0, var(--screen-fx-scan-trough)) var(--fx-local-scan-line) var(--fx-local-scan-pitch));
  -webkit-mask-position: 0 calc(var(--fx-local-scan-pitch) * var(--fx-scan-phase) * var(--fx-local-scan-dir) - var(--fx-local-scan-origin-y));
  mask-position: 0 calc(var(--fx-local-scan-pitch) * var(--fx-scan-phase) * var(--fx-local-scan-dir) - var(--fx-local-scan-origin-y));
}
.fx-ret,
.fx-ret-label {
  --ret-c: var(--c-game-damage);
  --ret-frame-ink-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-ink-saturation)) calc(l * var(--screen-fx-ink-brightness)));
  --ret-frame-glow-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
  --fx-ret-glow: drop-shadow(0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--ret-frame-glow-c) var(--screen-fx-glow-core-opacity), transparent)) drop-shadow(0 0 var(--screen-fx-glow-bloom-blur) color-mix(in srgb, var(--ret-frame-glow-c) var(--screen-fx-glow-bloom-opacity), transparent));
}
.fx-ret {
  position: fixed;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 117;
  filter: var(--fx-ret-glow);
  transition: opacity .35s;
}
.fx-ret.no-anim {
  transition: opacity .35s;
}
@keyframes fxAimInvalidCollapseK {
  from {
    scale: 1;
    opacity: 1;
  }
  to {
    scale: 0;
    opacity: 0;
  }
}
.fx-ret.fx-aim-ret {
  scale: 1;
  transform-origin: center;
  transition: none;
  will-change: scale, opacity;
}
.fx-ret.fx-aim-ret.aim-invalid {
  animation: fxAimInvalidCollapseK .08s ease-in forwards;
}
.fx-ret .fr-c {
  position: absolute;
  border: var(--screen-fx-line-width) solid var(--ret-frame-ink-c, var(--ret-c));
  width: var(--screen-fx-frame-corner-size);
  height: var(--screen-fx-frame-corner-size);
  max-width: var(--screen-fx-frame-corner-max);
  max-height: var(--screen-fx-frame-corner-max);
}
.fx-ret .fr-tl {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
.fx-ret .fr-tr {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
}
.fx-ret .fr-bl {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
}
.fx-ret .fr-br {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}
.fx-ret .fr-t {
  position: absolute;
  width: 0;
  height: 0;
  border: var(--screen-fx-frame-triangle-size) solid transparent;
}
.fx-ret .fr-tt {
  top: var(--screen-fx-frame-triangle-offset);
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--ret-frame-ink-c, var(--ret-c));
  border-bottom: 0;
}
.fx-ret .fr-tb {
  bottom: var(--screen-fx-frame-triangle-offset);
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--ret-frame-ink-c, var(--ret-c));
  border-top: 0;
}
.fx-ret .fr-tle {
  left: var(--screen-fx-frame-triangle-offset);
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--ret-frame-ink-c, var(--ret-c));
  border-right: 0;
}
.fx-ret .fr-tre {
  right: var(--screen-fx-frame-triangle-offset);
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--ret-frame-ink-c, var(--ret-c));
  border-left: 0;
}
.fx-area-scan {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 3px;
  opacity: 0;
  transition: opacity var(--area-scan-fade, 180ms) ease;
  --area-scan-ink-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-ink-saturation)) calc(l * var(--screen-fx-ink-brightness)));
  --area-scan-glow-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
  filter: drop-shadow(0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--area-scan-glow-c) var(--screen-fx-glow-core-opacity), transparent)) drop-shadow(0 0 var(--screen-fx-glow-bloom-blur) color-mix(in srgb, var(--area-scan-glow-c) var(--screen-fx-glow-bloom-opacity), transparent));
}
.fx-area-scan.fx-on {
  opacity: 1;
}
.fx-area-scan:not([data-action]),
.fx-area-word {
  background:
    repeating-linear-gradient(
      var(--area-word-scan-angle, 0deg),
      color-mix(in srgb, var(--area-scan-ink-c) var(--area-word-ink-pct, 22%), transparent) 0 var(--screen-fx-scan-line),
      color-mix(in srgb, var(--area-scan-ink-c) calc(var(--screen-fx-scan-trough) * var(--area-word-ink-pct, 22%)), transparent) var(--screen-fx-scan-line) var(--screen-fx-scan-pitch));
}
.fx-area-word {
  position: absolute;
  left: 50%;
  top: 50%;
  font: 900 100px/1 var(--font-display);
  white-space: nowrap;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  transform: translate(-50%, -50%);
  background-image:
    repeating-linear-gradient(
      var(--area-word-scan-angle, 0deg),
      var(--ret-c) 0 var(--screen-fx-scan-line),
      transparent var(--screen-fx-scan-line) var(--screen-fx-scan-pitch));
  opacity: var(--area-word-ink, .5);
}
.fx-area-scan[data-action=ATTACK] .fx-area-word {
  transform: translate(-50%, -50%) rotate(90deg);
  --area-word-scan-angle: 90deg;
  --area-word-ink: .8;
}
.fx-area-scan[data-action=ATTACK] {
  z-index: 115;
}
.fx-link-word {
  position: fixed;
  z-index: 116;
  pointer-events: none;
  translate: -50% -50%;
  --ret-c: var(--c-game-link);
  --link-word-glow-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
  filter: drop-shadow(0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--link-word-glow-c) var(--screen-fx-glow-core-opacity), transparent)) drop-shadow(0 0 var(--screen-fx-glow-bloom-blur) color-mix(in srgb, var(--link-word-glow-c) var(--screen-fx-glow-bloom-opacity), transparent)) drop-shadow(0 0 3px color-mix(in srgb, var(--c-ink-dark) 90%, transparent)) drop-shadow(0 0 8px color-mix(in srgb, var(--c-ink-dark) 70%, transparent));
  animation: fxLinkWordK 1.5s linear forwards;
}
.fx-link-word > span {
  display: block;
  white-space: nowrap;
  font: 900 100px/1 var(--font-display);
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--ret-c) 0 var(--screen-fx-scan-line),
      transparent var(--screen-fx-scan-line) var(--screen-fx-scan-pitch));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@keyframes fxLinkWordK {
  0% {
    scale: .1 .1;
    opacity: 1;
    animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
  }
  5% {
    scale: 1 .1;
    opacity: 1;
    animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
  }
  10% {
    scale: 1 1;
    opacity: 1;
  }
  10.5% {
    opacity: .15;
  }
  11.5% {
    opacity: .15;
  }
  12% {
    opacity: 1;
  }
  12.7% {
    opacity: 1;
  }
  13.2% {
    opacity: .25;
  }
  14.2% {
    opacity: .25;
  }
  14.7% {
    scale: 1 1;
    opacity: 1;
  }
  100% {
    scale: 1 1;
    opacity: 0;
  }
}
html.action-feedback-off .fx-area-scan {
  display: none;
}
.fx-ret-label {
  --fx-lab-k: clamp(0.62, calc(var(--table-scale, 1) / 0.6), 1);
  position: fixed;
  z-index: 117;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--screen-fx-label-font);
  font-weight: var(--screen-fx-label-weight);
  font-size: calc(var(--screen-fx-label-size) * var(--fx-lab-k) * var(--screen-fx-label-scale));
  letter-spacing: calc(var(--screen-fx-letter-spacing) * var(--fx-lab-k) * var(--screen-fx-label-scale));
  --ret-c: var(--c-game-damage);
  --ret-label-ink-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-ink-saturation)) calc(l * var(--screen-fx-ink-brightness)));
  --ret-label-glow-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
  color: var(--ret-label-ink-c, var(--ret-c));
  transform: translate(-50%, -100%);
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, .98), 0 0 3.5px rgba(0, 0, 0, .92);
  --fx-ret-glow: drop-shadow(0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--ret-label-glow-c) var(--screen-fx-glow-core-opacity), transparent)) drop-shadow(0 0 var(--screen-fx-glow-bloom-blur) color-mix(in srgb, var(--ret-label-glow-c) var(--screen-fx-glow-bloom-opacity), transparent));
  filter: var(--fx-ret-glow);
  transition: opacity .35s;
}
.fx-ret-label.aim {
  font-size: calc(var(--screen-fx-label-aim-size) * var(--fx-lab-k) * var(--screen-fx-label-scale));
  letter-spacing: calc(var(--screen-fx-letter-spacing) * var(--fx-lab-k) * var(--screen-fx-label-scale));
  opacity: var(--screen-fx-label-aim-opacity);
}
.fx-ret-label.cand-hand-lab {
  font-size: calc(var(--screen-fx-label-action-size) * var(--fx-lab-k) * var(--screen-fx-label-scale));
  letter-spacing: calc(var(--screen-fx-letter-spacing) * var(--fx-lab-k) * var(--screen-fx-label-scale));
}
.fx-ret-label.below {
  transform: translate(-50%, 0);
}
.fx-ret-label.no-anim {
  transition: opacity .35s;
}
.fx-ret-label.fx-aim-ret {
  transition: opacity .08s linear;
}
.fx-ret-label.fx-aim-ret.aim-invalid {
  opacity: 0;
  transition: none;
}
.fx-atk-ret.fx-superseded {
  opacity: 0 !important;
  transition: none !important;
}
.fx-ret-label.compound {
  display: inline-flex;
  align-items: center;
  gap: var(--screen-fx-label-damage-gap);
  letter-spacing: 0;
}
.fx-ret-label.compound .fx-num {
  font-size: calc(var(--screen-fx-label-damage-number-size) * var(--fx-lab-k) * var(--screen-fx-label-scale));
  line-height: .95;
  letter-spacing: 0;
}
.fx-ret-label.compound .fx-cap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: calc(var(--screen-fx-label-damage-caption-size) * var(--fx-lab-k) * var(--screen-fx-label-scale));
  letter-spacing: calc(var(--screen-fx-letter-spacing) * var(--fx-lab-k) * var(--screen-fx-label-scale));
  line-height: 1.08;
}
.fx-ret-label.compound.aim {
  transform: translate(-50%, -100%) scale(.86);
}
.fx-ret-label.compound.below {
  transform: translate(-50%, 0);
}
@keyframes fxGlintK {
  0% {
    filter: brightness(2.4);
  }
  100% {
    filter: brightness(1);
  }
}
.fx-ret.fx-selected,
.fx-ret-label.fx-selected {
  animation: fxGlintK var(--game-glint-in, 260ms) ease-out;
}
.fx-ret.fx-impact,
.fx-ret-label.fx-impact {
  animation: fxGlintK var(--game-glint-hit, 320ms) ease-out;
}
@keyframes fxClickWhiteK {
  0% {
    filter: brightness(3.2) saturate(0);
    opacity: 1;
  }
  100% {
    filter: brightness(1) saturate(1);
    opacity: 1;
  }
}
.fx-ret.fx-click-flash {
  opacity: 1 !important;
  animation: fxClickWhiteK 360ms ease-out !important;
}
#candRetLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 115;
}
.fx-ret.fx-cand-ret.fx-hand-local {
  --fx-hand-local-k: calc(1 / var(--table-scale, 1));
  --fx-hand-local-out: calc(2px * var(--fx-hand-local-k));
  position: absolute;
  left: calc(-1 * var(--fx-hand-local-out));
  top: calc(-1 * var(--fx-hand-local-out));
  width: calc(100% + 2 * var(--fx-hand-local-out));
  height: calc(100% + 2 * var(--fx-hand-local-out));
  transform: none;
  z-index: 3;
  filter: drop-shadow(0 0 calc(var(--screen-fx-glow-core-blur) * var(--fx-hand-local-k)) color-mix(in srgb, var(--ret-frame-glow-c) var(--screen-fx-glow-core-opacity), transparent)) drop-shadow(0 0 calc(var(--screen-fx-glow-bloom-blur) * var(--fx-hand-local-k)) color-mix(in srgb, var(--ret-frame-glow-c) var(--screen-fx-glow-bloom-opacity), transparent));
}
.fx-ret.fx-cand-ret.fx-hand-local.cand-primed {
  --fx-hand-local-out: calc(5px * var(--fx-hand-local-k));
}
.fx-ret.fx-cand-ret.fx-hand-local .fr-c {
  border-width: calc(var(--screen-fx-line-width) * var(--fx-hand-local-k));
  max-width: calc(var(--screen-fx-frame-corner-max) * var(--fx-hand-local-k));
  max-height: calc(var(--screen-fx-frame-corner-max) * var(--fx-hand-local-k));
}
.fx-ret.fx-cand-ret.fx-hand-local .fr-t {
  border-width: calc(var(--screen-fx-frame-triangle-size) * var(--fx-hand-local-k));
}
.fx-ret.fx-cand-ret .fr-t {
  display: none;
}
.fx-ret.fx-cand-ret {
  opacity: .8;
}
.fx-ret.fx-cand-ret.cand-primed {
  opacity: 1;
}
.fx-ret.fx-cand-ret.cand-primed .fr-t {
  display: block;
}
.fx-ret.fx-cand-ret.cand-hidden {
  opacity: 0;
  animation: none;
}
.fx-ret.fx-cand-ret.cand-retiring {
  opacity: .76;
  animation: none !important;
}
.fx-ret.fx-cand-ret.cand-aim-source,
.fx-ret.fx-cand-ret.cand-selected {
  opacity: 1;
}
.fx-ret.fx-cand-ret.cand-aim-source .fr-t,
.fx-ret.fx-cand-ret.cand-selected .fr-t {
  display: block;
}
.fx-ret.fx-cand-ret.cand-aim-source {
  animation: none;
}
.fx-ret.fx-cand-ret.cand-selected {
  animation: fxGlintK var(--game-glint-in, 260ms) ease-out;
}
html.action-feedback-off .fx-ret.fx-cand-ret.cand-selected {
  animation: none;
  opacity: .8;
}
html.action-feedback-off .fx-ret.fx-cand-ret.cand-selected .fr-t {
  display: none;
}
body.fx-aim-locked .fx-ret.fx-cand-ret:not(.cand-retired):not(.cand-eclipsed):not(.cand-aim-source):not(.cand-selected) {
  opacity: .32;
}
.fx-ret.fx-cand-ret.cand-retired,
.fx-ret.fx-cand-ret.cand-eclipsed {
  opacity: 0;
  animation: none;
}
.cand-dual {
  color: var(--a);
  animation: none;
}
.fx-ret.fx-cand-ret.cand-split-a.split-v {
  clip-path: inset(0 0 50% 0);
}
.fx-ret.fx-cand-ret.cand-split-b.split-v {
  clip-path: inset(50% 0 0 0);
}
.fx-ret.fx-cand-ret.cand-split-a.split-h {
  clip-path: inset(0 50% 0 0);
}
.fx-ret.fx-cand-ret.cand-split-b.split-h {
  clip-path: inset(0 0 0 50%);
}
.fx-ret.fx-cand-ret.cand-split-a,
.fx-ret.fx-cand-ret.cand-split-b {
  transition: opacity .12s;
}
.fx-ret.fx-cand-ret.cand-split-a.action-half-0,
.fx-ret.fx-cand-ret.cand-split-b.action-half-1 {
  opacity: 1;
}
.fx-ret.fx-cand-ret.cand-split-b.action-half-0,
.fx-ret.fx-cand-ret.cand-split-a.action-half-1 {
  opacity: .56;
}
.fx-ret.fx-cand-ret.cand-split-a.cand-hidden,
.fx-ret.fx-cand-ret.cand-split-b.cand-hidden,
.fx-ret.fx-cand-ret.cand-split-a.cand-retired,
.fx-ret.fx-cand-ret.cand-split-b.cand-retired,
.fx-ret.fx-cand-ret.cand-split-a.cand-eclipsed,
.fx-ret.fx-cand-ret.cand-split-b.cand-eclipsed {
  opacity: 0;
}
.fx-ret-label.cand-hand-lab.cand-hidden {
  opacity: 0;
}
body.fx-aim-active .fx-ret-label.cand-hand-lab {
  opacity: 0 !important;
}
.fx-ret-label.cand-lab {
  --ret-c: var(--a);
}
.fx-ret-label.cand-lab > span:first-child {
  --ret-c: var(--a);
  --ret-label-ink-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-ink-saturation)) calc(l * var(--screen-fx-ink-brightness)));
  --ret-label-glow-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
  color: var(--ret-label-ink-c, var(--ret-c));
}
.fx-ret-label.cand-lab.cand-lab {
  filter: none;
}
.fx-ret-label.cand-lab.cand-lab > span:first-child {
  filter: var(--fx-ret-glow);
}
.fx-ret-label.cand-lab .p2 {
  --ret-c: var(--b);
  --ret-label-ink-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-ink-saturation)) calc(l * var(--screen-fx-ink-brightness)));
  --ret-label-glow-c: hsl(from var(--ret-c) h calc(s * var(--screen-fx-glow-saturation)) calc(l * var(--screen-fx-glow-brightness)));
  color: var(--ret-label-ink-c, var(--ret-c));
  filter: var(--fx-ret-glow);
}
.fx-ret-label.cand-lab > span:first-child,
.fx-ret-label.cand-lab .p2 {
  --fx-ret-glow: drop-shadow(0 0 var(--screen-fx-glow-core-blur) color-mix(in srgb, var(--ret-label-glow-c) var(--screen-fx-glow-core-opacity), transparent)) drop-shadow(0 0 var(--screen-fx-glow-bloom-blur) color-mix(in srgb, var(--ret-label-glow-c) var(--screen-fx-glow-bloom-opacity), transparent));
}
.fx-ret-label.cand-lab .sl {
  color: #cfd6e0;
  filter: none;
  opacity: .6;
}
.fx-ret-label.cand-lab.action-half-0 .p2,
.fx-ret-label.cand-lab.action-half-1 > span:first-child {
  opacity: .32;
}
.fx-ret-label.cand-lab.action-half-0 > span:first-child {
  opacity: 1;
  filter: var(--fx-ret-glow) brightness(1.35);
}
.fx-ret-label.cand-lab.action-half-1 .p2 {
  opacity: 1;
  filter: var(--fx-ret-glow) brightness(1.35);
}
.fx-ret-label.cand-retired {
  opacity: 0;
}
.tgt-interact {
  color: var(--c-game-interact);
}
.tgt-pair {
  color: var(--c-game-pair);
}
.tgt-link {
  color: var(--c-game-link);
}
.lab-targetable[data-cand-top-kind=interact] {
  color: var(--c-game-interact) !important;
}
.lab-targetable[data-cand-top-kind=pair] {
  color: var(--c-game-pair) !important;
}
.lab-targetable[data-cand-top-kind=link] {
  color: var(--c-game-link) !important;
}
.lab-targetable[data-cand-top-kind=deploy],
.lab-targetable[data-cand-top-kind=trigger] {
  color: var(--c-game-trigger) !important;
}
.lab-targetable[data-cand-top-kind=main],
.lab-targetable[data-cand-top-kind=action],
.lab-targetable[data-cand-top-kind=activate] {
  color: var(--c-game-activate) !important;
}
.lab-targetable[data-cand-top-kind=block] {
  color: var(--c-game-block) !important;
}
.lab-targetable[data-cand-top-kind=attack],
.lab-targetable[data-cand-top-kind=destroy] {
  color: var(--c-game-attack) !important;
}
.lab-targetable[data-cand-top-kind=effect],
.lab-targetable[data-cand-top-kind=damage] {
  color: var(--c-effect-target) !important;
}
.lab-targetable[data-cand-top-kind=rest] {
  color: var(--c-game-rest) !important;
}
.lab-targetable[data-cand-top-kind=discard],
.lab-targetable[data-cand-top-kind=bounce],
.lab-targetable[data-cand-top-kind=unavailable] {
  color: var(--c-game-unavailable) !important;
}
.lab-targetable[data-cand-top-kind=debuff] {
  color: var(--c-game-debuff) !important;
}
.lab-targetable[data-cand-top-kind=buff] {
  color: var(--c-game-buff) !important;
}
.lab-targetable[data-cand-top-kind=heal] {
  color: var(--c-game-heal) !important;
}
.tgt-deploy {
  color: var(--c-game-trigger);
}
.tgt-trigger {
  color: var(--c-game-trigger);
}
.tgt-main,
.tgt-action,
.tgt-activate {
  color: var(--c-game-activate);
}
.tgt-main,
.tgt-action {
  color: var(--c-game-activate);
}
.tgt-block {
  color: var(--c-game-block);
}
.tgt-attack,
.tgt-destroy {
  color: var(--c-game-attack);
}
.tgt-effect,
.tgt-damage {
  color: var(--c-effect-target);
}
.tgt-rest {
  color: var(--c-game-rest);
}
.tgt-discard,
.tgt-bounce,
.tgt-unavailable {
  color: var(--c-game-unavailable);
}
.tgt-debuff {
  color: var(--c-game-debuff);
}
.tgt-buff {
  color: var(--c-game-buff);
}
.tgt-heal {
  color: var(--c-game-heal);
}
.pb-rewind-notice {
  box-sizing: border-box;
  position: absolute;
  z-index: 50;
  left: 50%;
  translate: -50% -50%;
  width: max-content;
  max-width: min(560px, calc(100% - 16px));
  padding: 8px 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  color: var(--c-text-dim);
  background: var(--glass-modal-bg);
  backdrop-filter: var(--glass-modal-blur);
  border: 1px solid var(--c-border-strong);
  border-radius: 8px;
  pointer-events: none;
}
.pb-rewind-notice > div:first-child {
  color: var(--c-text-hi);
  font-weight: 700;
}
.pb-rewind-notice b {
  color: var(--c-text-hi);
}
.pb-rewind-notice svg.tc-ico {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  color: var(--c-text-hi);
}
.pb-effect-context {
  box-sizing: border-box;
  position: absolute;
  z-index: 3;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(860px, calc(100% - 8px));
  margin: 0;
  padding: 7px 14px;
  overflow: visible;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
  font-size: 15px;
  line-height: 1.22;
  color: var(--c-text-dim);
  background: var(--glass-modal-bg);
  backdrop-filter: var(--glass-modal-blur);
  border: 1px solid var(--c-border-strong);
  border-radius: 8px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.pb-effect-context.pb-effect-context-overlay {
  z-index: 118;
}
.pb-effect-context-overlay.pb-fizzle {
  animation: pbFizzleK 2400ms ease-in-out both;
}
@keyframes pbFizzleK {
  0% {
    opacity: 0;
  }
  12%, 88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.pb-effect-context .ec-prompt {
  color: var(--c-text-hi);
  font-weight: 850;
  letter-spacing: .025em;
}
.pb-effect-context .ec-detail {
  display: block;
  min-width: 0;
}
.pb-effect-context .ec-name {
  color: var(--c-text-hi);
  font-weight: 700;
  font-size: 16px;
}
.pb-effect-context.pb-fizzle .ec-name {
  font-weight: 400;
}
.pb-effect-context.pb-fizzle {
  padding: 3px 9px;
}
.pb-effect-context .ec-trigger {
  color: var(--c-text-hi);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pb-effect-context .ec-text {
  color: var(--c-text-muted);
  font-style: italic;
}
.pb-effect-context .ec-part {
  color: var(--c-text-dim);
  opacity: .72;
}
.pb-effect-context .ec-part.ec-current {
  opacity: 1;
  color: var(--c-text-hi);
}
.lab-target-banner {
  position: absolute;
  z-index: 40;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--panel-bg-2) 93.3%, transparent);
  border: 1px solid var(--c-game-interact);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--c-game-interact);
  box-shadow: 0 2px 10px #000a;
}
.lab-target-banner button {
  font-size: 12px;
  padding: 3px 8px;
  background: var(--c-ctrl-3);
  border: 1px solid var(--c-text-faint);
  color: var(--c-text-hi);
  border-radius: 3px;
  cursor: pointer;
}
.lab-target-banner button:hover {
  background: var(--c-ctrl-hi);
}
.card-effect .timing-tag {
  display: inline-block;
  background: var(--c-lz-timing);
  color: var(--c-ink-dark);
  font-weight: 700;
  padding: 0 5px;
  border-radius: 0;
  margin: 1px 1px;
}
.card-effect .keyword-tag {
  display: inline-block;
  background: var(--c-lz-ability);
  color: var(--c-ink-dark);
  font-weight: 700;
  padding: 0 11px;
  margin: 0 1px;
  clip-path: polygon(0 50%, 6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%);
}
.card-passives {
  width: 100%;
  font-size: 10px;
  padding: 4px 8px 6px;
  background: var(--panel-bg);
  border-radius: 3px;
}
.passives-header {
  color: var(--c-text-faint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.passive-row {
  color: var(--c-text-hi);
  padding: 1px 0;
}
.passive-row.buff {
  color: var(--c-game-buff);
}
.passive-row.debuff {
  color: var(--c-game-debuff);
}
.passive-row.heal {
  color: var(--c-game-heal);
}
.passive-row.passive-inactive {
  color: var(--c-text-faint);
}
.passive-cond {
  color: var(--c-text-muted);
  font-style: italic;
}
.passive-src {
  color: var(--c-text-muted);
}
.mod-eff {
  color: var(--c-text-muted);
  font-size: 10px;
  line-height: 1.35;
  margin: 0 0 4px 10px;
  font-style: italic;
}
.empty-viewer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--c-border-strong);
  font-size: 12px;
  text-align: center;
}
.damage-counter {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 60px;
  height: 60px;
  z-index: 13;
  pointer-events: none;
}
.damage-counter .dmg-slash {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 1)) drop-shadow(0 0 1px rgba(0, 0, 0, 1));
}
.damage-counter .dmg-slash-ic {
  position: absolute;
  inset: 0;
  background: var(--c-game-attack);
  -webkit-mask: url(/viewer/fx/damage.png) center / 96% no-repeat;
  mask: url(/viewer/fx/damage.png) center / 96% no-repeat;
}
.damage-counter .dmg-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.35px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 1)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.72));
}
.card-new-badge {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 16;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 8px;
  letter-spacing: 1px;
  line-height: 1;
  padding: 2px 6px 3px;
  border-radius: 3px;
  color: #2a1a00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  background:
    linear-gradient(
      180deg,
      #ffe27a 0%,
      #f4b41a 55%,
      #d8930a 100%);
  border: 1px solid #fff0b0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 8px 1px rgba(244, 180, 26, 0.55);
}
html.new-card-tab-off .card-new-badge {
  display: none;
}
.card-reveal-badge {
  position: absolute;
  top: 3px;
  right: calc(50% + 18px);
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 16;
  pointer-events: none;
  color: var(--c-warn);
  background:
    linear-gradient(
      180deg,
      rgba(37, 46, 60, 0.97),
      rgba(14, 19, 28, 0.97));
  border: 1px solid rgba(207, 224, 246, 0.62);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.78), inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}
.card-reveal-badge .gcg-tbi {
  width: 14px;
  height: 14px;
  display: block;
}
.card:has(> .stat-overlay:not(.detail-stat-overlay)),
.play-stack:has(> .stat-overlay) {
  container-type: inline-size;
}
.stat-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 15;
  font-size: 14.9cqw;
  width: 3em;
  display: grid;
  gap: 0.07em;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.detail-stat-overlay {
  font-size: 9.4cqw;
}
.stat-overlay.with-pilot {
  bottom: -10.6cqw;
}
.stat-box {
  position: relative;
  width: 100%;
  height: 2em;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: rgba(0, 0, 0, 0.94);
  color: #fff;
  --pill-line-k: clamp(1, calc(1 / var(--table-scale, 1)), 4);
  border-radius: 0.357em;
  box-shadow: inset 0 0 0 calc(1.3px * var(--pill-line-k)) rgba(255, 255, 255, 0.92), 0 0.06em 0.3em rgba(0, 0, 0, 0.85);
  font-size: 1em;
  font-weight: 900;
  text-align: center;
  overflow: hidden;
}
.stat-box .ap,
.stat-box .hp {
  min-width: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  color: #fff;
  line-height: 1;
}
.stat-box .hp.damaged {
  color: var(--c-game-attack);
}
.stat-box .ap {
  justify-content: flex-end;
  padding-right: 0.4em;
}
.stat-box .hp {
  justify-content: flex-start;
  padding-left: 0.4em;
}
.stat-box::before {
  content: "";
  position: absolute;
  top: 16%;
  bottom: 16%;
  left: 50%;
  width: calc(1.3px * var(--pill-line-k, 1));
  margin-left: calc(-0.65px * var(--pill-line-k, 1));
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.55) 22%,
      rgba(255, 255, 255, 0.55) 78%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.stat-calc {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 0;
  padding: 0 0.07em 0.05em;
}
.stat-calc-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  font-size: 0.78em;
  line-height: 1.04;
  font-weight: 900;
  text-shadow:
    0 0 0.06em #000,
    0 0 0.12em #000,
    0 0 0.22em rgba(0, 0, 0, 0.96),
    0 0.05em 0.14em #000,
    0.05em 0 0.1em #000,
    -0.05em 0 0.1em #000;
}
.stat-calc-row span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font: inherit;
}
.stat-calc-row .sc-num {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.stat-calc-row .sc-mag,
.stat-calc-row .sc-sign {
  font: inherit;
  font-style: normal;
  line-height: 1;
}
.stat-calc-row .sc-sign {
  position: absolute;
  right: 100%;
  margin-right: 0.1em;
}
.stat-calc-row.base {
  color: #fff;
}
.stat-calc-row.pilot {
  color: var(--c-game-pair);
}
.stat-calc-row.effect {
  color: var(--c-game-buff);
}
.stat-calc-row.damage {
  color: var(--c-game-attack);
}
.board-column {
  position: relative;
}
#uiTweak {
  position: fixed;
  left: 10px;
  top: 64px;
  z-index: 2147483200;
  width: 348px;
  max-width: calc(100vw - 20px);
  display: flex;
  flex-direction: column;
  background: rgba(14, 16, 18, 0.96);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-m, 6px);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.66);
  font-family: var(--mono);
  color: var(--c-text);
}
#uiTweak .ut-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-border);
  cursor: move;
  touch-action: none;
  user-select: none;
  font: 650 10px/1.4 var(--mono);
  letter-spacing: 0.12em;
  color: var(--c-text-faint);
}
#uiTweak .ut-head .ut-title {
  flex: 1 1 auto;
}
#uiTweak .ut-body {
  overflow-y: auto;
  max-height: 70vh;
  padding: 2px 8px 6px;
}
#uiTweak .ut-sec {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#uiTweak .ut-sec:last-child {
  border-bottom: 0;
}
#uiTweak .ut-sec-h {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 7px 2px;
  color: var(--c-text-dim);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#uiTweak .ut-sec-h:hover {
  color: var(--c-text-hi);
}
#uiTweak .ut-sec-h .ut-caret {
  flex: 0 0 9px;
}
#uiTweak .ut-sec-h .ut-count {
  margin-left: auto;
  color: var(--c-text-faint);
  font-weight: 400;
}
#uiTweak .ut-sec.closed .ut-sec-b {
  display: none;
}
#uiTweak .ut-note {
  padding: 0 2px 5px;
  font: 400 9px/1.35 var(--mono);
  color: var(--c-text-faint);
}
#uiTweak .ut-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  font-size: 10px;
}
#uiTweak .ut-dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--c-text-faint);
  background: transparent;
}
#uiTweak .ut-row.on .ut-dot {
  background: var(--c-warn);
  border-color: var(--c-warn);
}
#uiTweak .ut-row.on .ut-lbl {
  color: var(--c-text-hi);
}
#uiTweak .ut-lbl {
  flex: 0 0 98px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-muted);
}
#uiTweak .ut-ed {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
#uiTweak input[type=range] {
  flex: 1 1 auto;
  min-width: 0;
  height: 3px;
  accent-color: var(--c-accent);
}
#uiTweak input[type=color] {
  flex: 0 0 22px;
  width: 22px;
  height: 17px;
  padding: 0;
  border: 1px solid var(--c-border);
  background: none;
  cursor: pointer;
}
#uiTweak input[type=text],
#uiTweak select {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 2px;
  padding: 2px 3px;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font: 400 9px var(--mono);
}
#uiTweak select {
  font-size: 10px;
}
#uiTweak .ut-val {
  flex: 0 0 46px;
  text-align: right;
  color: var(--c-text-dim);
  font-size: 9px;
}
#uiTweak .ut-mini {
  flex: 0 0 auto;
  background: var(--c-panel-2);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  border-radius: 2px;
  cursor: pointer;
  font: 700 10px/1 var(--mono);
  padding: 3px 6px;
}
#uiTweak .ut-mini:hover {
  border-color: var(--c-accent);
  color: var(--c-text-hi);
}
#uiTweak .ut-rst {
  flex: 0 0 auto;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--c-text-faint);
  font-size: 11px;
  line-height: 1;
  padding: 1px 2px;
}
#uiTweak .ut-rst:hover {
  color: var(--c-danger);
}
#uiTweak .ut-alias {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-faint);
  font-size: 9px;
}
#uiTweak .ut-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 8px;
  border-top: 1px solid var(--c-border);
}
#uiTweak .ut-foot button {
  flex: 1 1 auto;
  min-width: 68px;
}
#uiTweak .ut-msg {
  padding: 0 8px 6px;
  min-height: 11px;
  font-size: 9px;
  color: var(--c-text-faint);
}
#uiTweak .ut-msg.ok {
  color: var(--c-success);
}
#uiTweak .ut-msg.err {
  color: var(--c-danger);
}
#uiTweak .ut-rep {
  border-top: 1px solid var(--c-border);
  padding: 5px 8px 7px;
}
#uiTweak .ut-rep-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--c-text-faint);
}
#uiTweak .ut-rep-h .ut-rst {
  margin-left: auto;
}
#uiTweak .ut-rep-b {
  max-height: 200px;
  overflow: auto;
  font: 400 9px/1.45 var(--mono);
  color: var(--c-text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}
#uiTweak .ut-rep-b .hd {
  color: var(--c-text-faint);
  margin-top: 5px;
  letter-spacing: 0.1em;
}
#uiTweak .ut-rep-b .sel {
  color: var(--c-text-muted);
}
#uiTweak .ut-rep-b .k {
  color: var(--c-accent);
}
#uiTweak .ut-rep-b .lit {
  color: var(--c-warn);
}
#uiTweak .ut-rep-b .no {
  color: var(--c-text-faint);
}
#uiTweak .ut-chip {
  margin-left: 6px;
  vertical-align: middle;
  color: var(--c-accent);
  border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-border));
}
#uiTweak .ut-chip:hover {
  color: var(--c-on-accent);
  background: var(--c-accent);
  border-color: var(--c-accent);
}
#uiTweak .ut-row.ut-flash {
  animation: utRowFlash 1.6s ease-out;
}
@keyframes utRowFlash {
  0%, 55% {
    background: color-mix(in srgb, var(--c-warn) 26%, transparent);
    box-shadow: inset 2px 0 0 var(--c-warn);
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}
html.ut-picking,
html.ut-picking * {
  cursor: crosshair !important;
}
.ut-pick-hl {
  position: fixed;
  z-index: 2147483199;
  pointer-events: none;
  border: 1px solid var(--c-accent);
  background: rgba(80, 170, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.bot-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 20;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.15;
  color: var(--c-text);
  background: rgba(18, 18, 18, 0.86);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  padding: 1px 3px;
  max-width: 90px;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}
.bot-badge > div {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 84px;
}
#botDebugPanel {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 460;
  max-width: 320px;
  min-width: 150px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  color: var(--c-text);
  background: var(--glass-bg);
  backdrop-filter: blur(10px) saturate(112%);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  overflow: hidden;
}
#botDebugHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 4px 8px;
  background: var(--c-ctrl-2);
  border-bottom: 1px solid var(--c-border);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--c-accent);
  font-size: 10px;
}
#botDebugCollapse {
  pointer-events: auto;
  cursor: pointer;
  background: var(--c-panel-3);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  padding: 0 6px;
}
#botDebugBody {
  padding: 5px 8px 7px;
  max-height: 46vh;
  overflow-y: auto;
}
#botDebugPanel.collapsed #botDebugBody {
  display: none;
}
#botDebugBody > div {
  white-space: pre;
}
#botDebugBody > div.bdb-opt.chosen {
  color: #7fffa8;
  font-weight: 700;
}
#botDebugBody > div.bdb-dim {
  color: var(--c-text-dim);
}
#botDebugBody > div.bdb-plan-h {
  margin-top: 4px;
  padding-top: 3px;
  color: var(--c-accent);
  font-weight: 700;
  border-top: 1px solid var(--c-border);
}
#botDebugBody > div.bdb-step {
  padding-left: 2px;
}
#botDebugBody > div.bdb-step.now {
  color: #7fffa8;
  font-weight: 700;
}
#botDebugBody > div.bdb-step.later {
  color: var(--c-text-faint);
  font-style: italic;
}
#botDebugBody > div.bdb-note {
  white-space: normal;
  color: var(--c-text-dim);
  font-style: italic;
  font-size: 10px;
  line-height: 1.25;
  margin: 2px 0 1px;
}
#botDebugBody > div.bdb-thought {
  white-space: normal;
  margin-top: 2px;
}
#botDebugBody > div.bdb-thought-label {
  white-space: normal;
  color: var(--c-text-dim);
  margin-top: 4px;
}
#botDebugBody > div.bdb-sep {
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid var(--c-border);
}
.zone-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 2;
  color: var(--c-white);
  font-family: var(--font-display);
  text-shadow:
    0 0 5px #000,
    0 0 10px #000,
    0 0 18px #000,
    0 0 26px #000,
    0 0 34px rgba(0, 0, 0, 0.98),
    0 2px 10px #000,
    0 2px 22px #000,
    1px 0 4px #000,
    -1px 0 4px #000,
    0 -1px 4px #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  text-align: center;
  line-height: 1;
  width: 100%;
  container-type: inline-size;
}
.zone-overlay .zone-label {
  font-size: min(calc(14px * var(--cap-k, 1)), 17cqi);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.zone-overlay .zone-count {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.modal-overlay {
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#botListModal {
  z-index: var(--z-dialog);
  padding: 16px;
  box-sizing: border-box;
}
.bot-list-box {
  position: relative;
  width: min(1060px, 96vw);
  height: min(720px, 92vh);
  display: flex;
  flex-direction: column;
}
.bot-list-box .bot-list-head {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 48px 9px 16px;
}
.bot-list-subtitle {
  margin-top: 2px;
  color: var(--c-text-faint);
  font-size: calc(10px * var(--fs-body, 1));
  line-height: 1.3;
}
.bot-list-body {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(500px, 58%) minmax(0, 1fr);
}
.bot-list-roster {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--c-border);
  background: rgba(8, 8, 8, .22);
}
.bot-family {
  min-width: 0;
  padding: 4px;
  display: grid;
  gap: 10px;
}
div.bot-family-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 2px 0;
  line-height: 1;
}
.bot-family-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-ctrl-3);
}
.bot-family-root {
  width: min(100%, 390px);
  justify-self: center;
  padding: 9px 12px;
  border: 1px solid var(--c-border-strong);
  border-radius: 7px;
  background:
    linear-gradient(
      180deg,
      var(--c-ctrl),
      var(--c-panel));
  text-align: center;
}
.bot-family-root-name {
  color: var(--c-text-hi);
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 800;
  letter-spacing: .3px;
}
.bot-family-root-text {
  margin-top: 2px;
  color: var(--c-text-muted);
  font-size: calc(9px * var(--fs-body, 1));
  line-height: 1.25;
}
.bot-family-origins {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 17px;
}
.bot-family-origins::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16.666%;
  right: 16.666%;
  border-top: 1px solid var(--c-border-strong);
}
.bot-family-origin {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
}
.bot-family-origin::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 50%;
  height: 17px;
  border-left: 1px solid var(--c-border-strong);
}
.bot-family-history-link {
  width: min(100%, 390px);
  justify-self: center;
  padding: 4px 8px;
  border-top: 1px dashed var(--c-text-faint);
  color: var(--c-text-faint);
  font-size: calc(8px * var(--fs-body, 1));
  line-height: 1.25;
  text-align: center;
}
.bot-family-trunk {
  display: grid;
  justify-items: center;
}
.bot-family-flow {
  min-height: 30px;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--c-text-faint);
  font-size: calc(9px * var(--fs-body, 1));
  line-height: 1.15;
  text-align: center;
}
.bot-family-flow::before {
  content: "↓";
  color: var(--c-warn);
  font-size: calc(13px * var(--fs-body, 1));
  line-height: 1;
}
.bot-family-fork {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding-top: 17px;
}
.bot-family-fork::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  border-top: 1px solid var(--c-border-strong);
}
.bot-family-arm {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
}
.bot-family-arm::before {
  content: "";
  position: absolute;
  top: -17px;
  left: 50%;
  height: 17px;
  border-left: 1px solid var(--c-border-strong);
}
.bot-family-branch-label {
  min-height: 22px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  color: var(--c-text-faint);
  font-size: calc(8px * var(--fs-body, 1));
  line-height: 1.2;
  text-align: center;
}
.bot-family-independent {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.bot-family-independent .bot-meter,
.bot-family-origin .bot-meter {
  grid-template-columns: 88px minmax(24px, 1fr);
  gap: 5px;
}
.bot-family-independent .bot-meter-value,
.bot-family-origin .bot-meter-value {
  display: none;
}
.bot-family-node {
  width: 100%;
  margin: 0;
}
.bot-family-trunk .bot-family-node {
  width: min(100%, 390px);
}
.bot-family-origin .bot-profile-status {
  display: none;
}
.bot-family-node .bot-profile-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-family-node.current .bot-profile-name::before {
  content: "●";
  margin-right: 5px;
  color: var(--c-accent);
  font-size: calc(7px * var(--fs-body, 1));
  vertical-align: 2px;
}
.bot-family-node.unfair:not(.selected) {
  border-color: rgba(255, 119, 119, .35);
}
.bot-family-node.unfair .bot-profile-status {
  color: #ff7777;
}
.bot-family-newtype-link {
  margin-top: 1px;
}
.bot-roster-item {
  width: calc(100% - 6px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 3px 4px;
  padding: 5px 8px;
  border: 1px solid var(--c-border-subtle);
  border-radius: 6px;
  background: var(--c-panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.bot-roster-item:hover {
  background: var(--c-ctrl);
  border-color: var(--c-border-strong);
}
.bot-roster-item.selected {
  border-color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 14%, var(--c-panel-3));
  box-shadow: inset 3px 0 0 var(--c-accent);
}
.bot-roster-item.current .bot-profile-name::before {
  content: "●";
  margin-right: 5px;
  color: var(--c-accent);
  font-size: calc(7px * var(--fs-body, 1));
  vertical-align: 2px;
}
.bot-profile-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bot-profile-name {
  color: var(--c-text-hi);
  font-size: calc(13px * var(--fs-body, 1));
  font-weight: 800;
}
.bot-profile-version {
  color: var(--c-text-faint);
  font: 9px var(--mono);
  font-size: calc(9px * var(--fs-mono, 1));
}
.bot-profile-status {
  margin-left: auto;
  color: var(--c-success);
  font-size: calc(9px * var(--fs-body, 1));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.bot-profile-status.unfair {
  color: #ff7777;
}
.bot-profile-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.bot-profile-badge.unfair {
  color: var(--c-danger);
  border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-border));
  background: color-mix(in srgb, var(--c-danger) 10%, var(--c-panel-2));
}
.bot-profile-summary {
  color: var(--c-text);
  font-size: calc(12px * var(--fs-body, 1));
  line-height: 1.4;
}
.bot-profile-meters {
  display: grid;
  gap: 5px;
  padding: 7px 0;
  border-top: 1px solid var(--c-border-subtle);
  border-bottom: 1px solid var(--c-border-subtle);
}
.bot-meter {
  display: grid;
  grid-template-columns: 110px minmax(56px, 1fr) 90px;
  gap: 7px;
  align-items: center;
}
.bot-meter-label {
  color: var(--c-text-faint);
  font-size: calc(9px * var(--fs-body, 1));
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
  white-space: nowrap;
}
.bot-meter-track {
  height: 7px;
  display: grid;
  grid-template-columns: repeat(10, minmax(2px, 1fr));
  gap: 2px;
}
.bot-meter-segment {
  min-width: 2px;
  background: var(--c-panel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.bot-meter.quality .bot-meter-segment.on {
  background: #a97aeb;
}
.bot-meter.speed .bot-meter-segment.on {
  background: #4aca8d;
}
.bot-meter.horizon .bot-meter-segment.on {
  background: #e89a48;
}
.bot-meter.visibility .bot-meter-segment.on {
  background: #64a9d8;
}
.bot-meter.hidden .bot-meter-segment.on {
  background: #ff7777;
}
.bot-meter-value {
  overflow: hidden;
  color: var(--c-text-dim);
  font-size: calc(9px * var(--fs-body, 1));
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-roster-item .bot-profile-meters {
  gap: 0;
  padding: 0;
  border: 0;
}
.bot-roster-item .bot-meter {
  grid-template-columns: 110px minmax(56px, 1fr) 82px;
  gap: 7px;
  min-height: 12px;
}
.bot-roster-item .bot-meter-label {
  font-size: calc(8px * var(--fs-body, 1));
  line-height: 12px;
}
.bot-roster-item .bot-meter-value {
  font-size: calc(10px * var(--fs-body, 1));
  line-height: 12px;
}
.bot-roster-item .bot-meter-track {
  height: 4px;
}
.bot-detail {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bot-detail-empty {
  margin: auto;
  color: var(--c-text-faint);
  font-size: calc(12px * var(--fs-body, 1));
}
.bot-detail .bot-profile-name {
  font-size: calc(22px * var(--fs-body, 1));
}
.bot-detail .bot-profile-version {
  font-size: calc(12px * var(--fs-body, 1));
}
.bot-detail .bot-profile-summary {
  font-size: calc(14px * var(--fs-body, 1));
  color: var(--c-text-hi);
}
.bot-detail-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bot-detail-section.wide {
  grid-column: 1 / -1;
}
.bot-detail-text {
  color: var(--c-text-muted);
  font-size: calc(11px * var(--fs-body, 1));
  line-height: 1.48;
}
.bot-detail-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  gap: 4px;
  color: var(--c-text-muted);
  font-size: calc(11px * var(--fs-body, 1));
  line-height: 1.4;
}
.bot-visibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.bot-visibility-title {
  margin-bottom: 5px;
  color: var(--c-text-dim);
  font-size: calc(9px * var(--fs-body, 1));
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
}
.bot-detail-list .cheat {
  color: #ff7777;
}
.bot-cheat-tag {
  margin-left: 5px;
  padding: 1px 4px;
  border: 1px solid #7a3e3e;
  border-radius: 7px;
  background: #321d1d;
  color: #ff9a9a;
  font-size: calc(8px * var(--fs-body, 1));
  font-weight: 800;
  letter-spacing: .5px;
}
.bot-lookahead-facts {
  display: grid;
  grid-template-columns: 1.15fr 1.4fr 1fr;
  gap: 7px;
  margin-bottom: 8px;
}
.bot-lookahead-fact {
  padding: 6px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .025);
}
.bot-lookahead-key {
  color: var(--c-text-faint);
  font-size: calc(8px * var(--fs-body, 1));
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
}
.bot-lookahead-value {
  margin-top: 2px;
  color: var(--c-text);
  font-size: calc(10px * var(--fs-body, 1));
  line-height: 1.3;
}
.bot-profile-use {
  flex: none;
  margin-top: auto;
  width: 100%;
  padding: 9px 11px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-accent) 20%, var(--c-panel-2));
  border: 1px solid color-mix(in srgb, var(--c-accent) 33%, var(--c-border));
  color: color-mix(in srgb, var(--c-accent) 24%, #fff);
  font-size: calc(11px * var(--fs-body, 1));
  font-weight: 700;
  cursor: pointer;
}
.bot-profile-use:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-accent) 35%, var(--c-panel-2));
  border-color: var(--c-accent);
}
.bot-profile-use:disabled {
  opacity: .42;
  cursor: not-allowed;
}
.bot-list-foot {
  flex: none;
  min-height: 56px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .24);
}
.bot-list-foot-selection {
  min-width: 0;
  margin-right: auto;
  color: var(--c-text-muted);
  font-size: calc(11px * var(--fs-body, 1));
}
.bot-list-foot-selection strong {
  color: var(--c-text-hi);
}
.bot-list-foot-action {
  flex: 0 0 min(280px, 42vw);
}
.bot-list-foot-action .bot-profile-use {
  margin: 0;
  text-align: center;
}
@media (max-width: 760px) {
  #botListModal {
    padding: 8px;
  }
  .bot-list-box {
    width: 100%;
    height: 94vh;
  }
  .bot-list-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(250px, 48%) minmax(0, 1fr);
  }
  .bot-list-roster {
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
  }
  .bot-detail {
    padding: 12px;
  }
  .bot-detail-sections {
    grid-template-columns: 1fr;
  }
  .bot-detail-section.wide {
    grid-column: auto;
  }
  .bot-visibility-grid,
  .bot-lookahead-facts {
    grid-template-columns: 1fr;
  }
  .bot-list-foot {
    min-height: 62px;
    padding: 7px 10px;
  }
  .bot-list-foot-action {
    flex-basis: min(240px, 52vw);
  }
}
@media (max-width: 480px) {
  .bot-family-fork,
  .bot-family-independent,
  .bot-family-origins {
    grid-template-columns: 1fr;
  }
  .bot-family-independent .bot-meter,
  .bot-family-origin .bot-meter {
    grid-template-columns: 110px minmax(56px, 1fr) 82px;
    gap: 7px;
  }
  .bot-family-independent .bot-meter-value,
  .bot-family-origin .bot-meter-value {
    display: block;
  }
  .bot-family-fork,
  .bot-family-origins {
    padding-top: 0;
  }
  .bot-family-fork::before,
  .bot-family-arm::before,
  .bot-family-origins::before,
  .bot-family-origin::before {
    display: none;
  }
  .bot-family-arm + .bot-family-arm {
    margin-top: 7px;
  }
  .bot-list-foot {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }
  .bot-list-foot-selection {
    width: 100%;
    text-align: center;
  }
  .bot-list-foot-action {
    flex: none;
    width: 100%;
  }
}
#cardPickerModal {
  z-index: 1100;
}
#modalTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}
.modal-shuffle-btn {
  margin-left: auto;
  font-size: calc(12px * var(--fs-body, 1));
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  background: var(--c-panel-3);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-weight: 600;
}
.modal-shuffle-btn:hover {
  background: var(--c-ctrl-3);
  border-color: var(--c-text-faint);
}
.modal-box {
  width: 94vw;
  max-width: 1500px;
  height: 88vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  flex-shrink: 0;
}
.modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
}
.modal-grid-col {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
#inspectorModal .modal-box {
  position: relative;
  width: max-content;
  min-width: min(340px, 88vw);
  max-width: min(94vw, 1200px);
  height: auto;
  max-height: 88vh;
}
body:where(.st-play-detail-right):is(#st.st.st, *) #inspectorModal {
  right: 0;
  background: transparent;
  pointer-events: none;
}
body:where(.st-play-detail-right):is(#st.st.st, *) #inspectorModal::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--dock-w) + var(--shell-pad) + var(--shell-pad)) 0 0;
  background: var(--scrim);
  pointer-events: auto;
}
body:where(.st-play-detail-right):is(#st.st.st, *) #inspectorModal .modal-box {
  width: 836px;
  max-width: calc(100vw - var(--dock-w) - 24px);
  z-index: 1;
  pointer-events: auto;
}
body:where(.st-play-detail-right):is(#st.st.st, *) #inspectorModal .card {
  width: 126px;
  height: 176px;
}
body:where(.st-play-detail-float):is(#st.st.st.st, *) #inspectorModal .modal-box {
  width: 612px;
  max-width: 94vw;
}
body:where(.st-play-detail-float):is(#st.st.st.st, *) #inspectorModal .card {
  width: 108px;
  height: 151px;
}
.modal-close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 3;
  line-height: 1;
  font-size: calc(22px * var(--fs-body, 1));
}
#inspectorModal .modal-header {
  padding-right: 44px;
}
#inspectorModal .modal-shuffle-btn {
  position: absolute;
  top: 6px;
  right: 44px;
  z-index: 3;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
body:where(.st-play-narrow):is(#st.st, *) #inspectorModal .modal-box {
  width: max-content;
  min-width: min(300px, 88vw);
  max-width: 92vw;
  height: auto;
  max-height: 68vh;
}
.ui-toast-host {
  position: fixed;
  z-index: var(--z-notice);
  left: 50%;
  bottom: calc(max(72px, calc(96px * var(--gcg-ui-density))) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(4px, calc(6px * var(--gcg-ui-density)));
  pointer-events: none;
  max-width: min(86vw, 440px);
}
.ui-toast {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: max(5px, calc(7px * var(--gcg-ui-density))) max(26px, calc(30px * var(--gcg-ui-density))) max(5px, calc(7px * var(--gcg-ui-density))) max(10px, calc(14px * var(--gcg-ui-density)));
  border-radius: 8px;
  background: var(--c-panel);
  border: 1px solid var(--c-border-subtle);
  border-left: 4px solid var(--c-accent);
  color: var(--c-text);
  font-size: calc(12px * var(--fs-body, 1));
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity .18s ease;
}
.ui-toast.show {
  opacity: 1;
}
.ui-toast.ui-toast-good {
  border-left-color: var(--c-success);
}
.ui-toast.ui-toast-err {
  border-left-color: var(--c-danger);
  color: var(--c-danger-2);
}
.ui-toast-msg {
  min-width: 0;
  white-space: pre-line;
}
.ui-drop-host {
  position: fixed;
  z-index: var(--z-notice);
  top: max(var(--drop-top, 0px), env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8px * var(--gcg-ui-density));
  padding-top: calc(10px * var(--gcg-ui-density));
  pointer-events: none;
  width: min(92vw, 520px);
}
.ui-drop {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  opacity: 0;
  transform: translateY(calc(-100% - 14px));
  transition: transform .26s cubic-bezier(.2, .8, .25, 1), opacity .2s ease;
}
.ui-drop.show {
  opacity: 1;
  transform: translateY(0);
}
.ui-drop:has(> .qcard) {
  width: 100%;
}
.ui-drop > .qcard {
  padding-right: 30px;
}
.ui-drop:has(> .xpgain) {
  width: 100%;
}
.ui-drop-note {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: max(5px, calc(7px * var(--gcg-ui-density))) max(26px, calc(30px * var(--gcg-ui-density))) max(5px, calc(7px * var(--gcg-ui-density))) max(10px, calc(14px * var(--gcg-ui-density)));
  border-radius: 8px;
  background: var(--c-panel);
  border: 1px solid var(--c-border-subtle);
  border-left: 4px solid var(--c-accent);
  color: var(--c-text);
  font-size: calc(12px * var(--fs-body, 1));
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  white-space: pre-line;
}
.ui-drop-note.ui-drop-good {
  border-left-color: var(--c-success);
}
.ui-drop-note.ui-drop-err {
  border-left-color: var(--c-danger);
  color: var(--c-danger-2);
}
.ui-drop-x,
.ui-toast-x {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  background: var(--c-ctrl);
  color: var(--c-text-dim);
  font-size: calc(14px * var(--fs-body, 1));
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.ui-drop-x:hover,
.ui-drop-x:focus-visible,
.ui-toast-x:hover,
.ui-toast-x:focus-visible {
  background: var(--c-ctrl-hi);
  color: var(--c-text-hi);
}
.ui-toast-x {
  top: 50%;
  transform: translateY(-50%);
}
.pregame-modal {
  position: fixed;
}
a.chat-link {
  color: var(--c-game-activate);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.chat-link:hover,
a.chat-link:focus-visible {
  filter: brightness(1.18);
}
.card.rfg {
  filter: brightness(0.35) saturate(0.4);
}
.card.lab-modal-add {
  display: flex;
  align-items: center;
  justify-content: center;
  --slot-a:var(--c-edit);
  --region-c:var(--c-edit);
  border: 2px solid var(--c-edit);
  background-color: color-mix(in srgb, var(--c-edit) 12%, var(--c-panel-2));
  color: var(--c-edit);
  font-size: 40px;
  font-weight: 700;
  cursor: pointer;
  filter: none;
}
.card.lab-modal-add:hover {
  background-color: color-mix(in srgb, var(--c-edit) 24%, var(--c-panel-2));
  filter: brightness(1.2);
}
.card.lab-modal-reorderable {
  cursor: grab;
}
.card.lab-modal-reorderable.is-dragging {
  opacity: .35;
}
.card.lab-modal-reorderable.is-drop-target {
  outline: 2px solid var(--c-edit);
  outline-offset: 2px;
  box-shadow: 0 0 16px color-mix(in srgb, var(--c-edit) 55%, transparent);
}
.divider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  width: 100%;
  height: var(--divider-h);
  flex-shrink: 0;
  position: relative;
}
.divider-line {
  flex: 1;
  position: relative;
  height: var(--frame-line-w, 1px);
  --divider-ink: color-mix(in srgb, var(--divider-c, color-mix(in srgb, var(--p1), var(--p2))) min(100%, calc(var(--frame-strength, 0.75) * 165%)), transparent);
  --divider-glow-c: color-mix(in srgb, var(--divider-c, color-mix(in srgb, var(--p1), var(--p2))) calc(var(--frame-glow, 1) * 34%), transparent);
  --divider-glow-th: calc(3px + var(--frame-glow, 1) * 7px);
  background: transparent;
}
.divider-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  top: 50%;
  height: var(--divider-glow-th);
  transform: translateY(-50%);
  background:
    linear-gradient(
      to bottom,
      transparent,
      var(--divider-glow-c),
      transparent);
}
.divider-line:first-of-type {
  background:
    linear-gradient(
      to left,
      var(--divider-ink) 0%,
      var(--divider-ink) 35%,
      transparent 100%);
}
.divider-line:first-of-type::before {
  -webkit-mask:
    linear-gradient(
      to left,
      #000 35%,
      transparent 100%);
  mask:
    linear-gradient(
      to left,
      #000 35%,
      transparent 100%);
}
.divider-line:last-of-type {
  background:
    linear-gradient(
      to right,
      var(--divider-ink) 0%,
      var(--divider-ink) 35%,
      transparent 100%);
}
.divider-line:last-of-type::before {
  -webkit-mask:
    linear-gradient(
      to right,
      #000 35%,
      transparent 100%);
  mask:
    linear-gradient(
      to right,
      #000 35%,
      transparent 100%);
}
body:is(.pvp-mode, .watch-view)[data-pvp-clock-owner=me] #board {
  --divider-c: var(--p1) !important;
}
body:is(.pvp-mode, .watch-view)[data-pvp-clock-owner=them] #board {
  --divider-c: var(--p2) !important;
}
body:is(.pvp-mode, .watch-view[data-pvp-clock-owner]) #board .divider-line::before {
  right: auto;
}
body:is(.pvp-mode, .watch-view)[data-pvp-clock-owner] #board .divider-line {
  --divider-glow-c: color-mix(in srgb, var(--divider-c) 80%, transparent);
  --divider-glow-th: 16px;
}
body:is(.pvp-mode, .watch-view)[data-pvp-clock-owner] #board .divider-line::before {
  background: none;
  border: 0 solid transparent;
  border-image-source:
    radial-gradient(
      closest-side,
      var(--divider-glow-c),
      transparent);
  border-image-slice: 49% fill;
  border-image-width: calc(var(--divider-glow-th) / 2);
  border-image-repeat: stretch;
}
body:is(.pvp-mode, .watch-view[data-pvp-clock-owner]) #board .divider-line:first-of-type::before {
  width: min(100%, max(0%, calc(var(--pvp-glow-frac, 1) * 200%)));
}
body:is(.pvp-mode, .watch-view[data-pvp-clock-owner]) #board .divider-line:last-of-type::before {
  width: min(100%, max(0%, calc((var(--pvp-glow-frac, 1) - .5) * 200%)));
}
body:is(.pvp-mode, .watch-view)[data-pvp-clock-owner] #board .divider-line {
  container-type: inline-size;
}
body:is(.pvp-mode, .watch-view)[data-pvp-clock-owner] #board .divider-line::before {
  -webkit-mask-size: 100cqw 100%;
  mask-size: 100cqw 100%;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
body:is(.pvp-mode, .watch-view)[data-pvp-clock-owner] #board .divider-line:first-of-type::before {
  -webkit-mask-image:
    linear-gradient(
      to left,
      #000 70%,
      transparent 130%);
  mask-image:
    linear-gradient(
      to left,
      #000 70%,
      transparent 130%);
}
body:is(.pvp-mode, .watch-view)[data-pvp-clock-owner] #board .divider-line:last-of-type::before {
  -webkit-mask-image:
    linear-gradient(
      to right,
      #000 70%,
      transparent 130%);
  mask-image:
    linear-gradient(
      to right,
      #000 70%,
      transparent 130%);
}
.center-table-announcement {
  position: relative;
  z-index: 120;
  min-width: 0;
  max-width: min(760px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: minmax(0, var(--cta-half, auto)) auto minmax(0, var(--cta-half, auto));
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 5px 12px;
  border: 1px solid var(--c-border-strong);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel-bg) 90%, transparent);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .55);
  color: var(--c-text);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .025em;
  white-space: nowrap;
}
.center-table-announcement .cta-side {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.center-table-announcement .cta-side.p1 {
  color: var(--p1, var(--c-accent));
  justify-self: end;
}
.center-table-announcement .cta-side.p2 {
  color: var(--p2, var(--c-danger));
  justify-self: start;
}
.center-table-announcement .cta-role {
  font-weight: 900;
  letter-spacing: .08em;
}
.center-table-announcement .cta-role .acct-name-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.center-table-announcement .cta-role .acct-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 140px;
}
.center-table-announcement .cta-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.center-table-announcement .cta-vs {
  flex: 0 0 auto;
  color: var(--c-text-faint);
  font: 900 9px var(--font-display);
}
.center-table-announcement .deck-line-dots {
  display: inline-flex;
  gap: 3px;
}
.center-table-announcement .deck-btn-dot {
  width: 14px;
  height: 14px;
  font-size: 8px;
}
.center-table-announcement.result {
  display: flex;
  border-color: color-mix(in srgb, var(--winner-c) 55%, var(--c-border));
}
.center-table-announcement.result .cta-winner {
  color: var(--winner-c);
  font: 900 10px var(--font-display);
  letter-spacing: .12em;
}
.center-table-announcement.status {
  display: flex;
  gap: 8px;
  align-items: baseline;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 6px;
  transition: opacity .25s;
  pointer-events: none;
}
.center-table-announcement.status .cta-turn {
  color: var(--c-text-faint);
  font: 900 9px var(--font-display);
  letter-spacing: .12em;
}
.center-table-announcement.status .cta-phase {
  color: var(--c-text-dim);
}
.divider-row > .cta-watching {
  position: absolute;
  left: 12px;
  bottom: calc(50% + 3px);
  z-index: 120;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--c-text-faint);
  font: 900 9px var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.divider-row > .cta-watching .cta-watching-ico {
  display: inline-flex;
  width: 11px;
  height: 11px;
}
.divider-row > .cta-watching .cta-watching-ico svg {
  width: 100%;
  height: 100%;
}
.center-table-announcement.status .cta-think {
  font: 900 9px var(--font-display);
  letter-spacing: .12em;
}
.center-table-announcement.status .cta-think::before {
  content: "·";
  margin-right: 8px;
  color: var(--c-text-faint);
}
.center-table-announcement.status .cta-think.p1 {
  color: var(--p1, var(--c-accent));
}
.center-table-announcement.status .cta-think.p2 {
  color: var(--p2, var(--c-danger));
}
.center-table-announcement.status .cta-clock {
  font: 900 9px var(--font-display);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.center-table-announcement.status .cta-clock::before {
  content: "·";
  margin-right: 8px;
  color: var(--c-text-faint);
}
.center-table-announcement.status .cta-clock.p1 {
  color: var(--p1, var(--c-accent));
}
.center-table-announcement.status .cta-clock.p2 {
  color: var(--p2, var(--c-danger));
}
.center-table-announcement.status .cta-clock.low {
  filter: brightness(1.4);
}
body.fx-aim-active .center-table-announcement.status {
  opacity: .15;
}
@media (max-width: 620px) {
  .center-table-announcement {
    gap: 5px;
    padding: 4px 7px;
    font-size: 9px;
    max-width: calc(100vw - 12px);
  }
  .center-table-announcement .cta-role {
    letter-spacing: .03em;
  }
  .center-table-announcement .deck-btn-dot {
    width: 12px;
    height: 12px;
    font-size: 7px;
  }
}
.bg-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -75%;
  right: -75%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: var(--wm-opacity);
  transition: opacity 120ms linear;
}
.bg-stage.wm-result {
  opacity: var(--wm-result-opacity);
}
.bg-stage.wm-hushed {
  opacity: 0;
}
.table-scaler[data-side=p2] .bg-stage {
  rotate: 180deg;
}
.result-land-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -75%;
  right: -75%;
  overflow: hidden;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
}
.result-land-stage.result-win.is-running {
  animation: resultCeremonyFade 2200ms linear forwards;
}
.result-land-stage.result-lose.is-running {
  animation: resultLoseCeremonyFade 2600ms linear forwards;
}
.table-scaler[data-side=p2] .result-land-stage {
  rotate: 180deg;
}
.result-land-stage .bg-anim {
  opacity: 1 !important;
  transition: none !important;
}
.result-land-stage .bg-track > span,
.rfx-card-stage .bg-track > span {
  --wm-text-alpha: 1;
}
html.glow-render-canvas .result-land-stage .bg-track > span,
html.glow-render-canvas .rfx-card-stage .bg-track > span {
  color: var(--wm-col) !important;
}
.result-land-stage.result-win.is-running .bg-pos {
  animation: resultWinFlash 2200ms linear forwards;
}
.bg-stage.result-lose-bg {
  animation: resultLoseBgReveal 2600ms linear forwards;
}
@keyframes resultCeremonyFade {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes resultLoseCeremonyFade {
  0% {
    opacity: 0;
  }
  26% {
    opacity: 1;
  }
  34% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes resultLoseBgReveal {
  0%, 84% {
    opacity: 0;
  }
  100% {
    opacity: var(--wm-result-opacity);
  }
}
@keyframes resultWinFlash {
  0% {
    filter: brightness(1) saturate(1);
  }
  10%, 28% {
    filter: brightness(2.15) saturate(.45);
  }
  52%, 100% {
    filter: brightness(1) saturate(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .result-land-stage.is-running,
  .result-land-stage.result-win.is-running .bg-pos {
    animation-duration: 1ms;
  }
}
.rfx-card-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 90;
  container-type: size;
  opacity: 0;
  --rfx-y: 50%;
  --rfx-cap: 30cqh;
  --rfx-hold: 1;
  --rfx-band-h: calc(var(--rfx-cap) * 1.75 * var(--rfx-hold));
  --rfx-dur: 2600ms;
}
.rfx-card-stage.is-running {
  opacity: 1;
}
.table-scaler[data-side=p2] .rfx-card-stage {
  rotate: 180deg;
}
.table-scaler.rfx-top {
  z-index: 510;
}
.rfx-card-stage .rfx-veil,
.rfx-card-stage .rfx-ink,
.rfx-card-stage .rfx-plate {
  position: absolute;
  inset: 0;
}
.rfx-card-stage .bg-track > span {
  -webkit-mask-image: none;
  mask-image: none;
}
.rfx-card-stage .rfx-band {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--rfx-y) - var(--rfx-band-h) / 2);
  height: var(--rfx-band-h);
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 14%,
      #000 86%,
      transparent);
  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 14%,
      #000 86%,
      transparent);
}
.rfx-card-stage .rfx-band::before,
.rfx-card-stage .rfx-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: max(2px, .7cqh);
}
.rfx-card-stage .rfx-band::before {
  top: 0;
}
.rfx-card-stage .rfx-band::after {
  bottom: 0;
}
.rfx-card-stage .rfx-word,
.rfx-card-stage .rfx-echo {
  transform-origin: 50% var(--rfx-y);
}
.rfx-card-stage .rfx-echo {
  opacity: 0;
}
:root .rfx-card-stage .rfx-echo .bg-track > span {
  color: transparent !important;
  text-shadow: none !important;
  -webkit-text-stroke: max(2px, .02em) var(--wm-col);
}
.rfx-win .rfx-veil {
  background:
    radial-gradient(
      ellipse 55% 60% at 50% var(--rfx-y),
      color-mix(in srgb, var(--wm-col) 30%, transparent),
      transparent);
  mix-blend-mode: plus-lighter;
}
.rfx-win .rfx-plate {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, color-mix(in srgb, var(--wm-col) 22%, var(--c-panel-2)) 92%, transparent),
      color-mix(in srgb, var(--c-panel-2) 90%, transparent) 50%,
      color-mix(in srgb, color-mix(in srgb, var(--wm-col) 22%, var(--c-panel-2)) 92%, transparent));
}
html .rfx-card-stage .rfx-word .bg-track > span {
  color: var(--wm-hybrid-glow-c) !important;
}
.rfx-card-stage .rfx-band {
  display: none;
}
.rfx-card-stage .rfx-glint {
  opacity: 0;
  mix-blend-mode: plus-lighter;
}
:root .rfx-card-stage .rfx-glint .bg-track > span {
  color: transparent !important;
  text-shadow: none !important;
  background-image:
    linear-gradient(
      70deg,
      transparent 38%,
      var(--c-white) 50%,
      transparent 62%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
}
.rfx-lose .rfx-glint {
  display: none;
}
.rfx-win .rfx-band::before,
.rfx-win .rfx-band::after {
  background:
    linear-gradient(
      90deg,
      transparent 4%,
      var(--wm-col) 30%,
      var(--c-white) 50%,
      var(--wm-col) 70%,
      transparent 96%);
}
.rfx-lose .rfx-veil {
  background: color-mix(in srgb, var(--c-panel-2) 55%, transparent);
}
.rfx-lose .rfx-plate {
  background: color-mix(in srgb, var(--c-panel) 84%, transparent);
}
.rfx-lose .rfx-band::before,
.rfx-lose .rfx-band::after {
  background:
    linear-gradient(
      90deg,
      transparent 8%,
      color-mix(in srgb, var(--wm-col) 65%, transparent) 50%,
      transparent 92%);
}
.rfx-lose .rfx-echo {
  display: none;
}
.rfx-win.is-running .rfx-veil {
  animation: rfxWinVeil var(--rfx-dur) ease-in-out both;
}
.rfx-win.is-running .rfx-band {
  animation: rfxWinBand var(--rfx-dur) ease-in-out both, rfxShake var(--rfx-dur) ease-in-out both;
}
.rfx-win.is-running .rfx-band::before,
.rfx-win.is-running .rfx-band::after {
  animation: rfxRule var(--rfx-dur) ease-in-out both;
}
.rfx-win.is-running .rfx-word {
  animation: rfxWinWord var(--rfx-dur) ease-in-out both;
}
.rfx-win.is-running .rfx-echo {
  animation: rfxWinEcho var(--rfx-dur) ease-in-out both;
}
.rfx-win.is-running .rfx-glint {
  animation: rfxWinWord var(--rfx-dur) ease-in-out both;
}
.rfx-win.is-running .rfx-glint .bg-track > span {
  animation: rfxGlint var(--rfx-dur) linear both;
}
.rfx-lose.is-running .rfx-veil {
  animation: rfxLoseVeil var(--rfx-dur) ease-in-out both;
}
.rfx-lose.is-running .rfx-band {
  animation: rfxLoseBand var(--rfx-dur) ease-in-out both, rfxThud var(--rfx-dur) ease-in-out both;
}
.rfx-lose.is-running .rfx-band::before,
.rfx-lose.is-running .rfx-band::after {
  animation: rfxLoseRule var(--rfx-dur) ease-in-out both;
}
.rfx-lose.is-running .rfx-word {
  animation: rfxLoseWord var(--rfx-dur) ease-in-out both;
}
.bg-stage.rfx-wm-hold {
  animation: resultLoseBgReveal 2600ms ease-in-out forwards;
}
@keyframes rfxWinVeil {
  0%, 8% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  24% {
    opacity: .75;
  }
  66% {
    opacity: .75;
    animation-timing-function: ease-in;
  }
  80%, 100% {
    opacity: 0;
  }
}
@keyframes rfxWinBand {
  0% {
    scale: .15 .025;
    opacity: 1;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  }
  5% {
    scale: 1 .025;
  }
  7.5% {
    scale: 1 .025;
    animation-timing-function: cubic-bezier(.3, 0, .2, 1);
  }
  10% {
    scale: 1 1.14;
    animation-timing-function: ease-out;
  }
  13% {
    scale: 1 .95;
    animation-timing-function: ease-in-out;
  }
  16% {
    scale: 1 1;
  }
  66% {
    scale: 1 1;
    opacity: 1;
    animation-timing-function: cubic-bezier(.5, 0, .9, .4);
  }
  76% {
    scale: 1 .02;
    opacity: 1;
  }
  78%, 100% {
    scale: 1 .02;
    opacity: 0;
  }
}
@keyframes rfxRule {
  0%, 9% {
    scale: 0 1;
  }
  10% {
    scale: .4 1;
    animation-timing-function: cubic-bezier(.1, .9, .2, 1);
  }
  22%, 100% {
    scale: 1 1;
  }
}
@keyframes rfxWinWord {
  0%, 7% {
    opacity: 0;
    scale: calc(var(--rfx-hold) * 2.1);
    filter: blur(.04em);
    animation-timing-function: cubic-bezier(.6, 0, 1, .6);
  }
  10% {
    opacity: 1;
    scale: calc(var(--rfx-hold) * .93);
    filter: blur(0) brightness(2.4);
    animation-timing-function: ease-out;
  }
  13% {
    scale: calc(var(--rfx-hold) * 1.035);
    filter: brightness(1.3);
    animation-timing-function: ease-in-out;
  }
  16% {
    scale: var(--rfx-hold);
    filter: brightness(1);
  }
  66% {
    opacity: 1;
    scale: var(--rfx-hold);
    filter: brightness(1);
    animation-timing-function: cubic-bezier(.45, 0, .2, 1);
  }
  70% {
    filter: brightness(1.5);
  }
  78% {
    opacity: 1;
    scale: 1;
    filter: brightness(1);
  }
  84% {
    opacity: 1;
    scale: 1;
    animation-timing-function: cubic-bezier(.4, 0, .6, 1);
  }
  100% {
    opacity: 0;
    scale: 1;
  }
}
@keyframes rfxWinEcho {
  0%, 10.5% {
    opacity: 0;
    scale: var(--rfx-hold);
  }
  11% {
    opacity: 1;
    scale: calc(var(--rfx-hold) * 1.02);
    animation-timing-function: cubic-bezier(.1, .7, .3, 1);
  }
  28%, 100% {
    opacity: 0;
    scale: calc(var(--rfx-hold) * 1.6);
  }
}
@keyframes rfxGlint {
  0%, 16% {
    background-position: 110% 0;
    animation-timing-function: cubic-bezier(.5, 0, .5, 1);
  }
  38%, 100% {
    background-position: -10% 0;
  }
}
@keyframes rfxShake {
  0%, 10% {
    translate: 0 0;
  }
  10.7% {
    translate: -.5cqh 1.4cqh;
  }
  11.4% {
    translate: .6cqh -1cqh;
  }
  12.1% {
    translate: -.3cqh .6cqh;
  }
  12.8% {
    translate: .2cqh -.3cqh;
  }
  13.5%, 100% {
    translate: 0 0;
  }
}
@keyframes rfxLoseVeil {
  0% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  16% {
    opacity: 1;
  }
  66% {
    opacity: 1;
    animation-timing-function: ease-in;
  }
  82%, 100% {
    opacity: 0;
  }
}
@keyframes rfxLoseBand {
  0%, 6% {
    scale: 1 0;
    opacity: 1;
    animation-timing-function: cubic-bezier(.25, .6, .3, 1);
  }
  15% {
    scale: 1 1;
  }
  66% {
    scale: 1 1;
    opacity: 1;
    animation-timing-function: ease-in;
  }
  76%, 100% {
    scale: 1 .02;
    opacity: 0;
  }
}
@keyframes rfxLoseRule {
  0%, 8% {
    scale: 0 1;
    animation-timing-function: cubic-bezier(.25, .6, .3, 1);
  }
  24%, 100% {
    scale: 1 1;
  }
}
@keyframes rfxLoseWord {
  0%, 8% {
    opacity: 0;
    translate: 0 calc(var(--rfx-cap) * -.7);
    scale: var(--rfx-hold);
    animation-timing-function: cubic-bezier(.55, 0, 1, .5);
  }
  16% {
    opacity: 1;
    translate: 0 calc(var(--rfx-cap) * .06);
    scale: calc(var(--rfx-hold) * 1.02) calc(var(--rfx-hold) * .95);
    animation-timing-function: ease-out;
  }
  20% {
    translate: 0 0;
    scale: var(--rfx-hold);
  }
  66% {
    opacity: 1;
    translate: 0 0;
    scale: var(--rfx-hold);
    animation-timing-function: cubic-bezier(.45, 0, .2, 1);
  }
  78% {
    opacity: 1;
    scale: 1;
  }
  84% {
    opacity: 1;
    scale: 1;
    animation-timing-function: cubic-bezier(.4, 0, .6, 1);
  }
  100% {
    opacity: 0;
    translate: 0 0;
    scale: 1;
  }
}
@keyframes rfxThud {
  0%, 16% {
    translate: 0 0;
  }
  17% {
    translate: 0 1.2cqh;
  }
  19.5% {
    translate: 0 -.3cqh;
  }
  22%, 100% {
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rfx-card-stage.is-running *,
  .rfx-card-stage.is-running .rfx-band::before,
  .rfx-card-stage.is-running .rfx-band::after {
    animation: none !important;
  }
  .rfx-card-stage .rfx-veil {
    opacity: .5;
  }
  .rfx-card-stage .rfx-echo {
    display: none;
  }
  .rfx-card-stage.is-running {
    animation: rfxReduced 2600ms ease-in-out both;
  }
}
@keyframes rfxReduced {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#board {
  position: relative;
  z-index: 1;
}
#playScreen {
  background: transparent;
}
#playBody {
  background: transparent;
}
#sidebar,
.log-column,
.dock-right {
  z-index: 2;
  background: transparent;
  border-color: transparent;
}
.sidebar-topbar {
  background: transparent;
}
.sidebar-navrail {
  background: transparent;
}
#playScreen.narrow-shell #sidebar,
#playScreen.narrow-shell .log-column {
  background: var(--c-field);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#playScreen.narrow-shell .sidebar-topbar {
  background: var(--c-ctrl-2);
}
.dock-right {
  border-color: transparent;
}
#dockRight #inspector[data-mode=panel],
#dockRight #inspector[data-mode=right],
#dockRight #bigCard.bc-docked {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
.bg-anim {
  position: absolute;
  inset: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}
.bg-pos {
  position: absolute;
  transform-origin: center center;
  will-change: transform;
}
.bg-track {
  display: flex;
  flex-direction: row;
  width: max-content;
  will-change: transform;
}
.bg-vert .bg-track {
  flex-direction: column;
  width: auto;
  height: max-content;
}
.bg-track > span {
  display: block;
  white-space: pre;
  font-weight: 900;
  line-height: 1;
}
.bg-vert .bg-track > span {
  writing-mode: vertical-lr;
}
@keyframes bgMarq {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes bgMarqR {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes bgMarqV {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
@keyframes bgMarqVR {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}
html.wm-intensity-off .bg-stage:not(.wm-result) .bg-layer:not([data-wm-edit]) {
  display: none;
}
.mm-wm {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 11899;
  opacity: var(--wm-opacity);
}
.mm-wm.scr-wm-in {
  position: absolute;
  z-index: -1;
}
body:where(.st-dm-active):is(#st.st, *) > .mm-wm {
  display: none;
}
.mm-wm .bg-layer.wm-breathe {
  animation: wmBreathe 2.4s ease-in-out infinite;
}
@keyframes wmBreathe {
  50% {
    opacity: .72;
  }
}
:root {
  --boom-size-min: 0.2;
  --boom-size-max: 0.4;
  --boom-size-bias: 3;
  --boom-life-min: 1512;
  --boom-life-max: 2268;
  --boom-opacity: 0.8;
  --boom-rate-min: 5;
  --boom-rate-max: 10;
  --boom-max-live: 40;
  --boom-line-x: 0.5;
  --boom-line-y: 0.55;
  --boom-line-angle: 21;
  --boom-line-len: 1.22;
  --boom-line-bow: 0;
  --boom-spread: 0.28;
  --boom-falloff: 0.6;
  --boom-falloff-y: 1;
  --wm-glow-blur: 11.5;
  --wm-glow-strength: 1.05;
  --wm-glow-tint: 1.05;
  --slot-strength: 0.6;
  --frame-strength: 0.2;
  --frame-line-w: 2px;
  --frame-glow: 0.4;
  --frame-cut: 26px;
  --slot-a: var(--p1);
  --wm-scan-pitch: var(--fx-scan-pitch);
  --wm-col: var(--p1);
  --wm-text-alpha: 0.8;
}
.bg-track > span,
.rfx-scan {
  --fx-local-scan-pitch: var(--fx-scan-pitch);
  --fx-local-scan-line: var(--screen-fx-scan-line);
  --fx-local-scan-origin-y: 0px;
  --fx-local-scan-dir: 1;
  --fx-local-scan-angle: 0deg;
  --wm-scan-pitch: var(--fx-local-scan-pitch);
  --wm-scan-mask:
    repeating-linear-gradient(
      
      var(--fx-local-scan-angle),
      #000 0 var(--fx-local-scan-line),
      rgba(0,0,0,var(--screen-fx-scan-trough)) var(--fx-local-scan-line) var(--wm-scan-pitch));
  -webkit-mask-image: var(--wm-scan-mask);
  mask-image: var(--wm-scan-mask);
  -webkit-mask-position: 0 calc(var(--fx-local-scan-pitch) * var(--fx-scan-phase) * var(--fx-local-scan-dir) - var(--fx-local-scan-origin-y));
  mask-position: 0 calc(var(--fx-local-scan-pitch) * var(--fx-scan-phase) * var(--fx-local-scan-dir) - var(--fx-local-scan-origin-y));
}
.bg-track > span {
  font-family: var(--font-display);
  position: relative;
  color: color-mix(in srgb, var(--wm-col) calc(var(--wm-text-alpha) * 100%), transparent);
  --wm-glow-col: color-mix(in srgb, var(--wm-col) calc(var(--wm-glow-tint) * 100%), color-mix(in srgb, var(--wm-col) 22%, white));
  text-shadow: 0 0 calc(var(--wm-glow-blur) * 1px) color-mix(in srgb, var(--wm-glow-col) calc(var(--wm-glow-strength) * 100%), transparent);
}
.table-scaler[data-side=p2] {
  --wm-col: var(--p2);
  --slot-a: var(--p2);
}
.bg-layer[data-wm-edit] .bg-track > span {
  --wm-col: var(--c-edit);
}
#ambientFxLayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#ambientFxLayer canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: plus-lighter;
}
#appBgFade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--c-app-bg) center center / cover no-repeat;
  opacity: 0;
  transition: opacity var(--t-fade-reveal) ease;
}
#appBgFade[hidden] {
  display: none;
}
#appBgFade.on {
  opacity: 1;
}
#bgPickModal {
  z-index: var(--z-menu-dialog);
  display: none;
  align-items: center;
  justify-content: center;
}
#bgPickModal.open {
  display: flex;
}
#bgPickModal {
  background: transparent;
}
body.bgp-open #optsBackdrop {
  background: transparent;
}
body.bgp-open #uiSettingsPanel {
  visibility: hidden;
}
#bgPickModal .bgp-box {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
}
#bgPickModal .gcg-modal-head .x {
  font-size: calc(20px * var(--fs-body, 1));
  line-height: 1;
}
#bgPickModal .bgp-body {
  overflow-y: auto;
  min-height: 0;
}
#bgPickModal .bgp-hint {
  color: var(--c-text-dim);
  margin: 0 0 14px;
}
#bgPickModal .bgp-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
#bgPickModal .bgp-art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--c-panel-2);
  border: 3px solid var(--c-border-subtle);
}
#bgPickModal .bgp-tile.in-battle .bgp-art,
#bgPickModal .bgp-tile.in-menu .bgp-art {
  border-color: transparent;
  border-image:
    linear-gradient(
      to bottom,
      var(--bgp-top, var(--c-border-subtle)) 0 50%,
      var(--bgp-bot, var(--c-border-subtle)) 50% 100%) 1;
}
#bgPickModal .bgp-tile.in-battle {
  --bgp-top: var(--p2);
}
#bgPickModal .bgp-tile.in-menu {
  --bgp-bot: var(--p1);
}
#bgPickModal .bgp-art {
  cursor: pointer;
}
#bgPickModal .bgp-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#bgPickModal .bgp-seats {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#bgPickModal .bgp-seat {
  min-width: 92px;
  justify-content: center;
  padding: 8px 12px;
  font-size: calc(13px * var(--fs-body, 1));
  line-height: 1.2;
  cursor: pointer;
}
#bgPickModal .bgp-seat:not(.gcg-badge--p1):not(.gcg-badge--p2):hover {
  color: var(--c-text-strong);
  border-color: var(--c-border-strong);
}
#bgPickModal .bgp-seat.gcg-badge--p1:hover {
  background: color-mix(in srgb, var(--p1) 74%, var(--c-text-strong));
}
#bgPickModal .bgp-seat.gcg-badge--p2:hover {
  background: color-mix(in srgb, var(--p2) 74%, var(--c-text-strong));
}
#bgPickModal .bgp-name {
  margin-top: 6px;
  color: var(--c-text-strong);
  font-weight: 600;
}
@media (max-width: 600px) {
  #bgPickModal .bgp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #bgPickModal .bgp-seats {
    gap: 6px;
  }
  #bgPickModal .bgp-seat {
    min-width: 70px;
    padding: 5px 8px;
    font-size: calc(11.5px * var(--fs-body, 1));
  }
}
#appDimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--app-bg-dim));
  opacity: 0;
  transition: opacity var(--t-fade-page) ease;
}
body:not(.game-idle):where(.st-play-active):where(:not(.st-modes-open)):is(#st#st.st.st, *) #appDimmer {
  opacity: 1;
}
.gcg-scrim.scrim-quiet,
#optsBackdrop.scrim-quiet {
  background: transparent;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-strong) transparent;
}
@supports selector(::-webkit-scrollbar) and (not (-moz-appearance: none)) {
  * {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }
  *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  *::-webkit-scrollbar-thumb {
    background: var(--c-border-strong);
    border-radius: 999px;
  }
  *::-webkit-scrollbar-thumb:hover {
    background: var(--c-text-subtle);
  }
  *::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
  *::-webkit-scrollbar-corner {
    background: transparent;
  }
}
.player-section {
  overflow: visible;
}
#bgStylePanel {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 9000;
  font-family: var(--mono);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
#bgStyleToggle {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--c-panel-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-dim);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
#bgStyleToggle:hover {
  border-color: var(--c-text-subtle);
  color: var(--c-text-hi);
}
#bgStyleContent {
  background: var(--c-panel);
  border: 1px solid var(--c-border-subtle);
  border-radius: 6px;
  padding: 11px;
  width: 344px;
  max-height: 72vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  display: none;
}
#bgStyleContent.open {
  display: block;
}
.bgs-sec {
  margin-bottom: 10px;
}
.bgs-sec-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--c-text-faint);
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-border-subtle);
  margin-bottom: 5px;
  padding-bottom: 2px;
}
.bgs-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
  font-size: 11px;
}
.bgs-lbl {
  color: var(--c-text-subtle);
  min-width: 88px;
  flex-shrink: 0;
}
.bgs-val {
  color: var(--c-text-muted);
  min-width: 26px;
  text-align: right;
}
.bgs-row input[type=range] {
  flex: 1;
  min-width: 0;
  height: 3px;
  cursor: pointer;
  accent-color: var(--c-accent);
}
.bgs-row select {
  flex: 1;
}
.bgs-row select.gcg-select {
  min-height: 19px;
  padding: 0 17px 0 4px;
  font-size: 10px;
  border-radius: 2px;
  background-size: 11px 11px;
  background-position: right 3px center;
}
.bgs-row input[type=checkbox] {
  width: 11px;
  height: 11px;
  cursor: pointer;
  accent-color: var(--c-accent);
}
.bgs-row select.bgs-inline {
  flex: 0 0 auto;
  width: 50px;
}
#bgStyleReset {
  width: 100%;
  margin-top: 4px;
  background: var(--c-panel-2);
  border: 1px solid var(--c-border-subtle);
  color: var(--c-text-faint);
  border-radius: 3px;
  padding: 3px;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--mono);
}
#bgStyleReset:hover {
  border-color: var(--c-border-strong);
  color: var(--c-text-dim);
}
.bgs-page {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--c-accent);
  text-transform: uppercase;
  margin: 12px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid #2a3a55;
}
.bgs-page:first-child {
  margin-top: 0;
}
.bgs-savebtn {
  width: 100%;
  margin-top: 5px;
  background: color-mix(in srgb, var(--c-commit) 6%, var(--c-panel-2));
  border: 1px solid color-mix(in srgb, var(--c-commit) 18%, var(--c-border-subtle));
  color: color-mix(in srgb, var(--c-commit) 79%, #fff);
  border-radius: 3px;
  padding: 4px;
  cursor: pointer;
  font-size: 10px;
  font-family: var(--mono);
}
.bgs-savebtn:hover {
  border-color: color-mix(in srgb, var(--c-commit) 54%, var(--c-border-subtle));
  color: color-mix(in srgb, var(--c-commit) 40%, #fff);
}
.bgs-msg {
  font-size: 10px;
  color: var(--c-text-muted);
  margin-top: 4px;
  min-height: 12px;
}
.bgs-msg.ok {
  color: #7ddc7d;
}
.bgs-msg.err {
  color: #ff8080;
}
#layoutTuner {
  position: fixed;
  z-index: 1200;
  top: 64px;
  right: 16px;
  width: 244px;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: rgba(14, 14, 16, 0.97);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
  color: var(--c-text-hi);
  font-size: 11px;
  user-select: none;
}
#layoutTuner.open {
  display: flex;
}
#layoutTuner .lt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: move;
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border-subtle);
  background: var(--c-ctrl-2);
  border-radius: 8px 8px 0 0;
}
#layoutTuner .lt-title {
  flex: 1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--c-text-dim);
}
#layoutTuner .lt-x {
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
}
#layoutTuner .lt-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
#layoutTuner .lt-sec {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin: 4px 0 -2px;
  padding-top: 6px;
  border-top: 1px solid var(--c-border-subtle);
}
#layoutTuner .lt-sec:first-child {
  border-top: 0;
  padding-top: 0;
}
#layoutTuner .lt-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
#layoutTuner .lt-rowhead {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
#layoutTuner .lt-lbl {
  flex: 1;
  color: var(--c-text-dim);
  font-size: 10.5px;
}
#layoutTuner .lt-val {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--c-accent);
  min-width: 34px;
  text-align: right;
}
#layoutTuner input[type=range] {
  width: 100%;
  cursor: pointer;
  accent-color: var(--c-accent);
  margin: 0;
}
#layoutTuner .lt-actions {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--c-border-subtle);
}
#layoutTuner .lt-actions button {
  flex: 1;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  background: var(--c-panel-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-hi);
}
#layoutTuner .lt-actions button:hover {
  background: var(--c-ctrl-2);
  border-color: var(--c-border-strong);
}
#layoutTuner .lt-actions .lt-copied {
  color: #7ddc7d;
  border-color: #3a7a4a;
}
.v-zoomc {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}
.v-zoomc .zc-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--bar-h, 56px) + 4px);
  padding: 2px 0 1px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 190ms ease,
    transform 260ms cubic-bezier(.22, .68, .24, 1),
    visibility 0s linear 260ms;
}
.v-zoomc.is-open .zc-bar {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 200ms ease,
    transform 300ms cubic-bezier(.16, .84, .28, 1),
    visibility 0s;
}
.v-zoomc .zc-bar::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  top: -6px;
  pointer-events: none;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(7px) saturate(112%);
  backdrop-filter: blur(7px) saturate(112%);
  -webkit-mask-image:
    linear-gradient(
      0deg,
      #000 0,
      #000 calc(100% - 6px),
      transparent 100%);
  mask-image:
    linear-gradient(
      0deg,
      #000 0,
      #000 calc(100% - 6px),
      transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.v-zoomc .zc-bar::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: color-mix(in srgb, var(--edge, #232b3d) 78%, transparent);
}
.v-zoomc .zc-read,
.v-zoomc .zc-view {
  position: relative;
  z-index: 1;
}
.v-zoomc .zc-read {
  display: flex;
  align-items: baseline;
  gap: 7px;
  position: absolute;
  top: 0;
  left: 2px;
  right: 2px;
  z-index: 2;
  height: 10px;
  margin: 0;
  pointer-events: none;
  font-family: var(--mono);
  font-size: calc(8.5px * var(--fs-mono, 1));
  line-height: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: .72;
  transition: opacity 200ms ease;
}
.v-zoomc.is-scrub .zc-read {
  opacity: 1;
}
.v-zoomc .zc-turn {
  color: var(--sc, var(--dim));
  letter-spacing: .12em;
  transition: color 200ms ease;
}
.v-zoomc .zc-turn[data-seat=p1] {
  --sc:var(--p1);
}
.v-zoomc .zc-turn[data-seat=p2] {
  --sc:var(--p2);
}
.v-zoomc .zc-grow {
  flex: 1 1 auto;
}
.v-zoomc .zc-ix {
  font-variant-numeric: tabular-nums;
  letter-spacing: .10em;
  color: var(--mute);
}
.v-zoomc .zc-fit {
  font-size: calc(7.5px * var(--fs-body, 1));
  letter-spacing: .13em;
  color: var(--dim);
  opacity: .62;
}
.v-zoomc .zc-view {
  display: block;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  outline: none;
}
.v-zoomc.is-scrub .zc-view {
  cursor: grabbing;
}
.v-zoomc .zc-cv {
  display: block;
  width: 100%;
  height: 30px;
}
.v-zoomc .zc-view:focus-visible {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--free) 60%, transparent);
  border-radius: 3px;
}
#seismoHost {
  position: relative;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 30px;
}
#seismoHost .v-zoomc {
  position: absolute;
  inset: 0;
}
#seismoHost .zc-bar {
  top: 0;
  bottom: auto;
}
#seismoHost .zc-bar::before,
#seismoHost .zc-bar::after {
  display: none;
}
#sharedTimeline #timelineSlider,
#sharedTimeline #timelineCur,
#sharedTimeline #timelineMax,
#bbTimelineWrap #bbTimelineSlider {
  display: none;
}
#seismoHost.stream-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background: rgba(10, 14, 20, 0.10);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.pvp-mode #matchModeCover,
body.pvp-mode #matchModeDesc,
body.pvp-mode #matchModeMissions,
body.pvp-mode #matchRunInfo,
body.pvp-mode #newGameBtn,
body.pvp-mode #p1BotPicker,
body.pvp-mode #p2BotPicker,
body.pvp-mode #p1DeckNav,
body.pvp-mode #p2DeckNav,
body.pvp-mode #p2DeckCnt,
body.pvp-mode #setupBody .setup-assign-row,
body.pvp-mode #setupAssignBoth,
body.pvp-mode #p1QuickAdd,
body.pvp-mode #seedInput,
body.pvp-mode #pbFirstToggle,
body.pvp-mode #secPlayback,
body.pvp-mode #playbackControls,
body.pvp-mode #sharedTimeline,
body.pvp-mode #matchCheatsGrp,
body.pvp-mode .opt-grp[data-grp=opt-cheats],
body.pvp-mode .opt-grp[data-grp=opt-dev],
body.pvp-mode .opt-grp[data-grp=opt-streaming] {
  display: none !important;
}
body.match-live #p1BotPicker,
body.match-live #p2BotPicker,
body.match-live #matchModeDesc,
body.match-live #matchModeMissions,
body.match-live #seedInput,
body.match-live #pbFirstToggle,
body.match-live #newGameBtn:not(.gm-action-continue),
body.match-live #matchCheatsGrp,
body.match-live .opt-grp[data-grp=opt-cheats],
body.match-live .opt-grp[data-grp=opt-dev] {
  display: none !important;
}
.pvp-turn-banner {
  display: none;
}
body.pvp-mode[data-pvp-turn=them] .pvp-turn-banner:not(.pvp-rewind-banner):not(.pvp-presence-banner) {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  pointer-events: none;
  padding: 6px 12px;
  font-family: var(--font-display,"Orbitron",sans-serif);
  font-size: calc(var(--fs-body,1.08) * 0.82rem);
  letter-spacing: 0.04em;
  color: var(--c-text-hi,#e8e8e8);
  background: var(--c-panel-2,#1a1f27);
  border: 1px solid var(--c-border-strong,#3a4250);
  border-radius: var(--r-loz,9px);
}
body.pvp-mode[data-pvp-turn=them] .pvp-turn-banner:not(.pvp-rewind-banner):not(.pvp-presence-banner)::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-warn,#e0a94a);
  box-shadow: 0 0 6px var(--c-warn,#e0a94a);
}
.pvp-rewind-banner {
  display: none;
}
body.pvp-mode .pvp-rewind-banner:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  pointer-events: auto;
  padding: 6px 12px;
  font-family: var(--font-display,"Orbitron",sans-serif);
  font-size: calc(var(--fs-body,1.08) * 0.82rem);
  letter-spacing: 0.04em;
  color: var(--c-text-hi,#e8e8e8);
  background: var(--c-panel-2,#1a1f27);
  border: 1px solid var(--c-warn,#e0a94a);
  border-radius: var(--r-loz,9px);
}
body.pvp-mode.pvp-rw-ask #pvpTurnBanner {
  display: none !important;
}
body.pvp-mode.pvp-away #pvpTurnBanner {
  display: none !important;
}
body.pvp-mode.pvp-rw-ask #pvpPresenceBanner {
  display: none !important;
}
.pvp-rw-banner-msg {
  white-space: nowrap;
}
.pvp-rw-count {
  font-variant-numeric: tabular-nums;
  color: var(--c-warn,#e0a94a);
}
.pvp-rewind-banner .pb-loz {
  position: static;
  translate: none;
  rotate: none;
  border-color: var(--c-border-strong,#3a4250);
  background: var(--c-ctrl-2,#232a34);
  color: var(--c-text-hi,#e8e8e8);
}
body.pvp-mode .pvp-rewind-banner .pb-loz {
  display: inline-block !important;
}
.pvp-rewind-banner .pb-loz[data-rw=accept] {
  border-color: var(--c-success,#9dcc9d);
  color: var(--c-success,#9dcc9d);
}
.pvp-rewind-banner .pb-loz[data-rw=deny],
.pvp-rewind-banner .pb-loz[data-rw=cancel] {
  border-color: var(--c-danger,#ff6666);
  color: var(--c-danger,#ff6666);
}
.pvp-rewind-banner .pb-loz[aria-disabled=true] {
  opacity: 0.45;
  pointer-events: none;
}
.pvp-rw-sub {
  font-size: 9px;
  opacity: 0.75;
  letter-spacing: 0.02em;
}
.pvp-rw-mark {
  display: none;
}
body.pvp-mode .pvp-rw-mark {
  display: block;
  opacity: 1 !important;
  color: var(--c-warn,#e0a94a);
  font-weight: 700;
  cursor: default;
  border-left-color: var(--c-warn,#e0a94a) !important;
}
body.pvp-mode #logContent .log-entry {
  position: relative;
}
.pvp-rw-loz {
  display: none;
}
body.pvp-mode .pvp-rw-loz {
  display: inline-block !important;
  left: auto;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  rotate: none;
  background: var(--c-panel-2,#1a1f27);
  border-color: var(--c-warn,#e0a94a);
  color: var(--c-warn,#e0a94a);
}
.pvp-record-rw {
  color: var(--c-warn,#e0a94a);
  font-variant-numeric: tabular-nums;
}
.pvp-record-rw[hidden] {
  display: none;
}
.pvp-presence-banner {
  display: none;
}
body.pvp-mode .pvp-presence-banner:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  pointer-events: none;
  padding: 6px 12px;
  font-family: var(--font-display,"Orbitron",sans-serif);
  font-size: calc(var(--fs-body,1.08) * 0.82rem);
  letter-spacing: 0.04em;
  color: var(--c-text-hi,#e8e8e8);
  background: var(--c-panel-2,#1a1f27);
  border: 1px solid var(--c-warn,#e0a94a);
  border-radius: var(--r-loz,9px);
}
body.pvp-mode .pvp-presence-banner:not([hidden])::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-warn,#e0a94a);
  box-shadow: 0 0 6px var(--c-warn,#e0a94a);
}
.pvp-presence-msg {
  white-space: nowrap;
}
.pvp-presence-count {
  font-variant-numeric: tabular-nums;
  color: var(--c-warn,#e0a94a);
}
.pvp-opp-chip,
.pvp-seat-status,
.pvp-action-bar,
.pvp-record {
  display: none;
}
html.online-disabled #menuMultiplayerGrp {
  display: none !important;
}
html.batch-disabled #menuBatchBtn {
  display: none !important;
}
html.roulette-disabled #menuRouletteBtn {
  display: none !important;
}
body.pvp-lobby #p2BotPicker,
body.pvp-lobby #newGameBtn,
body.pvp-lobby:not(.pvp-cover) #matchModeCover,
body.pvp-lobby:not(.pvp-cover) #matchModeDesc,
body.pvp-lobby #matchRunInfo,
body.pvp-lobby #matchModeMissions,
body.pvp-lobby #matchActionRow {
  display: none !important;
}
body.pvp-lobby.pvp-cover #matchModeCover {
  pointer-events: none;
  cursor: default;
}
body.pvp-lobby #pvpOppChip:not([hidden]),
body.pvp-mode #pvpOppChip:not([hidden]) {
  display: flex !important;
}
body.pvp-lobby #setupBody .whog #p2SeatChipHost:not([hidden]),
body.pvp-mode #setupBody .whog #p2SeatChipHost:not([hidden]) {
  display: flex !important;
  flex: 1 1 auto;
}
body.pvp-lobby #setupBody #p2DeckBlock .pl-head2 {
  display: flex !important;
}
body.pvp-lobby #setupBody #p2DeckBlock.pvp-opp-ready .pl-head2 {
  display: none !important;
}
body.pvp-lobby #p2DeckBlock.pvp-opp-ready #pvpP2Status {
  display: flex !important;
}
body.pvp-lobby #setupBody #p1DeckBlock .pl-head2,
#spaceScreen #spaceDeckHost #p1DeckBlock .pl-head2 {
  display: flex !important;
}
body.pvp-lobby #setupBody #p1DeckBlock .plh-nav[hidden],
#spaceScreen #spaceDeckHost #p1DeckBlock .plh-nav[hidden] {
  display: none !important;
}
body.pvp-lobby #setupBody #p1DeckBlock.pvp-self-ready .pl-head2,
#spaceScreen #spaceDeckHost #p1DeckBlock.pvp-self-ready .pl-head2 {
  display: none !important;
}
body.pvp-lobby #pvpP1Ready:not([hidden]) {
  display: flex !important;
}
body.pvp-lobby #pvpActionBar {
  display: flex !important;
}
body.pvp-lobby #pvpRecordBar {
  display: block !important;
}
body.pvp-lobby #setupBody #p2DeckPrimary.placeholder {
  color: inherit;
  font-weight: 600;
}
body.pvp-lobby #p2AssignDeckBtn,
body.pvp-mode #p2AssignDeckBtn {
  pointer-events: none;
  cursor: default;
}
body.pvp-mode #p2DeckBlock .dots-v {
  display: none !important;
}
body.pvp-lobby #setupBody .whog .pvp-opp-chip,
body.pvp-mode #setupBody .whog .pvp-opp-chip {
  flex: 1 1 auto;
}
.pvp-opp-chip {
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  min-height: 44px;
  font-size: var(--btn-fs,13px);
  color: var(--c-text-muted,#9aa3ad);
  background: var(--c-ctrl,#1c222b);
  border: 1px solid var(--c-border,#333c47);
  border-radius: var(--r-ctrl,7px);
}
.pvp-opp-chip[data-present="1"] {
  color: var(--c-text-hi,#e8e8e8);
}
.pvp-opp-chip::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-text-faint,#5b636d);
}
.pvp-opp-chip[data-present="1"]::before {
  background: var(--c-success,#9dcc9d);
  box-shadow: 0 0 6px var(--c-success,#9dcc9d);
}
body.pvp-lobby #setupBody .pl-head2,
body.pvp-lobby #setupBody .pvp-seat-status,
#spaceScreen #spaceDeckHost .pl-head2 {
  --pvp-rowh:var(--gcg-control-height-touch, 34px);
  height: var(--pvp-rowh);
  box-sizing: border-box;
}
.pvp-seat-status {
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: var(--btn-fs,13px);
  color: var(--c-text-dim,#7a828c);
  background: var(--c-field,#161b22);
  border: 1px solid var(--c-border-subtle,#2a323c);
  border-radius: var(--r-ctrl,7px);
}
.pvp-seat-status .gcg-tbi {
  width: 15px;
  height: 15px;
}
.pvp-seat-status[data-state=ready] .pvp-st-lab {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: calc(12px * var(--fs-display,1));
}
.pvp-seat-status[data-state=choosing] {
  color: var(--c-warn,#e0a94a);
}
.pvp-seat-status[data-state=ready] {
  color: var(--c-success,#9dcc9d);
  border-color: var(--c-success,#9dcc9d);
  background: color-mix(in srgb, var(--c-success,#9dcc9d) 10%, var(--c-field,#161b22));
}
.pvp-action-bar {
  flex-direction: column;
  gap: 8px;
}
.pvp-action-bar .pvp-btn-row {
  display: flex;
  gap: 8px;
}
.pvp-action-bar .pvp-btn-row > * {
  flex: 1 1 0;
  min-width: 0;
}
#setupBody .pvp-invite-row > .new-game.pvp-invite-copy {
  flex: none;
  width: auto;
  padding-inline: 18px;
  white-space: nowrap;
}
.pvp-action-bar .pvp-invite-field {
  position: relative;
  display: flex;
}
.pvp-action-bar .pvp-invite-field > .gcg-input {
  padding-right: calc(var(--gcg-control-height) + 8px);
}
.pvp-action-bar .pvp-invite-field > .pvp-invite-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  translate: 0 -50%;
  width: calc(var(--gcg-control-height) - 6px);
  height: calc(var(--gcg-control-height) - 6px);
}
.pvp-action-bar .gcg-input {
  flex: 1 1 auto;
  min-width: 0;
}
.pvp-action-bar .pvp-queue-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.pvp-action-bar .pvp-queue-opts > .gcg-field-row {
  flex: 1 1 auto;
  grid-template-columns: auto minmax(0, 1fr);
}
.pvp-action-bar .pvp-hint {
  font-size: 11px;
  color: var(--c-text-dim,#7a828c);
  text-align: center;
}
.pvp-action-bar .pvp-queue-rated {
  color: var(--c-text,#b9c0c9);
}
.pvp-action-bar .pvp-queue-rated:empty {
  display: none;
}
.pvp-action-bar .pvp-queue-locked {
  color: var(--c-warn,#e0a94a);
}
#pvpQueueEventRule.is-empty {
  visibility: hidden;
}
.pvp-record {
  margin-top: 0;
}
body.pvp-lobby #setupBody .seats > .setup-mode-info {
  grid-column: 1 / -1;
}
body.pvp-lobby #pvpRecordBar.pvp-record--empty {
  display: none !important;
}
body.pvp-lobby:not(.pvp-cover) #setupBody .seats > .setup-mode-info:has(> .pvp-record--empty) {
  display: none;
}
body.pvp-lobby:not(.pvp-cover) #setupBody .setup-mode-row {
  display: none;
}
body.pvp-lobby #setupBody .seats > .setup-mode-info {
  margin-bottom: 14px;
}
body.pvp-lobby #pvpRecordBar:not(:has(> .pvp-record-row:not([hidden]))) .pvp-record-rules {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  body.pvp-lobby #setupBody .seats > .pcard.p2 {
    grid-row: 2;
  }
  body.pvp-lobby #setupBody .seats > .vs {
    grid-row: 3;
  }
  body.pvp-lobby #setupBody .seats > .pcard.p1 {
    grid-row: 4;
  }
  body.pvp-lobby:not(.pvp-cover) #setupBody .seats:has(> .setup-mode-info > .pvp-record--empty) {
    margin-top: -6px;
  }
  body.pvp-lobby #setupBody .seats > .setup-mode-info {
    margin-bottom: 8px;
  }
}
.pvp-record .pvp-room-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-template-columns: none;
}
.pvp-record-rules:empty {
  display: none;
}
.pvp-record-mode {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-hi,#e8ecf2);
  text-align: center;
  margin-bottom: 2px;
  letter-spacing: .03em;
}
.pvp-record-mode:empty {
  display: none;
}
.pvp-record-rules {
  font-size: 11px;
  color: var(--c-text-dim,#7a828c);
  text-align: center;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.pvp-record-speed {
  display: table;
  margin: 0 auto 4px;
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text-dim,#7a828c);
  border: 1px solid var(--c-border,#3a414c);
  border-radius: 999px;
}
.pvp-record-speed[hidden] {
  display: none;
}
.pvp-record-chips {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.pvp-record-chips > .pvp-record-speed {
  margin: 0;
}
.pvp-record-chips:not(:has(> :not([hidden]))) {
  display: none;
}
.pvp-record-rating {
  color: var(--c-accent,#d1d1d1);
  border-color: var(--c-accent,#d1d1d1);
}
.pvp-record-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
}
.pvp-record-row[hidden] {
  display: none;
}
.pvp-record-w {
  color: var(--c-success,#9dcc9d);
}
.pvp-record-l {
  color: var(--c-danger,#ff6666);
}
.pvp-record-track {
  width: 100%;
}
.pvp-record-track > i {
  background: var(--c-success,#9dcc9d);
}
#pvpBrowseModal {
  z-index: var(--z-dialog);
  display: none;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
#pvpBrowseModal.open {
  display: flex;
}
#pvpBrowseBox {
  width: min(1120px, 96vw);
  height: 86vh;
  display: flex;
  flex-direction: column;
  color: var(--c-text);
}
#pvpBrowseBox .gcg-modal-title {
  flex: 1;
  margin: 0;
}
.pvp-browse-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--c-border-subtle);
}
#pvpBrowseBox .gcg-modal-head {
  gap: 6px;
}
.pvp-browse-bug {
  width: var(--gcg-control-height-sm, 31px);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pvp-browse-bug .g {
  display: inline-flex;
  line-height: 1;
}
.pvp-browse-bug .g .gcg-tbi {
  display: block;
  width: 15px;
  height: 15px;
}
.pvp-filter-grp {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pvp-browse-filters.pvp-filters-collapsed .pvp-filter-grp:not([data-grp=availability], [data-grp=size]) {
  display: none;
}
.pvp-filter-t {
  flex: none;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.pvp-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pvp-filter-chips > .gcg-checkbox {
  padding-left: 7px;
  padding-right: 7px;
}
.pvp-chip-ico {
  color: var(--chip-ink, var(--c-text-dim));
}
.pvp-filter-ico {
  margin-right: 4px;
}
.pvp-filter-chips > .gcg-checkbox:has(input:checked) .pvp-chip-ico {
  color: inherit;
}
.pvp-filter-clear {
  align-self: flex-end;
  margin-left: auto;
}
.pvp-filter-clear[hidden] {
  display: none;
}
@media (max-width: 700px) {
  .pvp-browse-filters {
    max-height: 50vh;
    overflow-y: auto;
    gap: 6px 10px;
    padding: 8px 12px;
  }
  .pvp-browse-filters:not(.pvp-filters-collapsed) .pvp-filter-grp:not([data-grp=availability]) {
    width: 100%;
  }
  .pvp-browse-filters .pvp-filter-grp[data-grp=availability] .pvp-filter-t {
    display: none;
  }
  .pvp-browse-filters:not(.pvp-filters-collapsed) .pvp-filter-grp .pvp-filter-t {
    flex: 0 0 52px;
  }
}
.pvp-browse-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 16px 4px;
}
.pvp-room-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  container-type: inline-size;
  container-name: pvproom;
}
.pvp-room {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 6px 10px 6px 12px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--c-border-subtle);
  border-radius: var(--r-m,7px);
  background: var(--c-panel-2);
  transition: border-color .12s ease;
}
.pvp-room-ground {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 520px;
  z-index: -1;
  pointer-events: none;
  background: var(--room-ground, var(--c-panel-3));
  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 0,
      #000 18%,
      transparent 100%);
  mask-image:
    linear-gradient(
      90deg,
      #000 0,
      #000 18%,
      transparent 100%);
}
.pvp-room.has-art > .pvp-room-ground {
  background: var(--room-art) center 42% / cover no-repeat, var(--room-ground, var(--c-panel-3));
}
.pvp-room:not(.is-full):not(.is-invite):hover {
  border-color: var(--room-ground, var(--c-border));
}
.pvp-room:not(.is-full):not(.is-invite):hover > .pvp-room-ground {
  filter: brightness(var(--hover-brightness));
}
.pvp-room.is-full {
  opacity: var(--gcg-disabled-opacity);
}
.pvp-room.is-full .pvp-room-join:disabled {
  opacity: 1;
}
.pvp-room [data-sz]::after {
  content: attr(data-sz);
}
.pvp-room-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pvp-room-head {
  flex: 0 0 256px;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: var(--gcg-count-glow);
}
.pvp-room-head .pvp-room-glyph {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-right: 2px;
  align-self: center;
  color: var(--c-white);
}
.pvp-room-rules {
  flex: 0 0 auto;
  max-width: 78%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-bright);
}
.pvp-room.is-lobby .pvp-room-rules {
  flex: 1 1 auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pvp-room-dot {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--c-text-muted);
}
.pvp-room-who {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  color: var(--c-text);
}
.pvp-room-who.is-anon {
  color: var(--c-text-dim);
}
.pvp-room-who .gcg-tbi {
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -1px;
}
.pvp-room-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.pvp-room-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px;
  font-size: var(--btn-fs,12px);
  letter-spacing: .05em;
  white-space: nowrap;
}
.pvp-gp-chip .gcg-account-tier-mark--stacked {
  margin-block: -2px;
}
.pvp-room .pvp-room-chips {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.pvp-room .pvp-room-chip {
  display: inline-grid;
}
.pvp-room .pvp-room-chip > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pvp-room .pvp-room-chip > .pvp-chip-cur {
  justify-self: start;
}
.pvp-chip-sz {
  visibility: hidden;
}
.pvp-chip-sz > i {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.pvp-room-names {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--c-text-dim);
}
.pvp-room-nl {
  min-width: 0;
  overflow: hidden;
}
.pvp-room-more {
  flex: 0 0 auto;
  padding: 1px 6px;
  font-size: 11.5px;
  line-height: 15px;
  color: var(--c-text-bright);
}
.pvp-room-rail {
  flex: 0 0 auto;
  display: grid;
  align-items: center;
}
.pvp-room-rail > * {
  grid-area: 1 / 1;
  justify-self: end;
}
.pvp-rail-sz {
  visibility: hidden;
}
.pvp-room .pvp-room-join {
  flex: 0 0 auto;
}
.pvp-room-invite {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: var(--gcg-control-height);
  color: var(--c-text-dim);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.pvp-room-invite .gcg-tbi {
  width: 14px;
  height: 14px;
}
.pvp-room-seats {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--c-text-hi);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-shadow: var(--gcg-count-glow);
  white-space: nowrap;
}
.pvp-room-seats .gcg-tbi {
  width: 17px;
  height: 17px;
}
.pvp-seat-fig {
  display: inline-flex;
  align-items: baseline;
}
.pvp-seat-n,
.pvp-seat-d {
  display: inline-grid;
}
.pvp-seat-n::before,
.pvp-seat-d::before {
  content: "00";
  visibility: hidden;
  grid-area: 1 / 1;
}
.pvp-seat-n > span,
.pvp-seat-d > span {
  grid-area: 1 / 1;
}
.pvp-seat-n > span {
  justify-self: end;
}
.pvp-seat-d > span {
  justify-self: start;
}
.pvp-seat-sl,
.pvp-seat-d {
  color: var(--c-text-bright);
  font-weight: 600;
}
.pvp-chip-tip {
  position: fixed;
  z-index: 2147483000;
  left: 0;
  top: 0;
  max-width: min(260px, 86vw);
  padding: max(4px, calc(5px * var(--gcg-ui-density))) calc(9px * var(--gcg-ui-density));
  border: 1px solid var(--c-border);
  border-radius: var(--r-m,7px);
  background: var(--c-panel-3);
  color: var(--c-text-bright);
  font-size: calc(12px * var(--fs-body,1));
  line-height: 1.25;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 6px 18px hsl(0 0% 0% / .5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .1s ease;
}
.pvp-chip-tip.open {
  opacity: 1;
  visibility: visible;
}
.pvp-browse-empty {
  font-size: 12px;
  color: var(--c-text-dim);
  text-align: center;
  padding: 22px 4px;
}
.pvp-browse-foot {
  display: flex;
  justify-content: flex-end;
  padding: 11px 16px 13px;
  border-top: 1px solid var(--c-border-subtle);
}
@media (max-width: 700px) {
  .pvp-browse-foot {
    justify-content: center;
    padding: 10px 12px 12px;
  }
}
#pvpBrowseBox .pvp-browse-foot .new-game {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  padding-inline: 34px;
}
@container pvproom (max-width: 1080px) {
  .pvp-room .pvp-room-chip {
    padding: 2px 6px;
    height: 23px;
  }
  .pvp-room .pvp-room-chip > .pvp-chip-sz {
    display: none;
  }
  .pvp-room .pvp-room-chip > .pvp-chip-cur {
    gap: 0;
  }
  .pvp-room-chip .pvp-chip-w {
    display: none;
  }
  .pvp-room-chip .pvp-chip-ico {
    font-size: 13px;
  }
}
@container pvproom (max-width: 700px) {
  .pvp-room {
    padding: 7px 10px;
    gap: 10px;
  }
  .pvp-room-ground {
    width: 300px;
  }
  .pvp-room-body {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .pvp-room-head {
    flex: 0 1 auto;
    max-width: 100%;
  }
  .pvp-room-names {
    flex: 0 0 auto;
    max-width: 100%;
    order: 1;
    min-height: 19px;
    text-shadow: var(--gcg-count-glow);
    font-size: 12px;
  }
  .pvp-room .pvp-room-chips {
    order: 2;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 6px;
  }
  .pvp-room-seats {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    font-size: 14px;
  }
  .pvp-room-seats .gcg-tbi {
    width: 15px;
    height: 15px;
  }
  .pvp-room-invite .pvp-invite-w {
    display: none;
  }
  .pvp-room-rail > .pvp-room-invite:not(.pvp-rail-sz) {
    justify-self: center;
  }
  .pvp-room-invite .gcg-tbi {
    width: 15px;
    height: 15px;
  }
}
#pvpChat {
  position: fixed;
  right: 14px;
  bottom: 88px;
  z-index: 480;
  width: min(320px, calc(100vw - 28px));
  display: none;
  flex-direction: column;
  background: var(--glass-modal-bg, var(--c-panel,#1a1e24));
  -webkit-backdrop-filter: var(--glass-modal-blur);
  backdrop-filter: var(--glass-modal-blur);
  border: 1px solid var(--c-border,#3a414c);
  border-radius: var(--r-l,10px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  font-family: var(--font-body);
}
#pvpChat.open {
  display: flex;
}
#pvpChat.collapsed {
  width: auto;
}
body.pvp-lobby #pvpChat {
  z-index: 11950;
}
#pvpChat.collapsed .pvp-chat-body,
#pvpChat.collapsed .pvp-chat-form,
#pvpChat.collapsed .pvp-chat-note {
  display: none;
}
.pvp-chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  background: var(--c-panel-2,#20242b);
  border-bottom: 1px solid var(--c-border-subtle,#2a2f37);
  user-select: none;
}
#pvpChat.collapsed .pvp-chat-head {
  border-bottom: 0;
}
.pvp-chat-title {
  flex: 1 1 auto;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--c-text-bright,#c8ccd2);
  white-space: nowrap;
}
.pvp-chat-badge {
  flex: 0 0 auto;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--c-success,#9dcc9d);
  color: #0c1410;
  font-size: 10px;
  font-weight: 800;
  display: none;
  align-items: center;
  justify-content: center;
}
.pvp-chat-badge.show {
  display: inline-flex;
}
.pvp-chat-caret {
  flex: 0 0 auto;
  color: var(--c-text-dim,#7a828c);
  font-size: 11px;
}
.pvp-chat-hbtn {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  height: 20px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-s,4px);
  color: var(--c-text-dim,#7a828c);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 18px;
  cursor: pointer;
}
.pvp-chat-hbtn:hover:not(:disabled) {
  color: var(--c-text-hi,#e6e9ee);
  background: var(--c-ctrl-2,#2a303a);
  border-color: var(--c-border,#3a414c);
}
.pvp-chat-hbtn.on {
  color: var(--c-warn,#e0a94a);
}
.pvp-chat-hbtn.on:hover:not(:disabled) {
  color: color-mix(in srgb, var(--c-warn,#e0a94a) 60%, #fff);
  background: color-mix(in srgb, var(--c-warn,#e0a94a) 14%, var(--c-ctrl-2,#2a303a));
}
.pvp-chat-hbtn--ico {
  font-size: 14px;
  line-height: 16px;
  padding: 0 5px;
}
.pvp-chat-menu {
  position: fixed;
  z-index: var(--z-pvp-chat-menu, 11960);
  min-width: 150px;
  margin-top: 0;
}
.pvp-chat-resize {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  z-index: 2;
  touch-action: none;
  background:
    linear-gradient(
      135deg,
      var(--c-text-faint,#5b6270) 0 2px,
      transparent 2px 5px,
      var(--c-text-faint,#5b6270) 5px 7px,
      transparent 7px 100%);
  opacity: .55;
}
.pvp-chat-resize:hover {
  opacity: 1;
}
#pvpChat.collapsed .pvp-chat-resize {
  display: none;
}
.pvp-chat-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 10px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  height: min(40vh, 300px);
}
.pvp-chat-empty {
  color: var(--c-text-dim,#7a828c);
  font-size: 11px;
  text-align: center;
  margin: auto 0;
}
.pvp-chat-msg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 7px;
  align-items: baseline;
}
.pvp-chat-msg .pvp-chat-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--c-text-dim);
  white-space: nowrap;
}
.pvp-chat-msg .pvp-chat-line {
  grid-column: 2;
  min-width: 0;
  line-height: 1.4;
  word-break: break-word;
}
.pvp-chat-msg .pvp-chat-who {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-muted);
  margin-right: 6px;
}
.pvp-chat-msg.mine .pvp-chat-who {
  color: var(--c-success);
}
.pvp-chat-msg .pvp-chat-text {
  font-size: 12px;
  color: var(--c-text-bright);
  white-space: pre-wrap;
}
.pvp-chat-sys {
  font-size: 11px;
  font-style: italic;
  color: var(--c-text-muted,#9aa2ac);
  word-break: break-word;
}
.pvp-chat-form {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--c-border-subtle,#2a2f37);
  background: var(--c-panel-2,#20242b);
}
.pvp-chat-form .pvp-chat-input {
  flex: 1 1 auto;
  min-width: 0;
}
.pvp-chat-form .pvp-chat-send {
  flex: 0 0 auto;
}
.pvp-chat-note {
  padding: 6px 10px;
  font-size: 10px;
  color: var(--c-text-dim,#7a828c);
  border-top: 1px solid var(--c-border-subtle,#2a2f37);
  text-align: center;
}
.pvp-report-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 2px 0 4px;
  text-align: left;
}
.pvp-report-form textarea.gcg-input {
  width: 100%;
  resize: vertical;
}