/* Canada Rocket Bets — casino energy, forecasting bones.
   The visual language is borrowed from casino UI: deep blue, glass, glow,
   image-backed tiles. The hierarchy is not: on every surface the loudest
   element is the probability, not the payout. */

:root {
  --bg-deep:   #060B1A;
  --bg-mid:    #0A1330;
  --glow-a:    rgba(45, 127, 249, .28);
  --glow-b:    rgba(124, 77, 255, .18);

  --panel:     rgba(255, 255, 255, .045);
  --panel-2:   rgba(255, 255, 255, .075);
  --panel-solid: #101A35;
  --line:      rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .06);

  --ink:       #EAF0FF;
  --ink-dim:   #8FA3C8;
  --ink-faint: #64769B;

  --accent:    #2D7FF9;
  --accent-2:  #57A6FF;
  --yes:       #17D093;
  --no:        #FF5B7F;
  --warn:      #FFC246;

  --radius:    14px;
  --radius-lg: 20px;
  --shadow:    0 10px 30px rgba(0, 0, 0, .45);
  --glow:      0 0 0 1px rgba(45, 127, 249, .35), 0 8px 28px rgba(45, 127, 249, .30);
}

* { box-sizing: border-box; }

html { background: var(--bg-deep); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1100px 700px at 12% -10%, var(--glow-a), transparent 60%),
    radial-gradient(900px 600px at 88% 0%, var(--glow-b), transparent 55%),
    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-deep) 55%);
  background-attachment: fixed;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; letter-spacing: -.02em; }
h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: .78rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }

