:root {
  --bg: #0d0028;
  --neon-pink: #ff5cf2;
  --neon-cyan: #4af2ff;
  --neon-purple: #a45cff;
  --neon-yellow: #fff36c;
  --panel: rgba(20, 4, 50, 0.7);
  --panel-edge: #ff5cf2;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "VT323", "Courier New", monospace;
  background: var(--bg);
  color: #fff;
  overflow-x: hidden;
}

/* Shop: keep the whole flow on one viewport (no page scroll). */
body:has(#shop:not(.hidden)) {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body:has(#shop:not(.hidden)) main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.65rem 1.25rem 0.5rem;
}
body:has(#shop:not(.hidden)) header {
  padding: 0.45rem 1.25rem;
  flex-shrink: 0;
}
body:has(#shop:not(.hidden)) header h1 {
  font-size: clamp(1rem, 3.5vw, 1.55rem);
}
body:has(#shop:not(.hidden)) .hud {
  margin-bottom: 0.35rem;
  padding: 0.35rem 0.75rem;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  body:has(#shop:not(.hidden)) header {
    padding: 0.35rem 0.85rem;
  }
  body:has(#shop:not(.hidden)) .header-top {
    flex-direction: column;
    align-items: stretch;
  }
}
#bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at top, #2a0a4f 0%, #0d0028 60%, #02000c 100%),
    repeating-linear-gradient(0deg, rgba(255,92,242,0.05) 0 2px, transparent 2px 4px);
  background-blend-mode: screen;
}
#bg::after {
  content:""; position: fixed; inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(74,242,255,0.1) 100%),
    repeating-linear-gradient(90deg, rgba(255,92,242,0.04) 0 1px, transparent 1px 40px);
  pointer-events: none;
}

header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 2rem 0.85rem;
  border-bottom: 2px solid var(--neon-pink);
  background: linear-gradient(90deg, rgba(255,92,242,0.15), transparent);
}
.header-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 3.15rem;
  grid-template-areas:
    "title nav"
    "profile leaderboard";
  align-items: center;
  gap: 0.4rem 1.25rem;
  width: 100%;
}
.header-left {
  display: contents;
  min-width: 0;
}
.title-stack {
  display: contents;
  min-width: 0;
}
.title-stack h1 {
  grid-area: title;
  margin: 0;
  line-height: 1.15;
}
.profile-actions {
  grid-area: profile;
  justify-self: start;
  display: inline-flex;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 0;
}
.profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: min(100%, 13rem);
  min-height: 3.15rem;
  padding: 0.28rem 0.75rem 0.28rem 0.35rem;
  border: 1px solid var(--neon-cyan);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(74,242,255,0.18), rgba(255,92,242,0.14));
  color: #fff;
  box-shadow:
    0 0 12px rgba(74, 242, 255, 0.32),
    inset 0 0 10px rgba(255, 92, 242, 0.18);
  text-align: left;
}
.help-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 3.15rem;
  width: 3.15rem;
  height: 3.15rem;
  aspect-ratio: 1;
  min-height: 3.15rem;
  padding: 0;
  border-color: var(--neon-cyan);
  color: var(--neon-yellow);
  background: linear-gradient(90deg, rgba(74,242,255,0.18), rgba(255,92,242,0.14));
  font-size: 1.45rem;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 243, 108, 0.6);
  box-shadow:
    0 0 12px rgba(74, 242, 255, 0.32),
    inset 0 0 10px rgba(255, 92, 242, 0.18);
}
.help-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 18px rgba(74, 242, 255, 0.5),
    inset 0 0 12px rgba(255, 243, 108, 0.25);
}
.profile-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 18px rgba(74, 242, 255, 0.5),
    inset 0 0 12px rgba(255, 243, 108, 0.25);
}
.profile-pill-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.05;
}
.profile-pill-label {
  color: var(--neon-cyan);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}
.profile-pill-name {
  max-width: 13rem;
  color: var(--neon-yellow);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 243, 108, 0.55);
}
.profile-avatar,
.identity-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--neon-pink);
  border-radius: 999px;
  background: radial-gradient(circle at 50% 35%, rgba(74,242,255,0.24), rgba(0,0,0,0.45));
  overflow: hidden;
  box-shadow: 0 0 10px rgba(255, 92, 242, 0.36);
}
.profile-avatar img,
.identity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 4px rgba(74,242,255,0.55));
}
.profile-avatar--small,
.identity-avatar {
  width: 2.45rem;
  height: 2.45rem;
}
.profile-avatar--large {
  width: 5rem;
  height: 5rem;
}
.profile-avatar--grid {
  width: 4.2rem;
  height: 4.2rem;
}
.lb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.15rem;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  padding: 0.28rem 0.95rem;
  background: linear-gradient(90deg, rgba(255,92,242,0.25), rgba(74,242,255,0.18));
  border: 1px solid var(--neon-cyan);
  color: var(--neon-yellow);
  text-shadow: 0 0 6px var(--neon-yellow);
  box-shadow:
    0 0 12px rgba(255, 92, 242, 0.45),
    inset 0 0 10px rgba(74, 242, 255, 0.25);
  transition: transform .12s, box-shadow .12s;
  cursor: pointer;
  font: inherit;
  text-transform: lowercase;
}
.lb-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 18px rgba(255, 92, 242, 0.7),
    inset 0 0 12px rgba(255, 243, 108, 0.35);
}
header h1 {
  font-size: 2rem; letter-spacing: 0.2em; margin: 0;
  text-shadow: 0 0 10px var(--neon-pink), 0 0 24px var(--neon-purple);
  min-width: 0;
}
.site-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  font-size: clamp(0.78rem, 1.9vw, 0.92rem);
  line-height: 1.15;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: lowercase;
  white-space: nowrap;
}
.site-stats b {
  color: var(--neon-yellow);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 243, 108, 0.45);
}
.header-right {
  display: contents;
}
#navControls {
  display: contents;
}
.nav-controls-row {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}
#navControls .lb-pill {
  align-self: stretch;
  text-align: center;
  width: 100%;
}
.leaderboard-row {
  grid-area: leaderboard;
  justify-self: stretch;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}
