.pokeidle-team-bar {
  --team-edge: 7px;
  --team-line: #294b61;
  --team-accent: #5db5da;
  position: absolute;
  left: 8px;
  top: 76px;
  z-index: 70;
  box-sizing: border-box;
  width: min(330px, calc(100vw - 16px));
  min-width: 300px;
  max-width: 330px;
  overflow: hidden;
  border: 1px solid #32627f;
  border-radius: 7px;
  background: #081722;
  box-shadow: 0 12px 28px #0009, inset 0 1px 0 #ffffff0a;
  color: #dceaf3;
  font-family: "Barlow", sans-serif;
  pointer-events: auto;
  transition: height 140ms ease;
}

.pokeidle-team-header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 98px;
  border-bottom: 1px solid var(--team-line);
  background: linear-gradient(180deg, #102938, #0a1c28);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.pokeidle-team-bar.is-dragging .pokeidle-team-header { cursor: grabbing; }

.pokeidle-team-titlebar {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 39px 0 10px;
  border-bottom: 1px solid #28475a;
  color: #a9c1ce;
}
.pokeidle-team-titlebar > strong { font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.pokeidle-team-title-icon { display: grid; grid-template-columns: repeat(2, 4px); gap: 2px; }
.pokeidle-team-title-icon i { width: 4px; height: 4px; border-radius: 1px; background: #e6ba46; box-shadow: 0 0 4px #d9a72b55; }

.pokeidle-trainer-summary {
  box-sizing: border-box;
  height: 67px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px 39px 6px 10px;
}
.pokeidle-trainer-sprite { position: relative; width: 56px; height: 55px; display: grid; place-items: center; overflow: hidden; }
.pokeidle-trainer-sprite img { display: block; width: 54px; height: 54px; object-fit: contain; object-position: center; image-rendering: pixelated; filter: drop-shadow(0 3px 2px #0009); }
.pokeidle-team-heading { min-width: 0; }
.pokeidle-trainer-identity { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 7px; }
.pokeidle-trainer-identity > strong { overflow: hidden; color: #f1f7fa; font-size: 13px; font-weight: 900; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.pokeidle-trainer-identity > em { flex: 0 0 auto; color: #d2e0e7; font-size: 10px; font-style: normal; font-weight: 900; }
.pokeidle-team-heading > small { display: block; margin-top: 1px; color: #8fa8b6; font-size: 7px; font-weight: 800; text-align: right; }
.pokeidle-team-active-accessibility { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.pokeidle-trainer-exp-track {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 13px;
  display: block;
  margin-top: 3px;
  overflow: hidden;
  border: 1px solid #2b4b60;
  border-radius: 4px;
  background: #050e14;
  box-shadow: inset 0 1px 2px #000b;
}
.pokeidle-trainer-exp-track > span { display: block; height: 100%; background: linear-gradient(90deg, #36a7d9, #62c5ea); transition: width 180ms ease; }
.pokeidle-trainer-exp-track > b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 8px; font-weight: 900; line-height: 1; text-shadow: 0 1px 2px #000, 1px 0 #000, -1px 0 #000; }

.pokeidle-team-minimize {
  position: absolute;
  top: 5px;
  right: 6px;
  z-index: 3;
  box-sizing: border-box;
  width: 24px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #385e74;
  border-radius: 4px;
  background: #081924;
  color: #b7d1df;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.pokeidle-team-minimize:hover,
.pokeidle-team-minimize:focus-visible { border-color: #58a9ce; background: #123247; color: #fff; outline: none; }
.pokeidle-team-minimize:focus-visible { box-shadow: 0 0 0 2px #55b8df55; }

.pokeidle-team-list { box-sizing: border-box; width: 100%; display: grid; gap: 6px; padding: var(--team-edge); }

.pokeidle-team-slot {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 116px;
  min-height: 116px;
  margin: 0;
  padding: 7px;
  overflow: hidden;
  border: 1px solid #31536a;
  border-radius: 6px;
  background: linear-gradient(135deg, #102633, #08151e 78%);
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff08;
  transition: border-color 120ms ease, background 120ms ease, filter 120ms ease;
}
.pokeidle-team-slot::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--team-accent); content: ''; }
.pokeidle-team-slot:hover { border-color: #4d7b94; background: linear-gradient(135deg, #133043, #0a1d29 78%); }
.pokeidle-team-slot:focus-visible { border-color: #63b7df; outline: 2px solid #63b7df; outline-offset: 1px; }
.pokeidle-team-slot.is-active { border-color: #4d829d; }
.pokeidle-team-slot.is-shiny { --team-accent: #d9ad43; border-color: #806d36; }
.pokeidle-team-slot.is-fainted { opacity: .58; filter: grayscale(.55); }

.pokeidle-team-sprite {
  position: absolute;
  left: 9px;
  top: 12px;
  box-sizing: border-box;
  width: 82px;
  height: 90px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #3c6277;
  border-radius: 5px;
  background: radial-gradient(circle at 50% 45%, #18394c, #08151d 72%);
  box-shadow: inset 0 1px 0 #ffffff0a;
}
.pokeidle-team-slot.is-active .pokeidle-team-sprite { border-color: #5686a0; }
.pokeidle-team-sprite > img:not(.pokemon-ui-sprite-centered) { display: block; width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; }

.pokeidle-team-content { position: absolute; inset: 10px 8px 9px 101px; display: block; min-width: 0; pointer-events: none; }
.pokeidle-team-slot-top { height: 21px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; }
.pokeidle-team-slot-top > strong { overflow: hidden; color: #f2f7fa; font-size: 13px; font-weight: 900; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.pokeidle-team-slot.is-shiny .pokeidle-team-slot-top > strong { color: #ffe18a; text-shadow: 0 0 8px #eeb53a35; }
.pokeidle-team-slot-top > em { color: #e0ebf0; font-size: 10px; font-style: normal; font-weight: 900; white-space: nowrap; }

.pokeidle-team-quality { height: 19px; display: flex; align-items: center; margin-top: 1px; }
.pokeidle-team-quality > .pokemon-quality-tier {
  box-sizing: border-box;
  min-width: 45px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 1px solid #60717d;
  border-radius: 3px;
  background: #172833;
  color: #d3dde3;
  font-size: 7px;
  font-weight: 900;
  line-height: 16px;
}
.pokeidle-team-quality .pokemon-quality-tier[data-tier="uncommon"] { border-color: #438765; background: #103126; color: #91dbae; }
.pokeidle-team-quality .pokemon-quality-tier[data-tier="rare"] { border-color: #3f83ae; background: #102d43; color: #8ed4f5; }
.pokeidle-team-quality .pokemon-quality-tier[data-tier="epic"] { border-color: #7853a3; background: #2c1c3e; color: #d2a2f5; }
.pokeidle-team-quality .pokemon-quality-tier[data-tier="legendary"] { border-color: #9a7832; background: #34270f; color: #ffdb75; }

.pokeidle-team-bars { display: grid; gap: 5px; margin-top: 5px; }
.pokeidle-team-stat-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 5px; }
.pokeidle-team-stat-row > strong { color: #e0ebf0; font-size: 9px; font-weight: 900; }
.pokeidle-team-bar-track {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 13px;
  overflow: hidden;
  border: 1px solid #29485b;
  border-radius: 4px;
  background: #040d13;
  box-shadow: inset 0 1px 2px #000c;
}
.pokeidle-team-bar-track > i { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; border-radius: 3px; transition: width 180ms ease; }
.pokeidle-team-bar-track.hp > i { background: linear-gradient(180deg, #49d36f, #2a9f53); box-shadow: inset 0 1px 0 #ffffff3b; }
.pokeidle-team-bar-track.exp > i { background: linear-gradient(180deg, #57b9ef, #2c79cb); box-shadow: inset 0 1px 0 #ffffff38; }
.pokeidle-team-bar-track > b { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 3px; color: #fff; font-size: 8px; font-weight: 900; line-height: 1; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px #000, 1px 0 #000, -1px 0 #000; }

.pokeidle-team-roster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.pokeidle-team-roster-slot {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  height: 52px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 13px;
  place-items: center;
  overflow: hidden;
  padding: 2px;
  border: 1px solid #2b4b5f;
  border-radius: 4px;
  background: linear-gradient(180deg, #102430, #091720);
  color: #d8e5ec;
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, filter 120ms ease;
}
.pokeidle-team-roster-slot:hover { border-color: #4b7b96; background: linear-gradient(180deg, #153246, #0b202d); }
.pokeidle-team-roster-slot:focus-visible { outline: 2px solid #63b7df; outline-offset: 1px; }
.pokeidle-team-roster-slot.is-active { border-color: #e0a93b; background: linear-gradient(180deg, #29301f, #142018); box-shadow: inset 0 0 0 1px #d89527; }
.pokeidle-team-roster-slot.is-fainted { opacity: .48; filter: grayscale(.65); }
.pokeidle-team-roster-slot.is-empty { color: #506877; cursor: default; }
.pokeidle-team-roster-slot.is-empty > i { grid-row: 1 / 3; color: #4a6170; font-size: 20px; font-style: normal; font-weight: 300; }
.pokeidle-team-roster-slot.is-empty > small { display: none; }
.pokeidle-team-roster-sprite { position: relative; width: 100%; height: 34px; display: grid; place-items: center; overflow: hidden; }
.pokeidle-team-roster-sprite > img:not(.pokemon-ui-sprite-centered) { display: block; width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.pokeidle-team-roster-slot > em { z-index: 2; align-self: end; margin: 0; padding: 1px 3px; border-radius: 2px; background: #02090ee8; color: #fff; font-size: 7px; font-style: normal; font-weight: 900; line-height: 10px; white-space: nowrap; text-shadow: 0 1px 1px #000; }
.pokeidle-team-roster-tier { position: absolute; top: 3px; right: 3px; z-index: 3; width: 5px; height: 5px; border: 1px solid #86959e; border-radius: 1px; background: #687782; transform: rotate(45deg); box-shadow: 0 1px 3px #000a; }
.pokeidle-team-roster-tier[data-tier="uncommon"] { border-color: #60b57f; background: #48a968; }
.pokeidle-team-roster-tier[data-tier="rare"] { border-color: #61b7e6; background: #3c91ce; }
.pokeidle-team-roster-tier[data-tier="epic"] { border-color: #b178e8; background: #8c4bc9; }
.pokeidle-team-roster-tier[data-tier="legendary"] { border-color: #ffd56a; background: #e8ae28; }

.pokeidle-team-bar.is-minimized { height: 54px; min-height: 54px; max-height: 54px; }
.pokeidle-team-bar.is-minimized .pokeidle-team-header { height: 54px; border-bottom: 0; }
.pokeidle-team-bar.is-minimized .pokeidle-team-titlebar,
.pokeidle-team-bar.is-minimized .pokeidle-team-list,
.pokeidle-team-bar.is-minimized .pokeidle-trainer-sprite,
.pokeidle-team-bar.is-minimized .pokeidle-team-heading > small { display: none; }
.pokeidle-team-bar.is-minimized .pokeidle-trainer-summary { height: 54px; display: block; padding: 7px 39px 6px 9px; }
.pokeidle-team-bar.is-minimized .pokeidle-trainer-identity { padding-right: 4px; }
.pokeidle-team-bar.is-minimized .pokeidle-trainer-identity > strong { font-size: 12px; }
.pokeidle-team-bar.is-minimized .pokeidle-trainer-exp-track { height: 12px; margin-top: 3px; }
.pokeidle-team-bar.is-minimized .pokeidle-team-minimize { top: 6px; }

@media (max-width: 340px) {
  .pokeidle-team-bar { left: 5px; width: calc(100vw - 10px); min-width: 0; }
  .pokeidle-trainer-summary { grid-template-columns: 52px minmax(0, 1fr); gap: 7px; }
  .pokeidle-trainer-sprite { width: 52px; }
  .pokeidle-trainer-sprite img { width: 50px; height: 50px; }
  .pokeidle-team-content { right: 6px; }
  .pokeidle-team-slot-top > strong { font-size: 12px; }
  .pokeidle-team-roster { gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .pokeidle-team-bar,
  .pokeidle-team-slot,
  .pokeidle-team-roster-slot,
  .pokeidle-team-bar-track > i,
  .pokeidle-trainer-exp-track > span { transition: none; }
}
