*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button, input, select, textarea {
  font-family: inherit;
  /* #main has touch-action:none (touch.css), but #toolbar and the Settings/Help/language popups
     are siblings of #main, not descendants — without this, their buttons keep the browser's
     default double-tap-zoom disambiguation delay, which can swallow fast repeated taps. */
  touch-action: manipulation;
}

:root {
  --bg-0: #141424;
  --bg-1: #1b1b32;
  --bg-3: #1e1e3a;
  --bg-2: #252548;

  --border:    #2a2a50;
  --border-hl: #363668;

  --accent:       #5050c0;
  --accent-light: #7878e8;

  --text-1: #dfdfff;
  --text-2: #9090c4;

  --danger:       #e05555;
  --danger-hover: #f47474;
  --gold:         #d7ca8a;

  /* Shared corner-radius scale — most rounded UI chrome in the app uses one of these three. */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 14px;
  /* Shared floating-panel shadow: popups, dropdown menus, tooltips. */
  --shadow-float: 0 6px 24px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.3);
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: var(--bg-0);
  color: var(--text-1);
  /* 100vh on mobile Chrome/Brave is the *maximum* viewport (address bar hidden), taller than what's
     actually visible when it's shown — the bottom row (mobile bottom bar) then renders below the
     visible screen. 100dvh tracks the real, current viewport instead; height: 100vh above is just
     the fallback for browsers that don't support dvh (an unsupported unit voids the whole line). */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

/* ── Toolbar ── */
#toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 clamp(6px, 2vw, 10px);
  height: 48px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-width: 0;
  gap: clamp(4px, 1.5vw, 8px);
}

#toolbar .left-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

#toolbar .logo {
  color: var(--text-2);
  font-weight: 600;
  font-size: 18px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s;
  cursor: pointer;
  flex-shrink: 0;
}
#toolbar .logo:hover { color: var(--text-1); }
/* #btn-toggle-pal2 is hidden on mobile, so the logo becomes .left-group's flush-left first child —
   sitting right at the toolbar's own padding, unlike a button's icon, which is inset 10px inside
   its 40px box. This margin matches that inset so the logo's visual start lines up with the icons. */
body.layout-mobile #toolbar .logo { margin-left: 10px; }

#toolbar .center-group {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

#toolbar .right-group {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.toolbar-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 1px;
}
/* Undo/Redo/Reset move out to #mobile-bottom-bar on mobile (editor.js's _enterMobileBottomBar),
   leaving this separator with nothing before it to separate from board-color-change anymore. */
body.layout-mobile #toolbar .toolbar-sep { display: none; }

/* ── Buttons ── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
  flex-shrink: 0;
}
.btn svg { width: 20px; height: 20px; }
.btn:hover { background: var(--bg-0); color: var(--text-1); }

/* #btn-toggle-palette shows a different icon depending on what it does — collapse the desktop
   sidebar vs. open the mobile popup (same button, reparented between the two — see editor.js's
   _enterMobileBottomBar/_exitMobileBottomBar). */
#btn-toggle-palette .icon-mobile  { display: none; }
body.layout-mobile #btn-toggle-palette .icon-desktop { display: none; }
body.layout-mobile #btn-toggle-palette .icon-mobile  { display: block; }

/* Harmonized with #mobile-bottom-bar's own gap/button size below — together they keep both bars'
   content within 400px wide (padding + 2 grid gaps + widest group vs. 4 buttons + 3 gaps). Height
   matches #mobile-bottom-bar's own 56px too — desktop keeps the base rule's 48px above. */
body.layout-mobile #toolbar { height: 56px; gap: 8px; }
body.layout-mobile #toolbar .left-group,
body.layout-mobile #toolbar .center-group,
body.layout-mobile #toolbar .right-group { gap: 8px; }
body.layout-mobile #toolbar .btn { width: 40px; height: 40px; }
body.layout-mobile #toolbar .btn svg { width: 20px; height: 20px; }

/* ── Main area ── */
#main {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* ── Board area — fills #main by default; desktop grid below repositions it as the center column ── */
#board-area {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* ── Desktop 3-panel layout: fixed-width saves panel | board | token panel ──
   Only #board-area sits in the grid — its middle track is bounded by --pal2-col-w/--pal-col-w,
   the space currently reserved for each panel (animated by _animatePanelToggle in editor.js).
   The panels themselves are positioned absolutely at a constant width (--pal2-panel-w/
   --pal-panel-w), so closing one just translates it off-screen, decoupled from board space ceded. */