.leaderboard-row .site-stats {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.75rem);
  transform: translateY(-50%);
}
.connection-pill {
  min-width: 6.8rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .28rem .85rem .32rem;
  background: rgba(0,0,0,.52);
  color: var(--neon-yellow);
  font-size: .95rem;
  line-height: 1;
  letter-spacing: .08em;
  text-align: center;
  text-transform: lowercase;
  box-shadow: 0 0 10px rgba(255,243,108,.26), inset 0 0 8px rgba(255,243,108,.18);
  white-space: nowrap;
}
.connection-pill--online {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(74,242,255,.36), inset 0 0 8px rgba(74,242,255,.18);
}
.connection-pill--offline {
  border-color: var(--neon-pink);
  color: var(--neon-pink);
  box-shadow: 0 0 10px rgba(255,92,242,.36), inset 0 0 8px rgba(255,92,242,.18);
}
.bgm-control {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .45rem;
  border: 1px solid rgba(74,242,255,.45);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(74,242,255,0.14), rgba(0,0,0,.28));
}
.bgm-mute {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
}
.bgm-mute:hover {
  background: transparent;
  box-shadow: none;
}
#bgmVolume {
  --bgm-volume-pct: 35%;
  width: 6.8rem;
  margin: 0;
  padding: 0;
  border: 0;
  height: 1.9rem;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
#bgmVolume::-webkit-slider-runnable-track {
  height: 0.42rem;
  border: 1px solid rgba(74,242,255,.7);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--neon-cyan) 0 var(--bgm-volume-pct),
    rgba(0,0,0,.48) var(--bgm-volume-pct) 100%
  );
}
#bgmVolume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0.72rem;
  height: 1.2rem;
  margin-top: calc((0.42rem - 1.2rem) / 2);
  border: 1px solid var(--neon-yellow);
  border-radius: 999px;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(74,242,255,.65);
}
#bgmVolume::-moz-range-track {
  height: 0.42rem;
  border: 1px solid rgba(74,242,255,.7);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--neon-cyan) 0 var(--bgm-volume-pct),
    rgba(0,0,0,.48) var(--bgm-volume-pct) 100%
  );
}
#bgmVolume::-moz-range-thumb {
  width: 0.72rem;
  height: 1.2rem;
  border: 1px solid var(--neon-yellow);
  border-radius: 999px;
  background: var(--neon-cyan);
  box-shadow: 0 0 8px rgba(74,242,255,.65);
}
#status {
  flex: 0 0 auto;
  min-width: min(100%, 12rem);
  margin-left: 0;
  text-align: right;
  font-size: clamp(0.95rem, 2.6vw, 1.2rem);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  word-break: break-word;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}
#status:empty {
  display: none;
}
#status.status--error {
  color: var(--neon-pink);
  text-shadow: 0 0 10px rgba(255, 92, 242, 0.85);
}
#status.status--info {
  color: var(--neon-yellow);
  text-shadow: 0 0 8px rgba(255, 243, 108, 0.5);
}
@media (max-width: 720px) {
  header {
    padding: 1rem 1rem;
  }
  .header-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .header-left {
    display: block;
  }
  .title-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
  .title-stack h1,
  .profile-actions,
  .nav-controls-row,
  .leaderboard-row {
    grid-area: auto;
  }
  .header-right {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  header h1 {
    font-size: clamp(1.05rem, 5vw, 1.5rem);
    letter-spacing: 0.12em;
    text-align: left;
  }
  .site-stats {
    align-items: flex-end;
    text-align: right;
  }
  #navControls {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
  }
  .nav-controls-row {
    justify-content: center;
  }
  .leaderboard-row {
    justify-content: flex-end;
    width: 100%;
    gap: 0.75rem;
  }
  .leaderboard-row .site-stats {
    position: static;
    transform: none;
  }
  #status {
    margin-left: 0;
    text-align: center;
    width: 100%;
    font-size: clamp(1rem, 3.8vw, 1.15rem);
  }
}
.dim { color: var(--neon-cyan); opacity: 0.7; font-size: 0.7em; }
.site-stats.dim { font-size: clamp(0.78rem, 1.9vw, 0.92rem); }

main { padding: 2rem; max-width: 1100px; margin: 0 auto; }
.screen { animation: fadein .25s ease; }
.hidden { display: none !important; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none; } }

h2, h3, h4 { color: var(--neon-cyan); letter-spacing: 0.1em; text-transform: lowercase; }
h2 { text-shadow: 0 0 8px var(--neon-cyan); }
h4 { margin: .4rem 0; opacity: .85; }

button {
  background: var(--panel);
  border: 1px solid var(--neon-pink);
  color: #fff;
  font: inherit; font-size: 1.1rem;
  padding: .5rem 1.2rem;
  cursor: pointer;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  box-shadow: 0 0 8px rgba(255,92,242,0.4) inset, 0 0 8px rgba(255,92,242,0.2);
}
button:hover { background: rgba(255,92,242,0.2); }
button.primary { border-color: var(--neon-yellow); color: var(--neon-yellow); box-shadow: 0 0 12px var(--neon-yellow) inset; }
button.ghost { opacity: 0.7; border-color: var(--neon-cyan); }
button.danger { border-color: var(--neon-pink); color: var(--neon-pink); box-shadow: 0 0 12px rgba(255,92,242,0.75) inset; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

input {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--neon-cyan);
  color: var(--neon-yellow);
  font: inherit; font-size: 1.4rem;
  padding: .4rem .8rem;
  margin-right: .5rem;
  outline: none;
}

.row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: stretch; }
.controls { margin-top: 1rem; }

.hud {
  display: flex; gap: 2rem; flex-wrap: wrap;
  padding: .5rem 1rem; margin-bottom: 1rem;
  border: 1px solid var(--neon-cyan); background: var(--panel);
  font-size: 1.1rem;
  align-items: center;
}
.hud b { color: var(--neon-yellow); }
#hudMoney {
  display: inline-block;
  transition: color 0.15s ease;
}
#hudMoney.money-flash {
  color: var(--neon-pink);
  animation: money-shake 0.55s ease;
}
@keyframes money-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-5px); }
  36% { transform: translateX(5px); }
  54% { transform: translateX(-3px); }
  72% { transform: translateX(3px); }
}
.player-controls {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.player-controls input {
  width: 12rem;
  margin-right: 0;
  font-size: 1.1rem;
}
.player-controls button {
  padding: .25rem .7rem;
  font-size: .95rem;
}

.card {
  position: relative;
  width: 130px; min-height: 180px;
  border: 1px solid var(--neon-pink);
  background: var(--panel);
  padding: .4rem; text-align: center;
  cursor: pointer;
  user-select: none;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .1s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 0 12px var(--neon-pink); }
.card img, .team-slot img.portrait {
  width: 96px; height: 96px;
  object-fit: contain; object-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(74,242,255,0.4));
}
.card .name { font-size: 1rem; color: var(--neon-cyan); margin-top: .2rem; min-height: 1.4em; }
.card .cost { color: var(--neon-yellow); }
.card .stats { font-size: 0.85rem; opacity: 0.85; margin-top: .2rem; }
.char-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.08rem 0.35rem;
  width: 100%;
  line-height: 1.05;
}
.char-stats span {
  min-width: 0;
  white-space: nowrap;
  text-align: center;
}
.card.empty { opacity: 0.35; pointer-events: none; }

