/* Minecraft block theme: storefront only (admin pages are excluded). Colours come from the theme variables. */
body:not(.admin-page) {
  --mc-font: "Pixelify Sans", "Prompt", sans-serif;
  --mc-dark: color-mix(in srgb, var(--bg) 55%, #000);
  --mc-bevel-light: rgba(255, 255, 255, 0.16);
  --mc-bevel-dark: rgba(0, 0, 0, 0.38);
  --mc-gold: #ffd166;
  --mc-dirt: #6b4a2f;
  --mc-block-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  --mc-bevel: inset 3px 3px 0 var(--mc-bevel-light), inset -3px -3px 0 var(--mc-bevel-dark);
  --mc-slot: inset 3px 3px 0 rgba(0, 0, 0, 0.5), inset -3px -3px 0 rgba(255, 255, 255, 0.1);
}

/* Background: faint block grid with a few darker tiles */
body:not(.admin-page) {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 2px, transparent 2px),
    conic-gradient(from 90deg at 2px 2px, transparent 90deg, rgba(0, 0, 0, 0.12) 0);
  background-size: 32px 32px, 32px 32px, 64px 64px;
  background-attachment: fixed;
}
body:not(.admin-page) ::selection { background: var(--green); color: #10160d; }

/* Pixel type for Latin text and numbers; Thai glyphs fall back to Prompt */
body:not(.admin-page) .hero h1,
body:not(.admin-page) .page-banner h1,
body:not(.admin-page) .section-heading h2,
body:not(.admin-page) .panel h2,
body:not(.admin-page) .brand,
body:not(.admin-page) .section-kicker,
body:not(.admin-page) .product-price > strong,
body:not(.admin-page) .product-card h3,
body:not(.admin-page) .account-reward-amount > strong,
body:not(.admin-page) .account-reward-total > strong,
body:not(.admin-page) .account-reward-tier,
body:not(.admin-page) .account-reward-dialog-heading h2,
body:not(.admin-page) .account-point-balance strong,
body:not(.admin-page) .account-topup-total strong,
body:not(.admin-page) .cart-dialog-header h2 { font-family: var(--mc-font); letter-spacing: 0; }
body:not(.admin-page) .hero h1 { text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45); }
body:not(.admin-page) .brand > span:last-child { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }
body:not(.admin-page) .section-kicker { font-size: 12px; letter-spacing: 0.08em; }