body.layout-desktop #main {
  display: grid;
  grid-template-columns: var(--pal2-col-w, 280px) minmax(0, 1fr) var(--pal-col-w, 0px);
  grid-template-rows: 100%;
}
body.layout-desktop #board-area { grid-column: 2; grid-row: 1; }

body.layout-desktop #pal2-panel,
body.layout-desktop #pal-panel {
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
body.layout-desktop #pal2-panel { left: 0;  width: var(--pal2-panel-w, 280px); }
body.layout-desktop #pal-panel  { right: 0; width: var(--pal-panel-w, 0px); }

/* ── Mobile layout: board fills #main entirely — no embedded bottom panel any more, the character
   palette is a centered popup instead (further down) and Saves has no mobile presence at all. ── */
body.layout-mobile #main {
  display: flex;
  flex-direction: column;
}
body.layout-mobile #board-area {
  flex: 1;
  min-height: 0;
}

body.layout-mobile #btn-toggle-pal2 { display: none; }

/* ── Mobile bottom bar — Undo/Redo/Reset + the palette-popup trigger, reparented in from the top
   toolbar (editor.js's _enterMobileBottomBar/_exitMobileBottomBar). A plain flex row, sibling of
   #toolbar and #main under body's own flex column — its fixed height shrinks #main automatically,
   exactly like the toolbar does at the top, no extra layout math needed (see _relayoutMobile). */
#mobile-bottom-bar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 20px; /* still comfortably within 400px: 4 buttons * 40px + 3 gaps * 20px = 220px */
  height: 56px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
body.layout-mobile #mobile-bottom-bar { display: flex; }
#mobile-bottom-bar .btn { width: 40px; height: 40px; }
#mobile-bottom-bar .btn svg { width: 20px; height: 20px; }

/* ── Mobile palette popup — #pal-panel becomes a centered modal card (same visual language as
   #settings-popup/#help-popup) instead of an embedded panel. position:fixed positions it against
   the viewport regardless of its #main parent, so it never needs to be reparented in the DOM. */
body.layout-mobile #pal-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  /* Same fixed size as #help-popup/#settings-popup. Fixed height, not max-height/auto — recruiting
     a character removes it from the list below, and an auto-height popup would visibly shrink to
     match on every single recruit. */
  width: 420px;
  max-width: 92vw;
  height: min(500px, 80vh);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
  z-index: 81;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.22,1,0.36,1);
}
body.layout-mobile #pal-panel.mobile-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Backdrop behind the popup — a plain sibling, not a wrapper, so #pal-panel needs no reparenting.
   Click anywhere on it to dismiss, same as #settings-overlay/#help-overlay's own backdrop. */
#pal-popup-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.40);
}
body.layout-mobile #pal-popup-backdrop.open { display: block; }

.pal-header-actions { display: flex; align-items: center; gap: 4px; }

/* Desktop closes the panel via the toolbar's own toggle button instead — see palette.js's
   #pal-popup-close click handler and editor.js's _closeMobilePalettePopup. */
#pal-popup-close {
  display: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: color 0.12s;
}
#pal-popup-close:hover { color: var(--text-1); }
body.layout-mobile #pal-popup-close { display: flex; }

/* Saves (Palette2) is desktop-only — no mobile presence of any kind. */
body.layout-mobile #pal2-panel { display: none; }

/* ── Board layer ── */
#board-layer {
  position: absolute;
  background-image: url('board.png');
  background-size: 100% 100%;
  image-rendering: auto;
  pointer-events: none;
  z-index: 1;
}
#droptarget-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

#labels-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

#tokens-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

#arrows-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

/* ── Board status icons — capture/encirclement/barrage warnings + white/black team variants,
   checked in editor.js's _updateBoardStatusIcons. Shrink-to-fit flex row, right-anchored against
   #board-area, so visible icons stay flush right without gaps from hidden ones. Positioned so the
   rightmost icon's center is 25px from the corner — aligned with #pal-title/#pal2-title. */
#board-status-icons {
  position: absolute;
  top: 25px;
  right: 11px; /* 25px minus half an icon's 28px width, so the last icon's *center* sits at 25px */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}
