/* LASSO - brand: deep navy arena, neon land, warm coral→gold accent. */
:root {
  --navy-900: #070b17;
  --navy-800: #0a0f1f;
  --navy-700: #111a35;
  --navy-600: #1a2547;
  --ink: #eef2ff;
  --ink-dim: #9aa6c9;
  --coral: #ff4d6d;
  --gold: #ffd23f;
  --mint: #5ef1c9;
  --accent: linear-gradient(135deg, #ff4d6d, #ff9f43 55%, #ffd23f);
  --radius: 18px;
  --shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--navy-800); color: var(--ink); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
button, input { font-family: inherit; }
.hidden { display: none !important; }

#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; cursor: crosshair; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 1; pointer-events: none; padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; }
.panel { background: rgba(10, 15, 31, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; }
.hud-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; }
.stat-panel { padding: 10px 16px; justify-self: start; min-width: 140px; }
.stat-big { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.stat-big .unit { font-size: 20px; color: var(--ink-dim); margin-left: 2px; }
.stat-sub { color: var(--ink-dim); font-size: 13px; margin-top: 4px; }
.timer-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.timer { font-size: 30px; font-weight: 800; padding: 6px 22px; letter-spacing: 1px; font-variant-numeric: tabular-nums; transition: color .2s, border-color .2s; }
.timer.word { font-size: 20px; letter-spacing: 3px; }
.timer.cinch { color: var(--coral); border-color: rgba(255, 77, 109, .5); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.round-label { font-size: 11px; letter-spacing: 3px; color: var(--ink-dim); font-weight: 600; }
.leaderboard { justify-self: end; padding: 8px 12px; min-width: 200px; font-size: 13px; }
/* five fixed columns so every row lines up: rank, color chip, name, cows, land */
.leaderboard .row { display: grid; grid-template-columns: 22px 18px minmax(40px, 1fr) 40px 40px; gap: 6px; align-items: center; padding: 4px 2px; border-radius: 8px; }
.leaderboard .rank { text-align: center; }
.leaderboard .chip { width: 12px; height: 12px; border-radius: 4px; justify-self: center; }
/* a bot's face sits in the chip column, so faces and color chips line up down the board */
.leaderboard .chip.face { width: 18px; height: 18px; border-radius: 0; background: none; display: inline-flex; align-items: center; justify-content: center; }
.leaderboard .chip.face img.bot-ic { width: 18px; height: 18px; margin: 0; vertical-align: middle; }
.leaderboard .pct { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; text-align: right; }
.leaderboard .pv { text-align: right; }
.leaderboard .cows { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; font-size: 11px; font-weight: 700; color: var(--ink-dim); }
.leaderboard .cows.rare { color: var(--gold); }
.leaderboard .lb-cow { width: 16px; height: 16px; }
.leaderboard .follow { display: none; width: 14px; height: 14px; color: var(--ink-dim); opacity: .5; }
body.spectating .leaderboard .follow { display: block; }
body.spectating .leaderboard .row:hover .follow { opacity: 1; color: var(--ink); }
body.spectating .leaderboard .row.following { background: rgba(255, 210, 63, .1); }
body.spectating .leaderboard .row.following .follow { opacity: 1; color: var(--gold); }
.leaderboard .row.me { background: rgba(255, 255, 255, .08); }
.leaderboard .rank { color: var(--ink-dim); font-weight: 600; font-size: 12px; }
.leaderboard .chip { width: 12px; height: 12px; border-radius: 4px; }
.leaderboard .chip.hidden { display: none; }
.leaderboard .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.bot-ic { width: 18px; height: 18px; vertical-align: -4px; margin-right: 3px; }
.bot-ic.big { width: 26px; height: 26px; vertical-align: -8px; margin: 0 2px; }
.leaderboard .name img.bot-ic { margin-left: 0; margin-right: 3px; width: 18px; height: 18px; vertical-align: -4px; }
.leaderboard .pct { font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.leaderboard .crown { margin-left: 4px; width: 18px; height: auto; vertical-align: -3px; }

.hud-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 12px; }
.snap-wrap { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.snap-btn { position: relative; width: 68px; height: 68px; border-radius: 50%; border: none; background: var(--navy-700); color: var(--ink-dim); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); transition: transform .1s, color .2s; }
.snap-ic { width: 44px; height: 44px; filter: grayscale(1) brightness(.55); transition: filter .2s, transform .2s; }
.snap-btn.ready .snap-ic { filter: none; transform: scale(1.12); animation: snappulse 1.4s infinite; }
@keyframes snappulse { 0%, 100% { transform: scale(1.08); } 50% { transform: scale(1.2); } }
.snap-btn:active { transform: scale(.94); }
.snap-btn.ready { color: #fff; background: #1f2b55; animation: glow 1.4s infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, .0), 0 8px 24px rgba(0, 0, 0, .4); } 50% { box-shadow: 0 0 0 10px rgba(255, 210, 63, .18), 0 8px 24px rgba(0, 0, 0, .4); } }
.snap-ring { position: absolute; inset: -4px; border-radius: 50%; padding: 4px; background: conic-gradient(var(--gold) calc(var(--p, 0) * 1turn), rgba(255, 255, 255, .08) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); transition: --p .15s; }
.snap-label { font-size: 12px; color: var(--ink-dim); line-height: 1.3; }
.snap-label b { display: block; color: var(--ink); letter-spacing: 2px; }
.key { font-size: 10px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px; padding: 0 5px; }
.feed { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; font-size: 13px; min-height: 60px; }
.feed .item { background: rgba(10, 15, 31, .6); border-radius: 999px; padding: 3px 12px; animation: feedin .25s ease-out; opacity: .95; }
.feed .item.fade { opacity: 0; transition: opacity .6s; }
@keyframes feedin { from { transform: translateY(8px); opacity: 0; } }
.feed b { font-weight: 700; }
#minimap { width: 140px; height: 140px; border-radius: 12px; background: rgba(10, 15, 31, .7); border: 1px solid rgba(255, 255, 255, .1); image-rendering: pixelated; }

.announce { position: absolute; top: 22%; left: 0; right: 0; text-align: center; font-size: 46px; font-weight: 800; letter-spacing: 2px; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); opacity: 0; transform: scale(.9); transition: opacity .25s, transform .25s; pointer-events: none; }
.announce.show { opacity: 1; transform: scale(1); }
.announce small { display: block; font-size: 16px; letter-spacing: 4px; color: var(--ink-dim); font-weight: 600; margin-top: 4px; }
/* the hand's version: a small word high on the field, out of the way of the ride */
.announce.lite { font-size: 22px; top: 15%; letter-spacing: 3px; opacity: 0; }
.announce.lite.show { opacity: .85; }
.announce small:empty { display: none; }
@media (max-width: 720px) { .announce.lite { font-size: 17px; top: 17%; } }
.cinch-banner { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); font-weight: 800; letter-spacing: 6px; color: var(--coral); font-size: 14px; padding: 6px 18px; border: 1px solid rgba(255, 77, 109, .5); border-radius: 999px; background: rgba(255, 77, 109, .1); animation: pulse 1s infinite; }
.humans-pill { font-size: 11px; color: var(--ink-dim); letter-spacing: .5px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); margin-right: 6px; animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .5; } }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(10, 15, 31, .35), rgba(7, 11, 23, .85)); animation: fadein .35s; overflow-y: auto; }
@keyframes fadein { from { opacity: 0; } }
.card { --cpx: 32px; background: rgba(13, 19, 40, .96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 26px; box-shadow: var(--shadow); padding: 30px 32px; width: min(440px, 100%); text-align: center; }
.logo { margin: 0; display: flex; justify-content: center; }
.logo-img { width: min(100%, 360px); height: auto; filter: drop-shadow(0 10px 24px rgba(255, 110, 80, .35)); }
/* the tagline tucks under the letters of the mark, left, on the mark's own footprint: it takes no line of its own */
.logo-wrap { position: relative; width: min(100%, 360px); margin: 0 auto 6px; }
.logo-wrap .logo-img { width: 100%; }
.tagline { position: absolute; left: 4%; bottom: 2px; margin: 0; font-size: 14px; letter-spacing: 1.5px; color: var(--ink-dim); font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
@media (max-width: 480px) { .logo-wrap { width: 300px; } .tagline { font-size: 12px; letter-spacing: 1.2px; } }
.tagline em { color: var(--ink); font-style: normal; }
.live-pill { display: inline-flex; align-items: center; font-size: 12px; color: var(--ink-dim); background: rgba(255, 210, 63, .08); border: 1px solid rgba(255, 210, 63, .25); border-radius: 999px; padding: 4px 12px 4px 10px; margin-bottom: 18px; }
#joinForm { display: flex; flex-direction: column; gap: 10px; }
#nameInput { width: 100%; font-size: 20px; font-weight: 600; text-align: center; padding: 14px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: var(--ink); outline: none; transition: border-color .2s; }
#nameInput:focus, #codeInput:focus { border-color: var(--gold); }
.play-btn { position: relative; width: 100%; font-size: 26px; font-weight: 800; letter-spacing: 4px; padding: 16px 40px; color: #2a0b12; cursor: pointer; background: transparent; border: 0 solid transparent; border-image: url(brand/button-1x.png) 0 111 fill / 0 40px / 0 stretch; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); filter: drop-shadow(0 10px 22px rgba(255, 110, 80, .35)); transition: transform .1s, filter .2s; }
.play-btn:hover { transform: translateY(-2px); filter: drop-shadow(0 14px 28px rgba(255, 110, 80, .5)) brightness(1.06); }
.play-btn:active { transform: translateY(1px); }
.play-btn.offline { filter: grayscale(.85) brightness(.75); cursor: default; letter-spacing: 2px; font-size: 20px; }   /* no line: the button says so, in grey, until the line is back */
.play-btn.offline .sub { letter-spacing: 0; text-transform: none; }
.play-btn .sub { display: block; font-size: 11px; letter-spacing: 1px; font-weight: 600; opacity: .75; margin-top: 2px; }
.ghost-btn { flex: 1; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; }
.ghost-btn:hover { background: rgba(255, 255, 255, .12); }
.link-btn { background: none; border: none; color: var(--gold); cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.howto { list-style: none; padding: 0; margin: 22px 0 8px; display: grid; gap: 8px; text-align: left; font-size: 13.5px; color: var(--ink-dim); }
.howto b { color: var(--ink); }
.howto li { display: flex; gap: 12px; align-items: center; }
.howto .ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--navy-600); color: var(--gold); font-size: 17px; font-weight: 700; }
.fineprint { font-size: 11px; color: rgba(154, 166, 201, .7); margin: 12px 0 0; line-height: 1.5; }

.death-card { padding-top: 26px; }
.death-title { font-size: 40px; font-weight: 800; letter-spacing: 2px; }
.death-by { color: var(--ink-dim); margin: 4px 0 18px; font-size: 15px; }
.death-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.death-stats div { background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 10px 6px; }
.death-stats b { display: block; font-size: 22px; font-weight: 800; }
.death-stats span { font-size: 11px; color: var(--ink-dim); letter-spacing: 1px; text-transform: uppercase; }
.death-links { margin-top: 12px; font-size: 13px; color: var(--ink-dim); }

.podium-title { font-size: 14px; letter-spacing: 6px; color: var(--ink-dim); font-weight: 700; margin-bottom: 14px; }
.podium { display: grid; gap: 8px; text-align: left; }
.podium .p { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border-left: 6px solid var(--c, #fff); }
.podium .p.first { background: rgba(255, 210, 63, .12); }
.podium .medal { font-size: 24px; }
.podium .pn { font-weight: 700; font-size: 17px; }
.podium .pn .bot-ic { width: 22px; height: 22px; vertical-align: -5px; }
.podium .ps { color: var(--ink-dim); font-size: 12px; }
.podium .pp { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.next-round { margin-top: 16px; color: var(--ink-dim); font-size: 14px; }

.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--navy-600); padding: 10px 18px; border-radius: 999px; font-size: 14px; box-shadow: var(--shadow); z-index: 10; }
.mute-btn { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 14px; z-index: 5; background: rgba(10, 15, 31, .6); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; width: 36px; height: 36px; cursor: pointer; font-size: 16px; display: none; }
body.playing .mute-btn { display: block; top: auto; right: 14px; bottom: calc(14px + 140px + 8px + 44px); }   /* stacked above the minimap, with the ranch button */

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  /* phones: three small panels on the first row, and everything else (round, teams, corral, riders) on a second row
     under them, so nothing sits on top of anything */
  .hud-top { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-auto-rows: auto; gap: 6px 8px; align-items: start; }
  .timer-wrap { display: contents; }
  .timer { grid-column: 2; grid-row: 1; font-size: 18px; padding: 4px 9px; justify-self: center; }
  .round-label, .team-bar, .practice-pill, .corral-chip, .party-chip, .humans-pill { grid-column: 1 / -1; grid-row: auto; justify-self: center; margin-top: 0; }
  .round-label { font-size: 9px; letter-spacing: 2px; }
  .team-bar { padding: 3px 10px; font-size: 11px; gap: 6px; }
  .team-bar b { font-size: 14px; }
  .team-bar .tb-flag { width: 18px; height: 18px; }
  .corral-chip, .party-chip { padding: 3px 8px 3px 10px; font-size: 11px; }
  .humans-pill { font-size: 10px; }
  .stat-big { font-size: 24px; letter-spacing: 0; }
  .stat-big .unit { font-size: 13px; }
  .stat-panel { min-width: 0; max-width: 100%; overflow: hidden; padding: 6px 8px; grid-column: 1; grid-row: 1; }
  .stat-sub { font-size: 10.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-wallet { font-size: 12px; gap: 2px 8px; margin-top: 3px; flex-wrap: wrap; }   /* the +take can push Gold onto its own line instead of off the panel */
  .hud-wallet .ic.art { width: 16px; height: 16px; }
  .hud-wallet .take { font-size: 10px; }
  .hud-wallet span { flex-wrap: wrap; }
  .leaderboard { min-width: 144px; width: auto; max-width: 100%; font-size: 11px; padding: 5px 4px; grid-column: 3; grid-row: 1; justify-self: end; }
  /* the name always gets room: medal, chip or face, then at least a few letters, then the number */
  .leaderboard .row { gap: 3px; grid-template-columns: 16px 16px minmax(40px, 1fr) 24px minmax(30px, auto); }   /* the last column grows for "12 head" */
  .leaderboard .chip.face, .leaderboard .chip.face img.bot-ic { width: 16px; height: 16px; }
  body.lesson .leaderboard { display: none; }   /* a lesson is one rider and a tutor: the board would only crowd the label */
  .timer { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .timer.word { font-size: 11px; letter-spacing: .5px; padding: 6px 5px; }   /* a word in the clock's pill (ROUNDUP) sits between the panel and the board without hiding under either */
  body.lesson .timer { max-width: none; font-size: 15px; }   /* the lesson's name has the row to itself */
  .leaderboard .chip { width: 10px; height: 10px; }
  .leaderboard .cows { font-size: 10px; } .leaderboard .lb-cow { width: 13px; height: 13px; }
  .leaderboard .rank .lb-medal { width: 16px; height: 16px; }
  .leaderboard .name img.bot-ic { width: 16px; height: 16px; margin-right: 2px; vertical-align: -3px; }
  .leaderboard .chip { width: 10px; height: 10px; }
  .leaderboard .row:nth-child(n+4) { display: none; }
  #minimap { width: 90px; height: 90px; }
  .snap-btn { width: 76px; height: 76px; }
  .snap-label { display: none; }
  .announce { font-size: 26px; top: 20%; }
  .announce small { font-size: 12px; letter-spacing: 3px; }
  .card { --cpx: 18px; padding: 22px 18px; border-radius: 20px; }
  .logo-img { width: 300px; }
  .howto { font-size: 12.5px; }
  .death-stats b { font-size: 18px; }
  body.playing .mute-btn { bottom: calc(14px + 90px + 8px + 44px); }
  .humans-pill { display: none !important; }
}

/* subtle vignette focuses the eye on the head */
#hud { background: radial-gradient(ellipse at center, transparent 50%, rgba(7, 11, 23, .5)); }

/* ---------- Party ---------- */

/* the corral chip in the HUD */
.party-chip { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 5px 10px 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .35); background: rgba(10, 15, 31, .72); color: var(--ink-dim); font-size: 11px; font-weight: 600; letter-spacing: .5px; cursor: pointer; }
.party-chip:hover { background: rgba(255, 210, 63, .12); }
.party-chip .code { color: var(--gold); letter-spacing: 3px; font-size: 13px; font-weight: 800; }
.party-chip .inv { color: var(--ink); }
@media (max-width: 720px) { .inv-code { font-size: 44px; letter-spacing: 10px; } .inv-qr { width: 160px; height: 160px; } }

/* ---------- Locker / cosmetics ---------- */
.style-btn { width: 100%; margin-top: 8px; }
.record { font-size: 12px; color: var(--ink-dim); margin: 10px 0 0; }
/* the closed test: a rider in the app with no email yet is asked for the one they signed up with */
.tester-nudge { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .08); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tester-nudge img { width: 36px; height: 36px; flex: none; }
.tester-nudge b { display: block; font-size: 14px; color: var(--gold); }
.tester-nudge small { display: block; font-size: 11px; color: var(--ink-dim); line-height: 1.3; }
/* the ride streak strip on the home card, and its calendar card */
.streak-strip { --fire: 64px; position: relative; display: grid; grid-template-columns: calc(var(--fire) * 0.9) 1fr; grid-template-rows: auto auto; align-items: center; align-content: center; column-gap: 10px; row-gap: 2px; width: 100%; min-height: 66px; margin: 14px 0 0; padding: 10px 14px 10px 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: visible; }
/* the campfire stands on the strip's floor and grows with the streak; a big one burns up out of the box */
.streak-strip img { position: absolute; left: calc(var(--fire) * 0.45 + 8px); bottom: 8px; width: var(--fire); height: var(--fire); transform: translateX(-50%); pointer-events: none; }
.streak-strip .ss-main { grid-column: 2; display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.streak-strip .ss-main b { font-size: 26px; font-weight: 800; line-height: 1; color: #ff9f43; }
.streak-strip .ss-main small { font-size: 14px; color: var(--ink); font-weight: 700; }
.streak-strip .ss-sub { grid-column: 2; font-size: 12px; color: var(--ink-dim); }
.streak-strip.cold .ss-main b { color: var(--ink-dim); }
.streak-strip.cold img { filter: grayscale(1) brightness(.7); }
.sk-top { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 12px; margin: 4px 0 6px; }
.sk-top img { width: 84px; height: 84px; }
.sk-top > div b { font-size: 40px; font-weight: 800; line-height: 1; color: #ff9f43; display: block; }
.sk-top > div span { font-size: 12px; color: var(--ink-dim); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.sk-best { text-align: right; font-size: 13px; color: var(--ink-dim); } .sk-best b { color: var(--ink); font-size: 18px; } .sk-best small { font-size: 11px; }
.sk-cal { margin: 10px 0 6px; }
.sk-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; } .sk-dow i { font-style: normal; text-align: center; font-size: 10px; color: var(--ink-dim); font-weight: 700; }
.sk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sk-grid i, .sk-key i { display: block; aspect-ratio: 1; border-radius: 7px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06); }
.sk-grid i.rode, .sk-key i.rode { background: linear-gradient(135deg, #ff4d6d, #ff9f43); border-color: transparent; }
.sk-grid i.miss, .sk-key i.miss { background: rgba(255, 255, 255, .03); border-style: dashed; border-color: rgba(255, 255, 255, .12); }
.sk-grid i.today, .sk-key i.today { box-shadow: 0 0 0 2px var(--gold); }
.sk-grid i.future { visibility: hidden; }
.sk-key { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--ink-dim); } .sk-key i { width: 12px; height: 12px; aspect-ratio: auto; border-radius: 4px; }
.sk-goal { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 12px; color: var(--ink-dim); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.sk-goals { display: flex; gap: 6px; flex-wrap: wrap; } .sk-goals button { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: var(--ink); cursor: pointer; }
.sk-goals button.on { border-color: var(--gold); color: var(--gold); background: rgba(255, 210, 63, .12); }
.sk-pay { font-size: 12px; color: var(--ink-dim); margin: 10px 0 0; }
/* the badge shelf: the badges a rider owns, big, the worn one lit */
.badge-shelf { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.badge-card { display: grid; justify-items: center; gap: 4px; padding: 14px 8px 10px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; cursor: pointer; }
.badge-card img { width: 72px; height: 72px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.badge-card i { width: 72px; height: 72px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .18); }
.badge-card b { font-size: 13px; text-align: center; }
.badge-card small { font-size: 9px; letter-spacing: 2px; font-weight: 800; color: var(--ink-dim); }
.badge-card.on { border-color: var(--gold); background: rgba(255, 210, 63, .1); box-shadow: 0 0 0 1px rgba(255, 210, 63, .3), 0 0 22px rgba(255, 210, 63, .18); }
.badge-card.on small { color: var(--gold); }
.badge-shelf.empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, .14); color: var(--ink-dim); font-size: 13px; }
.badge-shelf.empty img { width: 56px; height: 56px; opacity: .35; filter: grayscale(1); } .badge-shelf.empty p { margin: 0; }
.badge-banner { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font-size: 13px; color: var(--ink-dim); cursor: pointer; }
.badge-banner input { width: 18px; height: 18px; accent-color: #ffd23f; }
.sign-badge { width: 30px; height: 30px; vertical-align: middle; margin: -6px 6px -4px 0; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)); }
.rp-badge { width: 28px; height: 28px; vertical-align: middle; margin-right: 6px; filter: drop-shadow(0 2px 6px rgba(255, 210, 63, .5)); }
.rp-streak { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: rgba(255, 159, 67, .08); border: 1px solid rgba(255, 159, 67, .3); font-size: 12px; color: var(--ink-dim); }
.rp-streak img { width: 30px; height: 30px; align-self: center; } .rp-streak b { font-size: 20px; color: #ff9f43; } .rp-streak span { font-weight: 700; } .rp-streak small { margin-left: auto; font-size: 11px; }
.record b { color: var(--ink); }
.reward-btn { width: 100%; margin-top: 8px; font-size: 13px; border-color: rgba(255, 210, 63, .35); }
.locker-card, .post-card { width: min(520px, 100%); padding: 22px 18px 18px; text-align: center; max-height: 92vh; overflow-y: auto; contain: inline-size; }
#lockerPreview { width: 100%; height: 90px; border-radius: 14px; background: #121b38; margin: 4px 0 10px; }
/* the ranch scene: the sky and fence are drawn, the rider preview sits on the ground at the left, the herd grazes to the right */
/* the ranch: the scene is the heading, stretched to the top edge of the card; the sign is the title, the wallet a small pill */
.locker-card.ranch { padding-top: 0; }
.locker-card.ranch > .podium-title { display: none; }
.locker-card.ranch .x-close { top: 8px; right: 8px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }
.ranch-scene { position: relative; height: 170px; margin: 0 -18px 12px; background: #0b1230; border-bottom: 1px solid rgba(255, 210, 63, .25); overflow: hidden; }
.ranch-scene #ranchCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ranch-scene #lockerPreview { position: absolute; left: 0; bottom: 0; width: 100%; height: 84px; margin: 0; background: transparent; border-radius: 0; }
.ranch-sign { position: absolute; left: 18px; top: 14px; font-size: 14px; letter-spacing: 3px; color: var(--gold); font-weight: 800; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.ranch-wallet { position: absolute; left: 18px; top: 40px; display: flex; align-items: center; gap: 6px; }
.rw-bell { position: relative; width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(10, 15, 31, .55); cursor: pointer; display: grid; place-items: center; padding: 0; }
.rw-bell img { width: 18px; height: 18px; }
.ranch-scene .rw-bell { background: transparent; border: 0; width: 34px; height: 34px; }   /* on the painting the bell hangs on its own, no button plate */
.ranch-scene .rw-bell img { width: 26px; height: 26px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .8)); }
.rw-bell .badge { position: absolute; top: -6px; right: -6px; }
.rw-line { position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 30px 4px 8px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .45); background: rgba(10, 15, 31, .6); color: var(--ink); font: inherit; cursor: pointer; }
.rw-line > span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rw-line > span:first-child b { color: var(--silver); } .rw-line > span:last-of-type b { color: var(--gold); }
.rw-line .ic.art { width: 18px; height: 18px; }
.rw-line .plus { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #1a0b10; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; }
.locker-card.ranch #lockerWalletRow { display: none; }
/* the two rows of tabs read as two things: the ranch tabs are one segmented control, the closet tabs are small chips */
.ranch-tabs { display: flex; gap: 0; margin: 0 0 12px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.ranch-tabs .tab { flex: 1; border: none; border-radius: 999px; background: transparent; padding: 9px 6px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); }
.ranch-tabs .tab.active { background: var(--gold); color: #1a0b10; box-shadow: 0 4px 14px rgba(255, 210, 63, .3); }
.locker-card.ranch .rtab .tabs { justify-content: center; gap: 18px; margin-bottom: 10px; }
.locker-card.ranch .rtab .tabs .tab { flex: none; background: none; border: none; border-radius: 0; padding: 4px 2px; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-dim); border-bottom: 2px solid transparent; }
.locker-card.ranch .rtab .tabs .tab.active { color: var(--ink); border-bottom-color: var(--gold); }
.rtab.hidden { display: none; }
/* a thin quiet scrollbar on the card */
.locker-card, .post-card { scrollbar-width: thin; scrollbar-color: rgba(255, 210, 63, .35) transparent; }
.locker-card::-webkit-scrollbar, .post-card::-webkit-scrollbar { width: 6px; }
.locker-card::-webkit-scrollbar-thumb, .post-card::-webkit-scrollbar-thumb { background: rgba(255, 210, 63, .35); border-radius: 999px; }
.locker-card::-webkit-scrollbar-track, .post-card::-webkit-scrollbar-track { background: transparent; }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tab { flex: 1; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: var(--ink-dim); border-radius: 10px; padding: 8px; font-weight: 700; cursor: pointer; letter-spacing: 1px; font-size: 12px; }
.tab.active { background: rgba(255, 210, 63, .12); color: var(--gold); border-color: rgba(255, 210, 63, .4); }
.lk-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 2px; }
.lk-item { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; color: var(--ink); font: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.lk-item.on { border-color: rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .08); }
.lk-item canvas { width: 100%; height: 64px; border-radius: 8px; background: #121b38; }
.lk-name { font-weight: 700; font-size: 13px; }
.lk-desc { font-size: 11px; color: var(--ink-dim); min-height: 14px; }
.lk-act { display: flex; gap: 4px; justify-content: center; margin-top: 2px; }
.lk-btn { border: none; border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: 12px; cursor: pointer; background: rgba(255, 255, 255, .1); color: var(--ink); }
.lk-btn.buy { background: var(--accent); color: #1a0b10; }
.lk-btn.tok { background: rgba(255, 210, 63, .18); color: var(--gold); }
.lk-btn.dim { opacity: .45; }
.lk-on { color: var(--gold); font-weight: 700; font-size: 12px; padding: 6px 0; }
.lk-earn { color: var(--ink-dim); font-size: 11px; padding: 6px 0; }
.lk-bundles { display: grid; gap: 6px; margin-top: 10px; }
.lk-bundle { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, .04); border-radius: 10px; padding: 8px 12px; font-size: 13px; text-align: left; }
.lk-foot { font-size: 12px; color: var(--ink-dim); margin: 12px 0; line-height: 1.6; }
.lk-foot form { display: flex; gap: 6px; margin: 6px 0; }
.lk-foot input { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: var(--ink); font-size: 13px; letter-spacing: 1px; }
.lk-foot form .ghost-btn { flex: none; padding: 6px 12px; }
.lk-recovery b { color: var(--ink); letter-spacing: 1px; }
.lk-recovery span { font-size: 11px; }
.lk-mode { color: var(--gold); font-size: 11px; margin-top: 4px; }
.ad-shade { position: fixed; inset: 0; background: rgba(7, 11, 23, .85); display: grid; place-items: center; z-index: 20; color: var(--ink-dim); letter-spacing: 3px; font-weight: 700; }

/* ---------- Icon set ---------- */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.22em; display: inline-block; }
.ic.sm { width: .95em; height: .95em; vertical-align: -0.15em; margin-left: 3px; }
.howto .ico img { width: 30px; height: 30px; }
.howto .ico { background: transparent; }
.ic.art { width: 1.5em; height: 1.5em; vertical-align: -0.4em; }
.dice-btn img { width: 34px; height: 34px; }
.lk-btn.gold img { width: 16px; height: 16px; }
.gold-stat img { width: 15px; height: 15px; vertical-align: -3px; }
.wallet .ic.art { width: 26px; height: 26px; vertical-align: -8px; }
.gs-amount img { width: 34px; height: 34px; }
.lk-pack .g img { width: 26px; height: 26px; }
.corral-make .emb { width: 44px; height: 44px; }
.mute-btn img { width: 24px; height: 24px; vertical-align: middle; }
/* Smooth / Cool: only while playing, stacked above the sound button */
.cool-btn { position: fixed; right: 14px; z-index: 5; background: rgba(10, 15, 31, .6); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; width: 36px; height: 36px; cursor: pointer; display: none; padding: 0; place-items: center; color: var(--ink-dim); }
.cool-btn img { width: 26px; height: 26px; filter: grayscale(1) brightness(.8); transition: filter .25s; }
.cool-btn .cb-dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.cool-btn.on { border-color: rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .1); box-shadow: 0 0 12px rgba(255, 210, 63, .25); }
.cool-btn.on img { filter: none; }
.cool-btn.on .cb-dot { background: #ffd23f; box-shadow: 0 0 6px #ffd23f; }
body.playing .cool-btn { display: grid; bottom: calc(14px + 140px + 8px + 44px + 44px); }
@media (max-width: 720px) { body.playing .cool-btn { bottom: calc(14px + 90px + 8px + 44px + 44px); } }
.medal-ic { width: 40px; height: 40px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5)); }
.leaderboard .name img { width: 13px; height: 13px; vertical-align: -2px; margin-left: 4px; }
.feed .item img { width: 13px; height: 13px; vertical-align: -2px; margin: 0 2px; }
.tokens b { color: var(--gold); }
.pp-code:empty::before, .inv-code:empty::before, .party-chip .code:empty::before { content: '····'; opacity: .4; }

.lk-sub { font-size: 11px; letter-spacing: 3px; color: var(--ink-dim); font-weight: 700; margin: 12px 0 4px; text-align: left; }
.lk-sets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 160px; overflow-y: auto; padding-right: 2px; }
.lk-bundle.set { padding: 6px 10px; font-size: 12px; }
.lk-bundle.set .lk-desc { display: none; }
.lk-bundle.set .lk-btn { padding: 4px 8px; font-size: 11px; }
@media (max-width: 720px) { .lk-sets { grid-template-columns: 1fr; } }

/* ---------- Corrals ---------- */
.corral-home { display: grid; gap: 8px; margin-top: 12px; }
.corral-row, .corral-make { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; background: rgba(255, 210, 63, .06); border: 1px solid rgba(255, 210, 63, .25); color: var(--ink); text-decoration: none; cursor: pointer; font: inherit; }
.corral-row:hover, .corral-make:hover { background: rgba(255, 210, 63, .12); }
.corral-row .emb, .corral-make .emb { width: 36px; height: 36px; object-fit: contain; flex: none; }
.corral-row div, .corral-make div { flex: 1; min-width: 0; }
.corral-row b, .corral-make b { display: block; font-size: 15px; }
.corral-row span, .corral-make span { font-size: 12px; color: var(--ink-dim); line-height: 1.35; }
.corral-row .go { color: var(--gold); font-weight: 700; font-size: 13px; }
.dot.on { background: var(--gold); } .dot:not(.on) { background: rgba(154, 166, 201, .5); box-shadow: none; animation: none; }
i.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
#corralLanding { display: none; text-align: left; position: relative; }
.cl-x { position: absolute; top: 2px; right: 2px; z-index: 3; width: 38px; height: 38px; }
.cl-modes { margin: 4px 0 8px; padding-right: 44px; }
.cl-modes.readonly .mode-btn { cursor: default; }
.cl-modes .mode-btn .mode-ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.cl-x img { width: 100%; height: 100%; display: block; }
body.corral-landing #corralLanding, body.corral-landing #corralLandingFoot { display: block; }
body.corral-landing #homeMain, body.corral-landing #joinForm .play-group, body.corral-landing .logo-wrap, body.corral-landing .live-line, body.corral-landing .logo { display: none; }
#corralLandingFoot { display: none; text-align: left; }
body.corral-landing .home-card { padding-top: 14px; }
body.corral-landing #corralLanding .cl-banner { margin-top: -14px; }
body.corral-landing #corralLanding .cl-x { top: 8px; right: 8px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .7)); }
body.corral-landing #corralLanding .board { margin-top: 0; }
body.corral-landing .wallet-row { margin-top: 18px; }
body.corral-landing #joinForm { margin-top: 0; }
/* the name row: Your style on the left of the name; the bell sits beside the wallet */
.style-side-btn img { width: 30px; height: 30px; object-fit: contain; }
.style-side-btn img.ranch { width: 44px; height: 44px; }
.wallet-row { display: flex; gap: 8px; align-items: stretch; margin: 6px 0 10px; contain: inline-size; }   /* the row fits the card, never the other way round */
.wallet-row .inbox-btn { width: 54px; flex: none; }
.wallet-row .wallet-line { flex: 1; min-width: 0; margin: 0; }
.cl-sub { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); font-weight: 800; margin: 16px 0 6px; text-align: center; }
#corralLandingFoot .cl-modes { margin: 0 0 8px; padding-right: 0; }
.cl-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; }
.cl-emblem { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.cl-emblem.sm { width: 52px; height: 52px; }
.cl-kicker { font-size: 11px; letter-spacing: 3px; color: var(--gold); font-weight: 700; }
.cl-name { margin: 2px 0 0; font-size: 28px; font-weight: 800; letter-spacing: 1px; }
.cl-explain { font-size: 13px; color: var(--ink-dim); line-height: 1.5; margin: 0 0 12px; }
.cl-explain b { color: var(--ink); }
.cl-presence { background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--ink-dim); margin-bottom: 10px; }
.cl-presence b { color: var(--ink); }
.cl-names { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.cl-names span { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(154, 166, 201, .15); color: var(--ink-dim); }
.cl-names span.playing { background: rgba(255, 210, 63, .15); color: var(--gold); }
.cl-gate { background: rgba(255, 210, 63, .08); border: 1px solid rgba(255, 210, 63, .3); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: var(--ink-dim); margin-bottom: 10px; }
.cl-gate label { display: block; margin-bottom: 6px; }
.cl-gate input { width: 140px; font-size: 22px; letter-spacing: 10px; text-align: center; padding: 8px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: var(--ink); outline: none; }
.cl-gate input:focus { border-color: var(--gold); }
.cl-actions { display: grid; gap: 8px; margin-bottom: 12px; }
.cl-actions .play-btn { font-size: 22px; }
.cl-actions .play-btn:disabled, .cl-actions .ghost-btn:disabled { opacity: .4; cursor: not-allowed; }
.cl-regulars { font-size: 13px; }
.cl-member { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cl-member em { font-style: normal; font-size: 10px; letter-spacing: 1px; color: var(--gold); text-transform: uppercase; margin-left: 4px; }
.cl-stat { color: var(--ink-dim); font-size: 12px; }
/* share and manage, right under the gate scene, in gold */
.cl-quick { display: flex; justify-content: center; gap: 22px; margin: -2px 0 12px; }
.cl-quick .link-btn { color: var(--gold); font-weight: 800; font-size: 13px; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.cl-quick .link-btn:hover { text-decoration: underline; }
.cl-foot { margin-top: 12px; font-size: 12px; color: var(--ink-dim); text-align: center; }
.cl-missing { text-align: center; color: var(--ink-dim); padding: 20px 0; line-height: 1.6; }
.corral-chip .emb { width: 16px; height: 16px; object-fit: contain; }
.corral-chip .code { letter-spacing: 0; font-size: 12px; }
.fence-pill { position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; border-radius: 999px; background: rgba(10, 15, 31, .85); border: 1px solid rgba(255, 210, 63, .35); font-size: 13px; color: var(--ink); pointer-events: auto; white-space: nowrap; }
.fence-pill .lk-btn { font-size: 13px; padding: 8px 14px; }
.feed-wrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.holler-bar { display: flex; gap: 8px; pointer-events: auto; padding: 6px; border-radius: 999px; background: rgba(10, 15, 31, .55); border: 1px solid rgba(255, 255, 255, .06); }
.holler-bar button { position: relative; display: flex; align-items: center; gap: 0; width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); background: var(--navy-700); color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; overflow: hidden; transition: width .25s ease, background .15s, transform .1s; white-space: nowrap; }
.holler-bar button img { width: 32px; height: 32px; flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.holler-bar button .lbl { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .25s ease, opacity .2s, margin .25s; }
.holler-bar button kbd { position: absolute; right: 3px; bottom: 3px; font: 700 9px/1 Outfit, system-ui, sans-serif; color: var(--ink-dim); background: rgba(7, 11, 23, .8); border-radius: 4px; padding: 2px 3px; }
.holler-bar button:hover, .holler-bar button:focus-visible, body.hollers-labels .holler-bar button { width: auto; padding: 0 14px 0 8px; border-radius: 999px; background: rgba(255, 210, 63, .14); }
.holler-bar button:hover .lbl, .holler-bar button:focus-visible .lbl, body.hollers-labels .holler-bar button .lbl { max-width: 110px; opacity: 1; margin-left: 6px; }
.holler-bar button:active { transform: scale(.92); }
@media (max-width: 720px) { .holler-bar button { width: 42px; height: 42px; } .holler-bar button kbd { display: none; } body.hollers-labels .holler-bar button { width: 42px; padding: 0; } body.hollers-labels .holler-bar button .lbl { max-width: 0; opacity: 0; margin: 0; } }
body:not(.playing) .holler-bar { display: none; }
.corral-card { width: min(480px, 100%); text-align: left; }
.cp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cp-head .podium-title { margin: 0; text-align: left; }
.cp-invite { display: flex; gap: 12px; align-items: center; background: rgba(255, 255, 255, .04); border-radius: 12px; padding: 10px; }
.cp-invite canvas { width: 110px; height: 110px; border-radius: 8px; flex: none; image-rendering: pixelated; }
.cp-invite > div { flex: 1; min-width: 0; }
.cp-invite .party-row { display: flex; gap: 8px; margin-top: 8px; }
.cp-list { font-size: 13px; }
.cp-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.cp-row > span:first-child { flex: 1; }
.cp-state { font-size: 11px; color: var(--ink-dim); letter-spacing: .5px; }
.cp-state.playing { color: var(--gold); }
.cp-sub { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.cp-tabs { margin: 8px 0 6px; }
.cp-page { min-height: 220px; }
.cp-rows { display: grid; gap: 6px; margin-top: 8px; }
.cp-switch, .cp-field, .cp-danger { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.cp-switch { cursor: pointer; }
.cp-switch > span, .cp-field > span, .cp-danger > span { flex: 1; min-width: 0; }
.cp-switch b, .cp-field b, .cp-danger b { display: block; font-size: 14px; color: var(--ink); }
.cp-switch small, .cp-field small, .cp-danger small { display: block; font-size: 12px; color: var(--ink-dim); line-height: 1.35; margin-top: 1px; }
.cp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-switch i { flex: none; width: 44px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .15); position: relative; transition: background .15s; }
.cp-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.cp-switch input:checked + i { background: var(--gold); border-color: var(--gold); }
.cp-switch input:checked + i::after { transform: translateX(18px); }
.cp-field.col { flex-direction: column; align-items: stretch; gap: 8px; }
.cp-field .mode-pick { margin: 0; }
.cp-bots { justify-content: flex-start; margin: 0; }
.cp-bots .mode-btn { min-width: 44px; }
.cp-danger { margin-top: 12px; border-color: rgba(255, 77, 109, .3); background: rgba(255, 77, 109, .06); }
.ghost-btn.sm { padding: 7px 12px; font-size: 13px; flex: none; }
.ghost-btn.sm.danger { color: var(--coral); border-color: rgba(255, 77, 109, .4); }
.cp-empty { color: var(--ink-dim); font-size: 12.5px; border-bottom: 0; }
.cp-foot { text-align: center; }
.ranch-link.row { flex-direction: row; gap: 8px; margin-top: 12px; }
.ranch-link.row .ic.art { width: 28px; height: 28px; }
.deed-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 12px; }
.deed-table th { text-align: left; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); padding: 6px 8px; }
.deed-table td { padding: 8px; border-top: 1px solid rgba(255, 255, 255, .06); vertical-align: top; color: var(--ink-dim); line-height: 1.35; }
.deed-table td:first-child { color: var(--ink); font-weight: 700; width: 64px; }
.deed-table .hl { color: var(--ink); background: rgba(255, 210, 63, .07); }
.deed-table th.hl { color: var(--gold); }
.deed-table .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; }
.deed-head .sub { margin-left: auto; font-size: 12px; color: var(--ink-dim); font-weight: 500; }
.cp-emblems { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-emblems img { width: 36px; height: 36px; object-fit: contain; padding: 3px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; background: rgba(255, 255, 255, .04); }
.cp-emblems img.on { border-color: var(--gold); }
.cp-ban { display: inline-block; margin: 2px 8px 2px 0; font-size: 12px; }
.link-btn.danger { color: var(--coral); }
.corral-card .play-btn { margin-top: 14px; }
.holler-bubble { pointer-events: none; }
@media (max-width: 720px) { .holler-bar button span { display: none; } .holler-bar button { padding: 8px; } .cl-name { font-size: 22px; } }

body.panel-open #death, body.panel-open #roundEnd, body.panel-open #invite { visibility: hidden; }
body.panel-open #hud { opacity: .15; }

/* ---------- In-page checkout ---------- */
#checkout { z-index: 12; }
.checkout-card { width: min(520px, 100%); padding: 18px 18px 14px; text-align: left; background: #fff; color: #1a1f36; }
.checkout-card .podium-title { color: #6b7280; text-align: left; margin: 0; }
.checkout-title { font-weight: 800; font-size: 18px; margin-top: 2px; }
.checkout-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.checkout-head .link-btn { color: #6b7280; }
.checkout-box { min-height: 320px; }
.checkout-card .fineprint { color: #6b7280; margin-top: 10px; text-align: center; }

/* ---------- Purchase celebration ---------- */
#celebrate { z-index: 14; background: radial-gradient(ellipse at center, rgba(255, 210, 63, .12), rgba(7, 11, 23, .9)); }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celebrate-card { position: relative; width: min(460px, 100%); text-align: center; animation: cbpop .55s cubic-bezier(.2, 1.4, .4, 1); border: 1px solid rgba(255, 210, 63, .35); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 210, 63, .18); }
@keyframes cbpop { from { transform: scale(.6) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.cb-kicker { font-size: 12px; letter-spacing: 6px; color: var(--gold); font-weight: 800; }
.cb-name { margin: 4px 0 10px; font-size: 34px; font-weight: 800; letter-spacing: 1px; background: var(--accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cb-stage { position: relative; border-radius: 16px; background: #121b38; overflow: hidden; }
.cb-stage::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 210, 63, .18) 25%, transparent 30% 70%, rgba(255, 77, 109, .18) 75%, transparent 80%); animation: cbspin 6s linear infinite; }
@keyframes cbspin { to { transform: rotate(360deg); } }
#cbPreview, #spPreview, #bvPreview { position: relative; width: 100%; height: 160px; display: block; }
#bvPreview { height: 150px; }
.overlay > .card { max-width: 100%; box-sizing: border-box; }
.cb-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.cb-items canvas { width: 84px; height: 56px; border-radius: 8px; background: #121b38; }
.cb-desc { color: var(--ink-dim); font-size: 14px; margin: 12px 0 14px; }
.celebrate-card .ghost-btn { width: 100%; margin-top: 8px; }

/* ---------- Name check & suggestions ---------- */
.name-row { display: flex; gap: 8px; }
.name-row #nameInput { flex: 1; }
.dice-btn { width: 54px; flex: none; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); cursor: pointer; display: grid; place-items: center; transition: background .15s, transform .15s; }
.dice-btn img { width: 24px; height: 24px; }
.dice-btn:hover { background: rgba(255, 210, 63, .12); }
.dice-btn:active img { transform: rotate(180deg); transition: transform .3s; }
#nameInput.bad { border-color: var(--coral); animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.name-help { font-size: 12px; color: var(--coral); text-align: left; margin-top: -4px; }
.name-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.name-chips button { border: 1px solid rgba(255, 210, 63, .35); background: rgba(255, 210, 63, .08); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.name-chips button:hover { background: rgba(255, 210, 63, .18); }
.play-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }

/* ---------- Teams / Capture the Flag ---------- */
.team-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 5px 14px; border-radius: 999px; background: rgba(10, 15, 31, .72); border: 1px solid rgba(255, 255, 255, .1); font-size: 12px; font-weight: 800; letter-spacing: 2px; }
.team-bar b { font-size: 16px; margin: 0 4px; }
.team-bar .tb-flag { width: 22px; height: 22px; margin: 0 4px; vertical-align: -6px; }
.team-bar .t0 { color: #ff4d6d; }
.team-bar .t1 { color: #4dd0ff; }
.team-bar .vs { color: var(--ink-dim); }
.team-bar.mine0 .t0, .team-bar.mine1 .t1 { text-decoration: underline; text-underline-offset: 4px; }
.practice-pill { margin-top: 6px; font-size: 11px; color: var(--ink-dim); letter-spacing: .5px; padding: 3px 10px; border-radius: 999px; border: 1px dashed rgba(154, 166, 201, .4); }
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.mode-pick .lk-sub { grid-column: 1 / -1; margin: 4px 0 0; }
.mode-btn { padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: var(--ink); font-weight: 700; font-size: 13px; cursor: pointer; text-align: left; }
.mode-btn small { display: block; font-weight: 500; font-size: 11px; color: var(--ink-dim); }
.mode-btn.on { border-color: rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .1); }
.mode-btn:disabled { opacity: .5; cursor: default; }
.standings table { width: 100%; border-collapse: collapse; font-size: 12px; }
.standings th { text-align: left; font-weight: 700; color: var(--ink-dim); letter-spacing: 1px; font-size: 10px; padding: 4px 4px; }
.standings td { padding: 5px 4px; border-top: 1px solid rgba(255, 255, 255, .06); }
.standings td.num, .standings th.num { text-align: right; font-variant-numeric: tabular-nums; }
.standings tr.me td { color: var(--gold); }
.podium-teams { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px 0 12px; font-size: 26px; font-weight: 800; }
.podium-teams .t0 { color: #ff4d6d; } .podium-teams .t1 { color: #4dd0ff; }
.podium-teams .win { font-size: 12px; letter-spacing: 3px; color: var(--gold); }
.mode-badge { display: inline-block; font-size: 10px; letter-spacing: 2px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(255, 210, 63, .12); color: var(--gold); vertical-align: middle; margin-left: 8px; }

/* ---------- Gold ---------- */
.locker-head { display: flex; justify-content: space-between; align-items: center; padding-right: 46px; }
.locker-head .podium-title { margin: 0; }
.wallet { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .4); background: rgba(255, 210, 63, .1); color: var(--gold); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.wallet b { font-size: 15px; }
.wallet b + .ic.art, .wallet span + .ic.art { margin-left: 6px; }
.melt-row { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 2px 0 6px; font-size: 12.5px; color: var(--ink-dim); }
.melt-row:empty, .melt-row.hidden { display: none; }
.melt-row .ghost-btn.sm { padding: 5px 12px; font-size: 12px; }
.gs-gold { margin-left: 10px; }
.gs-gold img { width: 26px; height: 26px; vertical-align: -6px; }
.wallet .plus { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #1a0b10; display: grid; place-items: center; font-size: 14px; line-height: 1; }
.lk-btn.gold { background: rgba(255, 210, 63, .16); color: var(--gold); display: inline-flex; align-items: center; gap: 4px; }
.lk-btn.gold img { width: 13px; height: 13px; }
.lk-btn.gold.dim { opacity: .5; }
.lk-btn.buy { font-size: 11px; padding: 6px 8px; }
.lk-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.lk-pack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 12px; background: rgba(255, 210, 63, .06); border: 1px solid rgba(255, 210, 63, .25); text-align: center; }
.lk-pack .g { font-size: 18px; font-weight: 800; color: var(--gold); display: flex; align-items: center; gap: 5px; }
.lk-pack .g img { width: 18px; height: 18px; }
.lk-pack .bonus { font-size: 10px; letter-spacing: 1px; color: var(--gold); font-weight: 700; }
.lk-pack .lk-btn { margin-top: 2px; }
.lk-money, .lk-account { display: grid; gap: 8px; text-align: left; }
.lk-coin { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.lk-coin img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.lk-coin b { display: block; font-size: 14px; }
.lk-coin small { display: block; font-size: 12px; color: var(--ink-dim); line-height: 1.35; margin-top: 1px; }
.lk-account.on .lk-coin { border-color: rgba(255, 210, 63, .3); background: rgba(255, 210, 63, .06); }
.lk-acc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lk-acc-actions .ghost-btn.sm { flex: 1; padding: 8px 10px; font-size: 12.5px; white-space: nowrap; }
.lk-acc-actions .ghost-btn.sm .ic.art { width: 20px; height: 20px; vertical-align: -5px; }
.lk-legacy { font-size: 11px; color: var(--ink-dim); margin: 14px 0 4px; text-align: center; }
.lk-legacy .link-btn { color: var(--ink-dim); text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, .3); padding-bottom: 1px; }
.lk-legacy .link-btn:hover { color: var(--ink); }
.lk-legacy form { display: flex; gap: 6px; margin: 6px 0; }
.lk-legacy input { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: var(--ink); font: inherit; }
.lk-mode:empty { display: none; }
.gold-strike { margin: 12px 0 4px; padding: 12px; border-radius: 14px; background: rgba(255, 210, 63, .08); border: 1px solid rgba(255, 210, 63, .3); text-align: center; animation: cbpop .5s cubic-bezier(.2, 1.4, .4, 1); }
.gs-amount { font-size: 26px; font-weight: 800; color: var(--gold); display: flex; justify-content: center; align-items: center; gap: 8px; }
.gs-amount img { width: 26px; height: 26px; }
.gs-lines { font-size: 12px; color: var(--ink-dim); margin-top: 4px; }
.gs-lines span { margin: 0 6px; white-space: nowrap; }
.gold-float { font-weight: 800; color: var(--gold); }

.gold-stat { color: var(--gold); font-weight: 700; }
.gold-stat img { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }

/* ---------- Corral gate page (profile) ---------- */
.cl-banner { position: relative; height: 170px; margin: -14px calc(-1 * var(--cpx, 32px)) 12px; border-radius: 26px 26px 0 0; overflow: hidden; background: #0b1230 center / cover no-repeat; border-bottom: 1px solid rgba(255, 210, 63, .25); }
@media (max-width: 720px) { .cl-banner { border-radius: 20px 20px 0 0; } }
/* a soft shade behind the sign so it reads on any painting; a Deed banner color tints the scene */
.cl-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(5, 8, 20, .78) 0%, rgba(5, 8, 20, .35) 45%, rgba(5, 8, 20, 0) 70%); }
.cl-banner.b-sunset::before { background: linear-gradient(160deg, rgba(5, 8, 20, .78) 0%, rgba(5, 8, 20, .35) 45%, rgba(5, 8, 20, 0) 70%), linear-gradient(135deg, rgba(255, 77, 109, .35), rgba(255, 210, 63, .25)); }
.cl-banner.b-canyon::before { background: linear-gradient(160deg, rgba(5, 8, 20, .78) 0%, rgba(5, 8, 20, .35) 45%, rgba(5, 8, 20, 0) 70%), linear-gradient(135deg, rgba(107, 45, 18, .45), rgba(255, 210, 63, .2)); }
.cl-banner.b-prairie::before { background: linear-gradient(160deg, rgba(5, 8, 20, .78) 0%, rgba(5, 8, 20, .35) 45%, rgba(5, 8, 20, 0) 70%), linear-gradient(135deg, rgba(31, 107, 58, .45), rgba(212, 255, 92, .2)); }
.cl-banner.b-neon::before { background: linear-gradient(160deg, rgba(5, 8, 20, .78) 0%, rgba(5, 8, 20, .35) 45%, rgba(5, 8, 20, 0) 70%), linear-gradient(135deg, rgba(61, 107, 255, .4), rgba(255, 47, 176, .3)); }
.cl-banner.b-goldrush::before { background: linear-gradient(160deg, rgba(5, 8, 20, .78) 0%, rgba(5, 8, 20, .35) 45%, rgba(5, 8, 20, 0) 70%), linear-gradient(135deg, rgba(138, 90, 12, .45), rgba(255, 230, 128, .25)); }
.cl-banner > * { position: relative; }
.cl-banner .cl-title { position: absolute; left: 18px; top: 14px; right: 48px; bottom: 12px; display: flex; flex-direction: column; }
.cl-banner .cl-kicker { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 2px; color: var(--ink); opacity: .85; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.cl-banner .cl-kicker img { width: 14px; height: 14px; }
.cl-banner .cl-name { margin: 2px 0 8px; font-size: 16px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
/* the details run along the bottom of the scene as plain text on a shade, no pills */
.cl-pills { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 60px; }
.cl-pills span { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 12px rgba(0, 0, 0, .6); }
.cl-pills .cl-owner { color: rgba(255, 255, 255, .85); font-weight: 600; }
.cl-banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(180deg, rgba(5, 8, 20, 0), rgba(5, 8, 20, .7)); }
.cl-banner .cl-emblem { position: absolute; right: 16px; bottom: 10px; width: 64px; height: 64px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .7)); }
.cl-names { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.cl-names span em { font-style: normal; font-weight: 500; opacity: .7; margin-left: 5px; font-size: 11px; }
.cl-actions .link-btn { display: block; margin: 0 auto; font-size: 13px; }
.board { margin: 14px 0 12px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 210, 63, .2); overflow: hidden; }
.board-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(255, 210, 63, .1); font-size: 11px; letter-spacing: 4px; font-weight: 800; color: var(--gold); }
.board-sub { letter-spacing: 1px; font-weight: 600; color: var(--ink-dim); }
.board table { width: 100%; border-collapse: collapse; font-size: 13px; }
.board th { text-align: left; font-size: 10px; letter-spacing: 1px; color: var(--ink-dim); padding: 6px 8px; }
.board td { padding: 7px 8px; border-top: 1px solid rgba(255, 255, 255, .05); }
.board td.num, .board th.num { text-align: right; font-variant-numeric: tabular-nums; }
.board td.rank { width: 30px; text-align: center; color: var(--ink-dim); }
.board td.rank img, .standings td.rank img { width: 28px; height: 28px; vertical-align: middle; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5)); }
.standings table { width: 100%; border-collapse: collapse; font-size: 13px; }
.standings th { text-align: left; font-size: 10px; letter-spacing: 1px; color: var(--ink-dim); padding: 6px 8px; }
.standings td { padding: 7px 8px; border-top: 1px solid rgba(255, 255, 255, .05); }
.standings td.num, .standings th.num { text-align: right; font-variant-numeric: tabular-nums; }
.standings td.rank { width: 36px; text-align: center; color: var(--ink-dim); }
.standings tr.top:first-of-type td b { color: var(--gold); }
.standings td em { font-style: normal; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-left: 4px; }
.board td.rank { width: 36px; }
.board tr.top td { background: rgba(255, 210, 63, .04); }
.board tr.top:first-of-type td b { color: var(--gold); }
.board td em { font-style: normal; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-left: 4px; }
.board-empty { padding: 16px; font-size: 13px; color: var(--ink-dim); text-align: center; }
.deed-card { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 210, 63, .12), rgba(255, 77, 109, .08)); border: 1px solid rgba(255, 210, 63, .35); }
.deed-card.compact { margin: 6px 0 10px; }
.deed-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.deed-head img { width: 26px; height: 26px; }
.deed-card p { margin: 6px 0 10px; font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
/* folded by default: the head is the whole row and a tap opens the body */
.deed-toggle { width: 100%; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.deed-toggle span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.deed-toggle b { font-size: 15px; }
.deed-toggle small { font-size: 12px; color: var(--gold); font-weight: 600; line-height: 1.3; }
.deed-toggle .chev { width: 9px; height: 9px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); margin: 0 6px 4px 4px; transition: transform .2s; flex: none; }
.deed-card:not(.folded) .chev { transform: rotate(-135deg); margin-bottom: -4px; }
.deed-card.folded .deed-body { display: none; }
.deed-body p { margin-top: 10px; }
.deed-actions { display: flex; gap: 8px; }
.deed-actions .lk-btn { font-size: 13px; padding: 8px 14px; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--gold); }
.cp-deed { margin: 6px 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 210, 63, .06); border: 1px solid rgba(255, 210, 63, .25); }
.cp-slug { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; }
.cp-slug input { flex: 1; min-width: 0; padding: 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: var(--ink); font-size: 13px; }
.cp-slug .ghost-btn { flex: none; padding: 6px 10px; }
.cp-banners { display: flex; gap: 6px; margin-top: 8px; }
.cp-banner { width: 40px; height: 26px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; }
.cp-banner.on { border-color: #fff; }
.corral-badge { display: inline-block; }

.death-row { display: flex; gap: 8px; margin-top: 8px; }
.death-row .ghost-btn { flex: 1; font-size: 13px; padding: 9px 8px; }

.leaderboard .rank .lb-medal { width: 18px; height: 18px; vertical-align: -4px; margin: 0; }

/* ---------- Spectating: free camera ---------- */
.fence-pill .ic.art { width: 30px; height: 30px; vertical-align: -10px; }
.fp-hint { font-size: 11px; color: var(--ink-dim); }
@media (max-width: 720px) { .fp-hint { display: none; } .fence-pill { bottom: 84px; } }
body.spectating #minimap { pointer-events: auto; cursor: crosshair; border-color: rgba(255, 210, 63, .5); }
body.spectating #game { cursor: grab; }
body.spectating.dragging #game { cursor: grabbing; }
body.spectating .leaderboard { pointer-events: auto; }
body.spectating .leaderboard .row { cursor: pointer; }
body.spectating .leaderboard .row:hover { background: rgba(255, 255, 255, .08); }
.fence-link .ic.art { width: 26px; height: 26px; vertical-align: -9px; }

/* ---------- Feedback: "How's the ride?" ---------- */
.fb-link { display: block; margin: 10px auto 0; font-size: 12px; color: var(--ink-dim); }
.fb-link:hover { color: var(--gold); }
.fb-ask { margin: 14px 0 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 210, 63, .06); border: 1px solid rgba(255, 210, 63, .25); animation: cbpop .5s cubic-bezier(.2, 1.4, .4, 1); }
.fb-ask-t { display: block; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.fb-ask-s { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 8px; }
.fb-loops { display: flex; justify-content: center; gap: 8px; }
.fb-loops button { width: 46px; height: 46px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform .15s, background .15s, border-color .15s; }
.fb-loops button img { width: 28px; height: 28px; filter: grayscale(1) brightness(.9); opacity: .45; transition: filter .15s, opacity .15s, transform .15s; }
.fb-loops button:hover { transform: translateY(-2px); }
.fb-loops button.hot { background: rgba(255, 210, 63, .12); border-color: rgba(255, 210, 63, .5); }
.fb-loops button.hot img { filter: none; opacity: 1; transform: scale(1.06); }
.fb-sub.hot, .fb-ask-s.hot { color: var(--gold); }
.fb-sub, .fb-ask-s { transition: color .15s; min-height: 1.2em; }
.fb-loops button.lit { background: rgba(255, 210, 63, .12); border-color: rgba(255, 210, 63, .5); }
.fb-loops button.lit img { filter: none; opacity: 1; transform: scale(1.1); }
.fb-loops.sm button { width: 38px; height: 38px; border-radius: 11px; }
.fb-loops.sm button img { width: 22px; height: 22px; }
#feedback { z-index: 9; }
.fb-card { width: min(420px, 100%); }
.fb-sub { color: var(--ink-dim); font-size: 13px; margin: -6px 0 14px; }
.fb-more { margin-top: 14px; display: grid; gap: 10px; text-align: left; animation: fadein .3s; }
.fb-more textarea, .fb-more input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 10px 12px; outline: none; resize: vertical; }
.fb-more textarea:focus, .fb-more input:focus { border-color: rgba(255, 210, 63, .5); }
.fb-reward { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-dim); }
.fb-reward img { width: 20px; height: 20px; }
.fb-reward b { color: var(--gold); }
.fb-skip { display: block; margin: 14px auto 0; color: var(--ink-dim); font-size: 13px; }

