Style the skill-detail card on classes/enemies to match auto-battler

The selected-skill detail card reuses CBGame's .cbgame-skill-* component (built by
classes/enemiesSandbox.js), but that rule family — the dark card background,
Fraunces name, tone-coloured stat tags, trigger pills and --fx effect rows — lives
in auto-battler's styles.css, which the Space never shipped (only classes.css).

build.sh now folds the .cbgame-skill-* rules from styles.css into the scoped
classes.css (brace-balanced, by selector prefix), inside the same
#classes-stage,#enemies-stage wrap. Skill + condition icons were already curated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

build.sh

@@ -37,7 +37,16 @@ cp "$AB/src/render/spriteScene.css" web/shell/spriteScene.css
 # outrank the components' single-class rules and strip their button/control backgrounds, borders
 # and padding. Adding the stage id gives every rule an id of specificity so it wins. Only the
 # Space's copies are wrapped — auto-battler loads the files unscoped, so the source is untouched.
-{ echo '#classes-stage, #enemies-stage {'; cat "$AB/src/views/classes.css"; echo '}'; } > web/shell/classes.css
+{
+  echo '#classes-stage, #enemies-stage {'
+  cat "$AB/src/views/classes.css"
+  # The selected-skill detail card reuses CBGame's .cbgame-skill-* component (built by
+  # classes/enemiesSandbox.js), but that family is styled in styles.css — NOT classes.css. Pull
+  # just those rules in (brace-balanced, by selector prefix) so the card's dark background, tone
+  # tags, trigger pills and effect rows match the React app.
+  awk '!r && /^\.cbgame-skill-/{r=1;d=0} r{print; d+=gsub(/\{/,"{"); d-=gsub(/\}/,"}"); if(d<=0 && /\}/)r=0}' "$AB/src/styles.css"
+  echo '}'
+} > web/shell/classes.css
 { echo '#worldmap-stage {'; cat "$AB/src/views/worldmap.css"; echo '}'; } > web/shell/worldmap.css
 
 # 3. Assets → use auto-battler's FULL character manifest (so the Space lists every

web/shell/classes.css

@@ -151,4 +151,62 @@
 .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; }
 }