/* ============================================================
   UNDERTALE-STYLE DESIGN SYSTEM
   ============================================================ */

:root {
  --bg: #000000;
  --fg: #ffffff;
  --shadow: #555555;
  --accent-yellow: #ffff00;
  --accent-cyan: #00ffff;
  --accent-red: #ff0000;
  --accent-blue: #0080ff;
  --accent-green: #00ff80;
  --accent-orange: #ff8000;
  --accent-pink: #ff80ff;
  --accent-purple: #8000ff;
  --panel-bg: #111111;
  --input-bg: #000000;
  --font-main: 'Press Start 2P', monospace;
}

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

html, body {
  width: 100%; min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-main);
  font-size: 12px;
  line-height: 1.7;
  image-rendering: pixelated;
  cursor: none;
}

/* CUSTOM CURSOR — Undertale arrow */
#cursor {
  position: fixed; top: 0; left: 0;
  width: 20px; height: 20px;
  pointer-events: none; z-index: 99999;
  transform: translate(-2px, -2px);
}

/* SCANLINE OVERLAY */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9000;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.07) 2px,
    rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 8px; background: #000; }
::-webkit-scrollbar-thumb { background: #fff; }

/* ============================================================
   LAYOUT
   ============================================================ */
#app { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* HEADER */
#header {
  border-bottom: 3px solid var(--fg);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #000;
  position: sticky; top: 0; z-index: 100;
}
#logo {
  font-size: 16px;
  letter-spacing: 6px;
  color: var(--fg);
  text-shadow: 3px 3px 0 var(--shadow);
  animation: logo-flicker 6s infinite;
}
#logo span { color: var(--accent-yellow); }
@keyframes logo-flicker {
  0%,96%,100% { opacity: 1; }
  97% { opacity: 0.6; }
  98% { opacity: 1; }
  99% { opacity: 0.4; }
}
#header-btns { display: flex; gap: 12px; }

/* MAIN */
#main { display: flex; flex: 1; min-height: 0; }

/* SIDEBAR */
#sidebar {
  width: 250px; min-width: 250px;
  border-right: 3px solid var(--fg);
  background: #000;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#sidebar-title {
  padding: 12px 16px;
  border-bottom: 2px solid var(--fg);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--accent-yellow);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#char-list { flex: 1; overflow-y: auto; padding: 4px 0; }