/* ---------- Home: game type + public CTF lobby ---------- */
/* game type: a quiet switch under PLAY; the rules box follows it */
.home-modes { display: flex; justify-content: center; gap: 6px; margin: 8px 0 2px; }
.home-modes .mode-btn { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ink-dim); background: transparent; border: 1px solid transparent; }
.home-modes .mode-btn:hover { color: var(--ink); }
.home-modes .mode-btn.on { color: var(--gold); border-color: rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .08); }
/* the "with people" row */
.home-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.home-row .ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.home-row .ghost-btn .ic.art { width: 24px; height: 24px; flex: none; }
.home-row .ghost-btn.live { border-color: rgba(255, 210, 63, .45); }
.home-row .ghost-btn span { overflow: hidden; text-overflow: ellipsis; }
.corral-home:empty { display: none; }
.corrals-card { width: min(440px, 100%); }
.corrals-card .corral-home { margin-top: 4px; text-align: left; max-height: 55vh; overflow: auto; }
.corral-row .in-now { flex: none; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; font-size: 15px; font-weight: 800; color: var(--ink-dim); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.corral-row .in-now.on { color: #0a0f1f; background: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(255, 210, 63, .5); }
.corral-row .mine-pill { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); background: rgba(255, 210, 63, .14); border-radius: 999px; padding: 2px 7px; vertical-align: 2px; }
.home-row .ghost-btn .count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #1a1200; background: linear-gradient(180deg, #ffe27a, #ffb300); box-shadow: 0 2px 6px rgba(255, 180, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .6); }
/* rules fold away once you have ridden */
.howto-btn { width: 100%; margin-top: 8px; }
.howto-btn.first { border-color: rgba(255, 210, 63, .45); }
#howto { z-index: 9; }
#corralList { z-index: 9; }
.howto-card { width: min(460px, 100%); }
.howto-tabs { margin: 4px 0 10px; }
.howto-sub { margin: 16px 0 0; text-align: left; }
.howto-flow { margin-top: 8px; }
.howto-flow .ico img { width: 24px; height: 24px; }
.howto-lead { margin: 0 0 6px; font-size: 13px; color: var(--ink-dim); }
.howto-card .howto { margin: 6px 0 10px; }
.howto-card .fineprint { text-align: left; margin-bottom: 14px; }
.howto-close { display: block; margin: 12px auto 0; color: var(--ink-dim); font-size: 13px; }
.howto-box { margin-top: 18px; text-align: left; }
.howto-box summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 3px; font-weight: 800; color: var(--ink-dim); padding: 8px 2px; border-top: 1px solid rgba(255, 255, 255, .06); }
.howto-box summary::-webkit-details-marker { display: none; }
.howto-box summary::before { content: '\25B8'; margin-right: 8px; font-size: 12px; transition: transform .15s; }
.howto-box[open] summary::before { transform: rotate(90deg); }
.howto-box summary span:first-child { flex: 1; }
.howto-box summary span:first-child::before { content: ''; }
.howto-mode { letter-spacing: 1px; font-weight: 600; color: var(--gold); }
.howto-box .howto { margin: 6px 0 4px; }
.home-ident { display: inline-flex; align-items: center; gap: 6px; margin: 6px auto 0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .3); background: rgba(255, 210, 63, .06); color: var(--ink-dim); font: inherit; font-size: 12px; cursor: pointer; }
.home-ident img { width: 20px; height: 20px; object-fit: contain; }
.home-ident b { color: var(--gold); font-weight: 700; }
.home-foot { margin: 12px 0 0; font-size: 12px; color: var(--ink-dim); }
.home-foot .link-btn { color: var(--ink-dim); font-size: 12px; }
.home-foot .link-btn:hover { color: var(--gold); }
.live-pill.hidden { display: none; }
.lobby-card { width: min(460px, 100%); }
.lobby-mode { margin: -6px 0 10px; font-size: 22px; letter-spacing: 3px; font-weight: 800; background: linear-gradient(90deg, #ff4d6d, #ff9f43, #ffd23f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lobby-count { display: flex; flex-direction: column; align-items: center; margin: 4px 0 8px; }
.lobby-count b { font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; }
.lobby-count span { font-size: 11px; letter-spacing: 3px; color: var(--ink-dim); font-weight: 700; }
.lobby-riders { font-size: 13px; color: var(--ink-dim); margin-bottom: 14px; }
.lobby-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.lt { border-radius: 14px; padding: 10px 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); min-height: 96px; font: inherit; color: inherit; text-align: left; display: block; width: 100%; }
/* a corral lobby with sides picked: the columns are buttons; the one you ride for is lit */
.lobby-teams.pick .lt { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.lobby-teams.pick .lt:hover { transform: translateY(-2px); }
.lobby-teams.pick .lt.mine.t0 { box-shadow: 0 0 0 2px #ff4d6d, 0 8px 24px rgba(255, 77, 109, .25); background: rgba(255, 77, 109, .1); }
.lobby-teams.pick .lt.mine.t1 { box-shadow: 0 0 0 2px #4dd0ff, 0 8px 24px rgba(77, 208, 255, .25); background: rgba(77, 208, 255, .1); }
.lobby-teams.pick .lt-name::after { content: 'tap to ride for'; display: block; font-size: 9px; letter-spacing: 1px; color: var(--ink-dim); font-weight: 600; margin-top: 2px; }
.lobby-teams.pick .lt.mine .lt-name::after { content: 'your side'; }
.lt li.set::after { content: 'set'; margin-left: 6px; font-size: 10px; letter-spacing: 1px; color: #5ef1c9; font-weight: 800; }
.lobby-choosing { margin-top: 10px; font-size: 12px; color: var(--gold); font-weight: 600; }
.lobby-set { font-size: 22px; margin-top: 10px; }
.lobby-set.off { filter: saturate(.3) brightness(.8); }
.lt.t0 { border-color: rgba(255, 77, 109, .4); } .lt.t1 { border-color: rgba(77, 208, 255, .4); }
.lt-name { font-size: 11px; letter-spacing: 3px; font-weight: 800; margin-bottom: 6px; }
.lt.t0 .lt-name { color: #ff4d6d; } .lt.t1 .lt-name { color: #4dd0ff; }
.lt ul { list-style: none; margin: 0; padding: 0; font-size: 13px; font-weight: 600; }
.lt li { padding: 3px 0; } .lt li em { font-style: normal; color: var(--gold); font-size: 11px; }
.lt li.dim { color: var(--ink-dim); font-weight: 400; }
.lobby-hint { font-size: 12px; color: var(--ink-dim); margin: 14px 0 6px; }
.lobby-leave { color: var(--ink-dim); font-size: 13px; }
body.lobby #hud { visibility: hidden; }

/* ---------- Back to the ranch ---------- */
.ranch-btn { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 58px; z-index: 5; background: rgba(10, 15, 31, .6); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; width: 36px; height: 36px; cursor: pointer; display: none; padding: 0; place-items: center; }
.ranch-btn img { width: 30px; height: 30px; display: block; margin: auto; }
.ranch-btn:hover { border-color: rgba(255, 210, 63, .5); background: rgba(10, 15, 31, .85); }
body.playing .ranch-btn, body.corral-landing .ranch-btn { display: grid; }
body.playing .ranch-btn { top: auto; right: 14px; bottom: calc(14px + 140px + 8px); }
body.corral-landing .ranch-btn { right: 14px; }
body.lobby .ranch-btn { display: none; }
@media (max-width: 720px) { body.playing .ranch-btn { bottom: calc(14px + 90px + 8px); } }
/* on the fence: no hollers, the pill sits low */
body.spectating .holler-bar { display: none; }
body.spectating .fence-pill { bottom: 24px; }
body.spectating .toast { bottom: 84px; }
.ranch-link { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 14px; color: var(--ink-dim); font-size: 13px; text-decoration: none; }
.ranch-link:hover { color: var(--ink); }
.ranch-link .ic.art { width: 44px; height: 44px; }
#corralLanding > .ranch-link, #corralLandingFoot > .ranch-link { margin: 12px auto 0; display: flex; }
.death-row .ic.art { width: 26px; height: 26px; vertical-align: -8px; }
.cl-foot .ranch-link { margin-top: 0; font-size: 12px; }
.lobby-leave.ranch-link { margin-top: 4px; }

/* ---------- Capture the Flag read-outs ---------- */
.lb-flag { width: 13px; height: 13px; vertical-align: -2px; margin-left: 3px; }
.leaderboard .name img.lb-flag { margin-left: 3px; }
.podium .pp small { font-size: 11px; font-weight: 600; color: var(--ink-dim); margin-left: 2px; }
.howto-ctf .ico img { width: 30px; height: 30px; }
body.spectating .feed { margin-bottom: 58px; }
body.spectating .snap-wrap { visibility: hidden; }

.lk-group { grid-column: 1 / -1; font-size: 11px; letter-spacing: 3px; color: var(--ink-dim); font-weight: 700; margin: 6px 0 -2px; text-align: left; display: flex; align-items: center; gap: 8px; }
.lk-group.hot { color: var(--gold); }
.lk-tag { font-size: 9px; letter-spacing: 1px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 210, 63, .15); border: 1px solid rgba(255, 210, 63, .4); color: var(--gold); }
.lk-groups { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 8px; }
.lk-chip { font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-dim); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lk-chip:hover, .lk-chip.active { color: var(--ink); border-color: rgba(255, 255, 255, .3); }
.lk-chip.hot { color: var(--gold); border-color: rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .1); }
.lk-chip em { font-style: normal; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; opacity: .8; }

/* ---------- Yours / Only mine, earned progress, crowns ---------- */
.lk-chip.toggle { margin-left: auto; border-style: dashed; }
.lk-chip.toggle.on { color: var(--gold); border-color: rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .1); border-style: solid; }
.lk-chip.off { opacity: .45; }
.lk-note { font-size: 11px; letter-spacing: 0; font-weight: 500; text-transform: none; color: var(--ink-dim); flex-basis: 100%; margin-top: 2px; }
.lk-group { flex-wrap: wrap; }
.lk-prog { width: 100%; padding: 4px 0 0; }
.lk-prog .bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.lk-prog .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff9f43, #ffd23f); }
.lk-prog span { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* ---------- Bundle view ---------- */
#bundleView { z-index: 10; }
.bundle-card { width: min(520px, 100%); }
.bv-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; padding: 2px; margin: 10px 0 14px; }
.bv-item { background: rgba(255, 255, 255, .04); border-radius: 12px; padding: 6px; display: grid; gap: 4px; justify-items: center; font-size: 11px; font-weight: 600; }
.bv-item canvas { width: 100%; height: 52px; border-radius: 8px; background: #121b38; }
.bv-item em { font-style: normal; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.bv-item.own { opacity: .7; }
.bv-buy { display: grid; gap: 8px; }
.lk-btn.big { justify-content: center; padding: 10px; font-size: 14px; }
.lk-btn.view { background: rgba(255, 255, 255, .06); color: var(--ink-dim); margin-right: 8px; }
.lk-bundle { display: flex; align-items: center; gap: 8px; }
.lk-bundle > div:first-child { flex: 1; }
.bv-back { display: block; margin: 12px auto 0; color: var(--ink-dim); font-size: 13px; }

/* ---------- Email link / recovery ---------- */
#recover { z-index: 11; }
.rc-card { width: min(420px, 100%); }
.rc-step { display: grid; gap: 10px; margin-top: 8px; }
.rc-step input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 12px 14px; outline: none; text-align: center; }
.rc-step input:focus { border-color: rgba(255, 210, 63, .5); }
#rcCode { font-size: 28px; letter-spacing: 8px; font-weight: 800; }
.rc-sent { margin: 0; font-size: 13px; color: var(--ink-dim); }
.rc-dev { margin: 0; font-size: 12px; color: var(--gold); }
.rc-foot { margin-top: 14px; font-size: 12px; color: var(--ink-dim); }
.rc-foot .link-btn { color: var(--ink-dim); font-size: 12px; }
.home-recover { display: block; margin: 6px auto 0; font-size: 12px; color: var(--ink-dim); }
.cp-safe { margin-bottom: 10px; }
.cp-safe b { color: var(--ink); }

.cp-safe .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

#promo { z-index: 11; }
.lk-promo { text-align: center; margin: 12px 0 2px; font-size: 13px; }
#pmCode { font-size: 22px; letter-spacing: 4px; font-weight: 800; text-transform: uppercase; }

#ask { z-index: 12; }
#askInput.bad { border-color: var(--coral); }
#askOk.danger { background: linear-gradient(90deg, #ff4d6d, #c93a55); }

.ask-row { display: flex; gap: 8px; }
.ask-row input { flex: 1; min-width: 0; }
.ask-row .dice-btn { height: auto; }
#askChips { margin-top: -2px; }

@media (max-width: 420px) { .home-row .ghost-btn { font-size: 12px; padding: 9px 4px; } }

.kicker-ic { width: 22px; height: 22px; vertical-align: -6px; margin-right: 2px; }
.mode-ic { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.mode-btn .mode-ic { width: 20px; height: 20px; }

/* ---------- Protect my account ---------- */
.protect-badge { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 0; padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, .35); background: rgba(255, 210, 63, .07); color: var(--ink); cursor: pointer; text-align: left; font: inherit; transition: background .15s, border-color .15s; }
.protect-badge:hover { background: rgba(255, 210, 63, .14); }
/* rewarded ads: a second button under the main one, never in its place; the play icon says what it is */
.ad-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 8px; border-color: rgba(255, 210, 63, .35); }
.ad-btn .ic { width: 18px; height: 18px; }
.ad-btn span { display: grid; gap: 1px; text-align: left; }
.ad-btn small { font-size: 11px; font-weight: 500; color: var(--ink-dim); letter-spacing: 0; }
.ad-btn:disabled { opacity: .5; }
.cl-window { display: grid; gap: 8px; }
.cl-window .ghost-btn { justify-self: start; }
.cp-acts { display: inline-flex; gap: 8px; align-items: center; }
.cp-requests { margin: 10px 0; }
.cc-report { font: inherit; font-size: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; opacity: .8; }
.cc-report:disabled { text-decoration: none; opacity: .6; }
.lk-delete { margin-left: 14px; color: var(--ink-dim); }
.lk-delete.armed { color: #ff4d6d; }
.goal-ad { display: block; margin: 6px auto 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--gold); background: transparent; border: 1px solid rgba(255, 210, 63, .35); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
/* the Suggestion Box: the door on the home screen, the lanes on the card, the letter count under the field */
.sugg-door { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 0; padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(10, 15, 31, .55); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .2s, transform .15s; }
.sugg-door:hover { background: rgba(255, 210, 63, .1); transform: translateY(-1px); }
.sugg-door .ic { width: 30px; height: 30px; flex: none; }
.sugg-door span { display: grid; gap: 1px; flex: 1; min-width: 0; }
.sugg-door b { font-size: 13px; }
.sugg-door small { font-size: 11px; color: var(--ink-dim); }
.sugg-door .coin { width: 22px; height: 22px; flex: none; }
.sugg-door.done small { color: var(--gold); }
.fb-lanes { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.fb-lanes button { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--ink); cursor: pointer; }
.fb-lanes button.on { border-color: var(--gold); background: rgba(255, 210, 63, .14); color: var(--gold); }
.fb-count { font-size: 11px; color: var(--ink-dim); text-align: right; margin: -4px 0 6px; min-height: 14px; }
.fb-count.ok { color: var(--gold); }
.fb-tally { font-size: 11px; color: var(--ink-dim); text-align: center; margin: 6px 0 0; }
.pb-later { display: block; margin: 6px auto 0; font-size: 12px; color: var(--ink-dim); opacity: .85; }
.pb-later small { font-size: 11px; opacity: .8; display: inline-block; }   /* inline-block: the hint is not underlined with the link */
.protect-badge img { height: 58px; width: auto; max-width: 110px; flex: none; }
.protect-badge .pb-text { display: grid; gap: 1px; min-width: 0; }
.protect-badge b { font-size: 14px; }
.protect-badge small { font-size: 12px; color: var(--ink-dim); line-height: 1.3; }
.protect-badge.on { border-color: rgba(255, 210, 63, .35); background: rgba(255, 210, 63, .06); }
.protect-badge.on:hover { background: rgba(255, 210, 63, .12); }
.protect-badge.on b { color: var(--gold); }
.protect-badge.strip { margin: 10px 0 12px; padding: 6px 10px; }
.protect-badge.strip img { height: 46px; }
#protectCelebrate { margin-top: 10px; }

/* ---------- Bring a friend ---------- */
#share { z-index: 13; }   /* above the post and the closet: Bring a friend opens from both */
.share-card { width: min(560px, 100%); padding: 24px 22px; }
.share-body { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start; text-align: left; }
.share-rail { display: grid; gap: 6px; }
.sr-btn { display: grid; justify-items: center; gap: 3px; padding: 8px 4px 7px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); color: var(--ink-dim); cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 700; transition: background .15s, border-color .15s, color .15s; }
.sr-btn img { width: 34px; height: 34px; object-fit: contain; }
.sr-btn:hover { background: rgba(255, 255, 255, .08); color: var(--ink); }
.sr-btn.on { border-color: rgba(255, 210, 63, .55); background: rgba(255, 210, 63, .1); color: var(--gold); }
.share-main { min-width: 0; text-align: center; }
.share-canvas { width: 100%; max-width: 380px; height: auto; border-radius: 16px; display: block; margin: 0 auto 8px; box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
.share-hint { font-size: 12px; color: var(--ink-dim); margin-bottom: 6px; }
.share-linkrow { margin-bottom: 8px; }
.share-linkrow .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--gold); }
.share-nets { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.share-nets button { display: grid; justify-items: center; gap: 4px; background: none; border: none; color: var(--ink-dim); cursor: pointer; font: inherit; font-size: 10px; font-weight: 600; padding: 4px 0; }
.share-nets button i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); transition: background .15s, border-color .15s, color .15s; }
.share-nets button svg { width: 20px; height: 20px; }
.share-nets button:hover i { background: rgba(255, 210, 63, .14); border-color: rgba(255, 210, 63, .5); color: var(--gold); }
.share-nets button:hover { color: var(--ink); }
.share-ig { font-size: 11px; color: var(--ink-dim); margin: 8px 0 0; }
/* the gold strip: what bringing friends has earned */
.share-gold { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 16px; border-radius: 16px; background: linear-gradient(90deg, rgba(255, 210, 63, .12), rgba(255, 159, 67, .06)); border: 1px solid rgba(255, 210, 63, .3); text-align: left; }
.sg-stack { width: 56px; height: 56px; flex: none; filter: drop-shadow(0 4px 10px rgba(255, 210, 63, .35)); }
.sg-nums { display: flex; gap: 18px; flex-wrap: wrap; }
.sg-nums span { display: grid; line-height: 1.1; }
.sg-nums b { font-size: 24px; font-weight: 800; color: var(--gold); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.sg-nums small { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; }
.share-rule { font-size: 12px; color: var(--ink-dim); margin: 10px 0 8px; line-height: 1.5; }
.share-rule img { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.share-rule b { color: var(--gold); }
.share-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sh-friend { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.sh-friend i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-dim); }
.sh-friend.on { border-color: rgba(255, 210, 63, .4); }
.sh-friend.on i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.sh-friend small { color: var(--ink-dim); font-weight: 500; }
/* edit right on the card */
.share-stage { position: relative; max-width: 380px; margin: 0 auto 8px; }
.card-edit { position: absolute; inset: 0; pointer-events: none; }
.ce-swatches { position: absolute; top: 3.5%; right: 4%; display: flex; gap: 5px; padding: 4px; border-radius: 999px; background: rgba(7, 11, 23, .7); pointer-events: auto; opacity: .85; transition: opacity .15s; }
.share-stage:hover .ce-swatches { opacity: 1; }
.ce-swatches button { width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.ce-swatches button.on { border-color: #fff; }
.ce-swatches button[data-bg="night"] { background: linear-gradient(135deg, #0a0f1f, #1a2547); }
.ce-swatches button[data-bg="sunset"] { background: linear-gradient(135deg, #ff4d6d, #ff9f43); }
.ce-swatches button[data-bg="mint"] { background: linear-gradient(135deg, #0f6b5c, #5ef1c9); }
.ce-swatches button[data-bg="gold"] { background: linear-gradient(135deg, #b8791a, #ffd23f); }
.ce-swatches button[data-bg="night"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.ce-line { position: absolute; left: 12%; width: 76%; top: var(--line-top, 75%); height: 5.6%; pointer-events: auto; background: transparent; border: 1px dashed transparent; border-radius: 8px; color: transparent; caret-color: var(--gold); text-align: center; font: 600 clamp(11px, 3.2vw, 13px) Outfit, system-ui, sans-serif; outline: none; transition: border-color .15s, background .15s; }
.share-stage:hover .ce-line, .ce-line:focus { border-color: rgba(255, 210, 63, .5); background: rgba(7, 11, 23, .35); }
.ce-line:focus { color: var(--ink); background: rgba(7, 11, 23, .85); }
.ce-line.hidden { display: none; }
.ce-dice { position: absolute; right: 5%; top: calc(var(--line-top, 75%) - 0.5%); width: 6.5%; aspect-ratio: 1; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 210, 63, .4); background: rgba(7, 11, 23, .75); cursor: pointer; pointer-events: auto; display: grid; place-items: center; opacity: .85; transition: opacity .15s, transform .15s; }
.ce-dice img { width: 78%; height: 78%; }
.ce-dice:hover { opacity: 1; transform: scale(1.08); }
.ce-dice:active img { transform: rotate(180deg); transition: transform .3s; }
.ce-dice.hidden { display: none; }
.ce-line::placeholder { color: transparent; }
.share-stage:hover .ce-line::placeholder, .ce-line:focus::placeholder { color: rgba(154, 166, 201, .8); }
.ce-line:focus { color: var(--ink); }
.share-keep { display: flex; align-items: center; gap: 10px; margin: 6px auto 8px; max-width: 380px; font-size: 12px; color: var(--ink-dim); text-align: left; }
.share-keep img { height: 30px; width: auto; flex: none; }
.share-keep .link-btn { font-size: 12px; }
.share-close { display: block; margin: 12px auto 0; color: var(--ink-dim); font-size: 13px; }
.round-foot { display: flex; justify-content: center; gap: 34px; margin-top: 12px; }
.round-foot .ranch-link { margin-top: 0; }
.share-link { color: var(--gold); }
.share-link small { display: block; font-size: 11px; color: var(--ink-dim); font-weight: 600; }
@media (max-width: 520px) { .share-body { grid-template-columns: 1fr; } .share-rail { grid-template-columns: repeat(5, 1fr); } .share-nets { grid-template-columns: repeat(4, 1fr); } }
.friend-strip { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 0; padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, .3); background: rgba(255, 210, 63, .06); color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.friend-strip:hover { background: rgba(255, 210, 63, .12); }
.friend-strip img { width: 44px; height: 44px; flex: none; }
.friend-strip .pb-text { display: grid; gap: 1px; flex: 1; min-width: 0; }
.friend-strip b { font-size: 14px; }
.friend-strip small { font-size: 12px; color: var(--ink-dim); line-height: 1.3; }
.friend-strip .fs-go { color: var(--gold); font-weight: 700; font-size: 13px; }
.sr-btn.has::after { content: ''; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.sr-btn { position: relative; }

#sharePick { z-index: 14; }
.pick-card { width: min(400px, 100%); }
.pick-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.pick-grid button i { width: 52px; height: 52px; }
.pick-grid button svg { width: 24px; height: 24px; }
.pick-grid button { font-size: 11px; }

/* ---------- close icon, holler icon ---------- */
.card { position: relative; }
.x-close { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; padding: 0; border: none; background: none; cursor: pointer; z-index: 2; opacity: .9; transition: transform .15s, opacity .15s; }
.x-close img { width: 100%; height: 100%; display: block; }
.x-close:hover { opacity: 1; transform: scale(1.08); }
.holler-link { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; vertical-align: top; }
.holler-link img { width: 44px; height: 44px; }
.home-foot { display: flex; align-items: flex-end; justify-content: center; gap: 10px; flex-wrap: wrap; }
.fb-ask-t { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fb-ask-t .ic.art { width: 44px; height: 44px; vertical-align: 0; }
.fb-hero { width: 96px; height: 84px; object-fit: contain; display: block; margin: 0 auto 2px; }
.sp-items canvas.on, .cb-items canvas.on { outline: 2px solid var(--gold); outline-offset: -2px; }
.sp-items canvas, .cb-items canvas, .bv-item canvas { cursor: pointer; }
.bv-item.on canvas { outline: 2px solid var(--gold); outline-offset: -2px; }
.bv-hint { margin: 6px 0 4px; font-size: 12px; }
.fb-ask-t .ic.art { width: 26px; height: 26px; vertical-align: -8px; }

/* ---------- messages from the ranch ---------- */
.inbox-btn { position: relative; }
.inbox-btn img { width: 32px; height: 32px; position: relative; z-index: 1; }
/* something waiting: the bell swings and a gold ring pulses out around it */
.inbox-btn.new { border-color: rgba(255, 210, 63, .7); box-shadow: 0 0 0 1px rgba(255, 210, 63, .25), 0 0 18px rgba(255, 210, 63, .35); }
.inbox-btn.new img { animation: bellring 2.4s ease-in-out infinite; transform-origin: 50% 12%; filter: drop-shadow(0 0 6px rgba(255, 210, 63, .8)); }
.inbox-btn.new::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--gold); animation: bellpulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes bellring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-14deg); } 78% { transform: rotate(12deg); } 82% { transform: rotate(-9deg); } 86% { transform: rotate(6deg); } 90% { transform: rotate(-3deg); } 94% { transform: rotate(1deg); } }
@keyframes bellpulse { 0%, 68% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .inbox-btn.new img, .inbox-btn.new::before { animation: none; } }
.ib-tabs { margin: 4px 0 10px; }
#ibOut { display: grid; gap: 8px; }
#ibOut textarea, #ibOut input { width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 10px 12px; color: var(--ink); font: inherit; font-size: 14px; resize: vertical; }
#ibOut textarea:focus, #ibOut input:focus { outline: none; border-color: rgba(255, 210, 63, .6); }
#ibOut .play-btn { margin-top: 4px; }
.inbox-btn .badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
#gift { z-index: 13; } #inbox { z-index: 12; }
.confetti-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gift-card { width: min(440px, 100%); animation: cbpop .5s cubic-bezier(.2, 1.4, .4, 1); }
.gf-hero { width: 84px; height: 84px; display: block; margin: 0 auto 2px; }
.gf-state { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 11px; color: var(--ink-dim); }
.gf-state i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.gf-gold { display: inline-flex; align-items: center; gap: 8px; margin: 6px auto 10px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 210, 63, .12); border: 1px solid rgba(255, 210, 63, .4); color: var(--gold); font-size: 22px; font-weight: 800; }
.gf-gold img { width: 34px; height: 34px; }
.gf-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 6px 0 14px; }
.gf-item { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 210, 63, .25); border-radius: 12px; padding: 6px; display: grid; gap: 4px; justify-items: center; font-size: 12px; font-weight: 600; }
.gf-item canvas { width: 100%; height: 56px; border-radius: 8px; background: #121b38; }
.inbox-card { width: min(460px, 100%); }
.ib-list { display: grid; gap: 6px; max-height: 60vh; overflow: auto; text-align: left; }
.ib-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.ib-row > img { width: 36px; height: 36px; }
.ib-thumbs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; padding: 8px 1px 1px; border-top: 1px solid rgba(255, 255, 255, .06); }
.ib-thumb { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 9px; background: #121b38; border: 1px solid rgba(255, 210, 63, .3); box-sizing: border-box; }
.ib-thumb canvas { width: 44px; height: 32px; border-radius: 6px; display: block; }
.ib-thumb.gold { padding: 3px 8px 3px 4px; color: var(--gold); font-size: 12px; font-weight: 800; }
.ib-thumb.gold img { width: 26px; height: 26px; }
.ib-row b { display: block; font-size: 14px; }
.ib-row small { color: var(--ink-dim); font-size: 12px; }
.ib-row.new { border-color: rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .07); }
.ib-when { font-size: 11px; color: var(--ink-dim); white-space: nowrap; display: grid; justify-items: end; gap: 3px; }
.ib-when i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.ib-got { color: var(--gold); background: rgba(255, 210, 63, .12); }
.ib-got::before { content: '✓ '; }
.ib-new { color: #0a0f1f; background: var(--gold); }

/* corral gate: invite is one tap, next to the fence */
.cl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.cl-row2 .ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; padding: 10px 8px; }
.cl-row2 .ghost-btn .ic.art { width: 26px; height: 26px; }
.cl-row2 .invite-btn { border-color: rgba(255, 210, 63, .45); }

/* the Gold stack, always in view */
/* the wallet line: a premium strip above the name, silver and gold side by side */
.wallet-line { display: flex; align-items: center; justify-content: center; gap: 26px; width: 100%; margin: 6px 0 10px; padding: 8px 14px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, .45); background: linear-gradient(180deg, rgba(255, 210, 63, .14), rgba(255, 210, 63, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(255, 210, 63, .08); color: var(--ink); cursor: pointer; font: inherit; position: relative; }
.wallet-line:hover { border-color: rgba(255, 210, 63, .8); }
.wallet-line > span { display: inline-flex; align-items: baseline; gap: 6px; }
.wallet-line .ic.art { width: 30px; height: 30px; align-self: center; }
.wallet-line b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold); }
.wallet-line small { display: none; }   /* the coins say which is which */
.wallet-line .plus { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #1a0b10; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 15px; line-height: 1; }
/* protected: once the account is safe the badge goes quiet and small */
.protect-badge.on { padding: 6px 12px; gap: 10px; margin-top: 10px; }
.protect-badge.on img { height: 36px; max-width: 70px; }
.protect-badge.on b { font-size: 13px; }
.protect-badge.on small { font-size: 11px; }
.hud-wallet { display: flex; gap: 12px; align-items: center; margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.hud-wallet span { display: inline-flex; align-items: center; gap: 4px; }
.hud-wallet .ic.art { width: 20px; height: 20px; }
.hud-wallet .take { font-style: normal; font-size: 11px; font-weight: 800; color: var(--gold); margin-left: 5px; transform-origin: left center; }
.hud-wallet .take::before { content: '+'; }
.hud-wallet .take.zero { display: none; }
.hud-wallet b.pop { animation: vaultpop .35s cubic-bezier(.2, 1.6, .4, 1); display: inline-block; }
.death-links { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.death-links .ghost-btn { padding: 8px 12px; font-size: 13px; }

/* spend Gold: confirm before it leaves the wallet */
#spend { z-index: 11; }
.spend-card { width: min(440px, 100%); animation: cbpop .5s cubic-bezier(.2, 1.4, .4, 1); }
.sp-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; margin: 6px 0; }
.sp-items:empty { display: none; }
.sp-items canvas { width: 100%; height: 52px; border-radius: 8px; background: #121b38; }
.sp-ledger { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 6px auto 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 210, 63, .07); border: 1px solid rgba(255, 210, 63, .25); font-size: 13px; color: var(--ink-dim); text-align: left; max-width: 280px; }
.sp-ledger b { color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
.sp-ledger b.short { color: var(--coral); }
.sp-ledger b.silver { color: var(--silver); }
.sp-goal.on { border-color: var(--gold); color: var(--gold); }
.spend-card .ghost-btn { margin: 8px auto 0; display: block; }
.spend-card .ghost-btn:empty { display: none; }
.spend-card .link-btn { display: block; margin: 10px auto 0; color: var(--ink-dim); }

/* the Bank */
#bank { z-index: 10; }
.bank-card { width: min(520px, 100%); max-height: 92vh; overflow-y: auto; text-align: center; }
.bank-card .lk-sub { text-align: left; }
.bank-hint { margin: 0 0 8px; font-size: 12.5px; text-align: left; }
.vault { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 8px 0 6px; padding: 14px 12px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 210, 63, .12), rgba(255, 210, 63, .03)); border: 1px solid rgba(255, 210, 63, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.vault-coin { display: grid; justify-items: center; gap: 2px; position: relative; }
.vault-coin img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.vault-coin b { font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--gold); }
.vault-coin.silver b { color: #dfe6ff; }
.vault-coin small { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; }
.vault-coin.pop img { animation: vaultpop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes vaultpop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.vault-arrow { font-size: 12px; font-weight: 800; color: var(--ink-dim); letter-spacing: 1px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); white-space: nowrap; }
.vault-arrow::after { content: ' \2192'; }
.bank-card .lk-packs { margin-bottom: 2px; }
.bank-card .friend-strip, .bank-card .lk-money, .bank-card .lk-account { text-align: left; }
/* coins on the move: from where they were bought to the vault */
.coin-fly { position: fixed; left: 0; top: 0; width: 34px; height: 34px; pointer-events: none; z-index: 40; will-change: transform; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }

/* melting silver: coins slide into the crucible, glow molten, gold pours out */
.coin-fly.molten { filter: sepia(1) saturate(6) hue-rotate(-15deg) brightness(1.3) drop-shadow(0 0 10px rgba(255, 140, 40, .9)); }
.vault-arrow { transition: background .2s, color .2s, box-shadow .2s; }
.vault-arrow.melting { background: rgba(255, 120, 40, .18); color: #ffb347; box-shadow: 0 0 18px rgba(255, 140, 40, .45); }
.vault-arrow.flash { background: rgba(255, 210, 63, .5); color: #1a0b10; box-shadow: 0 0 26px rgba(255, 210, 63, .9); }

/* the line went quiet */
.reconnect-pill { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 9; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 77, 109, .16); border: 1px solid rgba(255, 77, 109, .5); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.reconnect-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* the board: a rider who is in the arena right now glows mint, medal and name, with no extra line */
.board td.who { max-width: 0; width: 100%; }
.board td.who .nm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board tr.on td.who b { color: var(--gold); }
.board tr.on td.rank img { filter: drop-shadow(0 0 6px rgba(255, 210, 63, .9)) drop-shadow(0 2px 5px rgba(0, 0, 0, .5)); animation: ridingglow 2.2s ease-in-out infinite; }
.board tr.on td.rank { position: relative; }
.board tr.on td.rank::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: ridingglow 2.2s ease-in-out infinite; }
@keyframes ridingglow { 50% { opacity: .55; } }

/* play with friends: one door. The code box sits under the corral list */
.friends-btn { padding: 12px 14px !important; font-size: 15px !important; }
.friends-btn .ic.art { width: 28px !important; height: 28px !important; }
.code-join { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.code-join label { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); font-weight: 800; margin-bottom: 8px; }
.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 16px; font-weight: 600; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); color: var(--ink); }
.code-row .ghost-btn { flex: none; padding: 10px 18px; }

/* your corrals on the ranch page */
.home-corrals { margin-top: 14px; gap: 6px; }
.home-corrals .corral-row { padding: 8px 10px; border-radius: 12px; }
.home-corrals .corral-row .emb { width: 32px; height: 32px; }
.home-corrals .corral-row b { font-size: 14px; }
.home-corrals .corral-row span { font-size: 11px; }
.home-corrals .corral-row.live { border-color: rgba(255, 210, 63, .45); }
.corral-row .crown { width: 13px; height: 13px; vertical-align: -1px; margin-left: 4px; }
.home-corrals + .home-row { margin-top: 8px; }
.corral-note { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: var(--ink-dim); line-height: 1.4; }
.corral-note b { color: var(--ink); }

/* the wallet line on a narrow phone: tighter gaps so the labels clear the plus */
@media (max-width: 400px) { .wallet-line { gap: 12px; padding: 8px 40px 8px 10px; } .wallet-line .ic.art { width: 26px; height: 26px; } .wallet-line b { font-size: 18px; } .wallet-line small { display: none; } }

/* pick your side: over the arena, the round running behind it */
.team-pick { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; padding: 16px; background: radial-gradient(ellipse at center, rgba(10, 15, 31, .3), rgba(7, 11, 23, .8)); animation: fadein .35s; }
.tp-card { width: min(440px, 100%); padding: 22px 20px 20px; border-radius: 22px; background: rgba(15, 23, 49, .92); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); text-align: center; }
.tp-sub { margin: 4px 0 16px; color: var(--ink-dim); font-size: 14px; }
.tp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tp-btn { display: grid; justify-items: center; gap: 6px; padding: 16px 10px 14px; border-radius: 18px; border: 2px solid transparent; background: rgba(255, 255, 255, .05); color: var(--ink); cursor: pointer; font: inherit; transition: transform .15s, border-color .15s, background .15s; }
.tp-btn img { width: 64px; height: 64px; object-fit: contain; }
.tp-btn b { font-size: 20px; letter-spacing: 1px; }
.tp-btn span { font-size: 12px; color: var(--ink-dim); }
.tp-btn.t0 { border-color: rgba(255, 77, 109, .45); } .tp-btn.t0:hover { background: rgba(255, 77, 109, .16); border-color: #ff4d6d; transform: translateY(-2px); }
.tp-btn.t1 { border-color: rgba(77, 208, 255, .45); } .tp-btn.t1:hover { background: rgba(77, 208, 255, .16); border-color: #4dd0ff; transform: translateY(-2px); }

/* the instant replay on the death card */
.replay { position: relative; margin: 10px 0 14px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: #0d1430; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.replay canvas { display: block; width: 100%; aspect-ratio: 16 / 9; }
.replay-share { position: absolute; right: 8px; bottom: 8px; padding: 6px 12px !important; font-size: 12px !important; background: rgba(10, 15, 31, .75) !important; backdrop-filter: blur(6px); }
.replay-share .ic.art { width: 18px; height: 18px; vertical-align: -4px; }
.replay-share.making { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.replay-share:disabled { opacity: .8; cursor: default; }

/* Your style: the bell and the wallet share the header line */
.wallet-pair { display: inline-flex; align-items: center; gap: 8px; }
.wallet-bell { position: relative; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .4); background: rgba(255, 210, 63, .1); display: grid; place-items: center; cursor: pointer; padding: 0; }
.wallet-bell img { width: 24px; height: 24px; }
.wallet-bell .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }

/* riding for: the goal card on the ranch page */
.goal-card { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 10px; padding: 8px 12px 8px 8px; border-radius: 16px; border: 1px solid rgba(255, 210, 63, .35); background: linear-gradient(135deg, rgba(255, 210, 63, .1), rgba(255, 77, 109, .06)); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: transform .15s, border-color .15s; }
.goal-card:hover { transform: translateY(-1px); border-color: rgba(255, 210, 63, .7); }
.goal-card.ready { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 210, 63, .25), 0 0 22px rgba(255, 210, 63, .3); animation: goalready 1.8s ease-in-out infinite; }
@keyframes goalready { 50% { box-shadow: 0 0 0 1px rgba(255, 210, 63, .45), 0 0 30px rgba(255, 210, 63, .5); } }
.goal-pv { width: 66px; height: 44px; border-radius: 10px; flex: none; background: #121b38; }
.goal-body { flex: 1; min-width: 0; }
.goal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.goal-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-k { display: inline; font-size: 9px; letter-spacing: 2px; color: var(--gold); font-weight: 800; margin-right: 6px; vertical-align: 1px; }
.goal-name { display: inline; font-size: 14px; }
.goal-head .goal-sub { flex: none; font-variant-numeric: tabular-nums; }
.goal-card { padding: 8px 12px 8px 8px; gap: 10px; }
.goal-card .goal-bar { margin: 8px 0 2px; }
.goal-card .goal-go { display: none; }
.goal-card.ready .goal-go { display: inline-block; }
.goal-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); margin: 6px 0 5px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.goal-bar::after { content: ''; position: absolute; inset: 0; border-radius: 999px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(10, 15, 31, .55) calc(10% - 1px) 10%); pointer-events: none; }   /* ten ticks: each is a tenth of the way */
.goal-bar i { position: relative; display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #aeb8d8, #dfe6ff 60%, #ffffff); box-shadow: 0 0 10px rgba(223, 230, 255, .45); transition: width .8s cubic-bezier(.2, .9, .3, 1); }
.goal-bar i::after { content: ''; position: absolute; right: -9px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: url('art/silver-coin.png') center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); z-index: 1; }   /* the coin rides the fill edge */
.goal-card.ready .goal-bar i { background: linear-gradient(90deg, #ffb300, #ffd23f); }
.goal-card.ready .goal-bar i::after, .goal-mini .goal-bar i[style*="100%"]::after { background-image: url('art/gold-coin-96.png'); }
.goal-card.ready .goal-bar i { background: linear-gradient(90deg, #ffb300, #ffd23f); }
.goal-sub { font-size: 11px; color: var(--ink-dim); }
.goal-go { flex: none; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--silver); padding: 6px 10px; border-radius: 999px; background: rgba(223, 230, 255, .1); }   /* a Silver thing: silver until it is ready */
.goal-card.ready .goal-go { color: #0a0f1f; background: var(--gold); }
/* the small one on the round-over and death cards */
/* the same Riding-for card wherever it appears (death card, round over, Trading Post, closet): the ranch card's look */
.goal-mini { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; padding: 8px 12px 8px 8px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 210, 63, .1), rgba(255, 77, 109, .06)); border: 1px solid rgba(255, 210, 63, .35); text-align: left; color: var(--ink); }
.goal-mini.ready { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 210, 63, .25), 0 0 22px rgba(255, 210, 63, .3); }
.goal-mini canvas { width: 66px; height: 44px; border-radius: 10px; flex: none; background: #121b38; }
.goal-mini > div { flex: 1; min-width: 0; }
.goal-mini b { display: inline; font-size: 14px; font-weight: 800; }
.goal-mini .goal-bar { margin: 8px 0 2px; }
.goal-mini small { font-size: 11px; color: var(--ink-dim); }
.goal-mini.ready .goal-bar i { background: linear-gradient(90deg, #ffb300, #ffd23f); }
/* the picker */
.rf-card { padding-top: 24px; }
.rf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 12px; }
.rf-item { display: grid; gap: 4px; padding: 8px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: var(--ink); cursor: pointer; font: inherit; text-align: center; transition: transform .15s, border-color .15s; }
.rf-item:hover { transform: translateY(-2px); border-color: var(--gold); }
.rf-item canvas { width: 100%; aspect-ratio: 3 / 2; border-radius: 10px; background: #121b38; }
.rf-item b { font-size: 14px; }
.rf-kind { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.rf-item .goal-bar { margin: 4px 0 2px; height: 5px; }
.rf-item small { font-size: 11px; color: var(--ink-dim); }
@media (max-width: 420px) { .rf-row { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .rf-item { padding: 6px; } .rf-item b { font-size: 12px; } }
.bank-oneline { margin: 0 0 10px; }

/* Your style and the Trading Post: two rooms, one look */
#post { z-index: 10; }
.shop-wallet { margin: 6px 0 8px; }
.gold-strike { cursor: pointer; }
.post-tabs .tab.gold { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.post-tabs .tab.gold .ic.art { width: 16px; height: 16px; }
.post-tabs .tab.gold.active { background: linear-gradient(135deg, rgba(255, 210, 63, .22), rgba(255, 77, 109, .12)); }
.lk-item:hover { transform: translateY(-2px); border-color: rgba(255, 210, 63, .5); }
.lk-item.owned canvas { opacity: .8; }
.lk-tag { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; color: var(--ink-dim); padding: 4px 0 2px; }
.lk-tag.on { color: var(--gold); }
.lk-price { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin: 2px auto 0; padding: 5px 10px; border-radius: 999px; background: rgba(255, 210, 63, .14); color: var(--gold); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.lk-price img { width: 14px; height: 14px; }
.lk-tag.goal { color: var(--gold); }
.lk-item.is-goal { border-color: rgba(255, 210, 63, .5); }
/* the one being worn: a gold rim with a glow, a slow sheen across it, the art at full strength, the tag a solid gold pill */
.lk-item.on { position: relative; overflow: hidden; border-color: transparent; background: linear-gradient(180deg, rgba(255, 210, 63, .18), rgba(255, 255, 255, .04)); box-shadow: 0 0 0 1.5px rgba(255, 210, 63, .95), 0 0 18px rgba(255, 210, 63, .35), inset 0 0 26px rgba(255, 210, 63, .08); }
.lk-item.on::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 60%); background-size: 250% 100%; animation: foil 4.5s ease-in-out infinite; }
.lk-item.on canvas { opacity: 1; box-shadow: 0 0 0 1px rgba(255, 210, 63, .4); }
.lk-item.on:hover { border-color: transparent; }
.lk-tag.on { align-self: center; background: linear-gradient(180deg, #ffe27a, #ffb300); border: 0; color: #1a1200; padding: 3px 9px; border-radius: 999px; font-size: 9px; letter-spacing: 1.5px; box-shadow: 0 2px 6px rgba(255, 180, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6); }
.lk-price em { font-style: normal; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; margin-left: 4px; }
.lk-item.pack { grid-column: 1 / -1; flex-direction: row; align-items: center; text-align: left; gap: 10px; padding: 8px 10px; background: linear-gradient(135deg, rgba(255, 210, 63, .08), rgba(255, 255, 255, .03)); border-color: rgba(255, 210, 63, .3); }
.lk-item.pack .lk-name { flex: 1; min-width: 0; }
.lk-item.pack .lk-desc { min-height: 0; flex: none; }
.pack-peek { display: flex; gap: 4px; flex: none; }
.pack-peek canvas { width: 44px; height: 30px; border-radius: 6px; background: #121b38; }
/* the closet door */
.post-door { display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0 4px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255, 210, 63, .45); background: linear-gradient(135deg, rgba(255, 210, 63, .14), rgba(255, 77, 109, .08)); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: transform .15s, border-color .15s; }
.post-door:hover { transform: translateY(-1px); border-color: var(--gold); }
.pd-peek { display: flex; gap: 4px; flex: none; }
.pd-peek canvas { width: 40px; height: 27px; border-radius: 7px; background: #121b38; }
.pd-text { flex: 1; min-width: 0; }
.pd-text b { display: block; font-size: 15px; white-space: nowrap; }
.pd-text small { font-size: 12px; color: var(--ink-dim); }
.pd-go { flex: none; font-size: 26px; font-weight: 800; color: var(--gold); line-height: 1; padding: 0 2px; }
.post-gold { text-align: center; }
.post-gold .friend-strip { text-align: left; }
.sp-goal { display: block; margin: 8px auto 0; }
.sp-goal .ic.art { width: 18px; height: 18px; vertical-align: -4px; }
.sp-goal .goal-k { margin-right: 4px; vertical-align: 0; }
.sp-goal.on .goal-k { color: var(--gold); }
.sp-goal em { font-style: normal; margin-left: 8px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; }
.goal-mini { cursor: pointer; }
@media (max-width: 400px) { .lk-items { grid-template-columns: repeat(3, 1fr); gap: 6px; } .lk-item { padding: 6px; } .lk-name { font-size: 12px; } .lk-price { font-size: 12px; padding: 4px 8px; } .lk-item canvas { height: 54px; } }

/* the near miss on the round-over card, and what the winner had on */
.goal-offer { display: block; margin-top: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .1); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.goal-offer b { color: var(--gold); }
.podium-wore-row:empty { display: none; }
.podium-wore { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 8px 0 2px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: var(--ink-dim); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.podium-wore b { color: var(--ink); }
.podium-wore em { font-style: normal; color: var(--gold); font-weight: 700; font-size: 12px; white-space: nowrap; }
.lk-pack.twice { border-color: rgba(255, 210, 63, .45); box-shadow: 0 0 16px rgba(255, 210, 63, .18); }
.lk-pack .g s { color: var(--ink-dim); font-size: 13px; font-weight: 600; margin-right: 4px; }
.lk-pack .bonus.first { color: var(--gold); }

/* the wallet you can see: counters pop as coins land */
.hud-wallet b.pop, .hud-wallet .take.pop { animation: walletpop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes walletpop { 0% { transform: scale(1); } 35% { transform: scale(1.35); color: #fff; } 100% { transform: scale(1); } }
.hud-wallet b, .hud-wallet .take { display: inline-block; transform-origin: center; }
/* Payday */
#payday { z-index: 12; background: radial-gradient(ellipse at center, rgba(255, 210, 63, .14), rgba(7, 11, 23, .92)); }
#payday.leaving .payday-card { animation: pdleave .5s ease-in forwards; }
@keyframes pdleave { to { transform: translateY(-30px) scale(.96); opacity: 0; } }
.payday-card { width: min(420px, 100%); text-align: center; animation: cbpop .5s cubic-bezier(.2, 1.4, .4, 1); }
.pd-place { font-size: 14px; color: var(--ink-dim); margin: 2px 0 14px; letter-spacing: .5px; }
.pd-lines { display: grid; gap: 6px; margin: 0 0 14px; }
.pd-line { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .3s cubic-bezier(.2, 1.4, .4, 1); font-size: 14px; }
.pd-line.in { opacity: 1; transform: none; }
.pd-line b { color: #dfe6ff; font-variant-numeric: tabular-nums; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; }
.pd-line b .ic.art { width: 22px; height: 22px; }
.pd-total { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 6px 0 12px; font-weight: 800; }
.pd-total img { width: 44px; height: 44px; align-self: center; }
.pd-total b { font-size: 46px; letter-spacing: -1px; color: #dfe6ff; font-variant-numeric: tabular-nums; line-height: 1; }
.pd-total > span { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--silver); }
.pd-gold > span { color: var(--gold); }
.pd-gold { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 12px; }
.pd-gold img { width: 32px; height: 32px; }
.pd-gold b { font-size: 30px; color: var(--gold); }
.pd-cap { font-size: 12px; color: var(--coral); margin: -4px 0 10px; }
#pdCollect { animation: cbpop .4s cubic-bezier(.2, 1.6, .4, 1); }

/* the First Loop's beat card */
.tut-beat { position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 118px; z-index: 6; width: min(360px, calc(100% - 24px)); padding: 10px 14px 8px; border-radius: 16px; background: rgba(10, 15, 31, .86); border: 1px solid rgba(255, 210, 63, .5); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 210, 63, .15); text-align: center; backdrop-filter: blur(6px); pointer-events: auto; }
.tut-beat.pop { animation: cbpop .45s cubic-bezier(.2, 1.4, .4, 1); }
body.welcoming .tut-beat, body.welcoming .tut-point { visibility: hidden; }   /* the name card comes first; the lesson's card waits behind it */
.tb-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; }
.tb-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.tb-dots i.done { background: var(--gold); }
.tb-dots i.now { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.tb-text { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }
.tb-text div + div { margin-top: 4px; }
.tb-skip { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--ink-dim); }
@media (max-width: 720px) { .tut-beat { top: 150px; } }
.tb-go { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px auto 4px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 210, 63, .12); border: 1px solid rgba(255, 210, 63, .45); color: var(--gold); font-weight: 800; font-size: 13px; }
.tb-finger { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--gold); animation: tbpress 1.4s ease-in-out infinite; }
.tb-finger::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--gold); animation: tbpressdot 1.4s ease-in-out infinite; }
@keyframes tbpress { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes tbpressdot { 0%, 100% { transform: scale(.4); } 50% { transform: scale(1); } }
.tut-beat.holding { border-color: var(--gold); box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 210, 63, .35), 0 0 30px rgba(255, 210, 63, .25); }
.tut-beat.holding .tb-text { font-size: 17px; }
.snap-wrap { position: relative; }
.tut-point { position: absolute; left: 34px; bottom: calc(100% + 14px); transform: translateX(-50%); padding: 7px 12px; border-radius: 10px; background: rgba(10, 15, 31, .92); border: 1px solid rgba(255, 210, 63, .6); color: var(--gold); font-weight: 800; font-size: 13px; letter-spacing: 2px; white-space: nowrap; animation: tpbob .9s ease-in-out infinite; pointer-events: none; }
.tut-point i { position: absolute; left: 50%; top: 100%; width: 0; height: 0; margin-left: -8px; border: 8px solid transparent; border-top-color: rgba(255, 210, 63, .8); }
@keyframes tpbob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -8px); } }
.snap-btn.tut-here, .sell-btn.tut-here { animation: snaphere 1s ease-in-out infinite; }
@keyframes snaphere { 0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 0 rgba(255, 210, 63, .8); } 50% { box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 14px rgba(255, 210, 63, 0); } }
@media (max-width: 720px) { .tut-point { left: 38px; } }
.payday-card { max-width: 100%; min-width: 0; overflow: hidden; }
.pd-total { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 480px) { .pd-total b { font-size: 34px; } .pd-total img { width: 34px; height: 34px; } .pd-total > span, .pd-gold > span { font-size: 11px; letter-spacing: 1.5px; } }
.rc-foot:has(#rfMore.hidden) .rf-dot { display: none; }
/* the name-change confirm */
.nc-card { width: min(420px, 100%); text-align: center; animation: cbpop .5s cubic-bezier(.2, 1.4, .4, 1); }
#nameChange, #nameConfirm { z-index: 13; }   /* above the home screen and the ranch */
#ncPreview, #nchPreview { width: 100%; height: 90px; border-radius: 14px; background: #121b38; margin: 0 0 12px; }
#nchForm { margin: 0; }
#nchForm .ask-row { margin-bottom: 10px; }
#nchInput { text-align: center; font-size: 20px; font-weight: 800; }
/* what a name costs, in one line, with the coin the wallet uses */
.nch-cost { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-dim); margin: 0 0 12px; }
.nch-cost .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 210, 63, .1); border: 1px solid rgba(255, 210, 63, .35); color: var(--gold); font-weight: 800; font-size: 12px; }
.nch-cost .pill img { width: 14px; height: 14px; }
.nch-cost .pill.free { background: rgba(255, 210, 63, .12); border-color: rgba(255, 210, 63, .4); color: var(--gold); }
.nch-cost .pill.on { box-shadow: 0 0 0 1.5px rgba(255, 210, 63, .8), 0 0 10px rgba(255, 210, 63, .35); }
.nch-cost .pill.free.on { box-shadow: 0 0 0 1.5px rgba(255, 210, 63, .8), 0 0 10px rgba(255, 210, 63, .35); }
.nch-cost .dot { opacity: .5; }
.nch-cost .pill.short { opacity: .55; border-style: dashed; cursor: pointer; }
#nchOk.dim { filter: saturate(.35) brightness(.7); box-shadow: none; }
.nc-plate { position: relative; margin: 0 auto 12px; padding: 14px 18px 12px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, .45); background: linear-gradient(180deg, rgba(255, 210, 63, .12), rgba(255, 255, 255, .03)); }
.nc-plate b { display: block; font-size: 26px; font-weight: 800; letter-spacing: .3px; }
.nc-tag { display: inline-block; font-size: 9px; letter-spacing: 2.5px; font-weight: 800; color: var(--gold); margin-bottom: 4px; }
.nc-card .sp-ledger { margin-bottom: 14px; }
.nc-card .play-btn { margin-top: 0; }
/* Silver reads silver, Gold reads gold, everywhere a wallet shows both */
:root { --silver: #dfe6ff; }
.hud-wallet span:first-child b, .wallet-line > span:first-child b, .gs-amount { color: var(--silver); }
.hud-wallet span:first-child .take { color: #f4f6ff; }
.hud-wallet span:last-child .take { color: var(--gold); }
.gs-amount .gs-gold { color: var(--gold); }
.coin-xs { width: 14px; height: 14px; vertical-align: -3px; }
/* the pill is a picture in three slices (two caps and a stretched middle), and scaling it re-samples the slices with
   hairline gaps at the caps: so the button never scales. It lifts and brightens instead; the press is a 1px dip */
.play-btn.pulse { animation: playpulse 1.2s ease-in-out infinite; }
@keyframes playpulse { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 10px 22px rgba(255, 110, 80, .35)); } 50% { transform: translateY(-3px); filter: drop-shadow(0 16px 30px rgba(255, 110, 80, .6)) brightness(1.08); } }
/* the first open */
#welcome { z-index: 14; background: radial-gradient(ellipse at center, rgba(255, 77, 109, .18), rgba(7, 11, 23, .94)); }
#welcomeConfetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.welcome-card { width: min(420px, calc(100vw - 32px)); max-width: calc(100vw - 32px); box-sizing: border-box; overflow: hidden; text-align: center; animation: cbpop .55s cubic-bezier(.2, 1.4, .4, 1); }
.welcome-card .podium-title { font-size: 12px; letter-spacing: 3px; }
.welcome-card .cb-name { font-size: 26px; }
.wc-logo { width: min(240px, 70%); margin: 4px auto 10px; display: block; }
.welcome-card .cb-name { margin: 6px 0 14px; }
.wc-name { display: flex; gap: 8px; align-items: stretch; margin: 0 0 8px; }
.wc-name input, .wc-dealt { flex: 1; min-width: 0; font: inherit; font-size: 22px; font-weight: 800; text-align: center; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, .45); background: rgba(255, 255, 255, .06); color: #fff; display: grid; place-items: center; }
.wc-dealt.pop { animation: cbpop .4s cubic-bezier(.2, 1.4, .4, 1); }
.wc-hint { font-size: 12px; color: var(--ink-dim); margin: 0 0 6px; }
#nameInput[readonly] { cursor: default; }
.lk-name-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.lk-name-label { font-size: 12px; color: var(--ink-dim); }
.lk-name-row b { flex: 1; text-align: left; font-size: 16px; }
.wc-name input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 210, 63, .2); }
.wc-name input::placeholder { color: rgba(255, 255, 255, .45); font-weight: 600; }
.wc-name .dice-btn { width: 54px; flex: none; }
.welcome-card .name-chips { margin: 0 0 10px; }
.welcome-card .play-btn { margin-top: 8px; }
.wc-pay { margin: 12px 0 4px; font-size: 13px; color: var(--ink-dim); display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.wc-pay .ic.art { width: 20px; height: 20px; }
.wc-pay b { color: var(--silver); }
body.welcoming #home { visibility: hidden; }
.fb-linked { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--ink-dim); margin: 6px 0 4px; }
.fb-linked .ic.art { width: 18px; height: 18px; }
/* the earned section of the Trading Post: one crown in progress, the ones already won */
.lk-section { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; margin: 14px 2px 2px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.lk-section b { font-size: 12px; letter-spacing: 3px; color: var(--gold); }
.lk-section span { font-size: 12px; color: var(--ink-dim); }
.lk-item.earn-now { grid-column: span 2; border-color: rgba(255, 210, 63, .45); background: linear-gradient(180deg, rgba(255, 210, 63, .1), rgba(255, 255, 255, .03)); }
.lk-item.earn-now canvas { height: 84px; }
.earn-kicker { font-size: 10px; letter-spacing: 2px; color: var(--gold); font-weight: 800; }
.earn-left { font-size: 11px; color: var(--ink-dim); }
.lk-item.earn-ahead { justify-content: center; cursor: default; color: var(--ink-dim); font-size: 11px; line-height: 1.3; }
.lk-item.earn-ahead b { font-size: 22px; color: #fff; }
.lk-item.earn-ahead.done b { color: var(--gold); font-size: 16px; }
@media (max-width: 400px) { .lk-item.earn-now { grid-column: 1 / -1; } .lk-item.earn-ahead { grid-column: 1 / -1; flex-direction: row; justify-content: center; align-items: center; gap: 10px; padding: 10px 14px; } }
/* the Herd (docs/HERD.md) */
.head-count img { width: 16px; height: 16px; vertical-align: -3px; margin: 0 2px 0 2px; }
.head-count b { display: inline-block; color: #fff1d6; }
.head-count b.pop { animation: walletpop .45s cubic-bezier(.2, 1.6, .4, 1); }
.pd-herd { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; margin: -6px 0 12px; font-size: 13px; color: var(--ink-dim); }
.pd-herd img { width: 26px; height: 26px; }
.pd-herd span { margin-left: 6px; }
.pd-herd b { color: #fff1d6; }
/* the herd book: painted frame cards, two to a row. The card face is art only (frame, parchment window, cow, nameplate,
   a brass count badge); the words live under the card in the book's own type */
.herd-book { margin: 0 0 12px; }
.herd-book .lk-section { margin-top: 4px; padding-top: 0; border-top: 0; }
.herd-book .lk-section b { white-space: nowrap; }
.herd-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 12px; padding-top: 10px; }   /* a wide row gap: a caption belongs to the card above it */
@media (min-width: 560px) { .herd-cards { grid-template-columns: repeat(3, 1fr); } }
.herd-slot { --rc: #dfe6ff; }
.herd-slot:has(.uncommon) { --rc: #5ef1c9; } .herd-slot:has(.rare) { --rc: #4dd0ff; } .herd-slot:has(.epic) { --rc: #c77dff; } .herd-slot:has(.legendary) { --rc: #ffd23f; }
.herd-cd { position: relative; aspect-ratio: 543 / 724; }
.herd-cd .hc-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.herd-cd.tier-master .hc-name { top: 65%; height: 16%; }   /* clear of the longhorn skull on the master frame's foot */
.herd-cd .hc-window { position: absolute; left: 13.5%; top: 10%; width: 73%; height: 54.5%; background: radial-gradient(ellipse at 50% 40%, #fbf5e6, #ead9b8); box-shadow: inset 0 0 18px rgba(80, 50, 20, .35); display: grid; place-items: center; z-index: 1; }
.herd-cd .hc-window img { max-width: 90%; max-height: 88%; filter: drop-shadow(0 3px 4px rgba(60, 30, 10, .35)); }
.herd-cd.hole .hc-window { background: #151c3a; box-shadow: inset 0 0 18px rgba(0, 0, 0, .6); }
.herd-cd.hole .hc-window img { filter: brightness(0) opacity(.45); }
/* the name written straight on the wood panel */
.herd-cd .hc-name { position: absolute; left: 14%; right: 14%; top: 66%; height: 17%; z-index: 3; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff3d6; text-shadow: 0 2px 3px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .6); letter-spacing: .4px; }
.herd-cd.hole .hc-name { color: #cbbfa6; font-size: 22px; }
/* the brass count badge on the frame's top right corner */
.herd-cd .hc-count { position: absolute; top: 1.5%; right: 3%; z-index: 4; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #1a0b10; background: radial-gradient(circle at 35% 30%, #ffe9a8, #d9a520 60%, #9a6a10); border: 2px solid #6b4a12; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.herd-under { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 6px; text-align: center; }
.herd-under .hc-rarity { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 800; color: var(--rc); }
.herd-under small { font-size: 11px; color: var(--ink-dim); }
.herd-under small b { color: var(--ink); }
.herd-under em { font-style: normal; font-size: 10.5px; color: var(--gold); }
/* the foil sheen from gold, over the frame only */
.herd-cd.tier-gold::after, .herd-cd.tier-animated::after, .herd-cd.tier-master::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .18) 48%, rgba(255, 210, 63, .22) 52%, transparent 58%); background-size: 250% 100%; animation: foil 5s ease-in-out infinite; -webkit-mask: url('cards/frame-4.png') center / 100% 100%; mask: url('cards/frame-4.png') center / 100% 100%; }
@keyframes foil { 0% { background-position: 120% 0; } 60% { background-position: -20% 0; } 100% { background-position: -20% 0; } }
/* the horseshoe on the animated frame swings from its rope */
.herd-cd .hc-shoe { position: absolute; left: 50%; top: 0; width: 22%; z-index: 3; transform-origin: 50% 6%; margin-left: -11%; animation: shoeswing 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes shoeswing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.herd-cd.tier-master { filter: drop-shadow(0 0 12px rgba(255, 210, 63, .45)); }
.herd-card { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 241, 214, .25); background: linear-gradient(180deg, rgba(255, 241, 214, .08), rgba(255, 255, 255, .03)); text-align: left; }
.herd-card > img { width: 52px; height: 52px; flex: none; }
.herd-card .hc-text { flex: 1; min-width: 0; }
.herd-card .hc-text b { display: block; font-size: 15px; }
.herd-card .hc-text small { display: block; font-size: 11.5px; color: var(--ink-dim); }
.herd-card .goal-bar { margin: 5px 0 3px; }
.herd-card .hc-count { font-size: 26px; font-weight: 800; color: #fff1d6; font-variant-numeric: tabular-nums; flex: none; }
.herd-card.master { border-color: rgba(255, 210, 63, .6); }
.herd-card .goal-bar i::after { display: none; }
.herd-book .lk-section b { white-space: nowrap; }
.herd-cd.hole .hc-art { height: 72px; }
.herd-cd.hole .hc-art img { max-height: 72px; }
.herd-cd.hole small { display: block; }

/* ---------- the Board ---------- */
.home-row.two { grid-template-columns: 1fr 1fr; margin-top: 8px; }
.home-row.two .howto-btn { margin-top: 0; }
.board-btn .ic.art { width: 44px !important; height: 44px !important; margin: -8px 0; filter: drop-shadow(0 3px 6px rgba(255, 180, 0, .35)); }
.home-row.two .ghost-btn { min-height: 48px; }
.board-btn .count { margin-left: 4px; }
.board-card { width: min(460px, 100%); text-align: center; max-height: 92vh; overflow: auto; }
.board-hero { height: 96px; margin: -6px 0 2px; display: grid; place-items: center; }
.board-hero img { height: 96px; width: auto; filter: drop-shadow(0 8px 18px rgba(255, 180, 0, .35)); animation: cbpop .5s cubic-bezier(.2, 1.4, .4, 1); }
.board-card .podium-title { margin-bottom: 8px; }
.board-tabs { margin-bottom: 8px; }
.board-period { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 10px; }
.board-period .chip { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: var(--ink-dim); cursor: pointer; }
.board-period .chip.on { background: rgba(255, 210, 63, .14); border-color: rgba(255, 210, 63, .5); color: var(--gold); }
.board-reset { margin-left: auto; font-size: 11px; color: var(--ink-dim); }
.board-list { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.board-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); color: var(--ink); font: inherit; cursor: pointer; text-align: left; width: 100%; }
.board-row:hover { border-color: rgba(255, 210, 63, .4); }
a.board-row, a.board-row b, a.board-row small { text-decoration: none; }
.board-row .rk { font-weight: 800; font-size: 14px; color: var(--ink-dim); text-align: center; }
.board-row .rk img { width: 30px; height: 30px; display: block; margin: 0 auto; }
.board-row .who { min-width: 0; display: flex; align-items: center; gap: 8px; }
.board-row .who img { width: 26px; height: 26px; flex: none; }
.board-row .who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-row .who small { display: block; font-size: 11px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-row .pts { font-weight: 800; color: var(--gold); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-row .pts small { display: block; font-size: 10px; color: var(--ink-dim); font-weight: 600; text-align: right; }
.board-row.top1 { background: linear-gradient(90deg, rgba(255, 210, 63, .16), rgba(255, 255, 255, .04)); border-color: rgba(255, 210, 63, .45); }
.board-row.top2 { background: linear-gradient(90deg, rgba(220, 225, 240, .12), rgba(255, 255, 255, .04)); }
.board-row.top3 { background: linear-gradient(90deg, rgba(205, 127, 50, .14), rgba(255, 255, 255, .04)); }
.board-row.me, .board-me .board-row { border-color: rgba(255, 210, 63, .55); background: rgba(255, 210, 63, .08); }
.board-me { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .12); text-align: left; }
.board-me .board-lbl { font-size: 10px; letter-spacing: 2px; color: var(--gold); font-weight: 800; margin: 0 0 4px 4px; }
.board-empty { padding: 22px 10px; color: var(--ink-dim); font-size: 13px; text-align: center; }
.board-how { font-size: 11px; color: var(--ink-dim); margin: 12px 0 0; line-height: 1.4; }
/* a rider's page */
.rider-card { padding-bottom: 18px; }
.rider-card .ranch-scene { margin-bottom: 0; }
.rp-rank { position: absolute; left: 18px; top: 40px; display: flex; gap: 6px; flex-wrap: wrap; }
.rp-rank span { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: rgba(10, 15, 31, .62); border: 1px solid rgba(255, 210, 63, .35); color: var(--gold); }
.rp-rank span.dim { color: var(--ink-dim); border-color: rgba(255, 255, 255, .12); }
.rp-body { padding: 12px 0 0; text-align: left; }
.rp-record { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 12px; }
.rp-record div { text-align: center; padding: 8px 4px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.rp-record b { display: block; font-size: 16px; }
.rp-record small { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.rp-h { font-size: 12px; letter-spacing: 3px; color: var(--gold); font-weight: 800; margin: 12px 0 8px; }
.rp-corrals { display: flex; flex-direction: column; gap: 6px; }
.rp-corral { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: var(--ink); text-decoration: none; font-weight: 700; }
.rp-corral img { width: 28px; height: 28px; }
.rp-corral small { margin-left: auto; color: var(--gold); font-size: 11px; }
.rp-none { font-size: 12px; color: var(--ink-dim); }
.board-line { display: inline-flex; align-items: center; gap: 6px; margin: 8px auto 0; font-size: 12px; color: var(--ink-dim); background: none; border: 0; font: inherit; cursor: pointer; }
.board-line img { width: 20px; height: 20px; }
.board-line b { color: var(--gold); }
.ranch-scene #rpCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ranch-scene #rpPreview { position: absolute; left: 0; bottom: 0; width: 100%; height: 84px; margin: 0; background: transparent; border-radius: 0; }
.rider-card .ranch-sign { right: 56px; }

/* the recovery code on the protect card: for the rider who would rather write something down */
.rc-codeline { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 210, 63, .07); border: 1px dashed rgba(255, 210, 63, .4); font-size: 12px; color: var(--ink-dim); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; }
.rc-codeline b { font-size: 18px; letter-spacing: 2px; color: var(--gold); font-variant-numeric: tabular-nums; }
.rc-codeline small { flex-basis: 100%; font-size: 11px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.rc-codeline small img { width: 18px; height: 18px; }
.rc-codeline small em { font-style: normal; color: var(--ink); font-weight: 700; }
#spHave.pop { animation: cbpop .3s cubic-bezier(.2, 1.4, .4, 1); }

.board-week { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -4px 0 10px; }
.board-week b { font-size: 13px; color: var(--ink); min-width: 140px; text-align: center; }
.wk-arrow { width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: var(--gold); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; }
.wk-arrow:disabled { opacity: .25; cursor: default; }
.board-more { display: block; margin: 4px auto 0; font-size: 12px; color: var(--gold); }

#respawnBtn.dim { filter: saturate(.3) brightness(.7); box-shadow: none; cursor: default; }

/* the lessons on How to play */
.lessons { margin: 0 0 14px; text-align: left; }
.lessons-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; }
.lessons-head b { font-size: 12px; letter-spacing: 3px; color: var(--gold); }
.lessons-head span { font-size: 11px; color: var(--ink-dim); }
.lesson-list { display: flex; flex-direction: column; gap: 6px; }
.lesson { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 210, 63, .07); border: 1px solid rgba(255, 210, 63, .3); color: var(--ink); font: inherit; text-align: left; cursor: pointer; width: 100%; }
.lesson.rode { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .08); }
.lesson .ls-ico img { width: 34px; height: 34px; object-fit: contain; display: block; }
.lesson .ls-body { min-width: 0; }
.lesson .ls-body b { display: block; font-size: 14px; }
.lesson .ls-body small { display: block; font-size: 11px; color: var(--ink-dim); line-height: 1.3; }
.lesson .ls-pay { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; color: var(--silver); font-size: 14px; white-space: nowrap; }
.lesson .ls-pay .ic.art { width: 16px; height: 16px; vertical-align: -3px; }
.lesson .ls-pay em { font-style: normal; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.lesson .ls-done { font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--ink-dim); }
.lesson.rode .ls-pay em { font-weight: 600; color: rgba(255, 210, 63, .8); }
.lesson .ls-amt { display: inline-flex; align-items: center; gap: 4px; }
.howto-btn .count { margin-left: 4px; }
.lesson.just { animation: cbpop .5s cubic-bezier(.2, 1.4, .4, 1); box-shadow: 0 0 0 1.5px rgba(255, 210, 63, .8), 0 0 14px rgba(255, 210, 63, .3); }

/* the code box flashes when copied */
.rc-codeline.copied { animation: copiedflash .5s ease-out; }
@keyframes copiedflash { 0% { background: rgba(255, 210, 63, .35); border-color: rgba(255, 210, 63, .9); } 100% { background: rgba(255, 210, 63, .07); border-color: rgba(255, 210, 63, .4); } }
/* the board: week as a name with its dates small under it; emblems keep their shape; a quiet reload, no blank flash */
.board-week b { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.board-week b small { font-size: 10px; font-weight: 600; color: var(--ink-dim); letter-spacing: .5px; }
.board-row .who img { object-fit: contain; }
.board-list.loading { opacity: .55; transition: opacity .15s; }

/* who is riding: a quiet live line right under PLAY, where the decision is made; nothing above the wallet */
.live-line { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -4px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--ink-dim); }
.live-line .dot { width: 7px; height: 7px; margin: 0; background: var(--gold); box-shadow: 0 0 8px var(--gold), 0 0 2px #fff inset; animation: blink 2s infinite; }
.live-line.hidden { display: none; }

/* PLAY with the game type on its shoulder */
.play-group { display: flex; align-items: stretch; gap: 8px; margin-top: 4px; }
.play-group .play-btn { flex: 1; min-width: 0; margin-top: 0; }
.mode-switch { position: relative; flex: none; width: 72px; border-radius: 18px; border: 1px solid rgba(255, 210, 63, .35); background: linear-gradient(180deg, rgba(255, 210, 63, .12), rgba(255, 255, 255, .03)); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; font: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.mode-switch img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.mode-switch b { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); }
.mode-switch .ms-flip { position: absolute; top: 5px; right: 6px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255, 210, 63, .6); border-top-color: transparent; opacity: .7; }
.mode-switch.ctf { border-color: rgba(255, 77, 109, .45); background: linear-gradient(180deg, rgba(255, 77, 109, .14), rgba(255, 255, 255, .03)); }
.mode-switch.ctf b { color: #ff8fa3; }
.mode-switch.flip img { animation: msflip .35s ease-out; }
@keyframes msflip { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
.mode-switch:hover { border-color: rgba(255, 210, 63, .7); }

/* the gate's own play group and the talk at the gate */
.cl-actions .play-group { margin-top: 0; }
.mode-switch.readonly { cursor: default; opacity: .9; }
.cc-card { width: min(440px, 100%); text-align: left; display: flex; flex-direction: column; max-height: 88vh; }
.cc-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding-right: 36px; }
.cc-head img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.cc-head .podium-title { margin: 0; text-align: left; font-size: 11px; letter-spacing: 4px; }
.cc-head b { font-size: 18px; }
.cc-list { flex: 1; min-height: 180px; max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); }
/* bubbles: theirs on the left with the name over the first of a run, mine on the right in gold */
.cc-msg { position: relative; max-width: 82%; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; padding: 7px 12px 6px; border-radius: 16px 16px 16px 4px; background: rgba(255, 255, 255, .07); font-size: 13px; }
.cc-msg.run { margin-top: -2px; }
.cc-msg b { color: var(--gold); font-size: 11px; letter-spacing: .3px; }
.cc-msg span { color: var(--ink); overflow-wrap: anywhere; line-height: 1.3; }
.cc-msg small { color: var(--ink-dim); font-size: 9px; align-self: flex-end; margin-top: 1px; }
.cc-msg.me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: linear-gradient(180deg, rgba(255, 210, 63, .22), rgba(255, 160, 40, .16)); border: 1px solid rgba(255, 210, 63, .35); }
.cc-msg.me span { color: #fff; }
.cc-msg.pill span { font-weight: 700; }
.cc-empty { margin: auto; color: var(--ink-dim); font-size: 12px; text-align: center; }
.cc-pills { display: flex; gap: 6px; margin: 10px 0 0; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cc-pills::-webkit-scrollbar { display: none; }
.cc-pill { flex: none; }
.cc-pill.rally { border-color: rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .12); }
.cc-pill { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .35); background: rgba(255, 210, 63, .08); color: var(--ink); cursor: pointer; }
.cc-pill:disabled { opacity: .45; cursor: default; }
.cc-own { margin: 8px 0 0; }
.cc-own input { flex: 1; min-width: 0; }
.cc-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-dim); text-align: center; }
.cc-own input { font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: var(--ink); }
.cc-own input:focus { outline: none; border-color: rgba(255, 210, 63, .6); }
.cl-actions .play-btn { font-size: 21px; letter-spacing: 2px; padding-left: 12px; padding-right: 12px; }

/* the Gold tab: three ways, each a card with a picture and one action */
.gw { margin: 8px 0 10px; padding: 12px 12px 12px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 210, 63, .07), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 210, 63, .22); }
.gw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 6px; }
.gw-head b { font-size: 12px; letter-spacing: 3px; color: var(--gold); }
.gw-head small { font-size: 11px; color: var(--ink-dim); }
.gw-head small.hot { color: var(--gold); font-weight: 800; }
.gw-melt .vault { margin: 0 0 10px; padding: 8px 6px; background: none; border: 0; box-shadow: none; }
.gw-melt .vault-coin img { width: 64px; height: 64px; }
.gw-melt .vault-coin b { font-size: 24px; }
.melt-btn { font-size: 18px; letter-spacing: 2px; padding: 12px 16px; margin: 0; }
.melt-btn.dim { filter: saturate(.3) brightness(.75); box-shadow: none; }
.gw-packs .lk-packs { gap: 8px; grid-template-columns: 1fr 1fr; }
.gw-packs .lk-pack { padding: 12px 8px 10px; }
.gw-packs .lk-pack .g { font-size: 22px; }
.gw-packs .lk-pack .g img { width: 24px; height: 24px; }
.gw-packs .lk-pack .lk-name { font-size: 12px; color: var(--ink-dim); }
.gw-packs .lk-pack .bonus.tag { padding: 2px 8px; border-radius: 999px; background: linear-gradient(180deg, #ffe27a, #ffb300); color: #1a1200; font-size: 9px; letter-spacing: 1.5px; }
.post-gold .friend-strip { margin-top: 0; }
.post-gold .friend-strip small { font-size: 11px; }
.friend-strip .fs-gold { font-style: normal; color: var(--gold); margin-left: 6px; display: inline-flex; align-items: center; gap: 3px; }
.friend-strip .fs-gold .ic.art { width: 16px; height: 16px; }
.post-gold .friend-strip small { color: var(--ink-dim); font-weight: 500; }
.melt-short { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px dashed rgba(255, 210, 63, .4); background: rgba(255, 210, 63, .06); font-size: 12px; color: var(--ink-dim); width: fit-content; }
.melt-short .ic.art { width: 16px; height: 16px; }
.melt-short b { color: var(--silver); }
.melt-short span { color: var(--gold); font-weight: 700; margin-left: 4px; }
/* the crucible when the silver is short: the stacks go, one line says what is needed and takes you riding */
.gw-melt.short .vault { display: none; }
.gw-melt .vault-coin.gold small { color: var(--gold); }
.melt-short { cursor: pointer; }
.melt-short:hover { border-color: rgba(255, 210, 63, .8); }

/* the text field locked without the Deed: dim, a lock at the left, the placeholder says how it opens */
.cc-own.locked .ask-row { position: relative; }
.cc-own.locked input { padding-left: 34px; opacity: .6; border-style: dashed; }
.cc-own.locked .ask-row::before { content: ''; position: absolute; left: 12px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid rgba(255, 210, 63, .7); border-radius: 3px; box-shadow: inset 0 -3px 0 rgba(255, 210, 63, .7); }
.cc-own.locked .ghost-btn { opacity: .4; }
.cc-card { min-width: 0; max-width: 100%; box-sizing: border-box; }
.cc-card > * { min-width: 0; }
.cc-pills { width: 100%; }

/* the wallet and the goal are one card: the goal hangs under the wallet pill, sharing its edge, past the bell */
.wallet-row:has(+ .goal-mini:not(.hidden)), .wallet-row:has(+ .goal-card:not(.hidden)) { margin-bottom: 0; }
.wallet-row:has(+ .goal-mini:not(.hidden)) .wallet-line, .wallet-row:has(+ .goal-card:not(.hidden)) .wallet-line, .wallet-row:has(+ .goal-mini:not(.hidden)) .rw-line { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.wallet-row + .goal-mini, .wallet-row + .goal-card { margin: -1px 0 10px 62px; width: auto; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
.goal-mini, .goal-card { padding: 6px 10px 7px 8px; gap: 8px; }
.goal-mini canvas, .goal-card .goal-pv { width: 44px; height: 30px; border-radius: 7px; }
.goal-mini .goal-head, .goal-card .goal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.goal-mini b, .goal-card .goal-name { font-size: 12px; }
.goal-mini .goal-k, .goal-card .goal-k { font-size: 9px; letter-spacing: 2px; margin-right: 6px; }
.goal-mini small, .goal-card small, .goal-card .goal-sub { font-size: 10px; }
.goal-mini .goal-bar, .goal-card .goal-bar { height: 4px; margin: 5px 0 0; }
/* no goal: one quiet line, and the door to picking one */
.goal-mini.none > *, .goal-card.none > * { display: none; }
.goal-mini.none::after, .goal-card.none::after { content: 'Not riding for anything yet  ·  pick a goal'; font-size: 11px; color: var(--ink-dim); letter-spacing: .3px; width: 100%; text-align: center; padding: 2px 0; }
.goal-mini.none, .goal-card.none { background: rgba(255, 255, 255, .03); border-style: dashed; cursor: pointer; }
.goal-mini canvas, .goal-card .goal-pv, #goalPv { width: 44px !important; height: 30px !important; }
.goal-head small, .goal-head .goal-sub { flex: none; white-space: nowrap; font-size: 10px; }
.goal-title { flex: 1; }

/* the wallet bar: one pill. Silver on the left with its bar running to the goal's picture, Gold on the right */
.wbar { display: flex; align-items: stretch; gap: 8px; margin: 6px 0 10px; }
.wbar .inbox-btn { width: 54px; flex: none; }
.wb-silver, .wb-gold { display: flex; align-items: center; gap: 8px; font: inherit; color: var(--ink); cursor: pointer; border: 1px solid rgba(255, 210, 63, .45); background: linear-gradient(180deg, rgba(255, 210, 63, .1), rgba(255, 255, 255, .03)); padding: 6px 10px; }
.wb-silver { flex: 1; min-width: 0; border-radius: 14px 0 0 14px; border-right: 0; }
.wb-gold { flex: none; position: relative; border-radius: 0 14px 14px 0; padding-right: 40px; }
.wb-silver .ic.art, .wb-gold .ic.art { width: 28px; height: 28px; flex: none; }
.wb-silver b, .wb-gold b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wb-silver b { color: var(--silver); }
.wb-gold b { color: var(--gold); }
.wb-track { flex: 1; min-width: 24px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; position: relative; }
.wb-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8f9bbf, #dfe6ff); transition: width .6s ease; }
.wbar.ready .wb-fill { background: linear-gradient(90deg, #ffb300, #ffd23f); }
.wb-goal { width: 44px; height: 28px; border-radius: 7px; background: #121b38; flex: none; display: none; border: 1px solid rgba(255, 255, 255, .1); }
.wbar.goal .wb-goal { display: block; }
.wbar.ready .wb-goal { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 210, 63, .5); }
.wb-pick { flex: none; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 800; color: var(--gold); padding: 3px 8px; border-radius: 999px; border: 1px dashed rgba(255, 210, 63, .5); }
.wbar.goal .wb-pick { display: none; }
.wb-gold .plus { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: #1a0b10; display: grid; place-items: center; font-weight: 800; font-style: normal; font-size: 16px; line-height: 1; }
.wb-silver:hover, .wb-gold:hover { border-color: rgba(255, 210, 63, .8); }
@media (max-width: 400px) { .wb-silver, .wb-gold { padding: 6px 8px; gap: 6px; } .wb-silver b, .wb-gold b { font-size: 16px; } .wb-silver .ic.art, .wb-gold .ic.art { width: 22px; height: 22px; } .wb-gold { padding-right: 34px; } .wb-goal { width: 38px; height: 24px; } }

/* the goal on the item sheet, big: the bar runs the width of the sheet with the coin riding it */
.sp-goalbig { margin: 2px 0 12px; padding: 12px 14px 10px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 210, 63, .12), rgba(255, 77, 109, .06)); border: 1px solid rgba(255, 210, 63, .45); text-align: left; }
.sp-goalbig.ready { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 210, 63, .25), 0 0 22px rgba(255, 210, 63, .3); }
.sgb-head { display: flex; align-items: center; gap: 10px; }
.sgb-head .goal-k { font-size: 10px; letter-spacing: 2.5px; color: var(--gold); font-weight: 800; }
.sgb-head b { flex: 1; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-dim); font-weight: 600; text-align: right; white-space: nowrap; }
.sgb-head b .silver { color: var(--silver); font-weight: 800; font-size: 16px; }
.sgb-change { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--gold); background: rgba(255, 210, 63, .1); border: 1px solid rgba(255, 210, 63, .4); border-radius: 999px; padding: 4px 10px 4px 6px; cursor: pointer; }
.sgb-change img { width: 16px; height: 16px; }
.goal-bar.big { height: 18px; margin: 10px 0 6px; }
.goal-bar.big i::after { width: 28px; height: 28px; right: -12px; }
.sp-goalbig small { display: block; font-size: 11px; color: var(--ink-dim); text-align: center; }
/* the wallet bar, bare: the bell and the Gold sit on the card with no plates; the Silver bar takes the room between */
.wbar { align-items: center; gap: 6px; }
.wbar .inbox-btn { width: 44px; height: 44px; border: 0; background: none; box-shadow: none; }
.wbar .inbox-btn img { width: 30px; height: 30px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.wb-silver { border-radius: 14px; border-right: 1px solid rgba(255, 210, 63, .45); }
.wb-gold { background: none; padding: 6px 4px 6px 6px; gap: 6px; }
.wb-gold .plus { display: none; }
.wb-gold .ic.art { width: 30px; height: 30px; }
/* no frames at rest: the bell, the Silver bar and the Gold sit on the card; a frame appears under the pointer to say it is a button */
.wbar .inbox-btn, .wb-silver, .wb-gold { border: 1px solid transparent; background: none; border-radius: 14px; transition: border-color .15s, background .15s; }
.wbar .inbox-btn:hover, .wb-silver:hover, .wb-gold:hover, .wbar .inbox-btn:focus-visible, .wb-silver:focus-visible, .wb-gold:focus-visible { border-color: rgba(255, 210, 63, .6); background: rgba(255, 210, 63, .06); outline: none; }
.wb-silver { border-right: 1px solid transparent; }
.wb-silver:hover { border-right-color: rgba(255, 210, 63, .6); }
.wb-gold { padding: 6px 8px; }

/* the code with its copy icon; the icon goes gold for a moment once copied */
.rc-code { display: inline-flex; align-items: center; gap: 8px; }
.rc-copy { width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .1); color: var(--gold); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, transform .1s; }
.rc-copy:hover { background: rgba(255, 210, 63, .22); }
.rc-copy:active { transform: scale(.94); }
.rc-copy.done { background: var(--gold); color: #1a1200; }
.rc-codeline small { flex-basis: 100%; font-size: 11px; color: var(--ink-dim); text-align: center; display: block; }

/* an answer from the ranch: the rider's own words quoted above it */
.gf-quote { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid rgba(255, 210, 63, .6); border-radius: 0 10px 10px 0; background: rgba(255, 255, 255, .04); text-align: left; font-size: 13px; color: var(--ink); }
.gf-quote small { display: block; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.gf-quote span { display: block; color: var(--ink-dim); font-style: italic; }

/* the coach: the First Loop's card, on the home screen, with a pointer over the thing it is about */
.coach { position: fixed; left: 0; right: 0; margin-left: auto; margin-right: auto; width: min(360px, calc(100% - 24px)); z-index: 30; padding: 14px 16px 10px; border-radius: 16px; background: rgba(13, 19, 40, .97); border: 1.5px solid var(--gold); box-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(255, 210, 63, .25); text-align: center; }
.coach.pop { animation: cbpop .45s cubic-bezier(.2, 1.4, .4, 1); }
.coach-text { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.coach-foot { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 8px; font-size: 12px; }
.coach-point { position: fixed; z-index: 30; width: 0; height: 0; transform: translate(-50%, -100%); border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 16px solid var(--gold); filter: drop-shadow(0 0 8px rgba(255, 210, 63, .8)); animation: coachbob 1s ease-in-out infinite; }
@keyframes coachbob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }

.ib-review { display: inline-flex; align-items: center; gap: 6px; margin: -4px auto 10px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .4); background: rgba(255, 210, 63, .08); color: var(--gold); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ib-review img { width: 22px; height: 22px; }
.mode-switch .ms-flip { display: none; }
.ht-top { margin-bottom: 12px; }
.lessons-foot { margin: 10px 0 0; font-size: 12px; color: var(--gold); text-align: center; font-weight: 600; }

/* the review inside the holler: a small row of coins, dark until tapped, an X on its shoulder to go back */
.ib-review-gold { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(255, 210, 63, .35); font-style: normal; font-weight: 600; color: var(--ink-dim); }
.ib-review-gold img { width: 16px; height: 16px; }
.ib-review-gold b { color: var(--gold); }
.ib-rate { position: relative; margin: -4px 0 10px; }
.ib-rate-x { position: absolute; top: -6px; right: 0; width: 26px; height: 26px; padding: 0; border: none; background: none; cursor: pointer; opacity: .85; }
.ib-rate-x img { width: 100%; height: 100%; display: block; }
.ib-stars { display: flex; justify-content: center; gap: 6px; }
.ib-stars button { width: 34px; height: 34px; padding: 0; border: none; background: none; cursor: pointer; display: grid; place-items: center; transition: transform .15s; }
.ib-stars button img { width: 30px; height: 30px; filter: grayscale(1) brightness(.45); opacity: .6; transition: filter .15s, opacity .15s, transform .15s; }
.ib-stars button:hover { transform: translateY(-2px); }
.ib-stars button.hot img { filter: grayscale(.3) brightness(.9); opacity: .9; }
.ib-stars button.lit img { filter: none; opacity: 1; transform: scale(1.12); }
.ib-rate-hint { margin: 6px 0 0; font-size: 12px; color: var(--ink-dim); text-align: center; min-height: 1.4em; }

/* the Rules page: three tiles say the game, one line says how it is won, the rest is folded under */
.howto-lead { font-size: 14px; color: var(--ink); margin: 2px 0 12px; }
.ht-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ht-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.ht-step img { width: 40px; height: 40px; }
.ht-step b { font-size: 13px; letter-spacing: 2.5px; color: var(--gold); margin-top: 2px; }
.ht-step span { font-size: 12px; line-height: 1.35; color: var(--ink-dim); }
.ht-win { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.ht-win img { width: 22px; height: 22px; }
.ht-fold { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); color: var(--ink-dim); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.ht-fold .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-right: 4px; transition: transform .2s; }
.ht-fold.open .chev { transform: rotate(-135deg); }
.ht-more .howto { margin: 8px 0 6px; }
.ht-more .fineprint { margin: 4px 0 8px; }
@media (max-width: 360px) { .ht-step img { width: 32px; height: 32px; } .ht-step span { font-size: 11px; } }

/* the account row on the home screen: Protect and Retrieve side by side, one pill each; Retrieve takes the row once protected */
.acct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.acct-row > .hidden { display: none; }
.acct-row > button { margin: 0; min-width: 0; }
.acct-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--ink); cursor: pointer; text-align: left; font: inherit; transition: background .15s, border-color .15s; }
.acct-btn:hover { border-color: rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .08); }
.acct-btn img { width: 34px; height: 34px; flex: none; }
.acct-btn .pb-text { display: grid; gap: 1px; min-width: 0; }
.acct-btn b { font-size: 12.5px; }
.acct-btn small { font-size: 10.5px; color: var(--ink-dim); line-height: 1.3; }
.acct-row .protect-badge { gap: 8px; padding: 8px 10px; }
.acct-row .protect-badge .pb-text b, .acct-btn .pb-text b { line-height: 1.15; }
.acct-row .protect-badge img { height: 34px; max-width: 48px; object-fit: contain; }
.acct-row .protect-badge b { font-size: 12.5px; }
.acct-row .protect-badge small { font-size: 10.5px; }
.home-foot { text-align: center; margin-top: 14px; }
/* a wallet number a coin just landed on, anywhere it shows */
#homeSilver.pop, #homeBalance.pop, #postSilver.pop, #postGoldN.pop { animation: walletpop .45s cubic-bezier(.2, 1.6, .4, 1); display: inline-block; }

/* the mode switch (Classic / Capture the Flag) sits bare beside PLAY and ENTER THE CORRAL; a frame comes up under the pointer */
.mode-switch { border-color: transparent; background: rgba(255, 255, 255, .04); }
.mode-switch.ctf { border-color: transparent; background: rgba(255, 77, 109, .08); }
.mode-switch:hover { border-color: rgba(255, 210, 63, .7); background: linear-gradient(180deg, rgba(255, 210, 63, .12), rgba(255, 255, 255, .03)); }
.mode-switch.ctf:hover { border-color: rgba(255, 77, 109, .6); background: linear-gradient(180deg, rgba(255, 77, 109, .14), rgba(255, 255, 255, .03)); }
.mode-switch.readonly:hover { border-color: transparent; }
/* the name is one pill: the ranch door on the left, the name, the dice on the right, all of it the rider's ranch */
.name-row.joined { gap: 0; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); overflow: hidden; transition: border-color .2s; }
.name-row.joined:hover { border-color: rgba(255, 210, 63, .5); }
.name-row.joined .dice-btn, .name-row.joined #nameInput { border: 0; border-radius: 0; background: transparent; }
.name-row.joined .dice-btn:first-child { border-right: 1px solid rgba(255, 255, 255, .08); }
.name-row.joined .dice-btn:last-child { border-left: 1px solid rgba(255, 255, 255, .08); }
.name-row.joined .dice-btn:hover { background: rgba(255, 210, 63, .12); }
.name-row.joined #nameInput { cursor: pointer; }
/* one page width. Every full page (the ranch, a corral, the Trading Post, the board, a rider's ranch, How to play) is the
   same column: 480px, which is 100% on any phone (phones are 360 to 430 CSS px wide, less the 16px gutters), so the
   backdrops line up from page to page and nothing jumps when the rider moves between them. Pop-up dialogs stay narrower */
.home-card, .corral-card, .locker-card, .post-card, .board-card, .howto-card, .lobby-card, .inbox-card { width: min(480px, 100%); }

/* the code copied: Copied, then Close, hang under the copy button; the box never changes size */
.rc-code { position: relative; }
.rc-copied, .rc-close { position: absolute; top: 100%; right: 0; margin-top: 3px; width: 30px; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-style: normal; line-height: 1; }
.rc-copied { color: var(--gold); opacity: 0; pointer-events: none; }
.rc-copied.show { animation: rccopied 1.7s ease-out forwards; }
@keyframes rccopied { 0% { opacity: 0; transform: translateY(-3px); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
.rc-close { color: var(--ink-dim); padding: 0; text-decoration: underline; }
.rc-close:hover { color: var(--gold); }

/* the Deed page's link: the count under the field, a lock on it when the free changes are used, and the unlock paid there */
.cp-lock { width: 22px; height: 22px; flex: none; }
.cp-slug input:disabled { opacity: .5; }
.cp-link-note { font-size: 12px; color: var(--ink-dim); margin: 2px 0 8px; }
.cp-link-note b { color: var(--ink); }
.cp-unlock { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; }
.cp-unlock > img { width: 26px; height: 26px; }
.cp-unlock span { flex: 1; text-align: left; font-weight: 700; }
.cp-unlock b { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); }
.cp-unlock b img { width: 18px; height: 18px; }
.cp-unlock b i { font-style: normal; }

/* the How to play badge: a coin and the count of lessons waiting, so the button reads as somewhere to earn */
.home-row .ghost-btn .count.pay { display: inline-flex; align-items: center; gap: 3px; padding: 0 8px 0 4px; }
.home-row .ghost-btn .count.pay img { width: 16px; height: 16px; }

/* the banner swatches in Manage: the tint each one lays over the gate's painting */
.cp-banner { background: #0b1230; }
.cp-banner.b-night { background: linear-gradient(135deg, #0b1230, #1a2450); }
.cp-banner.b-sunset { background: linear-gradient(135deg, #ff4d6d, #ffd23f); }
.cp-banner.b-canyon { background: linear-gradient(135deg, #6b2d12, #ffd23f); }
.cp-banner.b-prairie { background: linear-gradient(135deg, #1f6b3a, #d4ff5c); }
.cp-banner.b-neon { background: linear-gradient(135deg, #3d6bff, #ff2fb0); }
.cp-banner.b-goldrush { background: linear-gradient(135deg, #8a5a0c, #ffe680); }
/* the Deed page: the links this gate still answers to */
.cp-old-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.cp-old-links small { flex-basis: 100%; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.cp-old-links .mono { font-size: 12px; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--ink-dim); }

.home-row .ghost-btn .count.pay.silver { background: linear-gradient(180deg, #e6ecff, #a9b4d6); color: #141a33; }

.cp-acts { display: inline-flex; gap: 10px; align-items: center; }
.home-row .ghost-btn .count.pay { flex: none; white-space: nowrap; font-size: 11px; }
.home-row .ghost-btn .count.pay span { overflow: visible; }
@media (max-width: 420px) { .home-row .ghost-btn .count.pay { padding: 0 6px 0 3px; font-size: 10px; } .home-row .ghost-btn .count.pay img { width: 14px; height: 14px; } }

/* the lesson cards: light paper with dark writing, so they read over any arena or screen */
.coach, .tut-beat { background: #fff6d8; border-color: #ffc94a; color: #1c1400; }
.coach-text, .tb-text { color: #1c1400; }
.coach-foot .link-btn, .tb-skip, .coach-foot .ghost-btn { color: #6b5a1e; }
.coach-foot .ghost-btn { border-color: rgba(28, 20, 0, .25); background: rgba(28, 20, 0, .06); color: #1c1400; }
.tb-dots i { background: rgba(28, 20, 0, .15); }
.tb-go { background: rgba(255, 179, 0, .16); border-color: rgba(200, 140, 0, .45); color: #1c1400; }
.tb-go #tutGoText { color: #1c1400; }
.tut-beat.holding { border-color: #ffb300; }
.coach-point { border-top-color: #fff6d8; filter: drop-shadow(0 0 6px rgba(255, 201, 74, .9)); }

/* the Trading Post in goal-pick mode: a line under the title says so, and the Gold tab steps aside */
.post-picking { display: none; align-items: center; justify-content: center; gap: 8px; margin: -6px 0 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 210, 63, .1); border: 1px dashed rgba(255, 210, 63, .5); color: var(--gold); font-weight: 700; font-size: 13px; }
.post-picking .ic.art { width: 20px; height: 20px; }
#post.picking .post-picking { display: flex; }
#post.picking .post-tabs .tab.gold { display: none; }

/* the beat card lives at the bottom of the arena, above the controls: the field, the rider and the cinch banner stay clear */
.tut-beat { top: auto; bottom: calc(14px + 140px + 16px + env(safe-area-inset-bottom)); }
@media (max-width: 720px) { .tut-beat { bottom: calc(14px + 90px + 16px + env(safe-area-inset-bottom)); } }
@media (min-width: 721px) and (max-height: 720px) { .tut-beat { bottom: 22px; } }   /* a short window: the card sits at the foot, clear of the field */
.tb-done { display: block; margin: 8px auto 2px; padding: 8px 22px; border-radius: 999px; border: none; background: linear-gradient(180deg, #ffe27a, #ffb300); color: #1c1400; font: inherit; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; cursor: pointer; }
/* on a phone the card sits 22px left of centre, clear of the snap button: margins centre it inside a box that stops 44px short of the right edge */
@media (max-width: 720px) { .tut-beat { width: min(360px, calc(100% - 72px)); left: 0; right: 44px; padding: 8px 12px 6px; } }

/* a corral with its Deed wears the deed beside the count on the ranch page's rows */
.corral-row .deed-mark { width: 34px; height: 34px; flex: none; margin-right: 2px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }

/* the gate page: a gold line with a word on it between the corral and the rider's own ranch under it */
.corral-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; font-size: 10px; letter-spacing: 3px; color: rgba(255, 210, 63, .8); font-weight: 800; }
.corral-divider i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 210, 63, .7), transparent); }
/* the gate code in Manage: dots on a plate, an eye to read it */
.cp-pin { display: flex; align-items: center; gap: 10px; margin: -4px 0 10px 6px; }
.cp-pin-digits { font-family: ui-monospace, monospace; font-size: 22px; font-weight: 800; letter-spacing: 6px; color: var(--gold); padding: 6px 14px; border-radius: 10px; background: rgba(255, 210, 63, .08); border: 1px solid rgba(255, 210, 63, .35); min-width: 110px; text-align: center; }
.cp-pin-eye { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); cursor: pointer; display: grid; place-items: center; padding: 0; }
.cp-pin-eye img { width: 20px; height: 20px; opacity: .9; }
.cp-pin-hint { font-size: 11px; color: var(--ink-dim); }
.cp-sub { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.cp-sub b { color: var(--ink); }
.cl-kicker .cl-lock { width: 14px; height: 14px; vertical-align: -2px; }
/* the name card's lock */
.nch-note { text-align: center; margin: 8px 0 10px; }
#nameChange .cp-unlock { margin-bottom: 10px; }
/* the chat's own-words field wears the lock until the Deed */
.cc-own.locked .ask-row { position: relative; }
.cc-own.locked .ask-row::before { content: ''; position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background: url('art/lock-96.png') center / contain no-repeat; pointer-events: none; }
.cc-own.locked #ccText { padding-left: 34px; }
/* the pills: one row that scrolls sideways, fading at both ends so the row reads as a strip, not a cut-off */
.cc-pills { flex-wrap: nowrap; scroll-snap-type: x proximity; padding: 6px 12px 8px; margin: 10px -12px 0; mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 28px), transparent); }
.cc-pill { scroll-snap-align: start; flex: none; }

/* the lesson cards: paper, dark writing, a thin gold edge; the card sits at the bottom, or at the top when the ring is low */
.coach, .tut-beat { background: #f7f4ec; border: 1.5px solid rgba(255, 179, 0, .55); color: #1c1a14; box-shadow: 0 12px 40px rgba(0, 0, 0, .55); }
.coach-text, .tb-text { color: #1c1a14; }
.coach-foot .link-btn, .tb-skip { color: #6f6a5c; }
.tb-go { background: rgba(28, 26, 20, .06); border-color: rgba(28, 26, 20, .18); color: #1c1a14; }
.tb-go #tutGoText { color: #1c1a14; }
.tb-finger { border-color: #d99a00; }
.tb-finger::after { background: #d99a00; }
.tb-dots i { background: rgba(28, 26, 20, .14); }
.tb-dots i.done, .tb-dots i.now { background: #d99a00; }
.tb-dots i.now { box-shadow: 0 0 8px rgba(217, 154, 0, .8); }
.tut-beat.holding { border-color: #d99a00; box-shadow: 0 12px 40px rgba(0, 0, 0, .55); }
.coach-point { border-top-color: #f7f4ec; filter: drop-shadow(0 0 6px rgba(255, 179, 0, .7)); }
.tb-kick { font-size: 10px; letter-spacing: 3px; color: #a97400; font-weight: 800; margin-bottom: 4px; }
.tut-beat.top { top: 128px; bottom: auto; }
@media (max-width: 720px) { .tut-beat.top { top: 150px; } }

/* a lesson: the arena without the hollers (they come with the Arena lesson, and the real arena) */
body.lesson .holler-bar { display: none; }

/* the Arena lesson: the coach's pointer over the HUD; the hollers show for their step */
body.arena-lesson .holler-bar { display: flex; }
body.arena-lesson .fence-pill { display: none; }

/* the coach's pointer aims up at a thing the card sits under */
.coach-point.up { transform: translate(-50%, -100%) rotate(180deg); }

/* the coach's spotlight: a ring around the thing, and the rest of the screen in the dark */
.coach-spot { position: fixed; z-index: 28; pointer-events: none; border: 3px solid var(--gold); box-shadow: 0 0 0 200vmax rgba(5, 8, 20, .72), 0 0 24px rgba(255, 210, 63, .7); transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease, border-radius .25s ease; }

/* the gate's tabs and pages: Gate, Chat, Manage under the banner, the same pills as the ranch's; the close and the share on the banner */
.cl-tabs { margin: 0 0 12px; }
.cl-banner .cl-x { top: 10px; right: 10px; }
.scene-share { position: absolute; top: 12px; right: 56px; z-index: 3; width: 34px; height: 34px; padding: 0; border: none; background: rgba(5, 8, 20, .55); border-radius: 50%; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.scene-share img { width: 20px; height: 20px; }
.scene-share:hover { background: rgba(255, 210, 63, .25); }
.ranch-scene .scene-share { top: 12px; right: 56px; }
.cl-pane { text-align: left; }
.cl-pane .cc-head, .cl-pane .cp-head { display: none; }
.cl-pane .cc-list { max-height: 46vh; }
.cl-pane .cp-tabs { margin-top: 0; }
.cl-panes { margin-bottom: 8px; }
.cl-pane { overflow: hidden; max-width: 100%; }
.cl-pane .cc-pills { margin-left: 0; margin-right: 0; padding-left: 4px; padding-right: 4px; }
.cl-pane .cc-list { width: 100%; box-sizing: border-box; }
.home-card { contain: inline-size; position: relative; }
/* the sound toggle in the home card's corner: always there, out of the way of everything, the account remembers it */
.home-sound { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; padding: 0; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(10, 15, 31, .55); cursor: pointer; display: grid; place-items: center; opacity: .85; transition: opacity .2s, transform .15s; }
.home-sound:hover { opacity: 1; transform: translateY(-1px); }
.home-sound img { width: 26px; height: 26px; }
.home-sound.off img { filter: saturate(.6) brightness(.8); }   /* a wide strip inside (the chat's pills) must not push the card past the screen */
.cl-pane .cc-pills { width: auto; min-width: 0; }
/* the coach card is centred by margins, not a transform, so its pop (a scale) never slides it sideways */
.coach { left: 0; right: 0; margin-left: auto; margin-right: auto; transform: none; }

/* an unclaimed gift on the list: a button that says so, since the whole row is the door */
.ib-claim { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: #1a1200; background: linear-gradient(180deg, #ffe27a, #ffb300); box-shadow: 0 3px 10px rgba(255, 180, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6); animation: claimpulse 1.6s ease-in-out infinite; }
@keyframes claimpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* On your phone: the wallpaper card with its phone-shaped preview beside the builder; the two cards that come with the app */
.wp-card { text-align: left; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); margin-bottom: 10px; }
.wp-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.wp-head b { font-size: 12px; letter-spacing: 2.5px; color: var(--gold); }
.wp-head small { font-size: 12px; color: var(--ink-dim); }
.wp-stage { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; }
.wp-preview { width: 150px; height: auto; border-radius: 18px; border: 3px solid #0b1230; box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .12); background: #0b1230; }
.wp-build .lk-sub { margin: 0 0 6px; }
.wp-build .lk-sub + * { margin-bottom: 10px; }
.wp-backs { display: flex; flex-wrap: wrap; gap: 6px; }
.wp-back { width: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; background: #121b38; cursor: pointer; overflow: hidden; display: grid; gap: 2px; }
.wp-back img { width: 100%; height: 22px; object-fit: cover; display: block; }
.wp-back span { font-size: 9px; color: var(--ink-dim); padding: 0 3px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-back.on { border-color: var(--gold); }
.wp-back.on span { color: var(--ink); }
.wp-toggles { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
.wp-toggles label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.wp-toggles input { accent-color: var(--gold); }
.wp-band { margin: 0; }
.wp-band .tab { padding: 5px 10px; font-size: 11px; }
.wp-reset { font-size: 12px; color: var(--gold); padding: 0; margin-top: 4px; }
.wp-actions { display: grid; gap: 8px; margin-top: 12px; }
.wp-where { font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: var(--ink); }
.wp-card.soon { display: flex; align-items: center; gap: 12px; opacity: .85; }
.wp-card.soon .wp-ic { width: 36px; height: 36px; flex: none; }
.wp-card.soon b { display: block; font-size: 14px; }
.wp-card.soon small { font-size: 12px; color: var(--ink-dim); }
.wp-tag { flex: none; font-size: 9px; letter-spacing: 2px; color: var(--gold); border: 1px solid rgba(255, 210, 63, .4); padding: 3px 8px; border-radius: 999px; }
@media (max-width: 400px) { .wp-stage { grid-template-columns: 120px 1fr; } .wp-preview { width: 120px; } }
/* a backdrop tile the rider owns: a phone icon that opens the wallpaper */
.lk-item .lk-phone { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 8px; border: none; background: rgba(5, 8, 20, .7); color: var(--gold); display: grid; place-items: center; cursor: pointer; padding: 0; font-size: 13px; }
.lk-item { position: relative; }

/* the widgets' pictures, at their shapes; the icon picker */
.wp-widgets { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; align-items: start; }
.wp-widgets canvas { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); display: block; }
.wp-widgets canvas[data-fam="large"] { grid-column: 1 / -1; width: 66%; }
.wp-note { display: block; margin-top: 8px; font-size: 11px; color: var(--ink-dim); }
.wp-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wp-icon { position: relative; display: grid; gap: 4px; justify-items: center; padding: 6px 2px; border-radius: 12px; border: 2px solid transparent; background: rgba(255, 255, 255, .03); cursor: pointer; }
.wp-icon img { width: 52px; height: 52px; border-radius: 13px; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.wp-icon span { font-size: 10px; color: var(--ink-dim); }
.wp-icon.on { border-color: var(--gold); }
.wp-icon.on span { color: var(--ink); }
.wp-icon.locked img { filter: grayscale(.6) brightness(.55); }
.wp-icon .wp-lock { position: absolute; top: 4px; right: 8px; width: 18px; height: 18px; }
.wp-icon .wp-lock img { width: 18px; height: 18px; border-radius: 0; box-shadow: none; }

/* the gate's Chat and Manage pages stand alone: nothing of the rider's own ranch under them, and no back buttons inside */
body.cl-subpage #clPanes ~ * { display: none !important; }
.cl-pane .cp-foot, .cl-pane #cpClose { display: none; }
/* the chat's pills wrap into rows in the pane, every one in reach */
.cl-pane .cc-pills { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; padding: 6px 0 0; margin: 8px 0 0; scroll-snap-type: none; }
.cl-pane .cc-pill { flex: none; }

/* the gate code, all in one frame: the switch on the first line, the code, its eye and Change on the second when it is on */
.cp-block { flex-direction: column; align-items: stretch; gap: 0; cursor: default; }
.cp-block .cp-line { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.cp-block .cp-line > span { flex: 1; min-width: 0; }
.cp-block .cp-pin { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .07); }
.cp-pin-change { margin-left: auto; font-size: 12px; color: var(--gold); }

/* the First Loop's last card: two ways on, side by side */
.tb-two { display: flex; gap: 8px; justify-content: center; margin: 8px 0 2px; }
.tb-two .tb-done { margin: 0; }
.tb-two .tb-done.alt { background: rgba(28, 26, 20, .08); color: #1c1a14; box-shadow: none; border: 1px solid rgba(28, 26, 20, .2); }
/* the goal picker opens over the home screen, the ranch and the post (it sits earlier in the page than all of them) */
#rideFor { z-index: 13; }

/* the Phone tab's pages; the phone mock-up drags sideways; the zoom slider */
.ph-how { font-size: 12px; color: var(--ink-dim); margin: 0 0 10px; text-align: left; }
.wp-phone { position: relative; width: 150px; touch-action: none; cursor: grab; }
.wp-phone.dragging { cursor: grabbing; }
.wp-phone .wp-drag { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, .7); pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.wp-range { width: 100%; accent-color: var(--gold); margin: 0 0 6px; }
@media (max-width: 400px) { .wp-phone { width: 120px; } }

/* the quick words: a tray that folds behind the button beside the field (a Deed corral), or sits open, compact, without one */
.cc-quick { flex: none; width: 42px; height: 42px; padding: 0; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); cursor: pointer; display: grid; place-items: center; }
.cc-quick img { width: 24px; height: 24px; }
.cc-quick.on { border-color: var(--gold); background: rgba(255, 210, 63, .12); }
.cc-tray { margin: 8px 0 0; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); max-height: 132px; overflow-y: auto; scrollbar-width: none; }
.cc-tray::-webkit-scrollbar { display: none; }
.cl-pane .cc-tray .cc-pills, .cc-tray .cc-pills { margin: 0; padding: 0; gap: 5px; flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; }
.cc-tray .cc-pill { padding: 5px 10px; font-size: 12px; }

/* the wallpaper page: the how-line with its small button on the right; the rider colors; room above DONE on every ranch tab */
.wp-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.wp-top .ph-how { flex: 1; margin: 0; }
.wp-top .wp-actions { display: flex; gap: 6px; margin: 0; flex: none; }
.wp-top .lk-btn { padding: 8px 14px; font-size: 12px; }
.wp-top .wp-where { padding: 6px 8px; font-size: 12px; }
.wp-colors { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wp-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.wp-color.on { border-color: #fff; transform: scale(1.15); }
#lockerDone, #postDone { margin-top: 22px; }
/* the protected button keeps the row's shape */
.acct-row .protect-badge.on { padding: 8px 10px; gap: 8px; margin-top: 0; }
.acct-row .protect-badge.on img { height: 34px; }

/* the board's light: green riding here, amber somewhere in LASSO, dark away; a row opens the rider's ranch */
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); vertical-align: middle; }
.led.here { background: #5ef1c9; box-shadow: 0 0 8px rgba(94, 241, 201, .9), 0 0 2px #5ef1c9; animation: ledglow 2.2s ease-in-out infinite; }
.led.game { background: #ffd23f; box-shadow: 0 0 6px rgba(255, 210, 63, .8); }
@keyframes ledglow { 0%, 100% { box-shadow: 0 0 8px rgba(94, 241, 201, .9), 0 0 2px #5ef1c9; } 50% { box-shadow: 0 0 3px rgba(94, 241, 201, .5), 0 0 1px #5ef1c9; } }
.board td.who .led { margin: 0 8px 2px 0; }
.board tr.pick { cursor: pointer; }
.board tr.pick:hover td { background: rgba(255, 210, 63, .06); }
.board tr.on td.rank::after { display: none; }   /* the light says it now */
.rp-where { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); margin: 0 0 10px; }
/* riding right now: the line at the top of a rider's page, with the door to their arena */
.rp-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(94, 241, 201, .08); border: 1px solid rgba(94, 241, 201, .35); font-size: 13px; font-weight: 700; color: var(--ink); }
.rp-now .led { width: 8px; height: 8px; border-radius: 50%; background: #5ef1c9; box-shadow: 0 0 8px #5ef1c9; flex: none; }
.rp-now span { flex: 1 1 auto; min-width: 0; }
.rp-watch { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .6); background: rgba(255, 210, 63, .12); color: var(--gold); font: inherit; font-weight: 800; font-size: 12px; letter-spacing: .5px; cursor: pointer; text-decoration: none; }
.rp-watch img { width: 18px; height: 18px; }
.rp-watch:hover { background: rgba(255, 210, 63, .22); }
.rp-where .led { width: 10px; height: 10px; }
.rp-record.five { grid-template-columns: repeat(5, 1fr); }
.rp-record.five b { font-size: 15px; }
#riderPage { z-index: 12; }   /* above the corral panel and the gate, whose boards open it */
/* a narrow phone: the board keeps the names readable; tighter cells, and the rounds column waits for a wider screen */
@media (max-width: 430px) { .board td, .board th { padding-left: 5px; padding-right: 5px; } .board th { font-size: 9px; letter-spacing: .5px; } .board td.opt, .board th.opt { display: none; } .board td.rank { width: 30px; } }

/* the corral's background: the owner's ranch paintings as small cards */
.cp-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cp-scene { padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .04); cursor: pointer; font: inherit; color: var(--ink-dim); text-align: center; }
.cp-scene img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.cp-scene span { display: block; font-size: 10px; font-weight: 700; padding: 4px 4px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-scene.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 210, 63, .3); }
/* Retrieve account: the recovery code, in place of the email */
.rc-bycode { margin-top: 14px; }
.rc-or { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 10px; }
.rc-or::before, .rc-or::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .1); }
.rc-coderow { display: flex; gap: 8px; }
.rc-coderow input { flex: 1; min-width: 0; font: inherit; font-size: 14px; letter-spacing: 1px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: var(--ink); }
.rc-coderow input::placeholder { letter-spacing: 0; font-size: 12px; }
/* the First Loop's last card: what next */
#whatNext { z-index: 13; }
.wn-card { text-align: center; }
.wn-hero { width: 72px; height: 72px; margin: 4px auto 6px; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.wn-card .play-btn { margin-top: 14px; }
.ht-step img[src*="art/range/"], .ht-win img[src*="art/range/"] { object-fit: contain; }
/* Herd: the sell, on the HUD by the snap. Lit when the rider is home with a herd to sell */
.sell-btn { position: absolute; left: 14px; top: 150px; z-index: 5; pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, .35); background: rgba(10, 15, 31, .8); color: var(--ink); font: inherit; cursor: pointer; opacity: .55; transition: opacity .2s, transform .15s; }
.sell-btn img { width: 28px; height: 28px; }
.sell-btn b { display: block; font-size: 12px; letter-spacing: 2px; color: var(--gold); }
.sell-btn small { display: block; font-size: 10px; color: var(--ink-dim); }
.sell-btn.ready { opacity: 1; border-color: var(--gold); box-shadow: 0 0 18px rgba(255, 210, 63, .25); }
.sell-btn.ready:hover { transform: translateY(-2px); }
.sell-btn.armed { border-color: #ff4d6d; background: rgba(255, 77, 109, .14); box-shadow: 0 0 22px rgba(255, 77, 109, .35); }
.sell-btn.armed b { color: #ff4d6d; }
@media (max-width: 720px) { .sell-btn { left: 12px; top: 200px; } }   /* under the stat panel and the round label, which wrap taller on a phone */
#leaderboard .pv { white-space: nowrap; }
/* the greenhorn tag: the first rides, when your own rope only sets you back */
.green-tag { position: absolute; left: 14px; top: 118px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(94, 241, 201, .12); border: 1px solid rgba(94, 241, 201, .45); color: #5ef1c9; font-size: 10px; letter-spacing: 2px; font-weight: 800; }
.green-tag img { width: 16px; height: 16px; }
.green-tag small { font-size: 10px; letter-spacing: 0; color: var(--ink-dim); font-weight: 600; text-transform: none; }
body.range .green-tag { top: 118px; }
/* the first-ride callouts: a line under the clock, in the coach's paper, gone on its own */
.callout { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; top: 96px; z-index: 6; max-width: min(400px, 88vw); padding: 10px 16px; border-radius: 14px; background: #fff6df; color: #1a0b10; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); text-align: center; animation: calloutpop .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes calloutpop { from { transform: scale(.6) translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
.callout b { display: block; font-size: 11px; letter-spacing: 3px; color: #b8791a; margin-bottom: 2px; }
.callout span { font-size: 14px; font-weight: 700; line-height: 1.35; }
@media (max-width: 720px) { .callout { top: 208px; max-width: min(320px, 84vw); padding: 8px 12px; } .green-tag { position: static; grid-column: 1 / -1; justify-self: center; }   /* in the flow under the round label (which wraps wide in the Roundup) rather than over it */ .callout span { font-size: 12px; } .callout b { font-size: 10px; letter-spacing: 2px; } }
.gold-strike .green-over { color: #5ef1c9; }