/* PUNCH IT: vintage comic book style. Cream paper with halftone dots, black ink outlines, red + yellow. */
:root {
  --paper: #f5ecd6; --dots: #e6d8b4; --ink: #111; --red: #e23b2e; --yellow: #ffd23f; --gold: #e8a91a; --green: #1f9d55; --muted: #5d5340;
  --card: #fffaf0;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; color: var(--ink); background: var(--paper);
  background-image: radial-gradient(var(--dots) 1.6px, transparent 1.7px); background-size: 12px 12px; line-height: 1.5; }
a { color: var(--red); font-weight: 700; }
img { max-width: 100%; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.comic { font-family: Bangers, Impact, sans-serif; letter-spacing: .03em; font-weight: 400; }

/* header */
header.top { position: sticky; top: 0; z-index: 20; background: var(--ink); color: #fff; border-bottom: 4px solid var(--yellow); }
header.top .wrap { display: flex; align-items: center; gap: 14px; padding-block: 8px; }
header.top .brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
header.top .brand img { width: 64px; height: auto; display: block; }
header.top nav { display: flex; gap: 16px; margin-left: auto; align-items: center; }
header.top nav a { color: #fff; text-decoration: none; font-family: Bangers, Impact, sans-serif; font-size: 20px; letter-spacing: .04em; }
header.top nav a:hover { color: var(--yellow); }

/* buttons, pills, badges */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: Bangers, Impact, sans-serif; font-size: 24px; letter-spacing: .05em;
  padding: 10px 26px; border: 4px solid var(--ink); border-radius: 12px; background: var(--yellow); color: var(--ink); box-shadow: 6px 6px 0 var(--red);
  cursor: pointer; text-decoration: none; transition: transform .08s, box-shadow .08s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--red); }
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--red); }
.btn.red { background: var(--red); color: #fff; box-shadow: 6px 6px 0 var(--ink); }
.btn.ghost { background: #fff; box-shadow: 4px 4px 0 var(--ink); font-size: 18px; padding: 6px 16px; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.pill { display: inline-block; font-weight: 800; font-size: 14px; padding: 6px 12px; border: 3px solid var(--ink); border-radius: 999px; background: #fff; }
.pill.live { background: var(--yellow); }
.badge { display: inline-block; font-family: Bangers, Impact, sans-serif; font-size: 16px; letter-spacing: .05em; padding: 1px 9px; border: 3px solid var(--ink); background: var(--yellow); transform: rotate(-3deg); }
.badge.red { background: var(--red); color: #fff; } .badge.green { background: #b8f2c9; } .badge.white { background: #fff; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding-block: 28px 8px; }
.hero h1 { font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: clamp(44px, 7vw, 84px); line-height: .95; margin: 0 0 14px; transform: rotate(-2deg); }
.hero h1 span { color: var(--red); -webkit-text-stroke: 2px var(--ink); paint-order: stroke; text-shadow: 4px 4px 0 var(--ink); }
.hero p.lead { font-size: 18px; max-width: 34rem; margin: 0 0 18px; }
.hero .now { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.hero .logo { width: 100%; max-width: 520px; justify-self: center; filter: drop-shadow(6px 8px 0 rgba(17,17,17,.15)); }

/* comic panels */
.panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-block: 26px; }
.panels.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { background: var(--card); border: 4px solid var(--ink); padding: 14px 14px 16px; box-shadow: 6px 6px 0 var(--ink); position: relative; }
.panel:nth-child(even) { transform: rotate(.8deg); } .panel:nth-child(odd) { transform: rotate(-.6deg); }
.panel h3 { font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: 26px; margin: 0 0 6px; color: var(--red); letter-spacing: .03em; }
.panel p { margin: 0; font-size: 14.5px; }
.panel ul { margin: 0; padding-left: 18px; font-size: 14.5px; display: grid; gap: 6px; }

/* sections */
section h2 { font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: 40px; margin: 34px 0 12px; letter-spacing: .03em; }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.coin { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; background: var(--card); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink); text-decoration: none; color: var(--ink); }
.coin:hover { box-shadow: 6px 6px 0 var(--red); }
.coin img { width: 72px; height: 72px; object-fit: cover; border: 3px solid var(--ink); border-radius: 10px; background: #fff; }
.coin b { display: block; font-size: 16px; overflow-wrap: anywhere; } .coin small { color: var(--muted); display: block; font-size: 13px; overflow-wrap: anywhere; }
.coin .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.empty { padding: 26px; text-align: center; border: 3px dashed var(--ink); background: var(--card); }

/* launch form */
.launch { background: var(--card); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); padding: 20px; display: grid; gap: 14px; max-width: 720px; }
.launch .row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field { display: grid; gap: 4px; }
.field label { font-weight: 800; font-size: 14px; }
.field input, .field textarea { font: inherit; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; min-width: 0; }
.field textarea { min-height: 72px; resize: vertical; }
.field small { color: var(--muted); font-size: 12.5px; }
.req { display: grid; gap: 6px; padding: 12px; border: 3px dashed var(--ink); background: #fff7d6; font-size: 14px; }
.status { font-weight: 700; min-height: 1.5em; }
.status.err { color: var(--red); }
.done { padding: 14px; border: 3px solid var(--ink); background: #b8f2c9; }

/* coin page */
.cp { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding-block: 26px; align-items: start; }
.cp > img { width: 240px; height: 240px; object-fit: cover; border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: #fff; }
.cp h1 { font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: 52px; margin: 0; line-height: 1; overflow-wrap: anywhere; }
.box { background: var(--card); border: 3px solid var(--ink); padding: 14px; box-shadow: 5px 5px 0 var(--ink); margin-top: 16px; }
.box h3 { margin: 0 0 6px; font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: 26px; letter-spacing: .03em; }
.meter { height: 16px; border: 3px solid var(--ink); background: #fff; border-radius: 999px; overflow: hidden; }
.meter span { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--red) 0 10px, #f05a4c 10px 20px); }
table.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
table.ledger td { padding: 6px 4px; border-top: 2px dashed #d8cba7; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }

footer { margin-top: 48px; padding-block: 22px; background: var(--ink); color: #ddd; font-size: 13.5px; }
footer a { color: var(--yellow); }

/* wallet picker */
dialog.pick { border: 4px solid var(--ink); border-radius: 16px; padding: 0; box-shadow: 8px 8px 0 var(--red); max-width: 360px; width: calc(100% - 32px); }
dialog.pick::backdrop { background: rgba(17,17,17,.6); }
.pick-in { padding: 18px; display: grid; gap: 8px; }
.pick-in h2 { margin: 0 0 6px; font-family: Bangers, Impact, sans-serif; font-weight: 400; font-size: 28px; }
.pick-in .row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 10px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; color: var(--ink); }
.pick-in .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); }
.small { font-size: 13px; color: var(--muted); margin: 6px 0 0; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; } .hero .logo { max-width: 360px; order: -1; }
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp { grid-template-columns: 1fr; } .cp > img { width: 180px; height: 180px; }
}
@media (max-width: 520px) {
  .panels, .panels.two { grid-template-columns: 1fr; } .launch .row2 { grid-template-columns: 1fr; }
  header.top nav a.hide-sm { display: none; }
}

/* "This fight brought to you by" sponsor ribbon */
.sponsor { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 10px; background: var(--ink); color: #fff; text-decoration: none;
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--yellow); transform: rotate(-2deg); font-weight: 700; }
.sponsor img { width: 34px; height: 34px; }
.sponsor small { display: block; font-family: Bangers, Impact, sans-serif; font-size: 15px; letter-spacing: .12em; color: var(--yellow); line-height: 1; }
.sponsor b { font-family: Bangers, Impact, sans-serif; font-size: 24px; font-weight: 400; letter-spacing: .04em; line-height: 1; }
.sponsor:hover { box-shadow: 7px 7px 0 var(--red); }

/* contract address + copy */
.ca { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ca code { font-size: 13px; background: #fff; border: 2px solid var(--ink); padding: 6px 8px; border-radius: 8px; overflow-wrap: anywhere; min-width: 0; flex: 1 1 260px; }