/* 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; grid-template-columns: minmax(0, 1fr); 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: min(300px, 100%); }   /* a flat 300px hung off the edge of a 320px phone */ .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; }
/* the first three rounds: title, the line, the button. Nothing to read, one thing to press */
body.first-rides .death-stats, body.first-rides .replay, body.first-rides .goal-mini, body.first-rides .death-report, body.first-rides .death-links, body.first-rides .ad-btn, body.first-rides #fenceBtn { display: none !important; }
body.first-rides .death-card { padding-top: 34px; padding-bottom: 26px; }
body.first-rides #fbAsk, body.first-rides #protectRound, body.first-rides #protectLater, body.first-rides #goalMiniRE, body.first-rides #boardLine, body.first-rides .podium-wore-row, body.first-rides .round-foot .share-link { display: none !important; }
body.first-rides .death-title { font-size: 44px; }
body.first-rides .death-by { font-size: 17px; color: var(--ink); margin-bottom: 22px; }
body.first-rides #respawnBtn { transform: scale(1.06); margin-bottom: 8px; }
body.first-rides .death-row { justify-content: center; }
.death-title { font-size: 40px; font-weight: 800; letter-spacing: 2px; }
.death-by { color: var(--ink-dim); margin: 4px 0 18px; font-size: 15px; }
/* the grudge line under the death line: a red target, the name, the bounty */
.death-grudge { display: inline-flex; align-items: center; gap: 8px; margin: -8px auto 16px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 77, 109, .45); background: rgba(255, 77, 109, .1); color: var(--ink); font-size: 13px; font-weight: 700; }
.death-grudge i { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #ff4d6d; box-shadow: inset 0 0 0 2px #0b1226, inset 0 0 0 4px #ff4d6d; flex: none; }
.death-grudge b { color: #ff4d6d; }
body.first-rides .death-grudge { margin-top: -12px; }
.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; }
/* the next round is the button: it counts down and needs no tap (the round starts you in) */
.next-round-btn { margin: 12px 0 4px; cursor: default; }
.next-round-btn .count { display: block; white-space: nowrap; letter-spacing: 3px; font-size: 22px; } .next-round-btn .count b { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.next-round-btn.ended .count { font-size: 18px; }
/* your own line under the podium when you were not on it */
.podium-you { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; margin-top: 6px; padding: 9px 14px; border-radius: 12px; background: rgba(255, 210, 63, .07); border: 1px dashed rgba(255, 210, 63, .35); font-size: 14px; }
.podium-you .rank { font-weight: 800; color: var(--gold); text-align: center; } .podium-you .who { text-align: left; } .podium-you .who b { font-weight: 800; } .podium-you .who small { display: block; color: var(--ink-dim); font-size: 12px; } .podium-you .pct { font-weight: 800; font-size: 18px; }
.podium-title small { display: block; font-size: 10px; letter-spacing: 3px; color: var(--ink-dim); margin-top: 2px; }
.podium-wore-row { font-size: 12px; color: var(--ink-dim); }
.podium-card .protect-badge.strip { margin: 8px 0 0; padding: 4px 8px; } .podium-card .protect-badge.strip img { height: 34px; } .podium-card .pb-later { font-size: 11px; }
.podium-card .goal-mini, .podium-card .board-line { margin-top: 8px; }

.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):not(.me) { display: none; }   /* the top three, and the rider's own line wherever they stand */
  #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 */
/* the reminders offer on the home card, in the app only */
.notify-offer { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; cursor: default; }
.notify-offer .no-btns { grid-column: 2; display: flex; gap: 12px; align-items: center; } .notify-offer .no-btns .lk-btn { padding: 6px 14px; font-size: 13px; }
/* today: one card holding the daily ride, the crown bar and the streak as three lines */
.today-card { display: flex; flex-direction: column; width: 100%; margin: 10px 0 0; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .035); overflow: hidden; }
.today-card > button { margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.today-card > button + button { border-top: 1px solid rgba(255, 255, 255, .07) !important; }
.today-card > button:hover { background: rgba(255, 255, 255, .04) !important; }
.today-card .daily-strip.on { box-shadow: inset 3px 0 0 var(--gold) !important; }
/* inside the Today card every line is one line, 44px, the icon small, the number on the right */
.today-card > button { min-height: 44px !important; padding: 6px 12px !important; }
.today-card .daily-strip { grid-template-columns: 28px 1fr auto; column-gap: 10px; }
.today-card .daily-strip img { width: 28px; height: 28px; }
.today-card .daily-strip .ds-main { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; } .today-card .daily-strip .ds-main b { white-space: nowrap; } .today-card .daily-strip .ds-main small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .today-card .daily-strip em { font-size: 10px; } .today-card .crown-strip .cs-main small, .today-card .daily-strip .ds-main small { font-size: 11px; } .today-card .streak-strip .ss-sub { font-size: 11px; } } .today-card .daily-strip .ds-main b { font-size: 13.5px; } .today-card .daily-strip .ds-main small { font-size: 12px; }
.today-card .daily-strip .ds-main small::before { content: '·'; margin-right: 6px; color: var(--ink-dim); }
.today-card .daily-strip.done { opacity: .75; }
.today-card .crown-strip { grid-template-columns: 28px 1fr auto; grid-template-rows: auto; column-gap: 10px; row-gap: 0; }
.today-card .crown-strip img { grid-row: 1; width: 28px; height: 28px; }
.today-card .crown-strip .cs-main b { font-size: 13.5px; } .today-card .crown-strip .cs-main small::before { content: '·'; margin-right: 6px; }
.today-card .crown-strip .cs-bar { display: none; }
.today-card .crown-strip em { font-size: 13px; }
.today-card .streak-strip { --fire: 34px !important; min-height: 44px; grid-template-columns: 28px 1fr auto; grid-template-rows: auto; column-gap: 10px; }
/* the campfire art carries air above the flame: drawn a size up, from the logs, so a young fire reads as big as the icons beside it */
.today-card .streak-strip img { position: static; width: 30px; height: 30px; transform: scale(1.35); transform-origin: 50% 85%; }
.today-card .streak-strip .ss-main { align-items: baseline; gap: 6px; } .today-card .streak-strip .ss-main b { font-size: 16px; } .today-card .streak-strip .ss-main small { font-size: 13.5px; }
.today-card .streak-strip .ss-sub { grid-column: 3; grid-row: 1; font-size: 12px; text-align: right; white-space: nowrap; }
.today-card .streak-strip .ss-main { grid-row: 1; }
.record { font-size: 11.5px; margin: 8px 0 0; opacity: .8; }
.home-foot { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.home-foot .link-btn small { color: var(--ink-dim); margin-left: 4px; }
/* the daily ride: the day's game type, double Silver once, a clock to midnight */
.daily-strip { display: grid; grid-template-columns: 40px 1fr auto; column-gap: 10px; align-items: center; width: 100%; margin: 8px 0 0; padding: 9px 12px 9px 10px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, .22); background: linear-gradient(135deg, rgba(255, 210, 63, .1), rgba(255, 210, 63, .02)); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.daily-strip:hover { border-color: rgba(255, 210, 63, .5); }
.daily-strip img { width: 40px; height: 40px; object-fit: contain; }
.daily-strip .ds-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.daily-strip .ds-main b { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
.daily-strip .ds-main small { font-size: 12px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daily-strip em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.daily-strip.done { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); } .daily-strip.done em { color: var(--ink-dim); }
.daily-strip.on { box-shadow: 0 0 0 2px rgba(94, 241, 201, .35); }
/* the crown bar: the next crown, the wins toward it, one line. Tapping it opens the crowns */
.crown-strip { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 5px; align-items: center; width: 100%; margin: 8px 0 0; padding: 9px 12px 10px 10px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, .22); background: linear-gradient(135deg, rgba(255, 210, 63, .10), rgba(255, 210, 63, .03)); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.crown-strip:hover { border-color: rgba(255, 210, 63, .5); }
.crown-strip img { grid-row: 1 / 3; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(255, 210, 63, .35)); }
.crown-strip .cs-main { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.crown-strip .cs-main b { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
.crown-strip .cs-main small { font-size: 12px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; }
.crown-strip em { grid-column: 3; grid-row: 1; font-style: normal; font-size: 12px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.crown-strip .cs-bar { grid-column: 2 / 4; grid-row: 2; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.crown-strip .cs-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ffb300, #ffd23f); box-shadow: 0 0 10px rgba(255, 210, 63, .5); transition: width .9s cubic-bezier(.3, .9, .4, 1); }
.crown-strip.won .cs-bar i { background: linear-gradient(90deg, #5ef1c9, #9ffbe4); }
.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-month { font-size: 13px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--ink); text-align: center; margin-bottom: 8px; min-height: 16px; }
.sk-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; } .sk-dow i { font-style: normal; text-align: center; font-size: 10px; color: var(--ink-dim); font-weight: 700; }
.sk-scroll { position: relative; max-height: 270px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
.sk-scroll::-webkit-scrollbar { display: none; }
.sk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: stretch; }
.sk-grid i, .sk-key i { display: block; aspect-ratio: 1; border-radius: 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.sk-grid i { position: relative; overflow: hidden; }
.sk-grid i b { position: absolute; left: 6px; top: 4px; font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .5); }
.sk-grid i.rode, .sk-key i.rode { background: linear-gradient(135deg, #ff4d6d, #ff9f43); border-color: transparent; }
.sk-grid i.rode b { color: rgba(40, 10, 20, .75); }
.sk-grid i img { position: absolute; right: 3px; bottom: 2px; width: 52%; height: 52%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.sk-grid i em { position: absolute; right: 4px; bottom: 3px; font-style: normal; font-size: 9px; font-weight: 800; color: #1a0b10; background: rgba(255, 255, 255, .9); border-radius: 999px; padding: 0 5px; }
.sk-grid i .win { position: absolute; right: 4px; top: 3px; width: 14px; height: 14px; }
.sk-grid i.miss { background: rgba(255, 255, 255, .03); border-style: dashed; border-color: rgba(255, 255, 255, .1); }
.sk-grid i.ahead { background: rgba(255, 255, 255, .02); border-color: rgba(255, 255, 255, .05); }
.sk-grid i.today, .sk-key i.today { box-shadow: 0 0 0 2px var(--gold); }
.sk-grid i.goalday, .sk-key i.goalday { border: 2px dashed var(--gold); background: rgba(255, 210, 63, .1); }
.sk-grid i.goalday::after { content: attr(data-gold); position: absolute; right: 4px; bottom: 3px; font-size: 10px; font-weight: 800; color: var(--gold); }
.sk-grid i.future { visibility: hidden; }
/* the rule where a month turns, its name on it */
.sk-grid .sk-div { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-dim); }
.sk-grid .sk-div::before, .sk-grid .sk-div::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .1); }
.sk-goal + .sk-goal { margin-top: 6px; }
.sk-key { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--ink-dim); } .sk-key i { width: 14px; height: 14px; aspect-ratio: auto; border-radius: 4px; } .sk-key i + i, .sk-key i.goalday { margin-left: 10px; }
.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; }
/* a goal as one line: what it is, how far, what it pays; change opens the choices under it */
.sk-goalrow { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); text-align: left; }
.sk-goalrow img { width: 30px; height: 30px; object-fit: contain; }
.sk-goalrow .sg-main { display: grid; gap: 2px; min-width: 0; } .sk-goalrow .sg-main b { font-size: 13px; } .sk-goalrow .sg-main small { font-size: 12px; color: var(--ink-dim); }
.sk-goalrow .sg-bar { display: block; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 3px; } .sk-goalrow .sg-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #ffb300, #ffd23f); transition: width .6s; } .sk-goalrow .sg-bar.hidden { display: none; }
.sk-goalrow .sg-edit { font-size: 12px; }
.sk-goals.hidden { display: none; } .sk-goals { margin: 6px 0 0; justify-content: flex-end; }
.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%; }
#ranchScene { height: 210px; }   /* your own ranch: a taller banner, and your rider big on it (it wears what Outfits is building) */
/* the rider rides on the lot itself now (locker.js drawRanch): the old strip over the scene stays hidden */
.ranch-scene #lockerPreview, .ranch-scene #rpPreview { display: none; }
.ranch-scene #lockerPreview { position: absolute; left: 0; bottom: 0; width: 100%; height: 150px; margin: 0; background: transparent; border-radius: 0; }
/* the name and the level are on the drawn entrance now (locker.js drawRanch): the old sign line stays out of the way */
.ranch-scene .ranch-sign { display: none; }
.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: 14px; 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); }
/* the account behind a gear at the end of the tabs */
.ranch-tabs .tab.rt-gear { flex: 0 0 44px; display: grid; place-items: center; padding: 6px 0; letter-spacing: 0; }
/* the Builder (public/builder.js): an empty arena with only the rider's ranch in it, full screen; a bar across the top
   and the decorations docked at the bottom, over the field like the game's own controls */
