@keyframes ticons-count-update {
  0% {
    opacity: 0.55;
    transform: translateY(4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes logo-arrive {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes donor-float {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes podium-glow {
  0%,
  to {
    box-shadow: 0 0 15px var(--podium-glow);
  }
  50% {
    box-shadow:
      0 0 30px var(--podium-glow-peak),
      inset 0 0 22px var(--podium-glow);
  }
}
@keyframes donor-marquee {
  to {
    transform: translateX(-50%);
  }
}
:root {
  color-scheme: dark;
  --bg: #07131d;
  --surface: #0b1b27;
  --surface-raised: #0d2233;
  --line: rgba(255, 255, 255, 0.085);
  --text: #f3f9fc;
  --muted: #95a6b2;
  --purple: #87cefd;
  --pink: #73e9f1;
  --gold: #ffd778;
  --width: 1160px;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 28px;
}
body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  background:
    radial-gradient(ellipse at 52% 34%, rgb(39 91 121/9%), transparent 44rem),
    radial-gradient(ellipse at 88% 72%, rgb(36 71 96/8%), transparent 34rem), var(--bg);
  background: #040d14;
}
button,
input {
  font: inherit;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
  color: inherit;
}
a {
  text-decoration: none;
}
.page-width,
.site-header {
  width: min(var(--width), calc(100% - 48px));
}
.page-width {
  margin-inline: auto;
}
.site-header {
  margin: auto;
  display: flex;
}
.brand,
.main-nav,
.site-header {
  align-items: center;
}
.brand {
  display: inline-flex;
  gap: 10px;
  flex-shrink: 0;
  font:
    700 14px "Space Grotesk",
    sans-serif;
}
.brand img {
  object-fit: contain;
}
.main-nav {
  display: flex;
  color: #bdc9d2;
  font-weight: 600;
}
.add-link,
.button,
.cart-trigger,
.category-tab,
.icon-button,
.main-nav a {
  transition:
    color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}
.main-nav a:hover {
  color: var(--gold);
}
.cart-trigger {
  border: 1px solid var(--line);
  background: #0c1c27;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 13px;
  cursor: pointer;
  font-weight: 700;
  border: 0;
  background: linear-gradient(120deg, #72bfee, #6ddce2);
}
.cart-trigger:hover {
  border-color: #6294b0;
  background: var(--surface-raised);
  background: linear-gradient(120deg, #88ccf3, #86ebef);
  transform: translateY(-1px);
}
.cart-count {
  min-width: 21px;
  height: 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #0e374a;
  font-size: 13.5px;
}
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  border: 1px solid var(--line);
  background: #0a2636;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--purple);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
.button {
  min-height: 46px;
  padding: 0 19px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}
.button-primary {
  background: linear-gradient(115deg, #88cdf8, #75e1e8);
}
.button-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.category-tabs {
  width: fit-content;
  border: 1px solid var(--line);
  background: #0b1b26;
}
.category-tab {
  border: 0;
  background: 0 0;
  cursor: pointer;
  font-weight: 700;
}
.category-tab span {
  margin-right: 6px;
}
.category-tab:hover {
  background: #ffffff09;
}
.category-tab.is-active {
  background: #b0e1ff;
}
.category-tab.is-active span {
  color: #09171f;
}
.category-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
}
.category-intro h3 {
  margin: 0 0 4px;
  font:
    700 17px "Space Grotesk",
    sans-serif;
}
.category-intro p,
.steps p {
  color: var(--muted);
}
.result-count {
  padding-bottom: 2px;
  font-weight: 700;
  letter-spacing: 0.11em;
  white-space: nowrap;
}
.product-grid {
  display: grid;
}
.product-card {
  min-width: 0;
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(155deg, #0e2333, #0b1b26 72%);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.product-card:hover {
  transform: translateY(-3px);
}
.product-art-wrap {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 70%, #85ccf828, transparent 57%);
}
.product-art-wrap::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #88cef81a;
  filter: blur(16px);
  background: #ffda6312;
  width: 145px;
  height: 145px;
  left: 12px;
  top: -22px;
  background: #3eaee81b;
}
.product-art {
  position: relative;
  object-fit: contain;
  filter: drop-shadow(0 9px 12px #02080d70);
  transition: transform 0.2s ease;
}
.product-card:hover .product-art {
  transform: translateY(-3px) scale(1.06);
}
.rank-mark {
  width: 88px;
  height: 88px;
  border: 1px solid color-mix(in srgb, var(--rank-color), transparent 42%);
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, color-mix(in srgb, var(--rank-color), #0b1b26 82%), #0b1b26);
  box-shadow: 0 10px 35px color-mix(in srgb, var(--rank-color), transparent 84%);
  color: var(--rank-color);
  font:
    700 27px "Space Grotesk",
    sans-serif;
}
.product-info h3 {
  overflow: hidden;
  margin: 0 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.add-link {
  border: 0;
  background: 0 0;
  cursor: pointer;
}
.add-link:hover {
  color: #fff;
}
.empty-note {
  margin: 0;
  color: #7e92a6;
  font-size: 13px;
  line-height: 1.6;
}
.drawer-total {
  padding: 13px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #acbcc6;
}
.button-wide {
  width: 100%;
}
.site-footer,
.steps li {
  display: flex;
  align-items: center;
}
.steps li {
  min-width: 0;
  gap: 11px;
}
.steps h3 {
  margin: 12px 0 6px;
}
.steps p {
  margin: 0;
  line-height: 1.65;
}
.site-footer {
  min-height: 100px;
  border-top: 1px solid var(--line);
  justify-content: space-between;
  gap: 16px;
  color: #73889e;
}
.footer-brand {
  color: #d4e2ea;
  font-size: 13.5px;
}
.footer-brand img {
  width: 30px;
  height: 30px;
}
.site-footer p {
  margin: 0;
}
.cart-drawer {
  position: fixed;
  z-index: 120; /* por encima del header sticky (z-index 40) */
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  padding: 23px;
  background: #0b1b27;
  box-shadow: -20px 0 65px #01060a80;
  transform: translateX(105%);
  visibility: hidden;
  transition:
    transform 0.28s ease,
    visibility 0.28s;
}
.cart-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.drawer-backdrop {
  position: fixed;
  z-index: 110;
  inset: 0;
  background: #02090ebd;
  backdrop-filter: blur(3px);
}
.drawer-header {
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-header .eyebrow {
  margin-bottom: 3px;
}
.drawer-header h2 {
  margin: 0;
  font:
    700 23px "Space Grotesk",
    sans-serif;
}
.drawer-header h2 span {
  color: var(--muted);
  font:
    500 12px "DM Sans",
    sans-serif;
}
.icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #ffffff08;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.icon-button:hover {
  color: var(--purple);
  background: #ffffff12;
}
.drawer-content {
  height: calc(100% - 65px);
  overflow-y: auto;
  padding-top: 14px;
}
.drawer-items {
  min-height: 95px;
}
.cart-row {
  position: relative;
  padding: 12px 22px 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 11px;
}
.cart-row-art {
  width: 55px;
  height: 55px;
  flex: 0 0 55px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #ffffff08;
}
.cart-row-art .product-art {
  width: 40px;
  height: 40px;
}
.cart-row-art .rank-mark {
  width: 39px;
  height: 39px;
  border-radius: 12px;
  font-size: 14.5px;
}
.cart-row-details {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 4px;
}
.cart-row-details > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-row-details > span {
  color: var(--muted);
}
.quantity-control {
  width: fit-content;
  margin-top: 2px;
  border: 0;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
}
.quantity-control button {
  background: #ffffff08;
  cursor: pointer;
}
.quantity-control button:hover {
  background: #88cef833;
}
.quantity-control span {
  min-width: 23px;
  color: #cddbe3;
  text-align: center;
}
.cart-row-price {
  font:
    700 11px "Space Grotesk",
    sans-serif;
  white-space: nowrap;
}
.remove-item {
  position: absolute;
  top: 7px;
  right: 0;
  border: 0;
  background: 0 0;
  color: #7c90a4;
  cursor: pointer;
  font-size: 16px;
}
.remove-item:hover {
  color: #fa8799;
}
.player-field {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  font-weight: 700;
}
.player-field input {
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
  background: #06121b;
  color: var(--text);
}
.player-field input:focus {
  border-color: #87cefd;
  box-shadow: 0 0 0 3px #87cefd1e;
}
.player-field small {
  color: var(--muted);
  font-weight: 400;
}
.drawer-total {
  margin-top: 18px;
  font-size: 14px;
}
.drawer-total strong {
  color: var(--text);
  font:
    700 23px "Space Grotesk",
    sans-serif;
}
.checkout-button {
  min-height: 48px;
}
.checkout-message {
  margin: 10px 0 0;
  color: #c4e8ff;
  line-height: 1.5;
  text-align: center;
}
.secure-note {
  margin-top: 20px;
  padding: 13px;
  border: 1px solid #87cefd20;
  border-radius: 11px;
  color: #9daeb8;
  line-height: 1.6;
}
.secure-note span {
  margin-right: 6px;
  color: var(--purple);
}
.cart-open {
  overflow: hidden;
}
.toast {
  position: fixed;
  z-index: 20;
  right: 24px;
  bottom: 24px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid #ade0ff50;
  border-radius: 12px;
  background: #0e293d;
  box-shadow: 0 10px 30px #00000066;
  color: #eef8fe;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.button:focus-visible,
.category-tab:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid #bbe6ff;
  outline-offset: 3px;
}
@media (max-width: 900px) {
  .site-header {
    gap: 23px;
  }
  .main-nav {
    gap: 17px;
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .page-width,
  .site-header {
    width: min(100% - 30px, var(--width));
  }
  .site-header {
    min-height: 70px;
    flex-wrap: wrap;
    gap: 0;
    padding: 13px 0 11px;
  }
  .brand {
    font-size: 13.5px;
  }
  .brand img {
    width: 31px;
    height: 31px;
  }
  .cart-trigger {
    min-height: 35px;
    padding: 0 9px;
    gap: 6px;
    font-size: 13px;
  }
  .cart-count {
    min-width: 18px;
    height: 18px;
    font-size: 12.5px;
  }
  .main-nav {
    order: 3;
    width: 100%;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    justify-content: center;
    gap: 34px;
    font-size: 13px;
  }
  .hero {
    min-height: 385px;
    margin-top: 9px;
    border-radius: 19px;
  }
  .hero-content {
    width: 88%;
    padding: 38px 0 44px 24px;
  }
  .hero h1 {
    margin-top: 17px;
    font-size: clamp(43px, 11vw, 57px);
  }
  .shop-section {
    padding-top: 61px;
  }
  .category-tabs {
    width: 100%;
    margin-bottom: 19px;
    justify-content: space-between;
  }
  .category-tab {
    min-height: 36px;
    padding: 0 8px;
    font-size: 12.5px;
  }
  .category-tab span {
    margin-right: 3px;
  }
  .product-grid {
    gap: 10px;
  }
  .product-card {
    min-height: 203px;
  }
  .product-art-wrap {
    height: 118px;
  }
  .product-art {
    width: 78px;
    height: 78px;
  }
  .product-info {
    padding: 11px 10px 12px;
  }
  .product-info h3 {
    font-size: 13px;
  }
  .add-link,
  .steps h3 {
    font-size: 12.5px;
  }
  .steps {
    gap: 11px;
  }
  .steps h3 {
    line-height: 1.4;
  }
  .site-footer > span,
  .steps p {
    font-size: 13px;
  }
  .site-footer {
    min-height: 110px;
    margin-top: 42px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 13px;
    padding: 19px 0;
  }
  .site-footer p {
    order: 3;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::after,
  ::before {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
:root {
  --bg: #040b10;
  --surface: #091420;
  --surface-raised: #0c1d2a;
  --line: rgb(255 255 255 / 8%);
  --text: #f1f7fb;
  --muted: #8da8bb;
  --purple: #99d6ff;
  --pink: #78f5f3;
  --gold: #ffda63;
  --width: 1080px;
}
@font-face {
  font-family: "Minecraft Standard";
  src: url(../assets/fonts/MinecraftStandard.otf) format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Minecraft Standard";
  src: url(../assets/fonts/MinecraftStandardBold.otf) format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.site-header {
  gap: 33px;
}
.brand {
  font-size: 14.5px;
  letter-spacing: 0.09em;
}
.brand img {
  width: 35px;
  height: 35px;
}
.main-nav {
  gap: 22px;
}
.cart-trigger {
  min-height: 39px;
  border-radius: 11px;
  background: #2fede6;
  box-shadow: 0 8px 22px #2fede630;
}
.cart-trigger:hover {
  background: #46fff7;
}
.hero {
  border-color: rgb(255 255 255/8%);
  background: #091e2b;
}
.hero-content {
  width: min(640px, 76%);
}
.hero .eyebrow {
  margin-bottom: 7px;
  color: #d8efff;
}
.hero h1 {
  line-height: 1.03;
}
.category-tab span,
.hero h1 span {
  color: var(--gold);
}
.hero .button {
  display: none;
}
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  background: #0a1621;
}
.category-tab {
  padding-inline: 16px;
}
.category-tab:hover {
  color: var(--gold);
  background: #ffffff06;
}
.category-tab.is-active {
  background: var(--gold);
}
.result-count {
  color: #698097;
}
.product-grid > .catalog-status,
.product-grid > .package-heading {
  grid-column: 1/-1;
}
.product-grid > .package-heading:not(:first-child) {
  margin-top: 13px;
}
.catalog-status {
  margin: 12px 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  text-align: center;
}
.product-card {
  background:
    linear-gradient(145deg, rgb(255 255 255/2%), transparent 55%),
    linear-gradient(160deg, #0b1825, #08131c 74%);
}
.product-card:hover {
  border-color: #ffda6366;
  box-shadow:
    0 13px 34px #00000077,
    0 0 24px #ffda6309;
}
.product-art-wrap {
  background: radial-gradient(ellipse at 50% 75%, #ffda6316, transparent 58%);
}
.product-card:hover .product-art {
  transform: translateY(-4px) scale(1.08) rotate(-3deg);
}
.add-link {
  color: var(--gold);
}
.rank-mark {
  border-radius: 25px 25px 25px 7px;
}
.button-primary {
  background: #2fede6;
  color: #fff;
  box-shadow: 0 7px 19px #2fede624;
}
.button-primary:hover:not(:disabled) {
  background: #45fbf4;
}
.category-intro[hidden] {
  display: none;
}
.ticons-customizer {
  background:
    radial-gradient(ellipse at 100% 50%, #ffda6310, transparent 42%),
    linear-gradient(105deg, #0c1a24, #0c1a23);
}
.customizer-controls {
  display: flex;
  align-items: center;
}
.customizer-controls > button {
  border-radius: 50%;
  background: #ffffff08;
  color: var(--gold);
  cursor: pointer;
  width: 50px;
  height: 50px;
  border: 1px solid #ffffff05;
  background: #ffffff07;
  color: #f0f7fb;
  font-size: 21px;
}
.customizer-controls > button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.customizer-controls > span {
  text-align: center;
}
.customizer-controls > span small,
.customizer-controls > span strong {
  display: block;
}
.customizer-controls > span strong {
  color: #f4d35b;
  font:
    700 56px/1 "Courier New",
    monospace;
  letter-spacing: -0.075em;
  text-shadow: 0 0 24px #f4d35b17;
}
.customizer-controls > span small {
  color: var(--muted);
  margin-top: 8px;
  color: #abc0cb;
  font-size: 14.5px;
  font-weight: 700;
}
.customizer-buy {
  border: 0;
  background: #ffda63;
  cursor: pointer;
  font-weight: 800;
  white-space: nowrap;
}
.customizer-buy strong {
  margin-left: 3px;
}
.customizer-buy span {
  margin-left: 4px;
}
.steps p {
  font-size: 12.5px;
}
.steps h3 {
  font-size: 13px;
}
.site-footer {
  border-color: #ffffff0a;
}
.cart-drawer {
  background: #08131c;
}
.drawer-total strong {
  font-variant-numeric: tabular-nums;
}
.toast {
  border-color: #ffda6340;
  background: #0c1a25;
}
@media (max-width: 900px) {
  .ticons-customizer {
    flex-wrap: wrap;
    gap: 9px;
  }
}
@media (max-width: 640px) {
  .site-header {
    min-height: 68px;
  }
  .hero {
    min-height: 177px;
    margin-top: 3px;
    border-radius: 14px;
  }
  .hero-content {
    width: 82%;
    padding: 20px 0 22px 18px;
  }
  .hero .eyebrow {
    font-size: 13px;
    letter-spacing: 0.11em;
  }
  .hero h1 {
    max-width: 300px;
    margin: 6px 0;
    font-size: clamp(27px, 8vw, 36px);
  }
  .shop-section {
    padding-top: 42px;
  }
  .category-tabs {
    margin-bottom: 18px;
  }
  .product-grid {
    gap: 9px;
  }
  .product-card {
    min-height: 190px;
  }
  .product-art-wrap {
    height: 112px;
  }
  .product-art {
    width: 76px;
    height: 76px;
  }
  .product-info {
    padding: 9px;
  }
  .product-info h3 {
    font-size: 12.5px;
  }
  .ticons-customizer {
    padding: 11px;
  }
  .customizer-controls {
    margin-left: auto;
  }
  .customizer-buy {
    margin-left: 0;
  }
  .site-footer {
    margin-top: 43px;
  }
}
.site-header {
  min-height: 70px;
}
.hero {
  margin-top: 5px;
  background: #051118;
}
.hero h1 {
  margin: 0;
  font:
    700 clamp(34px, 5vw, 52px)/1 "Space Grotesk",
    sans-serif;
  letter-spacing: -0.055em;
}
.hero h1 span {
  color: inherit;
}
.supporters > h2 {
  font:
    700 17px "Space Grotesk",
    sans-serif;
}
.supporters > h2 span {
  margin-right: 5px;
  color: var(--gold);
  margin-inline: 8px;
  color: #58cfff;
  font-size: 0.7em;
}
.shop-section {
  padding-top: 49px;
}
.category-tabs {
  margin: 0 auto 35px;
  padding: 4px;
  border: 1px solid #ffffff12;
  border-radius: 15px;
  background: #0a1822;
}
.category-tab {
  min-height: 40px;
  padding: 0 17px;
  border-radius: 12px;
  color: #a0b7c3;
}
.category-tab img {
  width: 23px;
  height: 23px;
  margin: 0 5px -6px 0;
  object-fit: contain;
}
.category-tab.is-active {
  background: #11b0ed;
  color: #fff;
  box-shadow:
    0 6px 0#0f7aa7,
    0 10px 24px #11b0ed30;
}
.category-tab.is-active img {
  filter: brightness(0) invert(1);
}
.category-intro {
  min-height: 0;
  margin-bottom: 14px;
}
.category-intro h2 {
  margin: 0;
  font:
    700 27px "Space Grotesk",
    sans-serif;
  letter-spacing: -0.045em;
}
.category-intro p {
  margin: 6px 0 0;
  color: #9aacb5;
}
.product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.package-heading {
  grid-column: 1/-1;
  margin: 0 0 13px;
  text-align: center;
}
.package-heading h2 {
  margin: 0;
  font:
    700 23px "Space Grotesk",
    sans-serif;
  letter-spacing: -0.04em;
}
.package-heading p {
  margin: 5px 0 0;
  color: #9aacb5;
  font-size: 14px;
}
.ticons-customizer {
  background: 0 0;
}
.ticons-customizer h2 {
  letter-spacing: -0.055em;
}
.customizer-controls {
  gap: 25px;
}
.customizer-controls > button:hover:not(:disabled) {
  border-color: #98cded66;
  background: #ffffff0d;
}
.customizer-controls > span {
  min-width: 114px;
}
.customizer-buy {
  min-height: 49px;
  margin-top: 7px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(100deg, #21d0ec, #1fc2f7);
  box-shadow: 0 7px 24px #21c4e535;
  color: #fff;
  font-size: 14.5px;
}
.customizer-buy:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.product-art-wrap,
.product-card {
  overflow: visible;
  border-radius: 0;
  background: 0 0;
}
.product-card {
  min-height: 250px;
  border: 0;
  box-shadow: none;
}
.product-art-wrap {
  position: relative;
  z-index: 2;
  height: 135px;
  padding-left: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.product-art {
  width: 144px;
  height: 144px;
  image-rendering: pixelated;
}
.product-info {
  position: relative;
  z-index: 1;
  min-height: 162px;
  margin-top: -60px;
  padding: 71px 16px 15px;
  border: 1px solid #ffffff18;
  border-radius: 18px;
  background: linear-gradient(145deg, #0e1e29ed, #0a1821);
}
.product-price-field {
  position: absolute;
  top: 12px;
  right: 14px;
  min-width: 110px;
  min-height: 46px;
  padding: 5px 10px;
  border: 1px solid #65d98a45;
  border-radius: 9px;
  background: #030a0f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.product-price-normal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}
.product-price-normal > span {
  color: #a2d1eb;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
.product-price-field > strong {
  color: #6fe08e;
  font:
    400 12px/1.4 "Minecraft Standard",
    sans-serif;
  white-space: nowrap;
}
.product-price-field.is-discounted {
  min-height: 59px;
}
.product-price-normal > s {
  color: #ef7b8c;
  font:
    400 8px/1.2 "Minecraft Standard",
    sans-serif;
  white-space: nowrap;
}
.product-info h3 {
  margin-bottom: 9px;
  font:
    400 20px/1.45 "Minecraft Standard",
    sans-serif;
  text-align: left;
}
.product-info h3 .product-discount-badge {
  display: block;
  width: fit-content;
  margin: 0 0 6px;
}
.product-name {
  overflow-wrap: anywhere;
}
.product-discount-badge {
  display: inline-block;
  padding: 3px 5px;
  border: 1px solid #ff637446;
  border-radius: 5px;
  background: #d9435540;
  color: #ff8d9a;
  font:
    400 9px/1.2 "Minecraft Standard",
    sans-serif;
  vertical-align: middle;
  white-space: nowrap;
}
.product-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.add-link,
.product-info-button,
.ticons-customizer .customizer-controls > button.ticons-step-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.product-info-button {
  width: 36px;
  min-height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 0 !important;
  border-radius: 10px !important;
  background: #348de0 !important;
  box-shadow:
    0 6px 0#205b98,
    0 10px 24px #348de030 !important;
  color: #fff !important;
  cursor: pointer;
  font:
    400 11px/1 "Minecraft Standard",
    sans-serif !important;
  font-weight: 400 !important;
}
.product-info-button:hover {
  background: #348de0 !important;
  filter: brightness(1.08);
  box-shadow:
    0 2px 0#205b98,
    0 0 15px #348de055 !important;
  transform: translateY(4px);
}
.product-info-button:active {
  box-shadow:
    0 1px 0#205b98,
    0 0 8px #348de050 !important;
  transform: translateY(5px);
}
.add-link,
.ticons-customizer .customizer-controls > button.ticons-step-button {
  background: #38a95b !important;
}
.add-link {
  min-width: 0;
  min-height: 36px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 11px;
  border-radius: 9px;
  box-shadow:
    0 6px 0#236d39,
    0 10px 24px #38a95b30 !important;
  color: #fff;
  gap: 5px;
  font-size: 13.5px !important;
  font-weight: 400 !important;
}
.add-link:hover {
  background: #38a95b !important;
  filter: brightness(1.08);
  box-shadow:
    0 2px 0#236d39,
    0 0 15px #38a95b55 !important;
  transform: translateY(4px);
}
.add-link:active {
  box-shadow:
    0 1px 0#236d39,
    0 0 8px #38a95b50 !important;
  transform: translateY(5px);
}
.add-link span {
  margin: 0;
  font-size: inherit;
  line-height: 1;
}
.steps-section {
  margin-top: 60px;
  padding: 20px 23px;
  border: 1px solid #ffffff0c;
  border-radius: 15px;
  background: #08141d;
}
.steps-section > h2 {
  margin: 0 0 15px;
  font:
    700 19px "Space Grotesk",
    sans-serif;
}
.steps {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  list-style: none;
}
.step-number {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #ffda6317;
  color: var(--gold);
  font:
    700 13px "Space Grotesk",
    sans-serif;
}
.steps small,
.steps strong,
.ticons-customizer .customizer-controls > span small,
.ticons-customizer .customizer-controls > span strong {
  display: block;
}
.steps small {
  margin-top: 4px;
  color: var(--muted);
}
.site-footer {
  margin-top: 40px;
}
.cart-drawer {
  background: #061721;
}
@media (max-width: 640px) {
  .hero {
    min-height: 108px;
  }
  .hero-content {
    padding: 20px;
  }
  .hero h1 {
    font-size: clamp(27px, 8vw, 37px);
  }
  .supporters {
    margin-top: 24px;
  }
  .supporters > h2 {
    font-size: 15px;
  }
  .shop-section {
    padding-top: 37px;
  }
  .category-tabs {
    margin-bottom: 27px;
  }
  .category-tab {
    min-height: 37px;
    padding: 0 9px;
    font-size: 12.5px;
  }
  .category-tab img {
    width: 19px;
    height: 19px;
  }
  .ticons-customizer {
    min-height: 221px;
    margin-top: -8px;
    padding-block: 14px;
  }
  .ticons-customizer h2 {
    font-size: 23px;
  }
  .customizer-controls {
    gap: 17px;
  }
  .customizer-controls > button {
    width: 43px;
    height: 43px;
  }
  .customizer-controls > span strong {
    font-size: 48px;
  }
  .customizer-buy {
    min-height: 45px;
    font-size: 13.5px;
  }
  .package-heading h2 {
    font-size: 20px;
  }
  .package-heading p,
  .product-price-field > strong {
    font-size: 13px;
  }
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 10px;
  }
  .product-card {
    min-height: 225px;
  }
  .product-art-wrap {
    height: 118px;
    padding-left: 13px;
  }
  .product-art-wrap::before {
    width: 120px;
    height: 120px;
    left: 9px;
    top: -18px;
  }
  .product-art {
    width: 116px;
    height: 116px;
  }
  .product-info {
    min-height: 145px;
    margin-top: -52px;
    padding: 61px 12px 13px;
  }
  .product-info h3 {
    font-size: 16px;
  }
  .product-price-field {
    top: 9px;
    right: 10px;
    min-width: 94px;
    min-height: 42px;
    padding: 4px 8px;
  }
  .product-price-field.is-discounted {
    min-height: 54px;
  }
  .product-price-normal > s,
  .product-price-normal > span {
    font-size: 13px;
  }
  .product-info h3 .product-discount-badge {
    margin-bottom: 5px;
  }
  .product-discount-badge {
    padding: 2px 4px;
    font-size: 13px;
  }
  .steps-section {
    margin-top: 43px;
    padding: 17px 14px;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
@media (max-width: 420px) {
  .product-art {
    width: 64px;
    height: 64px;
  }
}
.product-grid[hidden],
.ticons-customizer[hidden] {
  display: none;
}
.ticons-customizer {
  min-height: 0;
  margin: 0 0 22px;
  padding: 27px 18px;
  border: 1px solid #ffffff0d;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 100%, #11b0ed12, transparent 58%),
    linear-gradient(145deg, #0b1b26, #08141d);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.ticons-customizer h2 {
  margin: 0;
  color: #eff8ff;
  font:
    400 17px/1.5 "Minecraft Standard",
    sans-serif;
  text-align: center;
}
.ticons-customizer .customizer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 22px);
}
.ticons-customizer .customizer-controls > button.ticons-step-button {
  width: var(--ticons-step-size, 44px);
  height: var(--ticons-step-size, 44px);
  flex: 0 0 var(--ticons-step-size, 44px);
  padding: 0;
  border: 1px solid #ffffff16 !important;
  border-radius: 50% !important;
  box-shadow:
    0 5px 0#236d39,
    0 8px 20px #38a95b30 !important;
  color: #fff !important;
  cursor: pointer;
  font:
    400 18px/1 "Minecraft Standard",
    sans-serif !important;
}
.ticons-customizer .customizer-controls > button.ticons-step-button:hover:not(:disabled) {
  background: #38a95b !important;
  filter: brightness(1.1);
  box-shadow:
    0 2px 0#236d39,
    0 0 15px #38a95b55 !important;
  transform: translateY(3px);
}
.ticons-customizer .customizer-controls > button.ticons-step-button[data-ticons-change="-200"] {
  background: #d94a55 !important;
  box-shadow:
    0 5px 0#8d2b34,
    0 8px 20px #d94a5530 !important;
}
.ticons-customizer
  .customizer-controls
  > button.ticons-step-button[data-ticons-change="-200"]:hover:not(:disabled) {
  background: #d94a55 !important;
  box-shadow:
    0 2px 0#8d2b34,
    0 0 15px #d94a5555 !important;
}
.ticons-customizer .customizer-controls > button.ticons-step-button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}
.ticons-customizer .customizer-controls > span {
  min-width: 0;
}
.ticons-customizer .customizer-controls > span .ticons-count-input {
  display: block;
  width: var(--ticons-input-width, 190px);
  max-width: min(42vw, 270px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  outline: 0;
  background: 0 0;
  color: #f4d35b;
  font:
    400 clamp(38px, 7vw, 58px)/1.35 "Minecraft Standard",
    sans-serif;
  letter-spacing: -0.04em;
  text-align: center;
  text-shadow: 0 0 24px #f4d35b24;
  appearance: textfield;
  -moz-appearance: textfield;
}
.ticons-customizer .customizer-controls > span .ticons-count-input::-webkit-inner-spin-button,
.ticons-customizer .customizer-controls > span .ticons-count-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}
.ticons-customizer .customizer-controls > span .ticons-count-input[aria-invalid="true"] {
  color: #ff8d9a;
}
.ticons-customizer .customizer-controls > span .ticons-count-input.is-updating {
  animation: ticons-count-update 0.22s ease-out;
}
.ticons-customizer .customizer-controls > span .ticons-count-input:focus-visible {
  border-bottom: 1px solid #f4d35b;
  box-shadow: 0 2px 0#f4d35b30;
}
.ticons-customizer .customizer-controls > span > strong:not(.ticons-count-input) {
  color: #f4d35b;
  font:
    400 clamp(38px, 7vw, 58px)/1.15 "Minecraft Standard",
    sans-serif;
  letter-spacing: -0.04em;
  text-shadow: 0 0 24px #f4d35b24;
}
.ticons-customizer .customizer-controls > span small {
  margin-top: 4px;
  color: #abc0cb;
  font:
    400 11px/1.5 "Minecraft Standard",
    sans-serif;
}
.ticons-customizer .customizer-buy {
  width: fit-content;
  max-width: 100%;
  min-height: 45px;
  margin: 0;
  padding: 8px 22px;
  border: 0 !important;
  border-radius: 12px !important;
  background: #38a95b !important;
  box-shadow:
    0 6px 0#236d39,
    0 10px 24px #38a95b30 !important;
  color: #fff !important;
  cursor: pointer;
  font:
    400 11px/1.5 "Minecraft Standard",
    sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal;
  text-wrap: balance;
}
.ticons-customizer .customizer-buy:hover:not(:disabled) {
  background: #38a95b !important;
  filter: brightness(1.08);
  box-shadow:
    0 2px 0#236d39,
    0 0 15px #38a95b55 !important;
  transform: translateY(4px);
}
.ticons-customizer .customizer-buy:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
@media (max-width: 420px) {
  .ticons-customizer {
    padding: 22px 12px;
    gap: 13px;
  }
  .ticons-customizer h2 {
    font-size: 14px;
  }
  .ticons-customizer .customizer-controls {
    gap: 9px;
  }
  .ticons-customizer .customizer-controls > button.ticons-step-button {
    width: var(--ticons-step-size, 36px);
    height: var(--ticons-step-size, 36px);
    flex-basis: var(--ticons-step-size, 36px);
  }
  .ticons-customizer .customizer-controls > span {
    min-width: 0;
  }
  .ticons-customizer .customizer-controls > span .ticons-count-input {
    width: var(--ticons-input-width, 115px);
    max-width: 39vw;
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.35;
  }
  .ticons-customizer .customizer-buy {
    min-height: 41px;
    padding-inline: 13px;
    font-size: 12.5px !important;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
.hero {
  min-height: clamp(280px, 38vw, 410px);
  justify-content: center;
  background: 0 0;
}
.hero-logo {
  display: block;
  animation: logo-arrive 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.supporters {
  margin-top: 46px;
  text-align: center;
}
.supporters > h2 {
  margin: 0;
  color: #f5d979;
  font:
    700 clamp(22px, 3vw, 32px)/1.1 "Space Grotesk",
    sans-serif;
  letter-spacing: 0.16em;
}
.supporters-caption {
  margin: 9px 0 25px;
  color: #9badb7;
  font-size: 14px;
  letter-spacing: 0.05em;
}
.podium {
  max-width: 790px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 15px;
  list-style: none;
}
.podium-single {
  grid-template-columns: minmax(0, 240px);
  justify-content: center;
}
.podium-pair {
  grid-template-columns: repeat(2, minmax(0, 240px));
  justify-content: center;
}
.donor-empty {
  grid-column: 1/-1;
  padding: 22px;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  background: #0a1b29;
  color: #a9bac3;
  font-size: 14px;
  line-height: 1.6;
  list-style: none;
}
.donor-marquee[hidden] {
  display: none;
}
.podium-card {
  min-width: 0;
  min-height: 228px;
  padding: 18px 12px 0;
  position: relative;
  border: 1px solid #ffffff12;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #0a1b29, #07131c);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.podium-rank-1 {
  --podium-glow: #f5d9790d;
  --podium-glow-peak: #f5d97935;
  min-height: 282px;
  border-color: #f5d97964;
  background: linear-gradient(180deg, #282116, #0b1a21 82%);
}
.podium-rank-2 {
  --podium-glow: #c7d3e00a;
  --podium-glow-peak: #c7d3e02c;
  min-height: 244px;
  border-color: #c7d3e04d;
  background: linear-gradient(180deg, #242832, #0c1722 82%);
}
.podium-rank-3 {
  --podium-glow: #d990680a;
  --podium-glow-peak: #d990682c;
  min-height: 218px;
  border-color: #d990684d;
  background: linear-gradient(180deg, #30211e, #0b1c1d 82%);
}
.podium-card > img,
.podium-nametag {
  animation: donor-float 4.8s ease-in-out infinite;
}
.podium-card > img {
  width: 120px;
  height: 120px;
  margin: 8px 0 5px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 13px #00000099);
}
.podium-card > img.donor-body {
  image-rendering: auto;
}
.podium-nametag {
  max-width: 100%;
  overflow: hidden;
  padding: 5px 10px;
  border-radius: 3px;
  background: #09141fe8;
  box-shadow: 0 2px 8px #00000088;
  color: #f1f7fb;
  font:
    700 11px "Space Grotesk",
    sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-amount {
  margin: 5px 0 13px;
  color: #9cadb6;
  font-size: 13px;
}
.podium-detail {
  max-width: 100%;
  overflow: hidden;
  color: #b5c8d3;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-rank-1 .podium-amount {
  color: #f5da87;
}
.podium-step {
  width: calc(100% + 26px);
  height: 45px;
  border: 1px solid #ffffff14;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #43371d, #282016);
  display: grid;
  place-items: center;
}
.podium-rank-2 .podium-step {
  height: 35px;
  border-color: #c7d3e033;
  background: linear-gradient(180deg, #414754, #2a2d38);
}
.podium-rank-3 .podium-step {
  height: 27px;
  border-color: #d9906833;
  background: linear-gradient(180deg, #56392d, #39251f);
}
.podium-position {
  color: #f5dc8b;
  font:
    700 14px "Space Grotesk",
    sans-serif;
  text-shadow: 0 1px 5px #000000bb;
}
.podium-rank-2 .podium-position {
  color: #d4dae2;
}
.podium-rank-3 .podium-position {
  color: #e2aa83;
}
.podium-card {
  animation: podium-glow 4.8s ease-in-out infinite;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease;
}
.podium-card:hover {
  transform: translateY(-7px);
}
.podium-rank-1 > img {
  filter: drop-shadow(0 8px 13px #00000099) drop-shadow(0 0 9px #ffda6355);
}
.podium-rank-2 > img {
  filter: drop-shadow(0 8px 13px #00000099) drop-shadow(0 0 8px #c7d3e055);
}
.podium-rank-3 > img {
  filter: drop-shadow(0 8px 13px #00000099) drop-shadow(0 0 8px #d9906855);
}
.donor-marquee {
  margin-top: 23px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ffffff10;
  border-radius: 13px;
  background: linear-gradient(90deg, #091521, #091925, #091521);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000000 4%, #000000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000000 4%, #000000 96%, transparent);
}
.donor-track {
  width: max-content;
  margin: 0;
  padding: 10px 0;
  display: flex;
  gap: 10px;
  list-style: none;
  animation: donor-marquee 44s linear infinite;
}
.donor-marquee:focus-within .donor-track,
.donor-marquee:hover .donor-track {
  animation-play-state: paused;
}
.donor-ticker-card {
  min-width: 205px;
  padding: 9px 6px 9px 14px;
  border: 1px solid #ffffff0d;
  border-radius: 10px;
  background: #071119;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.donor-ticker-card > b {
  color: #65c9ef;
  font:
    700 13px "Space Grotesk",
    sans-serif;
}
.donor-ticker-card small,
.donor-ticker-card strong {
  display: block;
}
.donor-ticker-card > span {
  min-width: 0;
  flex: 1;
}
.donor-ticker-card strong {
  max-width: 148px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.donor-ticker-card > img {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  margin-left: auto;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 5px #00000099);
}
.donor-ticker-card small {
  margin-top: 3px;
  color: #85a2b6;
  font-size: 12.5px;
}
.supporters + .shop-section {
  padding-top: 54px;
}
@media (max-width: 640px) {
  .hero {
    min-height: 240px;
    border-radius: 15px;
  }
  .hero-content {
    padding: 12px;
  }
  .hero-logo {
    width: 82%;
    max-height: 88%;
  }
  .supporters {
    margin-top: 35px;
  }
  .supporters > h2 {
    font-size: 20px;
  }
  .supporters-caption {
    margin-bottom: 19px;
    font-size: 13px;
  }
  .podium {
    gap: 7px;
  }
  .podium-card {
    min-height: 190px;
    padding: 10px 5px 0;
    border-radius: 14px 14px 0 0;
  }
  .podium-rank-1 {
    min-height: 226px;
  }
  .podium-rank-2 {
    min-height: 204px;
  }
  .podium-rank-3 {
    min-height: 184px;
  }
  .podium-card > img {
    width: 88px;
    height: 88px;
    margin: 4px 0 5px;
  }
  .podium-nametag {
    padding: 4px 7px;
    font-size: 13px;
  }
  .podium-amount {
    margin: 4px 0 10px;
    font-size: 13px;
  }
  .podium-step {
    width: calc(100% + 12px);
    height: 32px;
  }
  .podium-rank-2 .podium-step {
    height: 25px;
  }
  .podium-rank-3 .podium-step {
    height: 19px;
  }
  .podium-position {
    font-size: 14px;
  }
  .donor-marquee {
    margin-top: 17px;
    border-radius: 10px;
  }
  .donor-track {
    padding-block: 8px;
    gap: 7px;
    animation-duration: 35s;
  }
  .donor-ticker-card {
    min-width: 174px;
    padding: 8px 5px 8px 10px;
    gap: 8px;
  }
  .donor-ticker-card strong {
    max-width: 120px;
    font-size: 12.5px;
  }
  .donor-ticker-card > img {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
  .supporters + .shop-section {
    padding-top: 39px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .donor-track,
  .hero-logo,
  .podium-card,
  .podium-card > img {
    animation: none;
  }
  .podium-card {
    transition: none;
  }
}
.login-section {
  margin-top: 36px;
}
.guide-overlay[hidden],
.login-form[hidden],
.login-section[hidden],
.supporters[hidden],
.login-section.has-player-selected {
  display: none;
}
.guide-overlay {
  position: fixed;
  inset: 0;
  padding: 28px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 14% 12%, #1e82b55c, transparent 36%),
    radial-gradient(ellipse at 83% 18%, #47bab333, transparent 34%),
    linear-gradient(145deg, #072d46, #05131d 58%, #061a23);
  display: grid;
  place-items: center;
}
.login-dialog {
  width: min(100%, 1160px);
  min-height: 540px;
  padding: 20px;
  position: relative;
  border: 1px solid #4fbae746;
  border-radius: 19px;
  background: #061620ef;
  box-shadow: 0 24px 100px #00000099;
  display: grid;
  grid-template-columns: minmax(230px, 0.36fr) minmax(0, 1fr);
  gap: 20px;
}
.server-connect-help p strong {
  color: #fff;
}
html body .shop-actions button.player-button {
  position: relative;
  width: 64px;
  min-width: 0;
  height: 56px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #a8ffd0;
  border-radius: 12px;
  background: linear-gradient(180deg, #41ffa0, #23ff8c);
  box-shadow:
    0 5px 0#15a858,
    0 9px 20px #23ff8c45;
  cursor: pointer;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: end center;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}
html body .shop-actions button.player-button:hover {
  filter: brightness(1.08);
  box-shadow:
    0 2px 0#15a858,
    0 0 16px #23ff8c70;
  transform: translateY(3px);
}
html body .shop-actions button.player-button:active {
  box-shadow:
    0 1px 0#15a858,
    0 0 10px #23ff8c60;
  transform: translateY(4px);
}
html body .shop-actions button.player-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
/* El busto sale desde el borde inferior; su parte baja se oscurece con un degradado solo sobre la propia imagen. */
html body .shop-actions button.player-button .player-bust {
  position: relative;
  width: 46px;
  height: 46px;
  margin-bottom: -3px;
  display: block;
}
html body .shop-actions button.player-button .player-bust > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
html body .shop-actions button.player-button .player-bust > img:first-child {
  filter: drop-shadow(0 2px 1px #0b6b3a99);
}
html body .shop-actions button.player-button .player-bust > .player-bust-shade {
  opacity: 0.4;
  filter: brightness(0);
  -webkit-mask-image: linear-gradient(180deg, #0000 40%, #000 100%);
  mask-image: linear-gradient(180deg, #0000 40%, #000 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  html body .shop-actions button.player-button {
    transition: none;
  }
}
.login-close {
  width: 36px;
  height: 36px;
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  border: 1px solid #ffffff1c;
  border-radius: 50%;
  background: #041119;
  color: #e2f1f9;
  cursor: pointer;
  font-size: 23px;
}
.login-form,
.login-guide-card {
  min-width: 0;
  border: 1px solid #ffffff14;
  border-radius: 15px;
  background: linear-gradient(150deg, #072634, #07151e 75%);
}
.login-guide-card {
  padding: 28px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.login-guide-avatar {
  width: 142px;
  height: 176px;
  margin-bottom: 20px;
  position: relative;
  display: grid;
  place-items: center;
}
.login-guide-avatar > img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  inset: 0;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 12px #00000088);
}
.login-guide-avatar::before {
  width: 76px;
  height: 144px;
  position: absolute;
  border-radius: 18px 18px 10px 10px;
  background: linear-gradient(#03080d 0 35%, #02060a 35% 100%);
  box-shadow:
    22px 37px 0-9px #03080d,
    -22px 37px 0-9px #03080d;
  opacity: 0;
  content: "";
}
.login-guide-avatar > span {
  z-index: 2;
  color: #fff;
  font:
    900 110px "Space Grotesk",
    sans-serif;
  text-shadow: 8px 5px 0#02060a;
  opacity: 0;
  transform: translate(19px, -34px);
}
.login-guide-avatar.is-fallback::before,
.login-guide-avatar.is-fallback > span {
  opacity: 1;
}
.login-guide-avatar.is-loaded::before,
.login-guide-avatar.is-loaded > span,
.login-name-field img[hidden] {
  display: none;
}
.login-guide-card h2 {
  margin: 0 0 10px;
  font:
    700 25px/1.08 "Space Grotesk",
    sans-serif;
}
.login-guide-card p {
  margin: 0 0 18px;
  color: #a4bbc7;
}
.first-purchase-trust {
  width: 100%;
  margin: 15px 0 0 !important;
  padding: 11px 12px;
  border: 1px solid #71d99a30;
  border-radius: 11px;
  background: #71d99a0b;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #d0e8d8 !important;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
.first-purchase-trust > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 1px;
  color: #83dfa6;
}
.guide-button {
  min-height: 48px;
  font-size: 14px;
}
.guide-button,
.login-submit {
  border: 0;
  border-radius: 10px;
  background: #11b0ed;
  box-shadow:
    0 6px 0#0f7aa7,
    0 10px 28px #11b0ed38;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}
.guide-button {
  padding: 0 20px;
}
.guide-button:hover,
.login-submit:hover {
  filter: brightness(1.13);
  transform: translateY(-2px);
}
.login-guide-card > small {
  margin-top: 23px;
  color: #97adb8;
}
.login-guide-card > small a {
  color: #abe4ff;
  text-decoration: underline;
}
.login-form {
  padding: 33px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-step-heading {
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.guide-steps > li > span,
.login-step-heading > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  background: #22afe4;
  box-shadow: 0 5px 16px #11b0ed4a;
  display: grid;
  place-items: center;
  color: #fff;
  font:
    800 18px "Space Grotesk",
    sans-serif;
}
.login-step-heading h2 {
  margin: 0 0 3px;
  font:
    700 18px "Space Grotesk",
    sans-serif;
}
.login-step-heading p {
  margin: 0;
  color: #9ab1bd;
  line-height: 1.5;
}
.platform-options {
  margin: 1px 0 30px 37px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.platform-option {
  z-index: 0;
  min-width: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 800/308;
  border: 0;
  border-radius: 13px;
  background: 0 0;
  opacity: 0.6;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    opacity 0.18s ease;
}
.platform-option > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.platform-option:hover {
  transform: translateY(-3px);
}
.platform-option.is-selected {
  z-index: 1;
  opacity: 1;
  transform: scale(1.045);
}
.platform-option.is-selected:hover {
  transform: translateY(-3px) scale(1.045);
}
.login-name-heading {
  margin-bottom: 13px;
}
.login-name-field {
  min-height: 56px;
  padding: 7px 11px;
  border: 1px solid #36c4f5;
  border-radius: 11px;
  background: #050f15;
  box-shadow: 0 0 0 3px #20b4eb1a;
  display: flex;
  align-items: center;
  gap: 12px;
}
.login-name-field img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
}
.login-name-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: 0 0;
  color: #fff;
}
.login-name-field input::placeholder {
  color: #5e7388;
}
.bedrock-uuid-field {
  margin-top: 12px;
  color: #c4d7e0;
  font-weight: 700;
}
.bedrock-uuid-field[hidden] {
  display: none;
}
.bedrock-uuid-field input {
  width: 100%;
  min-height: 42px;
  margin-top: 6px;
  padding: 0 11px;
  border: 1px solid #ffffff20;
  border-radius: 8px;
  outline: 0;
  background: #050f15;
  color: #fff;
  font:
    11px "DM Sans",
    sans-serif;
}
.bedrock-uuid-field input:focus {
  border-color: #36c4f5;
}
.bedrock-uuid-field small {
  display: block;
  margin-top: 5px;
  color: #98abb3;
  font-weight: 400;
}
.login-feedback {
  min-height: 18px;
  margin: 5px 0 8px;
  color: #ff9090;
}
.login-submit {
  width: 100%;
  min-height: 54px;
  font-size: 15px;
}
.login-submit span {
  margin-left: 10px;
  font-size: 21px;
  vertical-align: -2px;
}
.login-disclaimer {
  margin: 17px 0 0;
  color: #98abb3;
  line-height: 1.6;
  text-align: center;
}
.guide-overlay {
  z-index: 130;
  background: #030b10bd;
  backdrop-filter: blur(8px);
}
.guide-dialog {
  width: min(100%, 760px);
  padding: 36px;
  position: relative;
  border: 1px solid #4fbae746;
  border-radius: 18px;
  background: linear-gradient(145deg, #082736, #05131c 70%);
  box-shadow: 0 24px 100px #000000bb;
}
.guide-dialog > .eyebrow {
  color: #8cddff;
}
.guide-dialog > h2 {
  margin: 0 0 24px;
  font:
    800 clamp(28px, 5vw, 42px) "Space Grotesk",
    sans-serif;
}
.guide-steps {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  list-style: none;
}
.guide-steps > li {
  padding: 16px;
  border: 1px solid #ffffff18;
  border-radius: 12px;
  background: #071721;
}
.guide-steps > li > span {
  margin-bottom: 15px;
}
.guide-steps h3 {
  margin: 0 0 8px;
  font:
    700 14px "Space Grotesk",
    sans-serif;
}
.guide-steps p {
  margin: 0;
  color: #a4b8c3;
  line-height: 1.65;
}
.guide-dialog > .login-submit {
  margin-top: 23px;
}
.product-info-overlay {
  z-index: 131;
  background: #030b10bd;
  backdrop-filter: blur(8px);
}
.product-info-dialog {
  width: min(100%, 520px);
  padding: 34px;
  position: relative;
  border: 1px solid #4fbae746;
  border-radius: 18px;
  background: linear-gradient(145deg, #082736, #05131c 70%);
  box-shadow: 0 24px 100px #000000bb;
}
.product-info-dialog > .eyebrow {
  color: #8cddff;
}
.product-info-dialog > h2 {
  margin: 0 38px 14px 0;
  color: #eff9ff;
  font:
    400 23px/1.5 "Minecraft Standard",
    sans-serif;
  overflow-wrap: anywhere;
}
.product-info-dialog-price {
  margin: 0 0 16px;
  color: #6fe08e;
  font:
    400 15px/1.5 "Minecraft Standard",
    sans-serif;
}
.product-info-dialog-description {
  margin: 0;
  color: #bbcbd2;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-line;
}
.product-info-dialog-description img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.product-info-dialog-description a {
  color: #a2e0ff;
  text-decoration: underline;
}
@media (max-width: 640px) {
  .login-section {
    margin-top: 27px;
  }
  .guide-overlay {
    padding: 12px;
    place-items: start center;
  }
  .login-dialog {
    min-height: 0;
    margin-block: 0;
    padding: 10px;
    gap: 10px;
  }
  .login-dialog,
  .login-section.has-player-selected .login-dialog {
    grid-template-columns: 1fr;
  }
  .login-guide-card {
    min-height: 145px;
    padding: 14px;
    align-items: center;
    text-align: center;
  }
  .login-guide-avatar {
    width: 72px;
    height: 90px;
    margin: 0 auto 8px;
    align-self: center;
    flex: 0 0 90px;
  }
  .login-guide-card h2 {
    max-width: 100%;
    font-size: 17px;
  }
  .login-guide-card p {
    margin-bottom: 11px;
    font-size: 13px;
  }
  .first-purchase-trust {
    max-width: 330px;
    margin-top: 11px !important;
    padding: 9px 10px;
    font-size: 12.5px;
  }
  .guide-button {
    min-height: 36px;
    padding-inline: 13px;
    font-size: 13px;
  }
  .login-guide-card > small {
    margin-top: 12px;
    font-size: 12.5px;
  }
  .login-form {
    padding: 22px 12px 18px;
  }
  .login-step-heading {
    gap: 9px;
  }
  .login-step-heading > span {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    font-size: 15px;
  }
  .login-step-heading h2 {
    font-size: 14px;
  }
  .login-step-heading p {
    font-size: 12.5px;
  }
  .platform-options {
    margin: 0 0 22px;
    gap: 8px;
  }
  .login-name-field {
    min-height: 49px;
  }
  .login-name-field input,
  .login-submit {
    font-size: 14px;
  }
  .login-submit {
    min-height: 47px;
  }
  .guide-dialog {
    margin-block: 12px;
    padding: 27px 16px 17px;
  }
  .product-info-dialog {
    margin-block: 12px;
    padding: 27px 18px 20px;
  }
  .product-info-dialog > h2 {
    font-size: 18px;
  }
  .guide-steps h3,
  .product-info-dialog-description {
    font-size: 14px;
  }
  .guide-steps {
    grid-template-columns: 1fr;
  }
  .guide-steps > li {
    display: flex;
    gap: 12px;
    padding: 12px;
  }
  .guide-steps > li > span {
    margin: 0;
  }
  .guide-steps p {
    font-size: 13px;
  }
}
button:not(.platform-option) {
  border: 0;
  border-radius: 10px;
  background: #11b0ed;
  box-shadow:
    0 6px 0#0f7aa7,
    0 10px 24px #11b0ed30;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}
/* Hover/active genérico de los botones.
   Antes esta regla pintaba SIEMPRE fondo y sombra azules y, por tener más especificidad
   que las reglas de cada botón, pisaba su color propio (Perfil dorado, jugador verde…).
   Ahora usa :where() (especificidad mínima) y solo anima brillo y movimiento: el color
   y la sombra de cada botón los decide únicamente su propia regla. */
:where(button:not(.platform-option):not(:disabled)):hover {
  filter: brightness(1.12);
  transform: translateY(3px);
}
:where(button:not(.platform-option):not(:disabled)):active {
  filter: brightness(1.05);
  transform: translateY(4px);
}
button:not(.platform-option):disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
button.platform-option {
  border-radius: 10px;
  background: 0 0;
  box-shadow: none;
}
.add-link,
.brand,
.cart-trigger,
.category-intro h2,
.category-tab,
.donor-ticker-card strong,
.drawer-header h2,
.guide-button,
.guide-dialog > h2,
.guide-steps h3,
.login-guide-card h2,
.login-step-heading h2,
.login-submit,
.main-nav,
.package-heading h2,
.podium-nametag,
.podium-position,
.product-info h3,
.result-count,
.steps strong,
.steps-section > h2,
.supporters > h2 {
  font-family: "Minecraft Standard", "Space Grotesk", sans-serif;
}
button:not(.platform-option) {
  font-family: "Minecraft Standard", "Space Grotesk", sans-serif;
}
.login-guide-card h2 {
  max-width: 270px;
  margin-bottom: 13px;
  font-size: 14px;
  line-height: 1.65;
  text-wrap: balance;
}
@media (max-width: 640px) {
  .login-guide-card h2 {
    font-size: 13.5px;
  }
}
button.platform-option:not(:disabled):hover {
  transform: translateY(-3px);
}
button.platform-option.is-selected:not(:disabled):hover {
  transform: translateY(-3px) scale(1.045);
}
@media (prefers-reduced-motion: reduce) {
  button.platform-option,
  button:not(.platform-option) {
    transition: none;
  }
}
@media (max-width: 640px) {
  .cart-trigger {
    padding-inline: 6px;
    gap: 4px;
    font-size: 12.5px;
  }
}
.cart-trigger .shop-action-copy strong,
.main-nav {
  font-size: 14px;
}
.cart-trigger {
  font-size: 14.5px;
}
.category-intro p,
.category-tab,
.steps strong {
  font-size: 14px;
}
.category-intro h3,
.login-name-field input {
  font-size: 16px;
}
.drawer-header .eyebrow,
.hero .eyebrow,
.result-count,
.steps small {
  font-size: 13px;
}
.product-info h3 {
  font-size: 20px;
}
.add-link {
}
.steps small {
  line-height: 1.55;
}
.cart-row-details > strong,
.login-guide-card p,
.login-step-heading p {
  font-size: 14.5px;
}
.bedrock-uuid-field,
.guide-steps p,
.login-disclaimer,
.login-feedback {
  font-size: 14px;
}
.guide-steps h3 {
  font-size: 15px;
}
.bedrock-uuid-field small,
.cart-row-details > span,
.login-guide-card > small,
.player-field small,
.quantity-control span,
.site-footer {
  font-size: 13.5px;
}
.drawer-header h2 {
  font-size: 25px;
}
.player-field,
.player-field input {
  font-size: 14.5px;
}
.checkout-message {
  font-size: 14px;
}
.secure-note {
  font-size: 13.5px;
}
.toast {
  font-size: 14.5px;
}
@media (max-width: 640px) {
  .main-nav {
    font-size: 14px;
  }
  .cart-trigger,
  .category-intro p,
  .steps strong {
    font-size: 13.5px;
  }
  .category-tab {
    font-size: 13px;
  }
  .hero .eyebrow,
  .result-count,
  .steps small {
    font-size: 12.5px;
  }
  .product-info h3 {
    font-size: 16px;
  }
  .add-link {
    font-size: 13px;
  }
  .cart-row-details > strong,
  .login-guide-card p {
    font-size: 14px;
  }
  .guide-steps p,
  .login-disclaimer,
  .login-step-heading p {
    font-size: 13.5px;
  }
  .login-name-field input {
    font-size: 14px;
  }
  .cart-row-details > span,
  .quantity-control span,
  .site-footer {
    font-size: 13px;
  }
  .checkout-message {
    font-size: 13.5px;
  }
  .toast {
    font-size: 14px;
  }
}
.hero {
  min-height: 350px;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 22px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #ffffff18;
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 10% 50%, #206e962e, transparent 47%),
    linear-gradient(115deg, #071721, #051118 72%);
}
.hero-content {
  width: auto;
  height: auto;
  min-height: 0;
  padding: 16px;
  display: grid;
  place-items: center;
}
.hero-logo {
  width: min(100%, 400px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 30px #001831aa);
}
.server-connect {
  container-name: server-connect;
  container-type: inline-size;
  min-width: 0;
  position: relative;
  align-self: center;
  height: 330px;
  padding-top: 40px;
}
.server-platform-tabs {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  border: 1px solid #ffffff16;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: #081b27;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.server-platform-tab {
  min-height: 44px;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #081b27 !important;
  box-shadow: none !important;
  color: #a5c4d3 !important;
  cursor: pointer;
  font-size: 14.5px;
  text-transform: uppercase;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}
.server-platform-tab:hover {
  filter: brightness(1.12);
  transform: none !important;
}
.server-platform-tab.is-active {
  background: #21c5e3 !important;
  color: #fff !important;
}
.server-connect-panel {
  position: absolute;
  inset: 40px 0 0;
  padding: 22px;
  border: 1px solid #ffffff16;
  border-radius: 0 0 15px 15px;
  background: #05141e;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: stretch;
  align-content: center;
  gap: 25px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  visibility: hidden;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
}
.server-connect-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.server-connect-fields {
  min-width: 0;
  display: grid;
  align-self: center;
  align-content: start;
  gap: 11px;
}
#server-panel-java .server-connect-fields::after {
  content: "";
  min-height: 67px;
  visibility: hidden;
}
.server-connect-field {
  min-width: 0;
}
.server-connect-label {
  display: block;
  margin-bottom: 7px;
  color: #a2d1eb;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.server-connect-value {
  min-width: 0;
  min-height: 46px;
  padding: 0 9px 0 12px;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  background: #030a0f;
  display: flex;
  align-items: center;
  gap: 6px;
}
.server-connect-value > span {
  min-width: 0;
  overflow: hidden;
  color: #f2f9fc;
  font:
    400 14px/1.35 "Minecraft Standard",
    "Space Grotesk",
    sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-connect-value [data-bedrock-ip],
.server-connect-value [data-java-ip] {
  font:
    400 10px/2 "Minecraft Standard",
    sans-serif;
}
.server-connect-value [data-bedrock-port] {
  font:
    400 12px/1.4 "Minecraft Standard",
    sans-serif;
}
.server-copy-button {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  margin-left: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: 0 0 !important;
  box-shadow: none !important;
  color: #c0dae7 !important;
  cursor: pointer;
  line-height: 1;
}
.server-copy-button svg {
  display: block;
  width: 19px;
  height: 19px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.server-copy-button:hover {
  color: #fff !important;
  filter: none !important;
  transform: none !important;
}
.server-connect-bedrock-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
}
.server-connect-help {
  min-width: 0;
  align-self: stretch;
  margin: 0;
  padding-bottom: 5px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.server-connect-help h2 {
  margin: 0 0 10px;
  color: #eff9ff;
  font:
    700 22px/1.25 "Space Grotesk",
    sans-serif;
}
.server-connect-help p {
  margin: 0 0 18px;
  color: #bbcbd2;
  font-size: 14.5px;
  line-height: 1.65;
}
.server-connect-help p em {
  color: #c0e9ff;
}
.server-copy-all {
  align-self: center;
  margin-top: auto;
  min-width: 180px;
  min-height: 48px;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: #e0c34e !important;
  box-shadow: 0 5px 0#997a24 !important;
  color: #21190b !important;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease;
}
.server-copy-all:hover {
  background: #e0c34e !important;
  box-shadow:
    0 2px 0#997a24,
    0 0 15px #e0c34e55 !important;
  filter: brightness(1.08);
  transform: translateY(3px);
}
@media (max-width: 1024px) {
  .hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 16px;
  }
  .hero-content {
    min-height: 155px;
    padding: 4px 14px;
  }
  .hero-logo {
    width: min(54%, 300px);
    max-height: 155px;
  }
  .server-connect {
    width: 100%;
    height: 410px;
  }
  .server-connect-panel {
    gap: 16px;
    padding: 17px;
  }
  .server-connect-help h2 {
    font-size: 19px;
  }
  .server-connect-help p {
    font-size: 14px;
  }
}
@media (max-width: 840px) {
  .site-header {
    min-height: 70px;
    flex-wrap: wrap;
    gap: 0;
    padding: 13px 0 11px;
  }
  .main-nav {
    order: 3;
    width: 100%;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    justify-content: center;
    gap: 24px;
    font-size: 14px;
  }
  .hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 15px;
  }
  .hero-content {
    min-height: 155px;
    padding: 4px 14px;
  }
  .hero-logo {
    width: min(54%, 300px);
    max-height: 155px;
  }
  .server-connect {
    width: 100%;
    height: 410px;
  }
  .server-connect-panel {
    padding: 18px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 16px;
  }
  .server-connect-fields {
    position: relative;
    top: -8px;
    align-self: start;
    gap: 11px;
    padding-top: 0;
  }
  .server-connect-help {
    align-self: start;
    margin: 0;
    padding-bottom: 0;
    display: block;
    text-align: center;
  }
  .server-copy-all {
    margin-top: 0;
  }
  .server-connect-help p,
  .server-connect-value [data-bedrock-port] {
    font-size: 14px;
  }
  .server-connect-help h2 {
    font-size: 19px;
  }
}
@media (max-width: 640px) {
  .hero {
    min-height: 0;
    margin-top: 8px;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding: 12px;
    border-radius: 17px;
  }
  .hero-content {
    min-height: 145px;
    padding: 4px 14px;
  }
  .hero-logo {
    width: min(78%, 300px);
    max-height: 155px;
  }
  .server-connect {
    height: 450px;
    padding-top: 40px;
  }
  .server-platform-tab {
    min-height: 44px;
    font-size: 13.5px;
  }
  .server-connect-panel {
    inset: 40px 0 0;
    padding: 14px 12px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 17px;
  }
  .server-connect-fields {
    position: relative;
    top: -8px;
    align-self: start;
    gap: 11px;
    padding-top: 0;
  }
  .server-connect-help {
    margin: 0;
  }
  .server-connect-label {
    margin-bottom: 5px;
    font-size: 12.5px;
  }
  .server-connect-value {
    min-height: 40px;
  }
  #server-panel-java .server-connect-fields::after {
    min-height: 57px;
  }
  .server-connect-value > span {
    font-size: 14px;
  }
  .server-connect-value [data-bedrock-ip],
  .server-connect-value [data-java-ip] {
    font-size: 13px;
  }
  .server-connect-value [data-bedrock-port] {
    font-size: 13px;
  }
  .server-connect-help h2 {
    margin-bottom: 6px;
    font-size: 17px;
  }
  .server-connect-help p {
    margin-bottom: 12px;
    font-size: 13.5px;
  }
  .server-copy-all {
    min-height: 42px;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .server-connect-panel,
  .server-platform-tab {
    transition: none;
  }
}
.shop-toolbar {
  justify-content: space-between;
  margin-bottom: 24px;
}
.shop-toolbar .category-tabs {
  flex: 0 1 auto;
  justify-content: flex-start;
  margin: 0;
}
.shop-actions,
.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shop-action-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.shop-action-copy strong {
  font-size: 15px;
  line-height: 1.05;
}
.shop-action-copy small {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.shop-action-symbol {
  position: relative;
  flex: 0 0 auto;
  font-size: 25px;
  line-height: 1;
  filter: drop-shadow(0 2px 1px #075a91);
}
button.cart-trigger,
button.cart-trigger:hover {
  background: linear-gradient(180deg, #29b5ff, #1596eb);
}
button.cart-trigger {
  min-height: 57px;
  padding: 8px 12px;
  border: 1px solid #6ed0ff;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  box-shadow:
    0 5px 0#0872b9,
    0 9px 20px #1596eb45;
  color: #fff;
  text-transform: uppercase;
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}
button.cart-trigger:hover {
  border-color: #a0e2ff;
  filter: brightness(1.08);
  box-shadow:
    0 2px 0#0872b9,
    0 0 16px #1596eb70;
  transform: translateY(3px);
}
button.cart-trigger:active {
  box-shadow:
    0 1px 0#0872b9,
    0 0 10px #1596eb60;
  transform: translateY(4px);
}
.cart-trigger .shop-action-symbol {
  font-size: 22px;
}
.cart-trigger .cart-count {
  position: absolute;
  top: -9px;
  right: -11px;
  min-width: 18px;
  height: 18px;
  border: 2px solid #1596eb;
  background: #fff;
  color: #075a91;
  font-size: 12.5px;
}
@media (max-width: 640px) {
  .shop-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
  }
  .shop-toolbar .category-tabs {
    width: auto;
    justify-content: flex-start;
  }
  .shop-toolbar .category-tab {
    padding-inline: 10px;
  }
  .shop-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }
  .shop-actions > * {
    min-width: 0;
  }
  .cart-trigger .shop-action-copy strong,
  .shop-action-copy strong {
    font-size: 14px;
  }
  .shop-action-copy small {
    font-size: 13px;
  }
  .cart-trigger .shop-action-symbol,
  .shop-action-symbol {
    font-size: 18px;
  }
  button.cart-trigger {
    min-height: 50px;
    padding: 7px 9px;
    gap: 10px;
  }
}
@media (max-width: 360px) {
  .shop-actions {
    gap: 7px;
  }
  button.cart-trigger {
    padding-inline: 7px;
    gap: 6px;
  }
  .shop-action-copy strong {
    font-size: 13.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  button.cart-trigger {
    transition: none;
  }
}
.shop-toolbar .category-tabs {
  gap: 14px;
  padding: 0 0 6px;
  border: 0;
  border-radius: 0;
  background: 0 0;
}
.shop-actions button.cart-trigger,
.shop-toolbar button.category-tab {
  position: relative;
  min-width: 200px;
  min-height: 78px;
  padding: 12px 88px 12px 24px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-align: left;
  text-shadow: 2px 2px 0 rgb(0 0 0/35%);
  text-transform: uppercase;
}
.shop-actions button.cart-trigger {
  color: #fff;
}
.shop-toolbar button.category-tab::after {
  content: "click para ver";
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-shadow: none;
  text-transform: lowercase;
}
.shop-toolbar button.category-tab.is-active::after {
  content: "viendo ahora";
}
.shop-toolbar button.category-tab::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 52px;
  height: 52px;
  background: center/contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgb(0 0 0/28%));
  transform: translateY(-50%) rotate(8deg);
  transition: transform 0.18s ease;
}
.shop-toolbar button.category-tab[data-category="ticons"]::before {
  background-image: url(../assets/images/icons/tab-ticons.png);
}
.shop-toolbar button.category-tab[data-category="rangos"]::before {
  background-image: url(../assets/images/icons/tab-rangos.png);
}
.shop-toolbar button.category-tab:hover::before {
  transform: translateY(-50%) rotate(-6deg) scale(1.1);
}
.shop-toolbar button.category-tab {
  background: linear-gradient(180deg, #4a82b3, #3a6f9e);
  box-shadow:
    0 5px 0#25496b,
    0 10px 20px #3a6f9e30;
  color: #dbe9f6;
}
.shop-toolbar button.category-tab.is-active {
  background: linear-gradient(180deg, #2aa6ff, #1b95f5);
  box-shadow:
    0 5px 0#0f6fc0,
    0 10px 26px #1b95f566;
  color: #fff;
}
.shop-toolbar button.category-tab:not(:disabled):hover {
  background: linear-gradient(180deg, #2aa6ff, #1b95f5);
  box-shadow:
    0 2px 0#0f6fc0,
    0 0 16px #1b95f570;
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(3px);
}
.shop-toolbar button.category-tab:not(:disabled):active {
  box-shadow:
    0 1px 0#0f6fc0,
    0 0 10px #1b95f560;
  transform: translateY(4px);
}
.shop-actions button.cart-trigger {
  background: linear-gradient(180deg, #ffb02e, #f08a0c);
  box-shadow:
    0 5px 0#b3600a,
    0 10px 24px #f08a0c40;
}
.shop-actions button.cart-trigger:not(:disabled):hover {
  background: linear-gradient(180deg, #ffb02e, #f08a0c);
  box-shadow:
    0 2px 0#b3600a,
    0 0 16px #f08a0c70;
  filter: brightness(1.08);
  transform: translateY(3px);
}
.shop-actions button.cart-trigger:not(:disabled):active {
  box-shadow:
    0 1px 0#b3600a,
    0 0 10px #f08a0c60;
  transform: translateY(4px);
}
.shop-actions .cart-trigger .shop-action-copy {
  gap: 14px;
}
.shop-actions .cart-trigger .shop-action-copy strong {
  font-size: 20px;
  line-height: 1;
}
.shop-actions .cart-trigger .shop-action-copy small {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-shadow: none;
  text-transform: lowercase;
}
.shop-actions .cart-trigger .shop-action-symbol {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 52px;
  height: 52px;
  font-size: 0;
  background: url(../assets/images/icons/tab-intercambio.png) center/contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 0 rgb(0 0 0/28%));
  transform: translateY(-50%) rotate(8deg);
}
.shop-actions .cart-trigger .cart-count {
  top: -8px;
  right: -8px;
  border-color: #f08a0c;
  color: #8a4a05;
  font-size: 13px;
  text-shadow: none;
  image-rendering: auto;
}
@media (max-width: 640px) {
  .shop-toolbar .category-tabs {
    width: 100%;
    gap: 10px;
  }
  .shop-toolbar button.category-tab {
    padding: 10px 42px 10px 12px;
  }
  .shop-actions button.cart-trigger,
  .shop-toolbar button.category-tab {
    min-width: 0;
    min-height: 64px;
    gap: 10px;
    font-size: 14.5px;
  }
  .shop-toolbar button.category-tab {
    flex: 1 1 0;
  }
  .shop-actions .cart-trigger .shop-action-copy small,
  .shop-toolbar button.category-tab::after {
    font-size: 13px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .shop-actions .cart-trigger .shop-action-copy strong {
    font-size: 15px;
  }
  .shop-actions .cart-trigger .shop-action-symbol,
  .shop-toolbar button.category-tab::before {
    right: 6px;
    width: 32px;
    height: 32px;
  }
  .shop-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .shop-actions button.cart-trigger {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    padding: 10px 60px 10px 12px;
  }
  html body .shop-actions button.player-button {
    width: 56px;
    height: 56px;
  }
}
@media (max-width: 380px) {
  .shop-toolbar .category-tabs {
    flex-direction: column;
  }
  .shop-toolbar button.category-tab {
    flex: none;
    width: 100%;
    padding-right: 56px;
  }
}
.cart-row button.remove-item,
.icon-button[data-close-cart],
button.login-close {
  display: inline-grid;
  place-items: center;
  border: 1px solid #ff7780;
  background: #d9434e;
  color: #fff;
  font:
    700 20px/1 "DM Sans",
    "Segoe UI",
    sans-serif;
  box-shadow:
    0 4px 0#8f222b,
    0 8px 18px #d9434e30;
  letter-spacing: normal;
  text-transform: none;
}
.icon-button[data-close-cart],
button.login-close {
  border-radius: 10px;
}
.cart-drawer .drawer-header button.icon-button[data-close-cart]:not(:disabled):hover,
.cart-row button.remove-item:not(:disabled):hover,
button.login-close:not(:disabled):hover {
  border-color: #ff9299;
  background: #ef5963;
  color: #fff;
  box-shadow:
    0 2px 0#8f222b,
    0 0 12px #ef596360;
  filter: none;
  transform: translateY(2px);
}
.cart-row button.remove-item {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.cart-row button.remove-item > svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
}
button.login-close > svg {
  width: 17px;
  height: 17px;
}
.quantity-control button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: #fff;
  font:
    700 19px/1 "DM Sans",
    "Segoe UI",
    sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
.cart-row .quantity-control > button[data-change="-1"] {
  background: #d9434e;
  box-shadow:
    0 4px 0#8f222b,
    0 7px 14px #d9434e28;
}
.cart-row .quantity-control > button[data-change="-1"]:not(:disabled):hover {
  background: #ef5963;
  box-shadow:
    0 2px 0#8f222b,
    0 0 12px #ef596360;
  transform: translateY(2px);
}
.cart-row .quantity-control > button[data-change="1"] {
  background: #218c4b;
  box-shadow:
    0 4px 0#145b31,
    0 7px 14px #218c4b28;
}
.cart-row .quantity-control > button[data-change="1"]:not(:disabled):hover {
  background: #29ad5c;
  box-shadow:
    0 2px 0#145b31,
    0 0 12px #29ad5c60;
  transform: translateY(2px);
}
.cart-row button.remove-item:focus-visible,
.icon-button[data-close-cart]:focus-visible,
.quantity-control button:focus-visible,
button.login-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
button.guide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: "DM Sans", "Segoe UI", sans-serif;
}
.guide-button > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

/* ===== Ajustes finales ===== */

/* Los nombres de paquetes largos pasan a una segunda línea en lugar de cortarse con «…». */
.product-info h3 {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* El título «ÚLTIMAS COMPRAS» no se parte sobre las estrellas en pantallas pequeñas. */
@media (max-width: 520px) {
  .supporters > h2 {
    font-size: clamp(14px, 4.4vw, 20px);
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
}


/* =====================================================================
   TEMA OCÉANO · LUSER
   Aguas profundas con rayos de luz, burbujas, olas y reflejos dorados.
   Todo el tema está en este bloque: puedes ajustar los colores aquí.
   ===================================================================== */
:root {
  --abyss: #020b1f;
  --deep: #04204a;
  --ocean: #0b4a9c;
  --aqua: #22b8f5;
  --foam: #9be9ff;
  --bg: #031433;
  --surface: #06214a;
  --surface-raised: #0a2d63;
  --line: rgba(155, 233, 255, 0.16);
  --text: #f2faff;
  --muted: #a3c4de;
  --purple: #8fdcff;
  --pink: #5fe6e6;
  --gold: #ffd36b;
  --glass: linear-gradient(160deg, rgba(22, 110, 205, 0.30), rgba(4, 28, 66, 0.62));
  --glass-border: rgba(155, 233, 255, 0.24);
  --glass-shadow: 0 14px 44px rgba(0, 10, 40, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
html { scrollbar-color: #1c7fd0 #031433; }
::selection { background: rgba(34, 184, 245, 0.5); color: #fff; }

/* --- Fondo general: del agua clara de la superficie al abismo --- */
body { background: #031433; }
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 15% 0%, rgba(34, 184, 245, 0.38), transparent 70%),
    radial-gradient(50% 40% at 92% 6%, rgba(255, 211, 107, 0.16), transparent 70%),
    radial-gradient(70% 50% at 50% 108%, rgba(11, 74, 156, 0.6), transparent 70%),
    linear-gradient(180deg, #06326f 0%, #052557 26%, #031a41 60%, #020d27 100%);
}
/* Rayos de luz que se mecen desde la superficie */
html::before {
  content: "";
  position: fixed;
  top: -20%;
  left: -10%;
  width: 120%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  transform-origin: 18% 0;
  background: conic-gradient(from 150deg at 18% 0%,
    transparent 0deg, rgba(155, 233, 255, 0.14) 6deg, transparent 14deg,
    rgba(155, 233, 255, 0.08) 22deg, transparent 30deg, rgba(155, 233, 255, 0.12) 38deg,
    transparent 50deg, rgba(155, 233, 255, 0.07) 60deg, transparent 75deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  animation: lu-sway 14s ease-in-out infinite alternate;
}
/* Burbujas que suben sin cortes (el patrón se repite cada 800 px) */
body::after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + 800px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
  background:
    radial-gradient(circle 7px at 8% 22%, rgba(155,233,255,0.07) 0 4.3px, rgba(155,233,255,0.55) 5.5px, rgba(255,255,255,0) 7px) 0 0 / 340px 800px,
    radial-gradient(circle 12px at 72% 58%, rgba(155,233,255,0.07) 0 7.4px, rgba(155,233,255,0.55) 10.5px, rgba(255,255,255,0) 12px) 0 0 / 520px 800px,
    radial-gradient(circle 17px at 26% 40%, rgba(155,233,255,0.05) 0 10.5px, rgba(155,233,255,0.4) 15.5px, rgba(255,255,255,0) 17px) 0 0 / 760px 800px,
    radial-gradient(circle 4.5px at 40% 85%, rgba(155,233,255,0.07) 0 2.8px, rgba(155,233,255,0.55) 3.0px, rgba(255,255,255,0) 4.5px) 0 0 / 260px 400px,
    radial-gradient(circle 3px at 85% 12%, rgba(155,233,255,0.1) 0 1.9px, rgba(155,233,255,0.6) 1.5px, rgba(255,255,255,0) 3px) 0 0 / 180px 200px,
    radial-gradient(circle 9px at 55% 15%, rgba(155,233,255,0.06) 0 5.6px, rgba(155,233,255,0.45) 7.5px, rgba(255,255,255,0) 9px) 0 0 / 610px 400px;
  animation: lu-rise 55s linear infinite;
}
@keyframes lu-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes lu-rise { from { transform: translateY(0); } to { transform: translateY(-800px); } }
@keyframes lu-wave { from { background-position-x: 0; } to { background-position-x: 1200px; } }
@keyframes lu-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* --- Cabecera --- */
.site-header { border-bottom: 1px solid rgba(155, 233, 255, 0.12); }

/* --- Banner: superficie del agua con olas animadas --- */
.hero {
  background:
    radial-gradient(55% 90% at 22% 55%, rgba(34, 184, 245, 0.42), transparent 70%),
    radial-gradient(40% 60% at 88% 0%, rgba(255, 211, 107, 0.18), transparent 70%),
    linear-gradient(160deg, #0c5bb8 0%, #07356f 48%, #041f4a 100%);
  border: 1px solid rgba(155, 233, 255, 0.34);
  box-shadow: 0 22px 64px rgba(0, 12, 40, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 90px rgba(34, 184, 245, 0.14);
}
.hero > * { position: relative; z-index: 1; }
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat-x;
}
.hero::before { height: 54px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 54' preserveAspectRatio='none'><path d='M0 26.0 L10 28.0 L20 29.9 L30 31.7 L40 33.3 L50 34.8 L60 36.1 L70 37.2 L80 38.0 L90 38.6 L100 38.9 L110 38.9 L120 38.7 L130 38.3 L140 37.7 L150 37.0 L160 36.1 L170 35.2 L180 34.2 L190 33.2 L200 32.2 L210 31.2 L220 30.3 L230 29.5 L240 28.8 L250 28.2 L260 27.6 L270 27.1 L280 26.7 L290 26.3 L300 26.0 L310 25.7 L320 25.3 L330 24.9 L340 24.4 L350 23.8 L360 23.2 L370 22.5 L380 21.7 L390 20.8 L400 19.8 L410 18.8 L420 17.8 L430 16.8 L440 15.9 L450 15.0 L460 14.3 L470 13.7 L480 13.3 L490 13.1 L500 13.1 L510 13.4 L520 14.0 L530 14.8 L540 15.9 L550 17.2 L560 18.7 L570 20.3 L580 22.1 L590 24.0 L600 26.0 L610 28.0 L620 29.9 L630 31.7 L640 33.3 L650 34.8 L660 36.1 L670 37.2 L680 38.0 L690 38.6 L700 38.9 L710 38.9 L720 38.7 L730 38.3 L740 37.7 L750 37.0 L760 36.1 L770 35.2 L780 34.2 L790 33.2 L800 32.2 L810 31.2 L820 30.3 L830 29.5 L840 28.8 L850 28.2 L860 27.6 L870 27.1 L880 26.7 L890 26.3 L900 26.0 L910 25.7 L920 25.3 L930 24.9 L940 24.4 L950 23.8 L960 23.2 L970 22.5 L980 21.7 L990 20.8 L1000 19.8 L1010 18.8 L1020 17.8 L1030 16.8 L1040 15.9 L1050 15.0 L1060 14.3 L1070 13.7 L1080 13.3 L1090 13.1 L1100 13.1 L1110 13.4 L1120 14.0 L1130 14.8 L1140 15.9 L1150 17.2 L1160 18.7 L1170 20.3 L1180 22.1 L1190 24.0 L1200 26.0 V54 H0Z' fill='%239be9ff' fill-opacity='0.3'/></svg>"); background-size: 1200px 54px; animation: lu-wave 22s linear infinite reverse; }
.hero::after { height: 40px; background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0 27.5 L10 26.4 L20 25.3 L30 24.3 L40 23.4 L50 22.5 L60 21.7 L70 21.1 L80 20.5 L90 20.1 L100 19.7 L110 19.4 L120 19.1 L130 18.9 L140 18.7 L150 18.5 L160 18.2 L170 18.0 L180 17.7 L190 17.3 L200 16.9 L210 16.5 L220 16.0 L230 15.5 L240 14.9 L250 14.4 L260 13.9 L270 13.5 L280 13.2 L290 13.0 L300 12.9 L310 13.0 L320 13.3 L330 13.8 L340 14.4 L350 15.2 L360 16.2 L370 17.4 L380 18.7 L390 20.1 L400 21.6 L410 23.1 L420 24.7 L430 26.2 L440 27.7 L450 29.1 L460 30.3 L470 31.4 L480 32.3 L490 32.9 L500 33.4 L510 33.6 L520 33.6 L530 33.4 L540 32.9 L550 32.3 L560 31.5 L570 30.7 L580 29.7 L590 28.6 L600 27.5 L610 26.4 L620 25.3 L630 24.3 L640 23.4 L650 22.5 L660 21.7 L670 21.1 L680 20.5 L690 20.1 L700 19.7 L710 19.4 L720 19.1 L730 18.9 L740 18.7 L750 18.5 L760 18.2 L770 18.0 L780 17.7 L790 17.3 L800 16.9 L810 16.5 L820 16.0 L830 15.5 L840 14.9 L850 14.4 L860 13.9 L870 13.5 L880 13.2 L890 13.0 L900 12.9 L910 13.0 L920 13.3 L930 13.8 L940 14.4 L950 15.2 L960 16.2 L970 17.4 L980 18.7 L990 20.1 L1000 21.6 L1010 23.1 L1020 24.7 L1030 26.2 L1040 27.7 L1050 29.1 L1060 30.3 L1070 31.4 L1080 32.3 L1090 32.9 L1100 33.4 L1110 33.6 L1120 33.6 L1130 33.4 L1140 32.9 L1150 32.3 L1160 31.5 L1170 30.7 L1180 29.7 L1190 28.6 L1200 27.5 V40 H0Z' fill='%2322b8f5' fill-opacity='0.38'/></svg>"); background-size: 1200px 40px; animation: lu-wave 14s linear infinite; }
.hero-logo {
  filter: drop-shadow(0 0 26px rgba(34, 184, 245, 0.6)) drop-shadow(0 16px 28px rgba(0, 24, 60, 0.7));
  animation: logo-arrive 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both, lu-float 6s ease-in-out 0.8s infinite;
}
.server-connect-panel {
  background: linear-gradient(160deg, rgba(5, 30, 72, 0.86), rgba(2, 14, 38, 0.92));
  border-color: rgba(155, 233, 255, 0.26);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.server-connect-value { background: rgba(2, 10, 30, 0.62); border-color: rgba(155, 233, 255, 0.2); }

/* --- Últimas compras: podio con foco de luz dorado --- */
.supporters {
  background: radial-gradient(48% 52% at 50% 64%, rgba(255, 211, 107, 0.17), transparent 72%) no-repeat;
}
.podium-card { background: linear-gradient(180deg, rgba(40, 110, 190, 0.34), rgba(4, 26, 62, 0.92) 82%); border-color: rgba(155, 233, 255, 0.3); }
.podium-rank-1 { background: linear-gradient(180deg, rgba(255, 211, 107, 0.34), rgba(10, 36, 80, 0.94) 82%); border-color: rgba(255, 211, 107, 0.7); box-shadow: 0 0 36px rgba(255, 211, 107, 0.22); }
.podium-rank-2 { background: linear-gradient(180deg, rgba(190, 232, 255, 0.28), rgba(6, 30, 68, 0.94) 82%); border-color: rgba(190, 232, 255, 0.55); }
.podium-rank-3 { background: linear-gradient(180deg, rgba(255, 150, 95, 0.28), rgba(10, 30, 66, 0.94) 82%); border-color: rgba(255, 160, 105, 0.5); }
.donor-marquee { background: var(--glass); border-color: var(--glass-border); }

/* --- Tarjetas de cristal --- */
.steps-section,
.login-dialog {
  background: var(--glass);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.login-guide-card,
.login-form {
  background: linear-gradient(150deg, rgba(14, 82, 160, 0.42), rgba(3, 20, 52, 0.7) 78%);
  border-color: rgba(155, 233, 255, 0.2);
}
.ticons-customizer {
  background:
    radial-gradient(70% 90% at 50% 110%, rgba(34, 184, 245, 0.26), transparent 70%),
    linear-gradient(150deg, rgba(14, 82, 160, 0.45), rgba(3, 20, 52, 0.78));
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.product-info {
  background: linear-gradient(150deg, rgba(16, 92, 176, 0.52), rgba(3, 22, 56, 0.9));
  border-color: rgba(155, 233, 255, 0.26);
  box-shadow: 0 10px 28px rgba(0, 10, 40, 0.4);
}
.product-card:hover .product-info { border-color: rgba(255, 211, 107, 0.55); }
.product-art-wrap::before { background: rgba(34, 184, 245, 0.3); }
.cart-drawer {
  background: linear-gradient(180deg, #06306b, #031a41 60%, #020d27);
  border-left: 1px solid var(--glass-border);
}
.guide-dialog,
.product-info-dialog { background: linear-gradient(150deg, #0a3f82, #04204a 70%); }

/* --- Pie de página --- */
.site-footer {
  border-top: 0;
  background: linear-gradient(180deg, transparent, rgba(2, 10, 30, 0.55));
  box-shadow: inset 0 1px 0 rgba(155, 233, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  html::before, body::after, .hero::before, .hero::after, .hero-logo { animation: none; }
}

/* --- Tarjetas de paquetes: sin sombra negra al hacer hover ---
   La sombra se dibujaba sobre la caja transparente de la tarjeta (más ancha que
   la parte visible), por eso se veía cortada a los lados de la imagen. */
.product-card,
.product-card:hover {
  box-shadow: none;
}

/* --- Rangos: selector arriba + módulo de descripción con precio --- */
.product-grid.is-rank-showcase {
  display: block;
}
.rank-showcase {
  max-width: 760px;
  margin: 0 auto;
}
.rank-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}
.rank-picks {
  width: 318px;
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Botones 3D del selector de rangos.
   Colores copiados de las pestañas: no seleccionado = azul grisáceo («Ticons»),
   seleccionado = azul brillante («Rangos»). Sin brillos, solo borde inferior sólido. */
html body button.rank-pick {
  flex: 0 0 auto;
  width: 86px;
  height: 108px;
  padding: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #4a82b3, #3a6f9e);
  box-shadow: 0 6px 0 #25496b;
  filter: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #dbe9f6;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    width 0.2s ease,
    height 0.2s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease;
}
html body button.rank-pick.is-selected {
  width: 112px;
  height: 138px;
  background: linear-gradient(180deg, #2aa6ff, #1b95f5);
  box-shadow: 0 6px 0 #0f6fc0;
  color: #fff;
}
html body button.rank-pick:not(:disabled):hover {
  background: linear-gradient(180deg, #2aa6ff, #1b95f5);
  box-shadow: 0 2px 0 #0f6fc0;
  filter: none;
  color: #fff;
  transform: translateY(4px);
}
html body button.rank-pick:not(:disabled):active {
  box-shadow: 0 1px 0 #0f6fc0;
  filter: none;
  transform: translateY(5px);
}
html body button.rank-pick:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
/* Borde claro de 1px, igual que las pestañas (la regla global solo cubre una lista fija de botones) */
html body .rank-pick,
html body .rank-nav {
  border: 1px solid rgb(255 255 255 / 55%) !important;
}
.rank-pick-art {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}
.rank-pick-art .product-art,
.rank-pick-art .rank-mark {
  width: 50px;
  height: 50px;
  font-size: 18px;
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / 28%));
  box-shadow: none;
  transform: none;
}
.rank-pick.is-selected .rank-pick-art .product-art,
.rank-pick.is-selected .rank-pick-art .rank-mark {
  width: 66px;
  height: 66px;
  font-size: 24px;
}
.rank-pick-name {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 20, 60, 0.22);
  text-shadow: 2px 2px 0 rgb(0 0 0 / 35%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font:
    400 11px/1 "Minecraft Standard",
    sans-serif;
  text-transform: uppercase;
}
.rank-pick.is-selected .rank-pick-name {
  height: 34px;
  font-size: 13px;
}
html body button.rank-nav {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #4a82b3, #3a6f9e);
  box-shadow: 0 4px 0 #25496b;
  filter: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    box-shadow 0.12s ease,
    transform 0.12s ease,
    opacity 0.2s ease;
}
html body button.rank-nav:not(:disabled):hover {
  background: linear-gradient(180deg, #2aa6ff, #1b95f5);
  box-shadow: 0 1px 0 #0f6fc0;
  filter: none;
  transform: translateY(3px);
}
html body button.rank-nav:not(:disabled):active {
  box-shadow: 0 0 0 #0f6fc0;
  filter: none;
  transform: translateY(4px);
}
html body button.rank-nav:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: 0 4px 0 #25496b;
}
.rank-panel {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  animation: rank-panel-in 0.28s ease both;
}
@keyframes rank-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.rank-panel .product-price-field {
  top: 18px;
  right: 18px;
  z-index: 2;
}
.rank-panel-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 170px 18px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(34, 184, 245, 0.16), transparent 70%);
}
.rank-panel-art {
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}
.rank-panel-art .product-art,
.rank-panel-art .rank-mark {
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 8px 12px rgba(0, 10, 40, 0.5));
}
.rank-panel-title {
  min-width: 0;
}
.rank-panel-title h3 {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font:
    400 26px/1.3 "Minecraft Standard",
    sans-serif;
  text-align: left;
}
.rank-panel-title .product-discount-badge {
  display: inline-block;
}
.rank-panel-body {
  padding: 20px 22px 6px;
  color: #d7e9f4;
  font-size: 15px;
  line-height: 1.65;
}
.rank-panel-body > :first-child {
  margin-top: 0;
}
.rank-panel-body p,
.rank-panel-body ul,
.rank-panel-body ol {
  margin: 0 0 10px;
}
.rank-panel-body ul,
.rank-panel-body ol {
  padding-left: 22px;
}
.rank-panel-body li {
  margin-bottom: 5px;
}
.rank-panel-body img {
  max-width: 100%;
  height: auto;
}
.rank-panel-body a {
  color: var(--foam);
}
.rank-panel-actions {
  padding: 14px 22px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 640px) {
  .rank-selector {
    gap: 6px;
  }
  html body button.rank-nav {
    width: 34px;
    height: 34px;
  }
  .rank-picks {
    width: 258px;
    height: 128px;
    gap: 8px;
  }
  html body button.rank-pick {
    width: 70px;
    height: 92px;
  }
  html body button.rank-pick.is-selected {
    width: 96px;
    height: 120px;
  }
  .rank-pick-name {
    font-size: 9px;
  }
  .rank-pick.is-selected .rank-pick-name {
    font-size: 11px;
  }
  .rank-panel-head {
    padding: 18px 16px 14px;
    padding-top: 78px;
  }
  .rank-panel .product-price-field {
    top: 14px;
    right: 14px;
  }
  .rank-panel-body {
    padding: 16px 16px 4px;
  }
  .rank-panel-actions {
    padding: 12px 16px 20px;
  }
  .rank-panel-title h3 {
    font-size: 21px;
  }
}

/* ===== Ventajas de rango (fichas) · se editan en js/ranks.js ===== */
.rank-panel-body.has-custom-details {
  padding-top: 18px;
  font-size: 14px;
}
.rank-details {
  display: block;
}
/* Pestañas de modalidad: versión compacta de la tarjeta de modalidad de Inicio.
   Color propio por modalidad (--mc); la activa va a todo color y la otra atenuada. */
.rank-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
html body button.rank-mode {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 62px;
  padding: 11px 14px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--mc, #14b89a);
  --edge: color-mix(in srgb, var(--mc, #14b89a) 66%, #000);
  box-shadow:
    0 4px 0 var(--edge),
    0 9px 16px rgba(0, 10, 40, 0.35);
  color: #fff;
  font: inherit;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
  filter: saturate(0.55) brightness(0.78);
  transition:
    transform 0.22s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.22s ease,
    filter 0.2s ease;
}
html body button.rank-mode:not(:disabled):hover {
  background: var(--mc, #14b89a);
  box-shadow:
    0 6px 0 var(--edge),
    0 12px 20px rgba(0, 10, 40, 0.4);
  filter: saturate(0.9) brightness(0.98);
  transform: translateY(-2px);
}
html body button.rank-mode.is-active,
html body button.rank-mode.is-active:not(:disabled):hover {
  background: var(--mc, #14b89a);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.5),
    0 4px 0 var(--edge),
    0 9px 16px rgba(0, 10, 40, 0.35);
  filter: none;
  transform: none;
}
html body button.rank-mode:not(:disabled):active {
  box-shadow: 0 1px 0 var(--edge);
  transform: translateY(3px);
}
html body button.rank-mode:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.rank-mode-name {
  display: block;
  max-width: calc(100% - 48px);
  font:
    700 14px/1.15 "Minecraft Standard",
    sans-serif;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.rank-mode small {
  display: block;
  margin-top: 7px;
  font:
    700 10px/1 "Minecraft Standard",
    sans-serif;
  letter-spacing: 0.08em;
  opacity: 0.92;
  text-transform: uppercase;
}
.rank-mode-art {
  position: absolute;
  right: -2px;
  bottom: -9px;
  width: 54px;
  pointer-events: none;
  transform: rotate(-6deg);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.rank-mode-art svg,
.rank-mode-art img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.2));
}
.rank-mode:hover .rank-mode-art {
  transform: rotate(4deg) scale(1.1);
}
.rank-cards {
  column-count: 2;
  column-gap: 12px;
}
.rank-cards[hidden] {
  display: none;
}
.rank-card {
  break-inside: avoid;
  margin: 0 0 12px;
  padding: 12px 14px 8px;
  border: 1px solid rgba(155, 233, 255, 0.16);
  border-radius: 14px;
  background: rgba(2, 12, 36, 0.42);
}
.rank-card.is-wide {
  column-span: all;
  margin-top: 12px;
}
.rank-card.is-wide:first-child {
  margin-top: 0;
}
.rank-card-title {
  margin: 0 0 4px;
  color: var(--gold);
  font:
    400 12px/1.4 "Minecraft Standard",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rank-rows {
  margin: 0;
  padding: 0;
}
.rank-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  line-height: 1.4;
}
.rank-row:first-child {
  border-top: 0;
}
.rank-row dt {
  min-width: 0;
  margin: 0;
  color: #cfe3f1;
}
.rank-row dd {
  flex: none;
  max-width: 55%;
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.rank-row dd.is-check {
  color: var(--gold);
}
.rank-row dd.is-no {
  color: #6f8aa3;
}
.rank-commands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 6px;
}
.rank-commands code {
  padding: 3px 9px;
  border: 1px solid rgba(155, 233, 255, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.09);
  color: #e8f6ff;
  font:
    600 12.5px/1.5 ui-monospace,
    "SFMono-Regular",
    Menlo,
    Consolas,
    monospace;
}
.rank-note {
  margin: 0 0 6px;
  color: #d7e9f4;
  line-height: 1.5;
}
.rank-note.is-bullet::before {
  content: "• ";
  color: var(--gold);
}
@media (max-width: 640px) {
  .rank-cards {
    column-count: 1;
  }
  .rank-row {
    font-size: 13.5px;
  }
  .rank-modes {
    gap: 10px;
  }
  .rank-mode-art {
    width: 46px;
  }
}

/* ===== Inventario estilo Minecraft (hecho solo con CSS) · líneas "@..." de js/ranks.js ===== */
.mc-inv {
  width: 100%;
  max-width: 440px;
  margin: 6px auto 8px;
  padding: 8px 8px 10px;
  border: 2px solid #000;
  border-radius: 4px;
  background: #c6c6c6;
  box-shadow:
    inset 3px 3px 0 #fff,
    inset -3px -3px 0 #555;
  box-sizing: border-box;
}
.mc-inv-title {
  margin: 4px 0 6px 4px;
  color: #404040;
  font:
    400 14px/1.2 "Minecraft Standard",
    sans-serif;
}
.mc-inv-grid {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
html body .mc-inv .mc-slot {
  position: relative;
  display: block;
  aspect-ratio: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 2px solid;
  border-color: #373737 #fff #fff #373737;
  border-radius: 0;
  background: #8b8b8b;
  box-shadow: none;
  color: #fff;
  filter: none;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
  transform: none;
  transition: none;
}
html body .mc-inv button.mc-slot {
  cursor: pointer;
}
html body .mc-inv .mc-slot::after {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
  content: "";
  opacity: 0;
  pointer-events: none;
}
html body .mc-inv button.mc-slot:hover::after,
html body .mc-inv button.mc-slot:focus-visible::after,
html body .mc-inv button.mc-slot.is-open::after {
  opacity: 1;
}
html body .mc-inv button.mc-slot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
.mc-slot-icon {
  position: absolute;
  inset: 10%;
}
.mc-slot-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  user-select: none;
}
.mc-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: #5b4a8a;
  color: #fff;
  font:
    700 12px/1 "Minecraft Standard",
    sans-serif;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.mc-slot-icon.is-missing img {
  display: none;
}
.mc-slot-icon.is-missing .mc-fallback {
  display: flex;
}
/* Brillo de encantamiento: una franja morada que recorre la silueta del ítem. */
.mc-glint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 30%, rgba(170, 110, 255, 0.9) 46%, rgba(255, 255, 255, 0.6) 50%, transparent 66%),
    linear-gradient(rgba(120, 50, 230, 0.22), rgba(120, 50, 230, 0.22));
  background-size: 300% 100%, 100% 100%;
  -webkit-mask-image: var(--mc-icon);
  mask-image: var(--mc-icon);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: mc-glint 2.8s linear infinite;
  pointer-events: none;
}
.mc-slot-icon.is-missing .mc-glint {
  display: none;
}
@keyframes mc-glint {
  from {
    background-position: 160% 0, 0 0;
  }
  to {
    background-position: -60% 0, 0 0;
  }
}
.mc-count {
  position: absolute;
  right: 3px;
  bottom: 1px;
  z-index: 1;
  color: #fff;
  font:
    700 clamp(10px, 2.6vw, 14px) / 1 "Minecraft Standard",
    sans-serif;
  text-shadow: 2px 2px 0 #3f3f3f;
  pointer-events: none;
}
.mc-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: min(300px, calc(100vw - 16px));
  padding: 6px 9px 7px;
  border: 2px solid #26075f;
  border-radius: 3px;
  background: rgba(16, 0, 16, 0.95);
  box-shadow: 0 0 0 1px #100010;
  color: #fff;
  font:
    400 14px/1.35 "Minecraft Standard",
    sans-serif;
  letter-spacing: 0.01em;
  opacity: 0;
  pointer-events: none;
  text-shadow: 2px 2px 0 #3f3f3f;
  text-transform: none;
  visibility: hidden;
}
.mc-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}
.mc-tip {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mc-tip-name {
  font-weight: 400;
}
.mc-tip-line {
  color: #aaa;
}
.mc-tip-lore {
  color: #a855f7;
  font-style: italic;
}
@media (prefers-reduced-motion: reduce) {
  .mc-glint {
    animation: none;
    background-position: 50% 0, 0 0;
    opacity: 0.55;
  }
}
@media (max-width: 640px) {
  .mc-inv {
    padding: 6px 6px 8px;
  }
  html body .mc-inv .mc-slot {
    border-width: 1.5px;
  }
}

/* ===== Selector de Ticons: barra de experiencia + cofre que se llena =====
   Clases propias (xp-*) para no mezclarse con las reglas antiguas de .ticons-customizer. */
.xp-shop {
  display: grid;
  grid-template-columns: minmax(130px, 200px) minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "chest controls";
  align-items: center;
  gap: 14px clamp(20px, 4vw, 44px);
  margin: 0 0 22px;
  padding: 26px clamp(16px, 3vw, 34px) 28px;
  border: 1px solid var(--glass-border, rgba(155, 233, 255, 0.24));
  border-radius: 16px;
  background:
    radial-gradient(70% 90% at 20% 110%, rgba(34, 184, 245, 0.26), transparent 70%),
    linear-gradient(150deg, rgba(14, 82, 160, 0.45), rgba(3, 20, 52, 0.78));
  box-shadow: var(--glass-shadow, 0 14px 44px rgba(0, 10, 40, 0.5));
}
.xp-shop[hidden] {
  display: none;
}
.xp-title {
  grid-area: title;
  margin: 0;
  color: #eff8ff;
  font:
    400 17px/1.5 "Minecraft Standard",
    sans-serif;
}

/* --- Cofre --- */
.xp-chest {
  grid-area: chest;
  width: 100%;
  max-width: 190px;
  justify-self: center;
}
.xp-chest svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 14px rgba(0, 8, 30, 0.45));
  image-rendering: pixelated;
}
.xp-coin {
  opacity: 0;
  transition: opacity 0.14s ease-out;
}
.xp-coin.is-on {
  opacity: 1;
}
.xp-chest.is-pop svg {
  animation: xp-chest-pop 0.22s ease-out;
}
@keyframes xp-chest-pop {
  40% {
    transform: translateY(-3px) scale(1.04);
  }
}

/* --- Cantidad (número verde de nivel) --- */
.xp-controls {
  grid-area: controls;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.xp-level {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.xp-level small {
  margin-bottom: 15px;
  color: #abc0cb;
  font:
    400 13px/1.2 "Minecraft Standard",
    sans-serif;
}
html body .xp-level-input {
  width: var(--ticons-input-width, 150px);
  max-width: 100%;
  min-width: 0;
  margin: 0;
  /* Holgura a los 4 lados: el <input> recorta lo que sobresale, y el contorno del texto (2px) se cortaba. */
  padding: 6px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #ffd54a;
  font:
    400 clamp(34px, 6vw, 46px) / 1.25 "Minecraft Standard",
    sans-serif;
  letter-spacing: 0;
  text-align: left;
  text-shadow: none;
}
html body .xp-level-input.is-updating {
  animation: ticons-count-update 0.22s ease-out;
}
html body .xp-level-input[aria-invalid="true"] {
  color: #ff8a8a;
}
html body .xp-level-input:focus-visible {
  outline: 2px solid #bbe6ff;
  outline-offset: 4px;
}

/* --- Barra de experiencia --- */
.xp-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
html body .xp-step {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 2px solid #000;
  border-radius: 0;
  background: #8b8b8b;
  box-shadow:
    inset 2px 2px 0 #c6c6c6,
    inset -2px -2px 0 #555;
  position: relative;
  color: transparent;
  cursor: pointer;
  font-size: 0; /* el símbolo se dibuja con ::before / ::after */
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
}
/* Símbolo − / + dibujado como una sola pieza con una sola sombra, centrado en el botón
   (la sombra de 2px se compensa con -1px para que el conjunto quede centrado). */
.xp-step::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: linear-gradient(#fff, #fff) center / 14px 4px no-repeat;
  content: "";
  filter: drop-shadow(2px 2px 0 #3f3f3f);
  transform: translate(calc(-50% - 1px), calc(-50% - 1px));
}
.xp-step[data-ticons-change="200"]::before {
  background:
    linear-gradient(#fff, #fff) center / 14px 4px no-repeat,
    linear-gradient(#fff, #fff) center / 4px 14px no-repeat;
}
html body .xp-step:hover:not(:disabled) {
  background: #7a86c8;
}
html body .xp-step:active:not(:disabled) {
  box-shadow:
    inset 2px 2px 0 #555,
    inset -2px -2px 0 #c6c6c6;
}
html body .xp-step:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.xp-bar {
  --p: 0;
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 22px;
  border: 2px solid #000;
  background:
    linear-gradient(#1b1b1b 0 50%, #2c2c2c 50%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14);
}
.xp-bar:has(.xp-range:focus-visible) {
  outline: 2px solid #bbe6ff;
  outline-offset: 5px;
}
.xp-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(10px + (100% - 20px) * var(--p));
  background: linear-gradient(#c6ff6e 0 30%, #7fe02a 30% 65%, #3f9412 65%);
}
/* Muescas de la barra de Minecraft (20 tramos) */
.xp-bar::after {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(5% - 2px),
    rgba(0, 0, 0, 0.5) calc(5% - 2px),
    rgba(0, 0, 0, 0.5) 5%
  );
  content: "";
  pointer-events: none;
}
.xp-orb {
  position: absolute;
  top: 50%;
  left: calc(10px + (100% - 20px) * var(--p));
  z-index: 1;
  width: 26px;
  height: 26px;
  border: 2px solid #1d4a07;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbffc4 0 14%, #c4f53f 42%, #62bc1c 78%, #3a8510);
  box-shadow: 0 0 12px rgba(140, 255, 60, 0.65);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.xp-range {
  position: absolute;
  z-index: 2;
  inset: -8px 0;
  width: 100%;
  height: calc(100% + 16px);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
.xp-range:focus {
  outline: none;
}
.xp-range::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}
.xp-range::-moz-range-track {
  height: 100%;
  background: transparent;
}
.xp-range::-webkit-slider-thumb {
  width: 20px;
  height: 36px;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.xp-range::-moz-range-thumb {
  width: 20px;
  height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.xp-hint {
  margin: -4px 0 0;
  color: #abc0cb;
  font-size: 13px;
  line-height: 1.5;
}
.xp-hint.is-invalid {
  color: #ff9b9b;
}
html body .xp-buy {
  align-self: flex-start;
  max-width: 100%;
  min-height: 45px;
  margin: 4px 0 0;
  padding: 8px 22px;
  border: 0;
  border-radius: 12px;
  background: #38a95b;
  box-shadow:
    0 6px 0 #236d39,
    0 10px 24px rgba(56, 169, 91, 0.3);
  color: #fff;
  cursor: pointer;
  font:
    400 12px/1.5 "Minecraft Standard",
    sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}
html body .xp-buy:hover:not(:disabled) {
  box-shadow:
    0 2px 0 #236d39,
    0 0 15px rgba(56, 169, 91, 0.35);
  filter: brightness(1.08);
  transform: translateY(4px);
}
html body .xp-buy:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .xp-shop {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "chest"
      "controls";
    padding: 22px 14px 24px;
    gap: 14px;
  }
  .xp-title {
    font-size: 14px;
    text-align: center;
  }
  .xp-chest {
    max-width: 150px;
  }
  .xp-level {
    justify-content: center;
  }
  .xp-hint {
    text-align: center;
  }
  html body .xp-buy {
    align-self: stretch;
  }
}
@media (prefers-reduced-motion: reduce) {
  .xp-coin {
    transition: none;
  }
  .xp-chest.is-pop svg,
  html body .xp-level-input.is-updating {
    animation: none;
  }
}