/* Coinifo arcade theme. Dark = the cabinet at night, light = the attract-mode poster. */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #07060f; --surface: #0f0d1f; --raised: #1a1733; --line: #2a2552; --line-strong: #463e86;
  --fg: #f3f1ff; --muted: #b0aad8; --faint: #8f89c0;
  --accent: #ffd23f; --accent-fill: #ffd23f; --on-accent: #160f00;
  --pink: #ff2e88; --cyan: #29e7ff;
  --up: #39ff88; --up-soft: rgb(57 255 136 / .14); --down: #ff4d79; --down-soft: rgb(255 77 121 / .16);
  --shadow: #3b2287; --scanline: rgb(0 0 0 / .22);
  --glow: 0 0 6px currentColor, 0 0 18px color-mix(in srgb, currentColor 45%, transparent);
  --rim: #463e86;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #fff6e0; --surface: #fffdf6; --raised: #fbeac0; --line: #d9c99f; --line-strong: #1d1a33;
  --fg: #15122b; --muted: #4a4570; --faint: #5d5884;
  --accent: #a3197c; --accent-fill: #ffd23f; --on-accent: #160f00;
  --pink: #d4106c; --cyan: #0089a8;
  --up: #067a46; --up-soft: rgb(6 122 70 / .12); --down: #c41e4a; --down-soft: rgb(196 30 74 / .1);
  --shadow: #15122b; --scanline: rgb(21 18 43 / .035); --glow: none; --rim: #15122b;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4rem; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.6 "Space Mono", ui-monospace, Menlo, monospace;
}
/* CRT scanlines. Purely visual: they never catch a click. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--scanline) 0 1px, transparent 1px 3px);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-fill); color: var(--on-accent); }
h1, h2, h3, th, .label, .kicker, .btn, .pager a, nav a {
  font-family: "Pixelify Sans", "Space Mono", monospace;
}
h1 { font-size: 2rem; line-height: 1.2; margin: .2em 0 .3em; color: var(--accent); text-shadow: var(--glow); font-weight: 600; }
h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; font-weight: 600; }
img { max-width: 100%; }

.wrap { max-width: 88rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .wrap { padding: 0 1.5rem; } }
main { min-height: 60vh; padding-top: 1.5rem; padding-bottom: 2rem; }

.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: .5rem; left: .5rem; z-index: 200; background: var(--accent-fill); color: var(--on-accent); padding: .4rem .8rem; }

.muted { color: var(--muted); }
.small { font-size: .8rem; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); } .acc { color: var(--accent); }
.blink { animation: blink 1s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ----------------------------------------------------------- top of page */
.bar { background: var(--surface); border-bottom: 1px solid var(--line); font-size: .75rem; color: var(--faint); }
.bar-in { display: flex; gap: 1.25rem; align-items: center; height: 2.1rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.bar b { color: var(--fg); font-weight: 400; }
.live { margin-left: auto; color: var(--fg); display: inline-flex; align-items: center; gap: .4rem; }
.live i { width: 7px; height: 7px; background: var(--up); border-radius: 50%; box-shadow: 0 0 8px var(--up); }

.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 2px solid var(--line-strong); }
.top-in { display: flex; align-items: center; gap: 1.25rem; height: 3.5rem; }
.logo { display: flex; align-items: center; gap: .6rem; color: var(--fg); text-decoration: none !important; font: 15px "Press Start 2P", monospace; }
.logo em { font-style: normal; color: var(--accent); text-shadow: var(--glow); }
.mark { width: 26px; height: 26px; }
.mark .face { fill: var(--accent-fill); } .mark .rim { fill: var(--rim); }
.top nav { display: flex; gap: .2rem; }
.top nav a { color: var(--muted); padding: .3rem .6rem; text-transform: uppercase; font-size: .85rem; letter-spacing: .05em; }
.top nav a:hover, .top nav a[aria-current] { color: var(--accent); text-decoration: none; }
.search { margin-left: auto; }
.search input, .filter, .conv input, .conv-row input, .conv-row select, .conv-row output {
  font: inherit; color: var(--fg); background: var(--surface); border: 2px solid var(--line-strong); padding: .35rem .6rem; height: 2.3rem;
}
.search input { width: 12rem; }
.search input:focus, .filter:focus { border-color: var(--accent); outline: none; }
.theme { font: inherit; font-size: 1.1rem; background: none; border: 0; color: var(--muted); cursor: pointer; width: 2.3rem; height: 2.3rem; }
.theme:hover { color: var(--accent); }
@media (max-width: 760px) {
  .top-in { flex-wrap: wrap; height: auto; padding: .6rem 0; gap: .5rem; }
  .top nav { order: 3; width: 100%; overflow-x: auto; }
  .search input { width: 9rem; }
  .logo { font-size: 12px; }
}

