Android build v1.0.54

src/App.css

@@ -6087,27 +6087,17 @@ h2 {
 .pvp-board {
   display: grid;
   gap: 8px;
-  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.68fr) minmax(0, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-rows: minmax(0, 1fr) auto;
   min-height: 0;
 }
 
-.pvp-side,
-.pvp-middle-panel {
+.pvp-side {
   gap: 8px;
   min-height: 0;
   padding: 8px;
 }
 
-.pvp-vertical-spell-bar,
-.pvp-vertical-spell-bar.six-slots {
-  grid-template-columns: 1fr;
-}
-
-.pvp-vertical-spell-bar .spell {
-  min-height: 58px;
-  padding: 6px;
-}
-
 .pvp-screen-tools {
   align-items: center;
   display: flex;
@@ -6118,18 +6108,41 @@ h2 {
   justify-content: flex-end;
 }
 
-.pvp-resource-wrap {
-  color: #82bfff;
-  min-width: 150px;
-  text-align: right;
-  width: min(170px, 100%);
+.pvp-side-bars {
+  display: grid;
+  gap: 8px;
+  min-width: min(320px, 45%);
+  width: min(360px, 48%);
 }
 
+.pvp-clear-wrap,
+.pvp-resource-wrap {
+  color: var(--muted);
+  font-family: 'Press Start 2P', monospace;
+  font-size: 7px;
+  text-align: right;
+  width: 100%;
+}
+
+.pvp-clear-wrap > span,
 .pvp-resource-wrap > span {
   display: block;
   margin-bottom: 4px;
 }
 
+.pvp-clear-wrap .bar,
+.pvp-resource-wrap .bar {
+  height: 13px;
+}
+
+.pvp-clear-wrap {
+  color: #ff8d9a;
+}
+
+.pvp-resource-wrap {
+  color: #82bfff;
+}
+
 .pvp-side .party-member,
 .pvp-side .party-member > div,
 .pvp-side .party-member > small {
@@ -6147,7 +6160,7 @@ h2 {
 }
 
 .pvp-side .pvp-party-grid.raid .party-member {
-  min-height: 62px;
+  min-height: 96px;
   padding: 6px;
 }
 
@@ -6184,6 +6197,29 @@ h2 {
   height: 14px;
 }
 
+.pvp-side .member-health {
+  position: relative;
+}
+
+.pvp-side .member-health .health-text {
+  align-items: center;
+  color: #fff3c7;
+  display: flex;
+  font-family: 'Press Start 2P', monospace;
+  font-size: 7px;
+  font-style: normal;
+  inset: 0;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+  text-shadow: 1px 1px 0 #08090c, -1px -1px 0 #08090c;
+  z-index: 2;
+}
+
+.pvp-side .party-member .member-header small {
+  display: none;
+}
+
 .pvp-side .member-effects {
   margin-top: 4px;
 }
@@ -6202,22 +6238,57 @@ h2 {
   gap: 8px;
 }
 
-.pvp-middle-panel .encounter-header h2 {
-  font-size: 20px;
-}
-
-.pvp-middle-panel .encounter-header small,
 .pvp-enemy-race small {
   font-size: 14px;
 }
 
-.pvp-middle-panel .roguelike-upgrade-list,
 .pvp-side .roguelike-upgrade-list {
   font-size: 12px;
   line-height: 1.1;
   margin-top: 4px;
 }
 
+.pvp-bottom-spell-bar {
+  background: var(--panel);
+  border: 3px solid #0c0d11;
+  box-shadow: 4px 4px 0 #08090c;
+  display: grid;
+  gap: 8px;
+  grid-column: 1 / -1;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  outline: 2px solid var(--edge);
+  padding: 8px;
+}
+
+.pvp-bottom-spell-bar .spell {
+  align-items: center;
+  display: grid;
+  gap: 6px;
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
+  min-height: 58px;
+  padding: 7px;
+  text-align: left;
+}
+
+.pvp-bottom-spell-bar .spell-icon {
+  height: 34px;
+  margin: 0;
+  width: 34px;
+}
+
+.pvp-bottom-spell-bar .spell strong {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pvp-bottom-spell-bar .spell small {
+  font-size: 13px;
+  text-align: right;
+  white-space: nowrap;
+}
+
 .pvp-choice-columns {
   display: grid;
   gap: 10px;