.builder { position: fixed; inset: 0; z-index: 12; background: #121b38; }
#bdCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#bdCanvas.panning { cursor: grabbing; }
/* the zoom buttons, stacked on the right over the field */
.bd-zoom { position: absolute; right: 12px; top: 50%; transform: translateY(-60%); display: flex; flex-direction: column; gap: 6px; }
.bd-zoom button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(10, 15, 31, .82); color: var(--ink); font: inherit; font-size: 20px; font-weight: 800; cursor: pointer; backdrop-filter: blur(6px); }
.bd-zoom button#bdFit { font-size: 11px; letter-spacing: 1px; }
.bd-zoom button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bd-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; pointer-events: none; }
.bd-top > * { pointer-events: auto; }
.bd-top .x-close { position: static; }
.bd-title { display: flex; flex-direction: column; gap: 3px; padding: 9px 14px; border-radius: 14px; background: rgba(10, 15, 31, .78); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(6px); max-width: min(560px, calc(100vw - 90px)); }
.bd-title b { font-size: 12px; letter-spacing: 3px; color: var(--gold); }
.bd-title span { font-size: 13px; color: var(--ink); }
.bd-dock { position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(720px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-radius: 18px; background: rgba(10, 15, 31, .86); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.bd-head { display: flex; align-items: baseline; gap: 10px; }
.bd-head b { font-size: 11px; letter-spacing: 3px; color: var(--gold); }
.bd-head span { font-size: 12px; color: var(--ink-dim); }
.bd-actions { display: flex; gap: 8px; justify-content: center; }
.bd-tray { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.bd-piece { position: relative; flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 5px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; cursor: pointer; }
.bd-piece canvas { width: 100%; height: auto; aspect-ratio: 160 / 104; border-radius: 10px; }   /* the drawing's own shape */
.bd-piece { touch-action: pan-x; }   /* a drag up pulls the piece out; sideways still scrolls the tray */
.bd-piece .bd-dog-face { width: 56px; aspect-ratio: 1; }
.bd-piece b { font-size: 11px; text-align: center; line-height: 1.2; }
.bd-piece small { font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-dim); }
.bd-piece.out { border-color: rgba(255, 210, 63, .45); } .bd-piece.out small { color: var(--gold); }
.bd-piece.pick, .bd-piece.sel { border-color: #7eff96; box-shadow: 0 0 0 2px rgba(126, 255, 150, .25); } .bd-piece.pick small { color: #7eff96; }
.bd-piece .lp-star { position: absolute; top: 5px; right: 7px; color: var(--gold); font-size: 12px; }
.bd-bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: center; }
.bd-bar .bd-save { margin: 0; min-height: 46px; }
.bd-bar button:disabled { opacity: .45; cursor: default; }
/* the rider's color: a dot with a little arrow in the banner's bottom-left corner; the swatches fold out above it */
.color-drop { position: relative; }
.ranch-scene .scene-color { position: absolute; left: 12px; bottom: 10px; z-index: 3; }
.color-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px 5px 5px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(10, 15, 31, .22); opacity: .7; transition: opacity .15s, background .15s, border-color .15s; color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.color-btn .cdot { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8, transparent 50%), var(--c, transparent); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.color-btn svg { color: var(--ink-dim); transition: transform .15s; }
/* the dot keeps out of the way of the ranch until it is wanted: solid under the pointer, when touched, focused or open */
.color-btn:hover, .color-btn:focus-visible, .color-btn:active, .color-btn[aria-expanded="true"] { opacity: 1; background: rgba(10, 15, 31, .8); border-color: rgba(255, 255, 255, .2); }
.color-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.color-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.color-picks { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; display: grid; grid-template-columns: repeat(5, 22px); gap: 8px; padding: 10px; border-radius: 14px; background: #10172f; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.color-pick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; background: radial-gradient(circle at 35% 30%, #fff8, transparent 50%), var(--c); cursor: pointer; padding: 0; }
.color-pick.on { border-color: #fff; box-shadow: 0 0 0 2px var(--c); }
.color-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* the Ranch tab: the lot's pieces, and the Builder */
.lot-card { display: flex; flex-direction: column; gap: 10px; }
.lot-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.lot-piece { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); }
.lot-piece canvas { width: 100%; max-width: 120px; height: auto; aspect-ratio: 200 / 128; border-radius: 10px; }   /* the drawing's own shape: a fixed height stretched it */
.lot-piece b { font-size: 12px; text-align: center; }
.lot-piece small { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.lot-piece.out { border-color: rgba(255, 210, 63, .45); }
.lot-piece.out small { color: var(--gold); }
.lot-piece .lp-star { position: absolute; top: 6px; right: 8px; color: var(--gold); font-size: 13px; }
.lot-empty { font-size: 13px; color: var(--ink-dim); line-height: 1.45; padding: 4px 2px; }
.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, body.corral-landing #wbHome, body.corral-landing .logo-wrap, body.corral-landing .live-line, body.corral-landing .live-split, body.corral-landing .logo { display: none; }
/* the gate's tools in the painting's corner: settings (the owner) and share */
.cl-banner .cl-tools { position: absolute; top: 8px; right: 50px; z-index: 3; display: flex; gap: 6px; }
.cl-tool { width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(5, 8, 20, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; display: grid; place-items: center; color: var(--gold); font-size: 18px; padding: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .12); transition: background .15s; }
.cl-tool:hover { background: rgba(5, 8, 20, .45); }
.cl-tool svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.cl-tool img { width: 20px; height: 20px; }
.cl-banner .scene-share { display: none; }
/* the link: the owner's first move, always in view */
.cl-link { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 8px 8px 14px; border-radius: 14px; border: 1px dashed rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .06); }
.cl-link-url { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-link .ghost-btn.sm, .cl-link .lk-btn.sm { padding: 7px 12px; font-size: 12px; flex: none; }
/* who is here, or the one thing to do */
.cl-here { margin: 10px 0 0; }
.cl-empty { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); font-size: 13px; color: var(--ink-dim); line-height: 1.45; }
.cl-empty b { display: block; color: var(--ink); font-size: 14px; margin-bottom: 2px; }
.cl-row2:empty { display: none; }
.cl-row2 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 10px; }
/* the Deed as one row; the footer links; the explainer folded */
.cl-deed-row { display: grid; grid-template-columns: 40px 1fr 16px; gap: 10px; align-items: center; width: 100%; margin: 14px 0 0; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, .25); background: rgba(255, 210, 63, .05); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.cl-deed-row img { width: 40px; height: 40px; } .cl-deed-row b { display: block; font-size: 14px; } .cl-deed-row small { color: var(--ink-dim); font-size: 12px; line-height: 1.35; }
.cl-deed-row .chev { width: 8px; height: 8px; border-right: 2px solid var(--ink-dim); border-bottom: 2px solid var(--ink-dim); transform: rotate(-45deg); }
.cl-foot { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 16px 0 4px; }
.cl-asrider { margin: 14px 0 0; padding: 8px 12px; border-radius: 12px; border: 1px dashed rgba(94, 241, 201, .5); background: rgba(94, 241, 201, .07); font-size: 12px; color: var(--ink); text-align: center; } .cl-asrider .link-btn { margin-left: 6px; }
.cl-boardnote { margin: 12px 0 0; font-size: 12px; color: var(--ink-dim); text-align: center; }
.cl-explain { margin-top: 10px; }
/* a sub page (settings, the talk): one bar back to the gate */
/* the way back from a sub page: a round chevron on the left, the page's name centered between it and a matching blank */
.cl-back { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.cl-back b { flex: 1; text-align: center; font-size: 14px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: var(--ink); }
.cl-back-btn, .cl-back-pad { flex: none; width: 36px; height: 36px; }
.cl-back-btn { border-radius: 50%; border: 1px solid rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .1); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background .15s, transform .15s; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.cl-back-btn:hover { background: rgba(255, 210, 63, .22); } .cl-back-btn:active { transform: scale(.94); }
.cl-back-btn i { display: block; width: 10px; height: 10px; margin-left: 4px; border-left: 2.5px solid var(--gold); border-bottom: 2.5px solid var(--gold); transform: rotate(45deg); border-radius: 1px; }
.cl-back.hidden { 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-names span.you { border: 1px solid rgba(255, 210, 63, .5); color: var(--ink); }
.cl-here .cl-names { margin-bottom: 8px; }
.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); }
/* the riders list in the corral's settings: a card of rows, the live ones lit */
.cp-riders { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); padding: 2px 12px; }
.cp-riders .cp-row { padding: 10px 0; gap: 10px; } .cp-riders .cp-row:last-child { border-bottom: 0; }
.cp-riders .cp-row .dot { flex: none; } .cp-riders .cp-who { flex: 1; min-width: 0; font-size: 14px; } .cp-riders .cp-who b { font-weight: 700; }
.cp-riders .cp-row.live .cp-who b { color: var(--gold); }
.cp-riders .cp-state { font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.cp-riders .cp-acts { display: flex; gap: 6px; flex: none; }
.cp-riders .cp-empty { color: var(--ink-dim); font-size: 13px; justify-content: center; }
.ghost-btn.xs { padding: 4px 9px; font-size: 11px; border-radius: 8px; }
.play-btn.ghost-alt { font-size: 16px; letter-spacing: 2px; padding: 10px 24px; filter: saturate(.6) brightness(.85); }
.cp-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; border-color: rgba(255, 210, 63, .4); color: var(--gold); } .cp-more .ic.art { width: 18px; height: 18px; }
.cp-for { font-style: normal; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); margin-left: 6px; } .ghost-btn.xs.danger { color: #ff4d6d; border-color: rgba(255, 77, 109, .4); }
/* the settings' sub tabs: one segmented pill, like the ranch's */
.cl-pane .cp-tabs { display: flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.cl-pane .cp-tabs .tab { flex: 1; border: none; border-radius: 999px; background: transparent; padding: 8px 6px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.cl-pane .cp-tabs .tab.active { background: var(--gold); color: #1a0b10; box-shadow: 0 4px 14px rgba(255, 210, 63, .3); }
.cl-pane .lk-sub { margin-top: 16px; }
.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; }
/* the setup page's own tabs: Look, and one per game type */
.cp-subtabs { display: flex; gap: 6px; margin: 6px 0 2px; }
.cp-subtabs button { flex: auto; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); color: var(--ink-dim); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cp-subtabs button img { width: 20px; height: 20px; object-fit: contain; opacity: .85; }
.cp-subtabs button.on { background: rgba(255, 210, 63, .12); border-color: rgba(255, 210, 63, .45); color: var(--ink); } .cp-subtabs button.on img { opacity: 1; }
.cp-now { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-dim); padding: 2px 4px 0; min-height: 18px; }
.cp-now b { color: var(--gold); font-weight: 800; } .cp-now .link-btn { font-size: 12px; }
.cp-sides .mode-btn { min-width: 0; flex: 1; }
.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); }
/* the Trading Post leads the row: a tile the size of a pick, the shop's own art on it */
.cp-more-tile { width: 36px; height: 36px; padding: 5px; border-radius: 8px; border: 2px dashed rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .08); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.cp-more-tile:hover { background: rgba(255, 210, 63, .16); border-color: var(--gold); }
.cp-more-tile img { width: 100%; height: 100%; object-fit: contain; }
.cp-more-scene { border: 2px dashed rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .06); color: var(--gold); }
.cp-more-scene:hover { background: rgba(255, 210, 63, .14); border-color: var(--gold); }
.cp-more-scene img { width: 100%; aspect-ratio: 3 / 1; object-fit: contain; padding: 4px 0 0; }
.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; }
/* a row of picture, words and a button: the words give way first, so the row fits any phone */
.corral-make > div, .fb-row > div, .cl-row > div { min-width: 0; }
.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-herd { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--ink-dim); } .gs-herd img { width: 22px; height: 22px; } .gs-herd b { color: var(--ink); margin-left: 4px; }
.gs-collect { margin: 10px auto 0; padding: 9px 26px; font-size: 14px; letter-spacing: 2px; display: block; }
.gold-strike.collected { opacity: .8; } .gold-strike.collected .gs-amount::after { content: 'collected'; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #5ef1c9; margin-left: 8px; font-weight: 700; }
.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: 138px; bottom: 12px; display: flex; flex-direction: column; }   /* clear of the tools in the corner */
.cl-banner .cl-live { font-size: 13px; }
.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); line-height: 1.15; }
/* 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%); }
.streak-card { width: min(460px, 100%); }   /* room for a calendar with square days */
.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; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; border: 1px dashed rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .05); }
.share-linkrow .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-linkrow .ghost-btn.sm { flex: none; padding: 6px 12px; font-size: 12px; }
.share-nets.inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 6px; margin: 4px 0 0; }
.share-nets.inline.hidden { display: none; }
.share-save { display: block; margin: 8px auto 0; font-size: 12px; }
.share-tally { font-size: 11px; color: var(--ink-dim); margin: 2px 0 0; text-align: center; }
.share-tally:empty { display: none; }
.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: 12px 0 0; line-height: 1.5; text-align: center; }
.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; }
/* the one worn: a gold check in its corner (the tile and the outfit card alike) */
.worn-check { position: absolute; top: 6px; right: 6px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #1a1200; background: linear-gradient(180deg, #ffe27a, #ffb300); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.lk-item { position: relative; }
.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; }
.lk-item.set-card canvas { width: 150px; height: 74px; flex: none; border-radius: 10px; background: #121b38; }
.lk-item.set-card .lk-name small { display: block; font-weight: 600; opacity: .7; margin-top: 2px; }
/* the season's collection: its card stands out from the sets under it */
#bvItems .bv-item.bv-set, #bvItems .bv-item.bv-only { grid-column: span 2; }
#bvItems .bv-item.bv-set canvas, #bvItems .bv-item.bv-only canvas { width: 100%; }
#bvItems .bv-item.bv-only { border-color: rgba(170, 120, 255, .6); background: linear-gradient(135deg, rgba(120, 255, 200, .08), rgba(170, 120, 255, .12)); }
#bvItems .bv-item em.only { color: #b996ff; }
.lk-item.set-card.collection { border-color: rgba(255, 154, 46, .7); background: linear-gradient(135deg, rgba(255, 138, 31, .16), rgba(170, 120, 255, .12)); box-shadow: 0 0 18px rgba(255, 138, 31, .18); }
.lk-item.set-card.collection .lk-name { font-size: 15px; }
/* Style > Outfits: the fitting room */
.fit-room { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fit-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fit-bar .fit-state { position: static; }
.fit-bar .fit-shuffle { position: static; width: auto; height: 34px; padding: 0 12px; gap: 6px; display: inline-flex; align-items: center; font: inherit; font-size: 12px; font-weight: 800; }
.fit-tag { position: absolute; top: 12px; right: 12px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.5px; color: #1a0f08; background: var(--gold); padding: 3px 7px; border-radius: 999px; }
.fit-stage { position: relative; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 70%, #1d2a57, #0e1530 70%); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 -30px 60px rgba(0, 0, 0, .25); }
.fit-stage canvas { display: block; width: 100%; height: 190px; }
.fit-state { position: absolute; left: 12px; top: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); background: rgba(7, 11, 23, .6); padding: 4px 10px; border-radius: 999px; }
.fit-state.trying { color: var(--gold); }
.fit-shuffle { position: absolute; right: 10px; top: 8px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(7, 11, 23, .6); color: var(--ink); cursor: pointer; transition: transform .15s, border-color .15s; }
.fit-shuffle:hover { border-color: var(--gold); color: var(--gold); transform: rotate(-8deg); }
.fit-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fit-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 7px 6px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.fit-slot canvas { width: 100%; max-width: 110px; height: 54px; flex: none; border-radius: 8px; background: #121b38; }
.fit-slot small { font-size: 9.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-dim); }
.fit-slot b { font-size: 12.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-slot.shop { border-style: dashed; }
.fit-slot:hover { border-color: rgba(255, 210, 63, .55); background: rgba(255, 210, 63, .06); }
.fit-change { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); opacity: .85; }
/* a slot's dialog: what the rider has of one kind */
#fitDialog { z-index: 11; }
.fit-dialog-card { width: min(560px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column; }
.fit-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(112px, 100%), 1fr)); gap: 10px; overflow-y: auto; padding: 4px 2px 8px; margin-top: 6px; }
.fit-dgrid .fit-pick canvas { max-width: 110px; height: 62px; }
.fit-dmore { margin-top: 10px; align-self: center; border: 0; background: none; color: var(--gold); font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; padding: 8px 12px; border-radius: 10px; }
.fit-dmore:hover { background: rgba(255, 210, 63, .08); }
.fit-dmore span { font-size: 16px; margin-left: 2px; }
.fit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(92px, 100%), 1fr)); gap: 8px; max-height: 262px; overflow-y: auto; padding: 2px; }
.fit-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 7px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); color: var(--ink); font: inherit; cursor: pointer; }
.fit-pick canvas { width: 100%; max-width: 84px; height: 48px; border-radius: 8px; background: #121b38; }
.fit-pick span { font-size: 11px; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-pick:hover { border-color: rgba(255, 210, 63, .45); }
.fit-pick.shop { background: rgba(255, 255, 255, .015); border-style: dashed; }
.fit-price { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 11px; font-weight: 800; color: var(--gold); }
.fit-price img { width: 13px; height: 13px; }
.fit-shop-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; margin: 6px 2px 0; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.fit-shop-head small { font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink-dim); }
.fit-get { display: flex; align-items: center; justify-content: center; gap: 12px; }
.fit-get-price { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(20, 8, 16, .25); letter-spacing: 0; }
.fit-get-price img { width: 18px; height: 18px; }
.fit-pick.on { border-color: var(--gold); background: rgba(255, 210, 63, .1); }
.fit-pick.on::after { content: ''; position: absolute; top: 5px; right: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23161020' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.fit-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.fit-wear { margin: 0; min-height: 50px; font-size: 15px; letter-spacing: 2px; white-space: nowrap; }
.fit-actions.solo { grid-template-columns: 1fr; }
.fit-wear[disabled] { filter: grayscale(.85) brightness(.75); cursor: default; box-shadow: none; }
.fit-save-btn { min-width: 86px; }
.fit-undo { align-self: center; border: 0; background: none; color: var(--ink-dim); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-top: -2px; }
.fit-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 10px; min-width: 0; }
.fit-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.fit-card canvas { width: 100%; max-width: 100%; min-width: 0; height: 86px; border-radius: 10px; background: #121b38; }
.fit-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; }
.fit-card-text b { font-size: 13.5px; }
/* a saved outfit: its grip to drag it (or press and hold), its name to tap and type over */
.fit-card .fit-grip { position: absolute; top: 12px; left: 12px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(7, 11, 23, .28); color: rgba(238, 242, 255, .75); cursor: grab; touch-action: none; padding: 0; }
.fit-card .fit-grip:hover, .fit-card .fit-grip:focus-visible { color: var(--ink); background: rgba(7, 11, 23, .6); }
.fit-card .fit-grip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fit-card-text .fit-name { align-self: flex-start; max-width: 100%; padding: 0; border: 0; border-bottom: 1px dashed rgba(255, 255, 255, .25); background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 800; text-align: left; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-card-text .fit-name:hover { border-bottom-color: var(--gold); }
.fit-name-edit { width: 100%; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--ink); background: rgba(255, 255, 255, .07); border: 1px solid var(--gold); border-radius: 8px; padding: 3px 7px; outline: none; }
#lockerItems.sorting { user-select: none; -webkit-user-select: none; }
.fit-card.lifted { z-index: 3; transform: scale(1.03); border-color: var(--gold); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); cursor: grabbing; }
.fit-card.lifted .fit-grip { cursor: grabbing; color: var(--gold); }
.fit-card.fresh { animation: fitfresh 1.4s ease-out 1; }
@keyframes fitfresh { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 63, .8); border-color: var(--gold); } 100% { box-shadow: 0 0 0 14px rgba(255, 210, 63, 0); } }
@media (prefers-reduced-motion: reduce) { .fit-card.fresh { animation: none; border-color: var(--gold); } .fit-card.lifted { transform: none; } }
.fit-card-text small { font-size: 11px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fit-card .lk-btn { align-self: stretch; justify-content: center; text-align: center; }
/* an outfit card is the button that wears it; the one worn glows gold, as a worn tile does */
.fit-card { cursor: pointer; transition: transform .12s, border-color .12s; }
.fit-card:hover { border-color: rgba(255, 210, 63, .45); }
.fit-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fit-card.on { cursor: default; border-color: transparent; background: linear-gradient(180deg, rgba(255, 210, 63, .2), rgba(255, 255, 255, .04)); box-shadow: 0 0 0 1.5px rgba(255, 210, 63, .95), 0 6px 20px rgba(255, 176, 46, .18); }
.fit-card .worn-check { top: 14px; right: 14px; }
.fit-card.on .ob-del { right: 40px; }
.fit-wearing { align-self: stretch; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--mint, #5ef1c9); padding: 7px; border-radius: 10px; background: rgba(94, 241, 201, .08); }
.fit-card .ob-del { top: 12px; right: 12px; background: rgba(7, 11, 23, .28); color: rgba(238, 242, 255, .75); }
.fit-card .ob-del:hover { background: rgba(7, 11, 23, .6); color: var(--ink); }
@media (max-width: 420px) { .fit-slot canvas { height: 42px; } .fit-stage canvas { height: 160px; } .fit-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fit-card canvas { height: 64px; } .fit-wear { font-size: 13px; letter-spacing: 1.2px; } .fit-save-btn { min-width: 70px; } }
.ob-del { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--ink-dim); font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.ob-del.armed { font-size: 11px; font-weight: 800; color: #fff; background: #ff4d6d; }
@media (max-width: 420px) { .lk-item.set-card canvas { width: 112px; height: 56px; } }
/* 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); }
/* a seasonal drop's own heading: the season's color, a little glow */
.lk-section.season { border-top-color: rgba(255, 138, 31, .45); }
.lk-section span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* on the Gold page (the + on the Gold count) no shelf tab is lit; any of them goes back to the shelves */
.post-tabs.on-gold .tab.active { background: none; border-color: rgba(255, 255, 255, .1); color: var(--ink-dim); }
.lk-section.season b { color: #ff9a2e; text-shadow: 0 0 12px rgba(255, 138, 31, .45); }
.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; }
/* the ranch level card (the Ranch tab): the badge, the name, how many decorations are out, the bar to the next level
   with its numbers, the next level's gifts as tags; the whole card is the button into the Builder */
.ranch-level { width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 14px; border-radius: 18px; border: 1px solid rgba(255, 210, 63, .35); background: linear-gradient(135deg, rgba(255, 210, 63, .12), rgba(255, 138, 31, .05)); transition: transform .12s, border-color .12s, box-shadow .12s; }
.ranch-level:hover { border-color: rgba(255, 210, 63, .7); box-shadow: 0 6px 22px rgba(255, 176, 46, .18); }
.ranch-level:active { transform: scale(.985); }
.ranch-level:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ranch-level .rl-top { display: flex; align-items: center; gap: 12px; }
.ranch-level .rl-badge { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; font-weight: 900; color: #1a0f08; background: linear-gradient(135deg, #ffe08a, #ffb02e); box-shadow: 0 3px 10px rgba(255, 176, 46, .35); }
.ranch-level .rl-words { flex: 1; min-width: 0; }
.ranch-level .rl-words b { display: block; font-size: 17px; letter-spacing: 1px; color: var(--gold); text-transform: uppercase; }
.ranch-level .rl-words small { font-size: 12px; color: var(--ink-dim); }
.ranch-level .rl-go { font-size: 26px; line-height: 1; color: var(--gold); }
.ranch-level .rl-progress { display: flex; align-items: center; gap: 10px; }
.ranch-level .rl-bar { flex: 1; display: block; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.ranch-level .rl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb02e, #ffe08a); }
.ranch-level .rl-progress span { flex: none; font-size: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.ranch-level .rl-progress span b { color: var(--ink); }
.ranch-level .rl-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ranch-level .rl-next small { font-size: 12px; color: var(--ink-dim); }
.ranch-level .rl-next small b { color: var(--ink); }
.ranch-level .rl-perks { display: flex; flex-wrap: wrap; gap: 6px; }
.ranch-level .rl-perks span { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255, 210, 63, .12); border: 1px solid rgba(255, 210, 63, .3); color: #ffe08a; }
.ranch-level .rl-build { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; margin-top: 2px; border-radius: 12px; background: var(--gold); color: #1a0f08; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.ranch-level .rl-build span { font-size: 17px; line-height: 1; }
.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); } }
/* the herd book's card itself (.herd-slot, .herd-cd, .herd-under) is in herdcard.css */
.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 sit-out count: one line, the number in its own slot so it never wraps as it ticks */
#respawnBtn .count { display: block; white-space: nowrap; letter-spacing: 3px; font-size: 22px; } #respawnBtn .count b { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { #respawnBtn .count { font-size: 19px; letter-spacing: 2px; } .death-stats { gap: 6px; } .death-stats div { padding: 8px 4px; } .death-stats b { font-size: 17px; } .death-stats span { font-size: 9px; letter-spacing: .5px; white-space: nowrap; } .next-round-btn .count { font-size: 19px; letter-spacing: 2px; } .podium-you { font-size: 13px; } .board-line { font-size: 13px; } }

/* 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: 8px auto 0; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .06); color: var(--gold); font: inherit; font-weight: 800; 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 */
/* short of a Gold: the scene stays, a bar says how far, the button answers "not yet", and a ride is one tap */
.melt-progress { display: grid; gap: 5px; justify-items: center; margin: -2px 6px 10px; }
.melt-progress .mp-bar { width: 100%; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.melt-progress .mp-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #aab6d8, #eef2ff); box-shadow: 0 0 10px rgba(220, 230, 255, .5); transition: width .4s; }
.melt-progress span { font-size: 12px; color: var(--ink-dim); }
.melt-progress b { color: #dfe6ff; }
.melt-btn.dim { filter: saturate(.35) brightness(.78); box-shadow: none; }
.vault-coin.nudge img { animation: vaultnudge .45s ease; }
@keyframes vaultnudge { 0%, 100% { transform: none; } 20% { transform: translateX(-5px) rotate(-4deg); } 40% { transform: translateX(5px) rotate(4deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.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; }
/* one number first: until Gold lands the wallet bar is Silver alone */
body.no-gold-yet .wb-gold { display: none; } body.no-gold-yet .wb-silver { border-radius: 14px; border-right: 1px solid rgba(255, 210, 63, .45); }
.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; }
body.first-rides .wb-pick { display: none; }   /* the goal pill waits until the third ride */
.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); }
/* ten head or more not banked: the button says what is at stake and glows, so a fall is never a surprise */
.sell-btn.warn { border-color: var(--gold); animation: sellwarn 1.6s ease-in-out infinite; }
.sell-btn.warn small { color: #ffe08a; }
@keyframes sellwarn { 0%, 100% { box-shadow: 0 0 14px rgba(255, 210, 63, .25); } 50% { box-shadow: 0 0 30px rgba(255, 210, 63, .6); } }
@media (prefers-reduced-motion: reduce) { .sell-btn.warn { animation: none; box-shadow: 0 0 24px rgba(255, 210, 63, .5); } }
.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; }

/* the earned badges: the tier reached, four pips, the count toward the next; one not reached yet is dimmed */
.badge-card { position: relative; }
.badge-shelf.earned { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.badge-card.fam { gap: 3px; padding-bottom: 12px; }
.badge-card.fam img { width: 64px; height: 64px; }
.badge-card.fam .bf-tier { font-size: 9px; letter-spacing: 2px; font-weight: 800; text-transform: uppercase; color: var(--ink-dim); }
.badge-card.fam.t-bronze .bf-tier { color: #e39a5b; } .badge-card.fam.t-silver .bf-tier { color: #cfd6e6; } .badge-card.fam.t-gold .bf-tier { color: var(--gold); } .badge-card.fam.t-diamond .bf-tier { color: #8fd8ff; }
.badge-card.fam .bf-pips { display: flex; gap: 4px; margin: 2px 0; }
.badge-card.fam .bf-pips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 0; }
.badge-card.fam .bf-pips i.bronze { background: #d9823f; } .badge-card.fam .bf-pips i.silver { background: #cfd6e6; } .badge-card.fam .bf-pips i.gold { background: #ffd23f; } .badge-card.fam .bf-pips i.diamond { background: #6fc8ff; box-shadow: 0 0 6px rgba(111, 200, 255, .8); }
.badge-card.fam .bf-bar, .badge-card.fam .bf-bar i { border: 0; }
.badge-card.fam .bf-bar { display: block; width: 86%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 3px; }
.badge-card.fam .bf-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8a1f, #ffd23f); }
.badge-card.fam small { font-size: 10.5px; letter-spacing: 0; font-weight: 500; text-align: center; color: var(--ink-dim); }
.badge-card.fam small b { font-size: inherit; color: var(--ink); }
.badge-card.fam[disabled] { cursor: default; opacity: .85; }
.badge-card.fam[disabled] img { filter: grayscale(1) brightness(.55); opacity: .6; }
.badge-card:not([disabled]):hover { border-color: rgba(255, 210, 63, .45); }
.badge-card.on { background: linear-gradient(180deg, rgba(255, 210, 63, .2), rgba(255, 255, 255, .04)); }

/* the messages: New and the Saddlebag, a small switch under the tabs */
.ib-sub { display: flex; width: fit-content; gap: 4px; padding: 3px; margin: 0 auto 8px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.ib-sub button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-dim); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ib-sub button:hover { color: var(--ink); }
.ib-sub button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ib-sub button[aria-selected="true"] { background: rgba(255, 210, 63, .16); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .45); }
.ib-sub button b { min-width: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; line-height: 18px; text-align: center; background: rgba(255, 255, 255, .1); color: var(--ink); }
.ib-sub button b:empty { display: none; }
.ib-sub button[data-view="new"] b { background: #ff4d6d; color: #fff; }
.ib-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 16px 20px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .14); text-align: center; }
.ib-empty b { font-size: 15px; }
.ib-empty small { font-size: 12.5px; color: var(--ink-dim); max-width: 30ch; }
.ib-empty .lk-btn { margin-top: 6px; }

/* a badge's info button, and the card that says how it is earned */
.bf-wrap { position: relative; display: grid; }
.bf-info-btn { position: absolute; top: 7px; left: 7px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 15, 31, .55); color: var(--ink); font: italic 700 12px/1 Georgia, 'Times New Roman', serif; cursor: pointer; }
.bf-info-btn:hover, .bf-info-btn:focus-visible { background: rgba(255, 210, 63, .2); border-color: var(--gold); color: var(--gold); }
.bf-info-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bf-info { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(4, 7, 16, .66); backdrop-filter: blur(3px); }
.bf-info.hidden { display: none; }
.bf-card { position: relative; width: min(360px, 100%); max-height: calc(100% - 24px); overflow: auto; padding: 22px 20px 18px; border-radius: 20px; border: 1px solid rgba(255, 210, 63, .35); background: linear-gradient(180deg, #1a2244, #0f1530); box-shadow: 0 20px 60px rgba(0, 0, 0, .55); text-align: center; color: var(--ink); }
.bf-card .x-close { position: absolute; top: 10px; right: 10px; }
.bf-card .bf-hero { width: 76px; height: 76px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5)); }
.bf-card h3 { margin: 6px 0 6px; font-size: 20px; }
.bf-card > p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--ink-dim); text-wrap: pretty; }
.bf-card .bf-now { display: inline-block; margin-bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 210, 63, .1); font-size: 13px; color: var(--ink-dim); }
.bf-card .bf-now b { color: var(--gold); }
.bf-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.bf-tiers li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.bf-tiers li img { width: 36px; height: 36px; filter: grayscale(1) brightness(.6); opacity: .7; }
.bf-tiers li.got img { filter: none; opacity: 1; }
.bf-tiers li b { display: block; font-size: 13px; }
.bf-tiers li small { font-size: 12px; color: var(--ink-dim); }
.bf-tiers .bf-got { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: #1a1200; background: linear-gradient(180deg, #ffe27a, #ffb300); }
.bf-card .bf-foot { margin: 12px 0 0; font-size: 12px; color: var(--ink-dim); }

/* the Badges tab: a star beside Style, like the gear */
.ranch-tabs .tab.rt-badge svg { display: block; }
#badgeShelf { display: block; }
/* Settings, under the gear: a row a setting, with a switch */
.set-list { display: grid; gap: 6px; margin: 0 0 18px; }
.set-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); cursor: pointer; text-align: left; }
.set-row b { display: block; font-size: 14px; color: var(--ink); }
.set-row small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--ink-dim); }
.set-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.set-row .set-sw { position: relative; width: 44px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: background .15s; flex: none; }
.set-row .set-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .15s; }
.set-row input:checked + .set-sw { background: linear-gradient(90deg, #ffb300, #ffd23f); }
.set-row input:checked + .set-sw::after { transform: translateX(18px); }
.set-row input:focus-visible + .set-sw { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .set-row .set-sw, .set-row .set-sw::after { transition: none; } }

/* the Builder's tray: the rider's badge, on its post, first */
.bd-piece.bd-badge .bd-badge-img { display: grid; place-items: center; height: 72px; }
.bd-piece.bd-badge .bd-badge-img img { width: 58px; height: 58px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }

/* a rest day on the streak calendar: it held the streak without a ride */
.sk-grid i.rested, .sk-key i.rested { background: repeating-linear-gradient(135deg, rgba(120, 170, 255, .45) 0 4px, rgba(120, 170, 255, .2) 4px 8px); border-color: rgba(120, 170, 255, .6); }

/* the level's own frame (art/levels, one a level; frames 7 to 12 wait for levels 7 to 12), the number on its gold panel */
.ranch-level .rl-badge.framed { width: 64px; height: 64px; margin: -8px -4px -8px -6px; border-radius: 0; background: center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.ranch-level .rl-badge.framed b { font-size: 22px; font-weight: 900; color: #3a1f06; text-shadow: 0 1px 0 rgba(255, 240, 190, .7); transform: translateY(2%); }

/* a badge on its sheriff star fills its card a little larger than a bare symbol */
.badge-card.fam img { width: 72px; height: 72px; }
.bf-card .bf-hero { width: 96px; height: 96px; }
.bf-tiers li img { width: 40px; height: 40px; }

/* the level card: quiet until the pointer is on it; a small Edit button to the Builder; the next level's gifts as tiles */
.ranch-level { cursor: default; border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.ranch-level:hover, .ranch-level:focus-within { border-color: rgba(255, 210, 63, .55); box-shadow: 0 6px 22px rgba(255, 176, 46, .12); }
.ranch-level:active { transform: none; }
.ranch-level .rl-edit { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .1); color: var(--gold); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.ranch-level .rl-edit:hover { background: rgba(255, 210, 63, .2); }
.ranch-level .rl-edit:active { transform: scale(.96); }
.ranch-level .rl-edit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ranch-level .rl-next { display: grid; gap: 8px; }
.ranch-level .rl-next-head { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); }
.ranch-level .rl-next-head b { color: var(--ink); }
.ranch-level .rl-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.ranch-level .rl-perks .rl-perk { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 8px 6px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); font-size: 12px; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.25; }
.ranch-level .rl-perk img { height: 34px; max-width: 64px; object-fit: contain; }
.ranch-level .rl-perk img.lit { filter: drop-shadow(0 0 6px rgba(255, 210, 63, .9)); }
.ranch-level .rl-perk .rl-slots { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 2px dashed rgba(255, 210, 63, .6); color: var(--gold); font-style: normal; font-size: 16px; font-weight: 900; }
.ranch-level .rl-perk em { font-style: normal; }

/* the next level's gifts: the pictures alone, bigger, no boxes; the room for decorations as +1; an info button */
.ranch-level .rl-next-head { display: flex; align-items: center; gap: 8px; }
.ranch-level .rl-info { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 15, 31, .5); color: var(--ink); font: italic 700 11.5px/1 Georgia, 'Times New Roman', serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
.ranch-level .rl-info:hover, .ranch-level .rl-info:focus-visible { border-color: var(--gold); color: var(--gold); }
.ranch-level .rl-perks { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.ranch-level .rl-perks .rl-perk { display: grid; place-items: center; padding: 0; border: 0; background: none; }
.ranch-level .rl-perk img { height: 56px; max-width: 96px; }
.ranch-level .rl-perk .rl-slots { width: 48px; height: 48px; font-size: 18px; border-radius: 12px; }
/* the levels card: each level's frame, what it takes and what it brings */
.lv-card { width: min(420px, 100%); text-align: left; }
.lv-card h3, .lv-card > p, .lv-card .bf-now { text-align: center; }
.lv-card .bf-now { display: block; width: fit-content; margin: 0 auto 12px; }
.lv-tiers li { grid-template-columns: 44px 1fr auto; align-items: start; }
.lv-tiers li.now { border-color: rgba(255, 210, 63, .55); background: rgba(255, 210, 63, .08); }
.lv-tiers li b em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-left: 6px; }
.lv-tiers li .lv-gives { display: block; margin-top: 2px; color: var(--ink); opacity: .85; }
.lv-frame { width: 44px; height: 44px; display: grid; place-items: center; background: center / contain no-repeat; }
.lv-frame b { font-size: 15px; font-weight: 900; color: #3a1f06; }
.lv-tiers li:not(.got) .lv-frame { filter: grayscale(.8) brightness(.75); }

/* the Builder's theme picker: Plain, or a theme the rider has earned */
.bd-themes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.bd-themes > b { font-size: 11px; letter-spacing: 2px; color: var(--gold); margin-right: 4px; }
.bd-themes button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.bd-themes button img { width: 20px; height: 20px; object-fit: contain; }
.bd-themes button[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 210, 63, .14); color: var(--gold); }
.bd-themes button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the feed: each rider a little comet in their color (head and a wisp of rope) and the name in that color; actions as icons */
.feed .item { display: inline-flex; align-items: center; gap: 7px; }
.feed .ft { display: inline-flex; align-items: center; gap: 5px; --c: #eef2ff; }
.feed .ft b { color: var(--c); }
.feed .fh { position: relative; width: 11px; height: 11px; margin-left: 9px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--c) 45%); box-shadow: 0 0 0 1.5px rgba(10, 15, 31, .8); }
.feed .fh::before { content: ''; position: absolute; right: 7px; top: 3px; width: 11px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--c)); opacity: .85; }
.feed .item img.fi { width: 16px; height: 16px; margin: 0; vertical-align: 0; }
.feed .item img.fcow { width: 22px; height: 22px; margin: -3px 0; vertical-align: 0; }