/* ---------------------------------------------------------------- panels */
.panel { background: var(--surface); border: 2px solid var(--line-strong); box-shadow: 4px 4px 0 var(--shadow); }
.pad { padding: 1rem; }
.scroll { overflow-x: auto; }
.label { margin: 0 0 .6rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); }
.tag { display: inline-block; font: .7rem "Pixelify Sans", monospace; text-transform: uppercase; letter-spacing: .05em; padding: 0 .35rem; background: var(--accent-fill); color: var(--on-accent); vertical-align: middle; }
.tag.dim { background: var(--raised); color: var(--muted); }
.note { font-size: .78rem; color: var(--faint); max-width: 60rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; height: 2.3rem; padding: 0 .9rem;
  background: var(--accent-fill); color: var(--on-accent); border: 2px solid var(--shadow); box-shadow: 3px 3px 0 var(--shadow);
  text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none !important;
}
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn.quiet { background: var(--raised); color: var(--fg); }
.btn.quiet:hover { color: var(--accent); }
.btn.sm { height: 2rem; padding: 0 .65rem; font-size: .78rem; }
.btn.wide { width: 100%; }

/* ------------------------------------------------------------------ home */
.hero { margin-bottom: 1.5rem; }
.kicker { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--pink); }
.hero h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.lead { color: var(--muted); max-width: 46rem; margin: 0 0 1rem; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 1.5rem; }
.card { padding: 1rem; }
.card p { margin: .2rem 0; }
.mini { list-style: none; margin: 0; padding: 0; }
.mini a { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; color: var(--fg); font-size: .85rem; text-decoration: none; }
.mini a:hover b { color: var(--accent); }
.mini .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: .72rem; }
.mini .r { color: var(--muted); }
.score { font: 4.5rem/1 "VT323", monospace; margin: 0; text-shadow: var(--glow); }
.grid4 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pname { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; flex-wrap: wrap; }
.filter { width: min(16rem, 100%); }
.pager { display: flex; gap: .4rem; margin: 1rem 0; flex-wrap: wrap; }
.pager a { min-width: 2.2rem; text-align: center; padding: .3rem .5rem; border: 2px solid var(--line-strong); color: var(--fg); }
.pager a[aria-current] { background: var(--accent-fill); color: var(--on-accent); }