.board-status-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.board-status-icon svg {
  width: 100%;
  height: 100%;
}
.board-status-icon.visible {
  display: flex;
}
/* Team-specific icon badges: pinkish-red circle for both teams, SVG colored white or black. */
.swatch-circle {
  background: #d54747;
  border-radius: 50%;
}
.swatch-circle svg {
  width: 70%;
  height: 70%;
}
.swatch-white-circle { color: #ffffff; }
.swatch-black-circle { color: #000000; }

/* ── Jetons HTML ── */
/* --tok-sz (set on <body> by relayout()) is the shared size reference for every token-shaped
   element — board tokens, drag ghost, drop targets, palette items — so JS never sizes them directly. */
.html-token {
  position: absolute;
  width: var(--tok-sz, 0px);
  height: var(--tok-sz, 0px);
  border-radius: 50%;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
  /* Coefficients are half the original r-based formula — --tok-sz is the full diameter (2r). */
  box-shadow: calc(var(--tok-sz, 0px) * 0.025) calc(var(--tok-sz, 0px) * 0.03) calc(var(--tok-sz, 0px) * 0.06) rgba(0,0,0,0.6);
}
body.no-shadows .html-token { box-shadow: none; }

.html-token img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
.html-token img.used-token { filter: grayscale(1) opacity(0.5); }

/* Corner badge showing the original character under a Frog transformation — driven by the
   --frog-badge-src custom property (_applyFrogBadge in editor.js). top:0/right:0 with no
   transform puts the badge's own top-right corner exactly on the token's. */
.html-token.frog-badge-on::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--frog-badge-sz, 0px);
  height: var(--frog-badge-sz, 0px);
  border-radius: 50%;
  background-image: var(--frog-badge-src);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--bg-0);
  z-index: 3;
}

#drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 500; /* must render above every panel/overlay while dragging (highest in-app z-index is 200) */
  /* All actual positioning is via transform (set in editor.js), not left/top — transform is
     compositor-only and doesn't force layout on every mousemove, which is also why animations
     on its children (the trash-bin icon) stay smooth while it's being dragged. */
  will-change: transform;
}
/* Distinct "lifted" shadow while dragging — fixed, not proportional like .html-token's resting
   shadow, so it reads the same regardless of the dragged item's size. */
body:not(.no-shadows) #drag-ghost {
  box-shadow: 2px 3px 8px rgba(0,0,0,0.5);
}

.html-label {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1;
  font-weight: bold;
  transition: opacity 0.12s;
}

/* ── Ghost trash overlay ── */
@keyframes trash-icon-bounce {
  0%   { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(4deg);  opacity: 1; }
  100% { transform: scale(1.0)  rotate(0deg);  opacity: 1; }
}

@keyframes trash-icon-pulse {
  0%   { transform: scale(1.0); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1.0); }
}

.ghost-trash {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(180, 30, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ghost-trash svg {
  width: 45%;
  height: 45%;
  stroke: #fff;
}

.html-droptarget {
  position: absolute;
  width: var(--tok-sz, 0px);
  height: var(--tok-sz, 0px);
  border-radius: 50%;
  background: rgba(100,100,100,0.25);
  pointer-events: none;
}

/* ── Palette HTML ── */
#pal-panel {
  position: absolute;
  background: var(--bg-1);
  border: none;
  border-radius: 0;
  /* box-shadow draws the divider without consuming content width — the panel's width is computed
     to fit an exact number of item columns (palette.js). */
  box-shadow: -1px 0 0 var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 40;
  transition: opacity 0.2s, transform 0.28s cubic-bezier(0.4,0,0.2,1);
}

#pal-panel.collapsed {
  /* Panel's own width is constant at all times — only the board's reserved space animates in JS —
     so translateX(100%) is relative to a fixed box, a single clean outward slide. */
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

#pal-header, #pal2-header {
  padding: 0 20px;
  height: 48px; /* matches #toolbar's desktop height — these panels are a desktop-only concept */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--bg-1);
}
#pal-header  { border-bottom: 1px solid rgba(70,70,160,0.2); }
#pal2-header { border-bottom: 1px solid var(--border); }
/* Matches #toolbar's own right padding so #pal-filter-btn lands at the same x as the
   toolbar's right-group buttons above it — left padding (title) is untouched. */
#pal-header { padding-right: clamp(6px, 2vw, 10px); }

#pal-title, #pal2-title {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ── Header filter icon — opens a dropdown (_openFilterMenu, palette.js) listing the
   hide-on-board toggle and a/b/c type toggles. Two swapped svgs (outline=off, filled=on) show
   whether any filter is active. */
