/* Minecraft block materials — tariff cards + planted corner plots */

/* ========== Planted plots on grass corners ========== */
.mc-plot {
  position: absolute;
  bottom: calc(var(--mc-block) * 2.05);
  width: var(--mc-block);
  height: calc(var(--mc-block) * 1.55);
  z-index: 5;
  image-rendering: pixelated;
}

.mc-plot-block {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--mc-block);
  height: var(--mc-block);
  background: url("/assets/ui/mc/blocks/grass.png") center / 100% 100% no-repeat;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .18);
}

.mc-plot-plant {
  position: absolute;
  right: -2px;
  top: 0;
  width: 22px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .2));
  animation: mc-bob 2.8s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.mc-plot-plant.flower-pink { background-image: url("/assets/ui/mc/blocks/plants/flower_pink.png"); }
.mc-plot-plant.flower-yellow { background-image: url("/assets/ui/mc/blocks/plants/flower_yellow.png"); animation-delay: .3s; }
.mc-plot-plant.flower-blue { background-image: url("/assets/ui/mc/blocks/plants/flower_blue.png"); animation-delay: .6s; }
.mc-plot-plant.flower-purple { background-image: url("/assets/ui/mc/blocks/plants/flower_purple.png"); animation-delay: .2s; }
.mc-plot-plant.flower-red { background-image: url("/assets/ui/mc/blocks/plants/flower_red.png"); animation-delay: .5s; }
.mc-plot-plant.mushroom-red {
  background-image: url("/assets/ui/mc/blocks/plants/mushroom_red.png");
  width: 24px;
  height: 30px;
  right: 0;
}
.mc-plot-plant.mushroom-brown {
  background-image: url("/assets/ui/mc/blocks/plants/mushroom_brown.png");
  width: 24px;
  height: 30px;
  animation-delay: .4s;
}

.mc-plot.p1 { left: 6%; }
.mc-plot.p2 { left: 16%; }
.mc-plot.p3 { left: 28%; }
.mc-plot.p4 { left: 40%; }
.mc-plot.p5 { left: 52%; }
.mc-plot.p6 { left: 64%; }
.mc-plot.p7 { left: 76%; }
.mc-plot.p8 { left: 88%; }

/* bees prefer flower plots */
.mc-bee.b1 { animation-name: mc-bee-fly-a, mc-bee-flap; }
.mc-bee.b2 { animation-name: mc-bee-fly-b, mc-bee-flap; }
.mc-bee.b3 { animation-name: mc-bee-fly-c, mc-bee-flap; }

@keyframes mc-bee-fly-a {
  0%   { left: 4%;  bottom: 26%; transform: scaleX(1); }
  25%  { left: 18%; bottom: 34%; transform: scaleX(1); }
  50%  { left: 42%; bottom: 30%; transform: scaleX(-1); }
  75%  { left: 66%; bottom: 36%; transform: scaleX(-1); }
  100% { left: 92%; bottom: 28%; transform: scaleX(1); }
}
@keyframes mc-bee-fly-b {
  0%   { left: 90%; bottom: 32%; transform: scaleX(-1); }
  30%  { left: 70%; bottom: 40%; transform: scaleX(-1); }
  60%  { left: 35%; bottom: 28%; transform: scaleX(1); }
  100% { left: 8%;  bottom: 35%; transform: scaleX(1); }
}
@keyframes mc-bee-fly-c {
  0%   { left: 50%; bottom: 38%; transform: scaleX(1); }
  40%  { left: 78%; bottom: 30%; transform: scaleX(1); }
  70%  { left: 24%; bottom: 42%; transform: scaleX(-1); }
  100% { left: 55%; bottom: 33%; transform: scaleX(1); }
}

/* ========== Tier block cards (SHARED SKIN) ==========
 * SYNC: tariff cards and server cards share this shell.
 * Markup:
 *   TariffPlans.razor  → .plan-card.block-card
 *   Servers.razor      → .server-card.block-card
 *   Create.razor       → .selected-tariff.block-card
 * If you change the look of tariff cards, update this shared block
 * and keep server-card markup on the same block-card structure.
 */
