Release v0.1.17 2026-07-19

src/components/rpgRoguelike/rpgRoguelike.css

@@ -235,6 +235,7 @@
 
 .rpg-card-kicker {
   display: flex;
+  align-items: center;
   justify-content: space-between;
   gap: 5px;
   color: var(--rarity-color, #e7e9ec);
@@ -249,6 +250,41 @@
   font-weight: 600;
 }
 
+.rpg-role-badge {
+  min-width: 44px;
+  padding: 2px 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  font-size: 8px;
+  letter-spacing: 0.08em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.rpg-role-badge.is-tank {
+  color: #9bd9ff;
+  background: rgba(65, 145, 199, 0.2);
+}
+
+.rpg-role-badge.is-damage {
+  color: #ffc27c;
+  background: rgba(204, 111, 55, 0.19);
+}
+
+.rpg-role-badge > i {
+  font-size: 9px;
+  font-style: normal;
+}
+
+.rpg-role-badge > b {
+  color: inherit;
+  font-weight: 800;
+}
+
 .rpg-party-card h3,
 .rpg-spell-card h3,
 .rpg-gear-card h3 {
@@ -389,6 +425,18 @@
   text-transform: uppercase;
 }
 
+.rpg-picked-strip > strong {
+  width: 108px;
+  flex: 0 0 108px;
+}
+
+.rpg-picked-strip > strong > small {
+  color: var(--rpg-gold);
+  font-size: 8px;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
 .rpg-picked-chip,
 .rpg-empty-chip,
 .rpg-spellbook-chip {
@@ -401,9 +449,12 @@
 
 .rpg-picked-chip {
   position: relative;
-  padding: 4px 18px 4px 10px;
+  padding: 4px 6px 4px 10px;
   display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
   align-content: center;
+  gap: 5px;
   cursor: pointer;
   text-align: left;
 }
@@ -414,18 +465,24 @@
   width: 3px;
 }
 
-.rpg-picked-chip > small {
+.rpg-picked-copy {
+  min-width: 0;
+  display: grid;
+}
+
+.rpg-picked-copy > strong,
+.rpg-picked-copy > small {
   overflow: hidden;
-  color: var(--rpg-muted);
-  font-size: 8px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.rpg-picked-chip > b {
-  position: absolute;
-  right: 6px;
+.rpg-picked-copy > strong { color: var(--rpg-ink); font-size: 10px; }
+.rpg-picked-copy > small { color: var(--rpg-muted); font-size: 8px; }
+
+.rpg-picked-chip > .rpg-picked-remove {
   color: #82958e;
+  font-size: 14px;
 }
 
 .rpg-empty-chip {
@@ -870,7 +927,7 @@
 }
 
 .rpg-gear-card {
-  min-height: 72px;
+  min-height: 112px;
   padding: 8px 8px 22px 43px;
 }
 
@@ -904,6 +961,12 @@
   font-size: 9px;
 }
 
+.rpg-gear-card .rpg-gear-price {
+  margin: 2px 0 0;
+  color: var(--rpg-gold);
+  font-weight: 700;
+}
+
 .rpg-shop-side-list {
   min-height: 0;
   overflow-y: auto;
@@ -1118,6 +1181,22 @@
   font-size: 9px;
 }
 
+.rpg-party-composition {
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+}
+
+.rpg-party-composition > b {
+  color: var(--rpg-gold);
+  font-size: 9px;
+}
+
+.rpg-party-composition > small {
+  color: var(--rpg-muted);
+  font-size: 8px;
+}
+
 .rpg-tactical-list {
   display: grid;
   gap: 4px;
@@ -1400,7 +1479,7 @@ button.rpg-tactical-spell {
 }
 
 .rpg-tactical-reward {
-  min-height: 94px;
+  min-height: 130px;
   padding: 9px 64px 9px 49px;
   position: relative;
   cursor: pointer;
@@ -1457,12 +1536,88 @@ button.rpg-tactical-spell {
   text-transform: uppercase;
 }
 
+.rpg-gear-comparison {
+  min-width: 0;
+  margin-top: 7px;
+  padding-top: 6px;
+  display: grid;
+  gap: 5px;
+  color: #dce8e2;
+  border-top: 1px solid var(--rpg-line);
+  font-style: normal;
+}
+
+.rpg-gear-comparison > strong {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 5px;
+  overflow: hidden;
+  color: #dce8e2;
+  font-family: "Rajdhani", "Avenir Next Condensed", sans-serif;
+  font-size: 9px;
+  letter-spacing: 0.04em;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rpg-gear-comparison > strong > em {
+  flex: 0 0 auto;
+  padding: 2px 4px;
+  color: #9de1b8;
+  border-radius: 2px;
+  background: rgba(70, 167, 108, 0.15);
+  font-size: 8px;
+  font-style: normal;
+}
+
+.rpg-gear-comparison > span {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 5px;
+}
+
+.rpg-gear-comparison > span > span {
+  min-width: 0;
+  display: grid;
+  gap: 1px;
+}
+
+.rpg-gear-comparison small,
+.rpg-tactical-reward .rpg-gear-comparison small {
+  overflow: hidden;
+  color: #82958e;
+  font-size: 8px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.rpg-gear-comparison b {
+  color: #f1f7f4;
+  font-size: 12px;
+  line-height: 1.1;
+}
+
+.rpg-gear-comparison > span > i {
+  color: #75bceb;
+  font-size: 11px;
+  font-style: normal;
+}
+
 .rpg-run-tactical .rpg-tactical-shop-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .rpg-run-tactical .rpg-gear-card {
-  min-height: 80px;
+  min-height: 112px;
 }
 
 .rpg-service-row {
@@ -1724,6 +1879,15 @@ button.rpg-tactical-spell {
     min-height: 92px;
   }
 
+  .rpg-reward-grid {
+    grid-template-columns: 1fr;
+    overflow-y: auto;
+  }
+
+  .rpg-reward-card {
+    min-height: 220px;
+  }
+
   .rpg-picked-strip,
   .rpg-spellbook-strip {
     overflow-x: auto;
@@ -1735,6 +1899,10 @@ button.rpg-tactical-spell {
     min-width: 100px;
   }
 
+  .rpg-picked-chip {
+    min-width: 142px;
+  }
+
   .rpg-shop-layout {
     grid-template-columns: 1fr;
     overflow-y: auto;
@@ -1751,6 +1919,12 @@ button.rpg-tactical-spell {
   .rpg-tactical-offer > b {
     display: none;
   }
+
+  .rpg-party-composition {
+    display: grid;
+    gap: 0;
+    text-align: right;
+  }
 }
 
 /* Single-display browser fallback gets a usable full-height draft surface. */