/* Minecraft landing page: block / pixel look. Own drawings and the OFL font "Pixelify Sans" (self-hosted). No Mojang assets. */
@font-face {
    font-family: "Pixelify Sans";
    src: url("../fonts/PixelifySans-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
.mc { --mc-grass: #4fae3a; --mc-grass-d: #2f7a22; --mc-dirt: #8a5a34; --mc-stone: #8d9099; --mc-stone-d: #4b4e56; --mc-diamond: #3fe8e0; --mc-nether: #b8323f; --mc-gold: #ffd34d; --mc-font: "Pixelify Sans", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; }
.mc h1, .mc h2, .mc .mc-px { font-family: var(--mc-font); font-weight: 700; letter-spacing: 0; text-transform: none; }
.mc h1 { font-size: clamp(2.3rem, 6.4vw, 4rem); text-shadow: 4px 4px 0 rgba(0, 0, 0, .55); line-height: 1.1; }
.mc h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); text-shadow: 3px 3px 0 rgba(0, 0, 0, .5); }
.mc h3 { font-family: var(--mc-font); font-weight: 700; font-size: 1.35rem; }

.mc-hero { position: relative; padding: clamp(36px, 6vw, 76px) 0 clamp(32px, 5vw, 60px); background:
    linear-gradient(180deg, rgba(11, 16, 32, 0) 60%, #0b1020 100%),
    radial-gradient(900px 420px at 80% 20%, rgba(63, 232, 224, .16), transparent 70%),
    radial-gradient(700px 400px at 10% 70%, rgba(79, 174, 58, .16), transparent 70%); }
.mc-hero .vx-hero-grid { grid-template-columns: 1fr 1fr; }
.mc-hero h1 .mc-accent { color: var(--mc-grass); text-shadow: 4px 4px 0 #0f3d09; }
.mc-strip { height: 44px; background-image: url("../img/block-grass.svg"); background-repeat: repeat-x; background-size: 44px 45px; background-position: 0 0; image-rendering: pixelated; }
.mc-strip--stone { background-image: url("../img/block-stone.svg"); }
.mc-strip--nether { background-image: url("../img/block-nether.svg"); }
.mc-strip--diamond { background-image: url("../img/block-diamond.svg"); }

/* Blocky buttons */
.mc .vx-btn { border-radius: 0; font-family: var(--mc-font); font-size: 1.1rem; letter-spacing: .02em; min-height: 52px; border: 0; position: relative; box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .35), inset 4px 4px 0 rgba(255, 255, 255, .28), 0 4px 0 rgba(0, 0, 0, .5); text-shadow: 2px 2px 0 rgba(0, 0, 0, .45); transform: none; }
.mc .vx-btn:hover { transform: translateY(-2px); }
.mc .vx-btn--primary { background: #3c8527; color: #fff !important; }
.mc .vx-btn--primary:hover { background: #46a02e; }
.mc .vx-btn--ghost { background: #5c5f68; color: #fff !important; border: 0; }
.mc .vx-btn--ghost:hover { background: #6d717b; }

/* Cards with stepped corners */
.mc .vx-card, .mc .vx-note, .mc .vx-steps li, .mc .vx-faq details, .mc .vx-table-wrap { border-radius: 0; border: 4px solid #000; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .13), inset -3px -3px 0 rgba(0, 0, 0, .3); background: #1d2540; }
.mc .vx-table-wrap { background: #1d2540; }
.mc .vx-table thead th { background: #2a335a; font-family: var(--mc-font); font-size: 1.05rem; }
.mc .vx-faq summary { font-family: var(--mc-font); font-size: 1.1rem; }
.mc .vx-faq summary::after { color: var(--mc-gold); }
.mc .vx-steps li::before { border-radius: 0; background: var(--mc-grass); color: #fff; font-family: var(--mc-font); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .3), inset 3px 3px 0 rgba(255, 255, 255, .3); text-shadow: 2px 2px 0 rgba(0, 0, 0, .4); }
.mc .vx-eyebrow { font-family: var(--mc-font); color: var(--mc-gold); letter-spacing: .08em; font-size: .95rem; }
.mc .vx-icon { border-radius: 0; background: rgba(79, 174, 58, .2); color: #9be67f; }
.mc .vx-chip { border-radius: 0; font-family: var(--mc-font); font-size: .9rem; border: 2px solid rgba(255, 255, 255, .25); }

/* Plans */
.mc-plan-head { display: flex; align-items: center; gap: 14px; }
.mc-plan-head img { width: 64px; height: 66px; flex: none; image-rendering: pixelated; }
.mc-plan-head h3 { margin: 0; font-size: 1.6rem; }
.mc-plan--grass { border-color: #1d4d14 !important; }
.mc-plan--diamond { border-color: #0f5f5b !important; }
.mc-plan--nether { border-color: #5a1620 !important; }
.mc .vx-plan--featured { box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .13), inset -3px -3px 0 rgba(0, 0, 0, .3), 0 0 0 4px var(--mc-gold); }
.mc .vx-plan-badge { border-radius: 0; background: var(--mc-gold); font-family: var(--mc-font); font-size: .95rem; text-transform: none; letter-spacing: 0; top: -22px; left: 18px; padding: 3px 12px; border: 3px solid #000; }
.mc .vx-price { font-family: var(--mc-font); font-size: 2.8rem; }

/* Inventory slots for software */
.mc-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; list-style: none; padding: 0 !important; margin: 0; }
.mc-slot { background: #3a3d46; border: 3px solid #1b1c21; box-shadow: inset 3px 3px 0 #202228, inset -3px -3px 0 #5b5e69; padding: 12px 8px 10px; text-align: center; font-family: var(--mc-font); font-size: 1rem; color: #fff; }
.mc-slot img { display: block; margin: 0 auto 6px; width: 44px; height: 45px; image-rendering: pixelated; }
.mc-slot small { display: block; font-family: var(--vx-font); font-size: .74rem; color: #c5cadb; margin-top: 2px; }

.mc-worldbar { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; padding: 14px 18px !important; margin: 0; background: #1d2540; border: 4px solid #000; font-family: var(--mc-font); }
.mc-worldbar li { display: inline-flex; gap: 8px; align-items: center; color: #fff; }
.mc-worldbar li::before { content: ""; width: 12px; height: 12px; background: var(--mc-grass); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .3), inset 2px 2px 0 rgba(255, 255, 255, .35); flex: none; }

.mc-notice { background: #1d2540; border: 4px solid #000; border-left-width: 12px; border-left-color: var(--mc-gold); padding: 16px 20px; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .1); }
.mc-notice--parents { border-left-color: var(--mc-diamond); }
.mc-legalnote { text-align: center; color: var(--vx-muted); font-size: .9rem; padding: 18px 0 0; }

.mc .vx-crumbs a { color: var(--vx-muted); }
@media (max-width: 920px) { .mc-hero .vx-hero-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mc .vx-btn:hover { transform: none; } }
.mc .vx-cur { font-family: var(--vx-font); font-weight: 800; }