.pal-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
}
.pal-filter-btn svg { width: 20px; height: 20px; }
/* The filled "on" icon has no stroke, so it reads smaller than the outlined "off" one at the
   same size — scaled up to compensate. */
.pal-filter-btn .pal-filter-icon-on { transform: scale(1.12); }
.pal-filter-btn .pal-filter-icon-on  { display: none; }
.pal-filter-btn.active .pal-filter-icon-off { display: none; }
.pal-filter-btn.active .pal-filter-icon-on  { display: block; }
.pal-filter-btn:hover { background: var(--bg-0); }

#pal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: none;
}
#pal-body::-webkit-scrollbar { display: none; }

/* Mobile popup shows the same scrollbar as #help-body/#settings-body instead of the desktop
   sidebar's hidden one — a modal benefits from a visible affordance that there's more to scroll. */
body.layout-mobile #pal-body {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
body.layout-mobile #pal-body::-webkit-scrollbar { display: block; }

.pal-item.pal-item-filtered-out { display: none; }
.pal-section.pal-section-empty { display: none; }

.pal-section { position: relative; }
/* Not :last-child — palette.js tracks the last *visible* section, so the divider doesn't trail a
   run of hidden ones at the end. */
.pal-section:not(.pal-section-last-visible)::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  margin: 0 20px;
}

.pal-sec-hdr {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 40px;
  user-select: none;
}

.pal-sec-label {
  font-size: 16px;
  color: var(--text-2);
}

.pal-grid {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 20px 20px;
}
.pal-grid.open { display: flex; }
.pal-grid-first { padding-top: 20px; } /* extra breathing room below the panel header */

/* Mobile: more condensed sections — less wasted padding around a list that's already shorter */
body.layout-mobile .pal-sec-hdr { padding: 0 14px; height: 34px; }
body.layout-mobile .pal-sec-label { font-size: 14px; }
body.layout-mobile .pal-grid { gap: 6px; padding: 6px 14px 14px; }
body.layout-mobile .pal-grid-first { padding-top: 10px; }

.pal-item {
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  width: var(--tok-sz, 0px);
  height: var(--tok-sz, 0px);
  min-width: var(--tok-sz, 0px);
  min-height: var(--tok-sz, 0px);
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  transition: transform 0.12s ease;
}
.pal-item:hover {
  transform: translateY(-4px);
  z-index: 1;
}

.pal-item img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
  /* Matches the board's zoom-out transition (touch.css) so on-board/off-board toggling animates
     the same way in both places. */
  transition: top 0.08s ease, left 0.08s ease, width 0.08s ease, height 0.08s ease;
}

.pal-item-banned > img {
  filter: grayscale(60%);
}
.pal-item-banned .pal-item-ban-overlay {
  /* Tints (not dims) the token — panel background color at 40%, no opacity reduction. */
  background: color-mix(in srgb, var(--bg-1) 40%, transparent);
}

.pal-item-ban-overlay {
  position: absolute;
  /* Explicit top/left/width/height (not `inset: 0`) matches .pal-item img's model exactly, so the
     on-board override below resolves the box's position unambiguously. */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  transition: top 0.08s ease, left 0.08s ease, width 0.08s ease, height 0.08s ease;
}
.pal-item-ban-overlay img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
}