.plan-grid {
  align-items: stretch;
}

.plan-card.block-card,
.server-card.block-card,
.selected-tariff.block-card {
  --block-size: 28px;
  --block-rim: #2a2118;
  --block-pad: 10px;
  --block-tile: url("/assets/ui/mc/blocks/copper.png");
  --block-overlay: transparent;
  appearance: none;
  width: 100%;
  height: 100%;
  text-align: left;
  color: var(--text);
  position: relative;
  overflow: hidden;
  border: 4px solid var(--block-rim);
  border-radius: 0;
  padding: 0;
  background:
    var(--block-overlay),
    var(--block-tile) 0 0 / var(--block-size) var(--block-size) repeat;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 4px 0 rgba(31, 45, 40, .18);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease, border-color .2s ease;
  animation: tier-card-in .42s cubic-bezier(.16, 1, .3, 1) both;
  image-rendering: pixelated;
}

.plan-card.block-card::before,
.server-card.block-card::before,
.selected-tariff.block-card::before {
  display: none;
}

.block-card-mosaic {
  position: absolute;
  inset: 0;
  background:
    var(--block-overlay),
    var(--block-tile) 0 0 / var(--block-size) var(--block-size) repeat;
  z-index: 0;
  image-rendering: pixelated;
  opacity: 1;
  pointer-events: none;
}

.block-card-body {
  position: relative;
  z-index: 1;
  margin: var(--block-pad, 10px);
  padding: 1rem 1.05rem 1.1rem;
  background: rgba(255, 252, 245, .94);
  border: 3px solid rgba(30, 24, 16, .18);
  display: grid;
  gap: .6rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  flex: 1 1 auto;
  min-height: 0;
}

.plan-card.block-card > .block-card-body {
  display: flex;
  flex-direction: column;
}

.plan-card.block-card .plan-desc {
  flex: 1 1 auto;
  min-height: 3.2em;
}

.plan-card.block-card .plan-packs {
  min-height: 2.4rem;
  align-content: start;
}

.block-card-sparkles {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .55) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 18%, rgba(255, 255, 200, .5) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 68%, rgba(255, 255, 255, .45) 0 1.5px, transparent 3px),
    radial-gradient(circle at 28% 78%, rgba(180, 255, 200, .4) 0 2px, transparent 3px);
  opacity: 0;
  animation: none;
}

.plan-card.block-card:hover,
.server-card.block-card:hover {
  transform: translateY(-4px);
  box-shadow: 6px 8px 0 rgba(31, 45, 40, .2);
}

.plan-card.block-card.selected,
.server-card.block-card.just-created {
  outline: 3px solid #3f9e3a;
  outline-offset: 2px;
}

.plan-card.block-card .plan-ore,
.server-card.block-card .plan-ore,
.selected-tariff.block-card .plan-ore {
  border-radius: 0;
  border: 2px solid rgba(0, 0, 0, .14);
  font-family: var(--brand-font);
  font-weight: 800;
  image-rendering: pixelated;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: .4rem center;
  padding-left: 1.7rem;
}

.server-card.block-card .plan-ore,
.selected-tariff.block-card .plan-ore {
  background-size: 14px 14px;
  background-position: .35rem center;
  padding-left: 1.45rem;
}