.card.cant-afford {
  opacity: 0.58;
  cursor: not-allowed;
  filter: grayscale(0.25) brightness(0.92);
}
.card.cant-afford:hover {
  transform: none;
  box-shadow: none;
}
.card.cant-afford .cost::after {
  content: " · can't afford";
  display: block;
  font-size: 0.72rem;
  color: var(--neon-pink);
  margin-top: 0.15rem;
  letter-spacing: 0.06em;
}

.team-slot {
  position: relative;
  flex: 1 1 0;
  min-width: 74px;
  max-width: 130px;
  min-height: 210px;
  border: 1px dashed var(--neon-cyan);
  background: rgba(74,242,255,0.05);
  display: flex; flex-direction: column; align-items: center;
  padding: .4rem;
  cursor: pointer;
}
#teamRow {
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
}
#teamDirections {
  display: flex;
  justify-content: space-between;
  margin: -.4rem 0 .35rem;
  color: var(--neon-cyan);
  letter-spacing: .1em;
  text-transform: lowercase;
}
#teamDirections span:last-child {
  color: var(--neon-yellow);
  text-shadow: 0 0 6px var(--neon-yellow);
}
.team-slot.empty { opacity: 0.4; }
.team-slot .hat, .team-slot .left-hand, .team-slot .right-hand {
  position: absolute; width: 32px; height: 32px;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 4px var(--neon-yellow));
  pointer-events: none;
}
.team-slot .hat { top: 0px; left: 50%; transform: translateX(-50%); }
.team-slot .left-hand { bottom: 80px; left: 4px; }
.team-slot .right-hand { bottom: 80px; right: 4px; }

#shopInventory {
  margin: 1rem 0;
  padding: .8rem;
  border: 2px solid var(--neon-pink);
  background: rgba(255,92,242,0.06);
  box-shadow: 0 0 16px rgba(255,92,242,0.18) inset;
  transition: background .15s, color .15s, border-color .15s;
}
#shopInventory.drag-over {
  background: rgba(255,92,242,0.3);
  color: var(--neon-yellow);
  border-style: dashed;
  box-shadow: 0 0 16px var(--neon-pink) inset;
}
.inventory-section + .inventory-section { margin-top: .8rem; }

.item-card { width: 90px; min-height: 130px; }
.item-card img { width: 56px; height: 56px; }
.equip-mode .team-slot { border-color: var(--neon-yellow); animation: pulse 1s infinite; }

.team-slot.front {
  border: 2px solid var(--neon-yellow);
  box-shadow: 0 0 16px var(--neon-yellow), inset 0 0 12px rgba(255,243,108,0.2);
}
.team-slot .front-tag {
  position: absolute; top: 4px; right: 4px;
  font-size: 0.7rem; letter-spacing: 0.15em;
  color: #0d0028; background: var(--neon-yellow);
  padding: 1px 6px; border-radius: 2px;
  box-shadow: 0 0 8px var(--neon-yellow);
}
.team-slot.dragging { opacity: 0.4; }
.team-slot.drag-over { outline: 2px dashed var(--neon-cyan); outline-offset: -4px; }
.item-sockets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .25rem;
  width: 100%;
  margin-top: .35rem;
}
.item-socket {
  min-height: 38px;
  border: 1px dashed rgba(74,242,255,.65);
  background: rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
  font-size: .65rem;
  text-transform: lowercase;
}
.item-socket img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 4px var(--neon-yellow));
  pointer-events: none;
}
.item-socket.filled { cursor: grab; border-color: var(--neon-yellow); }
.item-socket.drag-over { outline: 2px solid var(--neon-yellow); outline-offset: -2px; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 4px var(--neon-yellow); } 50% { box-shadow: 0 0 20px var(--neon-yellow); } }

#battleCanvas, #goReplayCanvas {
  display: block; width: 100%;
  border: 2px solid var(--neon-pink);
  background: linear-gradient(180deg, #16003e 0%, #4a0058 60%, #ff5cf2 100%);
  image-rendering: pixelated;
  margin: 1rem 0;
  box-shadow: 0 0 30px var(--neon-pink);
}
#goReplayCanvas {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 24px var(--neon-cyan);
}
.go-title {
  font-size: 4.5rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-align: center;
  margin: 0.4rem 0 0.2rem;
  line-height: 1;
}
.go-title-defeat {
  color: var(--neon-pink);
  text-shadow: 0 0 18px var(--neon-pink), 0 0 32px var(--neon-pink);
}
.go-title-victory {
  background-image: linear-gradient(90deg, #fff36c, #ff5cf2, #4af2ff, #66ff99, #fff36c);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ultimateShimmer 2.4s linear infinite, ultimatePulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px #fff36c) drop-shadow(0 0 32px #ff5cf2);
}
.go-title-victory::after {
  content: "✦ ✦ ✦";
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.6em;
  background: none;
  -webkit-text-fill-color: #fff36c;
  color: #fff36c;
  margin-top: 0.4rem;
  animation: ultimateSparkle 1.1s ease-in-out infinite alternate;
}
@keyframes ultimateShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes ultimatePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes ultimateSparkle {
  0% { opacity: 0.4; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(-2px); }
}
.go-subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: var(--neon-cyan);
  margin: 0.2rem 0;
}
.go-record {
  text-align: center;
  font-size: 1.05rem;
  color: var(--neon-yellow);
  letter-spacing: 0.08em;
  margin: 0.1rem 0 0.6rem;
}
.vs { display: flex; gap: 1rem; justify-content: center; align-items: center; font-size: 1.4rem; color: var(--neon-yellow); }
#battleLog { max-height: 120px; overflow-y: auto; padding: .4rem; border: 1px solid var(--neon-cyan); background: rgba(0,0,0,0.4); font-size: 0.95rem; }
#battleLog div { padding: 2px 0; }