/* Header, announcement bar and section dividers */
body:not(.admin-page) .announcement { border-bottom: 2px solid var(--mc-dark); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.04); }
body:not(.admin-page) .site-header { border-bottom: 4px solid var(--mc-dark); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
body:not(.admin-page) .brand-icon { border: 2px solid var(--mc-dark); border-radius: 0; box-shadow: var(--mc-bevel); transform: none; image-rendering: pixelated; }
body:not(.admin-page) .brand-icon img { border-radius: 0; transform: none; }
body:not(.admin-page) .section-heading { border-bottom: 8px solid; border-image: linear-gradient(to bottom, var(--green) 0 50%, var(--mc-dirt) 50% 100%) 1; }

/* Hero: pixel grid overlay on top of the existing gradients */
body:not(.admin-page) .hero {
  border-bottom: 4px solid var(--mc-dark);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.16) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 2px, transparent 2px),
    radial-gradient(ellipse at 73% 45%, var(--green) 0, var(--green) 23%, transparent 54%),
    linear-gradient(115deg, #0d1312 0%, #101719 58%, var(--green) 100%);
  background-size: 28px 28px, 28px 28px, auto, auto;
}
body[data-theme-mode="light"]:not(.admin-page) .hero {
  border-color: var(--line);
  background-image:
    linear-gradient(rgba(38, 53, 44, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 53, 44, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse at 73% 45%, color-mix(in srgb, var(--green) 18%, transparent), transparent 54%),
    linear-gradient(115deg, var(--bg), var(--panel-light));
}
body[data-theme-mode="light"]:not(.admin-page) .hero h1 { color: var(--text); text-shadow: none; }
body[data-theme-mode="light"]:not(.admin-page) .hero-copy > p { color: var(--muted); }
body:not(.admin-page) .hero-art > * { border-radius: 0 !important; image-rendering: pixelated; }
body:not(.admin-page) .page-banner { border-bottom: 4px solid var(--mc-dark); }

/* Buttons: stone-button bevel that sinks when pressed */
body:not(.admin-page) .button,
body:not(.admin-page) .menu-toggle,
body:not(.admin-page) .account-reward-open {
  border: 2px solid var(--mc-dark);
  border-radius: 0;
  box-shadow: var(--mc-bevel), 0 4px 0 var(--mc-dark);
  text-shadow: none;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.12s;
}
body:not(.admin-page) .button:hover,
body:not(.admin-page) .menu-toggle:hover,
body:not(.admin-page) .account-reward-open:hover { transform: translateY(-1px); background: var(--green); filter: brightness(1.1); box-shadow: var(--mc-bevel), 0 5px 0 var(--mc-dark); }
body:not(.admin-page) .button:active,
body:not(.admin-page) .menu-toggle:active,
body:not(.admin-page) .account-reward-open:active { transform: translateY(3px) scale(1); box-shadow: var(--mc-bevel), 0 1px 0 var(--mc-dark); }
body:not(.admin-page) .button.secondary,
body:not(.admin-page) .button.ghost,
body:not(.admin-page) .button-outline { background: color-mix(in srgb, var(--bg) 60%, #555); color: var(--text); }
body:not(.admin-page) .account-reward-open { background: color-mix(in srgb, var(--panel-light) 70%, #555); }
body:not(.admin-page) .account-reward-open.is-primary { background: var(--green); color: var(--accent-foreground, #10160d); }

/* Cards and panels: square blocks with hard shadows */
body:not(.admin-page) .panel,
body:not(.admin-page) .product-card,
body:not(.admin-page) .account-reward-card,
body:not(.admin-page) .account-reward-overview,
body:not(.admin-page) .account-reward-item,
body:not(.admin-page) .server-card {
  border: 2px solid var(--mc-dark);
  border-radius: 0;
  box-shadow: var(--mc-bevel), var(--mc-block-shadow);
}
body:not(.admin-page) .product-card,
body:not(.admin-page) .account-reward-card,
body:not(.admin-page) .server-card { transition: transform 0.12s steps(3), box-shadow 0.12s steps(3), border-color 0.12s; }
body:not(.admin-page) .product-card:hover,
body:not(.admin-page) .account-reward-card:hover,
body:not(.admin-page) .server-card:hover { transform: translate(-2px, -2px); border-color: var(--green); box-shadow: var(--mc-bevel), 6px 6px 0 rgba(0, 0, 0, 0.45); }
body:not(.admin-page) .account-reward-card::before { height: 6px; }
body:not(.admin-page) .account-reward-card.is-ready { border-color: var(--green); }
body:not(.admin-page) .account-reward-card.is-failed { border-color: #ff8f8f; }

/* Product image and reward previews look like inventory slots */
body:not(.admin-page) .product-image { border-bottom: 2px solid var(--mc-dark); background: color-mix(in srgb, var(--bg) 75%, #3a3a3a); box-shadow: var(--mc-slot); }
body:not(.admin-page) .product-image img,
body:not(.admin-page) .account-reward-preview img,
body:not(.admin-page) .account-reward-item img { image-rendering: pixelated; }
body:not(.admin-page) .item-cube { border: 2px solid var(--mc-dark); border-radius: 0; box-shadow: var(--mc-bevel); transform: none; }
body:not(.admin-page) .account-reward-preview img,
body:not(.admin-page) .account-reward-preview > span,
body:not(.admin-page) .account-reward-item img,
body:not(.admin-page) .account-reward-item-placeholder {
  border: 2px solid var(--mc-dark);
  border-radius: 0;
  background: color-mix(in srgb, var(--bg) 75%, #3a3a3a);
  box-shadow: var(--mc-slot);
}

/* Prices in gold */
body:not(.admin-page) .product-price > strong { color: var(--mc-gold); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }
body:not(.admin-page) .account-reward-amount > strong { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }

/* Badges, progress bars, inputs, dialogs */
body:not(.admin-page) .status,
body:not(.admin-page) .account-reward-badge,
body:not(.admin-page) .account-reward-dialog-chip { border-radius: 0; box-shadow: inset 2px 2px 0 var(--mc-bevel-light), inset -2px -2px 0 var(--mc-bevel-dark); }
body:not(.admin-page) .account-reward-progress-track,
body:not(.admin-page) .account-reward-progress-track > span,
body:not(.admin-page) .account-reward-mini-progress,
body:not(.admin-page) .account-reward-mini-progress > span { border-radius: 0; }
body:not(.admin-page) .account-reward-progress-track { border: 2px solid var(--mc-dark); box-shadow: var(--mc-slot); }
body:not(.admin-page) .account-reward-trophy,
body:not(.admin-page) .account-reward-dialog-icon,
body:not(.admin-page) .account-reward-next,
body:not(.admin-page) .account-reward-dialog-close,
body:not(.admin-page) .account-reward-dialog-status.is-claimed,
body:not(.admin-page) .account-reward-dialog-empty { border-radius: 0; }
body:not(.admin-page) .account-reward-trophy,
body:not(.admin-page) .account-reward-dialog-icon { border: 2px solid var(--mc-dark); box-shadow: var(--mc-bevel), 0 4px 0 var(--mc-dark); }
body:not(.admin-page) .account-reward-dialog,
body:not(.admin-page) .cart-dialog { border-radius: 0; border: 4px solid var(--mc-dark); box-shadow: var(--mc-bevel), 0 24px 80px rgba(0, 0, 0, 0.6); }
body:not(.admin-page) .cart-dialog { border-width: 0 0 0 4px; }
body:not(.admin-page) .cart-dialog-close { border-radius: 0; box-shadow: var(--mc-bevel); }
body:not(.admin-page) .account-reward-dialog-close:hover { transform: none; }
body:not(.admin-page) input:not([type="checkbox"]):not([type="radio"]),
body:not(.admin-page) textarea,
body:not(.admin-page) select { border: 2px solid var(--mc-dark); border-radius: 0; box-shadow: var(--mc-slot); }
body:not(.admin-page) input:focus-visible,
body:not(.admin-page) textarea:focus-visible,
body:not(.admin-page) select:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* Block scrollbar */
html::-webkit-scrollbar { width: 16px; height: 16px; }
html::-webkit-scrollbar-track { background: #2b3a4d; border-left: 2px solid #000; }
html::-webkit-scrollbar-thumb { min-height: 48px; border: 2px solid #000; background: var(--green, #3aa0ff); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.45), inset -2px -2px 0 rgba(0, 0, 0, 0.35); }
html::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }

@media (prefers-reduced-motion: reduce) {
  body:not(.admin-page) * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Hero server card */
.hero-server-bar { display: flex; align-items: stretch; gap: 8px; width: min(100%, 520px); margin-top: 22px; }
.hero-ip { display: grid; min-width: 0; flex: 1 1 auto; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; margin: 0; padding: 7px 8px; border: 1px solid rgba(89, 255, 192, 0.2); border-radius: 8px; background: linear-gradient(135deg, rgba(7, 20, 19, 0.92), rgba(12, 36, 31, 0.78)); color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.035); backdrop-filter: blur(8px); transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.hero-ip:hover, .hero-ip:focus-visible { border-color: rgba(89, 255, 192, 0.58); outline: none; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), 0 0 0 3px rgba(89, 255, 192, 0.08); transform: translateY(-1px); }
.hero-ip:active { transform: translateY(0); }
.hero-ip-icon { display: grid; width: 38px; height: 42px; place-items: center; border-radius: 6px; background: linear-gradient(145deg, rgba(89, 255, 192, 0.16), rgba(89, 255, 192, 0.05)); color: var(--green); font-size: 16px; }
.hero-ip-info { display: grid; min-width: 0; gap: 2px; }
.hero-ip-label { color: rgba(211, 232, 223, 0.55); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; }
.hero-ip strong { overflow: hidden; color: #fff; font-family: "Pixelify Sans", "Prompt", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-overflow: ellipsis; white-space: nowrap; }
.hero-ip-copy { display: grid; min-width: 60px; height: 42px; place-items: center; gap: 1px; border-radius: 6px; background: var(--green); color: #102016; font-size: 9px; font-weight: 700; }
.hero-ip-copy i { font-size: 12px; }
.hero-ip.is-copied { border-color: var(--green); }
.hero-ip.is-copied .hero-ip-copy { background: #a6ffc4; }
.hero-player-status { min-width: 118px; min-height: 58px; align-self: stretch; justify-content: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(89, 255, 192, 0.16) !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(8, 20, 18, 0.92), rgba(12, 34, 29, 0.78)) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important; color: rgba(224, 237, 229, 0.72) !important; }
.hero-player-status > i { display: none; }
.hero-player-count { display: grid; gap: 2px; text-align: left; }
.hero-player-count strong { color: var(--green) !important; font-family: "Pixelify Sans", "Prompt", sans-serif; font-size: 17px; line-height: 1; }
.hero-player-status .hero-player-count > span { color: rgba(224, 237, 229, 0.72); font-size: 9px; line-height: 1.2; }
.hero-player-status .online-dot { width: 7px; height: 7px; }
.hero-player-status.is-unavailable { border-color: rgba(240, 139, 88, 0.28) !important; }
.hero-player-status.is-partial { border-color: rgba(239, 198, 117, 0.28) !important; }
@media (max-width: 700px) {
  .hero-server-bar { width: 100%; max-width: 420px; flex-wrap: wrap; }
  .hero-ip { flex-basis: 100%; }
  .hero-player-status { min-height: 42px; width: 100%; }
  .hero-player-count { display: flex; align-items: baseline; gap: 5px; }
  .hero-player-count strong { font-size: 16px; }
}

/* Product rarity */
body:not(.admin-page) .product-image { position: relative; }
.product-rarity { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 3px 7px; font: 700 10px/1 "Pixelify Sans", "Prompt", sans-serif; letter-spacing: 0.08em; color: #10160d; background: #b8c0c8; border: 2px solid rgba(0, 0, 0, 0.55); box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.4), inset -2px -2px 0 rgba(0, 0, 0, 0.25); pointer-events: none; }
.rarity-rare .product-rarity { background: #5aa9ff; }
.rarity-epic .product-rarity { background: #c084fc; }
.rarity-legendary .product-rarity { background: #ffd166; }
body:not(.admin-page) .product-card.rarity-rare { border-bottom: 4px solid #5aa9ff; }
body:not(.admin-page) .product-card.rarity-epic { border-bottom: 4px solid #c084fc; }
body:not(.admin-page) .product-card.rarity-legendary { border-bottom: 4px solid #ffd166; }

/* Store: square chips and tidy grid */
body:not(.admin-page) .store-category-nav a,
body:not(.admin-page) .product-sold,
body:not(.admin-page) .store-product-grid .product-sold,
body:not(.admin-page) .store-product-grid .product-buy-now-button,
body:not(.admin-page) .store-product-grid .product-add-button,
body:not(.admin-page) .store-product-grid .product-card,
body:not(.admin-page) .network-player-pill,
body:not(.admin-page) .button-small,
body:not(.admin-page) .product-sale-badge,
body:not(.admin-page) .server-card,
body:not(.admin-page) .store-heading-count,
body:not(.admin-page) .topup-method,
body:not(.admin-page) .contact-card,
body:not(.admin-page) .news-card { border-radius: 0; }
body:not(.admin-page) .store-category-nav a { border: 2px solid var(--mc-dark); background: color-mix(in srgb, var(--panel-light) 80%, #555); font-weight: 600; box-shadow: var(--mc-bevel); }
body:not(.admin-page) .store-category-nav a.active { background: var(--green); color: var(--accent-foreground, #10160d); }
body:not(.admin-page) .store-product-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 280px)); justify-content: start; }
body:not(.admin-page) .product-sale-badge { border: 2px solid var(--mc-dark); font-family: var(--mc-font); }
/* Topup chips, tables and notices */
body:not(.admin-page) .topup-amount-presets button,
body:not(.admin-page) .amount-presets button,
body:not(.admin-page) .quick-amounts button,
body:not(.admin-page) [class*="preset"] button,
body:not(.admin-page) [class*="preset"] a,
body:not(.admin-page) .status-pill,
body:not(.admin-page) .topup-balance-card,
body:not(.admin-page) .topup-total { border-radius: 0; border: 2px solid var(--mc-dark); box-shadow: var(--mc-bevel); }body:not(.admin-page) .topup-quick-amounts button { border-radius: 0; border: 2px solid var(--mc-dark); box-shadow: var(--mc-bevel), 0 3px 0 var(--mc-dark); }
body:not(.admin-page) .topup-quick-amounts button:active { transform: translateY(2px); box-shadow: var(--mc-bevel); }
/* Legal pages and footer links */
.legal-content { max-width: 860px; }
.legal-content h2 { margin: 22px 0 6px; font-size: 18px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { line-height: 1.8; color: var(--muted); }
.legal-content a { color: var(--green); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-legal a { color: inherit; }
/* Server goal, live toasts, cart next reward */
body:not(.admin-page) .server-goal{margin-top:1.5rem;padding:1.1rem 1.25rem;background:var(--panel,var(--surface,#142235));border:2px solid color-mix(in srgb,var(--green) 40%,#000);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.server-goal-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-weight:700;margin-bottom:.7rem}
.server-goal-head i{color:#ffc94d}
.server-goal-bar{position:relative;height:22px;background:#0b1522;border:2px solid #000;overflow:hidden}
.server-goal-bar>i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--green) 0 14px,color-mix(in srgb,var(--green) 70%,#fff) 14px 16px);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25);transition:width 1s ease}
.server-goal-bar>em{position:absolute;inset:0;display:grid;place-items:center;font:700 .75rem 'Pixelify Sans',sans-serif;font-style:normal;color:#fff;text-shadow:1px 1px 0 #000}
.server-goal .muted{margin:.6rem 0 0;font-size:.85rem}
.cart-next-reward{display:grid;gap:.5rem;margin:.9rem 0;padding:.8rem;background:color-mix(in srgb,#ffc94d 10%,transparent);border:2px dashed #ffc94d}
.cart-next-reward .server-goal-bar{height:12px}
.cart-next-reward i.fa-gift{color:#ffc94d}
.cart-next-reward a{font-weight:700;color:var(--green)}
.live-toasts{position:fixed;left:16px;bottom:16px;z-index:60;pointer-events:none}
.live-toast{display:flex;align-items:center;gap:.7rem;max-width:min(340px,calc(100vw - 32px));padding:.6rem .85rem;background:#142235;color:#fff;border:2px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.5);animation:toastIn .35s ease both;font-size:.9rem}
.live-toast img{width:32px;height:32px;image-rendering:pixelated;border:2px solid #000}
.live-toast b{color:#ffc94d}
.live-toast.is-leaving{animation:toastOut .4s ease both}
@keyframes toastIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateX(-30px);opacity:0}}
@media (prefers-reduced-motion:reduce){.live-toast,.live-toast.is-leaving{animation:none}}
/* Lucky Crate */
body:not(.admin-page) .crate-stage{position:relative;margin:1.2rem 0;padding:18px 0;background:linear-gradient(180deg,#0b1522,#101f33);border:3px solid #000;box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),6px 6px 0 rgba(0,0,0,.5);overflow:hidden}
.crate-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.crate-track{display:flex;gap:8px;width:max-content;will-change:transform;transition:transform 6.5s cubic-bezier(.08,.75,.12,1)}
.crate-stage.is-idle .crate-track{transition:none;animation:crateIdle 40s linear infinite}
@keyframes crateIdle{from{transform:translateX(0)}to{transform:translateX(-1200px)}}
.crate-marker{position:absolute;z-index:3;top:0;bottom:0;left:50%;width:4px;margin-left:-2px;background:#ffc94d;box-shadow:0 0 14px #ffc94d,0 0 0 1px #000}
.crate-marker::before,.crate-marker::after{content:"";position:absolute;left:50%;margin-left:-9px;border:9px solid transparent}
.crate-marker::before{top:0;border-top-color:#ffc94d}
.crate-marker::after{bottom:0;border-bottom-color:#ffc94d}
.crate-card{--rc:#9aa7b8;flex:0 0 140px;height:150px;display:grid;place-content:center;justify-items:center;gap:6px;padding:10px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 28%,#0b1522),#0b1522);border:2px solid #000;border-bottom:5px solid var(--rc);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 35%,transparent)}
.crate-card i{font-size:2rem;color:var(--rc);filter:drop-shadow(0 0 8px var(--rc))}
.crate-card strong{font-size:.85rem;line-height:1.25;color:#fff;overflow-wrap:anywhere}
.crate-card small{font:700 .62rem 'Pixelify Sans',sans-serif;letter-spacing:.08em;color:var(--rc)}
.rarity-common{--rc:#9aa7b8}.rarity-rare{--rc:#4da3ff}.rarity-epic{--rc:#b56cff}.rarity-legendary{--rc:#ffc94d}
.crate-card.is-winner{animation:crateWin .9s ease 3;border-color:var(--rc);transform:scale(1.06);box-shadow:0 0 28px var(--rc),inset 0 0 0 2px var(--rc)}
@keyframes crateWin{50%{filter:brightness(1.6)}}
.crate-glow{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,201,77,.35),transparent 60%);transition:opacity .6s}
.crate-stage.is-celebrating .crate-glow{opacity:1}
.crate-prizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem;margin:1rem 0}
.crate-prize{--rc:#9aa7b8;display:grid;gap:2px;padding:.65rem .75rem;background:color-mix(in srgb,var(--rc) 10%,#0f1b2c);border:2px solid #000;border-left:5px solid var(--rc)}
.crate-prize i{color:var(--rc)}
.crate-prize strong{font-size:.9rem}
.crate-prize span{font-size:.75rem;color:var(--rc);font-weight:700}
.wheel-result-awarded.is-revealed{animation:crateWin .9s ease 2}
@media (max-width:640px){.crate-card{flex-basis:112px;height:128px}}
@media (prefers-reduced-motion:reduce){.crate-stage.is-idle .crate-track{animation:none}.crate-card.is-winner{animation:none}}
@media (max-width:640px){body:not(.admin-page) .hero-art .art-label{left:auto;right:72px;bottom:2px;transform:none;flex-direction:column;gap:2px;padding:6px 10px;border-radius:0;text-align:center;white-space:normal;max-width:150px;font-size:8px}body:not(.admin-page) .hero-art .art-label strong{font-size:13px}}

@media (max-width:640px){
body:not(.admin-page) .product-grid,body:not(.admin-page) .home-product-grid,body:not(.admin-page) .store-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:10px}
body:not(.admin-page) .product-grid .product-card{min-width:0;width:100%}
body:not(.admin-page) .product-grid .product-image,body:not(.admin-page) .store-product-grid .product-image{aspect-ratio:1/1;height:auto}
body:not(.admin-page) .product-grid .product-image img{padding:6px;object-fit:contain}
body:not(.admin-page) .product-grid .product-info{padding:10px}
body:not(.admin-page) .product-grid .product-info h3,body:not(.admin-page) .product-grid .product-info>button{font-size:12px;line-height:1.35;overflow-wrap:anywhere}
body:not(.admin-page) .product-grid .product-info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.45}
body:not(.admin-page) .product-grid .product-price>strong{font-size:14px}
body:not(.admin-page) .product-grid .button{width:100%;min-height:40px;padding:8px 6px;font-size:11px}
}

body:not(.admin-page) .contact-art{border:2px solid var(--mc-dark);border-radius:0;box-shadow:var(--mc-bevel),var(--mc-block-shadow);background:radial-gradient(ellipse at 83% 20%,color-mix(in srgb,var(--green) 19%,transparent),transparent 43%),linear-gradient(145deg,var(--panel-light),var(--panel))}
body:not(.admin-page) .contact-art::before,body:not(.admin-page) .contact-art::after{border-radius:0}
body:not(.admin-page) .contact-orbit{border:2px solid var(--mc-dark);border-radius:0;box-shadow:var(--mc-bevel);transform:none}
body:not(.admin-page) .contact-art strong{font-family:var(--mc-font);letter-spacing:0;text-shadow:3px 3px 0 rgba(0,0,0,.45)}
@media (max-width:640px){body:not(.admin-page) .contact-art strong{font-size:30px}}

body:not(.admin-page) .product-grid.is-empty { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }