.item-card.is-selected {
  border-color: var(--leaf);
  box-shadow: inset 0 0 0 1px var(--leaf);
}

.progress-track,
.boss-health div {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9ede7;
}

.progress-track i,
.boss-health i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--leaf);
  transition: width 180ms ease;
}

.boss-health {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.inflation-boss-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  border: 1px solid rgba(200, 92, 74, 0.28);
  border-radius: 8px;
  padding: 10px;
  background: #fff4f1;
}

.inflation-boss-sprite {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: radial-gradient(circle at 35% 28%, #ff6f5f, #6d2a78 72%);
  color: #ffd15b;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(200, 92, 74, 0.42);
}

.inflation-boss-sprite::before,
.inflation-boss-sprite::after {
  position: absolute;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd15b;
  content: "";
}

.inflation-boss-sprite::before {
  left: 18px;
}

.inflation-boss-sprite::after {
  right: 18px;
}

.inflation-boss-card p {
  margin: 0;
  color: var(--coral);
  font-size: 13px;
  line-height: 1.35;
}

.wide-button {
  width: 100%;
  margin-bottom: 10px;
}

.loadout-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.loadout-actions button,
.loadout-actions a {
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
}

.rarity-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 0 8px;
  background: #f1f3f0;
  font-size: 12px;
}

.page-toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  display: grid;
  gap: 8px;
  max-width: min(420px, calc(100vw - 36px));
}

.toast {
  transform: translateY(8px);
  animation: toast-in 180ms ease-out forwards;
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 253, 247, 0.96);
  border: 1px solid rgba(23, 33, 28, 0.12);
  box-shadow: var(--shadow);
}

.toast-success {
  border-color: rgba(47, 143, 91, 0.35);
}

.toast-error {
  border-color: rgba(200, 92, 74, 0.42);
}

.toast-tip {
  display: flex;
  gap: 8px;
  border-color: rgba(47, 143, 183, 0.36);
}

.toast-tip::before {
  content: "\1F4A1";
}