/* the season's logo carries more around its letters (pumpkins, lanterns, fence posts): a touch larger, so the letters
   read the same size as the ordinary logo's */
.logo-img.season-logo { width: min(100%, 400px); filter: drop-shadow(0 10px 24px rgba(255, 130, 40, .4)); }
.wc-logo.season-logo { width: min(270px, 78%); }
/* under a season's logo the tagline sits below it (the ordinary logo leaves room for it beneath the letters) */
.logo-wrap.season .tagline { position: static; display: block; text-align: center; margin-top: 2px; }

/* the screen while riding (Settings, Screen; client.js applyHud): each piece as the rider's layout says */
body.hud-nochat #hollerBar, body.hud-nofeed #feed, body.hud-nomap #minimap { display: none !important; }
body.hud-lean .humans-pill, body.hud-lean .round-label, body.hud-lean .practice-pill, body.hud-lean .snap-label, body.hud-lean .green-tag, body.hud-lean .hud-wallet { display: none !important; }
body.hud-board-top3 .leaderboard .row:nth-child(n+4):not(.me) { display: none; }
body.hud-board-top3 .leaderboard, body.hud-board-me .leaderboard { min-width: 0; }
body.hud-board-me .leaderboard .row:not(.me) { display: none; }
body.hud-board-me .leaderboard:not(:has(.row.me)) { display: none; }   /* off the board (knocked off, watching): nothing, not an empty pill */
body.hud-board-me .leaderboard { padding: 4px 6px; }
body.hud-score-small .stat-sub, body.hud-score-small .hud-wallet { display: none !important; }
body.hud-score-small .stat-panel { padding: 6px 12px; }
body.hud-score-small .stat-big { font-size: 22px; }

