:root {
  --bg: #121118;
  --bg-elevated: #1a1824;
  --line: #b9aaef33;
  --accent: #7132f5;
  --accent-hot: #8049f2;
  --ink-light: #ddd4ff;
  --ink-soft: #b9aaef;
  --fg: #ffffff;
  --muted: #f0eef6cc;
  --faint: #ffffff61;
  --red: #f07178;
  --green: #86efac;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
}
.bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.bg img { width: 100%; height: 100%; object-fit: cover; }
.bg .veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #12111866, #12111880 40%, #121118cc),
    radial-gradient(900px 520px at 82% -10%, #7132f538, transparent 62%);
}
.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 12px 16px 48px; }
a { color: var(--ink-light); text-decoration: none; }
a:hover { color: #fff; }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 14px;
  padding: 8px 0 10px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; letter-spacing: .02em; }
.brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.brand b { color: var(--ink-light); font-weight: 800; }
.nav-links {
  display: flex; gap: 10px 16px; flex-wrap: wrap; font-size: 13px; font-weight: 600;
  flex: 1 1 420px; justify-content: flex-end;
}
.nav-links a { color: var(--muted); white-space: nowrap; }
.nav-links a.active, .nav-links a:hover { color: #fff; }
.pill {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  border: 1px solid #7132f573; color: var(--ink-light);
  padding: 4px 10px; border-radius: 99px; background: #7132f529;
  white-space: nowrap;
}
.hero { padding: 46px 0 18px; }
.kicker {
  color: var(--ink-light); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 0 18px #7132f580;
}
h1 {
  font-size: clamp(40px, 7vw, 72px); line-height: .95; margin: 12px 0 16px; font-weight: 800;
  letter-spacing: -.03em;
}
.lede { color: var(--muted); max-width: 640px; font-size: 18px; line-height: 1.55; }
.row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 26px 0; }
.stat, .card {
  background: #1a1824cc; border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.stat { padding: 14px; }
.stat .l { font-size: 11px; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.stat .v { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; margin-top: 6px; font-weight: 600; }
.stat .s { font-size: 12px; color: var(--faint); margin-top: 4px; }
.up { color: var(--green); } .down { color: var(--red); }
.grid2 { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card { padding: 20px; }
.card h2 { font-size: 16px; margin: 0 0 12px; font-weight: 700; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; color: var(--ink-light); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; border: 0; padding: 11px 16px;
  font-weight: 700; cursor: pointer; font-size: 14px; border-radius: 10px;
}
.btn:hover { background: var(--accent-hot); }
.btn.ghost { background: transparent; color: #fff; border: 1px solid #7132f573; }
.btn.ghost:hover { background: #7132f538; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.warn {
  border: 1px solid #7132f573; background: #7132f529; color: var(--ink-light);
  padding: 12px 14px; font-size: 14px; margin: 14px 0; border-radius: 12px;
}
.note { color: var(--muted); font-size: 14px; line-height: 1.55; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-soft); font-weight: 600; }
.flip-stage {
  height: 280px; display: flex; align-items: center; justify-content: center;
  background: #121118cc; border: 1px solid var(--line); margin: 12px 0; border-radius: 16px;
  perspective: 920px; position: relative; overflow: hidden;
}
.flip-stage.flash::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #8049f288, transparent 62%);
  animation: purpleflash .42s ease-out;
}
@keyframes purpleflash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}
.coin {
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ddd4ff, #7132f5 55%, #3b187a);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 800;
  box-shadow: 0 0 0 1px #7132f566, 0 12px 40px #7132f566;
}
.coin.spin { animation: spin 1.1s ease-in-out; }
@keyframes spin { 50% { transform: rotateY(540deg) scale(.92); } }
.coin3d {
  width: 148px; height: 148px; position: relative;
  transform-style: preserve-3d;
  transition: transform 2.55s cubic-bezier(.12,.72,.18,1);
}
.coin-wrap { transform-style: preserve-3d; }
.coin-wrap.thud { animation: thud .38s ease; }
@keyframes thud {
  0% { transform: scale(1.06); filter: brightness(1.35); }
  40% { transform: scale(.94); }
  100% { transform: scale(1); filter: brightness(1); }
}
.coin3d .face {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: inset 0 0 0 3px #ddd4ff55, 0 0 0 2px #7132f588, 0 18px 48px #7132f566;
  display: flex; align-items: center; justify-content: center;
}
.coin3d .face img { width: 100%; height: 100%; object-fit: cover; }
.coin3d .heads { background: #121118; }
.coin3d .tails {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 30% 28%, #b9aaef88, transparent 42%),
    #1a1028;
}
.coin3d .tails .glyph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 34px; letter-spacing: .08em; color: #fff;
  text-shadow: 0 0 18px #7132f5;
}
input, select, textarea {
  width: 100%; margin: 8px 0 12px; background: #121118; border: 1px solid var(--line);
  color: #fff; padding: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border-radius: 10px;
}
textarea { min-height: 72px; resize: vertical; }
label.l, .lbl {
  color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.footer { margin-top: 40px; color: var(--faint); font-size: 12px; border-top: 1px solid var(--line); padding-top: 16px; }

/* chips / sleeves */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.chip {
  border: 1px solid #7132f573; background: #7132f51f; color: var(--ink-light);
  padding: 7px 11px; border-radius: 99px; font-size: 12px; font-weight: 700;
  cursor: pointer; letter-spacing: .02em;
}
.chip:hover, .chip.on { background: var(--accent); color: #fff; border-color: transparent; }
.chip.dim { opacity: .55; }
.chip.mag { border-style: dashed; }

/* NYSE clock */
.nyse {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 14px; margin: 0 0 14px;
  background: #1a1824cc; border: 1px solid var(--line);
}
.nyse .dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px;
  box-shadow: 0 0 10px currentColor;
}
.nyse.open .dot { background: var(--green); color: var(--green); }
.nyse.closed .dot { background: var(--red); color: var(--red); }
.nyse .boost {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-light);
}

/* duel arena */
.arena {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin: 8px 0 16px;
}
.arena-side {
  background: #1a1824cc; border: 1px solid var(--line); border-radius: 16px; padding: 22px 16px;
  text-align: center; min-height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.arena-side.win { box-shadow: 0 0 0 1px #86efac66, 0 0 40px #7132f540; }
.arena-side img.av { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #7132f588; }
.ticker-glyph {
  width: 96px; height: 96px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; letter-spacing: -.02em;
  box-shadow: 0 0 0 2px #7132f588, 0 12px 30px #7132f544;
}
.vs {
  align-self: center; font-weight: 800; letter-spacing: .2em; color: var(--ink-soft); font-size: 13px;
}
.score { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 28px; font-weight: 700; }
.tilt { font-size: 12px; color: var(--ink-light); }

/* hunt */
.hp {
  height: 16px; border-radius: 99px; background: #121118; border: 1px solid var(--line);
  overflow: hidden; position: relative;
}
.hp > i {
  display: block; height: 100%; width: 70%;
  background: linear-gradient(90deg, #7132f5, #b9aaef);
  box-shadow: 0 0 18px #7132f5aa;
  transition: width .8s linear;
}
.hunt-timer {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(28px, 5vw, 42px); font-weight: 700; letter-spacing: .04em;
  color: var(--ink-light); text-shadow: 0 0 22px #7132f580;
}
.hunters { max-height: 220px; overflow: auto; }

/* dash */
.dash-table { overflow-x: auto; }
.dash-table table { min-width: 640px; }
.spark {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 99px; border: 1px solid var(--line);
  font-size: 12px; font-weight: 700;
}
.bag {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.tiny { font-size: 11px; color: var(--faint); }

/* studio */
.studio-wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; }
.studio-canvas, .poolcat-canvas {
  width: 100%; max-width: 100%; background: #121118cc; border: 1px dashed #7132f573;
  border-radius: 16px; display: block; cursor: crosshair;
}
.poolcat-canvas { cursor: default; margin: 0 auto; }

/* dual amounts */
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preview-face { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.preview-face canvas { border-radius: 50%; background: #121118; box-shadow: 0 0 0 2px #7132f566; }
.tape { font-size: 13px; color: var(--muted); }
.tape li { margin: 6px 0; }
.demo-tag {
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  border: 1px solid #7132f573; color: var(--ink-light); padding: 2px 6px; border-radius: 99px;
}
.jump-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 8px; }
.jump {
  display: block; padding: 16px; background: #1a1824cc; border: 1px solid var(--line);
  border-radius: 14px; color: #fff;
}
.jump:hover { border-color: #8049f2; color: #fff; }
.jump b { display: block; color: var(--ink-light); margin-bottom: 6px; }
.jump span { color: var(--muted); font-size: 13px; line-height: 1.4; }

@media (max-width: 900px) {
  .arena { grid-template-columns: 1fr; }
  .vs { text-align: center; }
  .studio-wrap { grid-template-columns: 1fr; }
  .jump-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .row, .grid2, .grid3 { grid-template-columns: 1fr 1fr; }
  .nav-links { justify-content: flex-start; }
  .dual { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .row, .grid2, .grid3, .jump-cards { grid-template-columns: 1fr; }
}

/* pair board / votes / fight card */
.pair-row {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.meter { height: 8px; background: #121118; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: linear-gradient(90deg, #7132f5, #b9aaef); width: 0; transition: width .35s ease; }
.vote-n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--ink-light); min-width: 72px; text-align: right; }
.ca-pending { color: var(--faint); font-size: 12px; }
.fight-card {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
  padding: 22px; border-radius: 18px; background: #1a1824cc; border: 1px solid var(--line);
}
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline input { width: auto; flex: 1; min-width: 90px; margin: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt0 { margin-top: 0; }
.mb8 { margin-bottom: 8px; }
.result-banner {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: #7132f529; border: 1px solid #7132f573; color: var(--ink-light);
  font-weight: 700;
}
.empty-canvas {
  min-height: 280px; display: flex; align-items: center; justify-content: center;
  color: var(--faint); font-size: 14px; text-align: center; padding: 20px;
}
@media (max-width: 800px) {
  .pair-row { grid-template-columns: 72px 1fr; }
  .vote-n { text-align: left; }
  .fight-card { grid-template-columns: 1fr; }
}

.jump-cards.jump3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .jump-cards.jump3 { grid-template-columns: 1fr; } }


/* pit */
.hero.tight { padding: 28px 0 8px; }
.hero.tight h1 { margin: 10px 0 12px; }
.pit-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 14px;
  margin: 8px 0 18px;
  align-items: start;
}
.chart-frame {
  background: #1a1824cc;
  border: 1px solid #7132f573;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #8049f233, 0 20px 50px #7132f526;
  backdrop-filter: blur(10px);
}
.chart-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.chart-top .pair { color: var(--ink-light); font-weight: 700; font-size: 13px; }
.chart-top .src { font-size: 11px; color: var(--faint); }
.chart-frame iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 78px);
  min-height: 520px;
  border: 0;
  background: transparent;
}
.pit-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pit-cat {
  background: #1a1824cc;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 12px 14px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.pit-cat img {
  width: 118px; height: 118px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px #7132f588, 0 16px 40px #7132f544;
  transform-origin: 50% 70%;
}
.pit-cat.swell img { animation: catSwell .72s cubic-bezier(.2,1.4,.3,1); }
.pit-cat.flinch img { animation: catFlinch .48s ease; }
@keyframes catSwell {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.24); filter: brightness(1.35) drop-shadow(0 0 22px #8049f2cc); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes catFlinch {
  0% { transform: scale(1) translateX(0) rotate(0); }
  18% { transform: scale(.84) translateX(-10px) rotate(-8deg); filter: brightness(.65); }
  42% { transform: scale(.9) translateX(7px) rotate(5deg); }
  100% { transform: scale(1) translateX(0) rotate(0); filter: brightness(1); }
}
.pit-mood {
  margin-top: 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.pit-cat.swell .pit-mood { color: var(--green); }
.pit-cat.flinch .pit-mood { color: var(--red); }
.pit-mini {
  background: #1a1824cc; border: 1px solid var(--line); border-radius: 16px;
  padding: 12px 14px; backdrop-filter: blur(10px);
}
.pit-mini .kv {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.pit-mini .kv:last-child { border-bottom: 0; }
.pit-mini .kv span { color: var(--faint); }
.pit-mini .kv b { font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.prints {
  background: #1a1824cc;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px 8px;
  max-height: 280px;
  overflow: auto;
  backdrop-filter: blur(10px);
}
.prints h2 { margin-bottom: 6px; }
.print {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.print:last-child { border-bottom: 0; }
.print .t { color: var(--faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.print.buy .x { color: var(--green); }
.print.sell .x { color: var(--red); }
.print.mix .x { color: var(--ink-light); }
.print .tag { display: block; font-size: 10px; color: var(--faint); margin-top: 2px; letter-spacing: .04em; }
.ud-bar {
  height: 16px; display: flex; border-radius: 99px; overflow: hidden;
  border: 1px solid var(--line); background: #121118; margin-top: 8px;
}
.ud-bar > i { display: block; height: 100%; }
.ud-bar .u { background: linear-gradient(90deg, #4ade80, #86efac); }
.ud-bar .d { background: linear-gradient(90deg, #f07178, #fb7185); }
.ud-leg {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: 13px; font-weight: 700;
}
.clock-xl {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(32px, 6vw, 52px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-light);
  text-shadow: 0 0 22px #7132f580;
  line-height: 1;
}
.call-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.call-row .btn.up-btn { background: #1f3d2b; border: 1px solid #86efac66; }
.call-row .btn.up-btn:hover { background: #265c3a; }
.call-row .btn.down-btn { background: #3d1f24; border: 1px solid #f0717866; }
.call-row .btn.down-btn:hover { background: #5c262e; }
.chat-log {
  max-height: 360px; overflow: auto;
  border: 1px solid var(--line); border-radius: 12px;
  background: #12111899; padding: 4px 12px; margin-bottom: 12px;
}
.msg { padding: 10px 0; border-bottom: 1px solid var(--line); }
.msg:last-child { border-bottom: 0; }
.msg .who { font-size: 12px; font-weight: 700; color: var(--ink-light); display: flex; align-items: center; gap: 6px; }
.msg .who .ago { color: var(--faint); font-weight: 500; font-size: 11px; }
.catmark {
  width: 16px; height: 16px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px #7132f588;
}
.msg .body { color: var(--muted); font-size: 14px; margin-top: 4px; line-height: 1.45; word-wrap: break-word; }
.msg img.embed {
  max-width: 100%; max-height: 180px; border-radius: 10px;
  margin-top: 8px; border: 1px solid var(--line); display: block;
}
.hold-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 12px; font-size: 13px; color: var(--muted);
}
.hold-row input[type="checkbox"] { width: auto; margin: 0; accent-color: #7132f5; }
.sound-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.feed-note { font-size: 11px; color: var(--faint); line-height: 1.4; margin: 0 0 8px; }
.stake-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stake-inline input { width: 110px; margin: 0; }
@media (max-width: 900px) {
  .pit-board { grid-template-columns: 1fr; }
  .chart-frame iframe { height: 420px; }
  .prints { max-height: 220px; }
}
@media (max-width: 560px) {
  .chart-frame iframe { height: 320px; }
  .clock-xl { font-size: 36px; }
}


/* raffle strip */
.raffle-strip {
  background: #1a1824cc;
  border: 1px solid #7132f573;
  border-radius: 16px;
  padding: 14px 16px 12px;
  margin: 0 0 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px #8049f222;
}
.raffle-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.raffle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.raffle-grid .l {
  font-size: 11px; color: var(--ink-soft); letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700;
}
.raffle-grid .v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px; margin-top: 4px; font-weight: 600; color: var(--ink-light);
}
.raffle-grid .s { font-size: 12px; color: var(--faint); margin-top: 3px; }
@media (max-width: 800px) {
  .raffle-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .raffle-grid { grid-template-columns: 1fr; }
}


/* ship: wide pit, ticket, chat column */
.wrap.wide { max-width: 1360px; }
.nav.tight { padding: 10px 0 12px; }
.pill.sm {
  font-size: 9px; padding: 2px 7px; letter-spacing: .06em;
}
.honesty-line {
  color: var(--faint);
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 18px;
  max-width: 820px;
}
.pit-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  margin: 0 0 18px;
  align-items: start;
}
.pit-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pit-chat {
  background: #1a1824cc;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px 16px;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  min-height: 340px;
}
.pit-chat .chat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.pit-chat h2 { margin: 0; }
.pit-chat .chat-log {
  flex: 1;
  max-height: 280px;
  min-height: 200px;
  margin-bottom: 10px;
}
.chat-compose { display: flex; flex-direction: column; gap: 8px; }
.chat-compose textarea { margin: 0; min-height: 56px; border-radius: 12px; }
.chat-row { display: flex; gap: 8px; align-items: center; }
.chat-row input { margin: 0; flex: 1; }
.chat-row .btn { flex: 0 0 auto; }

.ticket-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 14px;
  align-items: start;
}
.ticket {
  background: #1a1824cc;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px 20px;
  backdrop-filter: blur(10px);
}
.ticket-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.ticket-mark {
  display: flex; align-items: baseline; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; font-weight: 700; color: var(--ink-light);
}
.ticket .clock-xl, .ticket .clock-sm {
  font-size: 16px;
  margin: 0;
}
.ticket .call-row { margin: 0; }
.ticket .call-row .btn, .ticket .call-row .ud {
  flex: 0 0 auto;
  min-height: 0;
  height: 24px;
  font-size: 12px;
  letter-spacing: .06em;
  border-radius: 7px;
  padding: 0 10px;
}
.stake-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 12px;
}
.ticket-meta .note { margin: 6px 0; }
.ticket-side { border-radius: 16px; }

.pit-side .prints { max-height: 320px; }

@media (max-width: 980px) {
  .pit-shell, .ticket-grid { grid-template-columns: 1fr; }
  .chart-frame iframe { height: 420px; }
  .pit-chat .chat-log { max-height: 240px; }
}
@media (max-width: 560px) {
  .chart-frame iframe { height: 320px; }
  .ticket { padding: 16px; }
  .ticket .clock-xl { font-size: 40px; }
  .chat-row { flex-wrap: wrap; }
  .chat-row .btn { width: 100%; }
}


/* dashboard first */
body.dash .wrap.dash { padding-top: 8px; }
body.dash .row { margin: 14px 0 16px; }
body.dash .jump { padding: 18px 16px; text-align: center; }
body.dash .jump b { margin: 0; font-size: 15px; }
.ticket-wrap { max-width: 720px; }
.ticket-wrap .ticket { margin-top: 14px; }
.flip-page { max-width: 640px; }
.flip-stage.xl {
  height: min(58vh, 440px);
  margin: 16px 0 8px;
}
.flip-btns { justify-content: center; }
.flip-btns .btn { min-width: 140px; min-height: 48px; font-size: 16px; letter-spacing: .08em; }
.flip-page input#wager { width: 110px; display: inline-block; margin: 0 8px; text-align: center; }
.footer { margin-top: 24px; }
@media (max-width: 980px) {
  .chart-frame iframe { height: 56vh; min-height: 360px; }
}


/* prediction ticket — Limitless / Polymarket layout */
.pm-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 12px 0 10px;
}
.pm-q {
  font-size: clamp(22px, 3vw, 32px); line-height: 1.15;
  margin: 10px 0 4px; font-weight: 800; letter-spacing: -.02em;
}
.pm-clockbox { text-align: right; }
.clock-xl.pm-clock {
  font-size: clamp(28px, 4vw, 40px);
  margin: 0;
}
.pm-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 360px;
  gap: 14px;
  align-items: start;
}
.pm-shell .chart-frame iframe {
  height: min(62vh, 560px);
  min-height: 420px;
}
.pm-ticket { padding: 16px 16px 14px; }
.pm-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 12px;
}
.pm-stats span {
  display: block; font-size: 11px; color: var(--ink-soft);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.pm-stats b {
  display: block; margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; color: var(--ink-light);
}
.pm-side {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 12px;
  border: 1px solid var(--line); border-radius: 14px; margin: 8px 0;
  background: #12111866;
}
.pm-side.up { border-color: #86efac44; }
.pm-side.down { border-color: #f0717844; }
.pm-side-name { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.pm-side-pct { font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.pm-side.up .pm-side-pct { color: var(--green); }
.pm-side.down .pm-side-pct { color: var(--red); }
.pm-side .btn { min-width: 112px; min-height: 44px; }
.pm-win {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 8px 0 4px; font-size: 13px; color: var(--muted);
}
.pm-win b { color: var(--ink-light); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
@media (max-width: 980px) {
  .pm-shell { grid-template-columns: 1fr; }
  .pm-clockbox { text-align: left; }
  .pm-shell .chart-frame iframe { height: 42vh; min-height: 280px; }
}

.pm-name {
  font-size: 15px; font-weight: 700; color: var(--ink-light); margin: 2px 0 8px;
}



/* purrdiction: one viewport */
html:has(body.purrdiction), body.purrdiction { height: 100%; }
body.purrdiction { overflow: hidden; }
body.purrdiction .wrap {
  height: 100vh;
  height: 100dvh;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  padding: 4px 12px 8px;
  box-sizing: border-box;
}
body.purrdiction .ticket-wrap { max-width: 920px; }
body.purrdiction .nav.tight { padding: 6px 0 6px; flex-shrink: 0; }
body.purrdiction .ticket {
  flex: 0 0 auto;
  padding: 6px 8px;
  margin-top: 4px;
  border-radius: 10px;
}
body.purrdiction .ticket-top {
  margin-bottom: 4px;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
body.purrdiction .ticket .chips { margin: 0; gap: 4px; flex-wrap: nowrap; }
body.purrdiction .ticket .chip { padding: 3px 8px; font-size: 11px; }
body.purrdiction .ticket .clock-xl {
  font-size: 16px;
  margin: 0;
  letter-spacing: .04em;
  text-shadow: none;
  line-height: 1;
}
body.purrdiction .ticket-mark { font-size: 12px; gap: 6px; }
body.purrdiction .ud-bar { height: 4px; margin: 0 0 6px; }
body.purrdiction .ticket-act {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
body.purrdiction .ticket .call-row {
  flex: 0 0 auto;
  margin: 0;
  gap: 6px;
  flex-wrap: nowrap;
}
body.purrdiction .ticket .call-row .btn {
  flex: 0 0 auto;
  min-height: 0;
  width: auto;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  letter-spacing: .06em;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
body.purrdiction .ticket .call-row .btn b {
  font-size: 12px;
  font-weight: 700;
  opacity: .9;
}
body.purrdiction .stake-row {
  flex: 0 0 auto;
  margin: 0;
  gap: 4px;
  flex-wrap: nowrap;
}
body.purrdiction .stake-inline { display: inline-flex; align-items: center; gap: 4px; }
body.purrdiction .stake-inline input#stake {
  width: 56px;
  margin: 0;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 8px;
}
body.purrdiction .ticket #bal { font-size: 11px; color: var(--muted); font-weight: 600; }
body.purrdiction .chart-frame.pm-chart {
  position: relative;
  flex: 1 1 auto;
  min-height: calc(100dvh - 140px);
  margin-top: 6px;
  border-radius: 12px;
  overflow: hidden;
  background: #12111899;
}
body.purrdiction .chart-frame.pm-chart canvas {
  display: block;
  width: 100%;
  height: 100%;
}
body.purrdiction .pm-chart-lab {
  position: absolute;
  top: 8px;
  right: 10px;
  left: auto;
  font-size: 11px;
  color: #f0eef6cc;
  pointer-events: none;
}
body.purrdiction #youChip {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-light);
}
body.purrdiction .footer { display: none; }
body.purrdiction #feeBang:empty { display: none; margin: 0; }
body.purrdiction #px:empty,
body.purrdiction #chg:empty,
body.purrdiction #clock:empty { display: none; }


/* catpit: one viewport */
html:has(body.catpit), body.catpit { height: 100%; }
body.catpit { overflow: hidden; }
body.catpit .wrap {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 4px 12px 8px;
  box-sizing: border-box;
}
body.catpit .nav.tight { padding: 6px 0; flex-shrink: 0; }
body.catpit .pit-shell {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  gap: 8px;
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 240px;
}
body.catpit .pit-main {
  min-height: 0;
  height: 100%;
  gap: 8px;
}
body.catpit .chart-frame {
  flex: 1 1 auto;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}
body.catpit .chart-top { padding: 4px 8px; gap: 8px; }
body.catpit .chart-top .btns { gap: 6px; }
body.catpit .chart-top .btn {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 8px;
}
body.catpit .chart-frame iframe {
  flex: 1 1 auto;
  height: 100%;
  min-height: 280px;
  width: 100%;
  border: 0;
  background: transparent;
}
body.catpit .pit-chat {
  flex: 0 0 168px;
  min-height: 0;
  max-height: 168px;
  padding: 6px 8px 8px;
  border-radius: 12px;
}
body.catpit .pit-chat .chat-head { margin-bottom: 4px; }
body.catpit .pit-chat h2 { font-size: 13px; }
body.catpit .pit-chat .chat-log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-bottom: 6px;
}
body.catpit .chat-compose { gap: 4px; }
body.catpit .chat-compose textarea {
  min-height: 0;
  height: 32px;
  padding: 6px 8px;
  margin: 0;
  resize: none;
  border-radius: 8px;
}
body.catpit .chat-row input { padding: 6px 8px; border-radius: 8px; }
body.catpit .chat-row .btn { padding: 6px 10px; font-size: 12px; }
body.catpit .hold-row { margin: 0 0 4px; }
body.catpit .pit-side { gap: 8px; min-height: 0; height: 100%; }
body.catpit .pit-cat { padding: 8px 8px 6px; border-radius: 12px; }
body.catpit .pit-cat img { width: 56px; height: 56px; }
body.catpit .pit-mood { margin-top: 4px; font-size: 10px; }
body.catpit .sound-row { margin-top: 4px; justify-content: center; }
body.catpit .pit-cat .chip { padding: 3px 8px; font-size: 11px; }
body.catpit .pit-mini { padding: 6px 10px; border-radius: 12px; }
body.catpit .pit-mini .kv { padding: 3px 0; font-size: 12px; }
body.catpit .prints {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 8px 10px 6px;
  border-radius: 12px;
}
body.catpit .prints h2 { font-size: 13px; margin-bottom: 4px; }
body.catpit .footer { display: none; }