.toast.is-leaving {
  animation: toast-out 220ms ease-in forwards;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  position: absolute;
  left: 12px;
  bottom: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: 240px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #17211c;
  color: #fffdf7;
  content: attr(data-tooltip);
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

.rarity-comum {
  color: var(--rarity-comum);
}

.rarity-incomum {
  color: var(--rarity-incomum);
}

.rarity-raro {
  color: var(--rarity-raro);
}

.rarity-premium {
  color: var(--rarity-premium);
}

.tab[data-tab="school"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.tab[data-tab="school"]::before {
  content: "\1F4D8";
}

.tab[data-tab="inventory"],
.tab[data-tab="craft"],
.tab[data-tab="missions"],
.tab[data-tab="journey"],
.tab[data-tab="vehicles"],
.tab[data-tab="minigames"],
.tab[data-tab="boss"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.tab[data-tab="inventory"]::before {
  content: "\2694";
}

.tab[data-tab="craft"]::before {
  content: "\1F528";
}

.tab[data-tab="missions"]::before {
  content: "\1F4DC";
}

.tab[data-tab="journey"]::before {
  content: "\1F5FA";
}

.tab[data-tab="vehicles"]::before {
  content: "\25C9";
}

.tab[data-tab="minigames"]::before {
  content: "\25B6";
}

.tab[data-tab="boss"]::before {
  content: "\2605";
}

.minigame-panel {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.minigame-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-left: 4px solid #3ad1b0;
  border-radius: 8px;
  padding: 10px;
  background: #f7fffc;
}

.minigame-card.is-locked {
  border-left-color: var(--rarity-comum);
  background: #f6f6f4;
}

.minigame-race {
  border-left-color: var(--gold);
  background: #fff9e8;
}

.minigame-card-head {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
}

.minigame-card-head strong,
.minigame-card-head small {
  display: block;
}

.minigame-card-head small,
.minigame-note {
  color: var(--muted);
  line-height: 1.35;
}

.minigame-note {
  margin: 0;
  font-size: 12px;
}

.minigame-icon {
  position: relative;
  width: 34px;
  height: 34px;
  display: block;
  border-radius: 8px;
  background: #173c35;
}

.minigame-icon-ship::before {
  position: absolute;
  left: 7px;
  top: 4px;
  width: 20px;
  height: 26px;
  background: #3ad1b0;
  clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%);
  content: "";
}

.minigame-icon-car {
  background: #fff0b9;
}

.minigame-icon-car::before {
  position: absolute;
  left: 7px;
  top: 10px;
  width: 20px;
  height: 14px;
  border-radius: 5px;
  background: #ffd15b;
  box-shadow: -3px 10px 0 -1px #17211c, 13px 10px 0 -1px #17211c;
  content: "";
}

.minigame-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.minigame-stats span {
  display: grid;
  min-height: 34px;
  place-items: center;
  border-radius: 8px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.minigame-upgrade-list {
  display: grid;
  gap: 8px;
}

.minigame-upgrade footer {
  align-items: center;
}

.tab.has-pulse {
  animation: tab-pulse 1s ease-in-out infinite;
}

.school-panel {
  background: linear-gradient(180deg, #fff9e8, #eef7f4);
}

.school-panel h3 {
  margin: 14px 0 8px;
  font-size: 14px;
  letter-spacing: 0;
}

.school-progress {
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: #173c35;
  color: #3ad1b0;
  font-size: 12px;
  font-weight: 800;
}

.school-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.inflation-chart {
  width: 100%;
  border: 1px solid rgba(23, 33, 28, 0.18);
  border-radius: 8px;
  background: #102821;
}

.school-legend {
  margin: 6px 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.golden-rules {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 10px 10px 28px;
  border: 1px solid rgba(47, 143, 183, 0.26);
  border-radius: 8px;
  background: #e8f5f8;
}

.golden-rules li {
  color: var(--ink);
  line-height: 1.35;
}

.school-list,
.badge-list {
  display: grid;
  gap: 8px;
}

.school-card,
.badge-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 253, 247, 0.92);
}

.school-card {
  border-left: 4px solid #2f8fb7;
}

.school-card.is-complete {
  border-left-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(201, 154, 45, 0.18);
}

.school-card.is-locked {
  opacity: 0.68;
}

.school-card p {
  margin: 6px 0;
  color: var(--ink);
  line-height: 1.35;
}

.school-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.35;
}

.school-check {
  float: right;
  color: var(--leaf);
  font-size: 12px;
}

.badge-card {
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--rarity-comum);
}

.badge-card.is-unlocked {
  border-left-color: var(--gold);
  background: #fff9e8;
}

.badge-card.is-gold.is-unlocked {
  border-color: rgba(201, 154, 45, 0.55);
  box-shadow: inset 0 0 0 1px rgba(201, 154, 45, 0.24);
}

.badge-card.is-unlocked::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.72) 45%, transparent 65%);
  content: "";
  transform: translateX(-120%);
  animation: badge-shine 1.6s ease-out;
}