.pal-badge {
  position: absolute;
  --badge-sz: clamp(12px, calc(var(--tok-sz, 0px) * 0.29), 18px);
  --target-r: calc(var(--tok-sz, 0px) / 2);
  --circle-corner-inset: calc(var(--tok-sz, 0px) / 2 - var(--target-r) * 0.7);
  top: calc(var(--circle-corner-inset) - var(--badge-sz) / 2);
  right: calc(var(--circle-corner-inset) - var(--badge-sz) / 2);
  background: var(--gold);
  color: var(--bg-1);
  font-size: clamp(8px, calc(var(--tok-sz, 0px) * 0.2), 12px);
  font-weight: bold;
  border-radius: 50%;
  width: var(--badge-sz);
  height: var(--badge-sz);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.pal-item-on-board {
  --outline-w: max(2px, calc(var(--tok-sz, 0px) * 0.04));
}

.pal-item-on-board img,
.pal-item-on-board .pal-item-ban-overlay {
  top: var(--outline-w);
  left: var(--outline-w);
  width: calc(100% - var(--outline-w) * 2);
  height: calc(100% - var(--outline-w) * 2);
}

.pal-item-on-board::before {
  content: '';
  position: absolute;
  inset: 0; /* the item's original, full-size boundary */
  border-radius: 50%;
  background: var(--gold);
  z-index: -1;
  pointer-events: none;
}

.pal-item-on-board .pal-item-ban-overlay {
  border-radius: 50%;
  overflow: hidden;
}

/* On-board, the artwork is downscaled by --outline-w on every side (creating the ring). Overriding
   just --target-r is enough — .pal-badge's own --circle-corner-inset/top/right pick it up
   automatically, since custom properties resolve per-element at used-value time. */
.pal-item-on-board .pal-badge {
  --token-r:   calc(var(--tok-sz, 0px) / 2 - var(--outline-w)); /* downscaled artwork's radius */
  --outline-r: calc(var(--tok-sz, 0px) / 2);                    /* full, original radius */
  --target-r:  calc((var(--token-r) + var(--outline-r)) / 2);
}

/* While any context menu is open, block pointer events everywhere so hover effects on the
   underlying UI don't fire — re-enabled only on the open menu itself (and its children). */
body.menu-open { pointer-events: none; }
body.menu-open #tok-tb,
body.menu-open #pal-tok-tb,
body.menu-open #pal2-ctx-menu,
body.menu-open #pal-filter-menu,
body.menu-open #lang-submenu { pointer-events: auto; }

/* ── Token context menus — board (#tok-tb), palette ban toolbar (#pal-tok-tb), and the Saves
   panel's (#pal2-ctx-menu) share one design (_openCtxMenu/_closeCtxMenu in editor.js): a plain
   box with no arrow, opened at the cursor's position rather than anchored to the item. */
#tok-tb, #pal-tok-tb, #pal2-ctx-menu, #pal-filter-menu {
  position: fixed;
  display: none;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px;
  z-index: 200;
  isolation: isolate;
  pointer-events: all;
  box-shadow: var(--shadow-float);
  min-width: 120px;
  opacity: 0;
  scale: 0.92;
  transition: opacity 0.15s ease, scale 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Grows in from the corner nearest the cursor — set in JS (_openCtxMenu) depending on which way
   the menu had to flip to stay on-screen. */
#tok-tb, #pal-tok-tb, #pal2-ctx-menu, #pal-filter-menu { transform-origin: top left; }
#tok-tb.ctx-flip-x, #pal-tok-tb.ctx-flip-x, #pal2-ctx-menu.ctx-flip-x, #pal-filter-menu.ctx-flip-x { transform-origin: top right; }
#tok-tb.ctx-flip-y, #pal-tok-tb.ctx-flip-y, #pal2-ctx-menu.ctx-flip-y, #pal-filter-menu.ctx-flip-y { transform-origin: bottom left; }
#tok-tb.ctx-flip-x.ctx-flip-y, #pal-tok-tb.ctx-flip-x.ctx-flip-y, #pal2-ctx-menu.ctx-flip-x.ctx-flip-y, #pal-filter-menu.ctx-flip-x.ctx-flip-y { transform-origin: bottom right; }
#tok-tb.open, #pal-tok-tb.open, #pal2-ctx-menu.open, #pal-filter-menu.open {
  display: flex;
  opacity: 1;
  scale: 1;
}
/* #pal-filter-menu never uses the ctx-flip-* classes above (its own JS anchors it by top-right
   corner directly) — override the shared default so it still grows from that same corner. */
#pal-filter-menu { transform-origin: top right; }

.tok-tb-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--text-1);
  cursor: pointer;
  font-size: 13px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
  width: 100%;
  text-align: left;
}
.tok-tb-btn:hover { background: var(--bg-2); }
.tok-tb-btn svg { flex-shrink: 0; width: 18px; height: 18px; }
.tok-tb-btn .pal-filter-check { width: 14px; height: 14px; color: var(--text-1); }
/* Fixed-size placeholder, present whether or not the checkmark itself is — keeps every row (and
   so the menu, which auto-sizes to its widest row) the same width regardless of toggle state. */
.pal-filter-check-slot { display: flex; flex-shrink: 0; width: 14px; height: 14px; }
#pal-filter-menu { min-width: 200px; }
/* A full-width menu row scaling down on press would look like it's shrinking away from one
   edge — a background bump reads as "pressed" without that asymmetry. */
.tok-tb-btn:active { background: var(--border); }

.tok-tb-sep {
  height: 1px;
  background: var(--border);
  margin: 3px 0;
}


.tok-tb-btn-danger { color: var(--danger); }
.tok-tb-btn-danger:hover {
  background: rgba(200,80,80,0.12) !important;
  color: var(--danger-hover) !important;
}

