Fixed edition fixing / multiclass requirements. Refactored spell screen to be more readable

src/renderer/styles.css

@@ -1742,6 +1742,14 @@ body {
   display: block;
   min-height: 0;
   aspect-ratio: 1 / 1;
+  cursor: pointer;
+  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
+}
+
+.entity-tile:hover {
+  border-color: rgba(134, 183, 247, 0.88);
+  box-shadow: 0 0 0 1px rgba(121, 178, 249, 0.28);
+  transform: translateY(-1px);
 }
 
 .entity-tile-media {
@@ -1830,6 +1838,97 @@ body {
   box-shadow: 0 0 0 1px rgba(252, 84, 84, 0.42);
 }
 
+.entity-tile.is-disabled {
+  opacity: 0.45;
+  filter: grayscale(0.5);
+  cursor: not-allowed;
+}
+
+.character-class-list {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: rgba(9, 14, 24, 0.72);
+  padding: 10px;
+  display: grid;
+  gap: 8px;
+}
+
+.character-class-list h4 {
+  margin: 0;
+  color: #eef4ff;
+  font-size: 0.96rem;
+}
+
+.character-class-list-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 8px;
+}
+
+.character-class-chip {
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: rgba(7, 11, 20, 0.84);
+  padding: 8px;
+  display: grid;
+  gap: 8px;
+}
+
+.character-class-chip header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.character-class-chip header strong {
+  color: #eef4ff;
+}
+
+.character-class-chip header span {
+  font-size: 0.76rem;
+  color: var(--text-2);
+}
+
+.character-class-chip-badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.character-class-chip-role {
+  border: 1px solid rgba(73, 92, 120, 0.8);
+  border-radius: 999px;
+  padding: 1px 7px;
+  font-size: 0.68rem !important;
+  color: #c5d4ea !important;
+  background: rgba(19, 28, 42, 0.74);
+}
+
+.character-class-chip-role.is-primary {
+  border-color: rgba(51, 158, 102, 0.8);
+  color: #dcfff1 !important;
+  background: rgba(21, 108, 67, 0.64);
+}
+
+.character-class-chip-note {
+  margin: -2px 0 0;
+  font-size: 0.76rem;
+  color: var(--text-2);
+}
+
+.character-class-chip-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.character-class-chip-actions span {
+  font-size: 0.86rem;
+  color: var(--text-1);
+}
+
 .entity-popover-backdrop {
   position: fixed;
   inset: 0;
@@ -2101,10 +2200,12 @@ body {
 
 .spell-level-group {
   display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
 }
 
 .spell-level-group h5 {
+  grid-column: 1 / -1;
   margin: 0;
   color: #f2f5ff;
   font-size: 0.9rem;
@@ -2127,6 +2228,10 @@ body {
   background: linear-gradient(145deg, rgba(121, 39, 39, 0.64), rgba(25, 22, 33, 0.95));
 }
 
+.spell-pick-card.is-disabled {
+  opacity: 0.7;
+}
+
 .spell-pick-title {
   font-size: 0.9rem;
   font-weight: 700;
@@ -2289,6 +2394,12 @@ body {
   }
 }
 
+@media (width <= 900px) {
+  .spell-level-group {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (width <= 900px) {
   .entity-list-actions {
     justify-content: stretch;