/* App pages, in the landing's visual language: night-purple sky, OCMikola, lime tags, sharp thin frames. */
@font-face { font-family: "OCMikola"; src: url("/assets/OCMikolaDemo-Regular.DJHCIzNK.woff2") format("woff2"), url("/assets/OCMikolaDemo-Regular.CLgSMpjn.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OCMikola"; src: url("/assets/OCMikolaDemo-Medium.B_L78Ntq.woff2") format("woff2"), url("/assets/OCMikolaDemo-Medium.DZCTVuUo.woff") format("woff"); font-weight: 500 700; font-display: swap; }

:root {
  --bg: #0b0716; --bg2: #140c26; --panel: rgba(18, 11, 36, .62); --panel-solid: #150d29; --line: rgba(255, 255, 255, .14); --line2: rgba(255, 255, 255, .28);
  --text: #ffffff; --muted: rgba(255, 255, 255, .55); --lime: #3d6bff; --lime2: #8fa8ff;
  --yes: #6f93ff; --yes-bg: rgba(61, 107, 255, .14); --no: #ff5c8a; --no-bg: rgba(255, 92, 138, .1);
  --accent: #3d6bff; --warn: #ffc24a; --radius: 0px;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 15px/1.5 OCMikola, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1200px 520px at 70% 108%, rgba(61, 107, 255, .26), transparent 60%),
    radial-gradient(900px 480px at 15% 100%, rgba(110, 70, 255, .22), transparent 60%),
    linear-gradient(180deg, #0a0818 0%, #10102e 55%, #1c1a52 88%, #26206a 100%);
  background-attachment: fixed;
}
/* the mountain ridge from the landing, drawn as a fixed silhouette at the foot of every page */
body::before {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 34vh; pointer-events: none; z-index: 0; opacity: .9;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'><path d='M0 210 L90 170 L160 190 L250 120 L300 150 L360 80 L420 140 L520 160 L600 110 L660 140 L760 180 L860 130 L940 150 L1010 60 L1060 100 L1120 40 L1180 110 L1260 90 L1340 140 L1440 120 L1440 300 L0 300Z' fill='%23070411'/><path d='M0 250 L120 220 L240 240 L380 200 L520 235 L660 215 L800 245 L960 210 L1100 240 L1260 220 L1440 245 L1440 300 L0 300Z' fill='%23050309'/></svg>") bottom / 100% 100% no-repeat;
}
body::after {   /* film grain */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
main, footer, header { position: relative; z-index: 1; }
a { color: inherit; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; letter-spacing: 0; }
.muted { color: var(--muted); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 55px; }

/* ---- header: logo left, links centre, wallet right, like the landing ---- */
header.top { position: sticky; top: 0; z-index: 20; background: linear-gradient(180deg, rgba(11, 7, 22, .92), rgba(11, 7, 22, 0)); }
header.top .wrap { display: flex; align-items: center; gap: 24px; height: 96px; max-width: none; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.brand img, .brand svg { width: 34px; height: 34px; object-fit: contain; }
nav.links { display: flex; gap: 30px; flex: 1; justify-content: center; overflow-x: auto; }
nav.links a { text-decoration: none; color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 0; position: relative; white-space: nowrap; transition: color .3s; }
nav.links a::before { content: ""; position: absolute; left: 50%; top: -6px; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .5; transform: translateX(-50%); transition: background .3s, opacity .3s, box-shadow .3s; }
nav.links a.on, nav.links a:hover { color: #fff; }
nav.links a.on::before { background: var(--lime); opacity: 1; box-shadow: 0 0 8px var(--lime); }
.wallet { font: 500 12px OCMikola, sans-serif; letter-spacing: .08em; text-transform: uppercase; background: none; border: 0; color: #fff; padding: 6px 0; cursor: pointer; position: relative; }
.wallet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #fff; transform-origin: left; transition: transform .4s; }
.wallet:hover::after { transform: scaleX(.4); }
.wallet.on { color: var(--lime2); } .wallet.on::after { background: var(--lime); }

/* ---- buttons: thin frames, uppercase ---- */
button, .btn {
  font: 500 12px OCMikola, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; text-decoration: none;
  border: 1px solid var(--line2); background: transparent; color: #fff; padding: 14px 22px; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .3s, color .3s, background .3s;
}
button:hover, .btn:hover { border-color: #fff; }
button:disabled { opacity: .45; cursor: default; }
.btn-primary { background: var(--lime); border-color: var(--lime); color: #fff; box-shadow: 0 0 24px rgba(61, 107, 255, .35); }
.btn-primary:hover { background: #6a8cff; border-color: #6a8cff; color: #fff; }
.btn::after, .btn-primary.arrow::after { content: "↗"; font-size: 13px; }
.more { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; font-size: 14px; }
.more .box { width: 58px; height: 58px; border: 1px solid var(--line2); display: grid; place-items: center; }
.more > span:last-child::before { content: "•"; margin-right: 8px; opacity: .8; }

/* ---- hero ---- */
.hero { padding: 70px 0 30px; }
.tag { display: inline-block; background: var(--lime); color: #fff; font-size: 11px; font-weight: 500; padding: 3px 7px; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 22px; }
.hero h1, h1.big { font-weight: 500; font-size: clamp(38px, 5.4vw, 72px); line-height: .98; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 22px; }
.hero h1 em { font-style: normal; color: var(--lime2); text-shadow: 0 0 30px rgba(61, 107, 255, .6); }
.hero p { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 0 30px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.stats { display: flex; gap: 0; flex-wrap: wrap; margin: 40px 0 0; border-top: 1px solid var(--line); }
.stat { padding: 18px 40px 0 0; min-width: 170px; }
.stat span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px; }
.stat b { font-size: 26px; font-weight: 500; }
h2 { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; margin: 54px 0 18px; color: var(--muted); display: flex; align-items: center; gap: 14px; }
h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.card h2 { margin-top: 30px; }

/* ---- cards: glass panels, sharp corners ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.card { background: var(--panel); border: 1px solid var(--line); padding: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color .4s; }
.card:hover { border-color: var(--line2); }
.coinhead { display: flex; gap: 14px; align-items: center; text-decoration: none; }
.coinhead img { width: 48px; height: 48px; object-fit: cover; background: var(--bg2); flex: none; border: 1px solid var(--line); }
.coinhead .sym { font-weight: 500; font-size: 19px; text-transform: uppercase; }
.coinhead .mc { margin-left: auto; text-align: right; white-space: nowrap; }
.coinhead .mc b { display: block; font-size: 18px; font-weight: 500; }

.market { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.market .q { font-weight: 500; font-size: 15.5px; margin-bottom: 9px; line-height: 1.3; }
.market .meta { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 11px; flex-wrap: wrap; letter-spacing: .02em; }
.bar { height: 2px; background: var(--no-bg); overflow: hidden; margin-bottom: 12px; }
.bar i { display: block; height: 100%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side { padding: 12px 14px; border: 1px solid transparent; font: 500 13px OCMikola, sans-serif; letter-spacing: .08em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.side.yes { background: var(--yes-bg); color: var(--yes); border-color: rgba(61, 107, 255, .25); }
.side.no { background: var(--no-bg); color: var(--no); border-color: rgba(255, 92, 138, .25); }
button.side:hover { filter: brightness(1.25); }
.side.sel.yes { border-color: var(--yes); box-shadow: inset 0 0 0 1px var(--yes); } .side.sel.no { border-color: var(--no); box-shadow: inset 0 0 0 1px var(--no); }
.side.closed { opacity: .35; cursor: default; }
.side small { font-size: 13px; letter-spacing: 0; color: #fff; }

.pill { display: inline-block; padding: 3px 7px; font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line2); }
.pill.yes, .pill.won { color: #fff; background: var(--lime); border-color: var(--lime); }
.pill.no, .pill.lost { color: var(--no); border-color: var(--no); }
.pill.void, .pill.open { color: var(--warn); border-color: rgba(255, 194, 74, .5); }

.betbox { margin-top: 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); padding: 14px; display: none; }
.betbox.show { display: block; animation: rise .4s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.betbox .row { display: flex; gap: 8px; }
input, textarea {
  font: 15px OCMikola, sans-serif; color: #fff; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 0; padding: 13px 14px; width: 100%;
  transition: border-color .3s;
}
input:focus, textarea:focus { outline: none; border-color: var(--lime); }
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, .3); }
.chips { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.chips button { padding: 6px 11px; font-size: 11px; }
.payout { display: flex; justify-content: space-between; margin: 10px 0 4px; font-size: 14px; }
.payout b { color: var(--lime2); font-weight: 500; }
.status { white-space: pre-wrap; font-size: 13px; color: var(--muted); margin-top: 10px; }
.status.err { color: var(--no); } .status.ok { color: var(--lime2); }

form.launch { display: grid; gap: 18px; max-width: 680px; }
form.launch label { display: grid; gap: 8px; font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
form.launch .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.note { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--lime); padding: 16px 18px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.note b { color: #fff; font-weight: 500; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; }
tr:last-child td { border-bottom: 0; }
.tablewrap { overflow-x: auto; }

.tokenhead { display: flex; gap: 18px; align-items: center; margin: 40px 0 10px; flex-wrap: wrap; }
.tokenhead img { width: 72px; height: 72px; object-fit: cover; background: var(--bg2); border: 1px solid var(--line); }
.tokenhead h1 { margin: 0; font-size: 44px; font-weight: 500; text-transform: uppercase; line-height: 1; }
.chart { width: 100%; height: 160px; display: block; margin-top: 12px; }
.two-col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: start; }
.empty { color: var(--muted); padding: 44px; text-align: center; border: 1px dashed var(--line2); background: var(--panel); }
.prose h2 { margin-top: 36px; } .prose p { color: rgba(255, 255, 255, .78); line-height: 1.75; } .prose b { color: #fff; font-weight: 500; }
footer { color: var(--muted); font-size: 12px; padding: 60px 0 44px; margin-top: 80px; }
footer .wrap { display: flex; gap: 30px; justify-content: space-between; flex-wrap: wrap; align-items: flex-end; }
footer .legal { max-width: 560px; line-height: 1.7; }
footer a { color: #fff; text-decoration: none; }

@media (max-width: 860px) {
  .wrap { padding: 0 20px; }
  header.top .wrap { height: auto; flex-wrap: wrap; gap: 10px 14px; padding-top: 16px; padding-bottom: 10px; }
  .wallet { margin-left: auto; }
  nav.links { order: 3; flex-basis: 100%; gap: 22px; justify-content: flex-start; padding-top: 8px; }
  .two-col, .grid { grid-template-columns: 1fr; }
  form.launch .two { grid-template-columns: 1fr; }
  .stat { padding-right: 24px; min-width: 130px; }
}

/* creator tax picker */
.taxes { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
.taxes button { padding: 12px 16px; min-width: 58px; }
.taxes button.on { background: var(--lime); border-color: var(--lime); color: #fff; }
.taxes input { width: 110px; padding: 11px 12px; }

/* coins launched only for testing / demo recording */
.pill.test { color: var(--warn); border-color: rgba(255, 194, 74, .55); background: rgba(255, 194, 74, .08); vertical-align: middle; font-size: 10px; }
.tokenhead h1 .pill.test { font-size: 11px; }
.testnote { margin: 14px 0 6px; padding: 12px 16px; border: 1px solid rgba(255, 194, 74, .4); background: rgba(255, 194, 74, .07); color: rgba(255, 255, 255, .85); font-size: 14px; }
.testnote b { color: #fff; font-weight: 500; }

.navx { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line2); color: #fff; transition: border-color .3s, color .3s; }
.navx:hover { border-color: var(--lime); color: var(--lime2); }
@media (max-width: 860px) { .navx { margin-left: auto; } .navx + .wallet { margin-left: 0; } }