/* ── Settings overlay + popup ── */
#settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.40);
}
#settings-overlay.hidden { display: none; }

/* Same fixed size as #help-popup (420px / min(500px, 80vh)) — #settings-body below is the one
   flexible part, scrolling internally rather than growing the popup itself. */
#settings-popup {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 420px;
  max-width: 92vw;
  max-height: 80vh;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#settings-header {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#settings-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.03em;
  text-align: center;
  grid-column: 2;
}

#settings-close {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s;
  grid-column: 3;
}
#settings-close:hover { color: var(--text-1); }

#settings-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  flex: 1;
  min-height: 0;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: background 0.12s;
  touch-action: manipulation; /* a <div>, not a <button>, in #settings-overlay — a sibling of
                                  #main, so it needs its own override (see the button rule above) */
}
.setting-row:hover { background: var(--bg-2); }
.setting-row-lang { cursor: pointer; padding-top: 9px; padding-bottom: 9px; }
.setting-row-lang:hover { background: var(--bg-2); }

body.layout-mobile #settings-body { padding: 8px; gap: 6px; }
body.layout-mobile .setting-row   { padding: 10px; }

.setting-info { flex: 1; min-width: 0; }

.setting-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
}
.setting-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.45;
}

/* ── Language trigger button ── */
#lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 14px;
  pointer-events: none;
  white-space: nowrap;
}
#lang-trigger svg { opacity: 0.6; flex-shrink: 0; }

/* ── Language submenu ── */
#lang-submenu {
  display: none;
  position: fixed;
  flex-direction: column;
  align-items: stretch;
  background: var(--bg-1);
  border: 1px solid var(--border-hl);
  border-radius: var(--radius-md);
  padding: 4px;
  z-index: 90;
  isolation: isolate;
  pointer-events: all;
  box-shadow: var(--shadow-float);
  min-width: 140px;
  opacity: 0;
  scale: 0.92;
  transform-origin: top center;
  transition: opacity 0.15s ease, scale 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
#lang-submenu::before {
  content: '';
  position: absolute;
  top: -5px;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 3px 0 0 0;
  z-index: -1;
}
#lang-submenu.open {
  display: flex;
  opacity: 1;
  scale: 1;
}

.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  touch-action: manipulation; /* a <div>, not a <button> — same reasoning as the rule above */
}
.lang-option:hover { background: var(--bg-2); color: var(--text-1); border-radius: 5px; }
.lang-option.active { background: var(--bg-2); color: var(--text-1); border-radius: 5px; }
.lang-check {
  display: none;
  flex-shrink: 0;
}
.lang-option.active .lang-check { display: block; }

/* ── Toggle switch ── */
/* Track recolors (gray off / accent on); thumb stays a plain white circle in both states. */
.toggle {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  border: none; /* it's a <button> — without this the browser's own default button border shows through */
  background: var(--border-hl);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-1);
  transition: transform 0.15s ease;
}
.toggle.active {
  background: var(--accent);
}
.toggle.active::after {
  transform: translateX(16px);
}

/* ── Help overlay + popup ── */
#help-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.40);
}
#help-overlay.hidden { display: none; }

/* Fixed size — #help-body scrolls internally rather than growing the popup itself. */
#help-popup {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 420px;
  max-width: 92vw;
  height: min(500px, 80vh);
  box-shadow: 0 12px 48px rgba(0,0,0,0.8);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#help-header {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#help-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.03em;
  text-align: center;
  grid-column: 2;
}

#help-close {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s;
  grid-column: 3;
}
#help-close:hover { color: var(--text-1); }

/* Thin, muted scrollbar matching the popup's own palette instead of the browser's default —
   present but unobtrusive, rather than hidden outright. */
#help-body {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
}

.help-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.help-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-1);
  padding: 10px 5px 5px;
}
.help-section:first-child .help-section-title {
  padding-top: 2px;
}

.help-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  background: var(--bg-3);
  border-radius: 8px;
  padding: 10px 12px;
}
body.layout-mobile #help-body { padding: 8px; }
body.layout-mobile .help-row  { padding: 8px 10px; min-height: 30px; }