.hint { color: var(--neon-cyan); opacity: 0.7; font-size: 0.9rem; }

/* —— Shop screen: denser layout so team + inventory + controls fit one view —— */
#shop.screen {
  --shop-team-slot-min: 74px;
  --shop-team-slot-height: 148px;
  --shop-team-pad-y: 0.3rem;
  --shop-team-pad-x: 0.35rem;
  --shop-team-portrait: 68px;
  --shop-team-name-font: 0.82rem;
  --shop-team-stat-font: 0.72rem;
  --shop-team-equip-bottom: 52px;
  --shop-team-equip-size: 26px;
  --shop-socket-height: 28px;
  --shop-socket-font: 0.58rem;
  --shop-socket-img: 22px;
  --shop-row-gap: 0.45rem;
  --shop-card-width: 108px;
  --shop-card-height: 118px;
  --shop-card-pad: 0.3rem;
  --shop-card-img: 64px;
  --shop-card-name-font: 0.82rem;
  --shop-card-stat-font: 0.72rem;
  --shop-card-cost-font: 0.78rem;
  --shop-item-card-width: 76px;
  --shop-item-card-height: 96px;
  --shop-item-card-img: 44px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
#shop.screen > h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}
#shop.screen #teamDirections {
  margin: 0 0 0.15rem;
  font-size: 0.82rem;
  line-height: 1.2;
}
#shop.screen #teamRow {
  flex-shrink: 0;
}
#shop.screen #teamRow .team-slot {
  min-width: var(--shop-team-slot-min);
  min-height: var(--shop-team-slot-height);
  padding: var(--shop-team-pad-y) var(--shop-team-pad-x);
}
#shop.screen #teamRow .team-slot img.portrait {
  width: var(--shop-team-portrait);
  height: var(--shop-team-portrait);
}
#shop.screen .team-slot .name {
  font-size: var(--shop-team-name-font);
  margin-top: 0.1rem;
}
#shop.screen .team-slot .stats,
#shop.screen .team-slot .cost {
  font-size: var(--shop-team-stat-font);
  line-height: 1.15;
}
#shop.screen .team-slot .left-hand,
#shop.screen .team-slot .right-hand {
  bottom: var(--shop-team-equip-bottom);
  width: var(--shop-team-equip-size);
  height: var(--shop-team-equip-size);
}
#shop.screen .item-sockets {
  margin-top: 0.15rem;
  gap: 0.12rem;
}
#shop.screen .item-socket {
  min-height: var(--shop-socket-height);
  font-size: var(--shop-socket-font);
}
#shop.screen .item-socket img {
  width: var(--shop-socket-img);
  height: var(--shop-socket-img);
}
#shop.screen .team-slot .front-tag {
  font-size: 0.62rem;
  padding: 0 4px;
  top: 2px;
  right: 2px;
}

#shop #shopInventory {
  margin: 0.25rem 0 0.15rem;
  padding: 0.45rem 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
#shop #shopInventory > h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  line-height: 1.15;
  flex-shrink: 0;
}
#shop #shopInventory .inventory-section {
  flex: 0 0 auto;
}
#shop #shopInventory .inventory-section + .inventory-section {
  margin-top: 0.35rem;
}
#shop #shopInventory .inventory-section h4 {
  margin: 0.1rem 0 0.2rem;
  font-size: 0.85rem;
}
#shop #shopChars,
#shop #shopItems {
  gap: var(--shop-row-gap);
}
#shop #shopInventory .card {
  width: var(--shop-card-width);
  min-height: var(--shop-card-height);
  padding: var(--shop-card-pad);
}
#shop #shopInventory .card img {
  width: var(--shop-card-img);
  height: var(--shop-card-img);
}
#shop #shopInventory .card .name {
  font-size: var(--shop-card-name-font);
  min-height: 1.2em;
}
#shop #shopInventory .card .stats {
  font-size: var(--shop-card-stat-font);
  margin-top: 0.1rem;
}
#shop #shopInventory .card .cost {
  font-size: var(--shop-card-cost-font);
}
#shop #shopInventory .item-card {
  width: var(--shop-item-card-width);
  min-height: var(--shop-item-card-height);
}
#shop #shopInventory .item-card img {
  width: var(--shop-item-card-img);
  height: var(--shop-item-card-img);
}

#shop.screen .controls {
  margin-top: 0.35rem;
  flex-shrink: 0;
}
#shop.screen .controls button {
  font-size: 0.95rem;
  padding: 0.35rem 0.85rem;
}
#shop.screen .hint {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.25;
  flex-shrink: 0;
}
.quit-run-button {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 30;
  border-color: var(--neon-pink);
  color: var(--neon-pink);
  background: rgba(12, 0, 32, 0.88);
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}
.modal-panel {
  position: relative;
  width: min(440px, 100%);
  border: 2px solid var(--neon-pink);
  background: rgba(12, 0, 32, 0.96);
  padding: 1.25rem;
  box-shadow: 0 0 28px rgba(255,92,242,0.38), inset 0 0 18px rgba(74,242,255,0.14);
}
.modal-panel h2 {
  margin: 0 0 0.6rem;
}
.modal-panel p {
  margin: 0;
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
}
.modal-actions {
  justify-content: flex-end;
}
/* —— Leaderboard modal —— */
.modal-panel.lb-panel {
  width: min(640px, 100%);
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 2px solid var(--neon-cyan);
  background:
    radial-gradient(ellipse at top, rgba(255,92,242,0.18), transparent 65%),
    linear-gradient(180deg, rgba(20, 0, 50, 0.97), rgba(8, 0, 28, 0.98));
  box-shadow:
    0 0 36px rgba(255, 92, 242, 0.5),
    0 0 60px rgba(74, 242, 255, 0.25),
    inset 0 0 28px rgba(255, 92, 242, 0.12);
  position: relative;
  overflow: hidden;
}
.modal-panel.lb-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(74, 242, 255, 0.04) 0 2px,
    transparent 2px 5px
  );
  mix-blend-mode: screen;
}
.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem 0.55rem;
  border-bottom: 1px solid rgba(255, 92, 242, 0.4);
  position: relative;
}
.lb-header h2 {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: 0.32em;
  color: var(--neon-pink);
  text-shadow:
    0 0 10px var(--neon-pink),
    0 0 24px rgba(164, 92, 255, 0.6);
}
.lb-close {
  background: transparent;
  border: 1px solid var(--neon-pink);
  color: var(--neon-pink);
  padding: 0.15rem 0.55rem;
  font-size: 1rem;
  letter-spacing: 0;
  box-shadow: 0 0 8px rgba(255, 92, 242, 0.45);
}
.lb-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-bottom: 1px solid rgba(74, 242, 255, 0.25);
  position: relative;
  flex-wrap: wrap;
}
.lb-toolbar button {
  font-size: 0.85rem;
  padding: 0.3rem 0.75rem;
  letter-spacing: 0.1em;
}
.lb-arrow {
  min-width: 2.4rem;
  font-size: 0.95rem;
  padding: 0.25rem 0.6rem;
}
.lb-spacer { flex: 1; }
.lb-rank-info {
  font-size: 0.85rem;
  color: var(--neon-yellow);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  text-shadow: 0 0 6px rgba(255, 243, 108, 0.4);
  opacity: 0.95;
}

