web/shell/classes.css

#classes-stage, #enemies-stage {
/* Classes sandbox styles. Kept in its own file (imported by Classes.jsx) rather
   than the shared styles.css to avoid colliding with parallel work there.
   Uses the global design tokens (--ink, --paper, …) defined in styles.css. */

.classes { display: flex; height: 100%; width: 100%; }
.classes-list { width: 170px; flex-shrink: 0; border-right: 2px solid var(--ink); background: var(--paper-2); padding: 12px; overflow-y: auto; }
.classes-list h2, .classes-customize h2, .classes-skills-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--transmit); margin: 0 0 8px; }
.classes-list ul { list-style: none; padding: 0; margin: 0; }
.classes-link { display: block; width: 100%; text-align: left; padding: 6px 8px; border: none; border-left: 3px solid var(--c); background: transparent; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink); }
.classes-link:hover { background: var(--paper-3); }
.classes-link.active { background: var(--ink); color: var(--paper); }

.classes-palette { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--paper-3); }
.classes-palette-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--transmit); margin-bottom: 6px; }
.classes-palette-head .muted { letter-spacing: 0; }
.classes-swatches { display: flex; flex-direction: column; gap: 4px; }
.classes-swatch { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; width: 100%; text-align: left; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; cursor: pointer; font-family: inherit; font-size: 11px; color: var(--ink); }
.classes-swatch-num { grid-row: 1 / span 2; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--transmit); width: 12px; text-align: center; }
.classes-swatch-ramp { display: flex; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.classes-swatch-ramp i { flex: 1 1 0; min-width: 0; }
.classes-swatch-name { font-size: 10px; color: var(--muted, #8a857a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.classes-swatch:hover { background: var(--paper-3); }
.classes-swatch.active { border-color: var(--ink); background: var(--paper-3); }
.classes-swatch.active .classes-swatch-name { color: var(--ink); font-weight: 600; }

.classes-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.classes-stage { flex: 1; min-height: 0; }
.classes-stage canvas { display: block; width: 100%; height: 100%; }
.classes-taskbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 2px solid var(--ink); background: var(--paper-2); }
.classes-slot { width: 48px; height: 48px; border: 1.5px solid var(--ink); background: var(--card); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 2px 2px 0 rgba(20,24,33,.25); }
.classes-slot.filled { box-shadow: 0 0 0 1.5px var(--transmit), 2px 2px 0 rgba(20,24,33,.25); }
.classes-slot img { width: 40px; height: 40px; image-rendering: pixelated; }
.classes-slot-num { font-family: var(--font-mono); font-size: 14px; color: var(--ink-faint); }
.classes-controls { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 2px solid var(--ink); background: var(--paper-2); }
.classes-attack-btn { padding: 6px 12px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.classes-attack-btn:hover:not(:disabled) { background: var(--ink-2); }
.classes-attack-btn:disabled { opacity: .45; cursor: default; }
.classes-taskbar-hint { font-family: var(--font-mono); font-size: 10px; margin-left: auto; }

/* stackable effect editor (chips + add dropdown) */
.classes-fx-stack { display: flex; flex-direction: column; gap: 5px; }
.classes-fx-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.classes-fx-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; padding: 2px 4px 2px 7px; border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); }
.classes-fx-chip button { border: none; background: transparent; cursor: pointer; color: var(--ink-muted); font-size: 13px; line-height: 1; padding: 0 2px; }
.classes-fx-chip button:hover { color: var(--transmit); }

.classes-skills { height: 170px; flex-shrink: 0; border-top: 2px solid var(--ink); background: var(--paper); padding: 10px 12px; overflow-y: auto; }
.classes-skills-head { display: flex; align-items: baseline; gap: 4px; }
.classes-skills-head strong { font-family: var(--font-display); font-size: 14px; letter-spacing: 0; text-transform: none; }
.classes-skill-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.classes-skill { padding: 0; border: 1.5px solid var(--ink); background: var(--card); cursor: pointer; line-height: 0; }
.classes-skill img { width: 36px; height: 36px; image-rendering: pixelated; }
.classes-skill:hover { transform: translate(-1px,-1px); }
.classes-skill.elite { border-color: var(--amber); box-shadow: 0 0 0 1.5px var(--amber); }
.classes-skill.on-bar { outline: 2px solid var(--transmit); outline-offset: 1px; }
.classes-skill.selected { outline: 2px solid var(--amber); outline-offset: 1px; }
.classes-skill:disabled { cursor: default; }

.classes-customize { width: 220px; flex-shrink: 0; border-left: 2px solid var(--ink); background: var(--paper-2); padding: 12px; }
.classes-customize h2 { border-bottom: 3px solid var(--c); padding-bottom: 4px; }
.classes-readonly { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); border: 1px dashed var(--ink-faint); padding: 4px 6px; }
.classes-field { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; }
.classes-field select { padding: 5px 6px; border: 1.5px solid var(--ink); background: var(--paper); font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.classes-preview-name { font-size: 13px; color: var(--ink-2); }

/* selected-skill detail section (below the class customize fields) */
.classes-skill-detail { margin-top: 16px; border-top: 1px dashed var(--ink-faint); padding-top: 12px; }
.classes-skill-detail h2 { border-bottom: 3px solid var(--c); padding-bottom: 4px; }
.classes-skill-name { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.classes-skill-name img { border: 1.5px solid var(--ink); image-rendering: pixelated; }
.classes-skill-name img.elite { border-color: var(--amber); }
.classes-skill-name strong { font-family: var(--font-display); font-size: 15px; }
.classes-skill-ir { background: var(--ink); color: var(--paper); padding: 8px 10px; font-family: var(--font-mono); font-size: 10px; line-height: 1.5; white-space: pre-wrap; margin: 0 0 12px; }
.classes-skill-actions { display: flex; gap: 6px; margin-top: 8px; }
.classes-skill-add { flex: 1; padding: 6px; border: 1.5px dashed var(--ink); background: transparent; color: var(--ink); cursor: pointer; font-family: var(--font-sans); font-size: 12px; }
.classes-skill-add:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-style: solid; }
.classes-skill-add:disabled { opacity: .5; cursor: default; }

/* Enemies sandbox: roster add/delete + stats grid (reuses the .classes-* layout
   above; only the bits unique to the editable enemy roster live here). */
.enemies-roster-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.enemies-add { border: 1.5px dashed var(--ink); background: transparent; color: var(--ink); cursor: pointer; font-family: var(--font-mono); font-size: 14px; line-height: 1; padding: 1px 7px; }
.enemies-add:hover { background: var(--ink); color: var(--paper); border-style: solid; }
.enemies-row { display: flex; align-items: stretch; }
.enemies-row .classes-link { flex: 1; min-width: 0; }
.enemies-del { border: none; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 13px; padding: 0 6px; }
.enemies-row:hover .enemies-del { color: var(--transmit); }
.enemies-empty { font-family: var(--font-mono); font-size: 10px; color: var(--ink-muted); padding: 6px 2px; }

.enemies-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.enemies-stat { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.enemies-stat input { padding: 5px 6px; border: 1.5px solid var(--ink); background: var(--paper); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: var(--ink); width: 100%; box-sizing: border-box; }
.classes-field input[type="text"] { padding: 5px 6px; border: 1.5px solid var(--ink); background: var(--paper); font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink); }
.enemies-skill-add-row { margin-top: 8px; }
.enemies-skill-add-row select { width: 100%; padding: 5px 6px; border: 1.5px solid var(--ink); background: var(--paper); font-family: var(--font-sans); font-size: 12px; color: var(--ink); }

/* Enemy skills panel: an "assigned" row + a filterable catalog whose chips
   toggle membership (taskbar-style), with the profession filter pinned at the
   bottom. A flex column so the catalog scrolls while header/filter stay put. */
.enemies-skills { height: 220px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.enemies-skill-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-muted); margin: 4px 0 2px; }
.enemies-assigned { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 5px; min-height: 38px; }
.enemies-catalog { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
.enemies-filter { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px dashed var(--ink-faint); padding-top: 6px; margin-top: 2px; }
.enemies-filter button { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.enemies-filter button:hover { background: var(--paper-3); }
.enemies-filter button.active { background: var(--ink); color: var(--paper); }
.classes-skill.on-bar img { opacity: 1; }
.classes-skill.off-bar img { opacity: .4; }
.classes-skill.off-bar:hover img { opacity: .8; }

/* Remove badge: a small × in the top-right corner of an assigned skill chip,
   for one-click removal without relying on the toggle. */
.enemies-skill-wrap { position: relative; line-height: 0; }
.enemies-remove-badge { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 1px 1px 0 rgba(20,24,33,.3); }
.enemies-remove-badge:hover { background: var(--transmit); color: var(--paper); border-color: var(--transmit); }

/* ════════════════════════════════════════════════════════════════════════════
 * Gradio-host portability (Tiny Army Space). The Space loads ONLY this file, not
 * the app's global styles.css, so (a) the design tokens would be undefined and
 * (b) Gradio's `.gradio-container button/ul/li/select` base styles leak in (list
 * bullets, tall rounded buttons, swapped fonts, dropped panel borders/bg). We fix
 * both, scoped to `.classes`: redefine the tokens locally (mirroring styles.css
 * :root) and re-assert the box/type props with !important. Both are harmless and
 * redundant in the React app — same values, already-reset elements.
 * ════════════════════════════════════════════════════════════════════════════ */
.classes {
  --paper: #f3ebdc; --paper-2: #ece2cc; --paper-3: #e2d6ba; --card: #fbf6ea;
  --ink: #141821; --ink-2: #2a2f3a; --ink-muted: #6d6a5f; --ink-faint: #8a8574;
  --transmit: #d8271a; --lime: #b8d64a; --amber: #e8a72a;
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}
.classes ul, .classes li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.classes button { min-height: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.classes-link { padding: 6px 8px !important; border: none !important; border-left: 3px solid var(--c) !important; background: transparent !important; font-family: inherit !important; font-size: 14px !important; font-weight: 500 !important; text-align: left !important; }
.classes-swatch { text-align: left !important; }
.classes-link.active { background: var(--ink) !important; color: var(--paper) !important; }
.classes-attack-btn { padding: 6px 12px !important; border: 1.5px solid var(--ink) !important; background: var(--ink) !important; color: var(--paper) !important; font-family: var(--font-mono) !important; font-size: 10px !important; }
.classes-attack-btn:disabled { opacity: .45 !important; }
.classes-skill { padding: 0 !important; border: 1.5px solid var(--ink) !important; line-height: 0 !important; }
.classes-skill.elite { border-color: var(--amber) !important; box-shadow: 0 0 0 1.5px var(--amber) !important; }
.classes-swatch { padding: 4px 6px !important; border: 1px solid transparent !important; border-radius: 4px !important; background: transparent !important; font-family: inherit !important; }
.classes-swatch.active { border-color: var(--ink) !important; background: var(--paper-3) !important; }
.classes-fx-chip button { border: none !important; padding: 0 2px !important; background: transparent !important; }
.classes-field select, .classes-field input, .enemies-stat input, .enemies-skill-add-row select { border: 1.5px solid var(--ink) !important; background: var(--paper) !important; }
.enemies-filter button { padding: 3px 7px !important; border: 1.5px solid var(--ink) !important; background: var(--paper) !important; }
.enemies-filter button.active { background: var(--ink) !important; color: var(--paper) !important; }
.enemies-add, .classes-skill-add { border: 1.5px dashed var(--ink) !important; background: transparent !important; }
.enemies-remove-badge { border-radius: 50% !important; border: 1.5px solid var(--ink) !important; padding: 0 !important; box-shadow: 1px 1px 0 rgba(20,24,33,.3) !important; }
.enemies-del { border: none !important; background: transparent !important; }
.cbgame-skill-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px; padding: 2px 7px 2px 2px;
  font-family: var(--font-mono); font-size: 9px; color: rgba(255,255,255,.72); letter-spacing: .02em;
}
.cbgame-skill-icon { width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0; }
.cbgame-skill-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--fx, #888); box-shadow: 0 0 4px var(--fx, #888); }
.cbgame-skill-chip.selectable { cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: 9px; transition: background 140ms ease, border-color 140ms ease; }
.cbgame-skill-chip.selectable:hover { background: rgba(255,255,255,.08); }
.cbgame-skill-chip.selectable.selected { border-color: var(--prof-color, #888); background: rgba(255,255,255,.1); color: #fff; }
.cbgame-skill-detail {
  display: flex; flex-direction: column; gap: 8px;
  background: #14110d; border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--prof-color, #888); border-radius: 5px; padding: 10px;
}
.cbgame-skill-detail-head { display: flex; align-items: center; gap: 9px; }
.cbgame-skill-detail-icon { border-radius: 4px; flex-shrink: 0; image-rendering: pixelated; }
.cbgame-skill-detail-icon.elite { box-shadow: 0 0 0 1px #f0b429; }
.cbgame-skill-detail-name { font-family: var(--font-display); font-size: 14px; color: #f4ecd8; line-height: 1.15; }
.cbgame-skill-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; color: var(--prof-color, #888); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
.cbgame-skill-detail-meta .dot { opacity: .5; }
.cbgame-skill-target { color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.18); border-radius: 3px; padding: 0 4px; }
.cbgame-skill-stats { display: flex; flex-wrap: wrap; gap: 5px; }
.cbgame-skill-stat {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 5px;
  border-radius: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.82);
}
.cbgame-skill-stat img { image-rendering: pixelated; }
.cbgame-skill-stat.tone-energy { background: rgba(74,140,220,.18); border-color: rgba(74,140,220,.5); color: #aaccf5; }
.cbgame-skill-stat.tone-adrenaline { background: rgba(240,160,40,.16); border-color: rgba(240,160,40,.5); color: #f0c074; }
.cbgame-skill-stat.tone-sacrifice { background: rgba(200,60,60,.18); border-color: rgba(200,60,60,.5); color: #f0a0a0; }
.cbgame-skill-stat.tone-time { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.7); }
.cbgame-skill-triggers { display: flex; flex-wrap: wrap; gap: 5px; }
.cbgame-skill-trigger {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em;
  background: rgba(240,180,64,.12); border: 1px solid rgba(240,180,64,.4); color: #f0c878;
  border-radius: 4px; padding: 2px 7px;
}
.cbgame-skill-fx { display: flex; flex-direction: column; gap: 5px; }
.cbgame-skill-fx-row {
  display: flex; align-items: center; gap: 7px;
  background: color-mix(in srgb, var(--fx) 22%, #14110d);
  border-left: 3px solid var(--fx); border-radius: 0 4px 4px 0; padding: 5px 8px;
}
.cbgame-skill-fx-tag {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 2px 5px; border-radius: 3px;
  background: var(--fx); color: #15110c;
}
.cbgame-skill-fx-cond { flex-shrink: 0; border-radius: 3px; box-shadow: 0 0 0 1px var(--fx); }
.cbgame-skill-fx-text { font-size: 11px; color: #ece4d4; line-height: 1.4; }
.cbgame-skill-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.cbgame-skill-chip.palette { cursor: pointer; transition: background 140ms ease, border-color 140ms ease; }
.cbgame-skill-chip.palette:hover:not(:disabled) { background: rgba(255,255,255,.08); }
.cbgame-skill-chip.palette.on { border-color: var(--prof-color, #888); background: rgba(255,255,255,.1); color: #fff; }
.cbgame-skill-chip.palette.locked { opacity: .45; cursor: not-allowed; }
}