/* Wraps two alternative-shortcut <kbd>s as separate badges instead of one combined chip. */
.help-keys {
  order: 2;
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Key badge sits on the right (order swaps it past .help-desc's flex:1). */
.help-key, kbd {
  order: 2;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  background: none;
  border: 1px solid var(--bg-0);
  box-shadow: 0 4px 0 var(--bg-0);
  /* Nudge up to counter the downward-only shadow, so it reads as vertically centered. */
  transform: translateY(-2px);
  border-radius: 5px;
  padding: 3px 6px;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
}

.help-desc {
  order: 1;
  flex: 1;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.4;
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════
   PALETTE 2 — SAUVEGARDES
   ══════════════════════════════════════════════════════════════════ */

#pal2-panel {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  overflow: hidden;
  z-index: 40;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
}
#pal2-panel.collapsed {
  /* Same reasoning as #pal-panel.collapsed — constant width, so this stays a clean slide. */
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ── Body ── */
#pal2-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: none;
}
#pal2-body::-webkit-scrollbar { display: none; }

#pal2-list {
  display: flex;
  flex-direction: column;
  padding: 14px;
}

.pal2-section { position: relative; }

/* ── Section header ── */
.pal2-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 4px 8px;
  border-radius: 6px;
  user-select: none;
  cursor: pointer;
}
.pal2-section .pal2-section-hdr:hover { background: var(--bg-2); }

.pal2-sec-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  flex: 1;
}
.pal2-section-hdr:hover .pal2-sec-arrow,
.pal2-section-hdr:hover .pal2-sec-name {
  color: var(--text-1);
}
/* Keyboard-only ring (mouse/touch activation never matches :focus-visible) — this is a <div
   role="button">, so without this it's focusable (tabindex=0) but gives no visual feedback at
   all when reached via keyboard. */
.pal2-sec-left:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pal2-sec-arrow {
  flex-shrink: 0;
  color: var(--text-2);
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1);
  transform: rotate(-90deg);
}
.pal2-sec-arrow.open {
  transform: rotate(0deg);
}

.pal2-sec-name {
  /* flex:1 so this reclaims the space .pal2-sec-actions leaves behind when it shrinks to 0 at rest. */
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.pal2-sec-right {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pal2-sec-count {
  font-size: 12px;
  color: var(--text-2);
  opacity: 0.8;
  flex-shrink: 0;
  margin: 0 4px;
}
.pal2-section-hdr:hover .pal2-sec-count { display: none; }

/* Visible on hover. width (not just opacity) collapses to 0 at rest, so .pal2-sec-name reclaims
   that space instead of leaving it blank-but-reserved. */
.pal2-sec-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
}
.pal2-section-hdr:hover .pal2-sec-actions,
.pal2-section-hdr:focus-within .pal2-sec-actions {
  width: 60px; /* two 28px buttons + 4px gap */
  opacity: 1;
}

.pal2-sec-actions .pal2-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-2);
}
.pal2-sec-actions .pal2-action-btn:hover {
  background: var(--bg-1);
  color: var(--text-1);
}

/* ── Section body (collapsible) ── */
.pal2-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s cubic-bezier(0.4,0,0.2,1);
}
.pal2-section-body.open {
  max-height: 2000px;
}

/* ── Config list ── */
.pal2-config-list {
  display: flex;
  flex-direction: column;
  padding: 0 0 8px;
}

/* ── Config rows ── */
.pal2-row {
  position: relative;
  border-radius: 6px;
  flex-shrink: 0;
}
/* Tree guide: vertical bar centered (13px = 8px header padding + half the 10px chevron) under
   the section's own collapse chevron, reading as a continuation of it. */
.pal2-row::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--border);
  pointer-events: none;
}
.pal2-row:hover .pal2-row-main {
  background: var(--bg-2);
}
.pal2-row:hover .pal2-row-name {
  color: var(--text-1);
}

/* Indented so the rect's left edge lines up with the section title's own start (8px header
   padding + 10px chevron + 6px gap = 24px). */
.pal2-row-main {
  display: flex;
  align-items: center;
  margin-left: 24px;
  padding: 4px 4px 4px 8px;
  cursor: pointer;
  border-radius: 6px;
}
/* Keyboard-only ring, same convention as .pal2-sec-left above — .pal2-row-main is a
   role="button" div, so it needs its own explicit focus style. */
.pal2-row-main:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Same width-collapse reasoning as .pal2-sec-actions — .pal2-row-name reclaims the space at rest. */
.pal2-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
}
.pal2-row:hover .pal2-row-actions,
.pal2-row:focus-within .pal2-row-actions {
  width: 60px; /* two 28px buttons + 4px gap */
  margin-left: 6px;
  opacity: 1;
}

