/* mc/mc.css — the Minecraft page. Blocky on purpose: hard edges, pixel headings, a grass strip. */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
.mc { --grass: #5DA13B; --grass-dark: #3E7D2A; --dirt: #79553D; --dirt-dark: #5B3F2E; --stone: #7F7F7F; --diamond: #4AEDD9; --gold: #FCD34D; --redstone: #E5484D; }
.mc .px { font-family: 'Press Start 2P', 'Courier New', monospace; letter-spacing: 0; line-height: 1.6; text-transform: none; }
.mc-hero { position: relative; overflow: hidden; padding: 56px 0 40px; }
.mc-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(90deg, var(--grass) 0 24px, var(--grass-dark) 24px 32px, var(--grass) 32px 56px, #6BB547 56px 64px); image-rendering: pixelated; }
.mc-hero::after { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 6px; background: repeating-linear-gradient(90deg, var(--dirt) 0 16px, var(--dirt-dark) 16px 24px); }
.mc-title { font-size: clamp(22px, 4.2vw, 40px); color: #fff; text-shadow: 4px 4px 0 var(--grass-dark); margin: 0; }
.mc-sub { margin: 14px 0 0; color: var(--dim); max-width: 52ch; }
.mc-ip { display: inline-flex; flex-wrap: wrap; max-width: 100%; box-sizing: border-box; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 18px; background: #1b1b1b; border: 4px solid #000; box-shadow: inset 4px 4px 0 #3a3a3a, inset -4px -4px 0 #0a0a0a, 6px 6px 0 rgba(0,0,0,.5); color: #fff; font-size: 16px; }
.mc-ip code { font-family: 'Press Start 2P', monospace; font-size: 14px; color: var(--diamond); }
.mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; background: var(--grass); color: #fff; font-weight: 700; text-decoration: none; border: 4px solid #000; box-shadow: inset 4px 4px 0 rgba(255,255,255,.28), inset -4px -4px 0 rgba(0,0,0,.35), 6px 6px 0 rgba(0,0,0,.5); cursor: pointer; font: inherit; font-size: 15px; transition: transform .06s; }
.mc-btn:hover { filter: brightness(1.08); }
.mc-btn:active { transform: translate(3px, 3px); box-shadow: inset 4px 4px 0 rgba(255,255,255,.28), inset -4px -4px 0 rgba(0,0,0,.35), 3px 3px 0 rgba(0,0,0,.5); }
.mc-btn.stone { background: var(--stone); } .mc-btn.gold { background: var(--gold); color: #3b2a00; } .mc-btn.dirt { background: var(--dirt); }
.mc-btn.sm { padding: 9px 14px; font-size: 13px; }
.mc-card { background: #141414; border: 4px solid #000; box-shadow: inset 4px 4px 0 #2a2a2a, inset -4px -4px 0 #050505, 8px 8px 0 rgba(0,0,0,.45); padding: 22px; color: var(--ink); }
.mc-card h2, .mc-card h3 { margin: 0 0 10px; }
.mc-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .mc-grid { grid-template-columns: 1.1fr .9fr; } .mc-grid.three { grid-template-columns: repeat(3, 1fr); } }
.mc-status { display: flex; align-items: center; gap: 14px; }
.mc-lamp { width: 22px; height: 22px; border: 3px solid #000; background: #4a1d1d; box-shadow: inset 3px 3px 0 rgba(255,255,255,.15); flex: none; }
.mc-lamp.on { background: #ffcf3f; box-shadow: 0 0 18px #ffcf3f, inset 3px 3px 0 rgba(255,255,255,.4); }
.mc-status b { font-size: 18px; }
.mc-players { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mc-players span { padding: 4px 8px; background: #1f1f1f; border: 2px solid #000; font-size: 13px; }
.mc-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.mc-steps li { position: relative; padding-left: 58px; min-height: 44px; }
.mc-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; background: var(--dirt); color: #fff; border: 3px solid #000; box-shadow: inset 3px 3px 0 rgba(255,255,255,.2), 3px 3px 0 rgba(0,0,0,.5); font-family: 'Press Start 2P', monospace; font-size: 14px; }
.mc-steps li b { display: block; margin-bottom: 4px; }
.mc-steps li .small { color: var(--dim); }
.mc-rules { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--dim); }
.mc-form { display: grid; gap: 10px; }
.mc-form input, .mc-form textarea { width: 100%; padding: 11px 12px; background: #0e0e0e; border: 3px solid #000; box-shadow: inset 3px 3px 0 #2a2a2a; color: #fff; font: inherit; }
.mc-form input:focus, .mc-form textarea:focus { outline: 3px solid var(--diamond); outline-offset: -3px; }
.mc-note { font-size: 13px; color: var(--dim); }
.mc-tag { display: inline-block; padding: 3px 8px; background: #0e0e0e; border: 2px solid #000; font-size: 12px; color: var(--diamond); margin: 2px 4px 2px 0; }
.mc-cube { width: 96px; height: 96px; margin: 0 auto 8px; background: linear-gradient(180deg, var(--grass) 0 34%, var(--dirt) 34% 100%); border: 4px solid #000; box-shadow: inset 6px 6px 0 rgba(255,255,255,.18), inset -6px -6px 0 rgba(0,0,0,.35), 10px 10px 0 rgba(0,0,0,.5); image-rendering: pixelated; animation: mcbob 3s ease-in-out infinite; }
@keyframes mcbob { 50% { transform: translateY(-8px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .mc-cube { animation: none; } }
.mc-foot { margin-top: 18px; color: var(--faint); font-size: 12px; }

/* ── control panel ───────────────────────────────────────────────────── */
.mc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 16px; }
.mc-stats div { background: #111; border: 3px solid #000; box-shadow: inset 3px 3px 0 #2a2a2a; padding: 8px 10px; }
.mc-stats small { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.mc-stats b { font-size: 17px; }
.mc-console { margin: 0 0 10px; height: 220px; overflow: auto; padding: 10px 12px; background: #050505; border: 3px solid #000; box-shadow: inset 3px 3px 0 #1a1a1a; color: #cfe8d5; font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.mc-console.tall { height: 360px; margin-top: 10px; color: #bfc7c2; }
.mc-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mc-quick button, .mc-chipbtn { padding: 6px 10px; background: #1f1f1f; border: 2px solid #000; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.mc-quick button:hover, .mc-chipbtn:hover { background: #2a2a2a; }
.mc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; background: #1f1f1f; border: 2px solid #000; font-size: 13px; }
.mc-x { padding: 2px 7px; background: #3a1a1a; border: 2px solid #000; color: #ff8c8c; font: inherit; font-size: 11px; cursor: pointer; }
.mc-x:hover { background: var(--redstone); color: #fff; }
.mc-list { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.mc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; background: #111; border: 2px solid #000; font-size: 13px; }
.mc-row small { color: var(--dim); }
.mc-field { display: grid; gap: 4px; font-size: 12px; color: var(--dim); }
.mc-field select { width: 100%; padding: 9px 12px; background: #0e0e0e; border: 3px solid #000; box-shadow: inset 3px 3px 0 #2a2a2a; color: #fff; font: inherit; }
.mc-pop { position: absolute; z-index: 50; display: grid; gap: 4px; min-width: 200px; padding: 8px; background: #141414; border: 3px solid #000; box-shadow: 6px 6px 0 rgba(0,0,0,.5); }
.mc-pop b { padding: 4px 6px; }
.mc-pop button { padding: 8px 10px; background: #1f1f1f; border: 2px solid #000; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.mc-pop button:hover { background: var(--grass); color: #fff; } .mc-pop button.bad:hover { background: var(--redstone); }
.mc-btn:disabled { opacity: .5; cursor: wait; }

/* ── landing v2: grid backdrop, live strip, faq ───────────────────────── */
.mc-hero { background-image: linear-gradient(rgba(93,161,59,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(93,161,59,.06) 1px, transparent 1px); background-size: 32px 32px; background-position: 0 20px; }
.mc-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 26px; }
.mc-strip div { background: #111; border: 3px solid #000; box-shadow: inset 3px 3px 0 #2a2a2a, 4px 4px 0 rgba(0,0,0,.5); padding: 10px 12px; }
.mc-strip small { display: block; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.mc-strip b { font-size: 17px; }
.mc-faq details { border: 3px solid #000; background: #121212; margin-bottom: 8px; box-shadow: inset 3px 3px 0 #262626; }
.mc-faq summary { cursor: pointer; padding: 12px 14px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.mc-faq summary::-webkit-details-marker { display: none; }
.mc-faq summary::after { content: '+'; color: var(--diamond); font-family: 'Press Start 2P', monospace; font-size: 12px; } .mc-faq details[open] summary::after { content: '–'; }
.mc-faq p { margin: 0; padding: 0 14px 12px; color: var(--dim); font-size: 14px; }
.mc-setup { margin-top: 18px; max-width: 720px; }
.mc-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 10px; }
.mc-feat div { background: #111; border: 3px solid #000; padding: 12px; }
.mc-feat b { display: block; margin-bottom: 4px; color: var(--diamond); }
.mc-feat span { font-size: 13px; color: var(--dim); }