.char-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 22px;
  cursor: none;
  border-bottom: 1px solid #1e1e1e;
  transition: background 0.1s;
  position: relative;
}
.char-entry:hover { background: #181818; }
.char-entry.active { background: #1e1e1e; }
.char-entry.active::before {
  content: '▶';
  position: absolute; left: 6px;
  color: var(--accent-yellow);
  font-size: 8px;
  animation: blink 0.8s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* HOVER ANIMATIONS */
.char-entry { transition: background 0.15s, transform 0.15s, box-shadow 0.15s; }
.char-entry:hover { background: #181818; transform: translateX(6px); box-shadow: -4px 0 0 var(--accent-yellow); }
.btn { transition: background 0.1s, color 0.1s, transform 0.12s, box-shadow 0.12s, border-color 0.12s; }
.panel { transition: border-color 0.2s, box-shadow 0.2s; }
.panel:hover { 
  --p-border: var(--char-color, var(--accent-yellow)); 
  box-shadow: 0 0 20px var(--char-color, rgba(255,255,0,0.1)); 
}
.tab-btn { transition: color 0.12s, border-color 0.12s, transform 0.12s; }
.tab-btn:hover { transform: translateY(-2px); color: #ccc; }
.field input[type=text], .field input[type=number], .field select, .field textarea {
  transition: border-color 0.15s, box-shadow 0.15s;
}
.avatar-upload-zone { transition: border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; }

/* COLLAPSIBLE PANELS */
.collapsible-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.collapsible-wrapper.collapsed {
  grid-template-rows: 0fr;
}
.collapsible-content {
  overflow: hidden;
}

.avatar-upload-zone:hover { transform: scale(1.03); box-shadow: 0 0 16px rgba(255,255,0,0.2); }
.swatch { transition: transform 0.12s, box-shadow 0.12s; }
.swatch:hover { transform: scale(1.3); box-shadow: 0 0 8px rgba(255,255,255,0.4); }
.char-avatar-large { transition: border-color 0.2s, box-shadow 0.2s; }
.char-avatar-large:hover { box-shadow: 0 0 24px rgba(255,255,255,0.15); }


.char-avatar-small {
  width: 34px; height: 34px;
  border: 2px solid var(--fg);
  background: #0a0a0a;
  flex-shrink: 0;
  image-rendering: pixelated;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.char-avatar-small img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.char-avatar-small svg { width: 18px; height: 18px; }

.char-entry-name {
  font-size: 9px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.char-entry-actions { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 4px; padding: 0 6px; background: #181818; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.char-entry:hover .char-entry-actions { opacity: 1; pointer-events: auto; }

/* CONTENT AREA */
#content { flex: 1; overflow-y: auto; padding: 24px; position: relative; }
#pattern-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-main);
  font-size: 9px;
  letter-spacing: 1px;
  border: 2px solid var(--fg);
  background: #000;
  color: var(--fg);
  padding: 8px 14px;
  cursor: none;
  text-transform: uppercase;
  position: relative;
  transition: background 0.05s, color 0.05s;
  outline: none;
  white-space: nowrap;
  line-height: 1.4;
}
.btn::after {
  content: '';
  position: absolute;
  right: -5px; bottom: -5px;
  width: 100%; height: 100%;
  border: 2px solid var(--shadow);
  z-index: -1;
}
.btn:hover { background: var(--fg); color: var(--bg); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,255,255,0.1); }
.btn:hover::after { opacity: 0; }
.btn:active { transform: translate(1px, 1px); }
.btn:active::after { right: -3px; bottom: -3px; transform: none; opacity: 1; }


.btn.danger  { border-color: var(--accent-red);   color: var(--accent-red); }
.btn.danger:hover  { background: var(--accent-red);   color: #000; }
.btn.success { border-color: var(--accent-green); color: var(--accent-green); }
.btn.success:hover { background: var(--accent-green); color: #000; }
.btn.accent  { border-color: var(--accent-yellow); color: var(--accent-yellow); }
.btn.accent:hover  { background: var(--accent-yellow); color: #000; }

.btn.sm { font-size: 7px; padding: 5px 8px; }
.btn.sm::after { right: -3px; bottom: -3px; }

.btn.icon-btn {
  padding: 8px 12px;
  font-size: 11px;
  border: 1px solid #3a3a3a;
  line-height: 1;
}
.btn.icon-btn::after { display: none; }
.btn.icon-btn:hover { background: #222; color: #fff; border-color: #fff; }
.btn.icon-btn.danger { border-color: #3a1a1a; color: #cc4444; }
.btn.icon-btn.danger:hover { background: #2a0a0a; color: var(--accent-red); border-color: var(--accent-red); }

/* ============================================================
   PANELS
   ============================================================ */
.panel {
  --p-border: var(--fg);
  border: 3px solid var(--p-border);
  background: var(--panel-bg);
  padding: 20px;
  position: relative;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 transparent;
}
#editor .panel {
  --p-border: var(--accent-yellow);
}
.panel[style*="--char-color"] {
  --p-border: var(--char-color);
  box-shadow: 0 0 20px var(--char-color);
}

/* notch corner */
.panel::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 14px; height: 14px;
  background: #000;
  border-bottom: 3px solid var(--p-border);
  border-left: 3px solid var(--p-border);
}
.panel-title {
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--char-color, var(--accent-yellow));
  margin-bottom: 18px;
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: 10px;
  text-transform: uppercase;
}

/* ============================================================
   INPUTS
   ============================================================ */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--accent-cyan);
  margin-bottom: 6px;
  text-transform: uppercase;
}
/* Stat editor labels must be white */
.stats-panel .field label { color: #ffffff !important; }

.field input[type=text],
.field input[type=number],
.field select,
.field textarea {
  font-family: var(--font-main);
  font-size: 11px;
  background: var(--input-bg);
  color: var(--fg);
  border: 2px solid var(--fg);
  padding: 9px 12px;
  width: 100%;
  outline: none;
}
.field textarea { line-height: 1.8; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--accent-yellow);
  box-shadow: 0 0 0 1px var(--accent-yellow);
}
.field select { cursor: none; }
.field select option { background: #111; color: #fff; }

/* RANGE — shared between .field and .form-stat-block */
.field input[type=range],
.form-stat-block input[type=range] {
  -webkit-appearance: none;
  width: 100%; height: 8px;
  background: #2a2a2a;
  border: 1px solid #888;
  outline: none; padding: 0;
}
.field input[type=range]::-webkit-slider-thumb,
.form-stat-block input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: #fff;
  cursor: none;
  border: 2px solid #000;
}
.field input[type=range]::-moz-range-thumb,
.form-stat-block input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 0;
}
.field input[type=range]:focus,
.form-stat-block input[type=range]:focus { border-color: var(--accent-yellow); }

/* COLOR WHEEL */
@keyframes wheel-glow {
  0%,100% { box-shadow: 0 0 0 3px var(--wheel-color,#fff), 0 0 16px var(--wheel-color,#fff)44; }
  50%      { box-shadow: 0 0 0 3px var(--wheel-color,#fff), 0 0 36px var(--wheel-color,#fff)77; }
}
@keyframes wheel-tap {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}
.color-wheel-wrap {
  display: flex; flex-direction: row; align-items: center; gap: 18px;
  margin-top: 4px;
}
.color-wheel-ring {
  position: relative;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: conic-gradient(
    hsl(0,100%,50%), hsl(30,100%,50%), hsl(60,100%,50%),
    hsl(90,100%,50%), hsl(120,100%,50%), hsl(150,100%,50%),
    hsl(180,100%,50%), hsl(210,100%,50%), hsl(240,100%,50%),
    hsl(270,100%,50%), hsl(300,100%,50%), hsl(330,100%,50%),
    hsl(360,100%,50%)
  );
  padding: 11px;
  cursor: none;
  animation: wheel-glow 3s ease-in-out infinite;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.color-wheel-ring:hover { transform: scale(1.07); }
.color-wheel-ring:active { animation: wheel-tap 0.18s ease forwards; }
.color-wheel-ring input[type=color] {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: none; padding: 0;
  cursor: none;
  background: transparent;
  opacity: 0;
  position: absolute; inset: 0;
}
.color-wheel-preview {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 4px solid #111;
  pointer-events: none;
  transition: background 0.28s ease;
}
.color-wheel-info {
  display: flex; flex-direction: column; gap: 8px;
}
.color-wheel-hex {
  font-size: 9px; letter-spacing: 2px; color: #aaa;
  font-family: var(--font-main);
}
.color-wheel-swatch-row {
  display: flex; gap: 5px; flex-wrap: wrap; max-width: 120px;
}
.color-wheel-swatch {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: none;
  transition: transform 0.14s cubic-bezier(0.34,1.56,0.64,1), border-color 0.12s;
}
.color-wheel-swatch:hover { transform: scale(1.35); border-color: #fff; }
.color-wheel-swatch.active { border-color: var(--accent-yellow); transform: scale(1.22); }


/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

.stat-num-input {
  width: 56px !important;
  font-size: 10px !important;
  padding: 5px 4px !important;
  text-align: center;
  flex-shrink: 0;
  background: var(--input-bg);
  color: var(--fg);
  border: 1px solid #2a2a2a;
  font-family: var(--font-main);
  outline: none;
  transition: border-color 0.15s;
}
.stat-num-input:focus { border-color: #555; }

/* STAT BARS — SEGMENTED PIXEL STYLE */
.stat-row {
  display: grid;
  grid-template-columns: 86px 1fr 80px;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
}
.stat-val {
  font-size: 8px;
  text-align: right;
  white-space: nowrap;
}

.stat-label {
  font-size: 7px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.stat-segs {
  display: flex;
  gap: 2px;
  align-items: stretch;
  height: 13px;
}
.stat-seg {
  flex: 1;
  background: #0d0d0d;
  border: 1px solid #1c1c1c;
  transition: all 0.2s ease;
  filter: brightness(calc(0.7 + var(--i) * 0.04));
}

.stat-seg.ghost-bg.on {
  opacity: 0.35;
}

.stat-seg.peak::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 2;
  pointer-events: none;
}


.stat-row:hover .stat-seg.on,
.stat-row:hover .stat-seg.peak {
  animation: seg-wave 0.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 0.03s);
}

@keyframes seg-wave {
  from { transform: scaleY(1); filter: brightness(calc(0.7 + var(--i) * 0.04)); }
  to { transform: scaleY(1.3); filter: brightness(calc(1.1 + var(--i) * 0.04)); }
}
/* === TIER 0 (base) === */
.stat-seg.on.hp   { background: #00cc66; border-color: #00aa55; }
.stat-seg.on.atk  { background: #cc2222; border-color: #aa1111; }
.stat-seg.on.def  { background: #1155cc; border-color: #0044aa; }
.stat-seg.on.mag  { background: #aa11aa; border-color: #880088; }
.stat-seg.on.spd  { background: #bbbb00; border-color: #999900; }
/* Peak tip — Tier 0 */
.stat-seg.peak.hp   { background: #00ff88; border-color: #00ffaa; box-shadow: 0 0 6px #00ff8899; }
.stat-seg.peak.atk  { background: #ff4444; border-color: #ff7777; box-shadow: 0 0 6px #ff333399; }
.stat-seg.peak.def  { background: #3377ff; border-color: #66aaff; box-shadow: 0 0 6px #3377ff99; }
.stat-seg.peak.mag  { background: #ff44ff; border-color: #ff88ff; box-shadow: 0 0 6px #ff44ff99; }
.stat-seg.peak.spd  { background: #ffff33; border-color: #ffff88; box-shadow: 0 0 6px #ffff3399; }

/* === TIER 1 — hue-shifted: green→lime, red→orange, blue→sky, purple→violet, yellow→amber === */
.stat-seg.on.hp.tier-1   { background: #66ee00; border-color: #55cc00; }
.stat-seg.on.atk.tier-1  { background: #ff6600; border-color: #dd5500; }
.stat-seg.on.def.tier-1  { background: #00aaee; border-color: #0088cc; }
.stat-seg.on.mag.tier-1  { background: #7722ff; border-color: #5500ee; }
.stat-seg.on.spd.tier-1  { background: #ffaa00; border-color: #dd8800; }
.stat-seg.peak.hp.tier-1  { background: #99ff22; border-color: #bbff55; box-shadow: 0 0 8px #88ff0099; }
.stat-seg.peak.atk.tier-1 { background: #ff9933; border-color: #ffbb66; box-shadow: 0 0 8px #ff660099; }
.stat-seg.peak.def.tier-1 { background: #22ddff; border-color: #66eeff; box-shadow: 0 0 8px #00ccff99; }
.stat-seg.peak.mag.tier-1 { background: #aa55ff; border-color: #cc88ff; box-shadow: 0 0 8px #8833ff99; }
.stat-seg.peak.spd.tier-1 { background: #ffcc33; border-color: #ffee77; box-shadow: 0 0 8px #ffaa0099; }
/* Ghost: unfilled segments show a faint tint of previous tier's hue */
.stat-seg.ghost.hp    { background: #002211; border-color: #003318; }
.stat-seg.ghost.atk   { background: #220500; border-color: #330700; }
.stat-seg.ghost.def   { background: #000d22; border-color: #001133; }
.stat-seg.ghost.mag   { background: #180018; border-color: #220022; }
.stat-seg.ghost.spd   { background: #1a1a00; border-color: #222200; }

.stat-seg.ghost.tier-2.hp    { background: #112200; border-color: #1a3300; }
.stat-seg.ghost.tier-2.atk   { background: #221100; border-color: #331a00; }
.stat-seg.ghost.tier-2.def   { background: #001a22; border-color: #002a33; }
.stat-seg.ghost.tier-2.mag   { background: #110022; border-color: #1a0033; }
.stat-seg.ghost.tier-2.spd   { background: #221a00; border-color: #332200; }

/* === TIER 2 — further hue-shifted: lime→teal, orange→pink-red, sky→cyan, violet→magenta, amber→gold === */
.stat-seg.on.hp.tier-2   { background: #00ddcc; border-color: #00bbaa; }
.stat-seg.on.atk.tier-2  { background: #ff1177; border-color: #cc0055; }
.stat-seg.on.def.tier-2  { background: #00eeff; border-color: #00ccdd; }
.stat-seg.on.mag.tier-2  { background: #ff33bb; border-color: #dd1199; }
.stat-seg.on.spd.tier-2  { background: #eecc00; border-color: #ccaa00; }
.stat-seg.peak.hp.tier-2  { background: #44ffee; border-color: #88ffee; box-shadow: 0 0 12px #00ddcc; }
.stat-seg.peak.atk.tier-2 { background: #ff55aa; border-color: #ff88cc; box-shadow: 0 0 12px #ff1177; }
.stat-seg.peak.def.tier-2 { background: #44ffff; border-color: #88ffff; box-shadow: 0 0 12px #00eeff; }
.stat-seg.peak.mag.tier-2 { background: #ff77dd; border-color: #ffaaee; box-shadow: 0 0 12px #ff33bb; }
.stat-seg.peak.spd.tier-2 { background: #ffee44; border-color: #ffee88; box-shadow: 0 0 12px #eecc00; }
/* Ghost: unfilled shows faint tint of tier-1's hue */
.stat-seg.ghost.hp.tier-2    { background: #001a15; border-color: #002a22; }
.stat-seg.ghost.atk.tier-2   { background: #220010; border-color: #330018; }
.stat-seg.ghost.def.tier-2   { background: #001a22; border-color: #002a33; }
.stat-seg.ghost.mag.tier-2   { background: #22001a; border-color: #330022; }
.stat-seg.ghost.spd.tier-2   { background: #1a1500; border-color: #2a2200; }

/* === TIER 3 — ATK is Bordeaux, others continue the shift === */
.stat-seg.on.hp.tier-3   { background: #00ccff; border-color: #00aaaa; }
.stat-seg.on.atk.tier-3  { background: #800020; border-color: #600018; } /* BORDEAUX */
.stat-seg.on.def.tier-3  { background: #4444ff; border-color: #3333cc; }
.stat-seg.on.mag.tier-3  { background: #cc00cc; border-color: #aa00aa; }
.stat-seg.on.spd.tier-3  { background: #ffaa00; border-color: #cc8800; }
.stat-seg.peak.hp.tier-3  { background: #66eeff; border-color: #aaffff; box-shadow: 0 0 12px #00ccff; }
.stat-seg.peak.atk.tier-3 { background: #b00030; border-color: #d00040; box-shadow: 0 0 12px #800020; }
.stat-seg.peak.def.tier-3 { background: #6666ff; border-color: #aaaaff; box-shadow: 0 0 12px #4444ff; }
.stat-seg.peak.mag.tier-3 { background: #ff44ff; border-color: #ff88ff; box-shadow: 0 0 12px #cc00cc; }
.stat-seg.peak.spd.tier-3 { background: #ffcc33; border-color: #ffee77; box-shadow: 0 0 12px #ffaa00; }

/* === TIER 4 — REFINED (Deeper, richer base colors with warmth) === */
.stat-seg.on.hp.tier-4   { background: #007744; border-color: #00bb66; }
.stat-seg.on.atk.tier-4  { background: #991122; border-color: #cc2233; }
.stat-seg.on.def.tier-4  { background: #113388; border-color: #2255bb; }
.stat-seg.on.mag.tier-4  { background: #881199; border-color: #aa22cc; }
.stat-seg.on.spd.tier-4  { background: #886600; border-color: #bb9900; }
.stat-seg.peak.hp.tier-4  { background: #00aa55; border-color: #55ddaa; box-shadow: 0 0 8px rgba(0,187,102,0.6); }
.stat-seg.peak.atk.tier-4 { background: #cc2233; border-color: #ff7788; box-shadow: 0 0 8px rgba(204,34,51,0.6); }
.stat-seg.peak.def.tier-4 { background: #2255bb; border-color: #88aaee; box-shadow: 0 0 8px rgba(34,85,187,0.6); }
.stat-seg.peak.mag.tier-4 { background: #aa22cc; border-color: #dd88ff; box-shadow: 0 0 8px rgba(170,34,204,0.6); }
.stat-seg.peak.spd.tier-4 { background: #bb9900; border-color: #eecc44; box-shadow: 0 0 8px rgba(187,153,0,0.6); }
.stat-seg.ghost.hp.tier-4    { background: #001a0e; border-color: #002a18; }
.stat-seg.ghost.atk.tier-4   { background: #1a0205; border-color: #2a0308; }
.stat-seg.ghost.def.tier-4   { background: #010a22; border-color: #021133; }
.stat-seg.ghost.mag.tier-4   { background: #150022; border-color: #220033; }
.stat-seg.ghost.spd.tier-4   { background: #1a1400; border-color: #2a2000; }

/* === TIER 5 — VIVID (Luminous gem-adjacent hues) === */
.stat-seg.on.hp.tier-5   { background: #00bb55; border-color: #00ee77; }
.stat-seg.on.atk.tier-5  { background: #cc1133; border-color: #ff3355; }
.stat-seg.on.def.tier-5  { background: #1155cc; border-color: #3388ff; }
.stat-seg.on.mag.tier-5  { background: #9911cc; border-color: #cc44ee; }
.stat-seg.on.spd.tier-5  { background: #ccaa00; border-color: #ffcc22; }
.stat-seg.peak.hp.tier-5  { background: #33ee88; border-color: #aaffcc; box-shadow: 0 0 10px rgba(0,238,119,0.5); }
.stat-seg.peak.atk.tier-5 { background: #ff3355; border-color: #ffaaaa; box-shadow: 0 0 10px rgba(255,51,85,0.5); }
.stat-seg.peak.def.tier-5 { background: #3388ff; border-color: #aaccff; box-shadow: 0 0 10px rgba(51,136,255,0.5); }
.stat-seg.peak.mag.tier-5 { background: #cc44ee; border-color: #ee99ff; box-shadow: 0 0 10px rgba(204,68,238,0.5); }
.stat-seg.peak.spd.tier-5 { background: #ffcc22; border-color: #ffee88; box-shadow: 0 0 10px rgba(255,204,34,0.5); }
.stat-seg.ghost.hp.tier-5    { background: #002211; border-color: #003319; }
.stat-seg.ghost.atk.tier-5   { background: #220005; border-color: #330008; }
.stat-seg.ghost.def.tier-5   { background: #001133; border-color: #001a44; }
.stat-seg.ghost.mag.tier-5   { background: #1a0033; border-color: #280044; }
.stat-seg.ghost.spd.tier-5   { background: #221a00; border-color: #332800; }

/* === TIER 6 — LUSTROUS (Polished, softly radiant metallic feel) === */
.stat-seg.on.hp.tier-6   { background: #00cc66; border-color: #44ffaa; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.stat-seg.on.atk.tier-6  { background: #ee1144; border-color: #ff5577; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.stat-seg.on.def.tier-6  { background: #2266ee; border-color: #66aaff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.stat-seg.on.mag.tier-6  { background: #aa22ee; border-color: #cc77ff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.stat-seg.on.spd.tier-6  { background: #ddbb00; border-color: #ffdd44; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.stat-seg.peak.hp.tier-6  { background: #55ffaa; border-color: #ccffee; box-shadow: 0 0 12px #00cc66, 0 0 20px rgba(0,204,102,0.4); }
.stat-seg.peak.atk.tier-6 { background: #ff4466; border-color: #ffcccc; box-shadow: 0 0 12px #ee1144, 0 0 20px rgba(238,17,68,0.4); }
.stat-seg.peak.def.tier-6 { background: #55aaff; border-color: #ccddff; box-shadow: 0 0 12px #2266ee, 0 0 20px rgba(34,102,238,0.4); }
.stat-seg.peak.mag.tier-6 { background: #cc66ff; border-color: #eeccff; box-shadow: 0 0 12px #aa22ee, 0 0 20px rgba(170,34,238,0.4); }
.stat-seg.peak.spd.tier-6 { background: #ffee44; border-color: #ffffcc; box-shadow: 0 0 12px #ddbb00, 0 0 20px rgba(221,187,0,0.4); }
.stat-seg.ghost.hp.tier-6    { background: #002a15; border-color: #003d20; }
.stat-seg.ghost.atk.tier-6   { background: #2a0008; border-color: #3d000c; }
.stat-seg.ghost.def.tier-6   { background: #001533; border-color: #002050; }
.stat-seg.ghost.mag.tier-6   { background: #1f0033; border-color: #2e004d; }
.stat-seg.ghost.spd.tier-6   { background: #2a2200; border-color: #3d3200; }

/* === TIER 7 — DIGITAL / MATRIX (neon cyber overload) === */
.stat-seg.on.hp.tier-7   { background: #003300; border-color: #00ff41; }
.stat-seg.on.atk.tier-7  { background: #330000; border-color: #ff2244; }
.stat-seg.on.def.tier-7  { background: #000033; border-color: #00aaff; }
.stat-seg.on.mag.tier-7  { background: #1a0033; border-color: #cc44ff; }
.stat-seg.on.spd.tier-7  { background: #332200; border-color: #ffcc00; }
.stat-seg.peak.hp.tier-7  { background: #003300; border-color: #88ffaa; box-shadow: 0 0 12px #00ff41, 0 0 24px rgba(0,255,65,0.5); }
.stat-seg.peak.atk.tier-7 { background: #330000; border-color: #ff8899; box-shadow: 0 0 12px #ff2244, 0 0 24px rgba(255,34,68,0.5); }
.stat-seg.peak.def.tier-7 { background: #000033; border-color: #66ddff; box-shadow: 0 0 12px #00aaff, 0 0 24px rgba(0,170,255,0.5); }
.stat-seg.peak.mag.tier-7 { background: #1a0033; border-color: #ee99ff; box-shadow: 0 0 12px #cc44ff, 0 0 24px rgba(204,68,255,0.5); }
.stat-seg.peak.spd.tier-7 { background: #332200; border-color: #ffee77; box-shadow: 0 0 12px #ffcc00, 0 0 24px rgba(255,204,0,0.5); }

/* === TIER 5 — PLASMA === */
.stat-seg.on.hp.tier-8   { background: #ff00aa; border-color: #cc0088; }
.stat-seg.on.atk.tier-8  { background: #ff6600; border-color: #dd4400; }
.stat-seg.on.def.tier-8  { background: #00ffcc; border-color: #00ddaa; }
.stat-seg.on.mag.tier-8  { background: #ff00ff; border-color: #cc00cc; }
.stat-seg.on.spd.tier-8  { background: #ffdd00; border-color: #ddbb00; }
.stat-seg.peak.hp.tier-8  { background: #ff55cc; border-color: #ff88dd; box-shadow: 0 0 14px #ff00aa, 0 0 28px rgba(255,0,170,0.4); }
.stat-seg.peak.atk.tier-8 { background: #ff8833; border-color: #ffaa66; box-shadow: 0 0 14px #ff6600, 0 0 28px rgba(255,102,0,0.4); }
.stat-seg.peak.def.tier-8 { background: #55ffee; border-color: #aaffee; box-shadow: 0 0 14px #00ffcc, 0 0 28px rgba(0,255,204,0.4); }
.stat-seg.peak.mag.tier-8 { background: #ff55ff; border-color: #ffaaff; box-shadow: 0 0 14px #ff00ff, 0 0 28px rgba(255,0,255,0.4); }
.stat-seg.peak.spd.tier-8 { background: #ffee44; border-color: #ffee99; box-shadow: 0 0 14px #ffdd00, 0 0 28px rgba(255,221,0,0.4); }
.stat-seg.ghost.hp.tier-8    { background: #220012; border-color: #330018; }
.stat-seg.ghost.atk.tier-8   { background: #221000; border-color: #331800; }
.stat-seg.ghost.def.tier-8   { background: #002211; border-color: #003319; }
.stat-seg.ghost.mag.tier-8   { background: #220022; border-color: #330033; }
.stat-seg.ghost.spd.tier-8   { background: #221a00; border-color: #332a00; }

/* === TIER 6 — VOID (Dark energy, inset glow) === */
.stat-seg.on.hp.tier-9   { background: #003344; border-color: #00ccff; box-shadow: inset 0 0 8px #00ccff; }
.stat-seg.on.atk.tier-9  { background: #440000; border-color: #ff0000; box-shadow: inset 0 0 8px #ff0000; }
.stat-seg.on.def.tier-9  { background: #001133; border-color: #0088ff; box-shadow: inset 0 0 8px #0088ff; }
.stat-seg.on.mag.tier-9  { background: #330044; border-color: #cc00ff; box-shadow: inset 0 0 8px #cc00ff; }
.stat-seg.on.spd.tier-9  { background: #333300; border-color: #ffff00; box-shadow: inset 0 0 8px #ffff00; }
.stat-seg.peak.hp.tier-9  { background: #003344; border-color: #aaffff; box-shadow: 0 0 20px #00ccff, 0 0 40px rgba(0,204,255,0.5); }
.stat-seg.peak.atk.tier-9 { background: #440000; border-color: #ff8888; box-shadow: 0 0 20px #ff0000, 0 0 40px rgba(255,0,0,0.5); }
.stat-seg.peak.def.tier-9 { background: #001133; border-color: #aaccff; box-shadow: 0 0 20px #0088ff, 0 0 40px rgba(0,136,255,0.5); }
.stat-seg.peak.mag.tier-9 { background: #330044; border-color: #ee88ff; box-shadow: 0 0 20px #cc00ff, 0 0 40px rgba(204,0,255,0.5); }
.stat-seg.peak.spd.tier-9 { background: #333300; border-color: #ffffaa; box-shadow: 0 0 20px #ffff00, 0 0 40px rgba(255,255,0,0.5); }
.stat-seg.ghost.hp.tier-9    { background: #001122; border-color: #002233; }
.stat-seg.ghost.atk.tier-9   { background: #220000; border-color: #330000; }
.stat-seg.ghost.def.tier-9   { background: #000a22; border-color: #001133; }
.stat-seg.ghost.mag.tier-9   { background: #1a0022; border-color: #280033; }
.stat-seg.ghost.spd.tier-9   { background: #1a1a00; border-color: #282800; }

/* === TIER 7 — CELESTIAL (Prismatic gradient aurora) === */
.stat-seg.on.hp.tier-10   { background: linear-gradient(135deg, #00ff88, #00ccff); border-color: #00ffcc; }
.stat-seg.on.atk.tier-10  { background: linear-gradient(135deg, #ff0000, #ff8800); border-color: #ff4400; }
.stat-seg.on.def.tier-10  { background: linear-gradient(135deg, #0088ff, #cc00ff); border-color: #6644ff; }
.stat-seg.on.mag.tier-10  { background: linear-gradient(135deg, #ff00ff, #ff8800); border-color: #ff44aa; }
.stat-seg.on.spd.tier-10  { background: linear-gradient(135deg, #ffff00, #00ff88); border-color: #aaff44; }
.stat-seg.peak.hp.tier-10  { background: linear-gradient(135deg,#88ffcc,#aaffff); border-color:#fff; box-shadow:0 0 16px #00ffcc,0 0 30px #00ff88; }
.stat-seg.peak.atk.tier-10 { background: linear-gradient(135deg,#ff6666,#ffaa44); border-color:#fff; box-shadow:0 0 16px #ff4400,0 0 30px #ff0000; }
.stat-seg.peak.def.tier-10 { background: linear-gradient(135deg,#aaccff,#ddaaff); border-color:#fff; box-shadow:0 0 16px #6644ff,0 0 30px #cc00ff; }
.stat-seg.peak.mag.tier-10 { background: linear-gradient(135deg,#ff88ff,#ffccaa); border-color:#fff; box-shadow:0 0 16px #ff44aa,0 0 30px #ff00ff; }
.stat-seg.peak.spd.tier-10 { background: linear-gradient(135deg,#ffff88,#aaffaa); border-color:#fff; box-shadow:0 0 16px #aaff44,0 0 30px #ffff00; }
.stat-seg.ghost.hp.tier-10    { background: #001a11; border-color: #002a1a; }
.stat-seg.ghost.atk.tier-10   { background: #1a0500; border-color: #2a0800; }
.stat-seg.ghost.def.tier-10   { background: #00051a; border-color: #000a2a; }
.stat-seg.ghost.mag.tier-10   { background: #1a001a; border-color: #2a002a; }
.stat-seg.ghost.spd.tier-10   { background: #1a1a00; border-color: #2a2a00; }

/* === TIER 8 — TRANSCENDENT (God-tier, animated breathing glow) === */
.stat-seg.on.hp.tier-11   { background: #ffffff; border-color: #aaffdd; box-shadow: 0 0 8px #00ff88; }
.stat-seg.on.atk.tier-11  { background: #ffffff; border-color: #ffccaa; box-shadow: 0 0 8px #ff4400; }
.stat-seg.on.def.tier-11  { background: #ffffff; border-color: #aaccff; box-shadow: 0 0 8px #0088ff; }
.stat-seg.on.mag.tier-11  { background: #ffffff; border-color: #ffaaff; box-shadow: 0 0 8px #ff00ff; }
.stat-seg.on.spd.tier-11  { background: #ffffff; border-color: #ffffaa; box-shadow: 0 0 8px #ffff00; }
.stat-seg.peak.hp.tier-11  { background:#fff; border-color:#fff; animation: seg-pulse-hp  1.6s ease-in-out infinite alternate; }
.stat-seg.peak.atk.tier-11 { background:#fff; border-color:#fff; animation: seg-pulse-atk 1.6s ease-in-out infinite alternate; }
.stat-seg.peak.def.tier-11 { background:#fff; border-color:#fff; animation: seg-pulse-def 1.6s ease-in-out infinite alternate; }
.stat-seg.peak.mag.tier-11 { background:#fff; border-color:#fff; animation: seg-pulse-mag 1.6s ease-in-out infinite alternate; }
.stat-seg.peak.spd.tier-11 { background:#fff; border-color:#fff; animation: seg-pulse-spd 1.6s ease-in-out infinite alternate; }
@keyframes seg-pulse-hp  { from{box-shadow:0 0 20px #fff,0 0 40px #00ff88;} to{box-shadow:0 0 35px #fff,0 0 70px #00ff88,0 0 100px rgba(0,255,136,0.6);} }
@keyframes seg-pulse-atk { from{box-shadow:0 0 20px #fff,0 0 40px #ff4400;} to{box-shadow:0 0 35px #fff,0 0 70px #ff4400,0 0 100px rgba(255,68,0,0.6);} }
@keyframes seg-pulse-def { from{box-shadow:0 0 20px #fff,0 0 40px #0088ff;} to{box-shadow:0 0 35px #fff,0 0 70px #0088ff,0 0 100px rgba(0,136,255,0.6);} }
@keyframes seg-pulse-mag { from{box-shadow:0 0 20px #fff,0 0 40px #ff00ff;} to{box-shadow:0 0 35px #fff,0 0 70px #ff00ff,0 0 100px rgba(255,0,255,0.6);} }
@keyframes seg-pulse-spd { from{box-shadow:0 0 20px #fff,0 0 40px #ffff00;} to{box-shadow:0 0 35px #fff,0 0 70px #ffff00,0 0 100px rgba(255,255,0,0.6);} }

/* === TIER 9 — INFERNAL (Lava / Magma / Embers) === */
.stat-seg.on.hp.tier-12   { background: #ff2200; border-color: #ff5500; box-shadow: inset 0 0 10px #aa1100; }
.stat-seg.on.atk.tier-12  { background: #dd0000; border-color: #ff1100; box-shadow: inset 0 0 10px #880000; }
.stat-seg.on.def.tier-12  { background: #ffaa00; border-color: #ffcc00; box-shadow: inset 0 0 10px #aa6600; }
.stat-seg.on.mag.tier-12  { background: #cc0055; border-color: #ff0088; box-shadow: inset 0 0 10px #880033; }
.stat-seg.on.spd.tier-12  { background: #ffdd00; border-color: #ffff00; box-shadow: inset 0 0 10px #aaaa00; }
.stat-seg.peak.hp.tier-12  { background: #ffaa88; border-color: #ffffff; box-shadow: 0 0 15px #ff2200, 0 0 30px #ff5500; }
.stat-seg.peak.atk.tier-12 { background: #ff8888; border-color: #ffffff; box-shadow: 0 0 15px #dd0000, 0 0 30px #ff1100; }
.stat-seg.peak.def.tier-12 { background: #ffeeaa; border-color: #ffffff; box-shadow: 0 0 15px #ffaa00, 0 0 30px #ffcc00; }
.stat-seg.peak.mag.tier-12 { background: #ff88aa; border-color: #ffffff; box-shadow: 0 0 15px #cc0055, 0 0 30px #ff0088; }
.stat-seg.peak.spd.tier-12 { background: #ffffaa; border-color: #ffffff; box-shadow: 0 0 15px #ffdd00, 0 0 30px #ffff00; }
.stat-seg.ghost.hp.tier-12    { background: #330500; border-color: #440a00; }
.stat-seg.ghost.atk.tier-12   { background: #330000; border-color: #440000; }
.stat-seg.ghost.def.tier-12   { background: #332200; border-color: #442d00; }
.stat-seg.ghost.mag.tier-12   { background: #220011; border-color: #33001a; }
.stat-seg.ghost.spd.tier-12   { background: #332a00; border-color: #443a00; }

/* === TIER 10 — COSMIC (Deep Space Nebula) === */
.stat-seg.on.hp.tier-13   { background: #110044; border-color: #4400aa; box-shadow: 0 0 10px #4400aa; }
.stat-seg.on.atk.tier-13  { background: #220033; border-color: #770088; box-shadow: 0 0 10px #770088; }
.stat-seg.on.def.tier-13  { background: #001144; border-color: #0044bb; box-shadow: 0 0 10px #0044bb; }
.stat-seg.on.mag.tier-13  { background: #1a0033; border-color: #660099; box-shadow: 0 0 10px #660099; }
.stat-seg.on.spd.tier-13  { background: #222244; border-color: #6666cc; box-shadow: 0 0 10px #6666cc; }
.stat-seg.peak.hp.tier-13  { background: #88aaff; border-color: #ffffff; box-shadow: 0 0 20px #4400aa, 0 0 40px #aa88ff; }
.stat-seg.peak.atk.tier-13 { background: #ff88ff; border-color: #ffffff; box-shadow: 0 0 20px #770088, 0 0 40px #ff88ff; }
.stat-seg.peak.def.tier-13 { background: #88ccff; border-color: #ffffff; box-shadow: 0 0 20px #0044bb, 0 0 40px #88ccff; }
.stat-seg.peak.mag.tier-13 { background: #dd88ff; border-color: #ffffff; box-shadow: 0 0 20px #660099, 0 0 40px #dd88ff; }
.stat-seg.peak.spd.tier-13 { background: #ccccff; border-color: #ffffff; box-shadow: 0 0 20px #6666cc, 0 0 40px #ccccff; }
.stat-seg.ghost.hp.tier-13    { background: #05001a; border-color: #0a0033; }
.stat-seg.ghost.atk.tier-13   { background: #11001a; border-color: #1a002a; }
.stat-seg.ghost.def.tier-13   { background: #00051a; border-color: #000a33; }
.stat-seg.ghost.mag.tier-13   { background: #0a001a; border-color: #11002a; }
.stat-seg.ghost.spd.tier-13   { background: #0a0a1a; border-color: #11112a; }

/* === TIER 11 — CRYSTALLINE (Faceted Jewel Tones) === */
.stat-seg.on.hp.tier-14   { background: linear-gradient(180deg, #00ffa0, #006640); border-color: #00ffa0; border-top-color: #ffffff; }
.stat-seg.on.atk.tier-14  { background: linear-gradient(180deg, #ff2255, #660011); border-color: #ff2255; border-top-color: #ffffff; }
.stat-seg.on.def.tier-14  { background: linear-gradient(180deg, #22aaff, #003366); border-color: #22aaff; border-top-color: #ffffff; }
.stat-seg.on.mag.tier-14  { background: linear-gradient(180deg, #ff00cc, #550044); border-color: #ff00cc; border-top-color: #ffffff; }
.stat-seg.on.spd.tier-14  { background: linear-gradient(180deg, #ffea00, #665500); border-color: #ffea00; border-top-color: #ffffff; }
.stat-seg.peak.hp.tier-14  { background: #ffffff; border-color: #00ffa0; box-shadow: 0 0 20px #00ffa0; }
.stat-seg.peak.atk.tier-14 { background: #ffffff; border-color: #ff2255; box-shadow: 0 0 20px #ff2255; }
.stat-seg.peak.def.tier-14 { background: #ffffff; border-color: #22aaff; box-shadow: 0 0 20px #22aaff; }
.stat-seg.peak.mag.tier-14 { background: #ffffff; border-color: #ff00cc; box-shadow: 0 0 20px #ff00cc; }
.stat-seg.peak.spd.tier-14 { background: #ffffff; border-color: #ffea00; box-shadow: 0 0 20px #ffea00; }
.stat-seg.ghost.hp.tier-14    { background: #002210; border-color: #004420; }
.stat-seg.ghost.atk.tier-14   { background: #220005; border-color: #440010; }
.stat-seg.ghost.def.tier-14   { background: #001122; border-color: #002244; }
.stat-seg.ghost.mag.tier-14   { background: #22001a; border-color: #440033; }
.stat-seg.ghost.spd.tier-14   { background: #221a00; border-color: #443300; }

/* === TIER 12 — NULL (Reality-breaking pure void with sharp outlines) === */
.stat-seg.on.hp.tier-15   { background: #000000; border: 1px solid #ffffff; box-shadow: 0 0 30px #ffffff; color: #ffffff; }
.stat-seg.on.atk.tier-15  { background: #000000; border: 1px solid #ffffff; box-shadow: 0 0 30px #ffffff; color: #ffffff; }
.stat-seg.on.def.tier-15  { background: #000000; border: 1px solid #ffffff; box-shadow: 0 0 30px #ffffff; color: #ffffff; }
.stat-seg.on.mag.tier-15  { background: #000000; border: 1px solid #ffffff; box-shadow: 0 0 30px #ffffff; color: #ffffff; }
.stat-seg.on.spd.tier-15  { background: #000000; border: 1px solid #ffffff; box-shadow: 0 0 30px #ffffff; color: #ffffff; }
.stat-seg.peak.hp.tier-15  { background: #ffffff; border-color: #000000; box-shadow: 0 0 50px #ffffff, inset 0 0 10px #000000; }
.stat-seg.peak.atk.tier-15 { background: #ffffff; border-color: #000000; box-shadow: 0 0 50px #ffffff, inset 0 0 10px #000000; }
.stat-seg.peak.def.tier-15 { background: #ffffff; border-color: #000000; box-shadow: 0 0 50px #ffffff, inset 0 0 10px #000000; }
.stat-seg.peak.mag.tier-15 { background: #ffffff; border-color: #000000; box-shadow: 0 0 50px #ffffff, inset 0 0 10px #000000; }
.stat-seg.peak.spd.tier-15 { background: #ffffff; border-color: #000000; box-shadow: 0 0 50px #ffffff, inset 0 0 10px #000000; }
.stat-seg.ghost.hp.tier-15    { background: transparent; border: 1px dashed #444444; }
.stat-seg.ghost.atk.tier-15   { background: transparent; border: 1px dashed #444444; }
.stat-seg.ghost.def.tier-15   { background: transparent; border: 1px dashed #444444; }
.stat-seg.ghost.mag.tier-15   { background: transparent; border: 1px dashed #444444; }
.stat-seg.ghost.spd.tier-15   { background: transparent; border: 1px dashed #444444; }

.stat-val {
  font-size: 9px;
  text-align: right;
  color: #cccccc;
  letter-spacing: 0;
  line-height: 1;
}
.eff-stat-diff {
  font-size: 8px;
  margin-left: 4px;
  cursor: help;
  font-weight: bold;
}
.eff-stat-diff.pos { color: var(--accent-green); }
.eff-stat-diff.neg { color: var(--accent-red); }

.tt-breakdown {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #444;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tt-line {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 1px;
}
.tt-stat { color: #888; }
.tt-val { color: #fff; }
.tt-pos { color: var(--accent-green); }
.tt-neg { color: var(--accent-red); }
.tt-header-main {
  font-size: 9px;
  color: var(--accent-yellow);
  margin-bottom: 8px;
  border-bottom: 1px solid #333;
  padding-bottom: 4px;
  text-transform: uppercase;
}

#cv-stats {
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */
#empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 400px; gap: 28px; text-align: center;
}

/* Pixel heart drawn as SVG — no emoji */
.empty-heart {
  animation: float 2.5s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-12px); } }

.empty-title {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--accent-yellow);
  line-height: 1.6;
}
.empty-sub {
  font-size: 9px;
  letter-spacing: 2px;
  color: #555;
  animation: blink 1.2s step-end infinite;
}

/* ============================================================
   CHARACTER VIEW
   ============================================================ */
#char-view { display: none; }
#char-view.active {
  display: block;
  animation: cv-fade-in 0.4s ease-out forwards;
}
#char-view.active .char-header {
  animation: cv-slide-down 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
#char-view.active .tab-bar {
  animation: cv-slide-down 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}
#char-view.active .panel {
  animation: cv-slide-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}

@keyframes cv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cv-slide-down {
  from { opacity: 0; transform: translateY(-15px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cv-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.char-header {
  display: flex; gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.char-avatar-large {
  width: 112px; height: 112px;
  border: 4px solid var(--fg);
  background: #0d0d0d;
  flex-shrink: 0;
  image-rendering: pixelated;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.char-avatar-large img {
  width: 100%; height: 100%;
  object-fit: cover; image-rendering: pixelated;
}
.char-avatar-large svg { width: 56px; height: 56px; }

.char-name-block { flex: 1; }
.char-name-display {
  font-size: 18px;
  letter-spacing: 3px;
  line-height: 1.4;
  margin-bottom: 4px;
  word-break: break-word;
}
/* Power level badge under character name */
.cv-pl-label {
  font-size: 7.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0.9;
  font-family: inherit;
  display: inline-block;
}
.cv-pl-omni {
  animation: omni-pl-glow 2.2s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 18px rgba(180,210,255,0.7);
  letter-spacing: 3px;
}
@keyframes omni-pl-glow {
  0%, 100% { opacity: 0.85; text-shadow: 0 0 8px rgba(255,255,255,0.9), 0 0 20px rgba(180,210,255,0.6); }
  50%       { opacity: 1;    text-shadow: 0 0 14px #fff, 0 0 30px rgba(140,200,255,0.9), 0 0 50px rgba(100,180,255,0.5); }
}
.char-color-badge {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid #fff;
  margin-right: 8px;
  vertical-align: middle;
}

/* TABS */
.tab-bar {
  display: flex;
  border-bottom: 2px solid var(--fg);
  margin-bottom: 20px;
}
.tab-btn {
  font-family: var(--font-main);
  font-size: 8px;
  letter-spacing: 2px;
  background: none;
  border: none;
  border-right: 1px solid #2a2a2a;
  color: #555;
  padding: 10px 18px;
  cursor: none;
  text-transform: uppercase;
  transition: color 0.1s;
}
.tab-btn:hover { color: #aaa; }
.tab-btn.active {
  color: var(--accent-yellow);
  border-bottom: 2px solid var(--accent-yellow);
  margin-bottom: -2px;
}

/* ============================================================
   PATTERN CANVAS
   ============================================================ */
#pattern-canvas {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  opacity: 0.3;
}

/* ============================================================
   EDITOR
   ============================================================ */
#editor { display: none; position: relative; z-index: 1; }
#editor.active { display: block; }

.editor-title {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--accent-yellow);
  margin-bottom: 24px;
  line-height: 1.5;
}

.editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 820px) { .editor-grid { grid-template-columns: 1fr; } }

/* AVATAR UPLOAD ZONE */
.avatar-upload-zone {
  width: 112px; height: 112px;
  border: 3px dashed #555;
  background: #0a0a0a;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: none;
  font-size: 8px; letter-spacing: 1px;
  color: #555; gap: 8px;
  transition: border-color 0.15s, color 0.15s;
  overflow: hidden; position: relative;
}
.avatar-upload-zone:hover { border-color: var(--accent-yellow); color: var(--accent-yellow); }
.avatar-upload-zone img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; image-rendering: pixelated;
}
.avatar-upload-zone input {
  position: absolute; inset: 0;
  opacity: 0; cursor: none; width: 100%; height: 100%;
}
.avatar-upload-zone svg { width: 32px; height: 32px; }

/* PATTERN PREVIEW */
#pattern-preview-wrap {
  width: 100%; height: 150px;
  border: 2px solid #444;
  background: #000;
  overflow: hidden; position: relative;
  margin-top: 8px;
}
#pattern-preview-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* COLOR SWATCHES */
.swatch-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.swatch {
  width: 20px; height: 20px;
  border: 2px solid transparent;
  cursor: none;
  transition: transform 0.1s;
}
.swatch:hover { transform: scale(1.25); border-color: #fff; }
.swatch.active { border-color: var(--accent-yellow); transform: scale(1.2); }

/* NOTIFICATIONS */
#notif {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
}
.notif-item {
  background: #000;
  border: 2px solid var(--fg);
  padding: 10px 16px;
  font-size: 8px; letter-spacing: 2px;
  animation: notif-in 0.2s ease, notif-out 0.3s 2.5s ease forwards;
  max-width: 260px; line-height: 1.6;
}
.notif-item.ok  { border-color: var(--accent-green); color: var(--accent-green); }
.notif-item.err { border-color: var(--accent-red);   color: var(--accent-red); }
@keyframes notif-in  { from { opacity: 0; transform: translateX(16px); } }
@keyframes notif-out { to   { opacity: 0; transform: translateX(16px); } }

/* CONFIRM DIALOG */
#confirm-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9998; align-items: center; justify-content: center;
}
#confirm-overlay.open { display: flex; }
#confirm-box {
  border: 4px solid var(--fg); background: #000;
  padding: 36px; max-width: 380px; text-align: center;
}
#confirm-box p { margin-bottom: 28px; font-size: 10px; letter-spacing: 1px; line-height: 2; white-space: pre-line; }
#confirm-btns { display: flex; gap: 16px; justify-content: center; }

/* MISC */
.flex-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.text-yellow { color: var(--accent-yellow); }
.text-cyan   { color: var(--accent-cyan); }
.text-red    { color: var(--accent-red); }
.text-green  { color: var(--accent-green); }

.param-group { margin-top: 14px; padding: 14px; border: 1px solid #2a2a2a; background: #080808; }
.param-group-title { font-size: 7px; letter-spacing: 3px; color: #555; margin-bottom: 12px; text-transform: uppercase; }
.params-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }



/* ============================================================
   INFO BUTTON
   ============================================================ */
.btn-info {
  font-family: 'Georgia', serif;
  font-size: 11px;
  font-style: italic;
  font-weight: bold;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--accent-cyan);
  color: var(--accent-cyan);
  background: transparent;
  cursor: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.btn-info:hover { background: var(--accent-cyan); color: #000; }

/* Radar toggle override — uses ? not italic i */
.radar-toggle-btn {
  font-family: inherit !important;
  font-style: normal !important;
  font-size: 9px !important;
  border-color: #333 !important;
  color: #444 !important;
  cursor: pointer !important;
  transition: border-color 0.15s, color 0.15s, background 0.15s !important;
}
.radar-toggle-btn:hover { background: #111 !important; color: #888 !important; border-color: #555 !important; }
.radar-toggle-btn.radar-active { border-color: var(--accent-cyan) !important; color: var(--accent-cyan) !important; background: rgba(0,220,255,0.06) !important; }

/* Radar chart */
#cv-radar-wrap {
  padding: 14px 16px 6px;
  border-top: 1px solid #151515;
}
.radar-svg {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  overflow: visible;
}

/* ============================================================
   POWER LEVEL MODAL
   ============================================================ */
#power-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.80);
  z-index: 9997;
}
#power-modal-overlay.open { display: block; }
#power-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  width: min(960px, 94vw); /* Ultra wide */
  max-height: 85vh;
  background: #000;
  border: 3px solid var(--fg);
  flex-direction: column;
  animation: cv-fade-in 0.25s ease;
}
#power-modal::before {
  content: '';
  position: absolute;
  right: -6px; bottom: -6px;
  width: 100%; height: 100%;
  border: 2px solid var(--shadow);
  z-index: -1;
}
#power-modal.open { display: flex; }
#power-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 2px solid #2a2a2a;
  font-size: 11px; letter-spacing: 3px;
  color: var(--accent-yellow);
  background: #080808;
  flex-shrink: 0;
}
#power-modal-body {
  overflow-y: auto; padding: 24px;
  display: flex; flex-direction: column; gap: 6px;
}
.pl-tier {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  border-left: 4px solid #2a2a2a;
  cursor: none;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.pl-tier:hover {
  border-left-color: var(--accent-cyan);
  background: #080808;
}
.pl-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.7;
  margin-top: 2px;
}
.pl-tier:hover .pl-icon { opacity: 1; }
.pl-text { flex: 1; }
.pl-title {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--accent-cyan);
  margin-bottom: 7px;
  line-height: 1.6;
}
.pl-stats {
  font-size: 9px;
  letter-spacing: 1px;
  color: #777;
  line-height: 2;
}
.pl-cap {
  font-size: 9px;
  letter-spacing: 3px;
  color: #444;
  text-align: center;
  padding-top: 16px;
  animation: blink 1.5s step-end infinite;
}
#pl-tooltip {
  display: none;
  position: absolute; /* Relative to modal now */
  left: calc(100% + 15px); /* Positioned to the right */
  top: 0;
  width: 260px;
  background: #050505;
  border: 3px solid var(--accent-cyan);
  padding: 20px;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1.8;
  color: #bbb;
  pointer-events: none;
  z-index: 99999;
  box-shadow: 0 0 20px #00ffff44;
  animation: pl-tooltip-slide 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Global Tooltip */
#global-tooltip {
  position: fixed; display: none; background: rgba(0,0,0,0.9); border: 1px solid var(--accent-cyan);
  padding: 8px 12px; color: #fff; font-size: 10px; font-family: var(--font-main); letter-spacing: 1px;
  z-index: 9999; pointer-events: none; border-radius: 4px; max-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.mod-row select { width: 10%; }

/* ============================================================
   UTILITIES
   ============================================================ */
/* 3D DICE ENGINE */
.dice-container {
  width: 80px;
  height: 80px;
  perspective: 600px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cube {
  width: 60px;
  height: 60px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.2);
  will-change: transform;
}

.face {
  position: absolute;
  width: 60px;
  height: 60px;
  background: var(--panel-bg);
  border: 3px solid var(--accent-yellow);
  color: var(--accent-yellow);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  backface-visibility: hidden;
  box-shadow: inset 0 0 15px rgba(255,255,0,0.2);
}

.front  { transform: rotateY(  0deg) translateZ(30px); }
.back   { transform: rotateY(180deg) translateZ(30px); }
.right  { transform: rotateY( 90deg) translateZ(30px); }
.left   { transform: rotateY(-90deg) translateZ(30px); }
.top    { transform: rotateX( 90deg) translateZ(30px); }
.bottom { transform: rotateX(-90deg) translateZ(30px); }

/* Smooth Continuous Tumble — linear timing, fine keyframes, no stalling */
.cube.tumble {
  animation: dice-tumble 1.8s infinite linear;
  transition: none;
}

@keyframes dice-tumble {
  0%   { transform: rotateX(  0deg) rotateY(  0deg) rotateZ(  0deg); }
  4%   { transform: rotateX( 22deg) rotateY( 30deg) rotateZ(  8deg); }
  8%   { transform: rotateX( 46deg) rotateY( 62deg) rotateZ( 17deg); }
  12%  { transform: rotateX( 72deg) rotateY( 96deg) rotateZ( 27deg); }
  16%  { transform: rotateX(100deg) rotateY(131deg) rotateZ( 38deg); }
  20%  { transform: rotateX(130deg) rotateY(167deg) rotateZ( 50deg); }
  24%  { transform: rotateX(162deg) rotateY(204deg) rotateZ( 63deg); }
  28%  { transform: rotateX(196deg) rotateY(241deg) rotateZ( 77deg); }
  32%  { transform: rotateX(231deg) rotateY(278deg) rotateZ( 92deg); }
  36%  { transform: rotateX(268deg) rotateY(315deg) rotateZ(108deg); }
  40%  { transform: rotateX(306deg) rotateY(352deg) rotateZ(125deg); }
  44%  { transform: rotateX(345deg) rotateY(389deg) rotateZ(143deg); }
  48%  { transform: rotateX(385deg) rotateY(425deg) rotateZ(162deg); }
  52%  { transform: rotateX(426deg) rotateY(461deg) rotateZ(182deg); }
  56%  { transform: rotateX(468deg) rotateY(497deg) rotateZ(203deg); }
  60%  { transform: rotateX(511deg) rotateY(532deg) rotateZ(225deg); }
  64%  { transform: rotateX(554deg) rotateY(567deg) rotateZ(248deg); }
  68%  { transform: rotateX(598deg) rotateY(601deg) rotateZ(272deg); }
  72%  { transform: rotateX(643deg) rotateY(634deg) rotateZ(297deg); }
  76%  { transform: rotateX(689deg) rotateY(666deg) rotateZ(323deg); }
  80%  { transform: rotateX(735deg) rotateY(697deg) rotateZ(350deg); }
  84%  { transform: rotateX(782deg) rotateY(728deg) rotateZ(378deg); }
  88%  { transform: rotateX(829deg) rotateY(758deg) rotateZ(407deg); }
  92%  { transform: rotateX(877deg) rotateY(787deg) rotateZ(437deg); }
  96%  { transform: rotateX(925deg) rotateY(815deg) rotateZ(468deg); }
  100% { transform: rotateX(973deg) rotateY(843deg) rotateZ(500deg); }
}

.cube.land {
  animation: dice-land 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.5) forwards;
}

@keyframes dice-land {
  0%   { scale: 1.5; filter: brightness(2); }
  100% { scale: 1; filter: brightness(1); }
}

/* CINEMATIC DICE OVERLAY */
#dice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#dice-overlay.active { opacity: 1; pointer-events: auto; cursor: pointer; }

.dice-container.cinematic {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2.5);
  z-index: 9999;
  margin: 0;
  pointer-events: none;
}

/* Color Tiers with High Specificity */
.cube .face { 
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, background 0.2s; 
}

/* Tier: LOW (Red) */
.cube.tier-low .face {
  border-color: #ff3333 !important;
  color: #ff3333 !important;
  box-shadow: inset 0 0 20px rgba(255,0,0,0.5) !important;
}

/* Tier: MID (Yellow - Standard) */
.cube.tier-mid .face {
  border-color: #ffff00 !important;
  color: #ffff00 !important;
  box-shadow: inset 0 0 15px rgba(255,255,0,0.3) !important;
}

/* Tier: HIGH (Cyan/Blue) */
.cube.tier-high .face {
  border-color: #00ffff !important;
  color: #00ffff !important;
  box-shadow: 0 0 20px rgba(0,255,255,0.6), inset 0 0 20px rgba(0,255,255,0.4) !important;
  text-shadow: 0 0 10px rgba(0,255,255,0.8);
}

/* Tier: MAX (Natural 20 - Orange) */
.cube.tier-max .face { 
  border-color: #ff8000 !important; 
  color: #ffffff !important; 
  background: rgba(255,128,0,0.2) !important;
  box-shadow: 0 0 40px rgba(255,128,0,0.8), inset 0 0 25px rgba(255,128,0,0.5) !important; 
  text-shadow: 0 0 15px #fff, 0 0 25px #ff8000;
}

#crit-result {
  font-size: 48px;
  color: var(--accent-yellow);
  font-weight: bold;
  position: relative;
  transition: all 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-shadow: 2px 2px 0px rgba(255,0,255,0.5), -2px -2px 0px rgba(0,255,255,0.5);
  filter: drop-shadow(0 0 10px rgba(255,255,0,0.3));
}

#crit-result.is-crit {
  color: var(--accent-red);
  text-shadow: 0 0 20px rgba(255,0,0,0.8);
  animation: crit-glow 1.5s infinite alternate;
}

@keyframes crit-glow {
  from { filter: brightness(1) drop-shadow(0 0 5px red); }
  to { filter: brightness(1.5) drop-shadow(0 0 20px red); }
}

.stat-checker-row {
  margin-bottom: 25px;
  border-bottom: 1px solid #1e1e1e;
  padding-bottom: 15px;
}
.stat-checker-row:last-child { border-bottom: none; }
.checker-math-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0;
}
.checker-math-grid .field { margin-bottom: 0; }
.checker-math-grid label { font-size: 7px; color: #888; letter-spacing: 1px; display: block; margin-bottom: 2px; }
.checker-math-grid input { 
  font-size: 8px; padding: 4px; background: #000; border: 1px solid #333; color: #fff; width: 100%;
}
.result-segs-label { font-size: 8px; color: #aaa; letter-spacing: 1px; }
.checker-note {
  font-size: 7px;
  color: #555;
  margin-top: 8px;
  display: block;
}

/* ============================================================
   INVENTORY SYSTEM
   ============================================================ */
.inv-panel { margin-top: 24px; }
.inv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.inv-grid, .traits-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
  gap: 16px; 
  padding: 10px 4px;
  align-items: start; /* Prevent cards from stretching to match tallest in row */
}
.inv-card { 
  background: var(--panel-bg); border: 2px solid #333; padding: 12px; 
  padding-bottom: 36px; /* Tightened space for absolute buttons */
  display: flex; gap: 12px; transition: all 0.2s, border-color 0.2s, box-shadow 0.2s; position: relative;
}
.inv-card:hover { transform: translateY(-2px); border-color: var(--hc, #555); box-shadow: 0 0 12px var(--hc, transparent); }
.inv-card.equipped { border-color: var(--char-color, var(--accent-yellow)); box-shadow: 0 0 10px rgba(255,255,255,0.1); }
.equip-btn-abs {
  position: absolute;
  bottom: 8px; 
  left: 12px;
  min-width: 80px;
}
.inv-card-actions-abs {
  position: absolute;
  bottom: 8px;
  right: 12px;
  display: flex;
  gap: 6px;
}
.inv-card-icon { 
  width: 64px; height: 64px; flex-shrink: 0; border: 1px solid #444; 
  display: flex; align-items: center; justify-content: center; background: #000;
}
.inv-card-icon img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.inv-card-icon svg { width: 32px; height: 32px; fill: var(--fg); }
.emoji-icon {
  user-select: none;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s;
  filter: grayscale(100%) contrast(1.2) brightness(1.5);
}
.inv-card:hover .emoji-icon,
.icon-btn-item:hover .emoji-icon,
.icon-btn-item.active .emoji-icon {
  filter: grayscale(100%) contrast(1.2) brightness(1.5) drop-shadow(0 0 4px var(--hc, #fff)) drop-shadow(0 0 8px var(--hc, #fff));
}
.inv-card-icon .emoji-icon { font-size: 44px; margin-bottom: 2px; }
.inv-card-info { flex: 1; min-width: 0; }
.inv-card-name { font-size: 9px; letter-spacing: 1px; color: var(--fg); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-card-desc { 
  font-size: 7px; color: #888; line-height: 1.4; margin-bottom: 8px; word-break: break-word; 
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inv-mod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.inv-mod-tag { font-size: 10px; padding: 4px 6px; border-radius: 4px; letter-spacing: 1px; color: #000; font-weight: bold; }
.inv-mod-tag.add { background: var(--accent-green); }
.inv-mod-tag.sub { background: var(--accent-red); }
.inv-mod-tag.mul { background: var(--accent-blue); }
.inv-mod-tag.div { background: var(--accent-orange); }

.inv-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.inv-mod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; align-content: flex-start; align-items: flex-start; }

.inv-card-actions { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; }
.inv-card-actions .flex-row { gap: 6px; flex-wrap: nowrap; }

/* Item Editor Modal */
#item-editor-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 10000; }
#item-editor-overlay.open { display: flex; align-items: center; justify-content: center; }
#item-editor-modal { 
  background: var(--bg); border: 4px solid var(--fg); width: 95%; max-width: 1000px; 
  max-height: 90vh; display: flex; flex-direction: column; 
}
#item-editor-header { 
  padding: 16px; border-bottom: 2px solid #333; display: flex; justify-content: space-between; 
  align-items: center; font-size: 14px; letter-spacing: 2px; color: var(--accent-yellow); 
}
#item-editor-body { padding: 24px; overflow-y: auto; flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media(max-width: 768px) { #item-editor-body { grid-template-columns: 1fr; } }
#item-editor-footer { padding: 16px; border-top: 2px solid #333; display: flex; justify-content: flex-end; gap: 12px; }

/* Icon Picker */
.icon-picker-wrap { border: 1px solid #333; background: #0a0a0a; padding: 10px; height: 200px; overflow-y: auto; margin-bottom: 10px; }
.icon-cat-title { font-size: 7px; color: #666; margin: 10px 0 6px; letter-spacing: 1px; }
.icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; }
.icon-btn-item { 
  aspect-ratio: 1; border: 1px solid #333; background: #111; cursor: none; 
  display: flex; align-items: center; justify-content: center; transition: all 0.2s; 
}
.icon-btn-item:hover { border-color: var(--hc, #888); box-shadow: 0 0 8px var(--hc, transparent); background: rgba(255,255,255,0.05); }
.icon-btn-item.active { border-color: var(--hc, var(--accent-cyan)); background: rgba(255,255,255,0.1); box-shadow: 0 0 12px var(--hc, transparent); }
.icon-btn-item svg { width: 28px; height: 28px; fill: var(--fg); }
.icon-btn-item .emoji-icon { font-size: 20px; }
.icon-btn-item img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

/* Modifier Rows */
.mod-row { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; }
.mod-row select, .mod-row input { 
  flex: 1; min-width: 0; width: 10%; background: #000; border: 2px solid #444; 
  color: var(--accent-yellow); font-family: var(--font-main); padding: 8px; font-size: 14px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.mod-row select option {
  font-size: 14px;
  background: #000;
  color: var(--accent-yellow);
}
.mod-row select:focus, .mod-row input:focus { border-color: var(--accent-cyan); outline: none; }

.eff-stat-diff {
  font-size: 8px;
  padding: 8px 12px;
  margin: -8px -12px -8px 2px;
  cursor: help;
  display: inline-block;
}
.eff-stat-diff.pos { color: var(--accent-green); }
.eff-stat-diff.neg { color: var(--accent-red); }
.stat-pl-badge { display: inline-block; font-size: 6px; letter-spacing: 1px; padding: 1px 5px; border: 1px solid currentColor; margin-left: 6px; vertical-align: middle; font-weight: bold; }

/* ========================== */
/* HOVER ANIMATIONS           */
/* ========================== */
@keyframes avatar-hover-pulse {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.03) rotate(1.5deg); }
  50% { transform: scale(1.01) rotate(-1deg); }
  75% { transform: scale(1.04) rotate(0.5deg); }
  100% { transform: scale(1.02) rotate(0deg); }
}

#cv-avatar {
  transition: filter 0.3s, transform 0.3s;
}

#cv-avatar:hover {
  animation: avatar-hover-pulse 1.2s infinite alternate ease-in-out;
  filter: brightness(1.2) drop-shadow(0 0 16px var(--char-color));
}

.stat-row {
  transition: transform 0.2s, background 0.2s, padding-left 0.2s;
  border-radius: 4px;
}

.stat-row:hover {
  transform: translateX(4px);
  background: rgba(255,255,255,0.03);
  padding-left: 4px;
}

.stat-row .stat-label svg {
  transition: transform 0.2s;
}

.stat-row:hover .stat-label svg {
  transform: scale(1.2) rotate(10deg);
}

#cv-substats > div > div {
  transition: transform 0.2s, background 0.2s, padding-left 0.2s;
  border-radius: 4px;
}

#cv-substats > div > div:hover {
  transform: translateX(3px);
  background: rgba(255,255,255,0.05);
  padding-left: 4px;
}

/* ============================================================
   TRAITS SYSTEM
   ============================================================ */

/* RARITY PALETTE */
:root {
  --rar-common-fg: #c0c0c0;
  --rar-common-bg: #1a1a1a;
  --rar-common-border: #6a6a6a;

  --rar-rare-fg: #4aa9ff;
  --rar-rare-bg: #07142a;
  --rar-rare-border: #1f73d4;

  --rar-epic-fg: #c98bff;
  --rar-epic-bg: #170a2a;
  --rar-epic-border: #8a3fff;

  --rar-legendary-fg: #ffe14a;
  --rar-legendary-bg: #2a1f00;
  --rar-legendary-border: #ffae00;

  --rar-mythic-fg: #ffd86a;
  --rar-mythic-bg: #2a0e00;
  --rar-mythic-border: #ff6a00;

  --rar-hexxed-fg: #c46aff;
  --rar-hexxed-bg: #0a0014;
  --rar-hexxed-border: #5400a0;
}

/* TRAITS PANEL */
.traits-panel { margin-top: 24px; }
.traits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 16px;
  overflow: visible;
}
.traits-empty {
  font-size: 9px; color: #555; letter-spacing: 1px;
  grid-column: 1/-1; text-align: center; padding: 28px;
  border: 1px dashed #2a2a2a;
}

/* TRAIT CHIP — shared base */
.trait-chip {
  position: relative;
  padding: 12px 14px;
  border: 2px solid var(--c-border, #555);
  background: linear-gradient(135deg, var(--c-bg, #111) 0%, #000 120%);
  font-family: var(--font-main);
  transition: transform 0.18s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.18s, border-color 0.18s;
  cursor: help;
  contain: layout style;
  overflow: hidden;
}
.trait-chip:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 18px var(--c-glow, #fff8), 0 6px 18px rgba(0,0,0,0.6);
}

.trait-chip-rarity {
  font-size: 7px;
  letter-spacing: 3px;
  color: var(--c-fg, #aaa);
  margin-bottom: 6px;
  display: inline-block;
  padding: 2px 6px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--c-border, #555);
}
.trait-chip-name {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--c-fg, #fff);
  margin: 6px 0 4px;
  text-shadow: 0 0 8px var(--c-glow, transparent);
}
.trait-chip-desc {
  font-size: 8px;
  color: #aaa;
  letter-spacing: 1px;
  line-height: 1.7;
  word-break: break-word;
}
.trait-chip-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: transparent;
  border: 1px solid #444;
  color: #777;
  font-family: var(--font-main);
  font-size: 9px;
  cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  z-index: 5;
}
.trait-chip-remove:hover {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #000;
  transform: scale(1.15);
}

/* RARITY SKINS */
.trait-chip.rar-common,
.codex-entry.rar-common {
  --c-fg: var(--rar-common-fg);
  --c-bg: var(--rar-common-bg);
  --c-border: var(--rar-common-border);
  --c-glow: rgba(192,192,192,0.4);
}

.trait-chip.rar-rare,
.codex-entry.rar-rare {
  --c-fg: var(--rar-rare-fg);
  --c-bg: var(--rar-rare-bg);
  --c-border: var(--rar-rare-border);
  --c-glow: rgba(74,169,255,0.55);
}

.trait-chip.rar-epic,
.codex-entry.rar-epic {
  --c-fg: var(--rar-epic-fg);
  --c-bg: var(--rar-epic-bg);
  --c-border: var(--rar-epic-border);
  --c-glow: rgba(201,139,255,0.6);
  animation: epic-pulse 2.2s ease-in-out infinite;
}
@keyframes epic-pulse {
  0%,100% { box-shadow: 0 0 6px rgba(201,139,255,0.25), inset 0 0 0 transparent; }
  50%     { box-shadow: 0 0 18px rgba(201,139,255,0.55), inset 0 0 12px rgba(138,63,255,0.25); }
}

/* LEGENDARY — clean gold sweep + breathing glow */
.trait-chip.rar-legendary,
.codex-entry.rar-legendary {
  --c-fg: var(--rar-legendary-fg);
  --c-bg: var(--rar-legendary-bg);
  --c-border: var(--rar-legendary-border);
  --c-glow: rgba(255,225,74,0.7);
  animation: legendary-glow 4s ease-in-out infinite;
}
.trait-chip.rar-legendary::before,
.codex-entry.rar-legendary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,252,190,0.72) 50%, transparent 62%);
  animation: legendary-sweep 4s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes legendary-sweep {
  0%        { transform: translateX(-160%); }
  40%, 100% { transform: translateX(260%); }
}
@keyframes legendary-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,200,0,0.3),  inset 0 0 8px  rgba(255,175,0,0.1); }
  50%      { box-shadow: 0 0 30px rgba(255,222,0,0.72), inset 0 0 22px rgba(255,200,0,0.28); }
}

/* MYTHIC — steady solar heat, no rotation */
.trait-chip.rar-mythic,
.codex-entry.rar-mythic {
  --c-fg: var(--rar-mythic-fg);
  --c-bg: var(--rar-mythic-bg);
  --c-border: var(--rar-mythic-border);
  --c-glow: rgba(255,140,0,0.8);
  background: linear-gradient(135deg, #ff6a00, #ffc844 50%, #ff6a00 100%);
  background-size: 250% 250%;
  animation: mythic-heat 5s ease-in-out infinite;
  border-color: #ffb830;
  color: #1a0500;
}
.trait-chip.rar-mythic .trait-chip-name,
.codex-entry.rar-mythic .codex-entry-name {
  color: #1a0500;
  text-shadow: 0 0 8px rgba(255,200,80,0.9), 0 0 18px rgba(255,120,0,0.65);
}
.trait-chip.rar-mythic .trait-chip-desc,
.codex-entry.rar-mythic .codex-entry-desc {
  color: #2a0800;
}
.trait-chip.rar-mythic .trait-chip-rarity,
.codex-entry.rar-mythic .codex-rar-tag.rar-mythic {
  color: #1a0500;
  background: rgba(255,255,255,0.35);
  border-color: rgba(80,20,0,0.6);
}
@keyframes mythic-heat {
  0%,100% { background-position: 0% 50%;   box-shadow: 0 0 28px rgba(255,140,0,0.6),  inset 0 0 20px rgba(255,210,100,0.3); }
  50%     { background-position: 100% 50%; box-shadow: 0 0 52px rgba(255,190,20,0.92), inset 0 0 36px rgba(255,240,140,0.55); }
}
.trait-chip.rar-mythic::before,
.codex-entry.rar-mythic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 28% 38%, rgba(255,255,180,0.42), transparent 52%),
              radial-gradient(ellipse at 72% 65%, rgba(255,180,60,0.36), transparent 50%);
  pointer-events: none;
  animation: mythic-bloom 5s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes mythic-bloom {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* SHIMMYFUL — soft green outer ring + star */
.trait-chip.shimmyful {
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px rgba(80,255,140,0.55),
    0 0 18px rgba(80,255,140,0.35);
  animation: shimmy-pulse 2.8s ease-in-out infinite;
}
@keyframes shimmy-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #000, 0 0 0 5px rgba(80,255,140,0.5),  0 0 14px rgba(80,255,140,0.25); }
  50%       { box-shadow: 0 0 0 3px #000, 0 0 0 5px rgba(80,255,140,0.85), 0 0 28px rgba(80,255,140,0.55); }
}
.shimmy-star {
  position: absolute;
  top: 5px; right: 8px;
  font-size: 16px;
  color: #50ff8c;
  text-shadow: 0 0 6px rgba(80,255,140,0.9);
  pointer-events: none;
  animation: shimmy-star-spin 3s ease-in-out infinite;
}
/* Gold star for legendary shimmyful */
.shimmy-leg-star {
  color: #ffd84a;
  text-shadow: 0 0 8px rgba(255,200,60,0.95), 0 0 18px rgba(255,180,20,0.5);
  animation: shimmy-leg-star-spin 2.5s ease-in-out infinite;
}
@keyframes shimmy-star-spin {
  0%, 100% { opacity: 0.7; transform: scale(1)   rotate(0deg); }
  50%       { opacity: 1;   transform: scale(1.25) rotate(20deg); }
}
@keyframes shimmy-leg-star-spin {
  0%, 100% { opacity: 0.75; transform: scale(1)    rotate(-10deg); }
  50%       { opacity: 1;   transform: scale(1.3)  rotate(15deg); }
}

/* LEGENDARY SHIMMYFUL — gold/amber outer ring */
.trait-chip.shimmyful.shimmy-leg {
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px rgba(255,200,60,0.65),
    0 0 22px rgba(255,180,20,0.4);
  animation: shimmy-leg-pulse 2.5s ease-in-out infinite;
}
@keyframes shimmy-leg-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #000, 0 0 0 5px rgba(255,200,60,0.55), 0 0 16px rgba(255,180,20,0.3); }
  50%       { box-shadow: 0 0 0 3px #000, 0 0 0 6px rgba(255,210,80,0.95), 0 0 36px rgba(255,170,0,0.65); }
}

/* SHIMMYFUL hand card overlay */
.hand-card.shimmyful {
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px rgba(80,255,140,0.6),
    0 0 24px rgba(80,255,140,0.5),
    var(--c-glow, 0 0 0 transparent);
  animation: shimmy-pulse 2.8s ease-in-out infinite,
             hand-card-deal 0.55s cubic-bezier(0.2,0.8,0.2,1.05) both;
}
.hand-card.shimmyful .hand-card-rarity::after { content: none; }

/* Legendary shimmyful hand card — gold ring */
.hand-card.shimmyful.shimmy-leg {
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px rgba(255,200,60,0.7),
    0 0 30px rgba(255,170,0,0.55),
    var(--c-glow, 0 0 0 transparent);
  animation: shimmy-leg-pulse 2.5s ease-in-out infinite,
             hand-card-deal 0.55s cubic-bezier(0.2,0.8,0.2,1.05) both;
}

/* RARE SHIMMYFUL — blue outer ring */
.trait-chip.shimmyful.shimmy-rare {
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px rgba(74,169,255,0.65),
    0 0 20px rgba(74,169,255,0.35);
  animation: shimmy-rare-pulse 2.6s ease-in-out infinite;
}
@keyframes shimmy-rare-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #000, 0 0 0 5px rgba(74,169,255,0.55), 0 0 14px rgba(74,169,255,0.25); }
  50%       { box-shadow: 0 0 0 3px #000, 0 0 0 6px rgba(74,169,255,0.95), 0 0 32px rgba(74,169,255,0.6); }
}
/* Blue star for rare shimmyful */
.shimmy-rare-star {
  color: #4aa9ff;
  text-shadow: 0 0 8px rgba(74,169,255,0.95), 0 0 18px rgba(74,169,255,0.5);
  animation: shimmy-rare-star-spin 2.8s ease-in-out infinite;
}
@keyframes shimmy-rare-star-spin {
  0%, 100% { opacity: 0.75; transform: scale(1)   rotate(5deg); }
  50%       { opacity: 1;   transform: scale(1.2)  rotate(-15deg); }
}
/* Rare shimmyful hand card — blue ring */
.hand-card.shimmyful.shimmy-rare {
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px rgba(74,169,255,0.7),
    0 0 28px rgba(74,169,255,0.5),
    var(--c-glow, 0 0 0 transparent);
  animation: shimmy-rare-pulse 2.6s ease-in-out infinite,
             hand-card-deal 0.55s cubic-bezier(0.2,0.8,0.2,1.05) both;
}

/* MYTHIC SHIMMYFUL — orange/flame outer ring */
.trait-chip.shimmyful.shimmy-mythic {
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px rgba(255,130,0,0.65),
    0 0 20px rgba(255,100,0,0.35);
  animation: shimmy-mythic-pulse 2.4s ease-in-out infinite;
}
@keyframes shimmy-mythic-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #000, 0 0 0 5px rgba(255,130,0,0.55), 0 0 14px rgba(255,100,0,0.25); }
  50%       { box-shadow: 0 0 0 3px #000, 0 0 0 6px rgba(255,150,0,0.95), 0 0 34px rgba(255,90,0,0.65); }
}
/* Orange star for mythic shimmyful */
.shimmy-mythic-star {
  color: #ff8c00;
  text-shadow: 0 0 8px rgba(255,140,0,0.95), 0 0 18px rgba(255,80,0,0.6);
  animation: shimmy-mythic-star-spin 2.4s ease-in-out infinite;
}
@keyframes shimmy-mythic-star-spin {
  0%, 100% { opacity: 0.8;  transform: scale(1)    rotate(0deg); }
  50%       { opacity: 1;   transform: scale(1.3)  rotate(18deg); }
}
/* Mythic shimmyful hand card — orange ring */
.hand-card.shimmyful.shimmy-mythic {
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px rgba(255,130,0,0.7),
    0 0 30px rgba(255,100,0,0.55),
    var(--c-glow, 0 0 0 transparent);
  animation: shimmy-mythic-pulse 2.4s ease-in-out infinite,
             hand-card-deal 0.55s cubic-bezier(0.2,0.8,0.2,1.05) both;
}

/* EPIC SHIMMYFUL — purple outer ring */
.trait-chip.shimmyful.shimmy-epic {
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px rgba(201,139,255,0.65),
    0 0 20px rgba(201,139,255,0.35);
  animation: shimmy-epic-pulse 2.7s ease-in-out infinite;
}
@keyframes shimmy-epic-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #000, 0 0 0 5px rgba(201,139,255,0.55), 0 0 14px rgba(201,139,255,0.25); }
  50%       { box-shadow: 0 0 0 3px #000, 0 0 0 6px rgba(201,139,255,0.95), 0 0 32px rgba(201,139,255,0.65); }
}
/* Purple star for epic shimmyful */
.shimmy-epic-star {
  color: #c98bff;
  text-shadow: 0 0 8px rgba(201,139,255,0.95), 0 0 18px rgba(201,139,255,0.5);
  animation: shimmy-epic-star-spin 2.7s ease-in-out infinite;
}
@keyframes shimmy-epic-star-spin {
  0%, 100% { opacity: 0.75; transform: scale(1)   rotate(-8deg); }
  50%       { opacity: 1;   transform: scale(1.2)  rotate(12deg); }
}
/* Epic shimmyful hand card — purple ring */
.hand-card.shimmyful.shimmy-epic {
  box-shadow:
    0 0 0 3px #000,
    0 0 0 5px rgba(201,139,255,0.7),
    0 0 28px rgba(201,139,255,0.5),
    var(--c-glow, 0 0 0 transparent);
  animation: shimmy-epic-pulse 2.7s ease-in-out infinite,
             hand-card-deal 0.55s cubic-bezier(0.2,0.8,0.2,1.05) both;
}

/* ============================================================
   OWNER SUBTITLE (stats tab)
   ============================================================ */
.cv-owner-subtitle {
  font-family: var(--font-main);
  font-size: 7px;
  letter-spacing: 3px;
  color: var(--char-color, #ffff00);
  opacity: 0.55;
  margin-top: 2px;
  margin-bottom: 2px;
}

/* ============================================================
   INFO TAB — character dossier v2
   ============================================================ */
.info-dossier {
  padding: 0 !important;
  overflow: hidden;
}

.info-tiny-label {
  font-family: var(--font-main);
  font-size: 8px;
  letter-spacing: 2px;
  color: #c8c8c8;
  margin-bottom: 9px;
}

/* Owner band */
.info-owner-band {
  padding: 24px 24px 22px;
  border-bottom: 1px solid #161616;
}

.info-owner-input {
  font-family: var(--font-main);
  font-size: 13px;
  letter-spacing: 3px;
  color: #666;
  background: transparent;
  border: none;
  border-bottom: 1px solid #1e1e1e;
  width: 100%;
  padding: 5px 0 8px;
  outline: none;
  transition: border-color 0.2s, color 0.2s;
}
.info-owner-input:not(:placeholder-shown) { color: var(--char-color, #ffff00); }
.info-owner-input:focus {
  border-bottom-color: var(--char-color, #ffff00);
  color: var(--char-color, #ffff00);
}
.info-owner-input::placeholder { color: #222; }

/* Section */
.info-section { border-bottom: 1px solid #141414; }
.info-section-last { border-bottom: none; padding-bottom: 8px; }

.info-name-title {
  font-family: var(--font-main);
  font-size: 20px;
  letter-spacing: 3px;
  color: var(--char-color, #ffff00);
  text-shadow: 0 0 18px var(--char-color, #ffff00), 0 0 40px rgba(255,255,255,0.1);
  padding: 28px 24px 10px;
  line-height: 1.45;
  word-break: break-word;
}

.info-section-hd {
  font-family: var(--font-main);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--char-color, #ffff00);
  opacity: 0.7;
  padding: 16px 24px 14px;
  display: block;
}

/* Row of simple fields */
.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 0 24px 18px;
}

.info-field-group { flex: 1 1 100px; min-width: 90px; }

/* Inline text input */
.info-line-input {
  font-family: var(--font-main);
  font-size: 9px;
  letter-spacing: 1px;
  color: #777;
  background: transparent;
  border: none;
  border-bottom: 1px solid #181818;
  width: 100%;
  padding: 4px 0 6px;
  outline: none;
  transition: color 0.15s, border-color 0.2s;
}
.info-line-input:focus {
  color: var(--fg);
  border-bottom-color: var(--char-color, #ffff00);
}
.info-line-input::placeholder { color: #1c1c1c; }

/* Markdown field group */
.info-md-group {
  padding: 0 24px 16px;
}

/* Side-by-side markdown row */
.info-row-md {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1px;
  padding: 0;
}
.info-row-md .info-md-group { flex: 1 1 160px; min-width: 140px; }

/* Markdown wrap */
.info-md-wrap { position: relative; }

.info-md-textarea {
  font-family: var(--font-main);
  font-size: 8px;
  letter-spacing: 0.5px;
  line-height: 1.9;
  color: #777;
  background: #080808;
  border: 1px solid #1a1a1a;
  border-left: 2px solid var(--char-color, #ffff00);
  width: 100%;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  min-height: 72px;
  transition: border-color 0.2s, color 0.2s;
}
.info-md-textarea:focus {
  border-color: #222;
  border-left-color: var(--char-color, #ffff00);
  color: #ccc;
}
.info-md-textarea::placeholder { color: #202020; }

.info-md-rendered {
  font-size: 8px;
  letter-spacing: 0.4px;
  line-height: 1.9;
  color: #bbb;
  background: #080808;
  border: 1px solid #1a1a1a;
  border-left: 2px solid var(--char-color, #ffff00);
  padding: 10px 12px;
  min-height: 72px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-left-color 0.2s;
}
.info-md-rendered:hover { opacity: 0.85; }

/* rendered markdown typography */
.info-md-rendered h3 {
  font-family: var(--font-main);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--char-color, #ffff00);
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #1e1e1e;
}
.info-md-rendered h4 {
  font-family: var(--font-main);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--char-color, #ffff00);
  opacity: 0.8;
  margin: 6px 0 4px;
}
.info-md-rendered h5 {
  font-family: var(--font-main);
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--char-color, #ffff00);
  opacity: 0.6;
  margin: 4px 0 3px;
}
.info-md-rendered p { margin: 0 0 5px; }
.info-md-rendered ul {
  margin: 0 0 5px;
  padding-left: 0;
  list-style: none;
}
.info-md-rendered li { margin-bottom: 3px; padding-left: 12px; position: relative; }
.info-md-rendered li::before {
  content: '▸';
  color: var(--char-color, #ffff00);
  opacity: 0.6;
  position: absolute;
  left: 0;
}
.info-md-rendered blockquote {
  border-left: 2px solid var(--char-color, #ffff00);
  opacity: 0.55;
  padding-left: 8px;
  margin: 4px 0;
  font-style: italic;
}
.info-md-rendered strong { color: var(--fg); font-weight: normal; }
.info-md-rendered em { color: #999; font-style: italic; }
.info-md-rendered del { opacity: 0.4; text-decoration: line-through; }
.info-md-rendered code {
  background: #111;
  padding: 1px 5px;
  font-size: 7px;
  color: var(--char-color, #ffff00);
  opacity: 0.85;
  font-family: var(--font-main);
}
.info-md-rendered hr {
  border: none;
  border-top: 1px solid #1e1e1e;
  margin: 8px 0;
}

.info-md-btn {
  font-family: var(--font-main);
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--char-color, #ffff00);
  opacity: 0.35;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 0 0;
  display: block;
  transition: opacity 0.15s;
}
.info-md-btn:hover { opacity: 0.9; }

/* Media / link rows */
.info-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.info-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.info-link-title {
  font-family: var(--font-main);
  font-size: 9px;
  letter-spacing: 1px;
  color: #ccc;
  background: transparent;
  border: none;
  border-bottom: 1px solid #1e1e1e;
  flex: 1 1 100%;
  min-width: 0;
  padding: 4px 0 6px;
  outline: none;
  transition: color 0.15s, border-color 0.2s;
}
.info-link-title:focus {
  color: var(--fg);
  border-bottom-color: var(--char-color, #ffff00);
}
.info-link-title::placeholder { color: #252525; }

.info-link-platform {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-link-url {
  font-family: var(--font-main);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #777;
  background: transparent;
  border: none;
  border-bottom: 1px solid #181818;
  flex: 2 1 120px;
  min-width: 0;
  padding: 4px 0 5px;
  outline: none;
  transition: color 0.15s, border-color 0.2s;
}
.info-link-url:focus {
  color: var(--fg);
  border-bottom-color: var(--char-color, #ffff00);
}
.info-link-url::placeholder { color: #1c1c1c; }

.info-link-note {
  font-family: var(--font-main);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #555;
  background: transparent;
  border: none;
  border-bottom: 1px solid #141414;
  flex: 1 1 80px;
  min-width: 0;
  padding: 4px 0 5px;
  outline: none;
  transition: color 0.15s, border-color 0.2s;
}
.info-link-note:focus {
  color: #999;
  border-bottom-color: var(--char-color, #ffff00);
}
.info-link-note::placeholder { color: #1c1c1c; }

.info-link-open {
  font-family: var(--font-main);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--char-color, #ffff00);
  opacity: 0.55;
  text-decoration: none;
  border: 1px solid #1e1e1e;
  padding: 3px 6px;
  flex-shrink: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.info-link-open:hover { opacity: 1; }

.info-link-remove {
  font-family: var(--font-main);
  font-size: 11px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: #2a2a2a;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color 0.15s;
}
.info-link-remove:hover { color: #ff4444; }

.info-link-entry {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.info-link-play {
  font-family: var(--font-main);
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--char-color, #ffff00);
  background: transparent;
  border: 1px solid #2a2a2a;
  padding: 3px 7px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.info-link-play:hover {
  background: var(--char-color, #ffff00);
  color: #000;
  border-color: var(--char-color, #ffff00);
}

.info-link-player {
  margin-top: 8px;
  overflow: hidden;
}
.info-link-player iframe {
  display: block;
  width: 100%;
  max-width: 340px;
  height: 191px; /* 16:9 of 340px */
  border: none;
}

.info-add-link-btn {
  font-family: var(--font-main);
  font-size: 7px;
  letter-spacing: 2px;
  color: var(--char-color, #ffff00);
  opacity: 0.35;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 0 0;
  display: block;
  transition: opacity 0.15s;
}
.info-add-link-btn:hover { opacity: 0.9; }

/* HEXXED — slow void pulse + drifting wisp + chromatic glitch */
.trait-chip.rar-hexxed,
.codex-entry.rar-hexxed {
  --c-fg: var(--rar-hexxed-fg);
  --c-bg: var(--rar-hexxed-bg);
  --c-border: var(--rar-hexxed-border);
  --c-glow: rgba(196,106,255,0.85);
  background: linear-gradient(135deg, #1c0036 0%, #000000 35%, #2c0050 60%, #000000 100%);
  background-size: 300% 300%;
  animation: hexxed-pulse 6s ease-in-out infinite;
  border-color: #6600cc;
  color: #d8a3ff;
}
.trait-chip.rar-hexxed .trait-chip-name,
.codex-entry.rar-hexxed .codex-entry-name {
  color: #e6c2ff;
  text-shadow: 0 0 6px rgba(84,0,160,0.8), 0 0 14px rgba(160,64,255,0.6);
  animation: hexxed-glitch 5s ease-in-out infinite;
}
.trait-chip.rar-hexxed .trait-chip-desc,
.codex-entry.rar-hexxed .codex-entry-desc {
  color: #c8a0ff;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}
@keyframes hexxed-pulse {
  0%,100% { background-position: 0% 0%;     box-shadow: 0 0 14px rgba(100,0,180,0.5),  inset 0 0 18px rgba(30,0,70,0.95); }
  50%     { background-position: 100% 100%; box-shadow: 0 0 36px rgba(160,0,255,0.82), inset 0 0 30px rgba(55,0,110,1);   }
}
@keyframes hexxed-glitch {
  0%, 87%, 100% { text-shadow: 0 0 6px rgba(84,0,160,0.8), 0 0 14px rgba(160,64,255,0.6); }
  88%  { text-shadow: -2px 0 rgba(210,0,80,0.55), 2px 0 rgba(0,180,210,0.55), 0 0 14px #a040ff; }
  89%  { text-shadow:  2px 0 rgba(210,0,80,0.55), -2px 0 rgba(0,180,210,0.55), 0 0 14px #a040ff; }
  90%  { text-shadow: 0 0 6px rgba(84,0,160,0.8), 0 0 14px rgba(160,64,255,0.6); }
}
.trait-chip.rar-hexxed::before,
.codex-entry.rar-hexxed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(130,0,210,0.14) 42%,
    rgba(180,40,255,0.3) 50%,
    rgba(130,0,210,0.14) 58%,
    transparent 100%);
  pointer-events: none;
  animation: hexxed-wisp 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes hexxed-wisp {
  0%   { transform: translateY(-110%); }
  100% { transform: translateY(210%); }
}

/* SITUATIONAL TRIGGER BUTTONS */
.trait-triggers {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trait-trigger-btn {
  font-family: var(--font-main);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 7px 11px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--c-border, #555);
  color: var(--c-fg, #ccc);
  cursor: none;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trait-trigger-btn:hover {
  background: var(--c-fg, #fff);
  color: #000;
  transform: translateY(-1px);
}
.trait-trigger-btn.on {
  background: var(--c-fg, var(--accent-yellow));
  color: #000;
  box-shadow: 0 0 10px var(--c-glow, #ff0);
}
.trait-trigger-btn.noeffect {
  opacity: 0.55;
  font-style: italic;
}
.trait-text-input {
  font-family: var(--font-main);
  font-size: 7px;
  letter-spacing: 1px;
  padding: 5px 8px;
  background: rgba(0,0,0,0.55);
  border: 1px solid #444;
  color: #ccc;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.trait-text-input::placeholder { color: #444; }
.trait-text-input:focus { border-color: #666; color: #eee; }

/* Perfect Soul picker */
.ps-panel { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; }
.ps-souls-toggle-wrap { width: 100%; margin-bottom: 8px; }
.ps-souls-toggle-btn { width: 100%; text-align: left; margin-bottom: 0 !important; }
.ps-soul-list { width: 100%; margin-top: 6px; padding-bottom: 6px; border-bottom: 1px solid #1e1e1e; }
.ps-soul-row { font-size: 6px; color: #bbb; letter-spacing: 0.5px; margin-bottom: 4px; line-height: 1.5; display: flex; gap: 5px; align-items: center; }
.ps-soul-index { color: #444; min-width: 16px; flex-shrink: 0; }
.ps-soul-name { color: #ccc; flex-shrink: 0; }
.ps-soul-pct { color: #555; flex-shrink: 0; }
.ps-soul-stats { flex: 1; display: flex; gap: 4px; flex-wrap: wrap; }
.ps-soul-stat-hp  { color: #ff6666; }
.ps-soul-stat-atk { color: #ff8844; }
.ps-soul-stat-def { color: #4499ff; }
.ps-soul-stat-mag { color: #bb88ff; }
.ps-soul-stat-spd { color: #66ee88; }
.ps-soul-remove-btn {
  margin-left: auto; flex-shrink: 0;
  background: none; border: none; color: #333;
  font-size: 11px; line-height: 1; padding: 0 2px; cursor: none;
  transition: color 0.1s;
}
.ps-soul-remove-btn:hover { color: #c44; }

.ps-picker-wrap { width: 100%; margin-bottom: 6px; }
.ps-select-btn {
  font-family: var(--font-main); font-size: 7px; letter-spacing: 1px;
  padding: 6px 10px; width: 100%; text-align: left;
  background: rgba(0,0,0,0.55); border: 1px solid #333; color: #777; cursor: none;
}
.ps-select-btn:hover { border-color: #555; color: #bbb; }
.ps-selected-char {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: rgba(0,0,0,0.55);
  border: 1px solid #333; cursor: none;
}
.ps-selected-char:hover { border-color: #555; }
.ps-char-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ps-sel-name { font-family: var(--font-main); font-size: 7px; letter-spacing: 1px; color: #ddd; flex-shrink: 0; }
.ps-sel-stats { font-family: var(--font-main); font-size: 5.5px; color: #484848; flex: 1; letter-spacing: 0; }
.ps-clear-btn {
  background: none; border: none; color: #444; font-size: 11px;
  cursor: none; padding: 0 2px; line-height: 1; margin-left: auto; flex-shrink: 0;
}
.ps-clear-btn:hover { color: #c44; }

.ps-picker-dropdown {
  width: 100%; background: #0c0c0c; border: 1px solid #222; border-top: none;
  display: flex; flex-direction: column; max-height: 200px;
}
.ps-search-input {
  font-family: var(--font-main); font-size: 7px; letter-spacing: 1px;
  padding: 6px 8px; background: #080808; border: none;
  border-bottom: 1px solid #1a1a1a; color: #aaa; outline: none; flex-shrink: 0;
}
.ps-search-input::placeholder { color: #2e2e2e; }
.ps-picker-list { overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.ps-char-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; cursor: none; border-bottom: 1px solid #111;
}
.ps-char-row:hover { background: #161616; }
.ps-char-row.selected { background: #181818; }
.ps-char-name-lbl { font-family: var(--font-main); font-size: 7px; color: #ccc; letter-spacing: 0.5px; flex-shrink: 0; min-width: 70px; }
.ps-char-stats-lbl { font-family: var(--font-main); font-size: 5.5px; color: #3a3a3a; letter-spacing: 0; }
.ps-action-row { display: flex; gap: 5px; flex-wrap: wrap; }
.ps-sanity-bar {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-bottom: 8px;
  padding-bottom: 7px; border-bottom: 1px solid #1a1a1a;
}
.ps-sanity-label { font-family: var(--font-main); font-size: 6px; letter-spacing: 2px; color: #3a3a3a; }
.ps-sanity-val { font-family: var(--font-main); font-size: 9px; letter-spacing: 1px; font-weight: bold; }

/* ============================================================
   TRAIT CODEX MODAL
   ============================================================ */
#trait-codex-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9997;
}
#trait-codex-overlay.open { display: block; }
#trait-codex-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  width: min(1080px, 95vw);
  max-height: 88vh;
  overflow: hidden;
  background: #000;
  border: 3px solid var(--fg);
  flex-direction: column;
  animation: cv-fade-in 0.25s ease;
}
#trait-codex-modal.open { display: flex; }

#trait-codex-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 24px;
  border-bottom: 2px solid #2a2a2a;
  font-size: 11px; letter-spacing: 3px;
  color: var(--accent-yellow);
  background: #080808;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.codex-rarity-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 7px; letter-spacing: 1px;
}
.codex-leg {
  padding: 3px 6px;
  border: 1px solid #333;
}
.codex-leg.rar-common    { color: var(--rar-common-fg);    border-color: var(--rar-common-border); }
.codex-leg.rar-rare      { color: var(--rar-rare-fg);      border-color: var(--rar-rare-border); }
.codex-leg.rar-epic      { color: var(--rar-epic-fg);      border-color: var(--rar-epic-border); }
.codex-leg.rar-legendary { color: var(--rar-legendary-fg); border-color: var(--rar-legendary-border); }
.codex-leg.rar-mythic    { color: var(--rar-mythic-fg);    border-color: var(--rar-mythic-border); }
.codex-leg.rar-hexxed    { color: var(--rar-hexxed-fg);    border-color: var(--rar-hexxed-border); }

#trait-codex-body {
  overflow-y: auto;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 24px;
  flex: 1;
  min-height: 0;
}
.codex-section-title {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #1a1a1a;
}
.codex-rar-tag {
  font-size: 9px;
  letter-spacing: 2px;
  padding: 5px 10px;
  border: 2px solid currentColor;
  background: rgba(0,0,0,0.5);
}
.codex-rar-tag.rar-common    { color: var(--rar-common-fg); }
.codex-rar-tag.rar-rare      { color: var(--rar-rare-fg); }
.codex-rar-tag.rar-epic      { color: var(--rar-epic-fg); }
.codex-rar-tag.rar-legendary { color: var(--rar-legendary-fg); }
.codex-rar-tag.rar-mythic    { color: var(--rar-mythic-fg); }
.codex-rar-tag.rar-hexxed    { color: var(--rar-hexxed-fg); }
.codex-rar-chance {
  font-size: 8px;
  letter-spacing: 1px;
  color: #555;
}
.codex-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.codex-role-sep {
  grid-column: 1 / -1;
  font-size: 7px;
  letter-spacing: 3px;
  color: #3a3a3a;
  padding: 8px 2px 3px;
  border-top: 1px solid #1c1c1c;
  margin-top: 2px;
}
.codex-role-sep:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 2px;
}
.codex-entry {
  position: relative;
  padding: 12px 14px;
  border: 2px solid var(--c-border, #333);
  background: linear-gradient(135deg, var(--c-bg, #111), #000);
  transition: transform 0.18s, box-shadow 0.18s;
  overflow: hidden;
}
.codex-entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 14px var(--c-glow, #fff8);
}
.codex-entry-name {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--c-fg, #fff);
  margin-bottom: 6px;
  text-shadow: 0 0 6px var(--c-glow, transparent);
}
.codex-entry-desc {
  font-size: 8px;
  color: #999;
  letter-spacing: 1px;
  line-height: 1.7;
}

/* ============================================================
   TRAIT ROLL MODAL
   ============================================================ */
#trait-roll-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 10001;
  align-items: center; justify-content: center;
}
#trait-roll-overlay.open { display: flex; }
#trait-roll-stage {
  width: min(960px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 24px;
}
.phase { width: 100%; }

/* SPINNER */
.spinner-title {
  text-align: center;
  font-size: 14px;
  letter-spacing: 5px;
  color: var(--accent-yellow);
  margin-bottom: 28px;
  text-shadow: 0 0 12px rgba(255,255,0,0.5);
  animation: blink 0.9s step-end infinite;
}
#fate-slots {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 28px auto;
  width: 100%;
  max-width: 740px;
}
.fate-slot {
  flex: 1;
  max-width: 220px;
  min-height: 92px;
  border: 2px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0,0,0,0.82);
  position: relative;
  overflow: hidden;
  padding: 14px 10px;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.fate-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.012) 3px, rgba(255,255,255,0.012) 4px);
  pointer-events: none;
}
.fate-slot.locked {
  animation: slot-lock-flash 0.4s ease;
}
@keyframes slot-lock-flash {
  0%   { filter: brightness(2.2); }
  100% { filter: brightness(1); }
}
.fate-slot-rarity {
  font-size: 7px;
  letter-spacing: 3px;
  font-family: var(--font-main);
  opacity: 0.7;
  transition: color 0.14s ease;
}
.fate-slot-name {
  font-size: 8px;
  letter-spacing: 1px;
  font-family: var(--font-main);
  text-align: center;
  line-height: 1.7;
  word-break: break-word;
  transition: color 0.14s ease;
}

/* PITY BAR */
#pity-display {
  width: 100%;
  max-width: 480px;
  margin-bottom: 24px;
  text-align: center;
}
#pity-label {
  font-size: 8px;
  letter-spacing: 3px;
  color: #444;
  margin-bottom: 7px;
}
#pity-count {
  color: #888;
  transition: color 0.4s ease;
}
#pity-track {
  height: 3px;
  background: #0d0d0d;
  border: 1px solid #1a1a1a;
  width: 100%;
  overflow: hidden;
}
#pity-fill {
  height: 100%;
  background: linear-gradient(90deg, #4aa9ff 0%, #c98bff 65%, #ffe14a 100%);
  width: 0%;
  transition: width 0.5s ease;
  will-change: width;
}
#pity-fill.at-max {
  background: linear-gradient(90deg, #ffe14a, #ff8000);
  animation: pity-pulse 0.7s ease-in-out infinite;
}
@keyframes pity-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* HAND */
.hand-title {
  text-align: center;
  font-size: 16px;
  letter-spacing: 6px;
  color: var(--accent-yellow);
  margin-bottom: 6px;
  text-shadow: 0 0 14px rgba(255,255,0,0.7);
}
.hand-sub {
  text-align: center;
  font-size: 9px;
  letter-spacing: 2px;
  color: #777;
  margin-bottom: 24px;
}
.hand-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}
@media (max-width: 760px) {
  .hand-cards { grid-template-columns: 1fr; }
}
.hand-card {
  position: relative;
  padding: 20px 18px;
  min-height: 220px;
  border: 3px solid var(--c-border, #555);
  background: linear-gradient(160deg, var(--c-bg, #111) 0%, #000 100%);
  cursor: none;
  display: flex; flex-direction: column;
  gap: 10px;
  text-align: center;
  transform-origin: bottom center;
  animation: hand-card-deal 0.55s cubic-bezier(0.2,0.8,0.2,1.05) both;
  transition: transform 0.18s cubic-bezier(0.2,0.8,0.2,1.05), box-shadow 0.18s;
  overflow: hidden;
}
@keyframes hand-card-deal {
  from { opacity: 0; transform: translateY(60px) rotate(-6deg) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
.hand-card:hover {
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 0 30px var(--c-glow, #fff), 0 14px 30px rgba(0,0,0,0.7);
  z-index: 2;
}
.hand-card-rarity {
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--c-fg);
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  background: rgba(0,0,0,0.55);
  align-self: center;
}
.hand-card-name {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--c-fg);
  text-shadow: 0 0 10px var(--c-glow, transparent);
}
.hand-card-desc {
  font-size: 8px;
  color: #bbb;
  letter-spacing: 1px;
  line-height: 1.8;
  flex: 1;
}
.hand-card-cta {
  font-size: 8px;
  letter-spacing: 3px;
  color: var(--c-fg);
  padding: 8px;
  border-top: 1px dashed var(--c-border);
  animation: blink 1s step-end infinite;
}
.hand-card.rar-common    { --c-fg: var(--rar-common-fg);    --c-bg: var(--rar-common-bg);    --c-border: var(--rar-common-border);    --c-glow: rgba(192,192,192,0.6); }
.hand-card.rar-rare      { --c-fg: var(--rar-rare-fg);      --c-bg: var(--rar-rare-bg);      --c-border: var(--rar-rare-border);      --c-glow: rgba(74,169,255,0.75); }
.hand-card.rar-epic      { --c-fg: var(--rar-epic-fg);      --c-bg: var(--rar-epic-bg);      --c-border: var(--rar-epic-border);      --c-glow: rgba(201,139,255,0.8); animation: hand-card-deal 0.55s cubic-bezier(0.2,0.8,0.2,1.05) both, epic-pulse 2.2s ease-in-out 0.6s infinite; }
.hand-card.rar-legendary { --c-fg: var(--rar-legendary-fg); --c-bg: var(--rar-legendary-bg); --c-border: var(--rar-legendary-border); --c-glow: rgba(255,225,74,0.85); }
.hand-card.rar-legendary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,252,190,0.65) 50%, transparent 62%);
  animation: legendary-sweep 4s ease-in-out 0.6s infinite;
  pointer-events: none;
}
.hand-card.rar-mythic {
  --c-fg: #1a0500;
  --c-glow: rgba(255,200,80,1);
  --c-border: #ffb830;
  background: linear-gradient(135deg, #ff6a00, #ffc844 50%, #ff6a00 100%);
  background-size: 250% 250%;
  animation: hand-card-deal 0.55s cubic-bezier(0.2,0.8,0.2,1.05) both, mythic-heat 5s ease-in-out 0.6s infinite;
}
.hand-card.rar-mythic .hand-card-name,
.hand-card.rar-mythic .hand-card-rarity,
.hand-card.rar-mythic .hand-card-cta { color: #1a0500; }
.hand-card.rar-mythic .hand-card-desc { color: #2a0800; }
.hand-card.rar-hexxed {
  --c-fg: #e6c2ff;
  --c-glow: rgba(180,80,255,1);
  --c-border: #6600cc;
  background: linear-gradient(135deg, #1c0036 0%, #000 35%, #2c0050 60%, #000 100%);
  background-size: 300% 300%;
  animation: hand-card-deal 0.55s cubic-bezier(0.2,0.8,0.2,1.05) both, hexxed-pulse 6s ease-in-out 0.6s infinite;
}
.hand-card.rar-hexxed .hand-card-name {
  text-shadow: 0 0 8px rgba(84,0,160,0.9), 0 0 18px rgba(160,64,255,0.7);
  animation: hexxed-glitch 5s ease-in-out 1s infinite;
}

/* ============================================================
   DUALITY RARITY — heavenly/hellforged toggle
   ============================================================ */

/* --- Shared chip base --- */
.trait-chip.rar-duality {
  position: relative;
  border-width: 2px;
  border-style: solid;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.codex-entry.rar-duality {
  position: relative;
  border-width: 2px;
  border-style: solid;
}

/* --- HEAVENLY state --- */
.trait-chip.rar-duality.duality-heavenly,
.codex-entry.rar-duality.duality-heavenly {
  --c-fg: #1a3a8a;
  --c-glow: rgba(160,230,255,0.95);
  --c-border: #b8e4ff;
  background: linear-gradient(135deg, #ffffff 0%, #eaf6ff 30%, #f8fdff 70%, #ffffff 100%);
  color: #0d1f5e;
  border-color: rgba(170,230,255,0.9);
  overflow: hidden;
  animation: heavenly-pulse 2.6s ease-in-out infinite;
}
.trait-chip.rar-duality.duality-heavenly .trait-chip-rarity {
  color: #1a55cc;
  letter-spacing: 3px;
  text-shadow: 0 0 14px rgba(80,170,255,0.8), 0 0 30px rgba(60,150,255,0.4);
}
.trait-chip.rar-duality.duality-heavenly .trait-chip-name {
  color: #0a1a6a;
  text-shadow: 0 0 18px rgba(130,210,255,0.9), 0 0 40px rgba(100,190,255,0.5), 0 0 70px rgba(80,170,255,0.2);
}
.trait-chip.rar-duality.duality-heavenly .trait-chip-desc { color: #1a3070; }

/* Aurora sweep — blazing bright */
.trait-chip.rar-duality.duality-heavenly::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 8%,
    rgba(210,245,255,0.6)  26%,
    rgba(255,255,255,0.95) 42%,
    rgba(230,248,255,0.75) 50%,
    rgba(210,245,255,0.6)  64%,
    transparent 82%
  );
  transform: translateX(-145%);
  animation: aurora-sweep 3s ease-in-out infinite;
  pointer-events: none;
}
/* Divine radiance corona */
.trait-chip.rar-duality.duality-heavenly::after {
  content: '';
  position: absolute;
  inset: -3px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(180,230,255,0.6) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 110%, rgba(160,220,255,0.35) 0%, transparent 55%);
  animation: heavenly-radiance 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heavenly-radiance {
  0%,100% { opacity: 0.45; }
  50%     { opacity: 1; }
}
@keyframes aurora-sweep {
  0%   { transform: translateX(-145%); }
  100% { transform: translateX(245%); }
}
@keyframes heavenly-pulse {
  0%,100% {
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.98),
      0 0 0 3px rgba(150,220,255,0.65),
      0 0 22px rgba(130,210,255,0.5),
      0 0 55px rgba(110,200,255,0.25),
      0 0 90px rgba(100,190,255,0.1);
  }
  50% {
    box-shadow:
      0 0 0 2px #fff,
      0 0 0 7px rgba(190,240,255,0.98),
      0 0 45px rgba(160,230,255,0.8),
      0 0 100px rgba(140,220,255,0.5),
      0 0 150px rgba(120,210,255,0.25),
      0 0 200px rgba(100,200,255,0.1);
  }
}

/* Heavenly hover — blinding divine burst */
.trait-chip.rar-duality.duality-heavenly:hover {
  transform: translateY(-5px) scale(1.015);
  filter: brightness(1.1);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 8px rgba(210,248,255,0.99),
    0 0 55px rgba(180,240,255,0.9),
    0 0 120px rgba(160,230,255,0.65),
    0 0 180px rgba(140,220,255,0.4),
    0 0 240px rgba(120,210,255,0.2) !important;
}
.trait-chip.rar-duality.duality-heavenly:hover::before {
  animation-duration: 0.85s;
}

/* --- HELLFORGED state --- */
.trait-chip.rar-duality.duality-hellforged,
.codex-entry.rar-duality.duality-hellforged {
  --c-fg: #ffd04a;
  --c-glow: rgba(230,50,0,0.98);
  --c-border: #8a1800;
  background: linear-gradient(135deg, #090000 0%, #110000 40%, #090000 70%, #050000 100%);
  color: #ffd04a;
  border-color: #7e1200;
  border-top-color: #ffd04a;
  border-top-width: 2px;
  overflow: hidden;
  animation: hellforged-pulse 1.9s ease-in-out infinite;
}
.trait-chip.rar-duality.duality-hellforged .trait-chip-rarity {
  color: #e02200;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(255,50,0,0.85), 0 0 28px rgba(255,30,0,0.4);
}
.trait-chip.rar-duality.duality-hellforged .trait-chip-name {
  color: #ffd04a;
  text-shadow: 0 0 16px rgba(255,190,0,0.8), 0 0 35px rgba(255,100,0,0.4), 0 0 60px rgba(255,60,0,0.15);
}
.trait-chip.rar-duality.duality-hellforged .trait-chip-desc { color: #cc9930; }

/* Inferno ember at bottom */
.trait-chip.rar-duality.duality-hellforged::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 65%;
  background: linear-gradient(to top,
    rgba(230,70,0,0.5),
    rgba(200,35,0,0.28),
    rgba(170,10,0,0.12),
    transparent
  );
  pointer-events: none;
  animation: ember-flicker 1.3s ease-in-out infinite;
}
/* Heat haze at top */
.trait-chip.rar-duality.duality-hellforged::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(to bottom, rgba(255,160,0,0.1), rgba(255,80,0,0.04), transparent);
  pointer-events: none;
  animation: ember-flicker 2s ease-in-out 0.5s infinite;
}
@keyframes ember-flicker {
  0%,100% { opacity: 0.5; transform: scaleY(1); }
  22%     { opacity: 1;   transform: scaleY(1.4); }
  55%     { opacity: 0.3; transform: scaleY(0.82); }
  78%     { opacity: 0.9; transform: scaleY(1.25); }
}
@keyframes hellforged-pulse {
  0%,100% {
    box-shadow:
      inset 0 0 18px rgba(200,0,0,0.22),
      0 0 0 1px #1e0000,
      0 0 0 4px rgba(205,25,0,0.7),
      0 0 22px rgba(200,20,0,0.45),
      0 0 55px rgba(230,60,0,0.22),
      0 0 90px rgba(255,90,0,0.08);
  }
  50% {
    box-shadow:
      inset 0 0 35px rgba(255,0,0,0.38),
      0 0 0 2px #2e0000,
      0 0 0 7px rgba(255,40,0,0.98),
      0 0 42px rgba(245,40,0,0.72),
      0 0 95px rgba(255,90,0,0.42),
      0 0 150px rgba(255,130,0,0.18);
  }
}

/* Hellforged hover — inferno erupts */
.trait-chip.rar-duality.duality-hellforged:hover {
  filter: brightness(1.18) saturate(1.25);
  box-shadow:
    inset 0 0 45px rgba(255,0,0,0.45),
    0 0 0 2px #380000,
    0 0 0 8px rgba(255,45,0,0.99),
    0 0 55px rgba(255,45,0,0.82),
    0 0 120px rgba(255,90,0,0.55),
    0 0 180px rgba(255,130,0,0.28),
    0 0 240px rgba(255,160,0,0.1) !important;
  animation: hellforged-shake 0.28s ease-in-out infinite, hellforged-pulse 1.9s ease-in-out infinite;
}
@keyframes hellforged-shake {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-0.5px); }
}

/* Toggle button */
.duality-toggle-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 2px;
}
.duality-toggle {
  background: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 24px; height: 24px;
  font-size: 14px;
  line-height: 1;
  cursor: none;
  opacity: 0.55;
  transition: opacity 0.2s, transform 0.4s ease;
  font-family: inherit;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.duality-toggle:hover { opacity: 1; transform: rotate(180deg); }

/* Toggle transition animations */
@keyframes holy-burn {
  0%   { filter: brightness(1); }
  18%  { filter: brightness(6) saturate(0.1); }
  42%  { filter: brightness(3) sepia(1) saturate(4); }
  100% { filter: brightness(1); }
}
@keyframes hellfire-rise {
  0%   { filter: brightness(1); }
  18%  { filter: brightness(0.25) sepia(1) saturate(6); }
  50%  { filter: brightness(3.5) saturate(0.15); }
  100% { filter: brightness(1); }
}
.duality-to-hell    { animation: holy-burn    0.5s ease-out forwards !important; }
.duality-to-heaven  { animation: hellfire-rise 0.5s ease-out forwards !important; }

/* --- Hand cards for duality --- */
.hand-card.rar-duality {
  background: linear-gradient(110deg, #e0eeff 0%, #c8e0ff 40%, #100000 60%, #0a0000 100%);
  border: 2px solid rgba(140,200,255,0.5);
  animation: hand-card-deal 0.55s cubic-bezier(0.2,0.8,0.2,1.05) both, duality-hand-shift 3s ease-in-out 0.6s infinite;
}
.hand-card.rar-duality .hand-card-rarity { color: #6699cc; }
.hand-card.rar-duality .hand-card-name   { color: #1a2a5a; }
.hand-card.rar-duality .hand-card-desc   { color: #3a3a6a; }
@keyframes duality-hand-shift {
  0%,100% { box-shadow: -4px 0 14px rgba(120,190,255,0.55), 4px 0 14px rgba(190,20,0,0.45), 0 0 0 2px rgba(120,190,255,0.3); }
  50%     { box-shadow: -4px 0 20px rgba(155,215,255,0.8),  4px 0 20px rgba(220,35,0,0.65), 0 0 0 2px rgba(255,180,0,0.35); }
}

/* --- Codex legend / tag for duality --- */
.codex-rar-tag.rar-duality { color: #88c8ff; }
.codex-leg.rar-duality     { color: #88c8ff; border-color: #88c8ff; }

/* ============================================================
   DETERMINED RARITY — heartbeat evolving trait
   ============================================================ */

/* Base determined chip */
.trait-chip.rar-determined,
.codex-entry.rar-determined {
  --c-fg: #ff3333;
  --c-glow: rgba(215,0,0,0.9);
  --c-border: #990000;
  position: relative;
  background: linear-gradient(135deg, #040000 0%, #090000 60%, #050000 100%);
  color: #ff3333;
  border-color: #880000;
  overflow: hidden;
  animation: det-heartbeat 2.4s ease-in-out infinite;
}
.trait-chip.rar-determined .trait-chip-rarity {
  color: #cc0000;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(210,0,0,0.8), 0 0 25px rgba(190,0,0,0.4);
}
.trait-chip.rar-determined .trait-chip-name {
  color: #ff4444;
  text-shadow: 0 0 14px rgba(245,0,0,0.8), 0 0 30px rgba(220,0,0,0.45), 0 0 55px rgba(200,0,0,0.18);
}
.trait-chip.rar-determined .trait-chip-desc { color: #cc3333; }

/* Pulsing soul radiance */
.trait-chip.rar-determined::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(190,0,0,0.25) 0%, transparent 68%);
  animation: det-soul-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes det-soul-pulse {
  0%,100% { opacity: 0.45; transform: scale(0.94); }
  15%     { opacity: 1;    transform: scale(1.06); }
  30%     { opacity: 0.55; transform: scale(0.97); }
  45%     { opacity: 0.9;  transform: scale(1.03); }
}

@keyframes det-heartbeat {
  0%,100% {
    box-shadow:
      inset 0 0 18px rgba(170,0,0,0.28),
      0 0 0 2px #1a0000,
      0 0 0 4px rgba(205,0,0,0.48),
      0 0 20px rgba(205,0,0,0.35),
      0 0 50px rgba(185,0,0,0.15);
  }
  15% {
    box-shadow:
      inset 0 0 38px rgba(235,0,0,0.55),
      0 0 0 3px #2c0000,
      0 0 0 8px rgba(250,0,0,0.98),
      0 0 40px rgba(250,0,0,0.72),
      0 0 90px rgba(230,0,0,0.42),
      0 0 140px rgba(210,0,0,0.15);
  }
  30% {
    box-shadow:
      inset 0 0 22px rgba(185,0,0,0.33),
      0 0 0 2px #200000,
      0 0 0 5px rgba(215,0,0,0.58),
      0 0 25px rgba(215,0,0,0.42),
      0 0 60px rgba(195,0,0,0.18);
  }
  45% {
    box-shadow:
      inset 0 0 32px rgba(215,0,0,0.45),
      0 0 0 2px #260000,
      0 0 0 7px rgba(240,0,0,0.88),
      0 0 32px rgba(238,0,0,0.58),
      0 0 78px rgba(218,0,0,0.28);
  }
}
.trait-chip.rar-determined:hover {
  animation: det-heartbeat-fast 1.1s ease-in-out infinite !important;
}
@keyframes det-heartbeat-fast {
  0%,100% {
    box-shadow:
      inset 0 0 25px rgba(200,0,0,0.38),
      0 0 0 2px #240000,
      0 0 0 6px rgba(235,0,0,0.68),
      0 0 30px rgba(232,0,0,0.52),
      0 0 70px rgba(215,0,0,0.25);
  }
  50% {
    box-shadow:
      inset 0 0 55px rgba(255,0,0,0.65),
      0 0 0 3px #400000,
      0 0 0 11px rgba(255,0,0,0.99),
      0 0 60px rgba(255,0,0,0.82),
      0 0 130px rgba(245,0,0,0.52),
      0 0 200px rgba(230,0,0,0.22);
  }
}

/* HATRED evolution — absolute terror */
.trait-chip.rar-determined.det-hatred {
  background: linear-gradient(135deg, #030000 0%, #060000 50%, #030000 100%);
  border-color: #ff0000;
  color: #ff0000;
  overflow: hidden;
  animation: hatred-pulse 1.6s ease-in-out infinite;
}
.trait-chip.rar-determined.det-hatred .trait-chip-rarity {
  color: #ff0000;
  letter-spacing: 4px;
  text-shadow: 0 0 14px rgba(255,0,0,0.95), 0 0 30px rgba(255,0,0,0.6), 0 0 55px rgba(255,0,0,0.25);
  animation: hatred-flicker 1.6s ease-in-out infinite;
}
.trait-chip.rar-determined.det-hatred .trait-chip-name {
  color: #ff1111;
  text-shadow: 0 0 18px rgba(255,0,0,0.98), 0 0 40px rgba(255,0,0,0.65), 0 0 75px rgba(255,0,0,0.28);
  animation: hatred-flicker 1.6s ease-in-out infinite;
}
.trait-chip.rar-determined.det-hatred .trait-chip-desc { color: #cc0000; }
.trait-chip.rar-determined.det-hatred::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255,0,0,0.2) 0%, transparent 65%);
  animation: det-soul-pulse 1.6s ease-in-out infinite;
}
@keyframes hatred-pulse {
  0%,100% {
    box-shadow:
      inset 0 0 28px rgba(255,0,0,0.38),
      0 0 0 2px #2a0000,
      0 0 0 6px rgba(255,0,0,0.82),
      0 0 32px rgba(255,0,0,0.65),
      0 0 75px rgba(255,0,0,0.38),
      0 0 120px rgba(255,0,0,0.15);
  }
  50% {
    box-shadow:
      inset 0 0 55px rgba(255,0,0,0.65),
      0 0 0 3px #450000,
      0 0 0 11px rgba(255,0,0,1),
      0 0 65px rgba(255,0,0,0.9),
      0 0 140px rgba(255,0,0,0.58),
      0 0 220px rgba(255,0,0,0.22);
  }
}
@keyframes hatred-flicker {
  0%,100% { opacity: 1; }
  44%     { opacity: 0.82; }
  46%     { opacity: 1; }
  91%     { opacity: 0.65; }
  93%     { opacity: 1; }
}
.trait-chip.rar-determined.det-hatred:hover {
  animation: hatred-pulse 0.85s ease-in-out infinite !important;
  filter: brightness(1.45) saturate(1.6);
}

/* MERCYFUL evolution — brilliant rainbow */
.trait-chip.rar-determined.det-mercyful {
  color: #fff;
  border-width: 3px;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
  animation: mercyful-bg 9s ease-in-out infinite, mercyful-border 9s ease-in-out infinite;
}
.trait-chip.rar-determined.det-mercyful::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.22) 0%, transparent 62%);
  animation: mercyful-inner-glow 9s ease-in-out infinite;
}
@keyframes mercyful-inner-glow {
  0%,100% { background: radial-gradient(ellipse at 50% 50%, rgba(255,190,190,0.28) 0%, transparent 62%); }
  25%     { background: radial-gradient(ellipse at 50% 50%, rgba(190,255,230,0.28) 0%, transparent 62%); }
  50%     { background: radial-gradient(ellipse at 50% 50%, rgba(190,225,255,0.28) 0%, transparent 62%); }
  75%     { background: radial-gradient(ellipse at 50% 50%, rgba(225,190,255,0.28) 0%, transparent 62%); }
}
.trait-chip.rar-determined.det-mercyful .trait-chip-rarity { color: #fff; letter-spacing: 2px; text-shadow: 0 1px 2px rgba(0,0,0,0.9); }
.trait-chip.rar-determined.det-mercyful .trait-chip-name   { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.trait-chip.rar-determined.det-mercyful .trait-chip-desc   { color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
@keyframes mercyful-bg {
  0%,100% { background: linear-gradient(135deg, #ff5555, #ff8855); }
  10%     { background: linear-gradient(135deg, #ff7744, #ffbb66); }
  20%     { background: linear-gradient(135deg, #ffcc44, #ffee88); }
  30%     { background: linear-gradient(135deg, #aaff88, #55ffbb); }
  40%     { background: linear-gradient(135deg, #44ffcc, #44ff99); }
  50%     { background: linear-gradient(135deg, #44bbff, #6699ff); }
  60%     { background: linear-gradient(135deg, #8888ff, #bb66ff); }
  70%     { background: linear-gradient(135deg, #cc55ff, #ff66ff); }
  80%     { background: linear-gradient(135deg, #ff66cc, #ff5599); }
  90%     { background: linear-gradient(135deg, #ff5577, #ff6666); }
}
@keyframes mercyful-border {
  0%,100% { border-color: #ff4444; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(255,50,50,0.9),   0 0 50px rgba(255,100,100,0.65), 0 0 100px rgba(255,100,100,0.3); }
  20%     { border-color: #ffcc00; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(255,200,0,0.9),   0 0 50px rgba(255,230,50,0.65),  0 0 100px rgba(255,230,50,0.3); }
  40%     { border-color: #00ee77; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(0,220,110,0.9),   0 0 50px rgba(50,255,150,0.65),  0 0 100px rgba(50,255,150,0.3); }
  50%     { border-color: #22aaff; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(30,160,255,0.9),  0 0 50px rgba(100,200,255,0.65), 0 0 100px rgba(100,200,255,0.3); }
  70%     { border-color: #cc33ff; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(200,50,255,0.9),  0 0 50px rgba(215,100,255,0.65), 0 0 100px rgba(215,100,255,0.3); }
  85%     { border-color: #ff33aa; box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(255,50,170,0.9),  0 0 50px rgba(255,100,200,0.65), 0 0 100px rgba(255,100,200,0.3); }
}
.trait-chip.rar-determined.det-mercyful:hover {
  animation: mercyful-bg 4.5s ease-in-out infinite, mercyful-border 4.5s ease-in-out infinite !important;
  filter: brightness(1.2) saturate(1.1);
}

/* Determination state-toggle buttons */
.det-state-btns {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.det-state-btn {
  font-size: 7px !important;
  padding: 3px 8px !important;
  letter-spacing: 0.5px;
  opacity: 0.45;
  border-color: #551111 !important;
  color: #883333 !important;
  line-height: 1.2 !important;
  transition: opacity 0.15s, filter 0.15s, color 0.15s, border-color 0.15s;
}
.det-state-btn::after { display: none; }
.det-state-btn:hover { opacity: 0.75; }
.det-state-btn.det-state-active {
  opacity: 1 !important;
  color: #ff4444 !important;
  border-color: #cc0000 !important;
  text-shadow: 0 0 8px rgba(255,0,0,0.7);
  filter: brightness(1.2);
}

/* Determination counters */
.det-counters {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,50,50,0.3);
}
.det-counter {
  display: flex;
  align-items: center;
  gap: 5px;
}
.det-label {
  font-size: 7px;
  letter-spacing: 1px;
  flex: 1;
  color: inherit;
  opacity: 0.85;
}
.det-btn {
  padding: 2px 6px !important;
  font-size: 10px !important;
  min-width: 22px;
  line-height: 1 !important;
}

/* Hand card for determined */
.hand-card.rar-determined {
  --c-fg: #ff3333;
  --c-glow: rgba(220,0,0,0.9);
  --c-border: #aa0000;
  background: linear-gradient(135deg, #060000 0%, #0c0000 100%);
  animation: hand-card-deal 0.55s cubic-bezier(0.2,0.8,0.2,1.05) both, det-heartbeat 2.4s ease-in-out 0.6s infinite;
}
.hand-card.rar-determined .hand-card-name   { color: #ff4444; text-shadow: 0 0 8px rgba(220,0,0,0.6); }
.hand-card.rar-determined .hand-card-rarity { color: #cc0000; }
.hand-card.rar-determined .hand-card-desc   { color: #cc3333; }

/* Codex legend / tag for determined */
.codex-rar-tag.rar-determined { color: #ff3333; }
.codex-leg.rar-determined     { color: #ff3333; border-color: #aa0000; }

/* ============================================================
   DUALITY CODEX — glitching split title + dual entries
   ============================================================ */

/* Legend bar pills */
.duality-leg-pill { border-color: #446688; }

/* Glitching pill — same chromatic aberration as codex title */
.du-pill-glitch {
  position: relative;
  color: transparent;
  display: inline-block;
}
.du-pill-glitch::before {
  content: attr(data-h);
  position: absolute;
  left: 0; top: 0;
  color: #88c8ff;
  white-space: nowrap;
  animation: du-tag-h 3.8s linear infinite;
}
.du-pill-glitch::after {
  content: attr(data-hf);
  position: absolute;
  left: 0; top: 0;
  color: #ffd04a;
  white-space: nowrap;
  animation: du-tag-hf 3.8s linear infinite;
}
.det-leg-pill {
  color: #ff3333;
  border-color: #880000;
  animation: det-pill-pulse 2.4s ease-in-out infinite;
}
@keyframes det-pill-pulse {
  0%,100% { color: #cc2222; border-color: #660000; text-shadow: none; }
  15%     { color: #ff3333; border-color: #cc0000; text-shadow: 0 0 6px rgba(255,0,0,0.7); }
  45%     { color: #ee2222; border-color: #990000; text-shadow: 0 0 4px rgba(230,0,0,0.5); }
}

/* Glitching split title in codex body — chromatic aberration snap */
.duality-split-tag {
  position: relative;
  color: transparent;
  display: inline-block;
}
.duality-split-tag::before {
  content: attr(data-h);
  position: absolute;
  left: 0; top: 0;
  color: #88c8ff;
  white-space: nowrap;
  animation: du-tag-h 3.8s linear infinite;
}
.duality-split-tag::after {
  content: attr(data-hf);
  position: absolute;
  left: 0; top: 0;
  color: #ffd04a;
  white-space: nowrap;
  animation: du-tag-hf 3.8s linear infinite;
}
@keyframes du-tag-h {
  /* HEAVENLY visible */
  0%,36%  { opacity: 1; text-shadow: 0 0 10px rgba(100,200,255,0.85); transform: translate(0,0); }
  /* Chromatic aberration pre-switch */
  38%     { opacity: 1; text-shadow: -4px 0 rgba(255,0,80,0.85), 4px 0 rgba(0,255,220,0.85); transform: translate(2px,0); }
  39%     { opacity: 0.6; text-shadow: -6px 0 rgba(255,0,80,0.9), 6px 0 rgba(0,255,220,0.9); transform: translate(-3px,0); }
  /* Hard snap off */
  39.5%,89% { opacity: 0; text-shadow: none; transform: translate(0,0); }
  /* Chromatic aberration pre-reappear */
  90%     { opacity: 0.5; text-shadow: 5px 0 rgba(255,0,80,0.85), -5px 0 rgba(0,255,220,0.85); transform: translate(-2px,0); }
  91%     { opacity: 1; text-shadow: -3px 0 rgba(255,0,80,0.7), 3px 0 rgba(0,255,220,0.7); transform: translate(1px,0); }
  /* Hard snap on */
  92%,100% { opacity: 1; text-shadow: 0 0 10px rgba(100,200,255,0.85); transform: translate(0,0); }
}
@keyframes du-tag-hf {
  /* HEAVENLY visible — hidden */
  0%,37.5% { opacity: 0; text-shadow: none; transform: translate(0,0); }
  /* Chromatic aberration snap in */
  38.5%   { opacity: 0.5; text-shadow: 5px 0 rgba(255,0,80,0.85), -5px 0 rgba(0,255,220,0.85); transform: translate(3px,0); }
  39.5%   { opacity: 1; text-shadow: -2px 0 rgba(255,0,80,0.65), 2px 0 rgba(0,255,220,0.65); transform: translate(-1px,0); }
  /* HELLFORGED visible */
  41%,87% { opacity: 1; text-shadow: 0 0 12px rgba(255,180,0,0.9); transform: translate(0,0); }
  /* Chromatic aberration snap out */
  88.5%   { opacity: 1; text-shadow: 4px 0 rgba(255,0,80,0.85), -4px 0 rgba(0,255,220,0.85); transform: translate(2px,0); }
  89.5%   { opacity: 0.5; text-shadow: -5px 0 rgba(255,0,80,0.9), 5px 0 rgba(0,255,220,0.9); transform: translate(-3px,0); }
  /* Hard snap off */
  90%,100% { opacity: 0; text-shadow: none; transform: translate(0,0); }
}

/* Duality codex entry — split heavenly/hellforged layout */
.codex-duality-entry {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 0;
  padding: 0 !important;
  overflow: hidden;
}
.codex-duality-side {
  flex: 1;
  padding: 10px 12px;
}
.heavenly-side  { background: linear-gradient(135deg, #dceeff 0%, #eef4ff 100%); }
.hellforged-side { background: linear-gradient(135deg, #0c0000 0%, #150000 100%); }
.codex-duality-label {
  font-size: 7px;
  letter-spacing: 2px;
  margin-bottom: 5px;
  opacity: 0.75;
}
.heavenly-side  .codex-duality-label { color: #5588bb; }
.hellforged-side .codex-duality-label { color: #aa4400; }
.codex-duality-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  font-size: 15px;
  background: linear-gradient(180deg, #3a70b0 0%, #aa4a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  flex-shrink: 0;
  animation: duality-divider-spin 6s ease-in-out infinite;
}
@keyframes duality-divider-spin {
  0%,100% { transform: rotate(0deg); opacity: 0.6; }
  50%     { transform: rotate(360deg); opacity: 1; }
}

/* ============================================================
   DETERMINED CODEX — heartbeat section
   ============================================================ */
.det-codex-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: det-section-beat 2.4s ease-in-out infinite;
}
/* Blood-red scanline overlay — behind content via negative z-index */
.det-codex-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(200,0,0,0.03) 3px,
    rgba(200,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: -1;
}
/* Pulsing inner soul radiance — behind content */
.det-codex-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(190,0,0,0.18) 0%, transparent 68%);
  pointer-events: none;
  z-index: -2;
  animation: det-soul-pulse 2.4s ease-in-out infinite;
}
@keyframes det-section-beat {
  0%,100% {
    box-shadow: inset 0 0 30px rgba(100,0,0,0.28), inset 0 0 70px rgba(80,0,0,0.12);
    border-color: #330000;
  }
  15% {
    box-shadow: inset 0 0 65px rgba(230,0,0,0.58), inset 0 0 130px rgba(200,0,0,0.28);
    border-color: #cc0000;
  }
  30% {
    box-shadow: inset 0 0 38px rgba(140,0,0,0.33), inset 0 0 80px rgba(110,0,0,0.15);
    border-color: #440000;
  }
  45% {
    box-shadow: inset 0 0 55px rgba(200,0,0,0.48), inset 0 0 110px rgba(170,0,0,0.22);
    border-color: #aa0000;
  }
}
.det-codex-section .codex-section-title {
  border-bottom-color: #440000 !important;
}
.det-codex-tag {
  color: #ff3333 !important;
  animation: det-label-beat 2.4s ease-in-out infinite;
}
@keyframes det-label-beat {
  0%,100% { text-shadow: 0 0 6px rgba(170,0,0,0.35); }
  15%     { text-shadow: 0 0 20px rgba(255,0,0,0.99), 0 0 45px rgba(255,0,0,0.55), 0 0 80px rgba(220,0,0,0.22); }
  45%     { text-shadow: 0 0 14px rgba(228,0,0,0.82), 0 0 32px rgba(210,0,0,0.42); }
}
.det-codex-entry {
  background: rgba(4,0,0,0.92) !important;
  border-color: #440000 !important;
}
.det-codex-entry .codex-entry-name {
  color: #ff4444 !important;
  text-shadow: 0 0 12px rgba(235,0,0,0.72), 0 0 25px rgba(215,0,0,0.35);
}
.det-codex-entry .codex-entry-desc { color: #993333 !important; }

/* Evolution paths */
.det-codex-paths {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(170,0,0,0.38);
  flex-wrap: wrap;
}
.det-codex-path {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 7px;
  letter-spacing: 1px;
  padding: 7px 13px;
  border: 1px solid;
}
.hatred-path {
  border-color: #dd0000;
  background: rgba(14,0,0,0.97);
  animation: hatred-path-beat 1.6s ease-in-out infinite;
}
@keyframes hatred-path-beat {
  0%,100% { box-shadow: inset 0 0 12px rgba(190,0,0,0.22), 0 0 10px rgba(210,0,0,0.35); }
  50%     { box-shadow: inset 0 0 28px rgba(255,0,0,0.48), 0 0 28px rgba(255,0,0,0.65); }
}
.mercyful-path {
  border-color: #cc44aa;
  background: rgba(8,0,8,0.97);
  animation: mercyful-path-glow 9s linear infinite;
}
@keyframes mercyful-path-glow {
  0%   { box-shadow: 0 0 16px rgba(255,100,100,0.55); }
  33%  { box-shadow: 0 0 16px rgba(100,255,160,0.55); }
  66%  { box-shadow: 0 0 16px rgba(160,100,255,0.55); }
  100% { box-shadow: 0 0 16px rgba(255,100,100,0.55); }
}
.det-path-label { color: #664444; }
.det-path-arrow { color: #ff4444; font-size: 9px; }
.hatred-name {
  color: #ff0000;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(255,0,0,0.95), 0 0 28px rgba(255,0,0,0.6), 0 0 50px rgba(255,0,0,0.25);
  animation: hatred-pulse 1.6s ease-in-out infinite;
}
.mercyful-name {
  letter-spacing: 2px;
  animation: mercyful-name-color 9s linear infinite;
}
@keyframes mercyful-name-color {
  0%   { color: #ff6666; text-shadow: 0 0 10px rgba(255,100,100,0.85); }
  16%  { color: #ffcc44; text-shadow: 0 0 10px rgba(255,210,50,0.85);  }
  33%  { color: #55ff99; text-shadow: 0 0 10px rgba(100,255,160,0.85); }
  50%  { color: #55ccff; text-shadow: 0 0 10px rgba(100,210,255,0.85); }
  66%  { color: #cc77ff; text-shadow: 0 0 10px rgba(210,110,255,0.85); }
  83%  { color: #ff77cc; text-shadow: 0 0 10px rgba(255,110,210,0.85); }
  100% { color: #ff6666; text-shadow: 0 0 10px rgba(255,100,100,0.85); }
}
.det-codex-empty {
  font-size: 8px;
  color: #553333;
  padding: 10px;
  animation: det-label-beat 2.4s ease-in-out infinite;
}

.hand-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
}

/* ============================================================
   CULTIVATION MODAL
   ============================================================ */
#cultivation-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9997;
}
#cultivation-overlay.open { display: block; }
#cultivation-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  width: min(760px, 95vw);
  max-height: 88vh;
  background: #000;
  border: 3px solid var(--accent-cyan);
  flex-direction: column;
  animation: cv-fade-in 0.25s ease;
  box-shadow: 0 0 30px rgba(0,255,255,0.25);
}
#cultivation-modal.open { display: flex; }

#cultivation-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 2px solid #1a3a3a;
  font-size: 11px; letter-spacing: 3px;
  color: var(--accent-cyan);
  background: #050a0a;
  flex-shrink: 0;
}
#cultivation-body {
  overflow-y: auto;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.cult-block {
  position: relative;
  border: 2px solid var(--c-border, #444);
  background: linear-gradient(135deg, var(--c-bg, #111), #000);
  padding: 16px;
}
.cult-block.rar-common    { --c-fg: var(--rar-common-fg);    --c-bg: var(--rar-common-bg);    --c-border: var(--rar-common-border); }
.cult-block.rar-rare      { --c-fg: var(--rar-rare-fg);      --c-bg: var(--rar-rare-bg);      --c-border: var(--rar-rare-border); }
.cult-block.rar-epic      { --c-fg: var(--rar-epic-fg);      --c-bg: var(--rar-epic-bg);      --c-border: var(--rar-epic-border); }
.cult-block.rar-legendary { --c-fg: var(--rar-legendary-fg); --c-bg: var(--rar-legendary-bg); --c-border: var(--rar-legendary-border); }
.cult-block.rar-mythic    { --c-fg: var(--rar-mythic-fg);    --c-bg: var(--rar-mythic-bg);    --c-border: var(--rar-mythic-border); }
.cult-block.rar-hexxed    { --c-fg: var(--rar-hexxed-fg);    --c-bg: var(--rar-hexxed-bg);    --c-border: var(--rar-hexxed-border); }
.cult-block-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.cult-tag {
  font-size: 7px;
  letter-spacing: 2px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  background: rgba(0,0,0,0.5);
  color: var(--c-fg);
}
.cult-name {
  font-size: 11px; letter-spacing: 2px; color: var(--c-fg);
  text-shadow: 0 0 6px var(--c-fg);
}
.cult-desc {
  font-size: 8px;
  color: #999;
  letter-spacing: 1px;
  line-height: 1.7;
  margin-bottom: 14px;
}
.cult-controls {
  background: rgba(0,0,0,0.5);
  border: 1px solid #1a1a1a;
  padding: 10px;
}
.cult-stack-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--accent-cyan);
  margin-bottom: 8px;
}
.cult-counter {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.cult-input {
  font-family: var(--font-main);
  font-size: 12px;
  text-align: center;
  background: #000;
  border: 2px solid var(--c-border);
  color: var(--c-fg);
  padding: 6px;
  width: 80px;
}
.cult-input:focus { outline: none; border-color: var(--accent-cyan); }
.cult-slider {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
}
.cult-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--c-fg);
  border: 2px solid #000;
}
.cult-preview {
  margin-top: 12px;
  padding: 10px;
  background: rgba(0,0,0,0.6);
  border: 1px dashed var(--c-border);
}
.cult-preview-title {
  font-size: 7px;
  letter-spacing: 3px;
  color: #888;
  margin-bottom: 8px;
}
.cult-stat-row {
  display: flex; justify-content: space-between;
  font-size: 9px; letter-spacing: 1px;
  padding: 3px 0;
  border-bottom: 1px dotted #1a1a1a;
}

/* ============================================================
   TRAIT TOOLTIP CONTENT (inside #global-tooltip)
   ============================================================ */
#global-tooltip { max-width: 280px; }
#global-tooltip .tt-header {
  font-size: 9px;
  letter-spacing: 2px;
  padding: 4px 7px;
  margin-bottom: 6px;
  border: 1px solid currentColor;
  display: inline-block;
}
#global-tooltip .tt-header.rar-common    { color: var(--rar-common-fg); }
#global-tooltip .tt-header.rar-rare      { color: var(--rar-rare-fg); }
#global-tooltip .tt-header.rar-epic      { color: var(--rar-epic-fg); }
#global-tooltip .tt-header.rar-legendary { color: var(--rar-legendary-fg); }
#global-tooltip .tt-header.rar-mythic    { color: var(--rar-mythic-fg); }
#global-tooltip .tt-header.rar-hexxed    { color: var(--rar-hexxed-fg); }
#global-tooltip .tt-desc {
  font-size: 8px; color: #ddd; letter-spacing: 1px; line-height: 1.7;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a2a2a;
}
#global-tooltip .tt-breakdown { display: flex; flex-direction: column; gap: 2px; }
#global-tooltip .tt-line {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 8px; letter-spacing: 1px;
}
#global-tooltip .tt-stat { color: #aaa; }
#global-tooltip .tt-pos  { color: var(--accent-green); }
#global-tooltip .tt-neg  { color: var(--accent-red); }
#global-tooltip .tt-extra { font-size: 7px; color: var(--accent-yellow); margin-top: 6px; }
#global-tooltip .tt-note  { font-size: 7px; color: #888; font-style: italic; margin-top: 4px; }

/* ============================================================
   GOLD DISPLAY (char header)
   ============================================================ */
#cv-gold-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  font-size: 9px;
  letter-spacing: 2px;
  color: #ffe14a;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s;
  font-family: var(--font-main);
}
#cv-gold-display:hover { opacity: 0.65; }

/* ============================================================
   GOLD / TREASURY MODAL
   ============================================================ */
#gold-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9800;
}
#gold-overlay.open { display: block; }
#gold-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9801;
  width: min(480px, 94vw);
  max-height: 85vh;
  background: #080600;
  border: 2px solid #6a5000;
  flex-direction: column;
  font-family: var(--font-main);
}
#gold-modal.open { display: flex; }
#gold-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #2a1e00;
  font-size: 11px; letter-spacing: 3px;
  color: #ffe14a;
  background: #040300;
  flex-shrink: 0;
}
#gold-modal-body {
  overflow-y: auto;
  padding: 20px;
  display: flex; flex-direction: column; gap: 18px;
  flex: 1;
}
#gold-balance-wrap {
  text-align: center;
  padding: 18px 12px;
  border: 1px solid #2a1e00;
  background: #040300;
}
#gold-balance-label { font-size: 8px; letter-spacing: 3px; color: #666; margin-bottom: 10px; }
#gold-balance-amount {
  font-size: 26px; letter-spacing: 4px; color: #ffe14a;
  text-shadow: 0 0 24px rgba(255,225,74,0.45);
}
#gold-controls { display: flex; flex-direction: column; gap: 10px; }
#gold-action-btns { display: flex; gap: 10px; }
#gold-action-btns .btn { flex: 1; }
#gold-history-label {
  font-size: 8px; letter-spacing: 3px; color: #444;
  padding-bottom: 8px;
  border-bottom: 1px solid #1a1400;
  margin-bottom: 2px;
}
#gold-history-list { display: flex; flex-direction: column; gap: 5px; }
.gold-tx {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 0 10px;
  align-items: center;
  padding: 8px 10px;
  background: #0a0800;
  border: 1px solid #1a1400;
  border-left: 3px solid #2a2a2a;
}
.gold-tx.pos { border-left-color: #00772e; }
.gold-tx.neg { border-left-color: #771100; }
.gold-tx-amount { font-size: 10px; letter-spacing: 1px; font-family: var(--font-main); }
.gold-tx-amount.pos { color: #44ff88; }
.gold-tx-amount.neg { color: #ff5533; }
.gold-tx-note { font-size: 7px; color: #777; letter-spacing: 1px; word-break: break-word; }
.gold-tx-meta { font-size: 7px; color: #3a3020; letter-spacing: 1px; text-align: right; line-height: 1.8; }
.gold-no-history {
  font-size: 8px; color: #2a2a2a; text-align: center;
  padding: 24px; letter-spacing: 2px;
  border: 1px dashed #1a1400;
}

/* ============================================================
   ROLLING CARD STATE
   ============================================================ */
.hand-card.rolling {
  animation: none;
  opacity: 1;
  pointer-events: none;
  cursor: default;
  background: #080808;
  border-color: #222;
  box-shadow: none;
  transform: none !important;
  height: 240px; /* fixed — prevents desc length changes from shifting layout */
}
.hand-card.rolling:hover { transform: none; box-shadow: none; }
.hand-card.rolling .hand-card-rarity { color: #444; }
.hand-card.rolling .hand-card-name   { color: #555; text-shadow: none; }
.hand-card.rolling .hand-card-desc {
  color: #333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.hand-card.rolling .hand-card-cta    { visibility: hidden; }

/* ============================================================
   SETTINGS MODAL
   ============================================================ */

/* ============================================================
   MOBILE ELEMENTS — hidden on desktop
   ============================================================ */
#mobile-topbar  { display: none; }
#mobile-backdrop { display: none; }
#sidebar-footer { display: none; }

/* ============================================================
   MOBILE & TABLET  ≤ 768 px
   ============================================================ */
@media (max-width: 1024px) {

  /* ---- Base ---- */
  body { cursor: auto; }
  #cursor { display: none !important; }

  /* ---- Mobile top bar ---- */
  #mobile-topbar {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    background: #000;
    border-bottom: 2px solid #2a2a2a;
    padding: 0 12px;
    gap: 10px;
    z-index: 600;
    box-sizing: border-box;
  }

  #mobile-menu-btn {
    background: none;
    border: 2px solid #444;
    color: #fff;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    border-radius: 0;
  }

  #mobile-char-name {
    flex: 1;
    font-family: var(--font-main);
    font-size: 7px;
    letter-spacing: 2px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    min-width: 0;
  }

  /* ---- App shell ---- */
  #app { padding-top: 52px; }
  #header { display: none; }
  #main { flex-direction: column; }

  /* ---- Sidebar → slide-in drawer ---- */
  #sidebar {
    position: fixed;
    top: 52px;
    left: -275px;
    width: 275px;
    height: calc(100dvh - 52px);
    z-index: 570;
    transition: left 0.26s cubic-bezier(0.4, 0, 0.2, 1);
    border-right: 2px solid #333;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #000;
    min-width: unset;
    display: flex;
    flex-direction: column;
  }
  body.drawer-open #sidebar { left: 0; }

  /* Backdrop — starts at 275px so it never overlaps the sidebar
     (iOS Safari backdrop-filter eats touch events even behind higher z-index) */
  #mobile-backdrop {
    display: none;
    position: fixed;
    top: 52px; left: 275px; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 565;
  }
  body.drawer-open #mobile-backdrop { display: block; }
  body.drawer-open { overflow: hidden; }

  /* ---- Sidebar footer (utilities link on mobile) ---- */
  #sidebar-footer {
    display: block;
    padding: 10px 12px;
    border-top: 1px solid #2a2a2a;
    flex-shrink: 0;
  }
  #sidebar-footer .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- Char list: push footer down ---- */
  #char-list { flex: 1; }

  /* ---- Char entries: make whole row tappable, hide invisible action buttons ---- */
  .char-entry {
    cursor: pointer;
    touch-action: manipulation;
  }
  /* Disable slide transform — it shifts the element right as you tap, causing misses */
  .char-entry:hover { transform: none; }
  .char-entry-actions { display: none; }

  /* ---- Content area ---- */
  #content {
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Character header ---- */
  .char-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 16px;
    padding: 4px 0;
  }
  .char-name-block { align-items: center; }
  .char-name-display { font-size: 14px; letter-spacing: 2px; }
  .char-header .flex-row { justify-content: center; }

  /* ---- Panels ---- */
  .panel { margin-bottom: 12px; }

  /* ---- Grids: single column ---- */
  .inv-grid    { grid-template-columns: 1fr !important; }
  .traits-grid { grid-template-columns: 1fr !important; }

  /* ---- Buttons: bigger touch targets ---- */
  .btn     { min-height: 38px; }
  .btn.sm  { min-height: 34px; padding: 6px 10px; }

  /* ---- Stat editor rows: let range shrink ---- */
  .flex-row input[type="range"] { min-width: 0; }

  /* ---- Trait roll: cards stack vertically ---- */
  .hand-cards {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
  }
  .hand-card,
  .hand-card.rolling {
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
  }
  #trait-roll-stage { padding: 20px 14px; }
  #pity-display { max-width: 100%; }

  /* ---- Modals: nearly full-width ---- */
  #item-editor-modal,
  #trait-roll-modal,
  #trait-codex-modal,
  #cultivation-modal,
  #power-modal {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 88vh;
    overflow-y: auto;
    box-sizing: border-box;
  }
  /* gold & settings already use min(Xpx, 94vw) — just cap height */
  #gold-modal      { max-height: 88vh; }
  #gold-modal-body { max-height: 52vh; }
  #trait-codex-body { max-height: 62vh; }

  /* ---- Item editor body: single column ---- */
  #item-editor-body { grid-template-columns: 1fr !important; }

  /* ---- Icon picker: denser on narrow screens ---- */
  .icon-picker-grid { grid-template-columns: repeat(6, 1fr) !important; }

  /* ---- Inventory item row ---- */
  .inv-item-header { flex-wrap: wrap; gap: 6px; }

  /* ---- Mod row in item editor ---- */
  .mod-row { flex-wrap: wrap; gap: 6px; }

  /* ---- Tab bar: allow horizontal scroll ---- */
  .tab-bar { overflow-x: auto; gap: 4px; }

  /* ---- Tooltip ---- */
  #global-tooltip {
    max-width: 90vw;
    font-size: 7px;
    word-break: break-word;
  }

  /* ---- Notifs below the top bar ---- */
  /* bottom: auto unsets the desktop bottom:20px — without it #notif spans
     the full screen height as an invisible z-9999 overlay that eats all taps */
  #notif { top: 60px; left: 8px; right: 8px; bottom: auto; }

  /* ---- Utilities page ---- */
  #utilities-page .editor-grid { grid-template-columns: 1fr !important; }
  .stats-panel { min-width: unset !important; }
  .dice-result-wrap { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .stat-checker-row { flex-wrap: wrap; }

  /* ---- Back button on utilities ---- */
  .back-btn { margin-bottom: 16px; }

  /* ---- Settings rows ---- */
  .settings-row { flex-wrap: wrap; gap: 8px; }

  /* ---- Cultivation block ---- */
  .cult-row { flex-wrap: wrap; }

  /* ---- Color wheel: center ---- */
  .color-wheel-wrap { justify-content: center; }

  /* ---- Pattern canvas: make sure it doesn't overflow ---- */
  #pattern-canvas { pointer-events: none; }

  /* ---- Sidebar search ---- */
  #sidebar-search { font-size: 16px; } /* prevent iOS auto-zoom */

  /* ---- Editor tag input ---- */
  #e-tags-input { font-size: 16px; }

  /* ---- Compare modal: stack selectors vertically ---- */
  #compare-modal { width: 96vw; max-width: 96vw; }
  #compare-modal > div:nth-child(2) > div:first-child { flex-direction: column; }

  /* ---- Tier list: larger chips for touch ---- */
  .tier-chip { padding: 6px 7px; }
  .tier-chip-name { font-size: 7px; max-width: 60px; }
  .tier-label { font-size: 16px; width: 40px; }
  .tier-slots, .tier-pool { gap: 8px; padding: 8px; }

  /* ---- Folder actions: always visible on touch ---- */
  .folder-actions { opacity: 1; }

  /* ---- INFO tab ---- */
  .info-name-title { font-size: 14px; padding: 20px 16px 6px; }
  .info-owner-band { padding: 14px 16px 14px; }
  .info-owner-input { font-size: 16px; } /* prevent iOS auto-zoom */
  .info-section-hd { font-size: 10px; padding: 12px 16px 10px; }
  .info-row { padding: 0 16px 14px; gap: 10px 14px; }
  .info-field-group { min-width: 80px; }
  .info-line-input { font-size: 16px; } /* prevent iOS auto-zoom */
  .info-md-group { padding: 0 16px 14px; }
  .info-row-md { flex-direction: column; }
  .info-md-textarea { font-size: 16px; } /* prevent iOS auto-zoom */
  .info-link-title { font-size: 16px; } /* prevent iOS auto-zoom */
  .info-link-url   { font-size: 16px; }
  .info-link-note  { font-size: 16px; }
  .info-link-url   { flex: 1 1 100%; }
  .info-link-note  { flex: 1 1 calc(100% - 60px); }

} /* end @media mobile */

/* ============================================================
   FOLDER STYLES
   ============================================================ */
.folder-group { margin-bottom: 2px; }
.folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 8px;
  letter-spacing: 1px;
  user-select: none;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid #1a1a1a;
  transition: background 0.15s;
}
.folder-header:hover { background: rgba(255,255,255,0.04); }
.folder-toggle { font-size: 7px; color: #555; flex-shrink: 0; }
.folder-name { font-size: 8px; font-weight: bold; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-count { font-size: 7px; color: #444; flex-shrink: 0; }
.folder-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.folder-header:hover .folder-actions { opacity: 1; }
.folder-contents { padding-left: 8px; border-left: 1px solid #1a1a1a; margin-left: 4px; }
.folder-select {
  background: #111;
  color: #555;
  border: 1px solid #222;
  font-size: 7px;
  padding: 1px 2px;
  cursor: pointer;
  max-width: 70px;
}
.folder-select:hover { color: #aaa; border-color: #444; }

/* ============================================================
   DRAG & DROP STATES
   ============================================================ */
.char-entry.dragging { opacity: 0.4; }
.char-entry.drag-over { border-left: 2px solid var(--accent-yellow, #ffff00) !important; background: rgba(255,255,0,0.04); }
.folder-group.folder-drag-over .folder-header { background: rgba(255,255,0,0.08) !important; }
.folder-group.folder-drag-over .folder-contents { background: rgba(255,255,0,0.03); }

/* ============================================================
   SIDEBAR SEARCH
   ============================================================ */
#sidebar-search-wrap { padding: 6px 8px; border-bottom: 1px solid #1a1a1a; }
#sidebar-search { width: 100%; box-sizing: border-box; background: #0a0a0a; border: 1px solid #1e1e1e; color: #aaa; font-family: inherit; font-size: 8px; letter-spacing: 1px; padding: 5px 8px; }
#sidebar-search:focus { outline: none; border-color: #444; color: #fff; }
#sidebar-search::placeholder { color: #2e2e2e; }

/* ============================================================
   CHARACTER TAGS
   ============================================================ */
.char-entry-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.char-entry-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.char-tag { font-size: 6px; letter-spacing: 0.5px; padding: 1px 5px; border: 1px solid #2a2a2a; color: #555; background: rgba(255,255,255,0.02); white-space: nowrap; }
.editor-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 7px; letter-spacing: 0.5px; padding: 2px 6px; border: 1px solid #333; color: #aaa; background: #111; }
.editor-tag-remove { background: none; border: none; color: #555; cursor: pointer; font-size: 9px; padding: 0; line-height: 1; font-family: inherit; }
.editor-tag-remove:hover { color: #ff4444; }

/* ============================================================
   ROLL HISTORY
   ============================================================ */
.history-row { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid #111; font-size: 8px; letter-spacing: 1px; }
.history-row:last-child { border-bottom: none; }
.history-rar { font-size: 7px; min-width: 72px; flex-shrink: 0; }
.history-name { flex: 1; color: #ccc; }
.history-date { font-size: 7px; color: #444; flex-shrink: 0; }

/* ============================================================
   ROLL HISTORY MODAL
   ============================================================ */
#roll-history-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9994; }
#roll-history-overlay.open { display: block; }
#roll-history-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9995; width: 90vw; max-width: 420px; background: #000; border: 2px solid #333; animation: cv-fade-in 0.18s ease; }
#roll-history-modal.open { display: block; }

/* ============================================================
   COMPARE MODAL
   ============================================================ */
#compare-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9994; }
#compare-modal-overlay.open { display: block; }
#compare-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 9995; width: 90vw; max-width: 520px; max-height: 85vh; overflow-y: auto; background: #000; border: 2px solid #333; animation: cv-fade-in 0.18s ease; }
#compare-modal.open { display: block; }
.cmp-names { display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: 1px; padding: 8px 0 12px; border-bottom: 1px solid #1e1e1e; margin-bottom: 8px; }
.cmp-vs { color: #333; font-size: 8px; }
.cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 5px 0; border-bottom: 1px solid #0e0e0e; font-size: 8px; letter-spacing: 1px; gap: 4px; }
.cmp-row:last-child { border-bottom: none; }
.cmp-side-a { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.cmp-side-b { display: flex; align-items: center; justify-content: flex-start; gap: 5px; }
.cmp-center { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.cmp-key { color: #444; font-size: 7px; letter-spacing: 1px; }
.cmp-val { min-width: 32px; text-align: center; color: #666; flex-shrink: 0; }
.cmp-val.cmp-win { color: #4aff9e; font-weight: bold; }
.cmp-val.cmp-lose { color: #555; }
.cmp-bar-wrap { position: relative; width: 60px; height: 5px; background: #1a1a1a; border-radius: 2px; flex-shrink: 0; }
.cmp-bar { position: absolute; top: 0; height: 100%; border-radius: 2px; transition: width 0.2s; }
.cmp-bar-a .cmp-bar { right: 0; }
.cmp-bar-b .cmp-bar { left: 0; }

/* ============================================================
   TIER LIST
   ============================================================ */
.tier-row { display: flex; align-items: stretch; min-height: 56px; border-bottom: 1px solid #111; }
.tier-label { width: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; border-right: 2px solid; letter-spacing: 0; }
.tier-slots { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px; align-items: center; min-height: 52px; transition: background 0.1s; }
.tier-slots.tier-drag-over, .tier-pool.tier-drag-over { background: rgba(255,255,0,0.04); }
/* Tier list tabs */
#tier-list-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid #1a1a1a; margin-bottom: 4px; }
.tl-tab { display: flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 7px; letter-spacing: 1px; cursor: pointer; color: #555; border: 1px solid #222; background: #0a0a0a; transition: color 0.15s, border-color 0.15s; user-select: none; }
.tl-tab:hover { color: #aaa; border-color: #444; }
.tl-tab.active { color: var(--accent-cyan); border-color: var(--accent-cyan); background: #001a1a; }
.tl-tab-name { outline: none; }
.tl-tab-del { background: none; border: none; color: #333; cursor: pointer; font-family: inherit; font-size: 10px; padding: 0; line-height: 1; }
.tl-tab-del:hover { color: var(--accent-red); }
.tl-tab-add { background: none; border: 1px dashed #333; color: #444; cursor: pointer; font-family: inherit; font-size: 14px; padding: 2px 8px; letter-spacing: 0; line-height: 1; transition: color 0.15s, border-color 0.15s; margin-bottom: 6px; }
.tl-tab-add:hover { color: var(--accent-green); border-color: var(--accent-green); }

.tier-pool-label { font-size: 7px; letter-spacing: 2px; color: #333; padding: 10px 10px 4px; }
.tier-pool { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; min-height: 52px; border-top: 1px solid #111; }
.tier-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 5px; border: 1px solid; cursor: grab; background: #0a0a0a; transition: opacity 0.15s, transform 0.1s; }
.tier-chip:hover { transform: scale(1.05); }
.tier-chip.dragging { opacity: 0.4; }
.tier-chip.tier-chip-selected { box-shadow: 0 0 0 2px #ffff00; opacity: 1; }
.tier-chip.chip-drop-before { box-shadow: -3px 0 0 var(--accent-cyan); }
.tier-chip.chip-drop-after  { box-shadow:  3px 0 0 var(--accent-cyan); }
.tier-chip-name { font-size: 6px; letter-spacing: 0.5px; max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }

/* ============================================================
   STAT LEADERBOARD
   ============================================================ */
.lb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #0e0e0e; font-size: 8px; letter-spacing: 1px; }
.lb-row:last-child { border-bottom: none; }
.lb-rank { width: 28px; text-align: right; flex-shrink: 0; font-weight: bold; }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { color: var(--accent-cyan); flex-shrink: 0; font-size: 9px; }

/* ============================================================
   TRAIT SUGGESTION BOX
   ============================================================ */
.sugg-input {
  width: 100%;
  background: #0d0d0d;
  color: #eee;
  border: 1px solid #2a2a2a;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 1px;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.sugg-input:focus { outline: none; border-color: #444; }

.sugg-textarea {
  width: 100%;
  background: #0d0d0d;
  color: #ccc;
  border: 1px solid #2a2a2a;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 8px;
  line-height: 1.7;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.sugg-textarea:focus { outline: none; border-color: #444; }

/* Rarity picker */
.sugg-rarity-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sugg-rar-btn {
  font-family: inherit;
  font-size: 7.5px;
  letter-spacing: 1.5px;
  padding: 5px 10px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.15s, filter 0.15s, transform 0.1s;
}
.sugg-rar-btn:hover    { opacity: 0.6; }
.sugg-rar-btn.sugg-rar-active {
  opacity: 1;
  filter: brightness(1.25);
  transform: translateY(-1px);
}
.sugg-rar-btn.rar-common     { color: #c0c0c0; }
.sugg-rar-btn.rar-rare       { color: #4aa9ff; }
.sugg-rar-btn.rar-epic       { color: #c98bff; }
.sugg-rar-btn.rar-legendary  { color: #ffe14a; }
.sugg-rar-btn.rar-mythic     { color: #ffd86a; }
.sugg-rar-btn.rar-hexxed     { color: #c46aff; }
.sugg-rar-btn.rar-duality    { color: #88c8ff; }
.sugg-rar-btn.rar-determined { color: #ff3333; }

/* Suggestion cards */
.sugg-card {
  border: 1px solid #2a2a2a;
  border-left-width: 3px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: filter 0.15s;
}
.sugg-card:hover { filter: brightness(1.08); }

.sugg-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sugg-rar-tag {
  font-size: 7px;
  letter-spacing: 2px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  flex-shrink: 0;
}
.sugg-card-name {
  font-size: 11px;
  letter-spacing: 2px;
  flex: 1;
  font-weight: bold;
}
.sugg-card-desc {
  font-size: 8px;
  color: #999;
  line-height: 1.7;
  margin-bottom: 8px;
}
.sugg-card-effect {
  font-size: 7.5px;
  color: #666;
  line-height: 1.6;
  padding: 7px 10px;
  border-left: 2px solid #2a2a2a;
  margin-bottom: 8px;
}
.sugg-effect-label {
  display: block;
  font-size: 6.5px;
  letter-spacing: 2px;
  color: #444;
  margin-bottom: 4px;
}
.sugg-card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  letter-spacing: 1px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #1a1a1a;
}

/* Vote button */
.sugg-vote-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 4px 9px;
  border: 1px solid #333;
  background: transparent;
  color: #555;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sugg-vote-btn:hover:not(.voted) {
  color: #88ff88;
  border-color: #44aa44;
}
.sugg-vote-btn.voted {
  color: #44aa44;
  border-color: #2a6a2a;
  background: rgba(40,100,40,0.12);
  cursor: default;
}
.sugg-vote-count { font-weight: bold; }

/* ============================================================
   CHARACTER CONTEXT MENU
   ============================================================ */
#char-context-menu {
  display: none;
  position: fixed;
  z-index: 9999;
  background: #0a0a0a;
  border: 1px solid #2a2a2a;
  min-width: 155px;
  box-shadow: 4px 4px 0 #000;
  user-select: none;
}
#char-context-menu.open { display: block; }
.ctx-item {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 8px;
  letter-spacing: 1px;
  color: #aaa;
  transition: background 0.08s, color 0.08s;
}
.ctx-item:hover { background: #181818; color: #fff; }
.ctx-item.danger { color: #ff4444; }
.ctx-item.danger:hover { background: rgba(255,68,68,0.08); color: #ff6666; }
.ctx-section-label { color: #444; font-size: 7px; padding: 6px 14px 4px; cursor: default; }
.ctx-section-label:hover { background: none; color: #444; }
.ctx-folder-opt { padding-left: 20px; font-size: 8px; }
.ctx-separator { border-top: 1px solid #1c1c1c; margin: 3px 0; }

/* ============================================================
   FOLDER MODAL
   ============================================================ */
#folder-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9996;
}
#folder-modal-overlay.open { display: block; }
#folder-modal {
  display: none; position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9997;
  min-width: 280px; max-width: 360px; width: 90vw;
  background: #000; border: 2px solid #333;
  animation: cv-fade-in 0.18s ease;
}
#folder-modal.open { display: block; }
#folder-modal .panel-title { padding: 14px 18px; border-bottom: 1px solid #222; display: flex; justify-content: space-between; align-items: center; }
#folder-modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
#folder-color-swatches { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.folder-swatch {
  width: 22px; height: 22px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
  flex-shrink: 0;
}
.folder-swatch:hover { transform: scale(1.15); }
.folder-swatch.selected { border-color: #fff; }

/* ============================================================
   ALTERNATE FORMS
   ============================================================ */

/* ── View-side: form switcher chips next to the name ── */
.form-chip {
  font-family: var(--font-main);
  font-size: 7px;
  letter-spacing: 1px;
  padding: 3px 9px;
  border: 1px solid #2a2a2a;
  background: #000;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.1s, border-color 0.1s;
}
.form-chip:hover {
  color: #999;
  border-color: #555;
}
.form-chip.form-chip-active {
  color: var(--char-color, #ffff00);
  border-color: var(--char-color, #ffff00);
  box-shadow: 0 0 6px var(--char-color, #ffff00)55;
}

/* ── Editor-side: form cards ── */
.form-editor-card {
  border: 1px solid #1e1e1e;
  background: #080808;
  margin-bottom: 12px;
}
.form-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid #161616;
  background: #0f0f0f;
  font-size: 8px;
  letter-spacing: 2px;
  color: #555;
}
.form-editor-body {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Top row: avatar + name */
.form-top-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.form-avatar-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-name-col {
  flex: 1;
  min-width: 0;
}
.form-name-input {
  width: 100%;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  color: #ccc;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 6px 8px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.form-name-input:focus { border-color: #555; }
.form-name-input::placeholder { color: #2e2e2e; }

/* Avatar upload zone */
.form-avatar-zone {
  width: 64px;
  height: 64px;
  border: 1px solid #222;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  background: #0a0a0a;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.form-avatar-zone:hover { border-color: #444; }
.form-avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  color: #666;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.form-avatar-zone:hover .form-avatar-overlay { opacity: 1; }

/* Stat blocks inside a form card — mirrors the main editor layout */
.form-stats-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 4px;
  border-top: 1px solid #131313;
}
.form-stat-block {
  padding-bottom: 12px;
  margin-bottom: 2px;
}
.form-stat-block:last-child { padding-bottom: 4px; }
.form-stat-lbl {
  display: flex;
  align-items: center;
  font-size: 7px;
  letter-spacing: 2px;
  color: #555;
  white-space: nowrap;
}
.form-stat-block:hover .stat-seg.on,
.form-stat-block:hover .stat-seg.peak {
  animation: seg-wave 0.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 0.03s);
}
/* Overall PL bar at the bottom of the stats section */
.form-overall-pl {
  font-size: 8px;
  letter-spacing: 1px;
  color: #444;
  text-align: center;
  padding: 7px 10px;
  border: 1px solid #1a1a1a;
  background: #060606;
  margin-top: 4px;
}

/* Substats grid — 3 columns, all 9 substats */
.form-substats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 10px;
  padding-top: 10px;
  border-top: 1px solid #131313;
}
.form-substat-cell {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   HEIGHT CHART — FULL SCREEN
   ============================================================ */
#hc-overlay { display: none; }

#hc-modal {
  display: none; position: fixed; inset: 0;
  background: #060606; z-index: 201;
  flex-direction: column; overflow: hidden;
  font-family: var(--font-main); color: #ddd;
}

/* ── Header ── */
#hc-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; height: 50px; flex-shrink: 0;
  background: #080808; border-bottom: 1px solid #141414;
}
#hc-title {
  font-size: 9px; letter-spacing: 3px; color: var(--accent); flex: 1;
}
#hc-header-actions { display: flex; align-items: center; gap: 8px; }
#hc-unit-toggle { display: flex; gap: 4px; }
#hc-unit-toggle .btn.active { background: var(--accent-cyan); color: #000; border-color: var(--accent-cyan); }
#hc-close-btn {
  width: 34px; height: 34px; font-family: sans-serif; font-size: 18px;
  background: none; border: 1px solid #1e1e1e; color: #444;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.1s; flex-shrink: 0; line-height: 1;
}
#hc-close-btn:hover { border-color: #882222; color: #c44; }

/* ── Body layout ── */
#hc-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* ── Chart area ── */
#hc-chart-wrap { display: flex; flex: 1; overflow: hidden; min-height: 0; }
#hc-ruler {
  width: 58px; flex-shrink: 0; position: relative;
  background: #060606; border-right: 1px solid #121212; overflow: hidden;
}
#hc-stage {
  flex: 1; position: relative; overflow: hidden;
  background: #080808;
}
#hc-ground-line {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: #252525; z-index: 2;
}
#hc-ground-line::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(to top, rgba(255,255,255,0.02) 0%, transparent 100%);
  pointer-events: none;
}
#hc-chars { position: absolute; inset: 0; bottom: 1px; }

/* ── Ruler ticks ── */
.hc-tick {
  position: absolute; right: 0; left: 0;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 10px; pointer-events: none;
}
.hc-tick::after {
  content: ''; position: absolute; right: 0; width: 4px; height: 1px; background: #1c1c1c;
}
.hc-tick.major::after { width: 10px; background: #2a2a2a; }
.hc-tick-label { font-size: 5px; color: #282828; letter-spacing: 0; line-height: 1; }
.hc-tick.major .hc-tick-label { color: #505050; font-size: 6px; }

/* ── Grid lines ── */
.hc-grid-line {
  position: absolute; left: 0; right: 0; height: 1px;
  background: #0c0c0c; pointer-events: none;
}
.hc-grid-line.major { background: #121212; }

/* ── Character entries ── */
.hc-char-wrap {
  position: absolute; bottom: 0; transform: translateX(-50%);
  cursor: pointer; user-select: none; z-index: 5;
}
.hc-char-wrap:hover .hc-char-sprite,
.hc-char-wrap:hover .hc-char-svg { filter: brightness(1.25); }
.hc-char-wrap.selected .hc-char-sprite,
.hc-char-wrap.selected .hc-char-svg {
  filter: brightness(1.5) drop-shadow(0 0 10px var(--hc-char-color, #aaa));
}
.hc-anchor {
  position: relative; height: 0; overflow: visible;
  display: flex; justify-content: center;
}
.hc-char-name-tag {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 6px; color: #bbb; letter-spacing: 1px; white-space: nowrap;
  padding: 3px 8px; pointer-events: none;
  background: rgba(6,6,6,0.9);
  border-bottom: 2px solid var(--hc-char-color, #333);
}
.hc-char-wrap.selected .hc-char-name-tag { color: #fff; }
.hc-char-ht-tag {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 7px; font-size: 5.5px; color: #333; white-space: nowrap; pointer-events: none;
}
.hc-char-wrap.selected .hc-char-ht-tag { color: #555; }
.hc-char-sprite {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: block; width: auto; image-rendering: pixelated;
}
.hc-char-svg {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%); display: block; width: auto;
}

/* ── Sidebar ── */
#hc-sidebar {
  width: 256px; flex-shrink: 0;
  background: #070707; border-left: 1px solid #131313;
  display: flex; flex-direction: column; overflow: hidden;
}
#hc-sidebar-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 7px; color: #1c1c1c; letter-spacing: 2px;
  text-align: center; line-height: 2.8; padding: 24px;
  pointer-events: none;
}
#hc-edit-panel {
  display: none; flex-direction: column;
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: #181818 transparent;
}
#hc-edit-panel::-webkit-scrollbar { width: 3px; }
#hc-edit-panel::-webkit-scrollbar-thumb { background: #181818; }
#hc-char-color-bar { height: 3px; flex-shrink: 0; transition: background 0.2s; }
#hc-edit-inner {
  padding: 18px 16px; display: flex; flex-direction: column; gap: 16px;
}
.hc-edit-field { display: flex; flex-direction: column; gap: 7px; }
.hc-edit-label { font-size: 7px; color: #424242; letter-spacing: 1px; }
.hc-edit-input {
  background: #0b0b0b; border: 1px solid #1e1e1e; color: #ccc;
  font-family: var(--font-main); font-size: 9px;
  padding: 9px 11px; letter-spacing: 1px; width: 100%; outline: none;
  transition: border-color 0.15s;
}
.hc-edit-input:focus { border-color: #353535; }
.hc-color-row { display: flex; align-items: center; gap: 10px; }
.hc-color-input { width: 46px; height: 36px; border: 1px solid #252525; cursor: pointer; padding: 2px; background: #0b0b0b; flex-shrink: 0; }
.hc-color-hex { font-size: 8px; color: #444; letter-spacing: 1px; font-family: var(--font-main); }
.hc-sprite-row { display: flex; gap: 7px; flex-wrap: wrap; }
.hc-edit-divider { height: 1px; background: #111; }

/* ── Crop sliders ── */
#hc-crop-section { display: none; flex-direction: column; gap: 7px; }
.hc-crop-row { display: flex; align-items: center; gap: 8px; }
.hc-crop-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 3px; background: #202020; outline: none; cursor: pointer; border-radius: 2px;
}
.hc-crop-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent-cyan); cursor: pointer;
}
.hc-crop-slider::-moz-range-thumb {
  width: 12px; height: 12px; border: none;
  border-radius: 50%; background: var(--accent-cyan); cursor: pointer;
}
.hc-crop-val { font-size: 7px; color: #424242; min-width: 32px; text-align: right; }

/* ── Import picker ── */
#hc-import-win {
  display: none; position: absolute; inset: 0; z-index: 20;
  background: rgba(0,0,0,0.85);
  align-items: center; justify-content: center;
}
#hc-import-box {
  background: #0b0b0b; border: 1px solid #252525;
  width: 320px; max-height: 60%; display: flex; flex-direction: column;
}
#hc-import-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid #181818; flex-shrink: 0;
  font-size: 8px; letter-spacing: 2px; color: var(--accent);
}
#hc-import-search {
  font-family: var(--font-main); font-size: 8px; letter-spacing: 1px;
  width: 100%; padding: 10px 14px; background: #090909; border: none;
  border-bottom: 1px solid #151515; color: #999; outline: none; flex-shrink: 0;
}
#hc-import-search::placeholder { color: #242424; }
#hc-import-list {
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: #1e1e1e transparent;
}
#hc-import-list::-webkit-scrollbar { width: 3px; }
#hc-import-list::-webkit-scrollbar-thumb { background: #1e1e1e; }
.hc-imp-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 16px; cursor: pointer; border-bottom: 1px solid #0f0f0f;
  transition: background 0.08s;
}
.hc-imp-row:hover { background: #111; }
.hc-imp-row.hc-imp-already { pointer-events: none; }
.hc-imp-row.hc-imp-already .hc-imp-name { color: #333; }
.hc-imp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.hc-imp-name { font-size: 8px; color: #aaa; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-imp-tag { font-size: 6px; color: #353535; letter-spacing: 1px; white-space: nowrap; }
.hc-imp-empty { padding: 24px 16px; font-size: 7px; color: #222; text-align: center; letter-spacing: 1px; }