:root {
    --fg:#eef0f4; --dim:#a9b0bf; --line:rgba(255,255,255,.09);
    --grass:#5fbf4a; --grass-d:#3f8a2f; --dirt:#866043; --tnt:#e5483b; --gold:#ffbf2e; --diamond:#5ee6ee; --emerald:#3ee07a; --purple:#a35cff;
    --pixel:"Galmuri11","Galmuri9",monospace;
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; font-family:"Pretendard",system-ui,-apple-system,sans-serif; background:#16181d; color:var(--fg); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  a { color:inherit; }
  .wrap { max-width:1100px; margin:0 auto; padding:0 24px; position:relative; }
  svg.px { shape-rendering:crispEdges; image-rendering:pixelated; display:block; }
  code { font-family:var(--pixel); font-size:.86em; background:rgba(0,0,0,.45); border:1px solid var(--line); padding:2px 7px; color:var(--diamond); white-space:nowrap; }

  /* nav */
  nav { position:fixed; inset:0 0 auto; z-index:20; border-bottom:1px solid transparent; }
  nav.solid { background:rgba(14,16,20,.78); backdrop-filter:blur(14px); border-color:var(--line); }
  nav .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
  .logo { font-family:var(--pixel); font-size:1.15rem; text-decoration:none; display:flex; gap:10px; align-items:center; color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.35); }
  .logo svg { width:24px; height:24px; }
  nav ul { display:flex; gap:6px; list-style:none; margin:0; padding:0; }
  nav ul a { font-family:var(--pixel); font-size:.85rem; text-decoration:none; color:#fff; padding:8px 12px; border:2px solid transparent; text-shadow:1px 1px 0 rgba(0,0,0,.4); }
  nav ul a:hover { border-color:rgba(255,255,255,.6); background:rgba(0,0,0,.25); }
  nav ul a { font-size:.95rem; padding:8px 16px; background:rgba(0,0,0,.28); border-color:rgba(255,255,255,.18); }
  @media (max-width:760px) { nav .wrap { padding:0 12px; } .logo { font-size:0; gap:0; } .logo svg { width:28px; height:28px; } nav ul a { font-size:.85rem; padding:7px 11px; } }

  /* hero */
  .hero { position:relative; height:100vh; min-height:680px; overflow:hidden; background:linear-gradient(#4b9be0 0%, #82c3f0 50%, #cbe8f8 78%); }
  .sun { position:absolute; top:13%; right:11%; width:88px; height:88px; background:#fff7cf; box-shadow:0 0 0 14px rgba(255,247,207,.3), 0 0 120px 40px rgba(255,236,150,.55); }
  .cloud { position:absolute; left:0; height:24px; background:#fff; opacity:.92; }
  .cloud::before, .cloud::after { content:""; position:absolute; background:#fff; height:24px; }
  .cloud::before { left:24px; top:-24px; width:48px; } .cloud::after { left:60px; top:-12px; width:36px; height:12px; }
    .layer { position:absolute; left:-4%; width:108%; bottom:0; will-change:transform; }
  .layer svg { width:100%; height:100%; }
  .hero-inner { position:relative; z-index:3; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 24px 22vh; }
  .status { display:inline-flex; align-items:center; gap:10px; font-family:var(--pixel); font-size:.85rem; background:rgba(10,12,16,.72); color:#fff; padding:7px 14px; border:2px solid rgba(255,255,255,.18); margin-bottom:24px; }
  .status i { width:10px; height:10px; background:#9aa0aa; box-shadow:0 0 0 3px rgba(154,160,170,.25); }
  .status.on i { background:var(--emerald); box-shadow:0 0 0 3px rgba(62,224,122,.3), 0 0 12px var(--emerald); }
    .hero h1 { font-family:var(--pixel); font-size:clamp(3.2rem,10vw,7rem); line-height:1; margin:0; color:#fff; position:relative;
             text-shadow:0 5px 0 #2f6a22, 0 10px 0 #1f4716, 0 18px 30px rgba(0,0,0,.25); }
      .hero p.sub { font-size:clamp(1.05rem,2.4vw,1.35rem); color:#0e2238; font-weight:600; margin:30px auto 34px; max-width:640px; }
  .hero p.sub b { color:#d42f22; }
  .join { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .addr { display:flex; align-items:stretch; background:#0e1116; border:3px solid #000; box-shadow:inset 0 0 0 2px #444c5c, 0 8px 24px rgba(0,0,0,.25); }
  .addr span { font-family:var(--pixel); padding:12px 18px; font-size:1.1rem; color:#fff; display:flex; align-items:center; gap:10px; }
  .addr span small { color:#8890a0; font-size:.75rem; }
  
  /* minecraft buttons */
  .mc { font-family:var(--pixel); font-size:1rem; cursor:pointer; text-decoration:none; color:#fff; border:3px solid #000; padding:12px 22px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
        background:#6d6d6d; box-shadow:inset -3px -4px rgba(0,0,0,.35), inset 3px 3px rgba(255,255,255,.3); text-shadow:2px 2px #2a2a2a; }
  
  .mc.green { background:var(--grass-d); } .mc.discord { background:#5865f2; } .mc.gold { background:#c48a12; }
  .mc svg { width:20px; height:20px; }
  .mc:hover { filter:brightness(1.12); }
  .addr .mc { border:0; border-left:3px solid #000; }

  /* underground: each section is one layer deeper */
  .layer-band { position:relative; padding:110px 0; }
  .layer-band::before { content:""; position:absolute; inset:0; background-image:var(--tex); background-size:64px 64px; image-rendering:pixelated; opacity:.12; pointer-events:none; }
  .dirt  { background:#2a1f17; --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23866043'/%3E%3Cpath fill='%236e4d35' d='M2 1h2v2H2zm8 2h2v1h-2zm3 5h2v2h-2zM5 7h2v1H5zm-3 6h2v2H2zm8 1h2v1h-2z'/%3E%3Cpath fill='%239b7653' d='M6 3h1v1H6zm7 1h1v1h-1zM1 9h1v1H1zm8 0h2v1H9zm4 4h1v1h-1z'/%3E%3C/svg%3E"); }
  .stone { background:#1f2124; --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%237d7d7d'/%3E%3Cpath fill='%236a6a6a' d='M1 2h3v1H1zm7 0h2v2H8zm4 4h3v1h-3zM3 8h2v1H3zm6 4h3v1H9zM1 13h2v2H1z'/%3E%3Cpath fill='%23929292' d='M5 4h2v1H5zm8 1h1v1h-1zM10 9h2v1h-2zm-6 4h2v1H4z'/%3E%3C/svg%3E"); }
  .deep  { background:#17181c; --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%234d4d55'/%3E%3Cpath fill='%233b3b42' d='M0 3h16v1H0zm0 8h16v1H0z'/%3E%3Cpath fill='%23626270' d='M3 1h3v1H3zm8 5h3v1h-3zM2 13h4v1H2z'/%3E%3C/svg%3E"); }
  .nether { background:#1c0b0b; --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%236f3333'/%3E%3Cpath fill='%23542424' d='M0 4h16v1H0zm0 8h16v1H0zM6 0h1v4H6zm8 5h1v7h-1zM3 13h1v3H3z'/%3E%3C/svg%3E"); }
  .layer-band::before { opacity:.13; }
  .depth { display:inline-flex; align-items:center; gap:10px; font-family:var(--pixel); font-size:.85rem; color:var(--grass); margin:0 0 12px; }
  .depth::before { content:""; width:12px; height:12px; background:currentColor; box-shadow:3px 3px 0 rgba(0,0,0,.5); }
  h2 { font-size:clamp(1.9rem,4.2vw,2.8rem); line-height:1.22; margin:0 0 14px; letter-spacing:-.025em; }
  .lead { color:var(--dim); font-size:1.08rem; max-width:640px; margin:0 0 52px; }
  .edge { height:16px; background:var(--edge); background-size:32px 16px; image-rendering:pixelated; }

  /* timeline */
  .timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; position:relative; }
  .timeline::before { content:""; position:absolute; top:44px; left:10%; right:10%; height:4px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 10px,transparent 10px 18px); }
  .step { text-align:center; position:relative; }
  .slot { width:88px; height:88px; margin:0 auto 18px; display:grid; place-items:center; background:#8b8b8b; border:3px solid; border-color:#373737 #fff #fff #373737; position:relative; }
  .slot svg { width:56px; height:56px; filter:drop-shadow(3px 3px 0 rgba(0,0,0,.35)); }
  .slot .num { position:absolute; right:4px; bottom:0; font-family:var(--pixel); font-size:1rem; color:#fff; text-shadow:2px 2px 0 #3f3f3f; }
  .step h3 { margin:0 0 6px; font-size:1.06rem; }
  .step p { margin:0; color:var(--dim); font-size:.92rem; }
  @media (max-width:880px) {
    .timeline { grid-template-columns:1fr; gap:18px; } .timeline::before { display:none; }
    .step { display:grid; grid-template-columns:88px 1fr; gap:20px; text-align:left; align-items:center; } .slot { margin:0; }
  }

  /* destruction day */
  .boom { position:relative; overflow:hidden; border:3px solid #000; box-shadow:inset 0 0 0 2px #7a2a22, 0 30px 80px rgba(229,72,59,.18);
          background:radial-gradient(ellipse at 15% 0%, rgba(255,120,60,.35), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(229,72,59,.3), transparent 50%), #1a0908;
          padding:56px; display:grid; grid-template-columns:1.25fr 1fr; gap:44px; align-items:center; }
  .boom h2 { color:#fff; } .boom p { color:#e7c4be; margin:0 0 14px; }
  .boom .depth { color:#ff7a5c; }
    .kits { display:grid; gap:14px; position:relative; }
  .kit { display:flex; gap:18px; align-items:center; background:rgba(0,0,0,.42); border:2px solid rgba(255,255,255,.08); padding:16px 18px; }
  .kit svg { width:48px; height:48px; flex:none; }
  .kit b { display:block; font-size:1.05rem; } .kit small { color:#d9aaa3; }
    @media (max-width:880px) { .boom { grid-template-columns:1fr; padding:34px 24px; } }

  /* pricing: minecraft item tooltips */
  .tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
  @media (max-width:880px) { .tiers { grid-template-columns:1fr; } }
  .tip { position:relative; background:rgba(16,0,16,.94); padding:30px 28px; display:flex; flex-direction:column; border:3px solid #000;
         box-shadow:inset 0 0 0 3px #2a0b5a, inset 0 0 0 4px #000; }
  .tip::before { content:""; position:absolute; inset:3px; border:2px solid; border-image:linear-gradient(#5000ff,#28007f) 1; pointer-events:none; }
  .tip .icon { width:64px; height:64px; margin-bottom:16px; }
  .tip h3 { font-family:var(--pixel); font-weight:400; font-size:1.35rem; margin:0; text-shadow:2px 2px 0 rgba(0,0,0,.7); }
  .tip .rarity { font-family:var(--pixel); font-size:.8rem; margin:2px 0 16px; }
  .tip .price { font-size:2.5rem; font-weight:800; letter-spacing:-.03em; margin:0; color:#fff; }
  .tip .price small { font-size:1rem; font-weight:500; color:#aaa; }
  .tip .per { color:#8a8a9a; font-size:.88rem; margin-bottom:20px; }
  .tip ul { list-style:none; padding:0; margin:0 0 26px; flex:1; font-family:var(--pixel); font-size:.9rem; }
  .tip li { padding:6px 0; color:#a8a8ff; }
  .tip li::before { content:"+ "; }
  .tip li.hl { color:#ffff55; }
  .tip .lore { font-family:var(--pixel); font-size:.8rem; color:#a0a0a0; font-style:italic; margin:0 0 18px; }
  .t-basic h3 { color:#fff; } .t-basic .rarity { color:#aaa; }
  .t-plus h3 { color:#55ff55; } .t-plus .rarity { color:#55ff55; }
  .t-vip h3 { color:#ffaa00; } .t-vip .rarity { color:#ffaa00; }
  .t-plus .ribbon { position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-family:var(--pixel); font-size:.8rem; background:var(--grass); color:#0c1a08; padding:5px 14px; border:3px solid #000; white-space:nowrap; }
    .note { color:var(--dim); font-size:.9rem; margin-top:30px; text-align:center; }

  /* features */
  .features { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:880px) { .features { grid-template-columns:1fr; } }
  .feat { background:rgba(10,11,14,.6); border:2px solid var(--line); padding:28px; backdrop-filter:blur(4px); }
  .feat svg { width:48px; height:48px; margin-bottom:18px; }
  .feat h3 { margin:0 0 8px; font-size:1.12rem; }
  .feat p { margin:0; color:var(--dim); font-size:.95rem; }
  .feat.wide { grid-column:span 3; display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; }
  @media (max-width:880px) { .feat.wide { grid-column:auto; grid-template-columns:1fr; } }
  .chat { background:rgba(0,0,0,.55); padding:18px 20px; font-family:var(--pixel); font-size:.88rem; line-height:2; min-height:212px; }
  .chat .me { color:#fff; } .chat .me b { color:#ffff55; font-weight:400; }
  .chat .bot { color:#55ffff; } .chat .src { color:#777; font-size:.78rem; }
  .chatbar { margin-top:10px; background:rgba(0,0,0,.55); padding:8px 12px; font-family:var(--pixel); font-size:.85rem; color:#ddd; }

  /* quota table */
  .table { overflow-x:auto; border:3px solid #000; box-shadow:inset 0 0 0 2px #3a3f4b; background:rgba(8,9,12,.7); }
  table { width:100%; border-collapse:collapse; min-width:520px; }
  th, td { padding:17px 22px; text-align:center; border-bottom:1px solid var(--line); }
  thead th { font-family:var(--pixel); font-weight:400; color:#fff; }
  thead th:nth-child(2) { color:#ddd; } thead th:nth-child(3) { color:#55ff55; } thead th:nth-child(4) { color:#ffaa00; }
  td:first-child { text-align:left; color:var(--dim); }
  tbody td:not(:first-child) { font-family:var(--pixel); font-size:1.1rem; }
  tbody tr:last-child td { border-bottom:0; }
  tbody tr:hover { background:rgba(255,255,255,.03); }
  .bar { display:inline-block; height:8px; background:var(--diamond); vertical-align:middle; margin-left:8px; box-shadow:2px 2px 0 #000; }

  /* faq */
  details { background:rgba(10,11,14,.65); border:2px solid var(--line); margin-bottom:10px; }
  details[open] { border-color:rgba(95,191,74,.5); }
  summary { cursor:pointer; padding:20px 24px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
  summary::-webkit-details-marker { display:none; }
  summary::after { content:"+"; font-family:var(--pixel); color:var(--grass); font-size:1.3rem; }
  details[open] summary::after { transform:rotate(45deg); }
  details p { margin:0; padding:0 24px 22px; color:var(--dim); }

  /* cta + bedrock */
  .cta { text-align:center; }
  .cta h2 { font-family:var(--pixel); font-weight:400; font-size:clamp(1.8rem,4.5vw,2.8rem); }
  .cta .diamond { width:72px; height:72px; margin:0 auto 20px; filter:drop-shadow(0 0 22px rgba(94,230,238,.55)); }
  .cta .join { margin-top:30px; }
  footer { background:#2b2b2b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%23565656'/%3E%3Cpath fill='%23222' d='M0 0h4v3H0zm9 1h4v2H9zM4 5h5v3H4zm8 4h4v4h-4zM0 11h3v5H0zm5 10h5v3H5zM6 12h4v3H6z'/%3E%3Cpath fill='%23888' d='M5 1h3v2H5zm9 4h2v2h-2zM1 6h2v3H1zm10 6h1v3h-1z'/%3E%3C/svg%3E"); background-size:64px; image-rendering:pixelated; text-align:center; padding:34px 24px; }
  footer p { display:inline-block; margin:0; background:rgba(0,0,0,.7); color:#ccc; font-size:.85rem; padding:8px 16px; font-family:var(--pixel); }


html { --accent:#5fbf4a; --sub:#0e2238; --sub-b:#d42f22; --h1a:#2f6a22; --h1b:#1f4716; --sky:linear-gradient(#4b9be0 0%, #82c3f0 50%, #cbe8f8 78%); }
.hero { background:var(--sky); }
.hero h1 { text-shadow:0 5px 0 var(--h1a), 0 10px 0 var(--h1b), 0 18px 30px rgba(0,0,0,.25); }
.hero p.sub { color:var(--sub); } .hero p.sub b { color:var(--sub-b); }
.depth { color:var(--accent); }
.world { position:absolute; inset:0; pointer-events:none; }
.hero.small { height:62vh; min-height:460px; }
.hero.small .hero-inner { padding-bottom:18vh; }
.hero.small h1 { font-size:clamp(2.6rem,7vw,4.6rem); }
.hero.small p.sub { margin:22px auto 0; }


/* nav active page */
nav ul a.on { border-color:var(--accent); background:rgba(0,0,0,.3); }

/* home teasers */
.teaser { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:880px) { .teaser { grid-template-columns:1fr; } }
.mini { display:flex; gap:16px; align-items:center; background:rgba(16,0,16,.9); border:3px solid #000; box-shadow:inset 0 0 0 2px #3a1a7a; padding:18px 20px; text-decoration:none; }
.mini svg { width:44px; height:44px; flex:none; }
.mini b { font-family:var(--pixel); font-weight:400; display:block; font-size:1.05rem; }
.mini span { color:#aaa; font-size:.9rem; }
.more { text-align:center; margin-top:34px; }

/* steps list (plans, community) */
.howto { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:h; }
@media (max-width:880px) { .howto { grid-template-columns:1fr; } }
.howto div { counter-increment:h; background:rgba(10,11,14,.6); border:2px solid var(--line); padding:24px 24px 24px 76px; position:relative; }
.howto div::before { content:counter(h); position:absolute; left:22px; top:22px; width:36px; height:36px; display:grid; place-items:center; font-family:var(--pixel); background:var(--accent); color:#000; border:3px solid #000; }
.howto b { display:block; margin-bottom:4px; } .howto p { margin:0; color:var(--dim); font-size:.94rem; }

/* community */
.discord-card { display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; padding:34px 36px; border:3px solid #000; box-shadow:inset 0 0 0 2px #7983f5, 0 30px 70px rgba(88,101,242,.25);
  background:radial-gradient(ellipse at 0% 0%, rgba(255,255,255,.18), transparent 50%), #4752c4; }
.discord-card svg { width:72px; height:72px; }
.discord-card h2 { margin:0 0 4px; color:#fff; } .discord-card p { margin:0; color:#dfe2ff; }
.discord-card .mc { background:#fff; color:#4752c4; text-shadow:none; }
@media (max-width:760px) { .discord-card { grid-template-columns:1fr; text-align:left; } }
.cmds { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:880px) { .cmds { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .cmds { grid-template-columns:1fr; } }
.cmd { background:rgba(0,0,0,.45); border:2px solid var(--line); padding:16px 18px; }
.cmd code { font-size:1rem; } .cmd p { margin:8px 0 0; color:var(--dim); font-size:.9rem; }
.rules { list-style:none; padding:0; margin:0; display:grid; gap:10px; counter-reset:r; }
.rules li { counter-increment:r; background:rgba(10,11,14,.6); border:2px solid var(--line); padding:18px 22px 18px 70px; position:relative; }
.rules li::before { content:"§" counter(r); position:absolute; left:20px; top:17px; font-family:var(--pixel); color:#ffaa00; font-size:1.05rem; }
.rules li b { display:block; } .rules li span { color:var(--dim); font-size:.94rem; }

/* farewell (spectator) banner */
.boom.watch { box-shadow:inset 0 0 0 2px #4b2a7a; background:radial-gradient(ellipse at 15% 0%, rgba(199,125,255,.28), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(94,230,238,.14), transparent 50%), #120b1f; }
.boom.watch p { color:#d6ccec; } .boom.watch .depth { color:#c77dff; } .boom.watch small { color:#b3a6cc; }