/* ---- chrome ---- */
.topbar { background: rgba(8, 15, 36, .72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar__inner { max-width: 1180px; margin: 0 auto; padding: .7rem 1.2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.brand { font-weight: 800; color: var(--ink); font-size: 1.05rem; display: inline-flex; align-items: center; gap: .55rem; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; color: #fff; }
.logo { display: block; flex: none; color: var(--accent-2); }
.topbar__nav { display: flex; gap: .3rem; align-items: center; }
.topbar__nav > a { padding: .45rem .75rem; border-radius: 99px; color: var(--ink-dim); font-size: .9rem; font-weight: 600; }
.topbar__nav > a:hover { background: var(--panel-2); color: var(--ink); text-decoration: none; }
.topbar__user { margin-left: auto; display: flex; gap: .55rem; align-items: center; font-size: .85rem; }

/* ---- the header on a phone ----
   Six links, a new-bet button, your name, your tab and a sign-out wrapped into
   a five-line wall on every page. They fold into a menu instead — but only once
   navmenu_controller has added .is-collapsible, so with no JavaScript the
   header renders as it always did rather than behind a toggle that cannot
   open. */
.navtoggle { display: none; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .5rem; color: var(--ink); cursor: pointer; }
.burger { display: block; position: relative; width: 18px; height: 14px; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s cubic-bezier(.2,.8,.3,1), opacity .15s ease; }
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 6px; }
.burger i:nth-child(3) { top: 12px; }
.is-open .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-open .burger i:nth-child(2) { opacity: 0; }
.is-open .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .topbar.is-collapsible .topbar__inner { gap: .6rem; }
  .topbar.is-collapsible .navtoggle { display: inline-flex; order: 3; margin-left: auto; }
  .topbar.is-collapsible .topbar__nav { display: none; }
  /* Folded up, the one thing still worth a glance is what you owe. */
  .topbar.is-collapsible .topbar__user { order: 2; margin-left: auto; }
  .topbar.is-collapsible .topbar__user > :not(.tab-chip) { display: none; }

  .topbar.is-collapsible.is-open .topbar__nav,
  .topbar.is-collapsible.is-open .topbar__user {
    display: flex; flex-direction: column; align-items: stretch; width: 100%;
    order: 4; margin-left: 0; gap: .15rem; padding-top: .5rem;
    border-top: 1px solid var(--line);
    animation: menu-in .22s cubic-bezier(.2,.8,.3,1) both;
  }
  .topbar.is-collapsible.is-open .topbar__user { order: 5; gap: .55rem; animation-delay: .05s; }
  .topbar.is-collapsible.is-open .topbar__user > :not(.tab-chip) { display: flex; }
  .topbar.is-collapsible.is-open .topbar__nav > a { padding: .6rem .7rem; font-size: 1rem; }
  .topbar.is-collapsible.is-open .topbar__nav > .btn,
  .topbar.is-collapsible.is-open .topbar__user .btn { width: 100%; text-align: center; }
  .topbar.is-collapsible.is-open .tab-chip { align-self: flex-start; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.whoami { color: var(--ink-dim); font-weight: 600; }
.tab-chip { padding: .32rem .7rem; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line); font-size: .8rem; font-weight: 700; color: var(--ink); }
.tab-chip--up { color: var(--yes); border-color: rgba(23, 208, 147, .4); }
.tab-chip--down { color: var(--no); border-color: rgba(255, 91, 127, .4); }

.page { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.2rem 4rem; }
.footer { max-width: 1180px; margin: 0 auto; padding: 0 1.2rem 2.5rem; color: var(--ink-faint); font-size: .8rem; }

/* ---- surfaces ---- */
.flash { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1.1rem; font-size: .9rem; font-weight: 600; }
.flash--notice { background: rgba(23, 208, 147, .12); border: 1px solid rgba(23, 208, 147, .35); color: #8CF3CE; }
.flash--alert  { background: rgba(255, 91, 127, .12); border: 1px solid rgba(255, 91, 127, .35); color: #FFB3C4; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.15rem; margin-bottom: 1.1rem; backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.muted { color: var(--ink-dim); }
.small { font-size: .85rem; }
.empty { color: var(--ink-dim); padding: 1.6rem; text-align: center; }

.pill { font-size: .72rem; padding: .2rem .6rem; border-radius: 99px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-dim); white-space: nowrap; font-weight: 700; }
.pill--live { color: var(--accent-2); border-color: rgba(45, 127, 249, .45); background: rgba(45, 127, 249, .14); }
.pill--good { color: var(--yes); border-color: rgba(23, 208, 147, .4); background: rgba(23, 208, 147, .12); }
.pill--bad  { color: var(--no); border-color: rgba(255, 91, 127, .4); background: rgba(255, 91, 127, .12); }
.pill--warn { color: var(--warn); border-color: rgba(255, 194, 70, .4); background: rgba(255, 194, 70, .12); }

.side { font-size: .7rem; font-weight: 800; padding: .16rem .5rem; border-radius: 6px; letter-spacing: .06em; }
.side--yes { background: rgba(23, 208, 147, .18); color: var(--yes); }
.side--no  { background: rgba(255, 91, 127, .18); color: var(--no); }

/* ---- controls ---- */
.btn { display: inline-block; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); padding: .55rem .95rem; border-radius: 10px; cursor: pointer; font-size: .88rem; font-weight: 700; font-family: inherit; transition: transform .08s ease, background .15s ease, box-shadow .15s ease; }
/* Something has to give under the finger, or a tap on a slow connection reads
   as a button that did not take. */
.btn:active { transform: translateY(1px) scale(.985); }
.btn:hover { background: rgba(255, 255, 255, .13); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--small { padding: .32rem .7rem; font-size: .8rem; }
.btn--ghost { background: transparent; }
.btn--yes { background: rgba(23, 208, 147, .16); border-color: rgba(23, 208, 147, .45); color: #8CF3CE; }
.btn--no  { background: rgba(255, 91, 127, .16); border-color: rgba(255, 91, 127, .45); color: #FFB3C4; }
.btn--primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: transparent; color: #04122E; box-shadow: var(--glow); }
.btn--primary:hover { background: linear-gradient(180deg, #6FB2FF, #3A8BFF); }
form.button_to { display: inline; }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=file], select, textarea {
  width: 100%; padding: .6rem .75rem; background: rgba(4, 9, 24, .6); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; font: inherit;
  /* Never below 16px. Safari on iOS zooms the whole page in when you focus a
     control smaller than that, and leaves you to pinch your way back out — and
     the body is 15px, so every field in the app did it. This is a hard
     threshold in the browser, not a preference: 15.5px still zooms. */
  font-size: max(16px, 1em);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(45, 127, 249, .25); }
label { display: block; font-size: .8rem; color: var(--ink-dim); margin-bottom: .3rem; font-weight: 600; }
.field { margin-bottom: .9rem; }
.row { display: flex; gap: .9rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 150px; }

.errors { background: rgba(255, 91, 127, .12); border: 1px solid rgba(255, 91, 127, .35); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .88rem; color: #FFB3C4; }
.errors ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* ---- tabs ---- */
.tabs { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.tabs a { padding: .45rem .9rem; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-dim); font-size: .86rem; font-weight: 700; background: var(--panel); }
.tabs a:hover { text-decoration: none; background: var(--panel-2); color: var(--ink); }
.tabs a.is-active { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-color: transparent; color: #04122E; box-shadow: var(--glow); }

/* ---- hero ---- */
.hero { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--line); margin-bottom: 1.8rem; box-shadow: var(--shadow); min-height: 210px; display: flex; align-items: center; }
.hero__art { position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-lg); overflow: hidden; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); background: linear-gradient(100deg, rgba(6, 11, 26, .94) 0%, rgba(6, 11, 26, .80) 46%, rgba(6, 11, 26, .30) 100%); }
.hero__body { position: relative; z-index: 2; padding: 1.5rem 1.6rem; max-width: 640px; }
.hero__eyebrow { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); background: rgba(45, 127, 249, .16); border: 1px solid rgba(45, 127, 249, .4); padding: .25rem .65rem; border-radius: 99px; margin-bottom: .7rem; }
.hero__title { font-size: 1.7rem; font-weight: 800; margin: 0 0 .5rem; letter-spacing: -.025em; }
.hero__title a { color: var(--ink); }
.hero__meta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; color: var(--ink-dim); font-size: .86rem; margin-bottom: .9rem; }
.hero__prob { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }

/* ---- bet tiles ---- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 1rem; }
.tile { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); color: var(--ink); background: var(--panel-solid); box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.tile:hover { transform: translateY(-3px); border-color: rgba(45, 127, 249, .55); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(45, 127, 249, .3); text-decoration: none; }
/* A picture is only there to choose between two cuts of the same art; every
   rule in here is written against the img inside it. */
picture { display: contents; }
.tile__art { aspect-ratio: 1 / 1; position: relative; overflow: hidden; background: var(--bg-mid); }
.tile__art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 9, 24, .55) 0%, rgba(4, 9, 24, .08) 38%, rgba(4, 9, 24, .82) 100%); }
.tile__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; display: block; }
.tile__badges { position: absolute; inset: .6rem .6rem auto .6rem; display: flex; justify-content: space-between; align-items: flex-start; gap: .4rem; z-index: 2; }
.tile__badges .pill { background: rgba(4, 9, 24, .72); backdrop-filter: blur(6px); border-color: rgba(255, 255, 255, .22); color: #fff; }
.tile__badges .pill--warn { color: var(--warn); }
.tile__prob { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; background: rgba(4, 9, 24, .78); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 10px; padding: .3rem .55rem; text-align: right; line-height: 1.05; }
.tile__prob b { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }
.tile__prob span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; }
.tile__body { padding: .8rem .95rem 1rem; }