.lb-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.4rem 0.6rem 0.8rem;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--neon-pink) transparent;
}
.lb-scroll::-webkit-scrollbar { width: 8px; }
.lb-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.35); }
.lb-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-pink), var(--neon-purple));
  border-radius: 4px;
  box-shadow: 0 0 6px var(--neon-pink);
}
.lb-sentinel {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--neon-cyan);
  opacity: 0.55;
  padding: 0.5rem 0;
  text-transform: lowercase;
}
.lb-sentinel--end {
  color: var(--neon-yellow);
  text-shadow: 0 0 8px var(--neon-yellow);
  opacity: 0.95;
}
.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lb-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto auto;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(74, 242, 255, 0.18);
  background: linear-gradient(90deg, rgba(74,242,255,0.04), transparent 70%);
  margin: 0.18rem 0;
  font-size: 1rem;
  transition: background .12s, transform .12s;
}
.lb-row:hover {
  background: linear-gradient(90deg, rgba(255,92,242,0.18), rgba(74,242,255,0.08));
  transform: translateX(2px);
}
.lb-rank {
  color: var(--neon-cyan);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.lb-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #fff;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-name > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.identity-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
}
.vs .identity-chip {
  flex: 1 1 0;
}
.identity-chip > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-mmr {
  color: var(--neon-yellow);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 243, 108, 0.5);
  font-size: 1.05rem;
}
.lb-stats {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.lb-stats b { color: var(--neon-pink); }
.lb-row--top1 {
  border-color: var(--neon-yellow);
  background: linear-gradient(90deg, rgba(255,243,108,0.22), rgba(255,92,242,0.1) 70%);
  box-shadow: 0 0 14px rgba(255,243,108,0.35), inset 0 0 10px rgba(255,243,108,0.15);
}
.lb-row--top1 .lb-rank { color: var(--neon-yellow); text-shadow: 0 0 8px var(--neon-yellow); }
.lb-row--top2 {
  border-color: rgba(74, 242, 255, 0.7);
  background: linear-gradient(90deg, rgba(74,242,255,0.18), transparent 70%);
}
.lb-row--top3 {
  border-color: rgba(164, 92, 255, 0.7);
  background: linear-gradient(90deg, rgba(164,92,255,0.18), transparent 70%);
}
.lb-row--me {
  border-color: var(--neon-pink);
  background: linear-gradient(90deg, rgba(255,92,242,0.32), rgba(164,92,255,0.18) 70%);
  box-shadow: 0 0 14px rgba(255,92,242,0.55), inset 0 0 12px rgba(255,92,242,0.25);
  animation: lb-me-pulse 2.4s ease-in-out infinite;
}
.lb-you {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: #0d0028;
  background: var(--neon-yellow);
  border-radius: 2px;
  text-transform: uppercase;
  box-shadow: 0 0 8px var(--neon-yellow);
  vertical-align: middle;
}
.lb-empty {
  text-align: center;
  padding: 2rem 0;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.12em;
  text-transform: lowercase;
}
.profile-panel {
  width: min(760px, 100%);
}
.help-panel {
  width: min(620px, 100%);
}
.profile-modal-body {
  position: relative;
  padding: 1rem 1.1rem 1.2rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--neon-pink) transparent;
}
.profile-modal-body::-webkit-scrollbar { width: 8px; }
.profile-modal-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.35); }
.profile-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-pink), var(--neon-purple));
  border-radius: 4px;
  box-shadow: 0 0 6px var(--neon-pink);
}
.help-modal-body {
  position: relative;
  padding: 1rem 1.1rem 1.2rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--neon-pink) transparent;
}
.help-modal-body::-webkit-scrollbar { width: 8px; }
.help-modal-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.35); }
.help-modal-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-pink), var(--neon-purple));
  border-radius: 4px;
  box-shadow: 0 0 6px var(--neon-pink);
}
.help-section + .help-section {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(74, 242, 255, 0.25);
}
.help-section h3 {
  margin: 0 0 0.45rem;
  text-transform: none;
}
.help-section p {
  margin: 0;
  color: rgba(255,255,255,0.84);
  line-height: 1.38;
}
.help-stat-list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}
.help-stat-list div {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.65rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(74, 242, 255, 0.26);
  background: rgba(74, 242, 255, 0.06);
}
.help-stat-list dt {
  color: var(--neon-yellow);
  letter-spacing: 0.1em;
  text-transform: lowercase;
}
.help-stat-list dd {
  margin: 0;
  color: rgba(255,255,255,0.84);
  line-height: 1.35;
}
.profile-editor-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.85rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(74, 242, 255, 0.25);
}
.profile-name-control {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  color: var(--neon-cyan);
  letter-spacing: 0.1em;
  text-transform: lowercase;
}
.profile-name-control input {
  width: 100%;
  margin: 0;
}
.profile-progress {
  margin: 0.7rem 0 0.2rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}