/* ----------------------------------------------------------------- tables */
.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 500; padding: .6rem .6rem; border-bottom: 2px solid var(--line-strong); white-space: nowrap; }
.tbl th[data-sort] { cursor: pointer; }
.tbl th[data-sort]:hover, .tbl th[aria-sort] { color: var(--accent); }
.tbl td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--raised) 60%, transparent); }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .rank { color: var(--faint); width: 2.5rem; }
.tbl .star { width: 2rem; padding-right: 0; }
.star button { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 1.1rem; padding: .2rem; }
.star button[aria-pressed="true"], [data-watch-label][aria-pressed="true"] { color: var(--accent); }
.coin a { display: flex; align-items: center; gap: .55rem; color: var(--fg); text-decoration: none; min-width: 0; }
.coin .sym { font-weight: 700; }
.coin .nm { color: var(--faint); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.coin a:hover .sym { color: var(--accent); }
.ico { border-radius: 50%; flex-shrink: 0; background: var(--raised); }
.ph, .av { display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 .7rem "Space Mono", monospace; border-radius: 50%; vertical-align: middle; flex-shrink: 0; }
.ph { background: var(--line-strong); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .4rem; }
.dot.good { background: var(--up); } .dot.fair { background: var(--accent-fill); } .dot.poor { background: var(--down); } .dot.one { background: var(--line-strong); }
.spark { display: block; margin-left: auto; overflow: visible; }
.spark polyline { fill: none; stroke-width: 1.5; }
.spark.up polyline { stroke: var(--up); } .spark.down polyline { stroke: var(--down); }
.flash-up { animation: fu 1.4s steps(6, end); } .flash-down { animation: fd 1.4s steps(6, end); }
@keyframes fu { from { background: var(--up-soft); color: var(--up); } }
@keyframes fd { from { background: var(--down-soft); color: var(--down); } }
@media (max-width: 1100px) { .hide-lg { display: none; } }
@media (max-width: 800px) { .hide-md { display: none; } }
@media (max-width: 560px) {
  .hide-sm { display: none; }
  .coin .nm { display: none; }
  .tbl td, .tbl th { padding: .5rem .4rem; }
}

/* ------------------------------------------------------------- coin page */
.crumbs { font-size: .8rem; color: var(--faint); margin: 0 0 .5rem; }
.crumbs a { color: var(--faint); }
.coin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.coin-head h1 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; font-size: 1.8rem; }
.coin-head h1 .muted { font-size: 1.1rem; text-shadow: none; }
.coin-head p { margin: .2rem 0; }
.bigprice { font: clamp(3.4rem, 9vw, 4.6rem)/1 "VT323", monospace; color: var(--accent); text-shadow: var(--glow); }
.head-actions { display: flex; gap: .6rem; }
.cols { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 22rem; }
.side { display: grid; gap: 1.25rem; align-content: start; }
@media (max-width: 960px) { .cols { grid-template-columns: 1fr; } }
.cols h2 { margin-top: 1.5rem; }
.chart { padding: 1rem; }
.chart-head { display: flex; justify-content: space-between; margin-bottom: .5rem; font-size: .85rem; }
.chart svg { display: block; width: 100%; height: 240px; overflow: visible; }
.chart polyline { fill: none; stroke-width: 2; }
.chart .up polyline { stroke: var(--up); } .chart .down polyline { stroke: var(--down); }
.chart .up .area { fill: var(--up-soft); } .chart .down .area { fill: var(--down-soft); }
dl { margin: 0; }
.stat { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.stat dt { color: var(--muted); }
.stat dd { margin: 0; text-align: right; }
.stat small { display: block; color: var(--faint); font-size: .72rem; }
.perf { display: flex; justify-content: space-between; margin-top: .75rem; font-size: .8rem; }
.conv { display: grid; gap: .5rem; }
.conv label { display: flex; align-items: center; gap: .5rem; }
.conv input { flex: 1; min-width: 0; }
.prose p { margin: 0 0 1rem; color: var(--muted); }
.links { display: flex; gap: .5rem; flex-wrap: wrap; }
.links a { border: 2px solid var(--line-strong); padding: .2rem .5rem; font-size: .8rem; color: var(--fg); }

/* ---------------------------------------------------------- other pages */
.narrow { max-width: 46rem; }
.narrow p, .narrow li { color: var(--muted); }
.narrow h2 { color: var(--accent); }
.center { text-align: center; padding: 3rem 0; }
.conv-page { max-width: 40rem; }
.conv-row { display: flex; gap: .5rem; }
.conv-row input, .conv-row output { flex: 1; min-width: 0; display: flex; align-items: center; }
.conv-row select { width: 45%; }
.eq { text-align: center; font: 2rem "VT323", monospace; margin: .4rem 0; color: var(--accent); }

.foot { border-top: 2px solid var(--line-strong); background: var(--surface); padding: 2rem 0; font-size: .78rem; color: var(--faint); margin-top: 2rem; }
.foot nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.foot nav a { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; }
.foot p { max-width: 60rem; }
.foot a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}