/* The mark, repeated faintly across the artwork, so every tile is branded
   without a corner badge competing with the title. */
.tile__texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='74' viewBox='0 0 1320 1320'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='86'%3E%3Cpath d='M660 0V475M660 845V1320M0 660H475M845 660H1320'/%3E%3Cpath d='M193 193L530.26 530.26A183.48 183.48 0 0 1 530.26 789.74L193 1127'/%3E%3Cpath d='M1127 193L789.74 530.26A183.48 183.48 0 0 0 789.74 789.74L1127 1127'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 74px 74px; }
.tile__title {
  position: absolute; left: .85rem; right: 4.6rem; bottom: .7rem; z-index: 2;
  font-weight: 800; font-size: 1.02rem; line-height: 1.15; letter-spacing: -.02em;
  text-shadow: 0 2px 10px rgba(4, 9, 24, .95), 0 1px 2px rgba(4, 9, 24, .9);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tile__meta { color: var(--ink-dim); font-size: .78rem; display: flex; gap: .55rem; flex-wrap: wrap; margin-bottom: .6rem; }

/* pool bar */
.poolbar { display: flex; height: 7px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .08); margin-top: .55rem; }
.poolbar__yes { background: linear-gradient(90deg, #17D093, #2BE8AB); transition: width .6s cubic-bezier(.22,.61,.36,1); }
.poolbar__no  { background: linear-gradient(90deg, #FF5B7F, #FF8AA3); transition: width .6s cubic-bezier(.22,.61,.36,1); }
.poollabels { display: flex; justify-content: space-between; font-size: .76rem; margin-top: .35rem; font-weight: 600; gap: .5rem; }
.poollabels--compact { font-size: .74rem; }
.poollabels--compact span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poollabels .y { color: var(--yes); }
.poollabels .n { color: var(--no); }

/* ---- tables ----
   Six or nine columns of numbers do not fit on a phone, and the table was
   simply running off the side of the panel: the leaderboard wanted 657px in a
   352px screen, so a third of it was unreachable and the whole page scrolled
   sideways. Each table scrolls inside its own panel instead, with the person's
   name pinned to the left so you can still tell whose row you are reading. */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--ink-faint); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; padding: .4rem .55rem; }
td { padding: .55rem .55rem; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.win { color: var(--yes); }
.lose { color: var(--no); }

/* ---- feed ---- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: .75rem; padding: .7rem .2rem; border-top: 1px solid var(--line-soft); }
.feed li:first-child { border-top: 0; }
.feed__icon { width: 1.5rem; text-align: center; }
.feed__body { flex: 1; }
.feed__when { color: var(--ink-faint); font-size: .76rem; }

/* ---- comments ---- */
.comment { padding: .65rem 0; border-top: 1px solid var(--line-soft); }
.comment:first-child { border-top: 0; }
.comment__who { font-weight: 700; font-size: .88rem; }
.comment__when { color: var(--ink-faint); font-size: .76rem; margin-left: .4rem; }

.auth { max-width: 400px; margin: 3rem auto; }
.split { display: grid; grid-template-columns: 1fr 330px; gap: 1.2rem; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .topbar__user { margin-left: 0; } }

@media (max-width: 720px) {
  table { font-size: .84rem; }
  th, td { padding: .45rem .5rem; }
  /* Whatever is in the first column identifies the row, so it stays put while
     the rest scrolls under it. It has to be opaque or the columns passing
     behind read straight through — and since the panel is a translucent wash
     over a gradient, no fixed colour matches it. So rather than fail to match,
     it is a frozen gutter on purpose: a shade back, with an edge. */
  .table-wrap th:first-child, .table-wrap td:first-child, .table-wrap .rowkey {
    position: sticky; left: 0; z-index: 1;
    background: var(--bg-mid); border-right: 1px solid var(--line);
  }
  /* Unless the table names its key column, in which case that one stays and
     the leftmost does not. The leaderboard begins with the rank, and a pinned
     "3" tells you nothing while the name it belongs to scrolls away. */
  .table-wrap:has(.rowkey) th:first-child, .table-wrap:has(.rowkey) td:first-child {
    position: static; background: none; border-right: 0;
  }
  /* Only the figures refuse to wrap. Holding every cell on one line made the
     leaderboard half as wide again — 998px against 657px — which is more
     sideways scrolling, not less. Prose wraps; "$12.00" and "Sep 2026" do not. */
  .table-wrap .num, .table-wrap .nowrap { white-space: nowrap; }
  .table-wrap td:first-child { min-width: 7.5rem; }
}

/* ---- price ---- */
.odds { font-size: .78rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
/* The bet page's price history. Everything is drawn from the palette above, so
   there is no second set of chart colours to keep in step. preserveAspectRatio
   is off in the markup, which lets the SVG stretch to the panel's width while
   the viewBox keeps the geometry honest. */
/* Only the plot is stretched to the column. Anything with a size of its own --
   type, dots, the gutter -- is HTML laid over it, or a 660-unit viewBox in a
   200px column squashes it to a third of its width. */
.price-chart { position: relative; padding: 0 0 20px 38px; }
.price-chart__plot { position: relative; height: 240px; }
.price-chart__plot > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.price-chart__label { position: absolute; font-size: .69rem; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }
.price-chart__ylabel { left: 0; width: 32px; text-align: right; transform: translateY(-50%); }
.price-chart__from { left: 38px; bottom: 0; }
.price-chart__to { right: 0; bottom: 0; }
.price-chart__grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.price-chart__grid--half { stroke-dasharray: 3 4; }
.price-chart__line { stroke: var(--accent-2); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.price-chart__premarket { stroke: var(--ink-faint); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.price-chart__area { fill: var(--accent); opacity: .12; }
.price-chart__now { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 99px; background: var(--accent-2); }
/* A hit area wide enough to hover on a trackpad, with the rule down its spine. */
.price-chart__mark { position: absolute; top: 0; bottom: 0; width: 15px; margin-left: -7.5px; }
.price-chart__mark::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; border-left: 1px dashed currentColor; opacity: .5; }
.price-chart__mark::after { content: ""; position: absolute; left: 7px; bottom: 10px; width: 7px; height: 7px; margin: 0 0 -3.5px -3.5px; border-radius: 99px; background: currentColor; opacity: .9; }
.price-chart__mark--yes { color: var(--yes); }
.price-chart__mark--no  { color: var(--no); }
.price-chart__mark:hover::before { opacity: 1; border-left-style: solid; }
.chart-legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .76rem; color: var(--ink-dim); margin-top: .5rem; }
.chart-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: .35rem; vertical-align: baseline; }
.chart-legend .is-yes::before { background: var(--yes); }
.chart-legend .is-no::before { background: var(--no); }
.chart-legend .is-price::before { background: var(--accent-2); }
.chart-legend .is-premarket::before { background: var(--ink-faint); }
.chart-legend .muted::before { display: none; }

/* One row per bettor, so correcting a stake needs no "pick who" step first.
   The shared .row gives every field a 150px floor and an equal share, which
   turned each bettor into three stacked lines; here the fields are only as
   wide as what goes in them. */
.amend + .amend { border-top: 1px solid var(--line-soft); padding-top: .55rem; margin-top: .55rem; }
.amend .row { align-items: end; gap: .55rem; }
.amend .row > * { flex: 0 0 auto; min-width: 0; margin-bottom: 0; }
.amend .row > *:first-child { flex: 1 1 7rem; }
.amend label { font-size: .7rem; margin-bottom: .15rem; }
.amend input[type=text] { width: 4.5rem; }
.amend select { width: auto; padding-right: 1.6rem; }

/* ---- leaderboard ----
   A bar for the one number in the row you would otherwise have to parse: how
   far past a coin flip this person is. It grows on arrival, staggered down the
   table, and the rank arrows drift in from the direction they moved. */
/* Centred on the coin flip: right of the line is better than saying "50/50"
   to everything, left of it is worse. A one-sided bar left most of the table
   looking like missing data, when in fact it was the answer. */
.calbar { position: relative; display: block; height: 5px; margin-top: .3rem; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.calbar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.calbar__fill { position: absolute; top: 0; bottom: 0; border-radius: 99px;
                animation: grow-bar .7s cubic-bezier(.2,.8,.3,1) both; }
.calbar__fill--better { left: 50%; transform-origin: left center; background: linear-gradient(90deg, var(--accent-2), var(--yes)); }
.calbar__fill--worse { right: 50%; transform-origin: right center; background: linear-gradient(270deg, var(--no), #FF8AA3); }
@keyframes grow-bar { from { transform: scaleX(0); } }
.move-mark { display: inline-block; animation: drift-in .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes drift-in { from { opacity: 0; } }
.move-mark--up   { animation-name: drift-up; }
.move-mark--down { animation-name: drift-down; }
@keyframes drift-up   { from { opacity: 0; transform: translateY(5px); } }
@keyframes drift-down { from { opacity: 0; transform: translateY(-5px); } }

/* ---- leaderboard honours ---- */
.honours { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; }
.honour { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; display: flex; flex-direction: column; gap: .35rem; }
.honour__label { font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); }

/* ---- your call against the room's ---- */
.callgap { margin-top: .8rem; padding: .6rem .7rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2); }
.callgap__row { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .86rem; margin-bottom: .2rem; }
.callgap--bolder { border-color: rgba(23, 208, 147, .45); }
.callgap--shyer  { border-color: rgba(255, 194, 70, .45); }
.callgap--level  { border-color: var(--line); }

/* ---- streak flair on a chip ---- */
.flair { font-size: .78rem; margin-left: .25rem; vertical-align: baseline; display: inline-block; }

/* ============================================================================
   Motion.
   Everything here is CSS and SVG. The art set is served as <img> on purpose --
   the files share gradient ids and two inlined on one page would collide -- so
   the tiles cannot be animated in place. What can be animated is what is
   already inline: the chart, the avatars, the bar. That is also why there is no
   animation library here: a Lottie file would arrive from a different hand than
   the flat art, and weigh more than everything below put together.
   ========================================================================= */

/* The price line draws itself left to right, and the stake ticks arrive behind
   it. Only on a real page load -- the fifteen-second poll re-renders this panel
   and redrawing every time would be a tic rather than a flourish. */
.price-chart--draw .price-chart__line {
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  animation: draw-line 1.1s cubic-bezier(.33,.9,.35,1) forwards;
}
/* Its own keyframe: the shared fade-in ends at 1, which was overriding the
   area's 12% and leaving the fill solid on every page load that animated. */
.price-chart--draw .price-chart__area { opacity: 0; animation: fade-in-area .5s .7s ease forwards; }
.price-chart--draw .price-chart__premarket { opacity: 0; animation: fade-in .5s .3s ease forwards; }
.price-chart--draw .price-chart__now  { opacity: 0; animation: pop-in .35s 1.0s cubic-bezier(.2,1.6,.4,1) forwards; }
.price-chart--draw .price-chart__mark { opacity: 0; animation: fade-in .4s .75s ease forwards; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-in   { to { opacity: 1; } }
@keyframes fade-in-area { to { opacity: .12; } }
@keyframes pop-in    { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

/* Settling up: the row rules itself off and leaves, and lands lit in "Squared
   up" on the other side of the redirect. */
tr.is-settling > td { animation: settle-out .38s cubic-bezier(.4,0,.7,.2) both; }
@keyframes settle-out {
  0%   { text-decoration-color: transparent; }
  30%  { text-decoration-color: currentColor; opacity: 1; }
  100% { text-decoration-color: currentColor; opacity: 0; transform: translateX(26px); }
}
tr.is-settling > td { text-decoration: line-through; }

/* A stake landing: the row arrives lit and settles. */
@keyframes land {
  0%   { background: rgba(45, 127, 249, .28); }
  100% { background: transparent; }
}
tr.is-new > td { animation: land 2.2s ease-out; }
tr.is-mine > td { animation: land 2.6s ease-out; }

/* A bet is dealt onto the table rather than simply being there. */
@keyframes deal-in {
  from { opacity: 0; transform: translateY(18px) rotate(-1.2deg) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.is-dealt { animation: deal-in .55s cubic-bezier(.2,.8,.3,1) both; }

/* The grid deals itself out: the same gesture a newly-opened bet makes, run
   across the shelf. Only the first dozen are staggered — past that the delay
   would be longer than anyone waits, and the rest arrive together.

   Not on a restore. Going back should put the page back as it was rather than
   dealing it again; view_transitions.js sets the flag. */
.tile-grid > * { animation: deal-in .42s cubic-bezier(.2,.8,.3,1) both; }
  .tile-grid > *:nth-child(1) { animation-delay: 0.0s; }
  .tile-grid > *:nth-child(2) { animation-delay: 0.03s; }
  .tile-grid > *:nth-child(3) { animation-delay: 0.06s; }
  .tile-grid > *:nth-child(4) { animation-delay: 0.09s; }
  .tile-grid > *:nth-child(5) { animation-delay: 0.12s; }
  .tile-grid > *:nth-child(6) { animation-delay: 0.15s; }
  .tile-grid > *:nth-child(7) { animation-delay: 0.18s; }
  .tile-grid > *:nth-child(8) { animation-delay: 0.21s; }
  .tile-grid > *:nth-child(9) { animation-delay: 0.24s; }
  .tile-grid > *:nth-child(10) { animation-delay: 0.27s; }
  .tile-grid > *:nth-child(11) { animation-delay: 0.3s; }
  .tile-grid > *:nth-child(12) { animation-delay: 0.33s; }
  .tile-grid > *:nth-child(n+13) { animation-delay: .36s; }
html[data-restored] .tile-grid > * { animation: none; }

/* ---- between pages ----
   The default cross-fade, slowed a touch, and a longer, softer curve for the
   artwork that is carried across. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
::view-transition-group(bet-art) {
  animation-duration: .44s; animation-timing-function: cubic-bezier(.2,.8,.3,1);
}
/* The blanket reduced-motion rule below cannot reach these: they are
   pseudo-elements on a tree of their own. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Form: a run people are having is allowed to flicker. */
/* Twice, and then still. On a page of eight names, eight emoji pulsing for
   ever is a page that will not sit still to be read; the point is to catch the
   eye on arrival, not to keep asking for it. */
@keyframes ember { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.18) rotate(-6deg) } }
.flair { animation: ember 1.5s ease-in-out 2; }

/* Faces lift very slightly when you point at the person. */
.user-chip .avatar { transition: transform .15s cubic-bezier(.2,.9,.3,1); }
.user-chip:hover .avatar { transform: translateY(-2px) scale(1.08); }

/* Winning is worth a moment. Pieces are placed by the server from the bet's own
   id, so the burst is the same every time that page is opened rather than
   jittering on each render. */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti i {
  position: absolute; top: -12vh; width: 9px; height: 14px; border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  0%   { opacity: 0; transform: translateY(-10vh) rotate(0deg); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translateY(112vh) rotate(720deg); }
}

/* The number rolls to meet the bar rather than snapping past it. */
.prob-big { font-variant-numeric: tabular-nums; }

/* People who ask for less motion mean it, and a casino theme is exactly what
   that setting is for. Everything above becomes an instant state change. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .confetti { display: none; }
}
.prob { font-variant-numeric: tabular-nums; }
.prob-big { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.delta-up { color: var(--yes); font-weight: 700; }
.delta-down { color: var(--no); font-weight: 700; }

/* ---- start a bet ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.page-head h1 { margin: 0; }
.starter { padding: 0; margin-bottom: 1.2rem; }
.starter > summary { padding: .9rem 1.15rem; cursor: pointer; list-style: none; user-select: none; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; font-size: .95rem; }
.starter > summary::-webkit-details-marker { display: none; }
.starter > summary::before { content: "＋"; color: var(--accent-2); font-weight: 800; margin-right: .2rem; }
.starter[open] > summary::before { content: "－"; }
.starter > summary:hover { background: var(--panel-2); border-radius: var(--radius-lg); }
.starter__body { padding: 0 1.15rem 1.15rem; border-top: 1px solid var(--line); }
.starter__body h3:first-child { margin-top: 1rem; }

/* ---- artwork picker ---- */
.art-preview { height: 104px; border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: .6rem; }

/* ---- a single bet, led by its artwork ---- */
.bet-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); margin-bottom: 1.1rem; box-shadow: var(--shadow); min-height: 260px; display: flex; align-items: flex-end; }
.bet-hero__art { position: absolute; inset: 0; z-index: 0; background: var(--bg-mid); }
.bet-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bet-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 11, 26, .45) 0%, rgba(6, 11, 26, .88) 65%, rgba(6, 11, 26, .96) 100%); }
.bet-hero__body { position: relative; z-index: 3; padding: 1.3rem 1.4rem; width: 100%; max-width: calc(100% - 9rem); }
.bet-hero__badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .55rem; }
.bet-hero__body h1 { font-size: 1.55rem; margin: 0 0 .5rem; }
.bet-hero__meta { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--ink-dim); font-size: .85rem; }