/* a phone's board never runs off the screen: it keeps to its column, and a long name gives way (with an ellipsis) */
@media (max-width: 720px) {
  .leaderboard { overflow: hidden; }
  .leaderboard .row { grid-template-columns: 16px 12px minmax(0, 1fr) auto auto; }
  .leaderboard .pv { min-width: 14px; }
}
/* the narrowest phones (a folding phone's outer screen, 280 to 340 wide): the board shows medal, color and number,
   the colors tell the riders apart; the score keeps to one line */
@media (max-width: 340px) {
  .leaderboard .row { grid-template-columns: 16px 12px auto auto; }
  .leaderboard .name { display: none; }
  .stat-big { white-space: nowrap; font-size: 20px; }
  .stat-big .unit { font-size: 11px; }
}

/* the home screen on the narrowest phones: the wallet row without its goal bar (the goal has its own card), PLAY
   without its line (the mode button beside it says the mode), the two small buttons without their icons */
@media (max-width: 340px) {
  .wbar .wb-track, .wbar .wb-pick { display: none; }
  #playBtn .sub { display: none; }
  #playBtn { font-size: 22px; letter-spacing: 3px; padding-left: 10px; padding-right: 10px; }
  .home-row.two .ghost-btn .ic { display: none; }
  .home-row.two .ghost-btn { font-size: 13px; padding-left: 8px; padding-right: 8px; }
}
/* the ranch page on narrow phones: all five tabs in the row (the gear used to fall off a 280-wide screen), the level
   card's line and its Edit button smaller */
@media (max-width: 380px) {
  .ranch-tabs .tab { padding: 8px 2px; font-size: 11px; letter-spacing: .6px; min-width: 0; }
  .ranch-tabs .tab.rt-gear { flex: 0 0 32px; }
  .ranch-level .rl-words small { font-size: 11px; line-height: 1.3; }
  .ranch-level .rl-edit { padding: 5px 9px; font-size: 11.5px; }
  .ranch-level .rl-top { gap: 8px; }
  .ranch-level .rl-badge.framed { width: 52px; height: 52px; }
}
@media (max-width: 340px) {
  .ranch-level .rl-dec { display: none; }   /* the lot's own heading says how many are out */
  .ranch-tabs .tab { font-size: 10.5px; letter-spacing: .2px; }
}
/* a phone on its side: the corner buttons (battery, sound, ranch) stand in a column down the right edge, so the
   board keeps clear of them */
@media (max-height: 500px) and (orientation: landscape) {
  body.playing .leaderboard { margin-right: 50px; }
}

/* Settings, Screen: the three layouts as cards, a piece's choice as a small segmented control */
.set-screen { display: grid; gap: 6px; margin: 0 0 12px; }
.set-screen-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px; }
.set-screen-head b { font-size: 14px; } .set-screen-head small { font-size: 12px; color: var(--ink-dim); }
.set-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.set-presets button { display: grid; gap: 2px; padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.set-presets button b { font-size: 13.5px; } .set-presets button small { font-size: 10.5px; color: var(--ink-dim); line-height: 1.3; }
.set-presets button[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 210, 63, .12); }
.set-presets button[aria-pressed="true"] b { color: var(--gold); }
.set-seg { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.set-seg button { border: 0; background: none; color: var(--ink-dim); font: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.set-seg button[aria-pressed="true"] { background: var(--gold); color: #1a0f08; }
.set-presets button:focus-visible, .set-seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 380px) { .set-screen .set-row.seg { grid-template-columns: 1fr; } .set-screen .set-row.seg .set-seg { justify-self: start; } .set-presets button small { display: none; } }

/* the arena's screen button (client.js cycleHud): on top of the corner column, its bars lit for how much is shown */
.hud-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; }
.hud-btn svg { width: 22px; height: 22px; display: block; }
.hud-btn rect { fill: rgba(255, 255, 255, .18); transition: fill .2s; }
.hud-btn[data-lit="1"] .hb1, .hud-btn[data-lit="2"] .hb1, .hud-btn[data-lit="2"] .hb2, .hud-btn[data-lit="3"] rect { fill: #ffd23f; }
.hud-btn:hover { border-color: rgba(255, 210, 63, .5); background: rgba(10, 15, 31, .85); }
.hud-btn:focus-visible { outline: 2px solid #ffd23f; outline-offset: 2px; }
body.playing .hud-btn { display: grid; bottom: calc(14px + 140px + 8px + 44px + 44px + 44px); }
@media (max-width: 720px) { body.playing .hud-btn { bottom: calc(14px + 90px + 8px + 44px + 44px + 44px); } }

/* the battery saver's second level (Max saver): a second dot beside the first, both lit green */
.cool-btn .cb-dot2 { right: 13px; }
.cool-btn[data-level="1"] .cb-dot2 { background: rgba(255, 255, 255, .25); box-shadow: none; }
.cool-btn[data-level="2"] .cb-dot { background: #7cff6b; box-shadow: 0 0 6px #7cff6b; }
.cool-btn[data-level="2"] { border-color: rgba(124, 255, 107, .5); background: rgba(124, 255, 107, .1); box-shadow: 0 0 12px rgba(124, 255, 107, .25); }
.cool-btn[data-level="2"] img { filter: none; }

/* the Gold packs never run off a narrow phone: two columns that may shrink, the struck-out first-pack number wraps to
   its own line, and the numbers step down a size under 400 wide (a store price like "49,99 €" fits the button too) */
.lk-packs, .gw-packs .lk-packs { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.gw-packs .lk-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lk-pack { min-width: 0; }
.lk-pack .g { flex-wrap: wrap; justify-content: center; row-gap: 0; }
.lk-pack .lk-btn.buy { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) {
  .gw-packs .lk-pack .g { font-size: 18px; }
  .gw-packs .lk-pack .g img { width: 20px; height: 20px; }
  .lk-pack .g s { font-size: 11px; }
}
/* the Trading Post's five tabs fit a 320-wide phone */
@media (max-width: 360px) {
  .post-tabs { gap: 4px; }
  .post-tabs .tab { min-width: 0; padding: 7px 3px; letter-spacing: 0; font-size: 11px; }
}
/* a short phone (an SE-sized 568 tall): the set card and the Gold card keep their main button in view: a shorter
   stage, the pieces three to a row and smaller */
@media (max-height: 640px) {
  #cbPreview, #spPreview, #bvPreview { height: 112px; }
  .bv-items { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin: 6px 0 10px; }
  .bv-item canvas, .sp-items canvas { height: 40px; }
  .sp-items { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
}
/* the Style tab's wear button fits beside Save on a narrow phone, and WEAR IT NOW stays one line at 320 */
@media (max-width: 380px) { .fit-wear { font-size: 12px; letter-spacing: 1px; padding-left: 8px; padding-right: 8px; } .fit-save-btn { min-width: 64px; } }
@media (max-width: 340px) { .fit-wear { font-size: 11px; letter-spacing: .5px; } #cbWear { font-size: 22px; letter-spacing: 2px; } }
/* the app: no money figure but a Gold pack's store price, whatever a screen forgets */
html.native #cpBuyDeed, html.native [data-deed-buy] { display: none !important; }
@media (max-width: 380px) { .celebrate-card #cbWear { font-size: 21px; letter-spacing: 2px; white-space: nowrap; } }
@media (max-width: 340px) { .celebrate-card #cbWear { font-size: 19px; letter-spacing: 1.5px; } }

/* an award's card: its own picture as the hero, a little larger */
.gf-hero.award { width: 112px; height: 112px; object-fit: contain; }
/* several awards on one card: a tile each, its picture, its name and its button word */
.gf-award { cursor: pointer; font: inherit; color: var(--ink); }
.gf-award img { width: 64px; height: 64px; object-fit: contain; }
.gf-award b { font-size: 11px; letter-spacing: 1px; color: var(--gold); }
.gf-award:hover, .gf-award:focus-visible { border-color: var(--gold); }
/* the Ranch tab's styles */
.ranch-styles { margin: 4px 0 12px; }
.ranch-styles .rs-seg { display: flex; flex-wrap: wrap; border-radius: 14px; }

/* a raider near the ranch: SELL THE HERD pulses (bank them before the loop closes) */
.sell-btn.raid-near { animation: sellRaid .7s ease-in-out infinite; }
@keyframes sellRaid { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 77, 109, .0); } 50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(255, 77, 109, .45); } }
@media (prefers-reduced-motion: reduce) { .sell-btn.raid-near { animation: none; box-shadow: 0 0 0 4px rgba(255, 77, 109, .55); } }

/* the fall card: Round them up, and the Ranch Hand's note */
.roundup-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 8px; border-color: rgba(255, 210, 63, .55); }
.roundup-btn .ic { width: 22px; height: 22px; }
.roundup-btn span { display: grid; gap: 1px; text-align: left; }
.roundup-btn small { font-size: 11px; font-weight: 500; color: var(--ink-dim); letter-spacing: 0; }
.roundup-btn:disabled { opacity: .5; }
.death-hand { margin: 6px 0 0; font-size: 13px; color: var(--gold); text-align: center; }
/* the Ranch tab: the Ranch Hand */
.ranch-hand { margin: 4px 0 12px; }
.ranch-hand .rh-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.ranch-hand .rh-row img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.ranch-hand .rh-row p { margin: 0; flex: 1; font-size: 13px; color: var(--ink-dim); }
.ranch-hand .rh-row button { flex: none; }
.ranch-hand .rh-hire { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .1); color: var(--gold); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.ranch-hand .rh-hire:hover { background: rgba(255, 210, 63, .2); }
.ranch-hand .rh-hire:active { transform: scale(.96); }
.ranch-hand .rh-hire:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ranch-hand .rh-hire:disabled { opacity: .5; }

/* the Ranch tab: the herding dog */
.ranch-dog { margin: 4px 0 12px; display: grid; gap: 8px; }
.ranch-dog .rd-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.ranch-dog .rd-face { width: 56px; height: 56px; flex: none; }
.ranch-dog .rd-row p { margin: 0; flex: 1; font-size: 13px; color: var(--ink-dim); }
.ranch-dog .rd-up { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); }
.ranch-dog .rd-up span { flex: 1; min-width: 120px; }
.ranch-dog .rd-up b { color: var(--ink); }
.ranch-dog .rd-up em { font-style: normal; font-size: 12px; }
.ranch-dog .rd-up button { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .1); color: var(--gold); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.ranch-dog .rd-up button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ranch-dog .rd-seg { display: flex; flex-wrap: wrap; border-radius: 14px; }
.ranch-dog .rd-seg button { display: inline-flex; align-items: center; gap: 5px; }
.ranch-dog .rd-seg i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); }
.ranch-dog .rd-seg button.locked { opacity: .75; }
.ranch-dog .rd-seg small { color: var(--gold); font-weight: 700; }
.ranch-dog .rd-row p, .ranch-hand .rh-row p { text-align: left; }
.ranch-dog .rd-label { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--ink-dim); margin-top: 2px; }

/* the info buttons on the herding dog and the Ranch Hand, and their box */
.lk-section .rk-info { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; padding: 0; margin-left: 6px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 15, 31, .5); color: var(--ink); font: italic 700 11.5px/1 Georgia, 'Times New Roman', serif; cursor: pointer; vertical-align: middle; }
.lk-section .rk-info:hover, .lk-section .rk-info:focus-visible { border-color: var(--gold); color: var(--gold); }
.ri-card .ri-lines { margin: 8px 0 4px; padding-left: 18px; text-align: left; display: grid; gap: 6px; font-size: 14px; color: var(--ink-dim); }
.ri-card .ri-tiers li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ri-card .ri-tiers small { display: block; }
.ri-card .ri-x { font-weight: 800; color: var(--gold); }
.ranch-dog .rd-up span { text-align: left; }
/* the herding dog, one row: its face, its speed meter, Faster, and its bandana; a small tray under it when tapped */
.ranch-dog .rd-row { padding: 8px 10px; }
.ranch-dog .rd-face { width: 44px; height: 44px; }
.ranch-dog .rd-mid { flex: 1; display: grid; gap: 4px; text-align: left; }
.ranch-dog .rd-mid b { font-size: 13px; }
.ranch-dog .rd-meter { display: flex; gap: 3px; }
.ranch-dog .rd-meter i { width: 18px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.ranch-dog .rd-meter i.on { background: var(--gold); }
.ranch-dog .rd-btn { flex: none; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .1); color: var(--gold); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.ranch-dog .rd-btn.on, .ranch-dog .rd-wear.on { background: rgba(255, 210, 63, .25); border-color: var(--gold); }
.ranch-dog .rd-wear { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 15, 31, .5); cursor: pointer; }
.ranch-dog .rd-wear i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); }
.ranch-dog .rd-btn:focus-visible, .ranch-dog .rd-wear:focus-visible, .ranch-dog .rd-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ranch-dog .rd-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 12.5px; color: var(--ink-dim); text-align: left; }
.ranch-dog .rd-pop > span { flex: 1; min-width: 120px; }
.ranch-dog .rd-pop > button:not(.rd-dot):not(.rd-breed):not(.rd-btile):not(.rd-trail) { padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .1); color: var(--gold); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.ranch-dog .rd-colors { gap: 10px; }
.ranch-dog .rd-dot { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .2); background: none; cursor: pointer; }
.ranch-dog .rd-dot i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); }
.ranch-dog .rd-dot.on { border: 2px solid var(--gold); }
.ranch-dog .rd-dot small { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); padding: 0 4px; border-radius: 6px; background: #1a1f35; color: var(--gold); font-size: 9px; font-weight: 800; }
.ranch-dog .rd-breed { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: none; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.ranch-dog .rd-breed.on { border-color: var(--gold); color: var(--gold); }
.ranch-dog .rd-dot.arm { border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(255, 210, 63, .3); }

/* the Builder: Undo and Reset as small icons at the end of the DECORATIONS line */
.bd-head .bd-tools { margin-left: auto; display: inline-flex; gap: 6px; }
.bd-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: var(--ink); cursor: pointer; }
.bd-ic:hover:not(:disabled), .bd-ic:focus-visible { border-color: var(--gold); color: var(--gold); }
.bd-ic:disabled { opacity: .35; cursor: default; }
.bd-bar .bd-save { flex: 1; }
.bd-head { align-items: center; }
.bd-bar .bd-save { width: 100%; }
.bd-bar { grid-template-columns: 1fr; }

/* the Builder's inventory: two tabs on the header line, a small grid that wraps (scrolls down when long) */
.bd-head .bd-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.bd-head .bd-tabs button { border: 0; background: none; color: var(--ink-dim); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.bd-head .bd-tabs button[aria-selected="true"] { background: var(--gold); color: #1a0f08; }
.bd-head .bd-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bd-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; overflow-x: hidden; overflow-y: auto; max-height: 176px; padding: 2px; }
.bd-tray .bd-piece { flex: initial; padding: 5px 4px; gap: 2px; touch-action: pan-y; }   /* a swipe scrolls the tray; a held press lifts the piece */
.bd-tray .bd-piece canvas { max-width: 64px; }
.bd-tray .bd-piece b { font-size: 10px; }
.bd-tray .bd-piece.bd-badge .bd-badge-img { height: 46px; }
.bd-tray .bd-piece.bd-badge .bd-badge-img img { width: 40px; height: 40px; }
.bd-tray .bd-piece .bd-dog-face { width: 40px; }
.bd-tray .lot-empty { grid-column: 1 / -1; }

/* the level card: the next level on one line, opened with a tap */
.ranch-level .rl-fold { display: inline-flex; align-items: center; gap: 6px; padding: 5px 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: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.ranch-level .rl-fold b { color: var(--gold); }
.ranch-level .rl-fold svg { transition: transform .2s; }
.ranch-level .rl-next.open .rl-fold svg { transform: rotate(180deg); }
.ranch-level .rl-fold:hover, .ranch-level .rl-fold:focus-visible { border-color: var(--gold); }
.ranch-level .rl-fold:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* the dog: arrows for its speed steps, its prices right in the row */
.ranch-dog .rd-meter { gap: 2px; }
.ranch-dog .rd-meter i { width: 14px; height: 11px; border-radius: 0; background: rgba(255, 255, 255, .16); clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%); }
.ranch-dog .rd-meter i.on { background: var(--gold); }
.ranch-dog .rd-buy { display: inline-flex; gap: 6px; flex: none; }
.ranch-dog .rd-pay { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .1); color: var(--gold); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.ranch-dog .rd-pay img { width: 15px; height: 15px; }
.ranch-dog .rd-pay.arm { background: rgba(255, 210, 63, .3); box-shadow: 0 0 0 3px rgba(255, 210, 63, .25); }
.ranch-dog .rd-pay:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ranch-dog .rd-next { flex: none; font-size: 12px; color: var(--ink-dim); }

/* the dog card: the dog from the side, its name (tap to change) over its speed */
.ranch-dog .rd-face { width: 64px; height: 54px; }
.ranch-dog .rd-mid { gap: 2px; }
.ranch-dog .rd-mid small { font-size: 11.5px; color: var(--ink-dim); font-weight: 700; }
.ranch-dog .rd-name { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-align: left; }
.ranch-dog .rd-name svg { color: var(--ink-dim); }
.ranch-dog .rd-name:hover svg, .ranch-dog .rd-name:focus-visible svg { color: var(--gold); }
.ranch-dog .rd-name:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.ranch-dog .rd-naming { display: inline-flex; gap: 6px; align-items: center; }
.ranch-dog .rd-naming input { width: 9.5em; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--gold); background: rgba(10, 15, 31, .6); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; }
.ranch-dog .rd-naming button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--gold); color: #1a0f08; font-weight: 900; cursor: pointer; }
.bd-piece .bd-dog-face { width: 56px; height: auto; aspect-ratio: 120 / 100; }