.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.65rem;
}
.profile-avatar-card {
  min-height: 8.6rem;
  padding: 0.65rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  border-color: rgba(74, 242, 255, 0.65);
  background: linear-gradient(180deg, rgba(74,242,255,0.12), rgba(255,92,242,0.08));
}
.profile-avatar-card.selected {
  border-color: var(--neon-yellow);
  color: var(--neon-yellow);
  box-shadow: 0 0 16px rgba(255, 243, 108, 0.45), inset 0 0 12px rgba(255, 243, 108, 0.18);
}
.profile-avatar-card.locked {
  opacity: 0.72;
}
.profile-avatar-card.locked .profile-avatar img {
  filter: grayscale(1) brightness(0) drop-shadow(0 0 5px rgba(255, 92, 242, 0.8));
}
.profile-avatar-requirement {
  color: var(--neon-cyan);
  font-size: 0.72rem;
  line-height: 1.1;
  opacity: 0.85;
  text-align: center;
}
@keyframes lb-me-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,92,242,0.55), inset 0 0 10px rgba(255,92,242,0.22); }
  50%      { box-shadow: 0 0 22px rgba(255,92,242,0.85), inset 0 0 14px rgba(255,92,242,0.4); }
}

@media (max-width: 540px) {
  .lb-row {
    grid-template-columns: 2.6rem 1fr auto;
    grid-template-areas:
      "rank name mmr"
      "rank stats stats";
    row-gap: 0.15rem;
  }
  .lb-rank { grid-area: rank; align-self: center; }
  .lb-name { grid-area: name; }
  .lb-mmr  { grid-area: mmr; }
  .lb-stats { grid-area: stats; }
  .lb-header h2 { font-size: 1.1rem; letter-spacing: 0.22em; }
  .lb-toolbar { gap: 0.35rem; padding: 0.45rem 0.7rem; }
  .lb-toolbar button { font-size: 0.78rem; padding: 0.22rem 0.55rem; }
  .lb-rank-info { font-size: 0.75rem; flex-basis: 100%; order: 5; text-align: center; }
  .profile-editor-row {
    grid-template-columns: auto 1fr;
  }
  .profile-editor-row #saveProfileBtn {
    grid-column: 1 / -1;
  }
  .profile-actions {
    width: 100%;
  }
  .profile-pill {
    flex: 1 1 auto;
  }
  .help-stat-list div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

.tooltip {
  position: absolute;
  z-index: 1000;
  width: min(310px, calc(100vw - 24px));
  max-height: min(460px, calc(100vh - 24px));
  overflow-y: auto;
  padding: .6rem;
  border: 1px solid var(--neon-cyan);
  background: rgba(8, 0, 28, .96);
  color: #fff;
  font-size: .88rem;
  line-height: 1.22;
  box-shadow:
    0 0 18px rgba(74,242,255,.35),
    inset 0 0 18px rgba(255,92,242,.16);
  pointer-events: none;
  text-align: left;
}
.tooltip-title {
  color: var(--neon-yellow);
  font-size: 1.12rem;
  line-height: 1;
  text-shadow: 0 0 8px var(--neon-yellow);
}
.tooltip-meta {
  margin-top: .2rem;
  color: var(--neon-cyan);
  opacity: .85;
  text-transform: lowercase;
}
.tooltip-hero {
  display: flex;
  justify-content: center;
  margin: .32rem 0;
}
.tooltip-hero img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 6px rgba(74,242,255,.5));
}
.tooltip-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem;
  margin: .38rem 0;
}
.tooltip-stats div {
  border: 1px solid rgba(74,242,255,.28);
  background: rgba(74,242,255,.06);
  padding: .2rem .32rem;
}
.tooltip-stats .tooltip-stat-label {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: .78rem;
  text-transform: lowercase;
}
.tooltip-stats .tooltip-stat-value {
  display: block;
}
.tooltip-stats .tooltip-stat-breakdown,
.tooltip-stats .tooltip-stat-breakdown .tooltip-base,
.tooltip-stats .tooltip-stat-breakdown .tooltip-delta,
.tooltip-stats .tooltip-stat-breakdown .tooltip-stat-op {
  display: inline;
}
.tooltip-stats .tooltip-stat-breakdown {
  color: rgba(255,255,255,.5);
  font-size: .7rem;
  font-weight: normal;
}
.tooltip-stats .tooltip-stat-op {
  color: rgba(255,255,255,.5);
  font-weight: normal;
}
.tooltip-stats b {
  color: #fff;
  font-size: .95rem;
}
.tooltip-stats .tooltip-delta--pos {
  color: #7dff9e;
}
.tooltip-stats .tooltip-delta--neg {
  color: #ff7d94;
}
.tooltip-stats .tooltip-base {
  color: rgba(255,255,255,.48);
  font-size: .7rem;
}
.tooltip-section {
  margin-top: .42rem;
  color: var(--neon-pink);
  letter-spacing: .08em;
  text-transform: lowercase;
}
.tooltip-aura-line {
  margin: .15rem 0 .35rem;
  font-size: .85rem;
  color: var(--neon-cyan);
  text-transform: none;
  letter-spacing: .02em;
}
.tooltip-armour-line {
  margin: .12rem 0 .3rem;
  font-size: .85rem;
  line-height: 1.35;
  color: var(--neon-cyan);
  text-transform: none;
  letter-spacing: .02em;
}
.tooltip-armour-stat b {
  color: #fff;
  font-weight: 700;
}
.tooltip-armour-sep {
  margin: 0 .28rem;
  opacity: 0.55;
}
.tooltip-prop-li--armour {
  margin: .45rem 0;
  padding: .38rem .45rem;
  border: 1px solid rgba(74, 242, 255, .28);
  background: rgba(74, 242, 255, .07);
  border-radius: 2px;
  list-style-position: outside;
}
.tooltip-prop-armour-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem .6rem;
  margin-bottom: .22rem;
}
.tooltip-prop-armour-kind {
  color: var(--neon-pink);
  letter-spacing: .06em;
  text-transform: lowercase;
  font-size: .78rem;
}
.tooltip-prop-armour-rating {
  font-size: .88rem;
  color: rgba(230, 248, 255, .95);
}
.tooltip-prop-armour-rating strong {
  margin-left: .08rem;
  color: var(--neon-yellow);
  font-weight: 700;
}
.tooltip-armour-impact {
  font-size: .8rem;
  line-height: 1.38;
  color: rgba(255, 255, 255, .92);
}
.tooltip-armour-impact b {
  color: var(--neon-yellow);
}
.tooltip-armour-formula {
  font-size: .74rem;
  color: rgba(180, 220, 255, .78);
}
.tooltip-hint-inline {
  margin: .35rem 0 0;
  max-width: none;
}
.tooltip-hint {
  margin-top: .1rem;
  font-size: .72rem;
  line-height: 1.35;
  color: rgba(230, 248, 255, .78);
  max-width: 18rem;
  text-transform: none;
  letter-spacing: .02em;
}
.tooltip-props {
  margin: .2rem 0 0;
  padding-left: 1rem;
}
.tooltip-props li {
  margin: .1rem 0;
}
.tooltip-empty {
  margin-top: .2rem;
  color: rgba(255,255,255,.55);
}
.tooltip-equipped {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: .35rem;
  margin-top: .28rem;
  padding-top: .28rem;
  border-top: 1px solid rgba(255,92,242,.22);
}
.tooltip-equipped b {
  color: var(--neon-cyan);
}
.tooltip-item-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  color: rgba(255,255,255,.7);
  font-size: .7rem;
  text-transform: lowercase;
}
.tooltip-item-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 5px var(--neon-yellow));
}