/* ---- avatars ---- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 800; letter-spacing: -.02em;
  flex: none; line-height: 1; user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .35);
}
.user-chip { display: inline-flex; align-items: center; gap: .5rem; }
.user-chip > span:last-child { line-height: 1.2; }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { margin-left: -8px; transition: margin-left .18s cubic-bezier(.2,.9,.3,1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 2px var(--bg-deep); }
/* Overlapped they read as "some people"; fanned out they read as who. */
.tile:hover .avatar-stack .avatar, .avatar-stack:hover .avatar { margin-left: -1px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.whoami { display: inline-flex; align-items: center; gap: .45rem; }
.comment__head { display: flex; gap: .65rem; align-items: flex-start; }
.comment__body p { margin: .3rem 0 0; }
.feed__icon { display: flex; align-items: center; justify-content: center; }

/* ---- brand ---- */
.brand-mark { display: flex; justify-content: center; padding: .4rem 0 1rem; color: var(--accent-2); opacity: .9; }
.brand-mark svg { filter: drop-shadow(0 6px 18px rgba(45, 127, 249, .45)); }

.hero { padding-right: 0; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: .4rem; }

/* The mark, quietly repeated as a texture behind the hero. */
.hero__art::after { content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 1320 1320'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='86'%3E%3Cpath d='M660 0V475M660 845V1320M0 660H475M845 660H1320'/%3E%3Cpath d='M193 193L530.26 530.26A183.48 183.48 0 0 1 530.26 789.74L193 1127'/%3E%3Cpath d='M1127 193L789.74 530.26A183.48 183.48 0 0 0 789.74 789.74L1127 1127'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 90px 90px; opacity: .55; }

/* ---- avatars ---- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-weight: 800; letter-spacing: -.02em;
  flex: none; line-height: 1; user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .35);
}
.user-chip { display: inline-flex; align-items: center; gap: .5rem; }
.user-chip > span:last-child { line-height: 1.2; }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { margin-left: -8px; transition: margin-left .18s cubic-bezier(.2,.9,.3,1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 2px var(--bg-deep); }
/* Overlapped they read as "some people"; fanned out they read as who. */
.tile:hover .avatar-stack .avatar, .avatar-stack:hover .avatar { margin-left: -1px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.whoami { display: inline-flex; align-items: center; gap: .45rem; }
.comment__head { display: flex; gap: .65rem; align-items: flex-start; }
.comment__body p { margin: .3rem 0 0; }
.feed__icon { display: flex; align-items: center; justify-content: center; }


@media (prefers-reduced-motion: reduce) {
}
.avatar { overflow: hidden; padding: 0; }
.avatar .character { width: 100%; height: 100%; display: block; }

/* ---- supplied artwork ---- */

/* The hero's own bet, as the portrait tile it wears in the grid. */
.hero__card { position: absolute; right: 2.2rem; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 132px; height: 176px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 38px rgba(0, 0, 0, .55); }
.hero__card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bet-hero__card { position: absolute; right: 1.6rem; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 124px; height: 165px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 38px rgba(0, 0, 0, .55); }
.bet-hero__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .bet-hero__card { display: none; } }
@media (max-width: 900px) { .hero__card { display: none; } }

.art-icon { display: block; border-radius: 22%; flex: none; }

.page-banner { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.page-banner h1 { margin: 0 0 .2rem; }
.page-banner p { margin: 0; max-width: 62ch; }

.empty__art { display: flex; justify-content: center; padding: .2rem 0 .9rem; }

/* What the generated tile could be, on the form. */
.art-preview { display: flex; gap: .4rem; height: 104px; border: 0; padding: 0; }
.art-preview img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; object-position: center 46%;
  border-radius: 10px; border: 1px solid var(--line); opacity: .82; }

/* Three landscape cards under the sign-in box. */
.promo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem;
  max-width: 760px; margin: 1.6rem auto 0; }
.promo-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--panel-solid); box-shadow: var(--shadow); }
.promo-card img { width: 100%; height: auto; aspect-ratio: 420 / 300; object-fit: cover; display: block; }
.promo-card__body { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; gap: .15rem; }

/* A panel that opens with a strip of artwork, bled to its edges. */
.panel--banner { padding-top: 0; overflow: hidden; }
.panel__banner { display: block; width: calc(100% + 2.3rem); margin: 0 -1.15rem 1rem;
  height: auto; aspect-ratio: 828 / 230; object-fit: cover; }

.tab-chip .art-icon { margin-right: .35rem; vertical-align: -3px; display: inline-block; }