.badge-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.journey-panel {
  background: linear-gradient(180deg, #eef7f4, #fff9e8);
}

.journey-farm-wrap {
  margin-bottom: 10px;
}

.farm-preview {
  position: relative;
  height: 154px;
  overflow: hidden;
  border: 1px solid rgba(47, 143, 183, 0.22);
  border-radius: 8px;
  background: linear-gradient(180deg, #95c97b, #6fa85f);
}

.farm-preview i {
  position: absolute;
  display: block;
}

.farm-plot {
  left: 50%;
  top: 56%;
  width: 190px;
  height: 82px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(93, 63, 41, 0.42);
  border-radius: 8px;
  background: #a77549;
}

.farm-cabin {
  left: 34%;
  top: 40%;
  width: 58px;
  height: 45px;
  background: #8f633f;
}

.farm-cabin::before {
  position: absolute;
  inset: -18px -8px auto;
  height: 24px;
  background: #b94e3c;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: "";
}

.farm-garden {
  right: 42px;
  bottom: 34px;
  width: 70px;
  height: 32px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, #2f6f47 0 6px, #70d66a 6px 12px);
}

.farm-chicken {
  right: 62px;
  top: 46px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffdf6e;
  animation: chicken-step 1.2s ease-in-out infinite;
}

.farm-workshop {
  left: 55%;
  top: 33%;
  width: 58px;
  height: 34px;
  border-radius: 4px;
  background: #6f7787;
}

.farm-stall {
  left: 18%;
  bottom: 31px;
  width: 56px;
  height: 36px;
  background: #8f633f;
}

.farm-stall::before {
  position: absolute;
  inset: -18px -6px auto;
  height: 22px;
  background: #2f8fb7;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  content: "";
}

.farm-fence {
  inset: 18px 34px 20px;
  border: 4px solid #8f633f;
  border-radius: 8px;
}

.farm-flag {
  right: 44px;
  top: 18px;
  width: 4px;
  height: 40px;
  background: #5d3f29;
}

.farm-flag::after {
  position: absolute;
  left: 4px;
  top: 0;
  width: 24px;
  height: 16px;
  background: #ffd15b;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
}

.farm-gem {
  left: 50%;
  top: 13px;
  width: 26px;
  height: 26px;
  transform: translateX(-50%) rotate(45deg);
  background: #ffd15b;
  box-shadow: 0 0 18px rgba(255, 209, 91, 0.72);
  animation: gem-pulse 900ms ease-in-out infinite;
}

.journey-meter,
.journey-card footer {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.journey-meter div,
.journey-card footer div {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9ede7;
}

.journey-meter i,
.journey-card footer i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f8fb7, #ffd15b);
  transition: width 180ms ease;
}

.journey-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 253, 247, 0.94);
}

.journey-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: 0;
}

.journey-card p,
.journey-next {
  color: var(--muted);
  line-height: 1.35;
}

.journey-objectives {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.journey-objectives li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 6px;
  align-items: center;
  color: var(--muted);
}

.journey-objectives li.is-done {
  color: var(--leaf);
}

.journey-objectives b {
  min-width: 24px;
  color: inherit;
  font-size: 11px;
}

.rarity-lendario,
.rarity-card.rarity-lendario {
  color: #8a51d6;
  border-left-color: #8a51d6;
}

.satoshi-card {
  background: linear-gradient(135deg, #fff9e8, #f3e7ff);
  box-shadow: inset 0 0 0 1px rgba(201, 154, 45, 0.2);
}

.journey-celebration {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(23, 33, 28, 0.72);
  color: #fffdf7;
  text-align: center;
  animation: toast-in 180ms ease-out;
}

.journey-celebration div {
  width: min(520px, calc(100% - 40px));
  border: 1px solid rgba(255, 209, 91, 0.46);
  border-radius: 8px;
  padding: 18px;
  background: rgba(23, 33, 28, 0.86);
}

.journey-celebration h2 {
  margin: 4px 0 8px;
  color: #ffd15b;
  letter-spacing: 0;
}

.journey-celebration p {
  margin: 6px 0;
}

.journey-celebration > i {
  position: absolute;
  left: var(--x);
  bottom: -10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd15b;
  animation: firework 1100ms ease-out var(--d) infinite;
}

.journey-celebration.is-leaving {
  animation: toast-out 220ms ease-in forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@keyframes badge-shine {
  to {
    transform: translateX(120%);
  }
}

@keyframes tab-pulse {
  50% {
    box-shadow: 0 0 0 3px rgba(255, 209, 91, 0.28);
  }
}

@keyframes chicken-step {
  50% {
    transform: translateX(10px);
  }
}

@keyframes gem-pulse {
  50% {
    opacity: 0.7;
    scale: 1.12;
  }
}

@keyframes firework {
  to {
    transform: translateY(-88vh) scale(0.2);
    opacity: 0;
  }
}