.server-card.block-card.accent-copper .plan-ore,
.selected-tariff.block-card.accent-copper .plan-ore,
.plan-card.block-card.accent-copper .plan-ore { background-image: url("/assets/ui/mc/blocks/copper.png"); color: #8a4a22; background-color: rgba(180,110,70,.16); }
.server-card.block-card.accent-iron .plan-ore,
.selected-tariff.block-card.accent-iron .plan-ore,
.plan-card.block-card.accent-iron .plan-ore { background-image: url("/assets/ui/mc/blocks/iron.png"); color: #3d4650; background-color: rgba(180,190,205,.28); }
.server-card.block-card.accent-mythril .plan-ore,
.selected-tariff.block-card.accent-mythril .plan-ore,
.plan-card.block-card.accent-mythril .plan-ore { background-image: url("/assets/ui/mc/blocks/mythril.png"); color: #0d6f7e; background-color: rgba(70,200,210,.2); }
.server-card.block-card.accent-netherite .plan-ore,
.selected-tariff.block-card.accent-netherite .plan-ore,
.plan-card.block-card.accent-netherite .plan-ore { background-image: url("/assets/ui/mc/blocks/netherite.png"); color: #5a2e12; background-color: rgba(80,55,45,.18); }
.server-card.block-card.accent-zenith .plan-ore,
.selected-tariff.block-card.accent-zenith .plan-ore,
.plan-card.block-card.accent-zenith .plan-ore { background-image: url("/assets/ui/mc/blocks/zenith.png"); color: #6a5208; background-color: rgba(245,210,60,.22); }

.plan-card.block-card .plan-price strong {
  font-family: var(--brand-font);
  color: var(--tier-price);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
}

.plan-card.block-card .plan-tagline {
  color: var(--tier-tag, #8a5a00);
}

.plan-card.block-card .plan-specs li {
  border-radius: 0;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(0, 0, 0, .08);
}

.plan-card.block-card .pack-chip {
  border-radius: 0;
  background: rgba(255, 255, 255, .7);
  border: 2px solid rgba(0, 0, 0, .1);
  color: #2a4034;
}

/* Shared CTA chrome (tariff CTA is non-clickable — whole card is the link) */
.block-card .block-cta,
.block-card .plan-cta {
  border-radius: 0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .15);
}
.plan-card.block-card .plan-cta {
  pointer-events: none;
  margin-top: auto;
  width: 100%;
}
.server-card.block-card .actions {
  margin-top: auto;
}
.server-card.block-card .server-card-name {
  font-family: var(--brand-font);
  font-weight: 800;
  color: #1a3d18;
}
.selected-tariff.block-card {
  margin-bottom: .5rem;
}

/* --- Tier materials --- */
.accent-copper {
  --block-tile: url("/assets/ui/mc/blocks/copper.png");
  --block-rim: #6b3d22;
  --block-size: 26px;
  --tier-shine: transparent;
  --tier-edge: #c48a5a;
  --tier-edge-strong: #a86a3a;
  --tier-glow: transparent;
  --tier-ring: rgba(180, 110, 70, .35);
  --tier-price: #8a4a22;
  --tier-tag: #9a5a28;
  --tier-beam: 0;
}
.accent-copper .plan-ore {
  color: #8a4a22;
  background-color: rgba(180, 110, 70, .16);
  background-image: url("/assets/ui/mc/blocks/copper.png");
}

.accent-iron {
  --block-tile: url("/assets/ui/mc/blocks/iron.png");
  --block-rim: #5a6068;
  --block-size: 26px;
  --block-overlay: linear-gradient(145deg, rgba(255, 255, 255, .18), transparent 40%);
  --tier-price: #3d4650;
  --tier-tag: #55606c;
  --tier-glow: rgba(180, 198, 220, .2);
  --tier-ring: rgba(120, 130, 145, .35);
  --tier-beam: 0;
}
.accent-iron .plan-ore {
  color: #3d4650;
  background-color: rgba(180, 190, 205, .28);
  background-image: url("/assets/ui/mc/blocks/iron.png");
}
.plan-card.block-card.accent-iron:hover {
  box-shadow: 6px 8px 0 rgba(31, 45, 40, .2), 0 0 18px rgba(180, 198, 220, .25);
}

.accent-mythril {
  --block-tile: url("/assets/ui/mc/blocks/mythril.png");
  --block-rim: #1a6a78;
  --block-size: 28px;
  --block-overlay: linear-gradient(145deg, rgba(180, 255, 255, .22), transparent 45%);
  --tier-price: #0d6f7e;
  --tier-tag: #188090;
  --tier-glow: rgba(60, 200, 220, .28);
  --tier-ring: rgba(40, 180, 200, .4);
}
.accent-mythril .plan-ore {
  color: #0d6f7e;
  background-color: rgba(70, 200, 210, .2);
  background-image: url("/assets/ui/mc/blocks/mythril.png");
}
.plan-card.block-card.accent-mythril,
.server-card.block-card.accent-mythril {
  box-shadow: 4px 4px 0 rgba(31, 45, 40, .16), 0 0 22px rgba(60, 200, 220, .22);
}
.plan-card.block-card.accent-mythril .block-card-sparkles,
.server-card.block-card.accent-mythril .block-card-sparkles {
  opacity: .55;
  animation: mc-sparkle 2.8s ease-in-out infinite;
}
.plan-card.block-card.accent-mythril .block-card-body,
.server-card.block-card.accent-mythril .block-card-body {
  border-color: rgba(30, 140, 160, .28);
}

.accent-netherite {
  --block-tile: url("/assets/ui/mc/blocks/netherite.png");
  --block-rim: #1a1210;
  --block-size: 30px;
  --block-overlay: linear-gradient(160deg, rgba(180, 90, 40, .18), transparent 50%);
  --block-pad: 11px;
  --tier-price: #7a3d18;
  --tier-tag: #8a4a20;
  --tier-glow: rgba(200, 100, 40, .3);
  --tier-ring: rgba(160, 80, 30, .45);
}
.accent-netherite .plan-ore {
  color: #5a2e12;
  background-color: rgba(80, 55, 45, .18);
  background-image: url("/assets/ui/mc/blocks/netherite.png");
}
.plan-card.block-card.accent-netherite,
.server-card.block-card.accent-netherite {
  box-shadow: 5px 5px 0 rgba(20, 10, 8, .35), 0 0 28px rgba(200, 90, 30, .28);
}
.plan-card.block-card.accent-netherite .block-card-body,
.server-card.block-card.accent-netherite .block-card-body {
  background: rgba(255, 246, 235, .95);
  border-color: rgba(120, 60, 25, .3);
}
.plan-card.block-card.accent-netherite .block-card-sparkles,
.server-card.block-card.accent-netherite .block-card-sparkles {
  opacity: .7;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 160, 60, .7) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 30%, rgba(255, 200, 100, .55) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 75%, rgba(255, 120, 40, .5) 0 1.5px, transparent 3px);
  animation: mc-ember 2.2s ease-in-out infinite;
}
.plan-card.block-card.accent-netherite .plan-cta,
.server-card.block-card.accent-netherite .block-cta {
  background: #c45a28;
  border-color: #7a3010;
  color: #fff8f0;
}

.accent-zenith {
  --block-tile: url("/assets/ui/mc/blocks/zenith.png");
  --block-rim: #8a6a10;
  --block-size: 32px;
  --block-pad: 12px;
  --block-overlay:
    linear-gradient(120deg, rgba(255, 255, 180, .25), transparent 35%, rgba(90, 220, 120, .2) 70%, transparent);
  --tier-price: #7a5a08;
  --tier-tag: #6a8a20;
  --tier-glow: rgba(240, 210, 80, .4);
  --tier-ring: rgba(220, 180, 40, .5);
}
.accent-zenith .plan-ore {
  color: #6a5208;
  background-color: rgba(245, 210, 60, .22);
  background-image: url("/assets/ui/mc/blocks/zenith.png");
}
.plan-card.block-card.accent-zenith,
.server-card.block-card.accent-zenith {
  box-shadow:
    6px 6px 0 rgba(90, 70, 10, .28),
    0 0 34px rgba(240, 210, 80, .35),
    0 0 60px rgba(90, 220, 120, .18);
  animation: tier-card-in .42s cubic-bezier(.16, 1, .3, 1) both, mc-zenith-pulse 3.5s ease-in-out infinite;
}
.plan-card.block-card.accent-zenith .block-card-body,
.server-card.block-card.accent-zenith .block-card-body {
  background: rgba(255, 252, 230, .96);
  border-color: rgba(180, 150, 30, .35);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 140, .55), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.plan-card.block-card.accent-zenith .block-card-sparkles,
.server-card.block-card.accent-zenith .block-card-sparkles {
  opacity: .85;
  animation: mc-sparkle 1.8s ease-in-out infinite;
}
.plan-card.block-card.accent-zenith .plan-cta,
.server-card.block-card.accent-zenith .block-cta {
  background: linear-gradient(90deg, #f0d24a, #5dbd3a 55%, #f0d24a);
  border-color: #8a6a10;
  color: #1a2a10;
  box-shadow: 0 0 16px rgba(240, 210, 80, .35);
}

@keyframes mc-sparkle {
  0%, 100% { opacity: .45; filter: brightness(1); }
  50% { opacity: .9; filter: brightness(1.25); }
}
@keyframes mc-ember {
  0%, 100% { opacity: .45; transform: translateY(0); }
  50% { opacity: .85; transform: translateY(-2px); }
}
@keyframes mc-zenith-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.04); }
}

.tariff.create-choice {
  position: relative;
  overflow: hidden;
  border: 3px solid var(--block-rim, rgba(31,45,40,.18)) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,252,245,.92), rgba(255,252,245,.88)),
    var(--block-tile, none) 0 0 / 24px 24px repeat !important;
  color: var(--text) !important;
  box-shadow: 3px 3px 0 rgba(31, 45, 40, .12) !important;
}
.tariff.create-choice.accent-copper { --block-tile: url("/assets/ui/mc/blocks/copper.png"); --block-rim: #6b3d22; }
.tariff.create-choice.accent-iron { --block-tile: url("/assets/ui/mc/blocks/iron.png"); --block-rim: #5a6068; }
.tariff.create-choice.accent-mythril { --block-tile: url("/assets/ui/mc/blocks/mythril.png"); --block-rim: #1a6a78; }
.tariff.create-choice.accent-netherite { --block-tile: url("/assets/ui/mc/blocks/netherite.png"); --block-rim: #1a1210; }
.tariff.create-choice.accent-zenith { --block-tile: url("/assets/ui/mc/blocks/zenith.png"); --block-rim: #8a6a10; }

/* Selected pack/version — mc-blocks border uses !important, so selection must too. */
.tariff.create-choice.selected {
  border-color: #2f8f3a !important;
  box-shadow:
    0 0 0 3px rgba(47, 143, 58, .42),
    4px 4px 0 rgba(31, 45, 40, .16) !important;
  background:
    linear-gradient(180deg, rgba(220, 245, 210, .55), rgba(255, 252, 245, .9)),
    var(--block-tile, none) 0 0 / 24px 24px repeat !important;
}
.tariff.create-choice.selected strong {
  color: #1a5c20;
}
button.tariff.create-choice {
  font: inherit;
  width: 100%;
  appearance: none;
  text-align: left;
  cursor: pointer;
}

.plan-card.block-card .plan-desc {
  color: #4d6558;
  margin: 0;
  font-size: .9rem;
  line-height: 1.45;
}

.plan-grid > .plan-card.block-card:nth-child(1) { animation-delay: .02s; }
.plan-grid > .plan-card.block-card:nth-child(2) { animation-delay: .08s; }
.plan-grid > .plan-card.block-card:nth-child(3) { animation-delay: .14s; }
.plan-grid > .plan-card.block-card:nth-child(4) { animation-delay: .2s; }
.plan-grid > .plan-card.block-card:nth-child(5) { animation-delay: .26s; }

@media (prefers-reduced-motion: reduce) {
  .plan-card.block-card.accent-zenith,
  .server-card.block-card.accent-zenith,
  .block-card-sparkles,
  .mc-plot-plant {
    animation: none !important;
  }
}