/* SPIDEY LIFE PHASE 1 — gameplay-first action RPG vertical slice */

body:not([data-game-mode="MAP"]) #map,
body:not([data-game-mode="MAP"]) .map-mode-only { display: none !important; }
body[data-game-mode="MAP"] #map { display: block !important; }
body[data-game-mode="MAP"] .action-rpg-screen { display: none; }

/* Locked tracker shell: the blue hardware frame is part of the chosen layout. */
.tracker-viewport {
  padding: clamp(8px, 1.4vw, 18px);
  place-items: center;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(84,182,208,.05) 50%, transparent 50.2%),
    linear-gradient(rgba(84,182,208,.04) 1px, transparent 1px),
    #06101d;
  background-size: 100% 100%, 100% 8px, 100% 100%;
}

.tracker-device-frame {
  width: min(100%, 1420px);
  height: min(100%, 920px);
  grid-template-rows: 72px minmax(0,1fr);
  overflow: visible;
  border: 5px solid var(--tracker-outline);
  border-radius: 0;
  clip-path: var(--frame-cut);
  background: var(--tracker-blue);
  box-shadow:
    inset 0 0 0 5px var(--tracker-cyan),
    inset 0 0 0 9px #1b5069,
    0 10px 0 #02060a,
    0 22px 50px rgba(0,0,0,.65);
}

.tracker-device-frame::before {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: 80;
  border: 3px solid rgba(185,237,242,.4);
  clip-path: var(--frame-cut);
  pointer-events: none;
}