@media (max-width: 720px) {
  main {
    width: 100%;
    max-width: none;
    padding: 1rem;
  }

  button {
    min-height: 42px;
    padding: 0.45rem 0.85rem;
    font-size: 1rem;
    touch-action: manipulation;
  }

  input {
    max-width: 100%;
    margin-right: 0;
    font-size: 1.2rem;
  }

  #start input {
    display: block;
    width: min(100%, 22rem);
    margin: 0 0 0.55rem;
  }

  #start button {
    margin-bottom: 0.45rem;
  }

  .hud {
    gap: 0.45rem 0.75rem;
    justify-content: center;
    padding: 0.45rem 0.6rem;
    font-size: 1rem;
  }

  .player-controls {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .player-controls input {
    flex: 1 1 9rem;
    width: auto;
    min-width: 0;
  }

  .player-controls button {
    min-height: 36px;
  }

  .controls {
    gap: 0.55rem;
  }

  .controls button {
    flex: 1 1 8rem;
  }

  .vs {
    gap: 0.5rem;
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    text-align: center;
  }

  #battleCanvas {
    width: min(100%, 118vh, 731px);
    height: auto;
    margin: 0.65rem 0;
    max-height: min(42vh, 260px);
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
  }

  #battleLog {
    max-height: min(24vh, 120px);
    font-size: 0.9rem;
  }

  .modal-panel {
    padding: 1rem;
  }

  .modal-actions button {
    flex: 1 1 100%;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  body:has(#shop:not(.hidden)) {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    overflow-y: auto;
    display: block;
  }

  body:has(#shop:not(.hidden)) main {
    min-height: auto;
    padding: 0.75rem;
    display: block;
  }

  body:has(#shop:not(.hidden)) header {
    padding: 0.35rem 0.75rem;
  }

  body:has(#shop:not(.hidden)) .hud {
    margin-bottom: 0.45rem;
  }

  #shop.screen {
    gap: 0.25rem;
  }

  #shop.screen #teamRow {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }

  #shop.screen #teamRow .team-slot {
    flex: 0 0 78px;
    min-width: 78px;
    max-width: 78px;
    min-height: 132px;
    padding: 0.25rem;
  }

  #shop.screen #teamRow .team-slot img.portrait {
    width: 56px;
    height: 56px;
  }

  #shop.screen .team-slot .stats,
  #shop.screen .team-slot .cost {
    font-size: 0.66rem;
  }

  #shop.screen .team-slot .left-hand,
  #shop.screen .team-slot .right-hand {
    bottom: 47px;
    width: 22px;
    height: 22px;
  }

  #shop.screen .item-socket {
    min-height: 24px;
    font-size: 0.54rem;
  }

  #shop #shopInventory {
    flex: 0 0 auto;
    overflow: visible;
    margin-top: 0.35rem;
  }

  #shop #shopChars,
  #shop #shopItems {
    gap: 0.45rem;
  }

  #shop #shopInventory .card {
    width: 94px;
    min-height: 108px;
  }

  #shop #shopInventory .card img {
    width: 56px;
    height: 56px;
  }

  #shop #shopInventory .item-card {
    width: 72px;
    min-height: 92px;
  }

  .quit-run-button {
    position: static;
    width: 100%;
    margin-top: 0.45rem;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  header h1 {
    font-size: clamp(0.95rem, 6vw, 1.25rem);
    letter-spacing: 0.08em;
  }

  #bgmVolume {
    width: 5.4rem;
  }

  #shop.screen #teamDirections {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  #shop.screen .hint {
    font-size: 0.72rem;
  }

  #battleCanvas {
    width: min(100%, 96vh);
    max-height: 34vh;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  #shop.screen {
    --shop-team-slot-min: 68px;
    --shop-team-slot-height: 118px;
    --shop-team-pad-y: 0.22rem;
    --shop-team-pad-x: 0.22rem;
    --shop-team-portrait: 50px;
    --shop-team-name-font: 0.72rem;
    --shop-team-stat-font: 0.62rem;
    --shop-team-equip-bottom: 44px;
    --shop-team-equip-size: 22px;
    --shop-socket-height: 22px;
    --shop-socket-font: 0.5rem;
    --shop-socket-img: 18px;
    --shop-row-gap: 0.35rem;
    --shop-card-width: 88px;
    --shop-card-height: 94px;
    --shop-card-pad: 0.22rem;
    --shop-card-img: 48px;
    --shop-card-name-font: 0.72rem;
    --shop-card-stat-font: 0.64rem;
    --shop-card-cost-font: 0.64rem;
    --shop-item-card-width: 64px;
    --shop-item-card-height: 78px;
    --shop-item-card-img: 36px;
  }

  body:has(#shop:not(.hidden)) header {
    padding: 0.25rem 0.8rem;
  }

  body:has(#shop:not(.hidden)) main {
    padding: 0.35rem 0.8rem 0.35rem;
  }

  body:has(#shop:not(.hidden)) .hud {
    gap: 0.35rem 0.65rem;
    margin-bottom: 0.25rem;
    padding: 0.28rem 0.55rem;
    font-size: 0.9rem;
  }

  body:has(#shop:not(.hidden)) .player-controls {
    flex: 0 1 auto;
  }

  body:has(#shop:not(.hidden)) .player-controls input {
    width: 8rem;
    flex-basis: 8rem;
    font-size: 0.95rem;
  }

  #shop.screen > h3,
  #shop #shopInventory > h3 {
    font-size: 0.9rem;
  }

  #shop.screen #teamDirections {
    font-size: 0.68rem;
  }

  #shop.screen #teamRow .team-slot {
    min-width: var(--shop-team-slot-min);
    min-height: var(--shop-team-slot-height);
    padding: var(--shop-team-pad-y) var(--shop-team-pad-x);
  }

  #shop.screen #teamRow .team-slot img.portrait {
    width: var(--shop-team-portrait);
    height: var(--shop-team-portrait);
  }

  #shop.screen .team-slot .name {
    font-size: var(--shop-team-name-font);
  }

  #shop.screen .team-slot .stats,
  #shop.screen .team-slot .cost {
    font-size: var(--shop-team-stat-font);
  }

  #shop.screen .team-slot .left-hand,
  #shop.screen .team-slot .right-hand {
    bottom: var(--shop-team-equip-bottom);
    width: var(--shop-team-equip-size);
    height: var(--shop-team-equip-size);
  }

  #shop.screen .item-socket {
    min-height: var(--shop-socket-height);
    font-size: var(--shop-socket-font);
  }

  #shop.screen .item-socket img {
    width: var(--shop-socket-img);
    height: var(--shop-socket-img);
  }

  #shop #shopInventory {
    margin: 0.18rem 0 0.1rem;
    padding: 0.32rem 0.4rem;
  }

  #shop #shopChars,
  #shop #shopItems {
    gap: var(--shop-row-gap);
  }

  #shop #shopInventory .inventory-section h4 {
    font-size: 0.72rem;
  }

  #shop #shopInventory .card {
    width: var(--shop-card-width);
    min-height: var(--shop-card-height);
    padding: var(--shop-card-pad);
  }

  #shop #shopInventory .card img {
    width: var(--shop-card-img);
    height: var(--shop-card-img);
  }

  #shop #shopInventory .card .name {
    font-size: var(--shop-card-name-font);
  }

  #shop #shopInventory .card .stats,
  #shop #shopInventory .card .cost {
    font-size: var(--shop-card-stat-font);
  }

  #shop #shopInventory .item-card {
    width: var(--shop-item-card-width);
    min-height: var(--shop-item-card-height);
  }

  #shop #shopInventory .item-card img {
    width: var(--shop-item-card-img);
    height: var(--shop-item-card-img);
  }

  #shop.screen .controls {
    margin-top: 0.2rem;
  }

  #shop.screen .controls button {
    min-height: 34px;
    padding: 0.25rem 0.65rem;
    font-size: 0.82rem;
  }

  #shop.screen .hint {
    display: none;
  }

  .quit-run-button {
    right: 0.6rem;
    bottom: 0.45rem;
    min-height: 32px;
    padding: 0.2rem 0.55rem;
    font-size: 0.78rem;
  }

  #battle {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #battleCanvas {
    width: min(100%, 135vh);
    height: auto;
    max-height: 48vh;
    margin-left: auto;
    margin-right: auto;
  }

  #battleLog {
    max-height: 20vh;
  }
}