/* Touch has no hover state, so force these permanently visible there. width:auto (not a fixed px)
   keeps this correct at both the 28px desktop size and the larger mobile one. */
@media (hover: none) {
  .pal2-sec-actions  { width: auto; opacity: 1; }
  .pal2-row-actions  { width: auto; opacity: 1; margin-left: 6px; }
}

.pal2-row-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pal2-row-name.editing {
  overflow: visible;
  white-space: normal;
  flex: 1;
}

/* ── Boutons d'action partagés ── */
.pal2-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: scale 0.08s;
}
.pal2-action-btn:hover {
  background: var(--bg-1);
  color: var(--text-1);
}
.pal2-action-btn:active { scale: 0.88; }
.pal2-action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.pal2-add-section-btn {
  cursor: pointer;
  flex-shrink: 0;
}
.pal2-add-section-btn .pal2-section-hdr:hover { background: none; }
/* Shrink-wrapped (not flex:1, unlike a real section's) so the hover feedback below triggers on the
   icon+text itself, not the header's full clickable width — cancel the shared header-hover rule,
   then reapply it scoped to .pal2-sec-left (same specificity, wins on being declared after). */
.pal2-add-section-btn .pal2-sec-left { flex: 0 1 auto; min-height: 28px; }
.pal2-add-section-btn svg { color: var(--text-2); }
.pal2-add-section-btn .pal2-section-hdr:hover svg,
.pal2-add-section-btn .pal2-section-hdr:hover .pal2-sec-name { color: var(--text-2); }
.pal2-add-section-btn .pal2-sec-left:hover svg,
.pal2-add-section-btn .pal2-sec-left:hover .pal2-sec-name { color: var(--text-1); }

/* ── Inline rename input ── */
.pal2-inline-edit {
  display: contents;
}
.pal2-inline-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  outline: none;
  height: 22px;
  transition: border-color 0.12s;
}
.pal2-inline-input:focus {
  border-bottom-color: var(--accent-light);
}

/* ── Undo-delete toast (section/save row deletion) ──────────────────────────
   Fixed, centered at the bottom of the viewport — shown for UNDO_DELETE_MS (palette2.js) after
   deleting a section or save row. No button inside — the whole toast is the click target. */
.pal2-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  z-index: 210;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-1);
  border: 1px solid var(--border-hl);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), background 0.12s;
}
.pal2-toast:hover { background: var(--bg-2); }
.pal2-toast:active { scale: 0.98; }
.pal2-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.pal2-toast-label {
  font-size: 14px;
  color: var(--text-1);
  white-space: nowrap;
}
.pal2-toast-undo-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-1);
}

/* ── Tooltips Discord-style ── */
.dc-tooltip-el {
  display: none;
  position: fixed;
  z-index: 200;
  isolation: isolate;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease, transform 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}
.dc-tooltip-el.tt-above  { transform: translateY(-5px) scale(0.96); }
.dc-tooltip-el.tt-below  { transform: translateY(5px)  scale(0.96); }
.dc-tooltip-el.visible   { opacity: 1; transform: translateY(0) scale(1); }

.dc-tooltip-el::after {
  content: '';
  position: absolute;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  z-index: -1;
}

.dc-tooltip-el.tt-above::after {
  bottom: -5px;
  border-right: 1px solid var(--border-hl);
  border-bottom: 1px solid var(--border-hl);
  border-radius: 0 0 3px 0;
  background: var(--bg-1);
}
.dc-tooltip-el.tt-below::after {
  top: -5px;
  border-left: 1px solid var(--border-hl);
  border-top: 1px solid var(--border-hl);
  border-radius: 3px 0 0 0;
  background: var(--bg-1);
}

.dc-tooltip-el.tt-simple.tt-below::after { background: var(--bg-1); }
.dc-tooltip-el.tt-simple.tt-above::after { background: var(--bg-1); }

.dc-tooltip-el.tt-simple {
  background: var(--bg-1);
  border: 1px solid var(--border-hl);
  border-radius: var(--radius-md);
  padding: 6px 11px;
  box-shadow: var(--shadow-float);
}
.dc-tt-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}

.dc-tooltip-el.tt-rich {
  background: var(--bg-1);
  border: 1px solid var(--border-hl);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: var(--shadow-float);
  max-width: 230px;
}
.dc-tt-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.dc-tt-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.01em;
}
.dc-tt-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.dc-tt-ability {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}
.dc-tt-sep {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}