.frame-top-bar {
  min-height: 0;
  padding: 8px 16px;
  grid-template-columns: 58px minmax(0,1fr) auto;
  border: 0;
  background: linear-gradient(#3c98b8,#286f8f);
  box-shadow: inset 0 -5px 0 #16445b;
}

.brand-plaque { color: var(--tracker-ink); }
.tracker-wordmark { color: #fff; text-shadow: 3px 3px 0 #16445b; }
.brand-subtitle { color: #d7f5f5; }

.frame-main-content {
  margin: 0 14px 14px;
  border: 5px solid var(--tracker-outline);
  box-shadow: inset 0 0 0 3px #1e5269;
  background: var(--tracker-screen);
}

body[data-game-mode="MAP"] .map-status-card {
  transform: none;
  width: auto;
  text-align: left;
}

.action-rpg-screen {
  position: absolute;
  inset: 0 0 72px;
  z-index: 20;
  display: grid;
  grid-template-rows: auto auto minmax(210px,1fr) auto auto;
  gap: 6px;
  padding: 8px 12px 6px;
  overflow: hidden;
  color: #d9e0df;
  background: #050d18;
}

.game-hud-strip {
  display: grid;
  grid-template-columns: minmax(210px,1.1fr) 58px minmax(260px,1.6fr) minmax(180px,.8fr);
  gap: 6px;
  min-height: 54px;
}

.hud-avatar,.hud-stat,.hud-bars,.hud-economy,.quest-directive,.combat-info-panel,.combat-action-bar button,.ultimate-meter {
  border: 2px solid #05070b;
  box-shadow: inset 0 0 0 1px #397c9b, 2px 2px 0 #05070b;
  background: #102c45;
}

.hud-avatar { display:flex;align-items:center;gap:8px;padding:5px 8px;min-width:0; }
.hud-mask { display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:2px solid #05070b;background:#f0645c;color:#fff;font-size:22px;clip-path:polygon(50% 0,92% 20%,100% 66%,72% 100%,28% 100%,0 66%,8% 20%); }
.hud-avatar div { display:grid;min-width:0;gap:2px; }
.hud-avatar small,.hud-stat small,.hud-economy small { color:#7fbfd2;font:700 7px/1 "Silkscreen",monospace; }
.hud-avatar strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font:700 9px/1.2 "Press Start 2P",monospace; }
.hud-avatar em { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f2c06b;font:normal 7px/1 "Silkscreen",monospace; }
.hud-stat { display:grid;place-items:center;padding:4px; }
.hud-stat strong { color:#f2c06b;font:700 20px/1 "Press Start 2P",monospace; }

.hud-bars { display:grid;gap:3px;padding:5px 8px; }
.hud-bars label,.combat-info-panel label { display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:5px;font:700 7px/1 "Silkscreen",monospace; }
.hud-bars label>span,.combat-info-panel label>span { grid-column:3;color:#b9d8e2; }
.hud-bars label>i,.combat-info-panel label>i { grid-column:2;grid-row:1;display:block;height:8px;overflow:hidden;border:1px solid #05070b;background:#030912; }
.hud-bars label>i>b,.combat-info-panel label>i>b,.ultimate-meter>i>b { display:block;width:0;height:100%;transition:width .3s steps(8);background:#54b6d0; }
.hud-bars label:nth-child(2)>i>b { background:#83b96b; }
.hud-bars label:nth-child(3)>i>b { background:#d9e0df; }

.hud-economy { display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px; }
.hud-economy>span { display:grid;place-items:center;align-content:center;gap:4px;border-left:1px solid #31516a; }
.hud-economy>span:first-child { border:0; }
.hud-economy b { color:#f2c06b;font:700 13px/1 "Press Start 2P",monospace; }
.hud-economy i { font-style:normal;color:#83b96b; }

.quest-directive { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:6px 10px;background:#6e2e35;box-shadow:inset 0 0 0 1px #f0645c,2px 2px 0 #05070b; }
.quest-directive span,.quest-directive em { font:700 7px/1 "Silkscreen",monospace;font-style:normal; }
.quest-directive strong { text-align:center;color:#fff2df;font:700 9px/1 "Press Start 2P",monospace; }
.quest-directive em { color:#f2c06b; }

.action-combat-stage { position:relative;min-height:210px;overflow:hidden;border:3px solid #05070b;box-shadow:inset 0 0 0 2px #397c9b;background:#071426; }
.city-layer,.city-rain { position:absolute;inset:0;pointer-events:none; }
.city-layer--sky { background:radial-gradient(circle at 74% 20%,rgba(242,192,107,.22) 0 5%,transparent 5.5%),linear-gradient(#081426,#123450 62%,#071426); }
.city-layer--far { top:30%;opacity:.55;background:repeating-linear-gradient(90deg,transparent 0 26px,#152f46 26px 58px,transparent 58px 70px);clip-path:polygon(0 35%,8% 28%,8% 100%,14% 100%,14% 18%,21% 18%,21% 100%,29% 100%,29% 40%,37% 40%,37% 100%,45% 100%,45% 8%,53% 8%,53% 100%,64% 100%,64% 34%,72% 34%,72% 100%,80% 100%,80% 20%,88% 20%,88% 100%,95% 100%,95% 38%,100% 38%,100% 100%,0 100%); }
.city-layer--near { top:64%;background:linear-gradient(174deg,transparent 0 35%,#07101a 36%),repeating-linear-gradient(90deg,#10283a 0 54px,#081421 54px 58px);border-top:3px solid #2f5c70; }
.city-rain { opacity:.17;background:repeating-linear-gradient(105deg,transparent 0 22px,#9ed9e7 23px 24px,transparent 25px 48px);animation:city-rain .8s linear infinite; }
@keyframes city-rain { to { transform:translate(-28px,36px); } }
.combat-location { position:absolute;z-index:3;left:12px;top:9px;display:grid;gap:3px; }
.combat-location strong { color:#d9e0df;font:700 8px/1 "Press Start 2P",monospace; }
.combat-location span { color:#54b6d0;font:700 7px/1 "Silkscreen",monospace; }

.action-fighter--hero { z-index:5;left:7%;bottom:18px;width:28%; }
.action-fighter--hero .arena-hero-sprite { width:150px;height:112px;margin:0 auto -2px; }
.action-fighter--hero .hero-sprite-actor { background-image:url('../assets/spideytracker/combat-actions-sheet.png')!important; }
.action-fighter--enemy { z-index:5;right:26%;bottom:14px;width:26%; }
.action-fighter--enemy img { width:min(170px,85%);height:145px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(5px 6px 0 rgba(0,0,0,.5)); }
.action-fighter--enemy.enemy--grunt img { filter:hue-rotate(70deg) saturate(.65) brightness(.8) drop-shadow(5px 6px 0 rgba(0,0,0,.5));transform:scale(.72); }
.action-fighter--enemy.enemy--elite img { filter:hue-rotate(210deg) saturate(.8) drop-shadow(5px 6px 0 rgba(0,0,0,.5));transform:scale(.88); }
.action-fighter--enemy span,.action-fighter--hero>span { padding:4px 7px;font-size:7px; }
.combat-center-mark { position:absolute;z-index:4;left:47%;top:48%;transform:translate(-50%,-50%) rotate(-6deg);color:#f2c06b;text-shadow:4px 4px 0 #05070b;font:700 clamp(20px,3vw,38px)/1 "Press Start 2P",monospace; }

.combat-info-panel { position:absolute;z-index:7;right:10px;top:10px;bottom:10px;width:220px;padding:10px;display:grid;align-content:start;gap:7px;background:rgba(5,16,30,.94); }
.combat-info-panel>small { color:#f0645c;font:700 7px/1 "Silkscreen",monospace; }
.combat-info-panel>strong { color:#fff;font:700 10px/1.2 "Press Start 2P",monospace; }
.combat-info-panel label { grid-template-columns:48px 1fr auto; }
.combat-info-panel label>i>b { background:#f0645c; }
.combat-info-panel label:nth-of-type(2)>i>b { background:#f2c06b; }
.combat-info-panel dl { display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0; }
.combat-info-panel dl div { padding:5px;border:1px solid #31516a;background:#071426;text-align:center; }
.combat-info-panel dt { color:#718ca1;font:700 6px/1 "Silkscreen",monospace; }
.combat-info-panel dd { margin:3px 0 0;color:#f2c06b;font:700 7px/1 "Silkscreen",monospace; }
.combat-info-panel p { margin:0;padding:7px;border-left:3px solid #54b6d0;background:#071426;color:#9ed9e7;font:700 7px/1.35 "Silkscreen",monospace; }

.combat-action-bar { display:grid;grid-template-columns:repeat(5,1fr);gap:5px; }
.combat-action-bar button { min-height:50px;display:grid;grid-template-columns:26px 1fr;grid-template-rows:1fr auto;align-items:center;padding:5px 7px;color:#d9e0df;cursor:pointer; }
.combat-action-bar button:hover:not(:disabled) { background:#173d59;transform:translateY(-2px); }
.combat-action-bar button:disabled { opacity:.45;cursor:not-allowed;filter:grayscale(.6); }
.combat-action-bar svg { grid-row:1/3;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2; }
.combat-action-bar strong { font:700 8px/1 "Silkscreen",monospace; }
.combat-action-bar small { color:#83b96b;font:700 6px/1 "Silkscreen",monospace; }
.combat-action--ultimate { background:#6e2e35!important;box-shadow:inset 0 0 0 1px #f2c06b,2px 2px 0 #05070b!important; }
.combat-action--ultimate.ready { color:#071426;background:#f2c06b!important;animation:ultimate-ready .8s steps(2) infinite; }
.combat-action--ultimate.finisher-ready strong::after { content:' READY'; }
@keyframes ultimate-ready { 50% { filter:brightness(1.35); } }

.ultimate-meter { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:5px 8px; }
.ultimate-meter>span { font:700 7px/1 "Silkscreen",monospace;color:#f2c06b; }
.ultimate-meter>i { height:7px;border:1px solid #05070b;background:#030912; }
.ultimate-meter>i>b { background:#f2c06b; }
.ultimate-meter button { border:1px solid #f2c06b;background:#f0645c;color:#071426;padding:4px 8px;font:700 7px/1 "Silkscreen",monospace;cursor:pointer; }

.game-primary-nav { position:absolute;z-index:40;left:50%;bottom:7px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,minmax(88px,1fr));gap:4px;width:min(760px,calc(100% - 20px)); }
.game-primary-nav button { min-height:58px;border:2px solid #05070b;box-shadow:inset 0 0 0 1px #397c9b,2px 2px 0 #05070b;background:#d9e0df;color:#071426;cursor:pointer;font:700 7px/1 "Silkscreen",monospace; }
.game-primary-nav button svg { display:block;width:23px;height:23px;margin:0 auto 4px;fill:none;stroke:currentColor;stroke-width:2; }
.game-primary-nav button.active { background:#54b6d0; }
.game-primary-nav__arena { transform:translateY(-6px); }
.game-primary-nav__arena.active { background:#f0645c!important;box-shadow:inset 0 0 0 2px #f2c06b,3px 4px 0 #05070b!important; }

.game-panel-backdrop { position:absolute;z-index:80;inset:0;display:grid;place-items:center;padding:12px;background:rgba(1,6,12,.78);backdrop-filter:blur(4px); }
.game-panel-backdrop[hidden] { display:none; }
.game-panel { width:min(860px,96%);max-height:88%;overflow:hidden;border:3px solid #05070b;box-shadow:inset 0 0 0 2px #54b6d0,8px 8px 0 rgba(0,0,0,.6);background:#0b2034;color:#d9e0df; }
.game-panel>header { display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:2px solid #31516a;background:#071426; }
.game-panel h2 { margin:3px 0 0;color:#f2c06b;font:700 13px/1 "Press Start 2P",monospace; }
.game-panel header small { color:#54b6d0;font:700 7px/1 "Silkscreen",monospace; }
.game-panel header button { width:34px;height:34px;border:2px solid #05070b;background:#f0645c;color:#071426;cursor:pointer; }
#game-panel-tabs { display:flex;gap:4px;padding:7px;border-bottom:1px solid #31516a;overflow-x:auto; }
#game-panel-tabs button { flex:0 0 auto;padding:7px 10px;border:1px solid #31516a;background:#071426;color:#d9e0df;font:700 7px/1 "Silkscreen",monospace;cursor:pointer; }
#game-panel-tabs button.active { background:#54b6d0;color:#071426; }
.game-panel-content { max-height:58vh;overflow:auto;padding:12px; }
.life-os-app { width:100%;text-align:left;font:inherit; }
.game-card-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
.game-card { padding:10px;border:2px solid #05070b;box-shadow:inset 0 0 0 1px #31516a;background:#102c45; }
.game-card small { color:#54b6d0;font:700 7px/1 "Silkscreen",monospace; }
.game-card h3 { margin:7px 0;color:#fff;font:700 9px/1.3 "Press Start 2P",monospace; }
.game-card p { margin:0 0 9px;color:#aac2d0;font:500 11px/1.4 "Be Vietnam Pro",sans-serif; }
.game-card footer { color:#f2c06b;font:700 7px/1.3 "Silkscreen",monospace; }
.game-panel-action { width:100%;margin-top:10px;padding:10px;border:2px solid #05070b;background:#f0645c;color:#071426;cursor:pointer;font:700 8px/1 "Press Start 2P",monospace; }
.roster-card { display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:center; }
.roster-sprite { width:62px;height:62px;background-image:url('../assets/spideytracker/spider-allies-sheet.png');background-size:1000% 1000%;image-rendering:pixelated;border:2px solid #05070b;background-color:#d9e0df; }
.game-stat-list { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px; }
.game-stat-list span { padding:8px;border:1px solid #31516a;background:#071426;text-align:center;font:700 7px/1.3 "Silkscreen",monospace; }

.game-settings-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.game-setting-row { min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:2px solid #05070b;box-shadow:inset 0 0 0 1px var(--panel-border);background:#102c45;color:#fff;font:700 8px/1.2 "Silkscreen",monospace; }
.game-setting-row--wide { grid-column:1/-1; }
.game-setting-row input[type="checkbox"] { width:22px;height:22px;accent-color:var(--hero-primary); }
.game-setting-row input[type="range"] { width:min(320px,60%);accent-color:var(--ultimate); }
.game-setting-row select { min-width:130px;padding:7px;border:1px solid var(--panel-border);background:var(--game-bg);color:#fff;font:700 8px/1 "Silkscreen",monospace; }
.game-settings-note { margin:10px 0 0;padding:9px;border-left:3px solid var(--ultimate);background:#071426;color:#aac2d0;font:500 11px/1.4 "Be Vietnam Pro",sans-serif; }
.game-save-tools { display:grid;gap:8px; }
.game-panel-file { display:block;text-align:center; }
.game-panel-file input { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.game-panel-action--danger { background:#8f3541; }

.game-no-comic .comic-vfx { display:none!important; }
.game-no-shake .combat-impact { animation:none!important; }
.game-reduce-motion .city-rain,
.game-reduce-motion .combat-action--ultimate.ready,
.game-reduce-motion .combat-toast { animation:none!important; }

.combat-toast { position:absolute;z-index:100;left:50%;top:18%;transform:translateX(-50%);padding:9px 14px;border:2px solid #05070b;background:#f2c06b;color:#071426;box-shadow:4px 4px 0 #05070b;font:700 8px/1 "Press Start 2P",monospace;animation:toast-in .9s steps(5) forwards; }
@keyframes toast-in { 0%{transform:translate(-50%,-12px);opacity:0}20%,75%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,-8px);opacity:0} }

@media (max-width:800px) {
  .tracker-viewport { padding:0; }
  .tracker-device-frame { width:100%;height:100dvh;grid-template-rows:64px minmax(0,1fr);border-width:3px;box-shadow:inset 0 0 0 4px var(--tracker-cyan),inset 0 0 0 7px #1b5069; }
  .frame-top-bar { min-height:0;padding:6px 9px;grid-template-columns:48px minmax(0,1fr) 48px;gap:6px; }
  .frame-main-content { margin:0 7px 7px;border-width:4px; }
  .header-sound-toggle { width:44px;min-width:44px;padding:0; }
  .header-sound-toggle span { display:none; }
  .action-rpg-screen { inset:0 0 66px;padding:6px;grid-template-rows:auto auto minmax(250px,1fr) auto auto; }
  .game-hud-strip { grid-template-columns:1fr 48px 1.4fr; }
  .hud-economy { display:none; }
  .hud-avatar em { display:none; }
  .combat-info-panel { top:auto;left:6px;right:6px;bottom:6px;width:auto;grid-template-columns:auto 1fr;gap:4px;padding:6px; }
  .combat-info-panel>strong { font-size:8px; }
  .combat-info-panel label,.combat-info-panel dl,.combat-info-panel p { display:none; }
  .action-fighter--enemy { right:8%;bottom:48px;width:34%; }
  .action-fighter--hero { left:2%;bottom:48px;width:38%; }
  .action-fighter--hero .arena-hero-sprite { width:120px;height:90px; }
  .combat-center-mark { left:50%;top:46%; }
  .combat-action-bar { gap:3px; }
  .combat-action-bar button { min-width:0;min-height:48px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:3px; }
  .combat-action-bar svg { width:18px;height:18px; }
  .combat-action-bar strong { font-size:6px; }
  .combat-action-bar small { font-size:5px; }
  .game-primary-nav { width:calc(100% - 10px);bottom:5px;grid-template-columns:repeat(5,1fr);gap:2px; }
  .game-primary-nav button { min-width:0;min-height:52px;padding:3px 1px;font-size:5px; }
  .game-primary-nav button svg { width:19px;height:19px; }
  .game-card-grid { grid-template-columns:1fr; }
  .game-settings-grid { grid-template-columns:1fr; }
  .game-setting-row--wide { grid-column:auto; }
}

@media (max-width:500px) {
  .game-hud-strip { grid-template-columns:1fr 42px 1.3fr; }
  .hud-avatar { padding:4px; }
  .hud-mask { width:30px;height:30px;flex-basis:30px; }
  .hud-avatar strong { font-size:6px; }
  .hud-bars { padding:4px; }
  .hud-bars label { grid-template-columns:26px 1fr;font-size:5px; }
  .hud-bars label>span { display:none; }
  .quest-directive strong { font-size:7px; }
  .quest-directive span { display:none; }
  .action-combat-stage { min-height:250px; }
}

@media (prefers-reduced-motion:reduce) { .city-rain,.combat-action--ultimate.ready,.combat-toast { animation:none!important; } }

/* Single-version polish pass: keep the tracker identity, tighten the arena composition. */
.action-rpg-screen {
  gap: 8px;
  padding: 10px 14px 8px;
  grid-template-rows: auto auto minmax(300px, 1fr) auto auto;
}

.game-hud-strip {
  grid-template-columns: minmax(230px, .95fr) 62px minmax(320px, 1.6fr) minmax(200px, .8fr);
  gap: 8px;
}

.quest-directive {
  min-height: 26px;
}

.action-combat-stage {
  min-height: 330px;
  background:
    radial-gradient(circle at 36% 54%, rgba(84,182,208,.11), transparent 19%),
    radial-gradient(circle at 70% 58%, rgba(240,100,92,.1), transparent 18%),
    linear-gradient(#02060b 0 58%, #050d18 58% 100%);
}

.action-fighter--hero {
  left: 13%;
  bottom: 34px;
  width: 27%;
}

.action-fighter--enemy {
  right: 25%;
  bottom: 34px;
  width: 24%;
}

.action-fighter--hero .arena-hero-sprite {
  width: 176px;
  height: 130px;
}

.combat-sigil {
  width: 138px;
  height: 138px;
}

.combat-sigil--threat {
  width: 126px;
  height: 126px;
}

.combat-info-panel {
  width: 232px;
}

.combat-action-bar {
  gap: 8px;
}

.combat-action-bar button,
.game-primary-nav button {
  min-width: 0;
}

.game-primary-nav {
  bottom: 11px;
}

@media (max-width: 800px) {
  .action-rpg-screen {
    inset: 0 0 66px;
    padding: 6px 7px 6px;
    gap: 6px;
    grid-template-rows: auto auto minmax(330px, 1fr) auto auto;
  }

  .game-hud-strip {
    grid-template-columns: minmax(92px, 1fr) 48px minmax(128px, 1.35fr);
    gap: 5px;
    min-height: 50px;
  }

  .hud-avatar {
    gap: 6px;
    padding: 4px 5px;
  }

  .hud-avatar strong {
    max-width: 68px;
    font-size: 6px;
  }

  .hud-avatar small,
  .hud-stat small {
    font-size: 6px;
  }

  .hud-bars label {
    grid-template-columns: 28px 1fr auto;
    gap: 4px;
    font-size: 5px;
  }

  .quest-directive {
    grid-template-columns: 1fr auto;
    min-height: 24px;
    padding: 5px 7px;
  }

  .quest-directive span {
    display: none;
  }

  .quest-directive strong {
    text-align: left;
    font-size: 7px;
    line-height: 1.25;
  }

  .quest-directive em {
    font-size: 6px;
    white-space: nowrap;
  }

  .action-combat-stage {
    min-height: 330px;
  }

  .combat-location {
    left: 10px;
    top: 9px;
  }

  .combat-location strong {
    font-size: 7px;
  }

  .action-fighter--hero {
    left: 4%;
    bottom: 68px;
    width: 42%;
  }

  .action-fighter--enemy {
    right: 7%;
    bottom: 66px;
    width: 37%;
  }

  .action-fighter--hero .arena-hero-sprite {
    width: 144px;
    height: 108px;
  }

  .combat-sigil {
    width: 108px;
    height: 108px;
  }

  .combat-sigil--threat {
    width: 94px;
    height: 94px;
  }

  .combat-info-panel {
    left: 8px;
    right: 8px;
    bottom: 8px;
    min-height: 38px;
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .combat-info-panel > small {
    align-self: center;
  }

  .combat-action-bar {
    gap: 4px;
  }

  .combat-action-bar button {
    min-height: 50px;
  }

  .ultimate-meter {
    min-height: 22px;
    padding-block: 4px;
  }

  .game-primary-nav {
    bottom: 6px;
  }
}

@media (max-width: 500px) {
  .action-rpg-screen {
    grid-template-rows: auto auto minmax(340px, 1fr) auto auto;
  }

  .action-combat-stage {
    min-height: 340px;
  }

  .hud-mask {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .hud-avatar strong {
    max-width: 54px;
  }

  .action-fighter--hero {
    left: 1%;
    bottom: 72px;
  }

  .action-fighter--enemy {
    right: 3%;
    bottom: 72px;
  }

  .action-fighter--hero .arena-hero-sprite {
    width: 136px;
    height: 102px;
  }

  .combat-sigil {
    width: 98px;
    height: 98px;
  }

  .combat-sigil--threat {
    width: 84px;
    height: 84px;
  }

  .combat-action-bar strong {
    font-size: 5px;
  }
}