@media (max-height: 640px) and (orientation: landscape) {
  body:has(#shop:not(.hidden)) {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    overflow-y: auto;
  }

  body:has(#shop:not(.hidden)) main {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  body:has(#shop:not(.hidden)) header {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  body:has(#shop:not(.hidden)) header h1 {
    font-size: clamp(0.9rem, 3vw, 1.2rem);
  }

  body:has(#shop:not(.hidden)) .site-stats {
    font-size: 0.82rem;
    margin-top: 0.15rem;
  }

  body:has(#shop:not(.hidden)) .hud {
    gap: 0.25rem 0.55rem;
    margin-bottom: 0.2rem;
    padding: 0.22rem 0.48rem;
    font-size: 0.82rem;
  }

  body:has(#shop:not(.hidden)) .player-controls input {
    width: 7rem;
    flex-basis: 7rem;
    font-size: 0.82rem;
    padding: 0.18rem 0.45rem;
  }

  body:has(#shop:not(.hidden)) .player-controls button {
    min-height: 28px;
    padding: 0.14rem 0.45rem;
    font-size: 0.75rem;
  }

  #shop.screen {
    --shop-team-slot-min: 58px;
    --shop-team-slot-height: 98px;
    --shop-team-pad-y: 0.18rem;
    --shop-team-pad-x: 0.18rem;
    --shop-team-portrait: 40px;
    --shop-team-name-font: 0.62rem;
    --shop-team-stat-font: 0.54rem;
    --shop-team-equip-bottom: 35px;
    --shop-team-equip-size: 18px;
    --shop-socket-height: 18px;
    --shop-socket-font: 0.44rem;
    --shop-socket-img: 15px;
    --shop-row-gap: 0.28rem;
    --shop-card-width: 74px;
    --shop-card-height: 76px;
    --shop-card-pad: 0.18rem;
    --shop-card-img: 36px;
    --shop-card-name-font: 0.62rem;
    --shop-card-stat-font: 0.54rem;
    --shop-card-cost-font: 0.56rem;
    --shop-item-card-width: 54px;
    --shop-item-card-height: 64px;
    --shop-item-card-img: 28px;
    gap: 0.08rem;
  }

  #shop.screen > h3,
  #shop #shopInventory > h3 {
    font-size: 0.78rem;
  }

  #shop.screen #teamDirections {
    margin-bottom: 0.05rem;
    font-size: 0.58rem;
  }

  #shop #shopInventory {
    flex: 0 0 auto;
    overflow: visible;
    margin: 0.12rem 0 0.08rem;
    padding: 0.24rem 0.3rem;
  }

  #shop #shopInventory .inventory-section + .inventory-section {
    margin-top: 0.18rem;
  }

  #shop #shopInventory .inventory-section h4 {
    margin: 0.04rem 0 0.08rem;
    font-size: 0.62rem;
  }

  #shop.screen .controls {
    margin-top: 0.12rem;
  }

  #shop.screen .controls button,
  .quit-run-button {
    min-height: 28px;
    padding: 0.16rem 0.5rem;
    font-size: 0.72rem;
  }
}