/* Keep the field open: health above and a single compact level gauge below. */
.play-screen { --health-height: 54px; --boss-height: 64px; --finance-height: 36px; --hud-safe-bottom: env(safe-area-inset-bottom, 0px); }
.play-screen .arena-hud {
  top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: var(--health-height);
  grid-template-columns: auto minmax(0, 1fr) auto 40px;
  gap: 7px; padding: 5px 9px; font-size: 16px;
}
.play-screen .arena-hud .music-button { width: 40px; margin-right: -9px; }
.play-screen .arena-hud .hpbar { min-width: 0; }
.play-screen .arena-hud .hpbar b { font-size: 17px; white-space: nowrap; }
.play-screen .arena-hud .enemy-count { font-size: 8px; }
.play-screen .arena-hud .enemy-count b { font-size: 15px; }
.play-screen .combat-finance-row,
.play-screen.normal-phase .combat-finance-row,
.play-screen.boss-phase .combat-finance-row {
  top: auto; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px);
  width: auto; height: var(--finance-height); display: block; transform: none;
}
.play-screen .level-progress-hud {
  box-sizing: border-box; width: 100%; height: 100%; min-width: 0;
  display: grid; grid-template-rows: 16px 5px; gap: 3px; padding: 5px 12px;
  background: #071d26; border-top: 1px solid #ba973d; color: #fff3d0;
  font: 600 11px/16px Arial, "Yu Gothic", Meiryo, sans-serif; letter-spacing: 0;
}
.play-screen .level-progress-hud > span { min-width: 0; white-space: nowrap; text-align: center; }
.play-screen .level-progress-hud .upgrade-progress {
  width: 100%; height: 5px; margin: 0; border: 0; background: #293b40; box-shadow: none;
}
.play-screen .level-progress-hud .upgrade-progress i { background: #7ee1b6; box-shadow: none; }
.play-screen .finance-background-data {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none;
}
.play-screen.boss-phase .boss-hud {
  box-sizing: border-box; top: calc(var(--health-height) + env(safe-area-inset-top, 0px));
  left: 0; right: 0; width: 100%; height: var(--boss-height); transform: none;
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 43px;
  grid-template-rows: 18px 14px 11px; gap: 2px 6px; padding: 5px 9px;
  border-width: 3px !important; outline-width: 1px;
}
.play-screen.boss-phase .boss-hud .boss-label { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; font-size: 13px; }
.play-screen.boss-phase .boss-hud > b { grid-area: 1 / 2; min-width: 0; font-size: 12px; line-height: 18px; align-self: center; }
.play-screen.boss-phase .boss-hud .boss-percent { grid-area: 1 / 3; font-size: 18px; line-height: 18px; text-align: right; }
.play-screen.boss-phase .boss-hud > div { grid-area: 2 / 1 / 3 / 4; height: 14px; margin: 0; border-width: 1px !important; }
.play-screen.boss-phase .boss-hud > small { display: block; grid-area: 3 / 1 / 4 / 4; min-width: 0; font-size: 9px; line-height: 11px; text-align: right; }
.play-screen .upgrade-dock { display: none !important; }
.play-screen .skill-tray { right: 12px; bottom: calc(var(--finance-height) + 12px + env(safe-area-inset-bottom, 0px)); }
.play-screen .skill-tray .skill-chip { display: none !important; }
.play-screen .ultimate-button { width: 112px; height: 57px; font-size: 20px; }
.play-screen .ultimate-button span { font-size: 10px; }
.play-screen .battle-tallies {
  position: absolute; z-index: 6; top: calc(var(--health-height) + 9px + env(safe-area-inset-top, 0px)); right: 12px;
  display: grid; grid-template-columns: minmax(66px, auto) minmax(55px, auto); gap: 15px;
  pointer-events: none; text-align: right; font-family: Arial, "Yu Gothic", Meiryo, sans-serif;
  color: #ffffff; text-shadow: 0 2px 2px #17231e, 1px 0 #17231e, -1px 0 #17231e;
}
.play-screen.boss-phase .battle-tallies { top: calc(var(--health-height) + var(--boss-height) + 9px + env(safe-area-inset-top, 0px)); }
.play-screen .battle-tallies span { display: block; font-size: 11px; line-height: 15px; }
.play-screen .battle-tallies b { display: block; font-size: 28px; line-height: 30px; font-variant-numeric: tabular-nums; }
.play-screen .battle-tallies div:last-child b { color: #ffd763; }
.play-screen .boss-warning-art-7 {
  position: relative; background-image: none !important; overflow: hidden;
}
.play-screen .boss-warning-art-7::before,
.play-screen .boss-warning-art-7::after {
  content: ""; position: absolute; top: 7%; bottom: 7%; width: 58%;
  background: url('../sprites/boss-bubble.png') center / contain no-repeat;
  filter: drop-shadow(0 0 28px #e00036) hue-rotate(225deg) saturate(1.75) brightness(.68);
}
.play-screen .boss-warning-art-7::before { left: -1%; }
.play-screen .boss-warning-art-7::after {
  right: -1%; transform: scaleX(-1);
  filter: drop-shadow(0 0 28px #35f0b0) hue-rotate(155deg) saturate(1.8) brightness(.82);
}
@media (max-width: 360px) {
  .play-screen .level-progress-hud { padding-left: 8px; padding-right: 8px; }
  .play-screen .arena-hud .hpbar b { font-size: 15px; }
}