/* the dog card: Upgrade over its two prices; where the next one opens; the trail button and its tray */
.ranch-dog .rd-buy { flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
.ranch-dog .rd-buy em { flex-basis: 100%; text-align: right; font-style: normal; font-size: 11px; font-weight: 800; color: var(--ink-dim); }
.ranch-dog .rd-next { text-align: right; line-height: 1.25; }
.ranch-dog .rd-wear { color: var(--gold); }
.ranch-dog .rd-trails { gap: 6px; }
.ranch-dog .rd-trail { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: none; color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ranch-dog .rd-trail.on { border-color: var(--gold); background: rgba(255, 210, 63, .15); color: var(--gold); }
.ranch-dog .rd-trail.arm { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 210, 63, .25); }
.ranch-dog .rd-trail small { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-weight: 800; }
.ranch-dog .rd-trail small img { width: 12px; height: 12px; }
.ranch-dog .rd-trail:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the bell: From the ranch and Corral chat, each with its count; Write to the ranch is a line under the messages */
.ib-tabs .ib-tab-n:not(:empty) { margin-left: 6px; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff4d6d; color: #fff; font-size: 11px; font-weight: 800; }
.ib-tabs.single .tab { flex: 1; }
.ib-write { display: block; margin: 12px auto 0; font-size: 12.5px; }
.ib-back { display: block; margin: 0 0 8px; font-size: 12.5px; }
#ibChat { display: grid; gap: 8px; }
#ibChat.hidden { display: none; }
.ibc-corrals { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ibc-chip { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: var(--ink-dim); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.ibc-chip img { width: 22px; height: 22px; object-fit: contain; }
.ibc-chip[aria-selected="true"] { border-color: var(--gold); background: rgba(255, 210, 63, .14); color: var(--gold); }
.ibc-chip i { font-style: normal; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff4d6d; color: #fff; font-size: 10px; display: grid; place-items: center; }
.ibc-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ibc-head { display: flex; align-items: center; gap: 10px; text-align: left; }
.ibc-head img { width: 36px; height: 36px; object-fit: contain; }
.ibc-head div { flex: 1; display: grid; }
.ibc-head b { font-size: 15px; }
.ibc-head small { font-size: 11.5px; color: var(--ink-dim); }
.ibc-go { flex: none; text-decoration: none; font-size: 12px; padding: 6px 12px; }
.ibc-list { min-height: 200px; max-height: 42vh; }
.ibc-pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ibc-pills:empty { display: none; }
.ibc-form { display: flex; gap: 8px; }
.ibc-form input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(10, 15, 31, .6); color: var(--ink); font: inherit; font-size: 14px; }
.ibc-form input:focus { outline: none; border-color: var(--gold); }
.ibc-send { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--gold); color: #1a0f08; font-size: 18px; cursor: pointer; }
.ibc-send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ibc-note { margin: 0; font-size: 12px; color: var(--ink-dim); text-align: center; }
/* mute beside report on a chat line (the gate and the bell): the same small underlined word */
.cc-mute { font: inherit; font-size: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; opacity: .8; }
.cc-mute:disabled { text-decoration: none; opacity: .6; }
.ibc-list { text-align: left; }

/* ===== Messages (the bell): a compact header, segmented tabs, and a chat window that gets the height ===== */
#inbox .inbox-card { --ib-h: min(680px, calc(100vh - 32px)); width: min(460px, 100%); height: auto; min-height: min(500px, var(--ib-h)); max-height: var(--ib-h); padding: 14px 16px 16px; border-radius: 24px; display: flex; flex-direction: column; text-align: left; overflow: hidden; }
@supports (height: 100dvh) { #inbox .inbox-card { --ib-h: min(680px, calc(100dvh - 32px)); } }
#inbox .inbox-card:has(> #ibChat:not(.hidden)) { height: var(--ib-h); }
#inbox button, #inbox .ibc-go { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#inbox .ib-write svg path, #inbox .ibc-go svg path, #inbox .ibc-send svg path, #inbox .ib-back svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* header: bell tile, title, close in the row */
#inbox .ib-top { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; -webkit-user-select: none; user-select: none; }
#inbox .ib-bell { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 210, 63, .24), rgba(255, 159, 67, .1)); border: 1px solid rgba(255, 210, 63, .45); box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .14); }
#inbox .ib-bell img { width: 26px; height: 26px; display: block; transform-origin: 50% 12%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
#inbox .inbox-card:has(.ib-tab-n:not(:empty)) .ib-bell img { animation: bellring 2.4s ease-in-out infinite; }
#inbox .ib-title { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 800; line-height: 1; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink); }
#inbox .ib-top .x-close { position: static; flex: none; width: 34px; height: 34px; margin: -2px -4px -2px 0; }

/* the two places: a segmented track like My Ranch's tabs */
#inbox .ib-tabs { flex: none; 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); }
#inbox .ib-tabs.single { display: none; }
#inbox .ib-tabs .tab { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-dim); font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
#inbox .ib-tabs .tab:hover { color: var(--ink); }
#inbox .ib-tabs .tab.active { background: var(--gold); color: #1a0b10; box-shadow: 0 4px 14px rgba(255, 210, 63, .3); }
#inbox .ib-tabs .tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#inbox .ib-tab-n:empty { display: none; }
#inbox .ib-tabs .ib-tab-n:not(:empty) { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin: 0; padding: 0 5px; border-radius: 9px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0; line-height: 1; }
#inbox .ib-tabs .tab.active .ib-tab-n:not(:empty) { box-shadow: 0 0 0 2px rgba(26, 11, 16, .2); }

/* From the ranch: underline sub-tabs, a list that scrolls, Write to the ranch as a footer row */
#inbox #ibIn { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#inbox .ib-sub { flex: none; display: flex; width: auto; gap: 20px; margin: 0 0 10px; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: none; -webkit-user-select: none; user-select: none; }
#inbox .ib-sub button { gap: 6px; margin-bottom: -1px; padding: 4px 0 8px; border-radius: 0; border-bottom: 2px solid transparent; background: none; box-shadow: none; font-size: 13.5px; font-weight: 800; }
#inbox .ib-sub button[aria-selected="true"] { color: var(--ink); background: none; box-shadow: none; border-bottom-color: var(--gold); }
#inbox #ibLead { flex: none; margin: 0 0 8px; font-size: 12px; line-height: 1.35; text-align: left; }
#inbox .ib-list { flex: 1 1 auto; min-height: 0; max-height: none; align-content: start; gap: 6px; overflow-y: auto; overscroll-behavior: contain; }
#inbox .ib-list:has(> .ib-empty) { align-content: center; }
#inbox .ib-row { border-radius: 14px; padding: 10px 12px; transition: border-color .15s, background .15s, transform .1s; }
#inbox .ib-row:hover { border-color: rgba(255, 210, 63, .35); background: rgba(255, 255, 255, .06); }
#inbox .ib-row.new:hover { background: rgba(255, 210, 63, .1); }
#inbox .ib-row:active { transform: scale(.99); }
#inbox .ib-row b { line-height: 1.25; }
#inbox .ib-row small { display: block; margin-top: 2px; line-height: 1.35; }
#inbox .ib-write { flex: none; display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 0; padding: 8px 10px 8px 8px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
#inbox .ib-write:hover { border-color: rgba(255, 210, 63, .4); background: rgba(255, 210, 63, .06); }
#inbox .ib-write:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#inbox .ib-write img { flex: none; width: 30px; height: 30px; }
#inbox .ib-write span { flex: 1; min-width: 0; display: grid; gap: 1px; }
#inbox .ib-write b { font-size: 13.5px; font-weight: 800; color: var(--gold); }
#inbox .ib-write small { font-size: 11.5px; color: var(--ink-dim); }
#inbox .ib-write svg { flex: none; width: 16px; height: 16px; color: var(--ink-dim); }

/* Corral chat: chips, then one window (title bar, lines, dock) */
#inbox #ibChat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
#inbox .ibc-corrals { flex: none; display: flex; gap: 6px; margin: 0; padding: 0 28px 2px 0; overflow-x: auto; scrollbar-width: none; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
#inbox .ibc-corrals::-webkit-scrollbar { display: none; }
#inbox .ibc-chip { flex: none; height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px 0 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--ink-dim); font: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
#inbox .ibc-chip img { width: 24px; height: 24px; object-fit: contain; }
#inbox .ibc-chip:hover { color: var(--ink); border-color: rgba(255, 255, 255, .22); }
#inbox .ibc-chip[aria-selected="true"] { color: var(--gold); border-color: rgba(255, 210, 63, .7); background: rgba(255, 210, 63, .14); }
#inbox .ibc-chip i { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--coral); color: #fff; font-size: 10.5px; font-weight: 800; font-style: normal; }
#inbox .ibc-window { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(7, 11, 23, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
#inbox .ibc-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .07); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); text-align: left; -webkit-user-select: none; user-select: none; }
#inbox .ibc-head > img { flex: none; width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
#inbox .ibc-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
#inbox .ibc-who b { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#inbox .ibc-who small { font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#inbox .ibc-go { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid rgba(255, 210, 63, .5); background: rgba(255, 210, 63, .12); color: var(--gold); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
#inbox .ibc-go svg { width: 14px; height: 14px; }
#inbox .ibc-go:hover { background: rgba(255, 210, 63, .2); border-color: var(--gold); }
#inbox .ibc-go:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#inbox .ibc-list { flex: 1 1 auto; min-height: 120px; max-height: none; margin: 0; padding: 12px 10px; gap: 4px; border: 0; border-radius: 0; background: none; overflow-y: auto; overscroll-behavior: contain; text-align: left; }

/* bubbles: theirs on navy, yours in gold; a run from one rider sits tight, a new speaker gets air */
#inbox .cc-msg { max-width: 80%; gap: 1px; padding: 7px 11px 5px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 16px 16px 16px 6px; background: var(--navy-600); font-size: 13.5px; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
#inbox .cc-msg:not(.run) { margin-top: 6px; }
#inbox .cc-msg:first-child { margin-top: 0; }
#inbox .cc-msg.run { margin-top: 0; border-top-left-radius: 6px; }
#inbox .cc-msg.me { border-color: rgba(255, 210, 63, .4); border-radius: 16px 16px 6px 16px; background: linear-gradient(180deg, rgba(255, 210, 63, .26), rgba(255, 159, 67, .16)); }
#inbox .cc-msg.me.run { border-top-left-radius: 16px; border-top-right-radius: 6px; }
#inbox .cc-msg b { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .4px; }
#inbox .cc-msg span { color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
#inbox .cc-msg.me span { color: #fff; }
#inbox .cc-msg.pill span { font-weight: 700; }
#inbox .cc-msg small { align-self: flex-end; margin-top: 1px; color: var(--ink-dim); font-size: 10px; opacity: .85; }
#inbox .cc-msg small button { padding: 2px 0; color: inherit; text-decoration: none; opacity: .75; }
#inbox .cc-msg small button:hover { color: var(--coral); opacity: 1; }
#inbox .cc-msg small button[data-sure] { color: var(--coral); opacity: 1; font-weight: 700; }
#inbox .cc-msg small button:disabled { color: var(--ink-dim); opacity: .5; cursor: default; }
#inbox .cc-empty { margin: auto; padding: 16px; color: var(--ink-dim); font-size: 13px; text-align: center; }

/* the dock: quick words, then the input */
#inbox .ibc-dock { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-top: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); }
#inbox .ibc-pills { display: flex; gap: 6px; margin: 0; padding: 0 28px 0 0; overflow-x: auto; scrollbar-width: none; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
#inbox .ibc-pills:empty { display: none; }
#inbox .ibc-pills::-webkit-scrollbar { display: none; }
#inbox .ibc-pills .cc-pill { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform .1s, background .15s, border-color .15s; }
#inbox .ibc-pills .cc-pill.rally { border-color: rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .1); color: #ffe08a; }
#inbox .ibc-pills .cc-pill:hover { border-color: rgba(255, 210, 63, .7); }
#inbox .ibc-pills .cc-pill:active { transform: scale(.95); background: rgba(255, 210, 63, .22); }
#inbox .ibc-pills .cc-pill:disabled { opacity: .45; cursor: default; transform: none; }
#inbox .ibc-form { display: flex; align-items: center; gap: 8px; }
#inbox .ibc-form input { flex: 1; min-width: 0; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(7, 11, 23, .75); color: var(--ink); font: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
#inbox .ibc-form input::placeholder { color: var(--ink-dim); opacity: .8; }
#inbox .ibc-form input:focus { outline: none; border-color: rgba(255, 210, 63, .7); box-shadow: 0 0 0 3px rgba(255, 210, 63, .15); }
#inbox .ibc-send { flex: none; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(180deg, #ffe27a, #ffb300); color: #1a1200; box-shadow: 0 3px 10px rgba(255, 180, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6); cursor: pointer; transition: transform .1s, filter .15s; }
#inbox .ibc-send svg { width: 20px; height: 20px; }
#inbox .ibc-send:hover { filter: brightness(1.06); }
#inbox .ibc-send:active { transform: scale(.92); }
#inbox .ibc-send:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#inbox .ibc-note { margin: 0; padding: 4px 6px; font-size: 12px; line-height: 1.35; color: var(--ink-dim); text-align: center; }

/* Write to the ranch */
#inbox #ibOut { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; }
#inbox .ib-back { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; height: 32px; margin: 0; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
#inbox .ib-back svg { width: 16px; height: 16px; }
#inbox .ib-back:hover { border-color: rgba(255, 210, 63, .45); }
#inbox #ibOutLead { flex: none; margin: 2px 0 0; font-size: 13.5px; line-height: 1.4; text-align: center; }
#inbox .ib-review { flex: none; margin: 0 auto; }
#inbox .ib-rate { flex: none; margin: 0; }
#inbox #ibText { flex: 1 1 auto; min-height: 96px; max-height: 240px; resize: none; padding: 12px 14px; border-radius: 14px; border-color: rgba(255, 255, 255, .14); background: rgba(7, 11, 23, .6); font-size: 15px; line-height: 1.4; }
#inbox #ibText:focus { border-color: rgba(255, 210, 63, .7); box-shadow: 0 0 0 3px rgba(255, 210, 63, .15); }
#inbox #ibOut .play-btn { flex: none; margin-top: 2px; font-size: 22px; letter-spacing: 3px; padding: 13px 32px; }

/* scrollbars, like the ranch panel's */
#inbox .ib-list, #inbox .ibc-list, #inbox #ibOut { scrollbar-width: thin; scrollbar-color: rgba(255, 210, 63, .35) transparent; }
#inbox .ib-list::-webkit-scrollbar, #inbox .ibc-list::-webkit-scrollbar, #inbox #ibOut::-webkit-scrollbar { width: 6px; }
#inbox .ib-list::-webkit-scrollbar-thumb, #inbox .ibc-list::-webkit-scrollbar-thumb, #inbox #ibOut::-webkit-scrollbar-thumb { background: rgba(255, 210, 63, .35); border-radius: 999px; }
#inbox .ib-list::-webkit-scrollbar-track, #inbox .ibc-list::-webkit-scrollbar-track, #inbox #ibOut::-webkit-scrollbar-track { background: transparent; }

/* a mouse: chips and quick words wrap instead of scrolling sideways */
@media (hover: hover) and (pointer: fine) {
  #inbox .ibc-corrals { flex-wrap: wrap; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
  #inbox .ibc-pills { flex-wrap: wrap; max-height: 66px; overflow-x: hidden; overflow-y: auto; padding-right: 0; -webkit-mask-image: none; mask-image: none; }
}
/* phones: the card is the screen, minus a small gutter and the safe areas */
@media (max-width: 520px) {
  #inbox.overlay { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  #inbox .inbox-card { --ib-h: calc(100vh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom))); height: var(--ib-h); padding: 12px; border-radius: 22px; }
  #inbox .ib-top, #inbox .ib-tabs { margin-bottom: 10px; }
  #inbox .cc-msg { max-width: 86%; }
  #inbox .ibc-form input, #inbox #ibText { font-size: 16px; }
}
@supports (height: 100dvh) {
  @media (max-width: 520px) { #inbox .inbox-card { --ib-h: calc(100dvh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom))); } }
}
@media (max-width: 360px) {
  #inbox .ib-tabs .tab { gap: 4px; padding: 0 6px; font-size: 12px; letter-spacing: 0; }
  #inbox .ib-title { font-size: 15px; letter-spacing: 2px; }
}
@media (prefers-reduced-motion: reduce) { #inbox .ib-bell img { animation: none !important; } }

/* ===== Home, compact: one phone screen. Under PLAY: the corrals as one row of chips with Play with friends at its end,
   today as four tiles (daily ride, next crown, streak, board), two quiet rows (How to play and Help build the ranch;
   the account), one footer line. Scoped under #home so it outranks the older home rules without !important ===== */

/* --- the corrals row --- */
#home .hm-corrals { display: flex; align-items: stretch; gap: 6px; margin-top: 12px; }
#home .hm-chips { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; }
#home .hm-chips:empty { display: none; }
/* a chip (three to five corrals): the emblem, the name under it in two lines at most, a gold count on the corner while riders are in it */
#home .hm-chips .corral-row { position: relative; flex: 1 1 0; width: auto; min-width: 0; max-width: 128px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; margin: 0; padding: 5px 3px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, var(--navy-600), var(--navy-700)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 rgba(0, 0, 0, .3); color: var(--ink); text-align: center; text-decoration: none; transition: border-color .15s, transform .1s; -webkit-user-select: none; user-select: none; }
#home .hm-chips .corral-row:hover { border-color: rgba(255, 210, 63, .55); }
#home .hm-chips .corral-row:active { transform: translateY(1px); }
#home .hm-chips .corral-row.mine { border-color: rgba(255, 210, 63, .32); background: linear-gradient(180deg, rgba(255, 210, 63, .16), rgba(255, 210, 63, .03)), var(--navy-700); }
#home .hm-chips .corral-row.live { border-color: rgba(255, 210, 63, .65); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 rgba(0, 0, 0, .3), 0 0 12px rgba(255, 210, 63, .25); }
#home .hm-chips .corral-row .emb { flex: none; width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
#home .hm-chips .corral-row > div { flex: none; width: 100%; min-width: 0; }
#home .hm-chips .corral-row b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 10px; font-weight: 800; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
#home .hm-chips .corral-row > div > span, #home .hm-chips .corral-row .mine-pill { display: none; }   /* the pill stays in the markup: the Corral lesson finds the rider's own chip by it */
#home .hm-chips .corral-row .deed-mark { position: absolute; top: 19px; left: calc(50% + 5px); width: 16px; height: 16px; margin: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
#home .hm-chips .corral-row .in-now { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border: 0; font-size: 10.5px; line-height: 1; }
#home .hm-chips .corral-row .in-now:not(.on) { display: none; }
/* two corrals: half and half, the emblem beside the name and its line */
#home .hm-chips .corral-row:first-child:nth-last-child(2), #home .hm-chips .corral-row:first-child:nth-last-child(2) ~ .corral-row { max-width: none; flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; }
#home .hm-chips .corral-row:first-child:nth-last-child(2) .emb, #home .hm-chips .corral-row:first-child:nth-last-child(2) ~ .corral-row .emb { width: 30px; height: 30px; }
#home .hm-chips .corral-row:first-child:nth-last-child(2) > div, #home .hm-chips .corral-row:first-child:nth-last-child(2) ~ .corral-row > div { flex: 1; width: auto; }
#home .hm-chips .corral-row:first-child:nth-last-child(2) b, #home .hm-chips .corral-row:first-child:nth-last-child(2) ~ .corral-row b { display: block; font-size: 12.5px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
#home .hm-chips .corral-row:first-child:nth-last-child(2) > div > span, #home .hm-chips .corral-row:first-child:nth-last-child(2) ~ .corral-row > div > span { display: block; font-size: 10.5px; line-height: 1.25; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home .hm-chips .corral-row:first-child:nth-last-child(2) .deed-mark, #home .hm-chips .corral-row:first-child:nth-last-child(2) ~ .corral-row .deed-mark { top: auto; bottom: 5px; left: 26px; }
/* one corral: a wide chip with the whole line, the Deed and the count at the end */
#home .hm-chips .corral-row:only-child { max-width: none; flex-direction: row; align-items: center; gap: 10px; padding: 6px 8px 6px 10px; text-align: left; }
#home .hm-chips .corral-row:only-child .emb { width: 34px; height: 34px; }
#home .hm-chips .corral-row:only-child > div { flex: 1; width: auto; }
#home .hm-chips .corral-row:only-child b { display: block; font-size: 14px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
#home .hm-chips .corral-row:only-child > div > span { display: block; font-size: 11px; line-height: 1.3; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home .hm-chips .corral-row:only-child .deed-mark { position: static; flex: none; width: 26px; height: 26px; }
#home .hm-chips .corral-row:only-child .in-now { position: static; flex: none; min-width: 28px; height: 28px; padding: 0 8px; font-size: 13px; border: 1px solid rgba(255, 255, 255, .1); }
#home .hm-chips .corral-row:only-child .in-now:not(.on) { display: grid; }

/* Play with friends: the whole row when the rider has no corral; a small tile with a + at the end of the chips when they do */
#home .hm-friends { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin: 0; padding: 8px 14px; border-radius: 14px; border: 1px solid rgba(255, 210, 63, .42); background: linear-gradient(180deg, rgba(255, 210, 63, .15), rgba(255, 210, 63, .04)), var(--navy-700); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .3); color: var(--ink); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: border-color .15s, transform .1s; -webkit-user-select: none; user-select: none; }
#home .hm-friends:hover, #home .hm-friends.live { border-color: rgba(255, 210, 63, .75); }
#home .hm-friends:active { transform: translateY(1px); }
#home .hm-friends .ic.art { flex: none; width: 28px; height: 28px; vertical-align: 0; }
#home .hm-friends .hm-short { display: none; }
#home .hm-friends .count { 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); }
#home .hm-chips:not(:empty) + .hm-friends { flex: 0 0 60px; flex-direction: column; gap: 3px; min-height: 56px; padding: 5px 2px 4px; font-size: 10.5px; line-height: 1.2; }
#home .hm-chips:not(:empty) + .hm-friends #corralBtnLabel, #home .hm-chips:not(:empty) + .hm-friends .count { display: none; }   /* each chip carries its own count */
#home .hm-chips:not(:empty) + .hm-friends .hm-short { display: block; }
#home .hm-chips:not(:empty) + .hm-friends::after { content: '+'; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); color: #1a0b10; font-size: 14px; font-weight: 900; line-height: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* --- today: four tiles in a row --- */
#home .hm-tiles { --tp: 7px; --ti: 30px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 10px; }
#home .hm-today { display: contents; }   /* its three tiles sit in the row beside the board; hidden (locker.js), it takes them with it */
#home .hm-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; width: auto; min-width: 0; min-height: 0; margin: 0; padding: var(--tp) 2px 11px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, var(--navy-600), var(--navy-700)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 3px 0 rgba(0, 0, 0, .32); color: var(--ink); font: inherit; text-align: center; cursor: pointer; overflow: hidden; transition: border-color .15s, transform .1s, box-shadow .1s; -webkit-user-select: none; user-select: none; }
#home .hm-tile:hover { border-color: rgba(255, 210, 63, .55); }
#home .hm-tile:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 0 rgba(0, 0, 0, .32); }
#home .hm-tile > img { position: static; flex: none; width: var(--ti); height: var(--ti); margin: 0 0 8px; object-fit: contain; transform: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); }
#home .hm-tile .ds-main, #home .hm-tile .cs-main, #home .hm-tile .ss-main, #home .hm-tile .hm-main { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; min-width: 0; overflow: visible; white-space: normal; }
/* the tile's name: one line */
#home .hm-tile .ds-main b, #home .hm-tile .cs-main b, #home .hm-tile .ss-main small, #home .hm-tile .hm-main b { display: block; max-width: 100%; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home .hm-tile .ss-main small::first-letter { text-transform: uppercase; }   /* "day streak" reads as a name: Day streak */
/* its line: dim, two lines at most */
#home .hm-tile .ds-main small, #home .hm-tile .cs-main small, #home .hm-tile .ss-sub, #home .hm-tile .hm-main small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; margin: 0; overflow: hidden; font-size: 10.5px; font-weight: 600; line-height: 1.2; color: var(--ink-dim); white-space: normal; text-align: center; }
#home .hm-tile .ds-main small::before, #home .hm-tile .cs-main small::before { content: none; }
/* the number on the icon's foot: crown wins, streak days, the board rank, the daily ride's 2x */
#home #crownBar em, #home #streakBtn .ss-main b, #home #boardRank, #home #dailyBar .hm-x2 { position: absolute; top: calc(var(--tp) + var(--ti) - 10px); left: 50%; transform: translateX(-50%); min-width: 20px; height: 17px; margin: 0; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 900; font-style: normal; line-height: 1; letter-spacing: 0; white-space: nowrap; color: #1a1200; background: linear-gradient(180deg, #ffe27a, #ffb300); box-shadow: 0 2px 5px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
#home #streakBtn .ss-main b { background: linear-gradient(180deg, #ffbd7a, #ff7a1a); color: #2a0b00; }
#home #streakBtn.cold .ss-main b { background: #3a4466; color: var(--ink); box-shadow: 0 2px 5px rgba(0, 0, 0, .45); }
#home #streakBtn.cold > img { filter: grayscale(1) brightness(.7); }
/* the daily ride: the call to ride, so the warm one; lit while its game type is the one PLAY will ride */
#home #dailyBar { border-color: rgba(255, 210, 63, .38); background: linear-gradient(180deg, rgba(255, 210, 63, .17), rgba(255, 210, 63, .03)), var(--navy-700); }
#home #dailyBar:hover { border-color: rgba(255, 210, 63, .7); }
#home #dailyBar.on { border-color: rgba(255, 210, 63, .85); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .3), 0 3px 0 rgba(0, 0, 0, .32), 0 0 14px rgba(255, 210, 63, .28); }
#home #dailyBar.done { border-color: rgba(255, 255, 255, .09); background: linear-gradient(180deg, var(--navy-600), var(--navy-700)); opacity: .78; }
#home #dailyBar.done .hm-x2 { display: none; }
#home #dailyBar em { display: block; max-width: 100%; margin: 1px 0 0; font-size: 10.5px; font-weight: 800; font-style: normal; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#home #dailyBar em:empty { display: none; }
/* the crown: its bar along the tile's floor */
#home #crownBar .cs-bar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 4px; margin: 0; }
#home #crownBar .cs-main small { -webkit-line-clamp: 1; }
/* the board alone (before the first round there is no daily ride, crown or streak): one slim line, not a tall tile */
#home .hm-tiles:has(> #todayCard.hidden) .hm-board { flex-direction: row; justify-content: center; gap: 10px; padding: 8px 14px; }
#home .hm-tiles:has(> #todayCard.hidden) .hm-board > img { margin: 0; }
#home .hm-tiles:has(> #todayCard.hidden) .hm-board .hm-main { width: auto; align-items: flex-start; }
#home .hm-tiles:has(> #todayCard.hidden) #boardRank { position: static; transform: none; order: 3; }

/* --- the quiet rows: How to play beside Help build the ranch; then the account --- */
#home .hm-util { display: flex; gap: 6px; margin-top: 12px; }
#home .hm-util.hm-acct { margin-top: 6px; }
#home .hm-pill { flex: 1 1 0; display: flex; align-items: center; gap: 8px; width: auto; min-width: 0; min-height: 44px; margin: 0; padding: 6px 10px 6px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .035); box-shadow: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
#home .hm-pill.hm-howto { flex: none; }   /* as wide as its words; Help build the ranch takes the rest */
#home .hm-pill:hover { border-color: rgba(255, 210, 63, .45); background: rgba(255, 210, 63, .06); }
#home .hm-pill > img { flex: none; width: 26px; height: 26px; max-width: none; margin: 0; object-fit: contain; vertical-align: 0; }
#home .hm-pill .hm-pt, #home .hm-pill .pb-text { display: grid; gap: 0; min-width: 0; }
#home .hm-pill b { font-size: 12.5px; font-weight: 800; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home .hm-pill small { margin: 0; font-size: 10.5px; line-height: 1.25; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#home .hm-pill.protect-badge:not(.on) { border-color: rgba(255, 210, 63, .42); background: rgba(255, 210, 63, .07); }
#home .hm-pill.protect-badge b { color: var(--gold); }
/* a first-timer's eye goes to the rules (locker.js sets .first until the first round) */
#home .hm-howto.first { border-color: rgba(255, 210, 63, .8); background: rgba(255, 210, 63, .12); animation: hmnudge 2.4s ease-in-out infinite; }
#home .hm-howto.first b { color: var(--gold); }
@keyframes hmnudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0); } 50% { box-shadow: 0 0 0 4px rgba(255, 210, 63, .2); } }

/* --- the footer: the record and the privacy link on one line --- */
#home .home-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; margin: 12px 0 0; font-size: 11.5px; color: var(--ink-dim); }
#home .home-foot .record { margin: 0; font-size: 11.5px; opacity: .85; }
#home .home-foot .record:empty { display: none; }
#home .home-foot .record:not(:empty)::after { content: '\00b7'; margin-left: 8px; }
#home .home-foot .link-btn { font-size: 11.5px; color: var(--ink-dim); }
#home .home-foot .link-btn:hover { color: var(--gold); }

/* --- focus: every door on the card shows where the keyboard is --- */
#home .hm-tile:focus-visible, #home .hm-pill:focus-visible, #home .hm-friends:focus-visible, #home .hm-chips .corral-row:focus-visible, #home .home-foot .link-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- phones: a tighter gutter and card edge, so four tiles and five chips have the width --- */
@media (max-width: 480px) {
  #home.overlay { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  #home .home-card { --cpx: 14px; padding-left: 14px; padding-right: 14px; }
  body:not(.corral-landing) #home .home-card { padding-top: 18px; padding-bottom: 14px; }
}
/* the narrowest phones: the words a size down, the gaps a little tighter */
@media (max-width: 380px) {
  #home .hm-corrals { gap: 5px; }
  #home .hm-chips, #home .hm-tiles { gap: 4px; }
  #home .hm-chips:not(:empty) + .hm-friends { flex-basis: 54px; }
  #home .hm-chips .corral-row { padding-left: 2px; padding-right: 2px; }
  #home .hm-chips .corral-row b { font-size: 9.5px; letter-spacing: -.2px; }
  #home .hm-tile .ds-main b, #home .hm-tile .cs-main b, #home .hm-tile .ss-main small, #home .hm-tile .hm-main b { font-size: 11px; }
  #home .hm-tile .ds-main small, #home .hm-tile .cs-main small, #home .hm-tile .ss-sub, #home .hm-tile .hm-main small, #home #dailyBar em { font-size: 10px; }
  #home .hm-pill { gap: 6px; padding: 6px 8px 6px 6px; }
  #home .hm-pill > img { width: 22px; height: 22px; }
  #home .hm-pill b { font-size: 11.5px; }
  #home .hm-pill small { font-size: 10px; }
}
/* a short screen (a small phone, or a browser's bars): the logo and the name row give up a little height */
@media (max-width: 520px) and (max-height: 760px) {
  #home .logo-wrap { width: min(240px, 100%); margin-bottom: 2px; }
  #home .wbar { margin: 2px 0 8px; }
  #home #nameInput { padding-top: 10px; padding-bottom: 10px; font-size: 18px; }
  #home #playBtn { padding-top: 12px; padding-bottom: 12px; }
  #home .hm-corrals { margin-top: 10px; }
  #home .hm-tiles { margin-top: 8px; }
  #home .hm-util { margin-top: 10px; }
  #home .hm-util.hm-acct { margin-top: 6px; }
}
/* a wide screen: the tiles a size up */
@media (min-width: 521px) {
  #home .hm-tiles { --tp: 9px; --ti: 36px; gap: 8px; }
  #home .hm-tile .ds-main b, #home .hm-tile .cs-main b, #home .hm-tile .ss-main small, #home .hm-tile .hm-main b { font-size: 13px; }
  #home .hm-tile .ds-main small, #home .hm-tile .cs-main small, #home .hm-tile .ss-sub, #home .hm-tile .hm-main small, #home #dailyBar em { font-size: 11px; }
  #home .hm-chips .corral-row, #home .hm-chips:not(:empty) + .hm-friends { min-height: 60px; }
  #home .hm-chips:not(:empty) + .hm-friends { flex-basis: 68px; }
  #home .hm-pill { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { #home .hm-howto.first { animation: none; box-shadow: 0 0 0 3px rgba(255, 210, 63, .2); } }
/* the tiles' numbers: a small quiet tag in each tile's top-left corner (2x, 0/5, the streak, the rank), not a bold pill on the icon */
#home #crownBar em, #home #streakBtn .ss-main b, #home #boardRank, #home #dailyBar .hm-x2 { top: 6px; left: 6px; transform: none; min-width: 0; height: 16px; padding: 0 5px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .07); color: var(--ink-dim); box-shadow: none; font-size: 10px; font-weight: 800; }
#home #dailyBar .hm-x2 { color: var(--gold); border-color: rgba(255, 210, 63, .3); background: rgba(255, 210, 63, .08); }
#home #streakBtn .ss-main b { color: #ffb070; background: rgba(255, 140, 50, .1); border-color: rgba(255, 140, 50, .3); }
#home #streakBtn.cold .ss-main b { color: var(--ink-dim); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .1); }
#home .hm-tile > img { margin-bottom: 4px; }
/* the Ranch Hand card: one line, then the days left as steps (like the dog's speed) or the price */
.ranch-hand .rh-mid { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; }
.ranch-hand .rh-mid b { font-size: 13px; font-weight: 800; color: var(--ink); }
.ranch-hand .rh-mid small { font-size: 11.5px; font-weight: 700; color: var(--ink-dim); }
.ranch-hand .rh-days { display: flex; gap: 3px; margin-top: 2px; }
.ranch-hand .rh-days i { width: 12px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.ranch-hand .rh-days i.on { background: var(--gold); }
/* a service on the purchase card (the Ranch Hand): its picture on the stage */
#spend .sp-svc-img { display: block; width: 120px; height: 120px; margin: 8px auto; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }

/* the trail pills: a little picture of each trail beside its name */
.ranch-dog .rd-trail .rd-tsw { width: 48px; height: 16px; border-radius: 5px; background: linear-gradient(180deg, #3aa0d8, #2b84bd); }   /* the ranch's land, so every trail reads as it does on the field */
/* the tiles' numbers: just the number in the corner, no frame */
#home #crownBar em, #home #streakBtn .ss-main b, #home #boardRank, #home #dailyBar .hm-x2, #home #streakBtn.cold .ss-main b { border: 0; background: none; padding: 0; height: auto; font-size: 11px; }
#home #crownBar em, #home #streakBtn .ss-main b, #home #boardRank, #home #dailyBar .hm-x2 { top: 7px; left: 10px; }
/* a crown's card: how to win it is a note, not a button */
#spend #spCash.sp-note, #spend #spCash.sp-note:disabled { border: 0; background: none; box-shadow: none; opacity: 1; cursor: default; color: var(--ink-dim); font-weight: 700; }

/* the dog card: its picture opens the breeds; each breed a tile with the dog from the side */
.ranch-dog .rd-facebtn { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.ranch-dog .rd-facebtn:disabled { cursor: default; }
.ranch-dog .rd-facebtn.on, .ranch-dog .rd-facebtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ranch-dog .rd-swap { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1a0b10; font-size: 12px; font-style: normal; font-weight: 900; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.ranch-dog .rd-breeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.ranch-dog .rd-btile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; cursor: pointer; }
.ranch-dog .rd-btile > img { width: 64px; height: 52px; object-fit: contain; }
.ranch-dog .rd-btile b { font-size: 11px; line-height: 1.15; text-align: center; }
.ranch-dog .rd-btile small { font-size: 10.5px; color: var(--ink-dim); font-weight: 700; }
.ranch-dog .rd-btile small.g { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); }
.ranch-dog .rd-btile small.g img { width: 12px; height: 12px; }
.ranch-dog .rd-btile.on { border-color: var(--gold); background: rgba(255, 210, 63, .12); }
.ranch-dog .rd-btile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ranch-dog .rd-pop > button.rd-btile { border-radius: 12px; padding: 6px 4px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04); color: var(--ink); font-size: inherit; white-space: normal; }
.ranch-dog .rd-pop > button.rd-btile.on { border-color: var(--gold); background: rgba(255, 210, 63, .12); }
/* the trails: one large sample (the dog running with the trail tapped) and its button, then the names */
.ranch-dog .rd-trails { display: flex; flex-wrap: wrap; gap: 6px; }
.ranch-dog .rd-sample { flex-basis: 100%; display: grid; gap: 6px; margin-bottom: 2px; }
.ranch-dog .rd-sample canvas { width: 100%; height: auto; aspect-ratio: 560 / 150; border-radius: 12px; }
.ranch-dog .rd-sbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ranch-dog .rd-sbar b { font-size: 14px; font-weight: 800; color: var(--ink); }
.ranch-dog .rd-sbar span { font-size: 12px; font-weight: 700; color: var(--gold); }
.ranch-dog .rd-pop .rd-sbar button { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; border: 0; background: var(--gold); color: #1a0b10; font: inherit; font-size: 12.5px; font-weight: 900; cursor: pointer; }
.ranch-dog .rd-sbar button img { width: 14px; height: 14px; }
.ranch-dog .rd-sbar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ranch-dog .rd-trail.cur { border-color: rgba(255, 210, 63, .45); }

/* the Builder's extras: how many are left to place, a price when none are, a + to buy one more */
.bd-tray .bd-extra { position: relative; }
.bd-tray .bd-extra .bd-n { color: var(--gold); font-weight: 800; letter-spacing: 0; font-size: 11px; }
.bd-tray .bd-extra .bd-price { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-weight: 800; letter-spacing: 0; font-size: 11px; }
.bd-tray .bd-extra .bd-price img { width: 12px; height: 12px; }
.bd-tray .bd-extra.none canvas { opacity: .55; }
.bd-tray .bd-extra .bd-more { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #1a0b10; font-size: 14px; font-weight: 900; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
/* the purchase card over the Builder (a ranch extra) */
#spend { z-index: 13; }

/* messages show over everything a rider can have open (the Builder, the purchase card); the coins still fly over them */
.toast { z-index: 30; }
/* the Builder's Extras: the rider's Gold, beside Undo and Reset */
.bd-head .bd-gold { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 210, 63, .12); color: var(--gold); font-weight: 800; font-size: 13px; }
.bd-head .bd-gold img { width: 16px; height: 16px; }
.bd-head .bd-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.bd-head .bd-right .bd-gold, .bd-head .bd-right .bd-tools { margin-left: 0; }

/* from inside the Builder: the Trading Post (Get Gold) opens over it, and the purchase card over both */
body.building #post { z-index: 14; }
body.building #spend { z-index: 15; }
/* a narrow screen: the Gold and Undo/Reset take a line of their own under the tabs rather than run off the edge */
.bd-head { flex-wrap: wrap; row-gap: 6px; }
/* the dog card on a phone: the picture, the name and the Trail button on one line, the upgrade under them on the right (the
   row ran past the card, and the Trail button was off the screen) */
.ranch-dog .rd-row { flex-wrap: wrap; row-gap: 6px; }
.ranch-dog .rd-mid { min-width: 104px; }
.ranch-dog .rd-wear { order: 2; }
.ranch-dog .rd-buy { order: 3; margin-left: auto; }

/* what the Trading Post opens from inside the Builder (checkout, a promo code, a bundle, the celebration) opens over the Post (14) and the card (15) */
body.building #checkout, body.building #promo, body.building #recover, body.building #bundleView, body.building #celebrate, body.building #share, body.building #rideFor { z-index: 16; }
/* a piece held in the tray, lifted and ready to drag */
.bd-tray .bd-piece.lift { transform: scale(1.06); box-shadow: 0 0 0 2px var(--gold), 0 6px 16px rgba(0, 0, 0, .45); }

/* Powell Play, the studio: a quiet mark at the foot of the home screen and the account tab, and the statement line under the Gold packs */
/* the studio mark on the home card is Powell Play's front door (powellplay-ui.md 1b, studio-mark.md 3): a tap opens the
   Powell Play sheet; a guest sees a lime "Sign in" under it, a connected player their avatar beside it */
.lk-studio { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 18px auto 4px; color: var(--ink-dim); font-size: 11.5px; text-decoration: none; opacity: .7; }
.lk-studio img { width: 120px; height: auto; display: block; }
.lk-studio:hover, .lk-studio:focus-visible { opacity: 1; }
/* the Powell Play Pass (server/pass.js): mint, so it never reads as Gold. The card leads the Trading Post */
.pass-mark { display: inline-block; vertical-align: middle; margin: 0 6px; padding: 1px 6px; border-radius: 999px; background: var(--mint); color: #062a20; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; line-height: 14px; }
.post-pass { margin: 4px 0 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(94, 241, 201, .35); background: linear-gradient(135deg, rgba(94, 241, 201, .12), rgba(94, 241, 201, .03)); text-align: left; }
.post-pass .pp-pass-k { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: var(--mint); display: flex; align-items: center; }
.post-pass .pp-pass-k .pass-mark { margin-left: 0; }
.post-pass .pp-pass-h { font-size: 16px; font-weight: 800; margin-top: 4px; color: var(--ink); text-wrap: balance; }
.post-pass .pp-pass-s { display: block; font-size: 12px; color: var(--ink-dim); margin-top: 3px; }
.post-pass .pp-pass-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 12px; font-size: 12.5px; color: var(--ink); }
.post-pass .pp-pass-list li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); margin-right: 7px; vertical-align: middle; }
.post-pass .pp-pass-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.post-pass .pp-pass-go { font: inherit; font-weight: 800; font-size: 13px; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--mint); color: #062a20; cursor: pointer; }
.post-pass .pp-pass-in { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; color: var(--mint); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.post-pass .pp-pass-go:focus-visible, .post-pass .pp-pass-in:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
#post.picking .post-pass { display: none; }
.lk-item .lk-pm { position: absolute; top: 5px; left: 5px; margin: 0; font-size: 8px; padding: 0 5px; line-height: 13px; opacity: .9; pointer-events: none; }
.lk-tag.pass { color: var(--mint); }
.sp-pass { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--mint); }
.lk-version { text-align: center; color: var(--ink-dim); font-size: 11px; opacity: .55; margin: 2px auto 0; font-variant-numeric: tabular-nums; }
.gw-packs .pk-note { margin: 8px 0 0; font-size: 11px; color: var(--ink-dim); text-align: center; letter-spacing: .2px; }

/* the owner's device only: a ranch hand on the board, its name in teal with a small H */
#leaderboard .name.hand { color: #5ef1c9; }
#leaderboard .hand-mk { display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px; background: rgba(94, 241, 201, .18); color: #5ef1c9; font-size: 9px; font-style: normal; font-weight: 800; line-height: 13px; vertical-align: 1px; }

/* under the live count, for an account that sees the ranch hands: real riders, hands, and the Office's padding */
.live-split { margin: -4px 0 8px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .3px; color: #5ef1c9; }
.live-split.hidden { display: none; }

/* Riding for: a full bar says CLAIM in words and glows (the bar alone was a sliver on a phone); it shows even where
   the narrowest phones hide the bar */
.wb-claim { display: none; flex: none; font-size: 11px; letter-spacing: 1.5px; font-weight: 900; color: #1a0b10; background: linear-gradient(90deg, #ffb300, #ffd23f); padding: 4px 9px; border-radius: 999px; animation: wbClaim 1.6s ease-in-out infinite; }
.wbar.ready .wb-claim { display: inline-block; margin-right: 6px; }
.wbar.ready .wb-track { display: none; }
@keyframes wbClaim { 0%, 100% { box-shadow: 0 0 6px rgba(255, 210, 63, .45); } 50% { box-shadow: 0 0 16px rgba(255, 210, 63, .9); } }
@media (prefers-reduced-motion: reduce) { .wb-claim { animation: none; } }
/* the Riding for sheet: the item, the bar, KEEP RIDING, another goal, and a quiet way to skip the wait */
#goalSheet { z-index: 13; }
.gs-card { text-align: center; }
.gs-stage { margin: 8px 0 12px; border-radius: 16px; overflow: hidden; background: #121b38; }
.gs-stage canvas { display: block; width: 100%; height: 150px; }
.gs-count { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; color: var(--ink-dim); }
.gs-count b { color: var(--silver); font-size: 22px; font-variant-numeric: tabular-nums; }
.gs-bar { height: 14px; margin: 8px 0 6px; }
.gs-sub { margin: 0 0 14px; font-size: 13px; color: var(--ink-dim); }
.gs-change { width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.gs-skip { display: block; margin: 12px auto 0; font-size: 12.5px; }
/* the picker: the three suggestions, then everything by kind, one tap each */
.rf-or { margin: 4px 0 6px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-dim); font-weight: 800; text-align: center; }
.rf-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); margin: 0 0 10px; }
.rf-tabs button { flex: 1; border: 0; background: transparent; color: var(--ink-dim); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 7px 4px; border-radius: 999px; cursor: pointer; }
.rf-tabs button[aria-selected="true"] { background: var(--gold); color: #1a0b10; }
.rf-tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.rf-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; margin-bottom: 10px; padding: 2px; }
.rf-mini { display: grid; gap: 3px; padding: 6px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: var(--ink); font: inherit; cursor: pointer; text-align: center; }
.rf-mini canvas { width: 100%; aspect-ratio: 3 / 2; border-radius: 8px; background: #121b38; }
.rf-mini b { font-size: 11.5px; line-height: 1.15; }
.rf-mini small { font-size: 10.5px; color: var(--ink-dim); }
.rf-mini:hover, .rf-mini:focus-visible { border-color: var(--gold); outline: none; }
.rf-mini.cur { border-color: var(--gold); background: rgba(255, 210, 63, .1); }
/* a goal claimed: the next three, right on the celebration */
.cb-next { margin: 4px 0 12px; }
.cb-next-k { font-size: 10.5px; letter-spacing: 2px; font-weight: 800; color: var(--ink-dim); margin-bottom: 6px; }
.cb-next-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* The CrazyGames build (scripts/build-crazygames.js marks <html class="portal">): their rules allow no outside sign-in,
   no outside payments and no links off their site, so the email account, the Gold packs, the corrals (playlasso.com
   links), sharing and the studio's support links stay out. Play with friends becomes a party arena with their Invite button */
html.portal [data-recover], html.portal [data-protect], html.portal [data-later], html.portal #homeIdent, html.portal #testerNudge,
html.portal #notifyOffer, html.portal .home-studio, html.portal .lk-studio, html.portal a[href="/support"], html.portal .gw-packs,
html.portal [data-share], html.portal #replayShare, html.portal #ranchShare, html.portal #wpShare, html.portal #cpShare,
html.portal #homeCorrals, html.portal #corralBtnCount, html.portal #cbPhone, html.portal #promoOpen, html.portal #restoreToggle,
html.portal .goal-offer { display: none !important; }
html.portal .cg-consent { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9999; max-width: calc(100% - 32px);
  display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(10, 15, 31, .94);
  color: #dfe6ff; font: 600 13px/1.35 Outfit, system-ui, sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
html.portal .cg-consent a { color: #ffd36b; }
html.portal .cg-consent button { flex: none; border: 0; border-radius: 8px; padding: 7px 12px; background: #ffd36b; color: #1a1408; font: 800 13px Outfit, system-ui, sans-serif; cursor: pointer; }

/* ?rec (client.js): recording a preview video, no pointer on screen */
html.rec, html.rec * { cursor: none !important; }
/* CrazyGames accounts (portal.js crazyAccount): a signed-in player's picture beside their name, and their name is
   theirs (no dice, no rename); a guest's quiet way to sign in, at the foot of the home card */
.cg-login { display: none; }
html.cg-guest .cg-login { display: inline; }
html.cg-user #nameDice, html.cg-user #wcDice, html.cg-user #lkRename, html.cg-user #nameHelp, html.cg-user #nameChips { display: none !important; }
html.cg-user #nameInput { cursor: default; }
.cg-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; align-self: center; margin: 0 4px 0 2px; border: 2px solid rgba(255, 210, 63, .55); background: #0a0f1f; }

/* a new rider's first three rides (client.js, body.newbie): the home card is PLAY and little else; the bell, the day's
   tiles and the account rows come with ride three */
body.newbie #wbHome, body.newbie #inboxOpen, body.newbie #modeSwitch, body.newbie #homeTiles, body.newbie .hm-acct, body.newbie #fbOpen, body.newbie #notifyOffer, body.newbie #testerNudge { display: none !important; }
/* the first ride's coach (client.js coach): one big friendly line under the clock */
.ride-coach { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: min(520px, 90vw); top: 118px; z-index: 6; padding: 10px 20px; border-radius: 999px; background: rgba(10, 15, 31, .82); border: 2px solid rgba(255, 210, 63, .7); color: #fff; font: 800 18px/1.25 var(--font, Outfit, system-ui, sans-serif); text-align: center; box-shadow: 0 8px 26px rgba(0, 0, 0, .4); animation: coachIn .35s ease-out; }
@keyframes coachIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .ride-coach { top: 108px; font-size: 15px; padding: 8px 14px; } }

/* the HUD's bare little words (under the clock, the rider count, the fence hint) were grey on navy; on the prairie's
   grass (Herd, public/arena.js) they could not be read. A dark pill behind them reads on any ground */
.round-label, .humans-pill, .fp-hint { background: rgba(10, 15, 31, .66); color: #e3e9ff; padding: 3px 10px; border-radius: 999px; }
.round-label:empty { display: none; }
.announce small { color: #eef2ff; text-shadow: 0 2px 10px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .9); }
/* on the simple home card only (body.newbie): the way back for a rider who has an account on another device */
#home .newbie-only { display: none; }
body.newbie #home .newbie-only { display: flex; }
/* the arena look button (client.js cycleLook): on top of the side stack, above the screen layout button; its little
   label says which look is on (A auto, PR prairie, N night, PL plain) */
.look-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: #ffd23f; }
.look-btn svg { width: 22px; height: 22px; }
.look-btn .lk-tag { position: absolute; right: 2px; bottom: 1px; font: 800 9px/1 var(--font, Outfit, system-ui, sans-serif); color: #fff; font-style: normal; text-shadow: 0 1px 2px #000; }
.look-btn:hover { border-color: rgba(255, 210, 63, .5); background: rgba(10, 15, 31, .85); }

/* ---------- quick settings (client.js quick): the side stack folded into one button ----------
   While riding, the side keeps two: the ranch and this. Its tray slides out to the left at the same height, glass, with
   sound, screen, look and battery; each says what is on. It shuts on its own (4 s), at a tap on the field, or here */
.quick-btn { position: fixed; right: 14px; z-index: 6; display: none; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; cursor: pointer;
  background: rgba(10, 15, 31, .6); border: 1px solid rgba(255, 255, 255, .1); color: #eef2ff; transition: background .15s, border-color .15s, transform .15s; }
.quick-btn svg { width: 22px; height: 22px; }
.quick-btn:hover { border-color: rgba(255, 210, 63, .5); background: rgba(10, 15, 31, .85); }
body.playing .quick-btn { display: grid; bottom: calc(14px + 140px + 8px + 44px); }
body.quick-open .quick-btn { color: #ffd23f; border-color: rgba(255, 210, 63, .6); background: rgba(10, 15, 31, .9); }
.quick-tray { position: fixed; right: 58px; z-index: 6; display: flex; flex-direction: row-reverse; gap: 4px; padding: 6px; border-radius: 14px;
  background: rgba(10, 15, 31, .78); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  bottom: calc(14px + 140px + 8px + 44px - 18px); opacity: 0; transform: translateX(12px) scale(.96); transform-origin: right center; pointer-events: none; transition: opacity .16s, transform .16s; visibility: hidden; }
body.playing.quick-open .quick-tray { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.qt-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; }
.qt-item small { display: grid; text-align: center; line-height: 1.15; font: 600 10px var(--font, Outfit, system-ui, sans-serif); color: rgba(226, 232, 255, .7); }
.qt-item small b { font-weight: 800; font-size: 10.5px; color: #eef2ff; }
.qt-item small span { color: #ffd23f; }
/* the four switches sit in the tray, not on the side: their old places on the stack are gone */
body.playing .quick-tray .mute-btn, body.playing .quick-tray .hud-btn, body.playing .quick-tray .look-btn, body.playing .quick-tray .cool-btn,
.quick-tray .mute-btn, .quick-tray .hud-btn, .quick-tray .look-btn, .quick-tray .cool-btn { position: relative; top: auto; right: auto; bottom: auto; left: auto; display: grid; place-items: center; width: 42px; height: 42px; margin: 0; }
@media (max-width: 720px) {
  body.playing .quick-btn { bottom: calc(14px + 90px + 8px + 44px); }
  .quick-tray { bottom: calc(14px + 90px + 8px + 44px - 18px); }
  .qt-item { width: 52px; }
}

/* Save your progress with Powell Play (public/powellplay.js): the round-end strip, the card, the account button */
.pp-strip { display: flex; align-items: center; gap: 12px; width: 100%; margin: 10px 0 12px; padding: 6px 10px; border-radius: 14px; border: 1px solid rgba(94, 241, 201, .35); background: rgba(94, 241, 201, .07); color: var(--ink); cursor: pointer; text-align: left; font: inherit; transition: background .15s; }
.pp-strip:hover { background: rgba(94, 241, 201, .14); }
.pp-strip img { height: 40px; width: 40px; object-fit: contain; flex: none; }
.pp-strip .pb-text { display: grid; gap: 1px; min-width: 0; }
.pp-strip b { font-size: 14px; } .pp-strip small { font-size: 12px; color: var(--ink-dim); line-height: 1.3; }
.podium-card .pp-strip { margin: 8px 0 0; padding: 4px 8px; } .podium-card .pp-strip img { height: 34px; width: 34px; }
#ppSave { z-index: 11; }   /* over the locker, where the account button opens it, like #recover */
body.building #ppSave { z-index: 16; }
.pp-card { text-align: center; }
.pp-card .pp-lockup { display: block; width: 170px; max-width: 60%; margin: 6px auto 12px; }
.pp-card .pp-signin { margin: 16px auto 0; }
.pp-bring { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; }
.pp-bring .link-btn { font-size: 12.5px; }
/* Powell Play ID, Standard 1.0 (powellplay-ui.md): the same in every Powell Play game, so its colours are its own */
:root { --pp-coal: #0B0B0B; --pp-card: #151515; --pp-line: rgba(246,243,235,0.09); --pp-bone: #F6F3EB; --pp-dim: #A9A59C; --pp-lime: #C7F000; --pp-danger: #FF6B7A; }
.pp-signin, .pp-set, .pp-sheet { font-family: 'Space Grotesk', Outfit, system-ui, sans-serif; }
/* the button: lime, the coal P at 16 from the left, the words centred in the rest; 52 tall, 240+ wide, radius 14 */
.pp-signin { position: relative; display: flex; align-items: center; height: 52px; min-width: 240px; width: 100%; max-width: 320px; padding: 0 16px 0 58px; border: 0; border-radius: 14px; background: var(--pp-lime); color: var(--pp-coal); font-size: 17px; font-weight: 700; cursor: pointer; transition: transform .12s, filter .12s; }
.pp-signin svg { position: absolute; left: 16px; top: 10px; height: 32px; width: auto; fill: var(--pp-coal); }
.pp-signin span { flex: 1; text-align: center; }
.pp-signin:active { transform: scale(.97); filter: brightness(1.08); }
.pp-signin:focus-visible { outline: 2px solid var(--pp-bone); outline-offset: 3px; }
.pp-signin:disabled { opacity: .6; cursor: default; }
.pp-signin.busy svg { visibility: hidden; }
.pp-signin.busy::before { content: ""; position: absolute; left: 22px; top: 16px; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(11,11,11,.25); border-top-color: var(--pp-coal); animation: pp-spin .8s linear infinite; }
@keyframes pp-spin { to { transform: rotate(360deg); } }
/* the avatar: a rounded square (22%), never a circle; the frame over it at 114%; the first letter while it loads */
.pp-av { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); }
.pp-av-in { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 22%; background: var(--pp-card); box-shadow: inset 0 0 0 1px var(--pp-line); color: var(--pp-dim); font: 700 calc(var(--s) * .42) 'Space Grotesk', Outfit, sans-serif; }
.pp-av-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 22%; object-fit: cover; }
.pp-av-frame { position: absolute; left: 50%; top: 50%; width: 114%; height: 114%; transform: translate(-50%, -50%); object-fit: contain; pointer-events: none; }
/* Settings: the POWELL PLAY ID card */
.pp-set { text-align: left; margin: 14px 0 6px; padding: 16px; border-radius: 20px; background: var(--pp-card); border: 1px solid var(--pp-line); color: var(--pp-bone); display: grid; gap: 12px; }
.pp-cap { font-size: 11px; letter-spacing: .2em; color: var(--pp-dim); text-transform: uppercase; }
.pp-dim { margin: 0; color: var(--pp-dim); font-size: 13px; line-height: 1.45; }
.pp-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pp-row b { display: block; font-size: 15px; font-weight: 700; color: var(--pp-bone); overflow-wrap: anywhere; }
.pp-row small { display: block; font-size: 13px; color: var(--pp-dim); }
.pp-rowlink { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 0 0; border: 0; border-top: 1px solid var(--pp-line); background: none; color: var(--pp-bone); font: 600 15px 'Space Grotesk', Outfit, sans-serif; text-decoration: none; cursor: pointer; text-align: left; }
.pp-rowlink.pp-red { color: var(--pp-danger); }
.pp-row-end { display: inline-flex; align-items: center; gap: 10px; }
.pp-row-end small { color: var(--pp-lime); font-weight: 600; font-size: 13px; }   /* the Friends row's "<n> online" */
.pt-ppname { color: var(--ink-dim); font-weight: 600; font-size: .85em; }
.pp-link { border: 0; background: none; padding: 0; color: var(--pp-bone); font: inherit; text-decoration: underline; cursor: pointer; }
.pp-restore { justify-self: start; font-size: 13px; color: var(--pp-dim); }
.pp-namerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--pp-line); min-width: 0; }
.pp-namerow > div { display: grid; gap: 3px; min-width: 0; }
.pp-namerow b { font-size: 15px; overflow-wrap: anywhere; }
.pp-namerow small { color: var(--pp-dim); font-size: 13px; }
.pp-others { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--pp-line); }
.pp-other { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.pp-mini { border: 1px solid var(--pp-line); background: transparent; color: var(--pp-bone); border-radius: 10px; padding: 5px 10px; font: 600 12.5px 'Space Grotesk', Outfit, sans-serif; cursor: pointer; }
/* the sheets: a bottom sheet with a handle */
.pp-sheet-wrap { z-index: 30; place-items: end center; padding: 0; background: rgba(0,0,0,.6); }
@media (min-width: 600px) { .pp-sheet-wrap { place-items: center; } .pp-sheet-wrap .pp-sheet { border-radius: 24px; max-width: 440px; } .pp-sheet-wrap .pp-sheet.pp-home-sheet .pp-handle { display: none; } }
/* the Powell Play sheet (powellplay-ui.md 1b) */
.pp-rows { display: grid; }
.pp-rows .pp-rowlink { min-height: 48px; padding: 0; font-family: Outfit, system-ui, sans-serif; }
.pp-sheet-foot { margin: 4px 0 0; text-align: center; color: var(--pp-dim); font-size: 12px; }
.pp-sheet { text-align: left; width: min(100%, 520px); max-height: calc(100% - 24px); overflow-y: auto; padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; background: var(--pp-card); color: var(--pp-bone); display: grid; gap: 12px; animation: pp-up .22s ease-out both; }
@keyframes pp-up { from { transform: translateY(24px); opacity: 0; } }
.pp-handle { justify-self: center; width: 40px; height: 4px; border-radius: 4px; background: rgba(246,243,235,.22); }
.pp-title { margin: 4px 0 2px; font-size: 20px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.pp-opt { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--pp-line); background: transparent; color: var(--pp-bone); cursor: pointer; font-family: inherit; }
.pp-opt b { font-size: 16px; overflow-wrap: anywhere; } .pp-opt small { color: var(--pp-dim); font-size: 13px; }
.pp-opt.on { border: 2px solid var(--pp-lime); box-shadow: 0 0 18px rgba(199,240,0,.22); padding: 13px 15px; }
.pp-lime, .pp-outline, .pp-danger { height: 50px; border-radius: 14px; font: 700 16px 'Space Grotesk', Outfit, sans-serif; cursor: pointer; }
.pp-lime { border: 0; background: var(--pp-lime); color: var(--pp-coal); }
.pp-outline { border: 1px solid rgba(246,243,235,.35); background: transparent; color: var(--pp-bone); }
.pp-danger { border: 0; background: var(--pp-danger); color: var(--pp-coal); }
.pp-text { border: 0; background: none; color: var(--pp-dim); font: 600 15px 'Space Grotesk', Outfit, sans-serif; padding: 6px; cursor: pointer; }
.pp-lime:disabled, .pp-outline:disabled, .pp-danger:disabled, .pp-text:disabled { opacity: .6; cursor: default; }
.pp-note { margin: 0; font-size: 13px; color: var(--pp-dim); line-height: 1.45; }
/* the choice screen: two cards side by side, stacked under 360 wide */
.pp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 360px) { .pp-cards { grid-template-columns: minmax(0, 1fr); } }
.pp-cards.one { grid-template-columns: minmax(0, 1fr); }
.pp-sheet .pp-lead { margin: 0; font-size: 15px; line-height: 1.45; }
.pp-pcard { padding: 12px; border-radius: 16px; border: 1px solid var(--pp-line); display: grid; gap: 10px; min-width: 0; }
.pp-pcard-top { display: flex; gap: 10px; align-items: center; min-width: 0; }
.pp-pcard-top b { display: block; font-size: 15px; overflow-wrap: anywhere; } .pp-pcard-top small { color: var(--pp-dim); font-size: 12px; }
.pp-pcard dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; font-size: 12.5px; }
.pp-pcard dt { color: var(--pp-dim); } .pp-pcard dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* the disconnect sheet */
.pp-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 15px; line-height: 1.4; }
.pp-lines li { display: flex; gap: 10px; align-items: flex-start; }
.pp-ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--pp-lime); }
.pp-ic svg { width: 16px; height: 16px; }
.pp-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.pp-code code { font: 600 14px ui-monospace, SFMono-Regular, Consolas, monospace; padding: 6px 10px; border-radius: 10px; background: var(--pp-coal); border: 1px solid var(--pp-line); letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .pp-sheet { animation: none; } .pp-signin.busy::before { animation-duration: 2.4s; } }
html.pp-off .pp-set, html.pp-off [data-pp-save], html.pp-off #ppRound, html.pp-off #ppSave { display: none !important; }
/* the board and the ranch card: the Powell Play avatar beside a connected rider's name */
.board-row .who .pp-av { margin-right: 10px; }
.rp-pp { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 4px 0 0; color: var(--ink-dim); font-size: 13px; }
/* Play Together (public/together.js, powellplay-ui.md 8) */
.pt-friend { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(199,240,0,.45); background: rgba(199,240,0,.07); color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.pt-friend:hover, .pt-friend:focus-visible { background: rgba(199,240,0,.13); }
.pt-friend:disabled { opacity: .6; }
.pt-friend-t { display: grid; gap: 2px; min-width: 0; }
.pt-friend b { font-size: 15px; } .pt-friend small { font-size: 12.5px; color: var(--ink-dim); line-height: 1.35; }
.pt-card { text-align: center; display: grid; gap: 12px; justify-items: center; }
.pt-body { display: grid; gap: 12px; justify-items: center; width: 100%; }
.pt-qr { padding: 12px; border-radius: 22px; background: var(--pp-bone); box-shadow: 0 0 0 4px var(--pp-lime), 0 0 28px rgba(199,240,0,.35); line-height: 0; }
.pt-qr-img { display: block; width: 200px; height: 200px; max-width: 60vw; max-height: 60vw; image-rendering: pixelated; }
.pt-locked { width: 200px; max-width: 60vw; padding: 70px 10px; line-height: 1.4; color: var(--pp-coal); font: 700 15px 'Space Grotesk', Outfit, sans-serif; }
.pt-code { color: var(--pp-lime); font: 800 40px 'Space Grotesk', Outfit, sans-serif; letter-spacing: .22em; margin-right: -.22em; font-variant-numeric: tabular-nums; }
.pt-dim { margin: 0; color: var(--pp-dim); font-size: 13px; }
.pt-who { display: grid; gap: 8px; width: 100%; max-width: 320px; }
.pt-rider { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--pp-line); }
.pt-who-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pt-name { font-weight: 700; overflow-wrap: anywhere; text-align: left; }
.pt-wait { margin: 0; color: var(--pp-bone); font-size: 15px; animation: pt-pulse 1.6s ease-in-out infinite; }
@keyframes pt-pulse { 50% { opacity: .45; } }
.pt-acts { display: grid; gap: 10px; width: 100%; max-width: 320px; }
.pt-acts .pp-outline { width: 100%; }
.pt-start { width: 100%; }
.pt-lock { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .pt-wait { animation: none; } }
/* a link straight into a friend's room: no home card, just "Joining LASSO…" */
html.pp-joining #home { visibility: hidden; }
html.pp-joining body::after { content: "Joining LASSO\2026"; position: fixed; inset: 0; display: grid; place-items: center; color: var(--ink); font: 800 22px Outfit, system-ui, sans-serif; letter-spacing: .04em; pointer-events: none; z-index: 40; }
/* portals have their own invites (portal.js) */
html.portal:not(.pp-host) #ppTogetherBtn, html.portal:not(.pp-host) #ppTogetherChip { display: none !important; }
html.pp-user #signBackIn { display: none !important; }   /* signed in: the Powell Play ID is how this rider comes back */
html.portal [data-pp-save], html.portal #ppRound, html.portal #ppSave, html.portal #lockerMode { display: none !important; }
/* inside the Powell Play app the game shows no Powell Play mark at all (powellplay-ui.md 1b, channels H6): the app is
   Powell Play. The Settings credit goes (the home card has no studio mark anywhere since kit 2.16.0: the Powell Play
   button is the one place on the web) */
html.pp-host #ppSheet a[href="/support"] { display: flex !important; }   /* the sheet's Support row stays in the app (a same-origin page); portals hide it */   /* inside the Powell Play app the mark opens the sheet too (no outside links in it) */
html.pp-host .lk-studio { display: none !important; }
html.pp-host .lk-studio u { display: none; }   /* no sign-in of our own on a portal or inside the Powell Play app */

/* The Powell Play button (powellplay-bar.md W1): Powell Play's own script draws it in the top left corner of the web
   build; that corner's 56 px stay clear of LASSO's own controls. In an arena the score card steps down under it */
html.pp-bar #hud .stat-panel { margin-top: 48px; }
html.pp-bar.pp-bar-play #hud .stat-panel { margin-top: 0; }   /* the button is away during a round (W3): the corner is the card's again */
html.pp-bar #hud .stat-panel { transition: margin-top .25s ease; }