/* craftlaunch — a block-world launchpad. Pixel fonts (Press Start 2P for the few loud words, VT323 for everything else),
   stone buttons and dirt panels cut from memecraft's own procedural tiles, gold for the one action that costs money. */
@font-face { font-family: PS2P; src: url(/fonts/press-start-2p.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: VT; src: url(/fonts/vt323.woff2) format('woff2'); font-display: swap; }
:root { --ink: #0b0d12; --night: #10131b; --txt: #f2f2f2; --mut: #a9adb8; --dim: #6c7180; --gold: #f3ba2f; --gold2: #ffd766; --green: #5ae06e; --red: #ff5a66; --sky: #8cc4ff;
  --px: PS2P, 'Press Start 2P', monospace; --ui: VT, 'VT323', monospace; }
* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); color: var(--txt); font: 22px/1.3 var(--ui); }
body { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(1200px 520px at 70% -10%, rgba(90,224,110,.10), transparent 60%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 32px 32px, var(--ink); }
a { color: var(--sky); text-decoration: none; } a:hover { text-decoration: underline; }
img { image-rendering: pixelated; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 10px; top: 10px; z-index: 9; background: #000; padding: 6px 10px; }
:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; }
.mut { color: var(--mut); } .dim { color: var(--dim); }

/* buttons: stone face, light bevel top-left, dark bottom-right; gold = spends ETH */
.mc { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 22px/1 var(--ui); color: #f4f4f4; text-shadow: 2px 2px 0 rgba(0,0,0,.55); background: url(/tex/btn.png) center / 128px 40px; border: 3px solid var(--ink); box-shadow: inset 3px 3px 0 rgba(255,255,255,.32), inset -3px -3px 0 rgba(0,0,0,.45); padding: 12px 22px; cursor: pointer; white-space: nowrap; }
.mc:hover { color: #ffe9a8; text-decoration: none; box-shadow: inset 3px 3px 0 rgba(255,255,255,.32), inset -3px -3px 0 rgba(0,0,0,.45), 0 0 0 3px var(--gold); }
.mc:active { transform: translateY(2px); } .mc[disabled] { opacity: .55; cursor: wait; }
.mc.gold { background: linear-gradient(rgba(246,196,64,.78), rgba(236,172,30,.78)), url(/tex/gold.png) center / 128px 40px; color: #1c1200; text-shadow: 1px 1px 0 rgba(255,236,170,.7); }
.mc.sm { padding: 7px 12px; font-size: 19px; }
.mc.x { background: #000; color: #fff; text-shadow: none; box-shadow: inset 3px 3px 0 rgba(255,255,255,.2), inset -3px -3px 0 rgba(0,0,0,.5); }
.panel { background: url(/tex/panel.png) center / 64px 64px; border: 3px solid var(--ink); box-shadow: inset 3px 3px 0 rgba(255,255,255,.12), inset -3px -3px 0 rgba(0,0,0,.5), 0 10px 0 rgba(0,0,0,.35); }
.ph { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 3px solid rgba(0,0,0,.45); box-shadow: 0 2px 0 rgba(255,255,255,.07); } .ph b { font: 13px/1.3 var(--px); text-shadow: 2px 2px 0 #000; } .grow { flex: 1; }

/* header */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 22px; padding: 10px 22px; background: rgba(11,13,18,.88); border-bottom: 3px solid #000; backdrop-filter: blur(6px); }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; } .brand img { width: 34px; height: 34px; } .brand span { font: 15px/1 var(--px); text-shadow: 2px 2px 0 #000; letter-spacing: .04em; } .brand:hover { text-decoration: none; }
.top nav { display: flex; gap: 18px; } .top nav a { color: var(--mut); font-size: 22px; } .top nav a.on { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .px { color: var(--gold2); font-size: 20px; }
main { flex: 1; width: min(1180px, 94vw); margin: 0 auto; padding: 26px 0 60px; }
.foot { padding: 18px 22px; background: #07080b; border-top: 3px solid #000; font-size: 18px; display: grid; gap: 4px; }

/* hero: the claim on the left, what an X post with a craftlaunch world looks like on the right */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 38px; align-items: center; padding: 30px 0 34px; }
.hero h1 { font: 40px/1.25 var(--px); text-shadow: 4px 4px 0 #000; letter-spacing: .01em; } .hero h1 em { font-style: normal; color: var(--green); }
.hero p { margin: 18px 0 24px; font-size: 27px; color: #e6e6e6; text-shadow: 2px 2px 0 #000; max-width: 34ch; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.post { background: #000; border: 1px solid #2f3336; border-radius: 16px; padding: 14px 16px 16px; color: #e7e9ea; font: 17px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif; box-shadow: 0 18px 0 rgba(0,0,0,.35); transform: rotate(1.2deg); }
.post .who { display: flex; gap: 10px; align-items: center; } .post .who img { width: 40px; height: 40px; border-radius: 50%; background: #1d1f23; padding: 6px; } .post .who b { color: #fff; } .post .who span { color: #71767b; }
.post .txt { margin: 8px 0 12px; white-space: pre-line; } .post .txt i { color: #1d9bf0; font-style: normal; }
.post .note { margin-top: 10px; color: #71767b; font-size: 14px; }

/* steps: the order is the product */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 34px; }
.step { padding: 18px; } .step .n { font: 22px/1 var(--px); color: var(--gold); text-shadow: 2px 2px 0 #000; } .step h3 { font: 13px/1.5 var(--px); margin: 12px 0 8px; } .step p { color: #dcdcdc; font-size: 21px; }

/* launch */
.launch { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: start; margin-bottom: 40px; }
.form { padding: 18px; display: grid; gap: 14px; }
label { display: grid; gap: 6px; color: var(--mut); font-size: 20px; }
input, textarea { width: 100%; padding: 10px 12px; background: #000; border: 3px solid #8a8a8a; box-shadow: inset 3px 3px 0 rgba(0,0,0,.6); color: var(--txt); font: 23px var(--ui); }
input:focus, textarea:focus { outline: none; border-color: #fff; } textarea { min-height: 76px; resize: vertical; }
.row { display: flex; gap: 10px; align-items: stretch; } .row > input { flex: 1; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.world-state { font-size: 20px; min-height: 24px; } .world-state.ok { color: var(--green); } .world-state.bad { color: var(--red); }
.coinhead { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; }
.drop { width: 128px; height: 128px; background: url(/tex/slot.png) center / 128px 128px; border: 3px dashed #8a8a8a; display: grid; place-items: center; cursor: pointer; color: var(--mut); text-align: center; font-size: 19px; overflow: hidden; } .drop.over, .drop:hover { border-color: var(--gold); } .drop img { width: 100%; height: 100%; object-fit: cover; }
.fee { background: rgba(0,0,0,.45); border: 3px solid var(--ink); padding: 10px 12px; font-size: 20px; color: #e4e4e4; } .fee b { color: var(--gold2); font-weight: normal; }
.side { display: grid; gap: 14px; }
.logbox { padding: 14px 16px; min-height: 140px; display: grid; gap: 4px; font-size: 19px; max-height: 420px; overflow: auto; }
.logbox .l { display: grid; grid-template-columns: 18px 1fr; gap: 8px; } .logbox .l i { font-style: normal; } .logbox .ok i, .logbox .ok { color: var(--green); } .logbox .fail { color: var(--red); } .logbox .warn { color: var(--gold2); } .logbox .wait { color: var(--sky); }
.done { padding: 16px; display: grid; gap: 10px; } .done .acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* coins */
.sect { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 14px; } .sect h2 { font: 16px/1.4 var(--px); text-shadow: 2px 2px 0 #000; } .sect .mut { font-size: 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.card { display: grid; gap: 10px; padding: 14px; color: var(--txt); } .card:hover { text-decoration: none; box-shadow: inset 3px 3px 0 rgba(255,255,255,.12), inset -3px -3px 0 rgba(0,0,0,.5), 0 0 0 3px var(--gold); }
.card .h { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; } .card .h img { width: 64px; height: 64px; object-fit: cover; border: 3px solid var(--ink); background: #000; }
.card b { font: 12px/1.4 var(--px); } .card .sym { color: var(--gold2); font-size: 21px; } .card .kv { display: flex; justify-content: space-between; font-size: 20px; }
.bar { height: 12px; background: #000; border: 2px solid #8a8a8a; } .bar i { display: block; height: 100%; background: var(--green); }
.card .acts { display: flex; gap: 6px; } .card .acts .mc { flex: 1; padding: 6px 8px; font-size: 18px; }
.empty { padding: 26px; text-align: center; color: var(--mut); }

/* coin page */
.coin { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.coin .id { padding: 20px; display: grid; gap: 14px; } .coin .id .h { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; } .coin .id .h img { width: 112px; height: 112px; object-fit: cover; border: 3px solid var(--ink); }
.coin h1 { font: 20px/1.4 var(--px); text-shadow: 2px 2px 0 #000; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .stats div { background: rgba(0,0,0,.45); border: 3px solid var(--ink); padding: 8px 10px; } .stats b { display: block; font-size: 25px; font-weight: normal; } .stats span { color: var(--mut); font-size: 18px; }
.addr { font-size: 18px; color: var(--mut); word-break: break-all; }
pre.posttext { white-space: pre-wrap; background: #000; border: 3px solid var(--ink); padding: 12px; font: 20px/1.3 var(--ui); color: #e8e8e8; }

/* feed */
.feed { display: grid; gap: 12px; } .feed .item { display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; padding: 14px; align-items: start; } .feed .item img { width: 80px; height: 80px; object-fit: cover; border: 3px solid var(--ink); } .feed .item .acts { display: grid; gap: 6px; }
.how { display: grid; gap: 14px; max-width: 860px; } .how .panel { padding: 18px 20px; } .how h2 { font: 14px/1.5 var(--px); margin-bottom: 8px; } .how p, .how li { color: #e0e0e0; } .how ul { padding-left: 22px; display: grid; gap: 4px; }

.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 20; } .toast { background: #000; border: 3px solid var(--gold); padding: 8px 16px; font-size: 21px; }

@media (max-width: 900px) {
  .hero, .launch, .coin { grid-template-columns: 1fr; } .hero h1 { font-size: 26px; } .steps { grid-template-columns: 1fr; } .top nav { display: none; } .post { transform: none; }
  .feed .item { grid-template-columns: 60px 1fr; } .feed .item .acts { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } .two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .post { transform: none; } }
.seg { display: inline-flex; gap: 3px; background: rgba(0,0,0,.45); border: 3px solid var(--ink); padding: 3px; flex-wrap: wrap; } .seg button { border: 0; background: transparent; color: var(--mut); font: 21px var(--ui); padding: 6px 12px; cursor: pointer; } .seg button.on { background: rgba(255,255,255,.14); color: #fff; }
.adv summary { cursor: pointer; color: var(--mut); font-size: 20px; } .adv[open] summary { color: #fff; }
.pub { display: grid; gap: 10px; } .done .mc.x { justify-self: start; }

/* the launch post's embed: Tweetcraft's player card, drawn — dark dirt, pixel title, a play button */
.post .embed { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #2f3336; aspect-ratio: 16 / 10; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.75)), url(/tex/panel.png) center / 48px 48px; display: grid; place-items: center; image-rendering: pixelated; }
.post .embed-in { display: grid; gap: 14px; justify-items: center; text-align: center; }
.post .embed-title { font: 22px/1 var(--px); color: #fff; text-shadow: 3px 3px 0 #000; } .post .embed-name { font: 26px/1 var(--ui); color: var(--gold2); text-shadow: 2px 2px 0 #000; }
.post .embed-btn { font: 13px/1 var(--px); color: #fff; padding: 12px 18px; background: url(/tex/btn.png) center / 128px 40px; border: 3px solid #000; box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), inset -3px -3px 0 rgba(0,0,0,.45); text-shadow: 2px 2px 0 #000; }
.post .embed small { position: absolute; left: 10px; bottom: 8px; color: #fff; font: 13px/1 system-ui, sans-serif; background: rgba(0,0,0,.6); padding: 3px 6px; border-radius: 4px; }
.kicker { display: inline-block; font: 11px/1 var(--px); color: var(--green); background: rgba(0,0,0,.5); border: 3px solid #000; padding: 8px 10px; margin-bottom: 18px; letter-spacing: .04em; }

/* the server list — the multiplayer screen, with a token on every row */
.list .srv { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 10px 14px; color: var(--txt); border-top: 3px solid rgba(0,0,0,.35); }
.list .srv:hover { text-decoration: none; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 3px var(--gold); }
.list .srv img { width: 72px; height: 72px; object-fit: cover; border: 3px solid #000; background: #000; }
.srv-main { display: grid; gap: 2px; min-width: 0; } .srv-main b { font: 13px/1.4 var(--px); } .motd { color: var(--mut); font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-tok { font-size: 20px; color: #ddd; } .srv-tok em { font-style: normal; color: var(--gold2); }
.srv-side { display: grid; justify-items: end; gap: 6px; font-size: 18px; }
.ping { display: inline-flex; gap: 2px; align-items: flex-end; height: 18px; } .ping i { width: 5px; background: #333; } .ping i:nth-child(1) { height: 5px; } .ping i:nth-child(2) { height: 8px; } .ping i:nth-child(3) { height: 11px; } .ping i:nth-child(4) { height: 14px; } .ping i:nth-child(5) { height: 18px; } .ping i.on { background: var(--green); }
.list .empty { border-top: 3px solid rgba(0,0,0,.35); }

/* a server's page: its server card */
.server-card { display: grid; gap: 14px; padding: 18px; justify-items: start; background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.7)), url(/tex/panel.png) center / 48px 48px; border: 3px solid #000; box-shadow: 0 10px 0 rgba(0,0,0,.35); }
.sc-top { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; width: 100%; } .sc-top img { width: 64px; height: 64px; object-fit: cover; border: 3px solid #000; } .sc-top b { font: 13px/1.4 var(--px); display: block; } .sc-top span { color: var(--mut); font-size: 19px; }
.server-card small { color: var(--mut); font-size: 18px; }
@media (max-width: 900px) { .list .srv { grid-template-columns: 56px 1fr; } .list .srv img { width: 56px; height: 56px; } .srv-side { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; align-items: center; } }

/* the two-step launch: step 2 stays locked until the server is open */
.wiz { display: grid; gap: 14px; } .badge { display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--gold); color: #1c1200; font: 14px/1 var(--px); border: 3px solid #000; }
.step-box.locked { opacity: .55; } .step-box.locked .form > :not(.lockmsg) { pointer-events: none; } .lockmsg { font-size: 20px; color: var(--mut); background: rgba(0,0,0,.4); border: 3px solid #000; padding: 8px 12px; }
.step-box.done-step { box-shadow: inset 3px 3px 0 rgba(255,255,255,.12), inset -3px -3px 0 rgba(0,0,0,.5), 0 0 0 3px var(--green); }
.srv-ok { display: grid; gap: 10px; } .srv-ok .acts, .done .acts { display: flex; gap: 8px; flex-wrap: wrap; } #srvBox { display: grid; gap: 8px; } #srvBox > .mc { justify-self: stretch; }
input:disabled, textarea:disabled { opacity: .7; }

/* the hidden attribute must win over .mc { display: inline-flex } — otherwise the plain wallet button shows next to Privy's */
[hidden] { display: none !important; }