:root {
  --bg: #07071a;
  --bg2: #0e0b26;
  --panel: rgba(255, 255, 255, 0.045);
  --line: rgba(160, 140, 255, 0.22);
  --text: #f4f2ff;
  --muted: rgba(230, 225, 255, 0.55);
  --gold: #ffc83d;
  --gold2: #ffb000;
  --purple: #8b5cf6;
  --neon: #b44cff;
  --violet: #6d28d9;
  --green: #34e58c;
  --red: #ff4d6d;
  --brush: "Permanent Marker", "Sora", cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body, #root { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: "Sora", system-ui, sans-serif; }
body { overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.35; }
b { font-weight: 800; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.tiny { font-size: 10px; letter-spacing: 0.08em; font-weight: 700; }
.gold { color: var(--gold); }
.grow { flex: 1; min-width: 0; }
.left { text-align: left; }
.center { text-align: center; }
.brush { font-family: var(--brush); font-weight: 400; letter-spacing: 0.01em; }

/* ---------- stage + device frame ---------- */
.stage {
  height: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  background:
    radial-gradient(60% 50% at 15% 20%, rgba(139, 92, 246, 0.22), transparent 70%),
    radial-gradient(50% 40% at 85% 80%, rgba(180, 76, 255, 0.18), transparent 70%),
    var(--bg);
}
.bg-fx .streak {
  position: absolute; width: 140%; height: 3px; left: -20%;
  background: linear-gradient(90deg, transparent, rgba(180, 76, 255, 0.55), transparent);
  filter: blur(1px); transform: rotate(-24deg); animation: streak 7s linear infinite;
}
.bg-fx .s1 { top: 18%; }
.bg-fx .s2 { top: 55%; animation-delay: 2.4s; }
.bg-fx .s3 { top: 82%; animation-delay: 4.6s; }
@keyframes streak { 0% { opacity: 0; transform: translateX(-30%) rotate(-24deg); } 20% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; transform: translateX(30%) rotate(-24deg); } }

.device {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(109, 40, 217, 0.28), transparent 60%),
    radial-gradient(100% 40% at 50% 100%, rgba(255, 200, 61, 0.06), transparent 70%),
    linear-gradient(180deg, #0c0a24, #07071a 60%);
}
@media (min-width: 520px) {
  .device {
    width: 400px; height: min(860px, calc(100vh - 40px)); border-radius: 40px;
    border: 1.5px solid rgba(180, 140, 255, 0.45);
    box-shadow: 0 0 0 6px rgba(20, 14, 50, 0.9), 0 0 50px rgba(139, 92, 246, 0.45), 0 30px 80px rgba(0, 0, 0, 0.6);
  }
}
.viewport { flex: 1; position: relative; min-height: 0; display: flex; flex-direction: column; animation: screenIn 0.35s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.screen { flex: 1; display: flex; flex-direction: column; padding: 8px 18px 20px; min-height: 0; position: relative; }
.scroll { overflow-y: auto; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }

/* ---------- header ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 8px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.pill { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; }
.crowns { background: rgba(255, 200, 61, 0.1); border: 1px solid rgba(255, 200, 61, 0.45); color: var(--gold); }
.icon-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); font-size: 14px; }
.logo.glow { filter: drop-shadow(0 0 6px rgba(180, 76, 255, 0.9)) drop-shadow(0 0 18px rgba(139, 92, 246, 0.6)); }

/* ---------- building blocks ---------- */
.card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line); border-radius: 20px; }
.glow-border { border-color: rgba(255, 200, 61, 0.6); box-shadow: 0 0 22px rgba(255, 200, 61, 0.18), inset 0 0 20px rgba(255, 200, 61, 0.05); }

.avatar { display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #1a1440), #120e2e 75%); }
.avatar.ring { box-shadow: 0 0 0 2px var(--c), 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }
.avatar.gold-ring { box-shadow: 0 0 0 3px var(--gold), 0 0 24px rgba(255, 200, 61, 0.6); }
.avatar.purple-ring { box-shadow: 0 0 0 3px var(--neon), 0 0 24px rgba(180, 76, 255, 0.7); }

.item-img { position: relative; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1.5px rgba(255, 200, 61, 0.7), 0 6px 18px rgba(0, 0, 0, 0.45); background: #13163a; }
.item-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); display: block; user-select: none; }
.flyer { position: fixed; z-index: 100; pointer-events: none; }

.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 20px; border-radius: 18px; font-weight: 800; font-size: 17px; transition: transform 0.08s, filter 0.2s; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn-gold { color: #1a1206; background: linear-gradient(180deg, #ffe07a, var(--gold) 45%, var(--gold2)); box-shadow: 0 0 0 1px rgba(255, 230, 150, 0.6) inset, 0 6px 0 #b07800, 0 10px 30px rgba(255, 190, 40, 0.35); }
.btn-gold:hover:not(:disabled) { filter: brightness(1.06); }
.btn-gold .arrow { font-size: 20px; }
.btn-ghost { background: var(--panel); border: 1px solid var(--line); color: var(--text); }
.bottom-cta { margin-top: auto; padding-top: 14px; }

/* decorative */
.bolt { position: absolute; width: 34px; fill: #c084fc; filter: drop-shadow(0 0 6px #b44cff) drop-shadow(0 0 16px #8b5cf6); opacity: 0.9; animation: flicker 3.2s infinite; }
@keyframes flicker { 0%, 100% { opacity: 0.9; } 46% { opacity: 0.9; } 48% { opacity: 0.25; } 50% { opacity: 1; } 52% { opacity: 0.4; } 54% { opacity: 0.95; } }
.crown-doodle { position: absolute; width: 60px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; filter: drop-shadow(0 0 6px rgba(255, 200, 61, 0.6)); }

/* ---------- welcome ---------- */
.welcome { align-items: center; justify-content: center; text-align: center; padding-top: 40px; overflow: hidden; }
.welcome .b1 { top: 9%; left: 8%; transform: rotate(-15deg); width: 40px; }
.welcome .b2 { top: 44%; right: 6%; transform: rotate(20deg); width: 30px; animation-delay: 1.1s; }
.welcome .b3 { bottom: 24%; left: 10%; transform: rotate(10deg); width: 24px; animation-delay: 2s; }
.welcome .cd1 { top: 7%; right: 12%; transform: rotate(14deg); }
.welcome-logo { margin-top: 30px; }
.tagline { font-size: 46px; line-height: 1.05; margin: 22px 0 0; transform: rotate(-6deg); text-shadow: 0 0 18px rgba(180, 76, 255, 0.6); }
.tagline span { display: inline-block; margin: 0 6px; opacity: 0; animation: stampIn 0.45s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.tagline .gold { text-shadow: 0 0 18px rgba(255, 200, 61, 0.7); }
.swoosh { width: 190px; height: 8px; margin: 6px auto 0; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--gold)); transform: rotate(-6deg) translateX(40px); opacity: 0; animation: fadeIn 0.4s 1.5s forwards; }
.welcome-sub { color: var(--muted); font-size: 14px; max-width: 270px; margin: 28px auto 0; opacity: 0; animation: fadeIn 0.5s 1.7s forwards; }
.welcome .bottom-cta { width: 100%; opacity: 0; animation: riseIn 0.5s 1.9s forwards; }
@keyframes stampIn { 0% { opacity: 0; transform: scale(2.2) rotate(-8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pop-in { animation: popIn 0.6s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
.rise { opacity: 0; animation: riseIn 0.45s ease-out forwards; }

/* ---------- home ---------- */
.home { gap: 14px; }
.player-card { display: flex; align-items: center; gap: 14px; padding: 14px; }
.player-name { font-weight: 800; font-size: 17px; }
.xp { height: 6px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); margin-top: 8px; overflow: hidden; }
.xp div { height: 100%; background: linear-gradient(90deg, var(--gold), #ffe07a); border-radius: 9px; transition: width 0.6s; }
.how { display: flex; padding: 12px 10px; gap: 6px; }
.how-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 11px; color: var(--muted); }
.how-step b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(139, 92, 246, 0.25); border: 1px solid var(--neon); color: #fff; font-size: 12px; }
.section-title { font-size: 19px; margin: 6px 0 0; }
.section-title .arrow { color: var(--gold); }
.topic-hero { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; text-align: left; transition: transform 0.15s; }
.topic-hero:hover { transform: translateY(-2px); }
.topic-hero:active { transform: scale(0.98); }
.topic-name { font-weight: 800; font-size: 18px; }
.play-pill { padding: 8px 14px; border-radius: 99px; font-weight: 800; font-size: 13px; color: #1a1206; background: linear-gradient(180deg, #ffe07a, var(--gold2)); box-shadow: 0 3px 0 #b07800; }
.soon-label { margin-top: 6px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 10px; font-weight: 700; }
.hot-tag { position: absolute; top: -10px; right: 14px; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: var(--red); box-shadow: 0 0 12px rgba(255, 77, 109, 0.7); letter-spacing: 0.06em; }
.live-dot { display: flex; align-items: center; gap: 6px; color: var(--green); margin-top: 4px; }
.live-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.soon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.soon { padding: 14px 12px; opacity: 0.55; }
.soon-emoji { font-size: 26px; }
.soon-name { font-weight: 700; font-size: 13px; margin-top: 6px; }
.soon-tag { font-size: 10px; color: var(--muted); margin-top: 4px; }

/* ---------- match ---------- */
.match { align-items: center; text-align: center; }
.back { align-self: flex-start; color: var(--muted); font-size: 13px; padding: 4px 0; }
.searching { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.radar { position: relative; padding: 30px; border-radius: 50%; }
.radar::before, .radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--neon); animation: ping 1.4s ease-out infinite; }
.radar::after { animation-delay: 0.7s; }
@keyframes ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.roll-name { font-weight: 800; font-size: 18px; }
.found { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; }
.found .cd2 { top: 0; right: 14px; transform: rotate(14deg); }
.slam { font-size: 54px; line-height: 0.95; margin: 18px 0 18px; transform: rotate(-5deg); text-shadow: 0 0 22px rgba(180, 76, 255, 0.7); animation: slam 0.5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes slam { 0% { opacity: 0; transform: scale(2.6) rotate(-5deg); } 100% { opacity: 1; transform: scale(1) rotate(-5deg); } }
.versus { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; margin-bottom: 22px; }
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 120px; font-size: 14px; }
.vs-side b { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs { font-size: 34px; color: var(--gold); text-shadow: 0 0 16px rgba(255, 200, 61, 0.8); animation: popIn 0.5s 0.45s both; }
.slide-l { animation: slideL 0.5s 0.15s cubic-bezier(.2, 1.2, .4, 1) both; }
.slide-r { animation: slideR 0.5s 0.15s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes slideL { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: none; } }
@keyframes slideR { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
.match-topic { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; }
.rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.rules span { font-size: 11px; padding: 6px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); }
.found .bottom-cta { width: 100%; }

/* ---------- auction ---------- */
.auction { gap: 9px; padding-top: 4px; overflow-y: auto; scrollbar-width: none; }
.auction::-webkit-scrollbar { display: none; }
.auction > * { flex-shrink: 0; }
.round-bar { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.segments { flex: 1; display: flex; gap: 4px; }
.segments i { flex: 1; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.1); }
.segments i.done { background: var(--neon); box-shadow: 0 0 6px var(--neon); }
.segments i.now { background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: pulse 1.2s infinite; }

.auction-item { position: relative; padding: 14px 12px 12px; text-align: center; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auction > .auction-item { flex: 1 0 auto; }
.item-stage { position: relative; display: flex; justify-content: center; }
.item-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 61, 0.35), rgba(180, 76, 255, 0.15) 50%, transparent 70%); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.7; } }
.auction-item.intro .item-img { animation: dealIn 0.7s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes dealIn { 0% { opacity: 0; transform: translateY(-40px) scale(0.3) rotate(-180deg); } 100% { opacity: 1; transform: none; } }
.auction-item.intro .item-name { animation: riseIn 0.4s 0.3s both; }
.item-name { font-weight: 800; font-size: 26px; margin-top: 12px; }
.auction-item.sold .item-img { filter: brightness(0.75) saturate(0.8); }
.sold-stamp { position: absolute; top: 34%; left: 50%; font-size: 52px; padding: 0 14px; color: var(--gold); text-shadow: 0 0 18px rgba(255, 200, 61, 0.8), 0 3px 0 #000; border: 4px solid var(--gold); border-radius: 12px; background: rgba(10, 6, 30, 0.6); transform: translate(-50%, -50%) rotate(-12deg); animation: stamp 0.35s cubic-bezier(.3, 1.8, .5, 1) both; }
.sold-stamp.opp { color: #e9d5ff; border-color: var(--neon); text-shadow: 0 0 18px rgba(180, 76, 255, 0.9), 0 3px 0 #000; }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(3); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } }
.gavel { position: absolute; top: -6px; right: 22%; font-size: 44px; transform-origin: 80% 80%; animation: gavel 0.4s ease-in both; }
@keyframes gavel { 0% { transform: rotate(50deg) translateY(-20px); opacity: 0; } 70% { transform: rotate(-20deg); opacity: 1; } 100% { transform: rotate(-10deg); opacity: 1; } }
.auction-item.sold { animation: shake 0.35s 0.12s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.sold-line { margin-top: 10px; font-size: 15px; animation: riseIn 0.4s 0.3s both; }

.bid-line { margin-top: 6px; min-height: 34px; display: flex; align-items: baseline; justify-content: center; gap: 2px; font-size: 15px; animation: riseIn 0.3s both; }
.cur-amount { font-size: 28px; font-weight: 800; color: var(--gold); display: inline-block; animation: bump 0.35s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes bump { 0% { transform: scale(1.6); color: #fff; } 100% { transform: scale(1); } }
.dots i { font-style: normal; animation: pulse 1s infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
.chat-bubble { position: absolute; right: 12px; top: 12px; max-width: 60%; padding: 6px 12px; border-radius: 14px 14px 4px 14px; background: #fff; color: #1a1240; font-size: 12px; font-weight: 700; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); animation: popIn 0.3s cubic-bezier(.2, 1.6, .4, 1) both; z-index: 5; }

.timebar { position: relative; height: 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); overflow: hidden; }
.timebar-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold2), #ffe07a); box-shadow: 0 0 12px rgba(255, 200, 61, 0.7); transition: width 0.1s linear; }
.timebar.urgent .timebar-fill { background: linear-gradient(90deg, #ff2d55, var(--red)); box-shadow: 0 0 14px rgba(255, 77, 109, 0.9); animation: pulse 0.5s infinite; }
.timebar-label { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; }

.controls { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 20px; min-height: 150px; border: 1px solid var(--line); background: var(--panel); transition: border-color 0.25s, box-shadow 0.25s; }
.controls.live { border-color: rgba(255, 200, 61, 0.55); box-shadow: 0 0 20px rgba(255, 200, 61, 0.14); }
.controls.idle { justify-content: center; }
.zone-note { text-align: center; color: var(--muted); font-size: 14px; font-weight: 600; }
.bid-main { display: flex; align-items: center; gap: 10px; }
.bid-main .raise { flex: 1; padding: 15px 10px; font-size: 19px; }
.step { width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.3); font-size: 24px; font-weight: 700; background: rgba(0, 0, 0, 0.2); }
.step:active:not(:disabled) { transform: scale(0.9); }
.bid-sub { display: flex; align-items: center; gap: 8px; }
.quick { padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; border: 1px solid rgba(255, 200, 61, 0.5); color: var(--gold); background: rgba(255, 200, 61, 0.06); }
.quick:active { transform: scale(0.94); }
.pass { margin-left: auto; padding: 8px 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pass:hover { color: var(--text); }
.bid-sub .muted { margin-left: auto; }

.drafts { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 8px 10px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.draft { display: flex; align-items: center; gap: 10px; }
.draft + .draft { padding-top: 6px; border-top: 1px solid rgba(160, 140, 255, 0.12); }
.draft-head { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 700; }
.draft-budget { font-size: 11px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.draft-budget.you { color: var(--gold); }
.draft-head span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-slots { display: flex; gap: 6px; }
.slot { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed rgba(180, 160, 255, 0.35); }
.slot.filled { border: 0; }
.draft.compact .slot { width: 40px; height: 40px; }
.slot-q { color: rgba(200, 190, 255, 0.4); font-weight: 700; }
.landing { opacity: 0; animation: land 0.45s 0.95s cubic-bezier(.2, 1.8, .4, 1) forwards; }
@keyframes land { 0% { opacity: 0; transform: scale(0.4); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255, 200, 61, 0.8); } }

/* ---------- judge ---------- */
.judge { align-items: center; justify-content: center; text-align: center; gap: 18px; }
.judge .cd3 { top: 12%; left: 50%; transform: translateX(-50%); }
.judge-bot { position: relative; }
.bot-face { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; font-size: 74px; background: radial-gradient(circle at 40% 35%, #3b2a7a, #120e2e 70%); box-shadow: 0 0 0 2px var(--neon), 0 0 40px rgba(180, 76, 255, 0.6); animation: float 2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(3deg); } }
.judge-label { position: absolute; right: -70px; top: 4px; color: var(--gold); font-size: 18px; transform: rotate(10deg); }
.judge h1 { font-size: 30px; line-height: 1.15; margin: 10px 0 0; transform: rotate(-3deg); }
.progress { width: 80%; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.progress div { height: 100%; background: linear-gradient(90deg, var(--gold), #ffe07a); animation: fill 3.1s ease-in-out forwards; border-radius: 99px; }
@keyframes fill { from { width: 4%; } to { width: 100%; } }
.judge-line { animation: riseIn 0.3s both; font-size: 14px; }

/* ---------- results ---------- */
.results { gap: 12px; }
.race { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-top: 10px; }
.race-vs { padding-top: 110px; font-size: 12px; }
.race-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: opacity 0.4s, filter 0.4s, transform 0.4s; }
.race-avatar { position: relative; }
.race-name { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-score { font-size: 54px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.race-bar { width: 100%; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.race-bar div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--violet), var(--neon)); }
.race-side.loser { opacity: 0.45; filter: grayscale(0.7); transform: scale(0.94); }
.race-side.winner { transform: scale(1.06); }
.race-side.winner .race-score { color: var(--gold); text-shadow: 0 0 22px rgba(255, 200, 61, 0.8); animation: bump 0.4s cubic-bezier(.2, 1.8, .4, 1); }
.race-side.winner .race-bar div { background: linear-gradient(90deg, var(--gold2), #ffe07a); box-shadow: 0 0 10px rgba(255, 200, 61, 0.8); }
.crown-drop { position: absolute; top: -30px; left: 50%; font-size: 30px; transform: translateX(-50%); animation: crownDrop 0.55s cubic-bezier(.3, 1.6, .5, 1) both; z-index: 2; filter: drop-shadow(0 0 8px rgba(255, 200, 61, 0.9)); }
@keyframes crownDrop { 0% { opacity: 0; transform: translate(-50%, -60px) rotate(-30deg); } 100% { opacity: 1; transform: translate(-50%, 0) rotate(-8deg); } }
.verdict-slot { min-height: 74px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.counting { animation: pulse 1.2s infinite; }
.reveal { display: flex; flex-direction: column; gap: 10px; animation: fadeUp 0.6s ease-out both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.res-item.top { border-color: var(--gold); box-shadow: 0 0 12px rgba(255, 200, 61, 0.35); }
.res-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.res-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.res-item { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.res-name { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-sub { font-size: 9px; color: var(--muted); }
.res-pts { font-size: 13px; color: var(--gold); }
.verdict-title { font-size: 40px; text-align: center; margin: 6px 0 0; transform: rotate(-4deg); animation: slam 0.5s cubic-bezier(.2, 1.6, .4, 1) both; }
.verdict-title.you { color: var(--gold); text-shadow: 0 0 22px rgba(255, 200, 61, 0.8); }
.verdict-title.opp { color: #e9d5ff; text-shadow: 0 0 22px rgba(180, 76, 255, 0.8); }
.reward { align-self: center; padding: 6px 16px; border-radius: 99px; background: rgba(255, 200, 61, 0.12); border: 1px solid var(--gold); color: var(--gold); font-weight: 800; font-size: 14px; }
.crowd-pick { font-size: 12px; padding: 10px 12px; border-radius: 14px; }
.crowd-pick.good { background: rgba(52, 229, 140, 0.1); border: 1px solid rgba(52, 229, 140, 0.4); }
.crowd-pick.bad { background: rgba(255, 77, 109, 0.1); border: 1px solid rgba(255, 77, 109, 0.4); }
.judge-quote { display: flex; gap: 10px; padding: 12px; align-items: flex-start; }
.judge-quote p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; }
.bot-mini { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; background: #1d1550; box-shadow: 0 0 0 1.5px var(--neon); }
.cta-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin-top: 4px; }

.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.confetti i { position: absolute; top: -10px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(900px) rotate(720deg); opacity: 0.2; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; }
}

/* Item art scales with screen height so the card fills the space without leaving it empty. */
.auction-item .item-stage .item-img { width: clamp(110px, 25cqh, 230px) !important; height: clamp(110px, 25cqh, 230px) !important; }
.auction-item .item-glow { width: clamp(180px, 38cqh, 310px); height: clamp(180px, 38cqh, 310px); }
@container (max-height: 700px) {
  .auction { gap: 7px; }
  .auction-item { padding: 10px; }
  .item-name { font-size: 22px; margin-top: 8px; }
  .controls { min-height: 0; padding: 10px; gap: 8px; }
  .bid-main .raise { padding: 12px 10px; }
  .step { width: 44px; height: 44px; }
  .topbar { padding-top: 10px; padding-bottom: 4px; }
}

/* Welcome: logo, tagline, text and button sit as one group centered top-to-bottom. */
.welcome { justify-content: center; padding-top: 20px; padding-bottom: 20px; }
.welcome-logo { margin-top: 0; }
.welcome .bottom-cta { margin-top: 32px; padding-top: 0; }

/* Welcome: text group stays centered; a smaller button sits low, in thumb reach. */
.welcome { padding-bottom: 36px; }
.welcome-logo { margin-top: auto; }
.welcome .bottom-cta { margin-top: auto; padding-top: 24px; width: auto; display: flex; justify-content: center; }
.welcome .bottom-cta .btn { width: 220px; padding: 13px 20px; font-size: 16px; }
.welcome { padding-bottom: 88px; }

/* ---------- results v3: fits one phone screen ---------- */
.results { gap: 10px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.race { gap: 14px; padding-top: 6px; }
.race-side { gap: 4px; align-items: stretch; }
.race-side:last-child { align-items: stretch; text-align: right; }
.race-who { display: flex; align-items: center; gap: 8px; }
.race-side:last-child .race-who { flex-direction: row-reverse; }
.race-name { font-size: 13px; }
.race-score { font-size: 44px; }
.race-side.winner { transform: none; }
.race-side.loser { transform: none; }
.race-side:last-child .race-bar div { margin-left: auto; }
.crown-drop { top: -20px; font-size: 22px; }
.verdict-slot { min-height: 52px; gap: 4px; }
.verdict-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.verdict-title { font-size: 32px; margin: 0; }
.reward { padding: 4px 10px; font-size: 13px; }
.reveal { gap: 8px; }
.res-legend { font-size: 10px; text-align: center; letter-spacing: 0.02em; }
.res-col { gap: 5px; }
.res-item { gap: 8px; padding: 5px 8px 5px 5px; }
.res-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-pts { font-size: 13px; color: var(--gold); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.judge-line-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.judge-line-card p { margin: 0; font-size: 12px; line-height: 1.35; font-style: italic; }
.judge-line-card .bot-mini { width: 30px; height: 30px; font-size: 16px; }
.results .cta-row { margin-top: auto; }
.results .cta-row .btn { padding: 14px 16px; font-size: 16px; }
.res-img { position: relative; flex-shrink: 0; display: flex; }
.res-crown { position: absolute; top: -9px; left: -5px; font-size: 13px; font-style: normal; transform: rotate(-15deg); filter: drop-shadow(0 0 4px rgba(255, 200, 61, 0.9)); }

/* Battle Found: auto-start countdown */
.countdown { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 12px; }
.count-num { font-size: 64px; line-height: 1; color: var(--gold); text-shadow: 0 0 22px rgba(255, 200, 61, 0.8); animation: countPop 0.9s ease-out both; }
@keyframes countPop { 0% { opacity: 0; transform: scale(2); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0.3; transform: scale(0.9); } }
.start-now { margin-top: 6px; padding: 8px 18px; border-radius: 99px; font-size: 13px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); background: var(--panel); }
.start-now:hover { color: var(--text); }

/* results v4: points instead of %, column totals */
.race-score small { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.res-crown { top: auto; left: auto; right: -5px; bottom: -5px; font-size: 15px; transform: rotate(-12deg); }
.res-total { text-align: right; padding: 2px 8px 0; font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.res-legend { text-wrap: balance; }

/* results v5: name + crowd % on two lines */
.res-item { padding: 6px 8px 6px 6px; }
.res-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.res-crowd { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-name { font-size: 12px; }
.res-pts { font-size: 14px; }
/* auto-assigned round note */
.auto-note { font-size: 13px; font-weight: 700; color: var(--gold); max-width: 280px; line-height: 1.3; text-wrap: balance; }
.res-item { gap: 6px; padding: 6px 7px 6px 5px; }
.res-cols { gap: 6px; }
/* results: content sits a bit lower; buttons lifted a bit off the bottom */
.results .race { padding-top: 28px; }
.results { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

/* Round intro spotlight: item centre stage, then it flies into the card */
.spotlight { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(circle at 50% 45%, rgba(48, 18, 110, 0.97), rgba(7, 7, 26, 0.97) 65%); animation: fadeIn 0.25s ease-out both; text-align: center; padding: 0 24px; }
.spotlight .item-img { animation: dealIn 0.6s cubic-bezier(.2, 1.4, .4, 1) both; box-shadow: 0 0 0 2px var(--gold), 0 0 50px rgba(255, 200, 61, 0.45); }
.spot-label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); animation: riseIn 0.4s both; }
.spot-name { font-size: 30px; font-weight: 800; animation: riseIn 0.4s 0.25s both; }
.spot-sub { color: var(--muted); font-size: 13px; animation: riseIn 0.4s 0.4s both; }
.spotlight.leaving { background: transparent; transition: background 0.4s; }
.spotlight.leaving .spot-label, .spotlight.leaving .spot-name, .spotlight.leaving .spot-sub, .spotlight.leaving .auto-note { opacity: 0; transition: opacity 0.2s; }
.auction-item.intro .item-stage .item-img { visibility: hidden; }

/* Small win: sparkle burst + "It's yours!" */
.mine-burst { position: absolute; top: 50%; left: 50%; width: 0; height: 0; pointer-events: none; }
.mine-burst i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); transform: rotate(var(--a)) translateY(0); animation: burst 0.8s 0.15s ease-out both; }
.mine-burst i:nth-child(even) { background: #fff; width: 6px; height: 6px; }
@keyframes burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-120px) scale(0.3); } }
.mine-text { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(-6deg); font-size: 26px; color: var(--green); text-shadow: 0 0 14px rgba(52, 229, 140, 0.8), 0 2px 0 #000; white-space: nowrap; animation: mineIn 0.4s 0.35s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes mineIn { 0% { opacity: 0; transform: translateX(-50%) rotate(-6deg) scale(2.2); } 100% { opacity: 1; transform: translateX(-50%) rotate(-6deg) scale(1); } }

/* Win streak banner on results */
.streak { align-self: center; display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font-weight: 800; font-size: 13px; animation: popIn 0.5s 0.3s cubic-bezier(.2, 1.6, .4, 1) both; }
.streak.roll { color: var(--green); background: rgba(52, 229, 140, 0.12); border: 1px solid rgba(52, 229, 140, 0.6); box-shadow: 0 0 14px rgba(52, 229, 140, 0.3); }
.streak.hot { color: #ff7a59; background: rgba(255, 77, 109, 0.12); border: 1px solid rgba(255, 110, 80, 0.7); box-shadow: 0 0 16px rgba(255, 90, 60, 0.4); }
.streak.fire { color: #ffd23f; background: linear-gradient(90deg, rgba(255, 80, 40, 0.25), rgba(255, 200, 61, 0.2)); border: 1px solid #ff9a3c; box-shadow: 0 0 22px rgba(255, 120, 40, 0.6); }
.streak .flame { display: inline-block; animation: flame 0.6s ease-in-out infinite alternate; }
@keyframes flame { from { transform: scale(1) rotate(-6deg); } to { transform: scale(1.25) rotate(6deg); } }

/* ---------- Home v2 ---------- */
.level-chip { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); }
.level-text { display: flex; flex-direction: column; gap: 3px; font-size: 11px; line-height: 1; min-width: 44px; }
.level-bar { height: 4px; border-radius: 9px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.level-bar div { height: 100%; background: linear-gradient(90deg, var(--gold), #ffe07a); border-radius: 9px; }
.home { gap: 12px; padding-top: 6px; }
.quick-battle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; border-radius: 20px; text-align: left; color: #1a1206; background: linear-gradient(135deg, #ffe07a, var(--gold) 45%, var(--gold2)); box-shadow: 0 0 0 1px rgba(255, 230, 150, 0.6) inset, 0 6px 0 #b07800, 0 12px 34px rgba(255, 190, 40, 0.35); animation: occasional 4.5s ease-in-out infinite; }
.quick-battle:active { transform: scale(0.98); }
@keyframes occasional { 0%, 86%, 100% { filter: brightness(1); } 92% { filter: brightness(1.15); } }
.qb-bolt { font-size: 30px; }
.qb-text { flex: 1; display: flex; flex-direction: column; }
.qb-text b { font-size: 20px; }
.qb-text small { font-size: 11px; white-space: nowrap; font-weight: 600; opacity: 0.75; }
.quick-battle .arrow { font-size: 22px; font-weight: 800; }
.section-title { font-size: 17px; margin: 4px 0 0; }
.hot-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 4px 18px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hot-row::-webkit-scrollbar { display: none; }
.topic-card { flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 12px; text-align: center; border-color: rgba(255, 200, 61, 0.45); transition: transform 0.15s; }
.topic-card:active { transform: scale(0.97); }
.topic-card .topic-name { font-size: 14px; line-height: 1.2; }
.topic-card .live-dot { justify-content: center; margin-top: 2px; }
.topic-card.wide { flex: none; flex-direction: row; text-align: left; padding: 12px 14px; width: 100%; }
.topic-card.wide .topic-card-text { flex: 1; min-width: 0; }
.topic-card.wide .topic-name { font-size: 17px; }
.topic-card.wide .live-dot { justify-content: flex-start; }
.topic-list { display: flex; flex-direction: column; gap: 10px; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cat-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; text-align: left; transition: transform 0.15s, border-color 0.2s; }
.cat-tile:hover { border-color: rgba(255, 200, 61, 0.5); }
.cat-tile:active { transform: scale(0.97); }
.cat-emoji { font-size: 26px; }
.cat-name { font-weight: 800; font-size: 15px; }
.cat-count { font-size: 11px; color: var(--muted); }
.hot-row { scroll-padding-left: 18px; }
.hot-row::after { content: ""; flex: 0 0 8px; }

/* fixes: Home sections must not be squashed; hot cards keep full height and wrap long names */
.home > * { flex-shrink: 0; }
.topic-card .topic-name { text-wrap: balance; overflow-wrap: anywhere; }
.hot-row { align-items: stretch; }
/* timer: in the last seconds the whole bar is solid red (no gold left over) */
.timebar.urgent .timebar-fill { background: var(--red); box-shadow: 0 0 14px rgba(255, 77, 109, 0.9); animation: none; }
.timebar.urgent { animation: pulse 0.5s infinite; border-color: rgba(255, 77, 109, 0.6); }

/* ---------- Home hierarchy: Hot cards + tinted categories ---------- */
.topic-card.hot { position: relative; flex-basis: 148px; padding-top: 18px; border: 1.5px solid transparent; background: linear-gradient(160deg, rgba(255, 106, 61, 0.16), rgba(20, 12, 40, 0.95) 55%) padding-box, linear-gradient(135deg, #ffb13c, #ff3d6e 60%, #a855f7) border-box; box-shadow: 0 0 18px rgba(255, 106, 61, 0.22); }
.hot-badge { position: absolute; top: 7px; right: 8px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 99px; color: #fff; background: linear-gradient(90deg, #ff8a3d, #ff3d6e); box-shadow: 0 0 10px rgba(255, 77, 109, 0.6); }
.cat-tile { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--cc) 40%, transparent); background: linear-gradient(140deg, color-mix(in srgb, var(--cc) 20%, transparent), rgba(255, 255, 255, 0.02) 65%); }
.cat-tile:hover { border-color: color-mix(in srgb, var(--cc) 75%, transparent); }
.cat-tile .cat-emoji { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, var(--cc) 26%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc) 55%, transparent); margin-bottom: 4px; }
.cat-tile .cat-count { color: color-mix(in srgb, var(--cc) 70%, white); }
/* crowd meter (preview) */
.crowd-meter { display: block; height: 4px; margin-top: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.crowd-meter i { display: block; height: 100%; border-radius: 9px; background-image: linear-gradient(90deg, #ff4d6d, var(--gold) 50%, var(--green)); }

/* ---------- rotating personal banner ---------- */
.promo { position: relative; --tc: var(--neon); }
.promo.green { --tc: var(--green); }
.promo.red { --tc: var(--red); }
.promo.purple { --tc: var(--neon); }
.promo-msg { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; text-align: left; border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, transparent), rgba(255, 255, 255, 0.02)); box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 18%, transparent); animation: promoIn 0.4s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes promoIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.promo-icon { font-size: 20px; }
.promo-text { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-cta { flex-shrink: 0; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 99px; color: #0b0920; background: var(--tc); }
.promo-dots { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.promo-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: background 0.3s, width 0.3s; }
.promo-dots i.on { width: 14px; border-radius: 9px; background: var(--tc); }
.home .promo + .quick-battle { margin-top: 6px; }

/* ---------- Home calm-down: only Quick Battle glows ---------- */
.promo-msg { padding: 7px 10px; box-shadow: none; background: color-mix(in srgb, var(--tc) 12%, rgba(255, 255, 255, 0.02)); border-color: color-mix(in srgb, var(--tc) 40%, transparent); }
.promo-icon { font-size: 16px; }
.promo-text { font-size: 12px; }
.promo-cta { padding: 4px 9px; font-size: 11px; }
.topic-card.hot { box-shadow: none; padding: 14px 8px 10px; gap: 6px; flex-basis: 136px; }
.topic-card.hot .item-img { width: 64px !important; height: 64px !important; }
.topic-card.hot .topic-name { font-size: 13px; }

/* compact category tiles: icon left, text right, half the height */
.cat-grid { gap: 8px; }
.cat-tile { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
.cat-tile .cat-emoji { width: 36px; height: 36px; font-size: 19px; margin: 0; flex-shrink: 0; }
.cat-tile .cat-text { display: flex; flex-direction: column; min-width: 0; }
.cat-tile .cat-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Home spacing + mid-size category tiles ---------- */
.home { gap: 18px; padding-top: 10px; }
.home .promo + .quick-battle { margin-top: 2px; }
.home .section-title { margin: 2px 0 -6px; }
.home .hot-row + .section-title { margin-top: 10px; }
.cat-grid { gap: 10px; }
.cat-tile { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; min-height: 86px; }
.cat-tile .cat-emoji { width: 42px; height: 42px; font-size: 22px; margin: 0 0 2px; }
.cat-tile .cat-name { font-size: 15px; }
.cat-tile { gap: 3px; padding: 10px 12px; min-height: 0; }
.cat-tile .cat-emoji { width: 36px; height: 36px; font-size: 19px; margin: 0 0 3px; border-radius: 10px; }
.cat-tile .cat-text { gap: 1px; }
.home .hot-row + .section-title { margin-top: 6px; }
.cat-tile .cat-name { line-height: 1.15; }
.cat-tile .cat-count { line-height: 1.15; }
.home { gap: 16px; }
/* HOT badge sits above the topic art, with room so they don't overlap */
.hot-badge { z-index: 3; top: 6px; right: 6px; }
.topic-card.hot { padding-top: 22px; }
.topic-card.hot .item-img { width: 58px !important; height: 58px !important; }

/* player monogram avatar */
.avatar.monogram { font-weight: 800; color: #1a1206; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--gold) 45%, var(--gold2)); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); letter-spacing: -0.02em; }

.free-tag { font-style: normal; color: var(--gold); opacity: 0.85; }

/* ---------- topic limit: progress, completed, sheets ---------- */
.plays { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: var(--muted); margin-top: 2px; }
.topic-card.wide .plays { justify-content: flex-start; }
.plays i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.plays i.on { background: var(--gold); box-shadow: 0 0 6px rgba(255, 200, 61, 0.7); }
.plays span { margin-left: 4px; }
.topic-card.done { opacity: 0.6; }
.topic-card.done .item-img { filter: grayscale(0.6); }
.done-badge { position: absolute; top: 6px; right: 6px; z-index: 3; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 99px; color: #062012; background: var(--green); }
.topic-card.wide .done-badge { top: 8px; right: auto; left: 8px; }
.topic-card.wide { position: relative; }
.topic-done { align-self: center; padding: 7px 14px; border-radius: 99px; font-size: 13px; color: var(--gold); background: rgba(255, 200, 61, 0.12); border: 1px solid var(--gold); box-shadow: 0 0 18px rgba(255, 200, 61, 0.35); }
.topic-left { align-self: center; font-size: 12px; color: var(--muted); }
.sheet-veil { position: absolute; inset: 0; z-index: 60; display: flex; align-items: flex-end; background: rgba(5, 4, 18, 0.7); animation: fadeIn 0.2s both; }
.sheet { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; text-align: center; background: linear-gradient(180deg, #1c1442, #0d0a24); border-bottom: 0; animation: riseIn 0.35s cubic-bezier(.2, 1.2, .4, 1) both; overflow: hidden; }
.sheet-title { font-size: 34px; margin: 4px 0 0; color: var(--gold); text-shadow: 0 0 18px rgba(255, 200, 61, 0.6); transform: rotate(-3deg); }
.sheet-text { margin: 0; font-size: 14px; line-height: 1.45; max-width: 300px; }
.sheet-trophy { font-size: 54px; animation: popIn 0.6s cubic-bezier(.2, 1.6, .4, 1) both; }
.sheet .btn { margin-top: 6px; }
.sheet-close { padding: 8px; font-size: 13px; color: var(--muted); }
.sheet-notified { margin-top: 6px; padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 700; color: var(--green); background: rgba(52, 229, 140, 0.1); border: 1px solid rgba(52, 229, 140, 0.4); }

.res-total { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.free-legend { margin-right: auto; font-size: 10px; font-weight: 600; color: var(--muted); }
.hot-row.empty { display: none; }

/* =====================================================================
   GAME ART PASS (2026-10-08) — everything below is scoped to .theme-game.
   Remove the class (GAME_ART_DEFAULT=false in src/ui.js, or ?classic) to get v1 back.
   ===================================================================== */

/* Background: deep navy with neon brush strokes + twinkling sparks */
.theme-game { background: radial-gradient(120% 60% at 50% 0%, rgba(91, 33, 182, 0.35), transparent 60%), radial-gradient(90% 50% at 50% 100%, rgba(37, 99, 235, 0.18), transparent 70%), linear-gradient(180deg, #0b0a26, #06061a 70%); }
.brush-strokes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.brush-strokes .spark { opacity: 0; animation: twinkle 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(0.4); } 80% { opacity: 0.9; transform: scale(1.1); } 90% { opacity: 0.4; } }
.theme-game .topbar, .theme-game .viewport { position: relative; z-index: 1; }

/* Ribbon section headers */
.ribbon { align-self: flex-start; margin: 2px 0 -4px -4px; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.ribbon span { position: relative; display: inline-block; padding: 6px 22px 6px 14px; color: #fff; background: linear-gradient(180deg, #8b5cf6, #5b21b6); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); transform: rotate(-1.5deg); }
.ribbon.fire span { background: linear-gradient(180deg, #ff9a3c, #e0244e); }
.ribbon.gold span { color: #2a1700; background: linear-gradient(180deg, #ffe07a, #f59e0b); text-shadow: none; }

/* Chunky "physical" panels on Home */
.theme-game .home .card, .theme-game .cat-tile, .theme-game .promo-msg { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.35), 0 5px 0 rgba(5, 4, 20, 0.9), 0 10px 18px rgba(0, 0, 0, 0.35); border-width: 1.5px; }
.theme-game .cat-tile { background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 34%, #1b1544), #120f33 70%); border-color: color-mix(in srgb, var(--cc) 60%, transparent); }
.theme-game .cat-tile:active, .theme-game .topic-card:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 2px 0 rgba(5, 4, 20, 0.9); }
.theme-game .cat-tile .cat-emoji { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 3px 0 rgba(0, 0, 0, 0.35); }

/* Hot cards as framed trading cards with a shine sweep */
.theme-game .topic-card.hot { overflow: hidden; }
.theme-game .topic-card.hot::after { content: ""; position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: skewX(-18deg); animation: shine 5s ease-in-out infinite; pointer-events: none; }
.theme-game .hot-row .topic-card:nth-child(2)::after { animation-delay: 1.6s; }
.theme-game .hot-row .topic-card:nth-child(3)::after { animation-delay: 3.2s; }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.theme-game .hot-badge { animation: flickerBadge 2.6s ease-in-out infinite; }
@keyframes flickerBadge { 0%, 88%, 100% { filter: brightness(1); } 92% { filter: brightness(1.5); } 95% { filter: brightness(0.9); } }

/* Quick Battle: chunkier, bolt sparks */
.theme-game .quick-battle { border-radius: 22px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55), inset 0 -4px 0 rgba(160, 90, 0, 0.5), 0 7px 0 #a86a00, 0 14px 34px rgba(255, 190, 40, 0.4); }
.theme-game .quick-battle:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 3px 0 #a86a00; }
.theme-game .qb-bolt { font-size: 34px; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); animation: boltZap 2.8s ease-in-out infinite; }
@keyframes boltZap { 0%, 80%, 100% { transform: rotate(0) scale(1); } 85% { transform: rotate(-12deg) scale(1.25); } 90% { transform: rotate(8deg) scale(1.1); } }

/* Currency + level as game counters */
.theme-game .crowns { padding: 4px 12px 4px 6px; border: 1.5px solid rgba(255, 200, 61, 0.7); background: linear-gradient(180deg, #2a1f08, #120c02); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 3px 0 rgba(0, 0, 0, 0.5); }
.theme-game .crowns .crown-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--gold) 50%, var(--gold2)); font-size: 13px; box-shadow: 0 0 10px rgba(255, 200, 61, 0.6); }
.theme-game .level-chip { border: 1.5px solid rgba(160, 140, 255, 0.5); background: linear-gradient(180deg, #221a52, #120e33); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 3px 0 rgba(0, 0, 0, 0.5); }
.theme-game .level-bar { height: 6px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }

/* Welcome: bigger, glowing headline */
.theme-game .tagline { font-size: 52px; text-shadow: 0 0 22px rgba(180, 76, 255, 0.8), 0 4px 0 rgba(0, 0, 0, 0.4); }
.theme-game .welcome-logo { filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.6)); }

/* Opponent found: light burst, crowns over avatars */
.theme-game .found { isolation: isolate; }
.burst { position: absolute; left: 50%; top: 210px; width: 560px; height: 560px; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.burst::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(96, 165, 250, 0.55), rgba(124, 58, 237, 0.35) 30%, transparent 62%); }
.burst i { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(167, 139, 250, 0.22) 0 6deg, transparent 6deg 22deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 60%); mask: radial-gradient(circle, #000 18%, transparent 60%); animation: spinSlow 40s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.vs-side { position: relative; }
.vs-crown { position: absolute; top: -26px; left: 50%; transform: translateX(-50%) rotate(-10deg); font-size: 30px; z-index: 2; filter: drop-shadow(0 0 8px rgba(255, 200, 61, 0.9)); }
.vs-crown.purple { filter: hue-rotate(230deg) saturate(1.4) drop-shadow(0 0 8px rgba(180, 76, 255, 0.9)); transform: translateX(-50%) rotate(10deg); }
.theme-game .vs { font-size: 46px; color: #fff; text-shadow: 0 0 18px rgba(96, 165, 250, 0.9), 0 0 36px rgba(168, 85, 247, 0.7); }
.theme-game .avatar.gold-ring { box-shadow: 0 0 0 3px var(--gold), 0 0 0 7px rgba(255, 200, 61, 0.18), 0 0 34px rgba(255, 200, 61, 0.75); }
.theme-game .avatar.purple-ring { box-shadow: 0 0 0 3px var(--neon), 0 0 0 7px rgba(180, 76, 255, 0.18), 0 0 34px rgba(180, 76, 255, 0.85); }

/* Results calculating: stage spotlights + podium */
.judge.staged { overflow: hidden; justify-content: flex-start; padding-top: 18px; gap: 14px; }
.judge-heading { font-size: 34px; font-weight: 800; letter-spacing: 0.06em; color: #fff; text-shadow: 0 0 20px rgba(139, 92, 246, 0.9); }
.spot { position: absolute; top: -40px; width: 220px; height: 640px; pointer-events: none; background: linear-gradient(180deg, rgba(196, 181, 253, 0.55), rgba(139, 92, 246, 0.12) 55%, transparent 80%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); filter: blur(6px); opacity: 0.75; animation: sweep 6s ease-in-out infinite alternate; }
.spot.left { left: -60px; transform-origin: top center; transform: rotate(-24deg); }
.spot.right { right: -60px; transform-origin: top center; transform: rotate(24deg); animation-delay: -3s; }
@keyframes sweep { from { opacity: 0.45; } to { opacity: 0.85; } }
.judge.staged .judge-bot { margin-top: 30px; display: flex; flex-direction: column; align-items: center; }
.judge-crown { position: relative; z-index: 2; font-size: 44px; margin-bottom: -18px; filter: drop-shadow(0 0 10px rgba(255, 200, 61, 0.9)); animation: float 2s ease-in-out infinite; }
.judge.staged .bot-face { width: 150px; height: 150px; font-size: 86px; position: relative; z-index: 1; box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.7), 0 0 50px rgba(139, 92, 246, 0.8); }
.podium { position: relative; width: 240px; height: 70px; margin-top: -26px; }
.podium i { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid rgba(96, 165, 250, 0.8); box-shadow: 0 0 18px rgba(96, 165, 250, 0.8), inset 0 0 18px rgba(96, 165, 250, 0.5); }
.podium i:nth-child(1) { width: 240px; height: 62px; background: radial-gradient(ellipse, rgba(59, 130, 246, 0.35), rgba(30, 27, 75, 0.9) 70%); }
.podium i:nth-child(2) { width: 170px; height: 42px; border-color: rgba(167, 139, 250, 0.9); animation: ringPulse 1.6s ease-in-out infinite; }
.podium i:nth-child(3) { width: 100px; height: 24px; border-color: rgba(255, 255, 255, 0.8); animation: ringPulse 1.6s 0.4s ease-in-out infinite; }
@keyframes ringPulse { 50% { opacity: 0.35; transform: translate(-50%, -50%) scale(1.08); } }
.judge.staged h1 { margin-top: 24px; font-size: 28px; }
.judge-sub { margin: -8px 0 0; color: var(--muted); font-size: 13px; }
.judge.staged .progress { width: 70%; }
/* game art: keep Home on one screen */
.theme-game .home { gap: 12px; }
.theme-game .ribbon { margin: 0 0 -6px -4px; font-size: 13px; }
.theme-game .ribbon span { padding: 5px 20px 5px 12px; }
.theme-game .cat-grid { gap: 9px; }
.theme-game .cat-tile { padding: 8px 12px; }
.theme-game .cat-tile .cat-emoji { width: 32px; height: 32px; font-size: 17px; }
.theme-game .home .hot-row + .ribbon { margin-top: 4px; }
.spot { opacity: 0.5; background: linear-gradient(180deg, rgba(196, 181, 253, 0.45), rgba(139, 92, 246, 0.1) 55%, transparent 80%); }
@keyframes sweep { from { opacity: 0.3; } to { opacity: 0.55; } }

/* ---------- moods, calmer strokes, solid panels (game art) ---------- */
.theme-game.mood-lobby { background: radial-gradient(130% 70% at 50% 0%, rgba(139, 92, 246, 0.55), transparent 65%), radial-gradient(100% 60% at 50% 100%, rgba(59, 130, 246, 0.3), transparent 70%), linear-gradient(180deg, #1d1658, #120f3d 60%, #0e0c33); }
.theme-game.mood-arena { background: radial-gradient(80% 38% at 50% 30%, rgba(124, 58, 237, 0.28), transparent 70%), linear-gradient(180deg, #08071d, #05040f); }
.theme-game.mood-stage { background: radial-gradient(120% 60% at 50% 0%, rgba(91, 33, 182, 0.4), transparent 60%), radial-gradient(90% 50% at 50% 100%, rgba(37, 99, 235, 0.2), transparent 70%), linear-gradient(180deg, #0c0a2a, #06061a 70%); }
.brush-strokes { transition: opacity 0.4s; }
.brush-strokes.calm { opacity: 0.42; }
.brush-strokes.calm path:not(.spark):nth-of-type(even) { display: none; }

/* solid panels: nothing shows through */
.theme-game .card { background: linear-gradient(165deg, #231b57, #15113a); }
.theme-game .controls { background: linear-gradient(170deg, #1c1649, #120f33); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 5px 0 rgba(5, 4, 20, 0.9); }
.theme-game .drafts { background: linear-gradient(170deg, #1a1444, #110e30); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 5px 0 rgba(5, 4, 20, 0.9); }
.theme-game .promo-msg { background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 22%, #1b1546), #16123d); }
.theme-game .res-item, .theme-game .judge-line-card { background: linear-gradient(165deg, #211a52, #15113a); }
.theme-game .topic-card.hot { background: linear-gradient(160deg, #5a2a3a, #24163f 45%, #17123a) padding-box, linear-gradient(135deg, #ffb13c, #ff3d6e 60%, #a855f7) border-box; }
.theme-game .icon-btn { background: linear-gradient(180deg, #221a52, #120e33); }

/* Home: more breathing room between the chunkier pieces */
.theme-game .home { gap: 17px; padding-top: 12px; }
.theme-game .home .promo + .quick-battle { margin-top: 4px; }
.theme-game .ribbon { margin: 2px 0 -6px -4px; }
.theme-game .home .hot-row + .ribbon { margin-top: 8px; }
.theme-game .cat-grid { gap: 12px; }
/* restore category tints over the solid-panel rule */
.theme-game .cat-tile.card { background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 34%, #1b1544), #120f33 70%); }
/* fit Home on one screen with the roomier spacing */
.theme-game .home { gap: 15px; }
.theme-game .home .hot-row + .ribbon { margin-top: 5px; }
.theme-game .cat-grid { gap: 11px; }
.theme-game .cat-tile { padding: 6px 12px; }
/* more room between Quick Battle and the Hot ribbon */
.theme-game .home .quick-battle + .ribbon { margin-top: 10px; }
.theme-game .cat-grid { gap: 9px; }

/* Lobby v2: deep royal blue / navy (matches the topic-icon backgrounds), soft violet glow only at the top.
   Previous violet lobby, for reference / easy revert:
   radial-gradient(130% 70% at 50% 0%, rgba(139,92,246,.55), transparent 65%), radial-gradient(100% 60% at 50% 100%, rgba(59,130,246,.3), transparent 70%), linear-gradient(180deg,#1d1658,#120f3d 60%,#0e0c33) */
.theme-game.mood-lobby { background: radial-gradient(120% 45% at 50% 0%, rgba(124, 58, 237, 0.32), transparent 70%), radial-gradient(110% 60% at 50% 55%, rgba(37, 99, 235, 0.22), transparent 70%), linear-gradient(180deg, #16214f, #111a42 45%, #0c1333); }
.theme-game.mood-lobby .card, .theme-game.mood-lobby .promo-msg { background: linear-gradient(165deg, #1e2a5e, #131c45); }
.theme-game.mood-lobby .cat-tile.card { background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 32%, #182457), #101839 70%); }
.theme-game.mood-lobby .topic-card.hot { background: linear-gradient(160deg, #4a2a3e, #1e2350 45%, #151d45) padding-box, linear-gradient(135deg, #ffb13c, #ff3d6e 60%, #a855f7) border-box; }
.theme-game.mood-lobby .level-chip, .theme-game.mood-lobby .icon-btn { background: linear-gradient(180deg, #1f2b5e, #111a40); border-color: rgba(120, 150, 255, 0.45); }

/* ---------- fixes 2026-10-08 (feedback round) ---------- */
/* Spotlight → card: text must fade with the overlay (fill-mode animations were keeping it visible = the "glitch") */
.spotlight.leaving > :not(.item-img) { animation: none !important; opacity: 0 !important; transition: opacity 0.18s; }
.spotlight.leaving { background: transparent; transition: background 0.35s ease-out; }

/* "It's yours!" + sparkles wait until the flying item has left the card */
.mine-text { animation-delay: 1s; }
.mine-burst i { animation-delay: 0.95s; }

/* Results: crowd meter + gift badge for free items; content block centred, no layout jump when drafts appear */
.res-img { position: relative; }
.res-gift { position: absolute; left: -6px; bottom: -5px; font-size: 13px; font-style: normal; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8)); }
.results .reveal { opacity: 0; visibility: hidden; animation: none; }
.results .reveal.shown { visibility: visible; animation: fadeUp 0.6s ease-out both; }
.results .race { margin-top: auto; }
.results .cta-row { margin-top: auto; }
.results { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }

/* Bid war (arena): depth instead of a flat single colour — navy body, purple glow behind the item, rim light, pedestal */
.pedestal { display: none; }
.theme-game .pedestal { display: block; position: absolute; left: 50%; bottom: -26px; width: clamp(190px, 42cqh, 330px); height: 52px; transform: translateX(-50%); pointer-events: none; }
.theme-game .pedestal i { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.theme-game .pedestal i:nth-child(1) { width: 100%; height: 100%; background: radial-gradient(ellipse, rgba(59, 130, 246, 0.35), rgba(15, 20, 60, 0.85) 70%); border: 2px solid rgba(96, 165, 250, 0.7); box-shadow: 0 0 22px rgba(96, 165, 250, 0.55); }
.theme-game .pedestal i:nth-child(2) { width: 70%; height: 62%; border: 2px solid rgba(255, 200, 61, 0.55); box-shadow: 0 0 14px rgba(255, 200, 61, 0.4); }
.theme-game .auction-item .item-stage { padding-bottom: 18px; }
.theme-game .auction-item .item-stage .item-img { position: relative; z-index: 1; width: clamp(130px, 30cqh, 262px) !important; height: clamp(130px, 30cqh, 262px) !important; }
.theme-game .auction-item .item-glow { width: clamp(200px, 46cqh, 360px); height: clamp(200px, 46cqh, 360px); }
.theme-game .auction-item .item-name { margin-top: 26px; }
.theme-game.mood-arena .auction-item.card { background: radial-gradient(70% 45% at 50% 36%, rgba(139, 92, 246, 0.32), transparent 72%), linear-gradient(172deg, #212c66, #141c4a 55%, #0d1234); border-color: rgba(130, 150, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 40px rgba(59, 130, 246, 0.14), 0 6px 0 rgba(5, 4, 20, 0.9); }
.theme-game.mood-arena .controls { background: linear-gradient(172deg, #1d2660, #111842); }
.theme-game.mood-arena .controls.live { border-color: rgba(255, 200, 61, 0.55); }
.theme-game.mood-arena .drafts { background: linear-gradient(172deg, #1a2257, #10163b); border-color: rgba(130, 150, 255, 0.28); }
/* Results panels in the same navy family */
.theme-game .res-item, .theme-game .judge-line-card { background: linear-gradient(165deg, #1f2a5e, #141c46); border-color: rgba(130, 150, 255, 0.28); }
/* results: content back up near the top (a little breathing room), buttons stay at the bottom */
.results .race { margin-top: 0; padding-top: 24px; }
.results { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
/* Battle Found: the light burst is the one big effect — softer rays, calmer strokes, no extra doodle */
.burst i { background: repeating-conic-gradient(from 0deg, rgba(167, 139, 250, 0.12) 0 5deg, transparent 5deg 24deg); }
.burst::before { background: radial-gradient(circle, rgba(96, 165, 250, 0.42), rgba(124, 58, 237, 0.26) 30%, transparent 60%); }
.theme-game .found .cd2 { display: none; }

/* Welcome "WIN.": warmer gold, tight halo (no wide haze), quieter underline. */
.theme-game .tagline .gold { color: #ffbb33; text-shadow: 0 0 6px rgba(255, 168, 30, 0.45), 0 4px 0 rgba(0, 0, 0, 0.4); }
.theme-game .swoosh { height: 4px; width: 160px; animation-name: swooshIn; }
@keyframes swooshIn { to { opacity: 0.5; } }

/* ===== Rundown pass (2026-10-08) ===== */
/* SOLD! stamp, gavel and "It's yours!" sit above the item picture (the pedestal pass raised it). */
.theme-game .auction-item .sold-stamp, .theme-game .auction-item .gavel, .theme-game .auction-item .mine-text { z-index: 3; }
.theme-game .auction-item .mine-burst { z-index: 2; }
.mine-text { animation-delay: 1.4s; } /* after the item has flown down to the draft */

/* Rival's turn / between rounds: dimmed controls stay in place instead of an empty box. */
.controls.idle { justify-content: flex-start; }
.zone-status { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 24px; color: var(--muted); font-size: 14px; font-weight: 700; }
.zone-status:has(.avatar) { color: var(--text); }
.ghost-controls { display: flex; flex-direction: column; gap: 10px; opacity: 0.28; filter: saturate(0.4); pointer-events: none; }
.ghost-controls .step { display: grid; place-items: center; }
.ghost-controls .btn { box-shadow: none; }

/* Chunky secondary buttons to match the gold ones. */
.theme-game .btn-ghost { background: linear-gradient(180deg, #26336e, #18214f); border: 1px solid rgba(140, 165, 255, 0.35); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 5px 0 #0a0f2e; }
.theme-game .btn-ghost:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 2px 0 #0a0f2e; }
.theme-game .step { background: linear-gradient(180deg, #26336e, #18214f); border-color: rgba(140, 165, 255, 0.4); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 4px 0 #0a0f2e; }
.theme-game .step:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #0a0f2e; }
.theme-game .quick { background: linear-gradient(180deg, rgba(255, 200, 61, 0.16), rgba(255, 200, 61, 0.05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 0 rgba(120, 80, 0, 0.7); }
.theme-game .quick:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(120, 80, 0, 0.7); }
.theme-game .pass { padding: 8px 16px; border-radius: 12px; color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.08); box-shadow: 0 3px 0 rgba(90, 20, 30, 0.8); }
.theme-game .pass:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(90, 20, 30, 0.8); }

/* Round intro: gold ribbon instead of small grey text. */
.spot-ribbon { align-self: center; margin: 4px 0 0; font-size: 13px; animation: riseIn 0.4s 0.4s both; }

/* Round bar: gold = you won it, purple = rival, white pulse = now. */
.segments i.won-you { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.segments i.won-opp { background: var(--neon); box-shadow: 0 0 6px var(--neon); }
.segments i.now { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }

/* Header crowns: clean crown drawing, not an emoji on a coin. */
.theme-game .crowns .crown-ico { background: none; box-shadow: none; width: 22px; height: 22px; }
.crown-ico svg { width: 22px; height: 17px; display: block; filter: drop-shadow(0 0 4px rgba(255, 200, 61, 0.6)); }

/* Finding a rival: lobby navy, brush title, purple radar. */
.finding-title { font-size: 34px; color: #fff; text-shadow: 0 0 18px rgba(167, 139, 250, 0.7), 0 3px 0 rgba(0, 0, 0, 0.4); transform: rotate(-4deg); margin-top: 18px; }
.theme-game .radar { padding: 42px; }
.theme-game .radar::before, .theme-game .radar::after { border-color: #a78bfa; box-shadow: 0 0 18px rgba(167, 139, 250, 0.45); }
.theme-game .searching .roll-name { color: var(--muted); font-size: 15px; }
.theme-game.mood-stage:has(.searching) { background: radial-gradient(120% 45% at 50% 0%, rgba(124, 58, 237, 0.32), transparent 70%), radial-gradient(110% 60% at 50% 55%, rgba(37, 99, 235, 0.22), transparent 70%), linear-gradient(180deg, #16214f, #111a42 45%, #0c1333); }

/* Feedback 2026-10-08: quick bids sit a bit lower; item name gets air under the pedestal; results sit a bit lower. */
.theme-game .controls.live .bid-sub, .theme-game .ghost-controls .bid-sub { margin-top: 6px; }
.theme-game .auction-item .item-name { margin-top: 34px; }
.results .race { padding-top: 48px; }

/* ===== Round intro v2: item lands on the stand inside its card (no separate spotlight) ===== */
.auction-item.intro .item-stage .item-img { visibility: visible; animation: landIn 0.55s cubic-bezier(.3, .9, .4, 1) both; }
@keyframes landIn {
  0% { opacity: 0; transform: translateY(-140px) scale(1.15); }
  50% { opacity: 1; transform: translateY(0) scale(1); }
  64% { transform: translateY(4px) scale(1.06, 0.92); }
  80% { transform: translateY(-6px) scale(0.98, 1.03); }
  100% { transform: none; }
}
.auction-item.intro .item-glow { animation: landGlow 0.9s 0.25s ease-out both, breathe 2.4s 1.15s ease-in-out infinite; }
@keyframes landGlow { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } 100% { transform: translate(-50%, -50%) scale(1); } }
.theme-game .auction-item.intro .pedestal i:nth-child(2) { animation: ringHit 0.6s 0.27s ease-out both; }
@keyframes ringHit { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.3; } 35% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; box-shadow: 0 0 30px rgba(255, 200, 61, 0.9); } 100% { transform: translate(-50%, -50%) scale(1); } }
.auction-item.intro .item-name { animation: riseIn 0.35s 0.35s both; }

/* Ribbon over the top of the card */
.intro-ribbon { position: absolute; top: 12px; left: 50%; z-index: 5; margin: 0; transform: translateX(-50%); font-size: 14px; pointer-events: none; animation: ribbonIn 0.35s 0.32s cubic-bezier(.3, 1.8, .5, 1) both; white-space: nowrap; }
.intro-ribbon span { padding: 7px 20px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4); transform: rotate(-2deg); }
@keyframes ribbonIn { 0% { opacity: 0; transform: translateX(-50%) scale(2); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } }
.intro-ribbon.out { animation: ribbonOut 0.22s ease-in both; }
@keyframes ribbonOut { to { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.85); } }

/* Rest of the screen waits while the item lands */
.auction .controls, .auction .drafts { transition: opacity 0.25s; }
.auction:has(.auction-item.intro) .controls, .auction:has(.auction-item.intro) .drafts { opacity: 0.55; }

/* One ring on the stand: the gold landing ring (blue floor ring removed) */
.theme-game .pedestal i:nth-child(1) { display: none; }
.theme-game .pedestal i:nth-child(2) { width: 78%; height: 66%; border-color: rgba(255, 200, 61, 0.5); background: radial-gradient(ellipse, rgba(255, 200, 61, 0.12), rgba(59, 40, 120, 0.25) 60%, transparent 72%); box-shadow: 0 0 12px rgba(255, 200, 61, 0.3); }
.theme-game .auction-item .item-name { margin-top: 26px; }

/* Results: FREE tag under the points instead of gift icons */
.res-pts-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.res-free { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; padding: 0 4px; line-height: 13px; }

/* Home button: same chunky depth as Play Again, navy instead of gold */
.theme-game .results .cta-row .btn-ghost { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14), 0 6px 0 #070b24; }

/* Category art (real icons): big on the right of the tile, name + count on the left */
.cat-tile:has(.cat-art) { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 78px; padding: 10px 70px 10px 14px; }
.cat-tile .cat-art { position: absolute; right: -4px; top: 50%; width: 76px; height: 76px; transform: translateY(-50%) rotate(6deg); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); pointer-events: none; user-select: none; transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1); }
.cat-tile:hover .cat-art, .cat-tile:active .cat-art { transform: translateY(-50%) rotate(0deg) scale(1.08); }
.cat-tile:has(.cat-art) .cat-name { font-size: 15px; white-space: normal; text-wrap: balance; }
.cat-tile:has(.cat-art) { padding-right: 60px; }
.cat-tile .cat-art { width: 72px; height: 72px; right: -8px; }
.cat-tile:has(.cat-art) .cat-name { white-space: nowrap; }
.cat-head { display: flex; align-items: center; gap: 4px; margin: -4px 0 -6px; }
.cat-head-art { width: 84px; height: 84px; flex-shrink: 0; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--cc) 45%, transparent)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); animation: dealIn 0.5s cubic-bezier(.2, 1.4, .4, 1) both; }
.cat-head .ribbon { margin: 0; }
.cat-head .ribbon { align-self: center; }

/* Category art v2: pops out of the tile's top-right corner, per-icon size/tilt, softer tile borders */
.cat-tile:has(.cat-art) { overflow: visible; border-color: color-mix(in srgb, var(--cc) 26%, transparent); }
.theme-game .cat-grid:has(.cat-art) { row-gap: 20px; column-gap: 11px; margin-top: 8px; }
.cat-tile .cat-art { --s: 1; --r: 0deg; top: -14px; right: 2px; width: 80px; height: 80px; transform: rotate(var(--r)) scale(var(--s)); transform-origin: 50% 60%; }
.cat-tile:hover .cat-art, .cat-tile:active .cat-art { transform: rotate(0deg) scale(calc(var(--s) * 1.08)); }
.cat-art.art-food { --s: 0.98; --r: -4deg; }
.cat-art.art-lifestyle { --s: 1.14; --r: 5deg; }
.cat-art.art-fantasy { --s: 1.02; --r: 7deg; }
.cat-art.art-culture { --s: 0.96; --r: -6deg; }
.cat-art.art-fun { --s: 0.92; --r: 4deg; }
.cat-art.art-all { --s: 0.94; --r: -3deg; }
.cat-tile:has(.cat-art) { padding-right: 66px; }
.theme-game .cat-grid:has(.cat-art) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cat-tile .cat-art { width: 72px; height: 72px; right: -10px; top: -12px; }
.cat-tile:has(.cat-art) .cat-name { font-size: 14px; }
.cat-art.art-food { --s: 0.9; }

/* Category art v3: back inside the frame (no pop-out), still balanced per icon */
.cat-tile:has(.cat-art) { overflow: hidden; padding-left: 12px; padding-right: 70px; }
.theme-game .cat-grid:has(.cat-art) { row-gap: 12px; margin-top: 0; }
.cat-tile .cat-art { width: 62px; height: 62px; right: 8px; top: 50%; translate: 0 -50%; }
.cat-tile:has(.cat-art) { padding-right: 60px; }
.cat-tile:has(.cat-art) .cat-name { overflow: visible; text-overflow: clip; }
.cat-tile .cat-art { width: 58px; height: 58px; }
.cat-art.art-lifestyle { --s: 1.08; }

/* ===== Final brand art: W logo + the Judge ===== */
.logo-art { display: block; object-fit: contain; user-select: none; }
.topbar .logo-art { width: 44px; height: 44px; margin: -5px -4px; }
.theme-game .welcome-logo { filter: none; }
.welcome-logo .logo-art { width: 200px; height: 200px; margin: -14px 0; }

.judge-art { position: relative; z-index: 1; width: 190px; height: 190px; object-fit: contain; margin-bottom: -26px; filter: drop-shadow(0 0 24px rgba(139, 92, 246, 0.55)); animation: judgeIn 0.55s cubic-bezier(.3, 1.6, .5, 1) both, float 2.4s 0.55s ease-in-out infinite; }
@keyframes judgeIn { 0% { opacity: 0; transform: translateY(-60px) scale(0.7) rotate(-8deg); } 100% { opacity: 1; transform: none; } }
.judge-mini { overflow: hidden; background: radial-gradient(circle at 50% 35%, #3b2a7a, #120e2e 75%); }
.judge-mini img { width: 170%; height: 170%; object-fit: contain; transform: translate(-1%, 14%); }
.judge-art { width: 220px; height: 220px; margin-bottom: -30px; }
.judge-mini { position: relative; }
.judge-mini img { position: absolute; width: 250%; height: 250%; max-width: none; left: -75%; top: -48%; transform: none; }

/* ===== Welcome sequence v2 (waits for logo + brush font) =====
   0.00 W drops in and lands · 0.45 Bid… · 0.70 Build… · 0.95 WIN. (biggest stamp) · 1.25 underline draws
   · 1.45 line + button rise together. Nothing loops on the W. */
.welcome .welcome-logo, .welcome .tagline span, .welcome .swoosh, .welcome .welcome-sub, .welcome .bottom-cta { animation-play-state: paused !important; }
.welcome.ready .welcome-logo, .welcome.ready .tagline span, .welcome.ready .swoosh, .welcome.ready .welcome-sub, .welcome.ready .bottom-cta { animation-play-state: running !important; }
.welcome .welcome-logo { animation: logoLand 0.5s cubic-bezier(.3, .9, .4, 1) both; }
@keyframes logoLand {
  0% { opacity: 0; transform: translateY(-50px) scale(1.08); }
  55% { opacity: 1; transform: translateY(0) scale(1); }
  72% { transform: translateY(3px) scale(1.04, 0.95); }
  100% { transform: none; }
}
.welcome .tagline span { animation: stampIn 0.35s cubic-bezier(.2, 1.5, .4, 1) both; }
.welcome .tagline span:nth-child(1) { animation-delay: 0.45s; }
.welcome .tagline span:nth-child(2) { animation-delay: 0.7s; }
.welcome .tagline span:nth-child(3) { animation: winStamp 0.45s 0.95s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes winStamp { 0% { opacity: 0; transform: scale(2.8) rotate(-10deg); } 100% { opacity: 1; transform: none; } }
.theme-game .welcome .swoosh { opacity: 0.5; transform-origin: left center; animation: swooshDraw 0.35s 1.25s ease-out both; }
@keyframes swooshDraw { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 100% { opacity: 0.5; clip-path: inset(0 0 0 0); } }
.welcome .welcome-sub { animation: fadeIn 0.4s 1.45s both; }
.welcome .bottom-cta { animation: riseIn 0.4s 1.45s both; }

/* Drawn crown everywhere (replaces 👑 emoji) */
.crown-svg { display: inline-block; width: 1.2em; height: 0.9em; vertical-align: -0.08em; overflow: visible; }
.vs-crown, .crown-drop, .res-crown { line-height: 0; }
.vs-crown.purple { filter: drop-shadow(0 0 8px rgba(180, 76, 255, 0.9)); }
.reward { display: inline-flex; align-items: center; gap: 5px; }
.reward .crown-svg { width: 1.25em; height: 0.95em; }
.count-num:empty { min-height: 64px; }
.res-name.long { font-size: 11px; letter-spacing: -0.01em; }

/* ===== Free items (C75 rule): badges + messaging ===== */
.slot { position: relative; }
.slot-free { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: 0.06em; line-height: 12px; padding: 0 4px; border-radius: 5px; color: #dfe6ff; background: #2a3570; border: 1px solid rgba(160, 180, 255, 0.45); white-space: nowrap; }
.slot-free.reduced { font-size: 10px; letter-spacing: 0; padding: 0 5px; color: #2a1700; background: linear-gradient(180deg, #ffe07a, #f5a524); border-color: rgba(120, 70, 0, 0.6); }
.auction-item .bid-line:has(.auto-note) { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.auto-rule { font-size: 11.5px; font-weight: 600; color: var(--muted); max-width: 280px; line-height: 1.3; text-wrap: balance; }
.free-chip { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 800; vertical-align: 1px; color: #dfe6ff; background: #2a3570; border: 1px solid rgba(160, 180, 255, 0.45); }
.free-chip.reduced { color: #2a1700; background: linear-gradient(180deg, #ffe07a, #f5a524); border-color: rgba(120, 70, 0, 0.6); }
.res-free.reduced { color: #2a1700; background: linear-gradient(180deg, #ffe07a, #f5a524); border-color: rgba(120, 70, 0, 0.6); }
.free-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.free-zone-title { font-size: 14px; font-weight: 800; color: var(--text); }
.free-chip.big { margin: 0; padding: 4px 14px; font-size: 14px; }
.free-zone .auto-rule { font-size: 12.5px; }
.auction:has(.auction-item.intro) .controls:has(.free-zone) { opacity: 1; }
/* Results: quieter free tags (outline, not filled) so four of them don't shout */
.res-free.reduced { color: #ffcf5c; background: rgba(255, 200, 61, 0.08); border-color: rgba(255, 200, 61, 0.5); }
/* Results: free badge sits on the item icon (same chip as in the bid-war draft) */
.res-img { position: relative; }
.res-badge { bottom: -6px; left: 50%; font-size: 7px; line-height: 11px; padding: 0 3px; }
.res-badge.reduced { font-size: 9.5px; line-height: 11px; }
.res-badge { left: 30%; }

/* ===== Perfect draft benchmark (Results) ===== */
.res-total { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.grade-chip { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; line-height: 16px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.2); color: var(--muted); background: rgba(255, 255, 255, 0.04); font-variant-numeric: tabular-nums; }
.grade-chip.g-Ap { color: #2a1700; background: linear-gradient(180deg, #ffe07a, #f5a524); border-color: rgba(120, 70, 0, 0.6); box-shadow: 0 0 10px rgba(255, 200, 61, 0.5); }
.grade-chip.g-A { color: #ffcf5c; border-color: rgba(255, 200, 61, 0.6); background: rgba(255, 200, 61, 0.1); }
.grade-chip.g-B { color: #6ee7a8; border-color: rgba(52, 229, 140, 0.5); background: rgba(52, 229, 140, 0.08); }
.grade-chip.g-C { color: #a5b4fc; border-color: rgba(129, 140, 248, 0.5); background: rgba(129, 140, 248, 0.08); }
.perfect-star { font-style: normal; color: var(--gold); font-size: 0.85em; margin-left: 4px; text-shadow: 0 0 6px rgba(255, 200, 61, 0.7); }
.perfect-line { text-align: center; font-size: 11.5px; color: var(--muted); line-height: 1.3; padding: 0 6px; }
.perfect-line b { color: var(--text); }
.perfect-line .perfect-star { margin: 0 2px 0 0; }
.perfect-star.on-icon { position: absolute; top: -6px; left: -6px; margin: 0; font-size: 12px; line-height: 1; z-index: 2; }
.res-name.xlong { font-size: 10.5px; white-space: normal; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; }

/* Rolling reveal: other items flicker past (dim, slightly blurred) before the real item lands */
.auction-item.intro .item-stage .item-img.rolling { animation: rollFlick 0.08s steps(2) infinite; filter: brightness(0.45) saturate(0.4) blur(1.5px); transform: scale(0.92); }
@keyframes rollFlick { 0% { transform: scale(0.92) translateY(-2px); } 100% { transform: scale(0.92) translateY(2px); } }
.auction-item.intro:has(.rolling) .bid-line { visibility: hidden; }

/* Results: compact perfect line, first-time tip, 3-button CTA row, share sheet */
.perfect-line { font-size: 12px; }
.perfect-tip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 14px; text-align: center; background: rgba(255, 200, 61, 0.08); border: 1px solid rgba(255, 200, 61, 0.45); animation: riseIn 0.4s both; }
.perfect-tip div { font-size: 13px; color: var(--gold); }
.perfect-tip p { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--text); }
.perfect-tip button { margin-top: 2px; padding: 2px 12px; font-size: 12px; font-weight: 800; color: var(--gold); }
.cta-row.three { grid-template-columns: 1.5fr 1fr 54px; }
.results .cta-row .home-icon { padding: 0; display: grid; place-items: center; }
.home-icon svg { width: 22px; height: 22px; }
.share-preview { width: 100%; max-width: 280px; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #121a42; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.share-preview img { width: 100%; height: 100%; display: block; -webkit-touch-callout: default; user-select: auto; }
.share-loading { height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.share-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-actions:has(> :only-child) { grid-template-columns: 1fr; }
.judge-line-card .tip-text { font-style: normal; }
.tip-ok { margin-left: 4px; padding: 0 2px; font-size: 12px; font-weight: 800; color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
/* Grade sits under each big score (replaces the totals row) */
.race-grade { min-height: 20px; }
.race-grade .grade-chip { font-size: 11.5px; display: inline-block; }
.race-side.loser .race-grade { filter: grayscale(0); }

/* No jump between your turn and the rival's: both panel states share the same row heights */
.controls.live > .timebar { margin-block: 5px; }            /* 14px bar + 10px = the 24px status row */
.controls .zone-status { height: 24px; min-height: 0; }
.controls .bid-sub { min-height: 36px; }

/* ===== Results v5: one number per item, no item crown, bars step aside, bigger rows on tall phones ===== */
.res-item.top { border-color: var(--line); box-shadow: none; }
.res-score { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; line-height: 1.05; }
.res-pct { font-size: 17px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.res-counted { font-style: normal; font-size: 9.5px; font-weight: 700; color: #ffcf5c; white-space: nowrap; }
.res-text { gap: 4px; }
.res-item { min-height: clamp(50px, 7.2cqh, 66px); }
.res-img .item-img { width: clamp(30px, 4.6cqh, 42px) !important; height: clamp(30px, 4.6cqh, 42px) !important; }
.res-name { font-size: 13px; }
.res-name.long { font-size: 12px; }
.results .race-bar { transition: opacity 0.6s 0.4s; }
.results.stage-landed .race-bar, .results.stage-drafts .race-bar { opacity: 0; }

/* ===== Round intro v3: centre stage (ribbon above the item) → fly onto the stand ===== */
.spotlight { gap: 10px; }
.spotlight .spot-label { animation: riseIn 0.3s both; }
.spotlight .spot-ribbon { font-size: 15px; animation: ribbonStamp 0.35s 0.12s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes ribbonStamp { 0% { opacity: 0; transform: scale(1.8); } 100% { opacity: 1; transform: none; } }
.spotlight .spot-name { animation: riseIn 0.35s 0.2s both; }
.spotlight .auto-note { animation: riseIn 0.35s 0.3s both; }
.auction-item.intro .item-stage .item-img { animation: none; }
.auction-item.awaiting .item-stage .item-img { visibility: hidden; }
.theme-game .auction-item.intro .pedestal i:nth-child(2) { animation: none; }
.theme-game .auction-item.intro:not(.awaiting) .pedestal i:nth-child(2) { animation: ringHit 0.5s ease-out both; }
.auction-item.intro .item-glow { animation: breathe 2.4s ease-in-out infinite; }
.auction-item.intro:not(.awaiting) .item-glow { animation: landGlow 0.6s ease-out both, breathe 2.4s 0.6s ease-in-out infinite; }

/* Battle Found: countdown + Start now sit a little higher */
.theme-game .found .countdown { padding-bottom: 46px; }
/* names may take two lines instead of being cut */
.res-name, .res-name.long, .res-name.xlong { font-size: 12.5px; white-space: normal; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; }
.res-pct { font-size: 15.5px; }
.res-name, .res-name.long, .res-name.xlong { overflow-wrap: normal; hyphens: manual; }
.res-counted { font-size: 9px; }
.res-item:has(.res-counted) .res-name { font-size: 12px; letter-spacing: -0.01em; }

/* Stand ring: slow breathing while the item is up; quick flash on every new high bid (gold = you, purple = rival) */
.theme-game .auction-item:not(.intro) .pedestal i:nth-child(2) { animation: ringBreathe 3.2s ease-in-out infinite; }
@keyframes ringBreathe { 0%, 100% { box-shadow: 0 0 12px rgba(255, 200, 61, 0.3); } 50% { box-shadow: 0 0 24px rgba(255, 200, 61, 0.55); border-color: rgba(255, 200, 61, 0.75); } }
.theme-game .auction-item:not(.intro) .pedestal.hit-you i:nth-child(2) { animation: ringFlashYou 0.65s ease-out, ringBreathe 3.2s 0.65s ease-in-out infinite; }
.theme-game .auction-item:not(.intro) .pedestal.hit-opp i:nth-child(2) { animation: ringFlashOpp 0.65s ease-out, ringBreathe 3.2s 0.65s ease-in-out infinite; }
@keyframes ringFlashYou { 0% { transform: translate(-50%, -50%) scale(1); } 35% { transform: translate(-50%, -50%) scale(1.16); border-color: #ffe07a; box-shadow: 0 0 34px rgba(255, 200, 61, 0.95); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes ringFlashOpp { 0% { transform: translate(-50%, -50%) scale(1); } 35% { transform: translate(-50%, -50%) scale(1.16); border-color: #c4b5fd; box-shadow: 0 0 34px rgba(167, 139, 250, 0.95); } 100% { transform: translate(-50%, -50%) scale(1); } }
.theme-game .auction-item.sold .pedestal i:nth-child(2) { animation: none; }
/* Judge face crop: the face (fx, fy) is centred in the round avatar */
.judge-mini img { position: absolute; width: 250%; height: 250%; max-width: none; left: calc(50% - var(--fx, 0.44) * 250%); top: calc(50% - var(--fy, 0.39) * 250%); transform: none; }
.judge-line-card .bot-mini.judge-mini { width: 36px; height: 36px; }

/* ===== The Judge reacts: pops in big when the verdict lands, then shrinks into his avatar ===== */
.results { position: relative; }
.judge-pop { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; z-index: 20; pointer-events: none; filter: drop-shadow(0 0 26px rgba(139, 92, 246, 0.6)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)); animation: judgePopIn 0.4s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes judgePopIn { 0% { opacity: 0; transform: scale(0.3) translateY(40px); } 100% { opacity: 1; transform: none; } }
.judge-pop.mood-shocked { animation: judgePopIn 0.4s cubic-bezier(.3, 1.6, .5, 1) both, judgeJolt 0.5s 0.4s ease-out; }
@keyframes judgeJolt { 0% { transform: none; } 20% { transform: translateY(-16px) scale(1.05); } 40% { transform: translateX(-6px); } 55% { transform: translateX(6px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }
.judge-pop.mood-laughing { animation: judgePopIn 0.4s cubic-bezier(.3, 1.6, .5, 1) both, judgeBounce 0.35s 0.4s ease-in-out 3; }
@keyframes judgeBounce { 50% { transform: translateY(-10px) rotate(-3deg); } }
.judge-pop.mood-impressed { animation: judgePopIn 0.4s cubic-bezier(.3, 1.6, .5, 1) both, judgeSway 0.9s 0.4s ease-in-out; }
@keyframes judgeSway { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.judge-pop.mood-slam { animation: judgePopIn 0.4s cubic-bezier(.3, 1.6, .5, 1) both, judgeSlam 0.4s 0.4s cubic-bezier(.5, 0, .7, 1); }
@keyframes judgeSlam { 0% { transform: none; } 40% { transform: rotate(-10deg) translateY(-8px); } 70% { transform: rotate(4deg) translateY(6px) scale(1.04); } 100% { transform: none; } }

/* His line is a speech bubble pointing at his face */
.theme-game .judge-line-card { background: none; border: 0; padding: 0; gap: 10px; align-items: center; }
.theme-game .judge-line-card p { position: relative; flex: 1; padding: 9px 12px; border-radius: 14px; background: linear-gradient(165deg, #263270, #18204f); border: 1px solid rgba(140, 165, 255, 0.35); box-shadow: 0 4px 0 rgba(5, 4, 20, 0.7); }
.theme-game .judge-line-card p::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg); background: #22306a; border-left: 1px solid rgba(140, 165, 255, 0.35); border-bottom: 1px solid rgba(140, 165, 255, 0.35); }
.theme-game .judge-line-card .bot-mini.judge-mini { width: 40px; height: 40px; box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.8), 0 0 14px rgba(139, 92, 246, 0.6); }

/* Run-through fixes (2026-10-09) */
/* the price line keeps one height whether it shows a bid, "No bids yet" or "got it for $X" — no jump on SOLD */
.auction-item .bid-line, .auction-item .sold-line { margin-top: 6px; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.auction-item .sold-line { animation: riseIn 0.4s 0.3s both; }
/* claw back ~14px so the drafts always fit the screen */
.theme-game .auction-item .item-name { margin-top: 18px; }
.theme-game .controls.live .bid-sub, .theme-game .ghost-controls .bid-sub { margin-top: 2px; }
.theme-game .auction-item .item-stage { padding-bottom: 14px; }
/* free-round panel stays dim behind the centre-stage intro */
.auction:has(.spotlight) .controls:has(.free-zone) { opacity: 0.55; }

/* Battle Found v2: the whole group sits a bit below centre; countdown right under the matchup */
.theme-game .found { justify-content: center; padding-top: 6cqh; padding-bottom: 4cqh; }
.theme-game .found .countdown { margin-top: 28px; padding-bottom: 0; }

/* ===== Stand v3 (2026-10-09): smaller, still ring; the glow behind the item shows who's leading ===== */
.theme-game .pedestal { width: clamp(100px, 23cqh, 200px); height: 40px; bottom: -18px; }
.theme-game .pedestal i:nth-child(2) { width: 100%; height: 100%; border-color: rgba(255, 200, 61, 0.38); background: radial-gradient(ellipse, rgba(255, 200, 61, 0.1), rgba(59, 40, 120, 0.2) 60%, transparent 72%); box-shadow: 0 0 10px rgba(255, 200, 61, 0.22); }
.theme-game .auction-item:not(.intro) .pedestal i:nth-child(2),
.theme-game .auction-item:not(.intro) .pedestal.hit-you i:nth-child(2),
.theme-game .auction-item:not(.intro) .pedestal.hit-opp i:nth-child(2) { animation: none; }
/* leader glow: two colour layers cross-fade; a soft swell each time the bid changes */
.item-glow::before, .item-glow::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity 0.4s; }
.item-glow::before { background: radial-gradient(circle, rgba(255, 200, 61, 0.55), rgba(255, 170, 30, 0.18) 45%, transparent 70%); }
.item-glow::after { background: radial-gradient(circle, rgba(167, 139, 250, 0.6), rgba(124, 58, 237, 0.2) 45%, transparent 70%); }
.item-glow.lead-you::before, .item-glow.lead-opp::after { opacity: 1; }
.auction-item:not(.sold) .item-glow.lead-you, .auction-item:not(.sold) .item-glow.lead-opp { animation: glowSwell 0.7s ease-out, breathe 2.4s 0.7s ease-in-out infinite; }
@keyframes glowSwell { 0% { transform: translate(-50%, -50%) scale(0.85); filter: brightness(1.8); } 100% { transform: translate(-50%, -50%) scale(1); filter: none; } }

/* ===== Centre-stage intro v4: bigger, higher, thump landing ===== */
.spotlight { justify-content: center; padding-bottom: 9cqh; gap: 12px; }
.spotlight .spot-label { font-size: 14px; letter-spacing: 0.12em; font-weight: 800; }
.spot-item { position: relative; display: grid; place-items: center; }
.spotlight .spot-item .item-img { animation: thumpIn 0.32s cubic-bezier(.5, 0, .75, .4) both, thumpSettle 0.3s 0.32s ease-out; }
@keyframes thumpIn { 0% { opacity: 0; transform: translateY(-90px) scale(1.28); } 70% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes thumpSettle { 0% { transform: scale(1.06, 0.9); } 55% { transform: scale(0.98, 1.03); } 100% { transform: none; } }
.spot-burst { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid rgba(255, 200, 61, 0.8); box-shadow: 0 0 30px rgba(255, 200, 61, 0.6); opacity: 0; pointer-events: none; animation: thumpBurst 0.55s 0.28s ease-out both; }
@keyframes thumpBurst { 0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.9); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); } }
.spotlight { animation: fadeIn 0.2s ease-out both, spotKick 0.2s 0.3s ease-out; }
@keyframes spotKick { 30% { transform: translateY(3px); } 100% { transform: none; } }
.spotlight .spot-ribbon { animation: ribbonStamp 0.3s 0.34s cubic-bezier(.3, 1.8, .5, 1) both; }
.spotlight .spot-name { animation: riseIn 0.3s 0.42s both; }
.spotlight .auto-note { animation: riseIn 0.3s 0.5s both; }
.spotlight.leaving .spot-burst { display: none; }
.spot-burst { animation: thumpBurst 0.55s 0.28s ease-out forwards; }
.item-glow::before { background: radial-gradient(circle, rgba(255, 200, 61, 0.75) 30%, rgba(255, 170, 30, 0.28) 52%, transparent 70%); }
.item-glow::after { background: radial-gradient(circle, rgba(167, 139, 250, 0.8) 30%, rgba(124, 58, 237, 0.3) 52%, transparent 70%); }
/* the line under the item has ONE fixed height in every state (bid, no bids, sold, free) */
.auction-item .bid-line, .auction-item .sold-line { height: 34px; min-height: 0; overflow: hidden; }
.auction-item .bid-line:has(.auto-note) { flex-direction: row; }
.theme-game .controls { min-height: 166px; } /* free-round panel = same height as the bid panel, so the item never moves */

/* Intro v5: the item must never fade while flying to the stand (the labels and backdrop do) */
.spotlight.leaving > :not(.item-img):not(.spot-item) { animation: none !important; opacity: 0 !important; transition: opacity 0.2s; }
.spotlight.leaving .spot-item, .spotlight.leaving .spot-item .item-img { opacity: 1 !important; }
.spotlight.leaving { background: transparent; transition: background 0.45s ease-out; }
.spotlight .spot-ribbon { animation: ribbonStamp 0.32s 0.45s cubic-bezier(.3, 1.8, .5, 1) both; }
.spotlight .spot-name { animation: riseIn 0.35s 0.6s both; }
.spotlight .auto-note { animation: riseIn 0.35s 0.75s both; }

/* ===== You = GOLD, rival = PURPLE, everywhere (2026-10-09) ===== */
:root { --you: #ffc83d; --you-soft: rgba(255, 200, 61, 0.14); --opp: #b794ff; --opp-soft: rgba(167, 139, 250, 0.16); }
/* bid screen: the two draft strips */
.theme-game .draft.side-you, .theme-game .draft.side-opp { position: relative; padding-left: 10px; border-radius: 12px; }
.theme-game .draft.side-you { background: linear-gradient(90deg, var(--you-soft), transparent 60%); box-shadow: inset 3px 0 0 var(--you); }
.theme-game .draft.side-opp { background: linear-gradient(90deg, var(--opp-soft), transparent 60%); box-shadow: inset 3px 0 0 var(--opp); }
.theme-game .draft.side-you .draft-head > span:first-child { color: var(--you); }
.theme-game .draft.side-opp .draft-head > span:first-child { color: var(--opp); }
.theme-game .draft-budget.opp { color: rgba(196, 181, 253, 0.8); }
.theme-game .draft.side-you .slot.filled .item-img { box-shadow: 0 0 0 2px var(--you), 0 4px 10px rgba(0, 0, 0, 0.4); }
.theme-game .draft.side-opp .slot.filled .item-img { box-shadow: 0 0 0 2px var(--opp), 0 4px 10px rgba(0, 0, 0, 0.4); }
/* bid screen: price line under the item */
.cur-amount.lead-you { color: var(--you); }
.cur-amount.lead-opp { color: var(--opp); text-shadow: 0 0 14px rgba(167, 139, 250, 0.6); }
.lead-name.lead-you { color: rgba(255, 220, 140, 0.85); }
.lead-name.lead-opp { color: rgba(196, 181, 253, 0.9); }
/* results: my number is always gold, the rival's always purple; the winner is shown by size, glow and crown */
.race-side.side-opp .race-score { color: #d8c8ff; }
.race-side.side-you.winner .race-score { color: var(--you); }
.race-side.side-opp.winner .race-score { color: var(--opp); text-shadow: 0 0 22px rgba(167, 139, 250, 0.85); }
.res-col.col-opp .res-pct { color: var(--opp); }
.res-col.col-you .res-item { box-shadow: inset 3px 0 0 rgba(255, 200, 61, 0.55); }
.res-col.col-opp .res-item { box-shadow: inset -3px 0 0 rgba(167, 139, 250, 0.6); }
/* the Judge's bubble sits a little lower */
.reveal .judge-line-card { margin-top: 14px; }
.progress div { animation-duration: 3.9s; }

/* ===== Community score: say it once, loudly, and tie every number to it with a heart ===== */
.community-head { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; text-align: center; }
.community-head b { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: #ff8fab; }
.community-head .ch-heart { color: #ff4d6d; text-shadow: 0 0 8px rgba(255, 77, 109, 0.7); }
.community-head span:not(.ch-heart) { font-size: 11.5px; color: var(--muted); }
.pct-heart { font-style: normal; font-size: 0.68em; margin-right: 2px; color: #ff4d6d; vertical-align: 0.12em; }
.res-col.col-opp .pct-heart { color: #ff6b8a; }
/* the bar ends in a heart: the fill = how many players love it */
.crowd-meter { position: relative; overflow: visible; }
.crowd-meter i { position: relative; overflow: visible; }
.crowd-meter i::after { content: "❤"; position: absolute; right: -5px; top: 50%; transform: translateY(-52%); font-size: 9px; line-height: 1; color: #ff4d6d; text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); }
.progress div { animation-duration: 3.4s; }
.community-head { flex-wrap: nowrap; gap: 6px; margin: 0 0 4px; white-space: nowrap; }
.community-head b { font-size: 11px; letter-spacing: 0.09em; }
.community-head span:not(.ch-heart) { font-size: 11px; }
.res-pct { font-size: 14px; }
.res-name, .res-name.long, .res-name.xlong { font-size: 12px; }
.res-item { min-height: clamp(48px, 6.8cqh, 62px); padding-top: 4px; padding-bottom: 4px; }
.res-text { gap: 3px; }
.reveal .judge-line-card { margin-top: 8px; }

/* ===== QA tool (testing only): faded tab on the left edge ===== */
.qa-tool { position: absolute; left: 0; top: 46%; z-index: 90; }
.qa-tab { width: 18px; height: 40px; padding: 0; border-radius: 0 8px 8px 0; font-size: 8px; font-weight: 800; letter-spacing: 0.04em; writing-mode: vertical-rl; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-left: 0; opacity: 0.45; }
.qa-tool.open .qa-tab, .qa-tab:hover { opacity: 1; }
.qa-menu { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: rgba(12, 14, 40, 0.96); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); animation: popIn 0.2s both; }
.qa-menu button { white-space: nowrap; text-align: left; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text); background: rgba(255, 255, 255, 0.06); }
.qa-menu button:active { background: rgba(255, 255, 255, 0.14); }
.qa-menu button { display: flex; align-items: center; gap: 8px; }
.qa-menu { animation: fadeIn 0.15s both; }
/* bug: the purple glow behind the rival's price rendered as a square box (glow clipped to the animated number) */
.cur-amount.lead-opp { text-shadow: none; }

/* ===== Quick Battle: topic reel ===== */
.topic-reel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-bottom: 8cqh; }
.reel-label { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.reel-window { --cell: 150px; position: relative; width: 170px; height: calc(var(--cell) * 1.55); overflow: hidden; border-radius: 26px; background: linear-gradient(180deg, #0d1235, #1b2560 50%, #0d1235); border: 3px solid rgba(255, 200, 61, 0.75); box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 200, 61, 0.25), 0 8px 0 #070b24; }
.reel-window::before, .reel-window::after { content: ""; position: absolute; left: 0; right: 0; height: 32%; z-index: 2; pointer-events: none; }
.reel-window::before { top: 0; background: linear-gradient(180deg, #0b0f2e, transparent); }
.reel-window::after { bottom: 0; background: linear-gradient(0deg, #0b0f2e, transparent); }
.reel-strip { position: absolute; left: 0; right: 0; top: calc(var(--cell) * 0.275); animation: reelSpin var(--ms) cubic-bezier(.12, .7, .2, 1) forwards; }
@keyframes reelSpin { from { transform: translateY(0); } to { transform: translateY(calc(var(--cell) * var(--n) * -1)); } }
.reel-cell { height: var(--cell); display: grid; place-items: center; }
.reel-cell .item-img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.topic-reel:not(.locked) .reel-strip { filter: blur(0.6px); }
.topic-reel.locked .reel-window { border-color: #ffe07a; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6), 0 0 44px rgba(255, 200, 61, 0.65), 0 8px 0 #070b24; animation: reelLock 0.35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes reelLock { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.reel-burst { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; border-radius: 50%; transform: translate(-50%, -50%); border: 3px solid rgba(255, 200, 61, 0.9); opacity: 0; z-index: 3; pointer-events: none; }
.topic-reel.locked .reel-burst { animation: thumpBurst 0.55s ease-out forwards; }
.reel-name { min-height: 44px; font-size: 34px; color: #fff; text-shadow: 0 0 18px rgba(255, 200, 61, 0.6), 0 3px 0 rgba(0, 0, 0, 0.4); transform: rotate(-3deg); }
.topic-reel.locked .reel-name { animation: ribbonStamp 0.35s cubic-bezier(.3, 1.8, .5, 1) both; }

/* ===== Battle Found v3: you vs them, split gold / purple ===== */
.vs-split { position: absolute; inset: -40px -18px 0; z-index: -2; pointer-events: none; overflow: hidden; }
.vs-split .half { position: absolute; top: 0; bottom: 0; width: 62%; opacity: 0; animation: fadeIn 0.5s 0.1s forwards; }
.vs-split .half.you { left: 0; clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%); background: linear-gradient(160deg, rgba(255, 170, 30, 0.42), rgba(255, 140, 0, 0.12) 45%, transparent 75%); }
.vs-split .half.opp { right: 0; clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(200deg, rgba(139, 92, 246, 0.5), rgba(124, 58, 237, 0.14) 45%, transparent 75%); }
.vs-split .half.you { animation: fadeIn 0.5s 0.1s forwards, slideFromL 0.45s 0.05s cubic-bezier(.2, .9, .3, 1) both; }
.vs-split .half.opp { animation: fadeIn 0.5s 0.1s forwards, slideFromR 0.45s 0.05s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes slideFromL { from { transform: translateX(-40%); } to { transform: none; } }
@keyframes slideFromR { from { transform: translateX(40%); } to { transform: none; } }
.vs-side .plate { display: inline-block; max-width: 140px; padding: 4px 14px; font-size: 14px; font-weight: 800; transform: skewX(-12deg); border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-side .plate.you { color: #2a1700; background: linear-gradient(90deg, #f59e0b, #ffd25a); box-shadow: 0 0 16px rgba(255, 190, 40, 0.5); }
.vs-side .plate.opp { color: #fff; background: linear-gradient(90deg, #7c3aed, #a78bfa); box-shadow: 0 0 16px rgba(139, 92, 246, 0.6); }

/* ===== Results v6: one number per item, winner's column framed, XP bar ===== */
.res-col { border-radius: 16px; padding: 4px; transition: box-shadow 0.4s, background 0.4s; display: flex; flex-direction: column; gap: 6px; }
.res-col.col-winner.col-you { background: rgba(255, 200, 61, 0.07); box-shadow: 0 0 0 2px rgba(255, 200, 61, 0.85), 0 0 22px rgba(255, 200, 61, 0.3); }
.res-col.col-winner.col-opp { background: rgba(167, 139, 250, 0.08); box-shadow: 0 0 0 2px rgba(183, 148, 255, 0.85), 0 0 22px rgba(139, 92, 246, 0.35); }
.res-col.col-you .res-item, .res-col.col-opp .res-item { box-shadow: none; }
.res-cols { gap: 8px; }
.res-pct { font-size: 17px; }
.res-counted { font-size: 10px; font-weight: 800; color: #ffcf5c; }
.res-text { justify-content: center; }
.xp-row { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 300px; margin: 2px auto 0; font-size: 11.5px; font-weight: 800; }
.xp-level { color: var(--text); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.xp-up { color: #34e58c; font-size: 10.5px; letter-spacing: 0.06em; animation: pulse 0.9s 3; }
.xp-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.xp-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #34d399, #a3e635); box-shadow: 0 0 10px rgba(52, 229, 140, 0.6); transition: width 1s cubic-bezier(.3, .8, .3, 1); }
.xp-gain { color: #6ee7a8; white-space: nowrap; }

/* ===== Intro v6: header first (round + ribbon as one unit), then the item thumps in under it, then the name ===== */
.spotlight .spot-label { animation: headerIn 0.3s cubic-bezier(.2, .9, .3, 1) both; }
.spotlight .spot-ribbon { animation: ribbonStamp 0.3s 0.1s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes headerIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.spotlight .spot-item .item-img { animation: thumpIn 0.32s 0.3s cubic-bezier(.5, 0, .75, .4) both, thumpSettle 0.3s 0.62s ease-out; }
.spot-burst { animation: thumpBurst 0.55s 0.58s ease-out forwards; }
.spotlight { animation: fadeIn 0.2s ease-out both, spotKick 0.2s 0.6s ease-out; }
.spotlight .spot-name { animation: riseIn 0.32s 0.75s both; }
.spotlight .auto-note { animation: riseIn 0.32s 0.9s both; }

/* ===== Welcome: loading bar instead of "Let's Go" ===== */
.welcome .bottom-cta.loader { flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.load-bar { width: 220px; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 200, 61, 0.35); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); }
.load-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--gold2), #ffe07a); box-shadow: 0 0 12px rgba(255, 200, 61, 0.7); }
.welcome.ready .load-bar i { animation: loadFill 2.4s 1.45s cubic-bezier(.35, .1, .25, 1) forwards; }
@keyframes loadFill { 0% { width: 0; } 40% { width: 46%; } 70% { width: 72%; } 100% { width: 100%; } }
.load-line { font-size: 12px; font-weight: 700; color: var(--muted); animation: fadeIn 0.3s both; }
.found .rules { flex-wrap: nowrap; gap: 6px; } .found .rules span { padding: 5px 9px; font-size: 11.5px; white-space: nowrap; }
/* Results v6 fit: more room for names, less height */
.res-col { padding: 3px; gap: 5px; }
.res-pct { font-size: 14.5px; }
.res-img .item-img { width: clamp(28px, 4.2cqh, 40px) !important; height: clamp(28px, 4.2cqh, 40px) !important; }
.res-item { gap: 6px; padding: 4px 6px 4px 4px; min-height: clamp(44px, 6.2cqh, 58px); }
.res-name, .res-name.long, .res-name.xlong { font-size: 11.5px; letter-spacing: -0.01em; }
.xp-row { margin: 0 auto 2px; }
.community-head { margin: 4px 0 4px; }
.verdict-slot { gap: 4px; }

/* Quick Battle reel rolls downward */
.reel-strip { top: auto; bottom: calc(var(--cell) * 0.275); animation: reelSpinDown var(--ms) cubic-bezier(.15, .65, .2, 1) forwards; }
@keyframes reelSpinDown { from { transform: translateY(calc(var(--cell) * var(--n))); } to { transform: translateY(0); } }

/* ===== Loader v2: gold bar with moving stripes, a light sweep and a crown riding the tip ===== */
.load-bar { position: relative; width: 236px; height: 14px; overflow: visible; border-radius: 99px; background: rgba(8, 10, 34, 0.7); border: 1px solid rgba(255, 200, 61, 0.45); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 18px rgba(139, 92, 246, 0.25); }
.load-bar i { position: relative; overflow: visible; background: repeating-linear-gradient(-45deg, #ffd25a 0 8px, #f5a524 8px 16px); background-size: 22.6px 22.6px; animation: loadFill 2.4s 1.45s cubic-bezier(.35, .1, .25, 1) forwards, stripes 0.6s linear infinite; }
.welcome.ready .load-bar i { animation: loadFill 2.4s 1.45s cubic-bezier(.35, .1, .25, 1) forwards, stripes 0.6s linear infinite; }
@keyframes stripes { to { background-position: 22.6px 0; } }
.load-bar i::after { content: ""; position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); background-size: 60px 100%; background-repeat: no-repeat; animation: sweep 1.2s ease-in-out infinite; }
@keyframes sweep { from { background-position: -60px 0; } to { background-position: 260px 0; } }
.load-crown { position: absolute; right: -10px; top: 50%; transform: translateY(-62%); font-size: 18px; line-height: 0; filter: drop-shadow(0 0 6px rgba(255, 200, 61, 0.9)); }
.load-line { font-size: 11.5px; font-weight: 600; color: rgba(190, 196, 230, 0.6); max-width: 280px; text-align: center; line-height: 1.35; min-height: 32px; }
.load-crown { font-size: 24px; right: -13px; transform: translateY(-78%); }
/* reel: anchored at the top, starts scrolled up (last cell showing) and rolls DOWN to the chosen topic (first cell) */
.reel-strip { top: calc(var(--cell) * 0.275); bottom: auto; animation: reelRollDown var(--ms) cubic-bezier(.15, .65, .2, 1) forwards; }
@keyframes reelRollDown { from { transform: translateY(calc(var(--cell) * var(--n) * -1)); } to { transform: translateY(0); } }

/* Loader: +1s */
.welcome.ready .load-bar i { animation: loadFill 3.4s 1.45s cubic-bezier(.35, .1, .25, 1) forwards, stripes 0.6s linear infinite; }

/* ===== Quick Battle: jackpot moment + smooth hand-off to matchmaking ===== */
.theme-game.mood-stage:has(.topic-reel) { background: radial-gradient(120% 45% at 50% 0%, rgba(124, 58, 237, 0.32), transparent 70%), radial-gradient(110% 60% at 50% 55%, rgba(37, 99, 235, 0.22), transparent 70%), linear-gradient(180deg, #16214f, #111a42 45%, #0c1333); }
.topic-reel { position: relative; }
.reel-rays { position: absolute; left: 50%; top: 46%; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: 0; pointer-events: none; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 200, 61, 0.2) 0 6deg, transparent 6deg 20deg); mask-image: radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%); animation: raysIn 0.5s ease-out both, spinSlow 14s linear infinite; }
@keyframes raysIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes spinSlow { to { rotate: 360deg; } }
.topic-reel > *:not(.reel-rays):not(.reel-sparks) { position: relative; z-index: 1; }
.reel-sparks { position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 2; pointer-events: none; }
.reel-sparks i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ffe07a; box-shadow: 0 0 10px #ffc83d; transform: rotate(var(--a)) translateY(0); animation: sparkOut 0.75s ease-out forwards; }
.reel-sparks i:nth-child(3n) { background: #c4b5fd; box-shadow: 0 0 10px #a78bfa; width: 6px; height: 6px; }
@keyframes sparkOut { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1 - 60px)); } }
.topic-reel.locked .reel-name { font-size: 40px; color: #ffe07a; text-shadow: 0 0 22px rgba(255, 200, 61, 0.8), 0 3px 0 rgba(0, 0, 0, 0.45); }
.topic-reel.locked .reel-window { animation: reelLock 0.45s cubic-bezier(.3, 1.6, .5, 1), lockGlow 1.2s 0.45s ease-in-out infinite; }
@keyframes lockGlow { 50% { box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 200, 61, 0.85), 0 8px 0 #070b24; } }
/* hand-off: the reel shrinks up and out, the search screen opens with the same topic as a chip */
.topic-reel.leaving { animation: reelLeave 0.35s ease-in forwards; }
@keyframes reelLeave { to { opacity: 0; transform: translateY(-60px) scale(0.6); } }
.search-topic { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(255, 200, 61, 0.1); border: 1px solid rgba(255, 200, 61, 0.45); margin-bottom: 18px; animation: chipDrop 0.4s cubic-bezier(.3, 1.4, .5, 1) both; }
.search-topic b { font-size: 15px; color: var(--gold); }
@keyframes chipDrop { from { opacity: 0; transform: translateY(-30px) scale(1.3); } to { opacity: 1; transform: none; } }
/* reel: neighbours peek in above and below; ends with the chosen topic centred */
@keyframes reelRollDown { from { transform: translateY(calc(var(--cell) * var(--n) * -1)); } to { transform: translateY(calc(var(--cell) * -1)); } }
/* matchmaking after a spin: the topic chip sits higher, with room before the radar */
.search-topic { margin-bottom: 48px; margin-top: -40px; }

/* Matchmaking v2: the radar sits in the middle of the screen; the topic chip floats above it */
.searching { position: relative; justify-content: center; padding-bottom: 6cqh; }
.search-topic { position: absolute; top: max(4px, calc(50% - 6cqh - 200px)); left: 50%; translate: -50% 0; margin: 0; }
.search-topic { white-space: nowrap; top: max(4px, calc(50% - 6cqh - 225px)); }

/* screens fade in without sliding (the 10px rise read as the content "jumping up") */
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }
/* the topic name has a fixed height so the reel doesn't shift when it locks */
.reel-name { height: 56px; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* loader: 0.3s shorter */
.welcome.ready .load-bar i { animation: loadFill 3.1s 1.45s cubic-bezier(.35, .1, .25, 1) forwards, stripes 0.6s linear infinite; }

/* ===== LEGENDARY (95%+ of the perfect draft): rainbow foil, not gold ===== */
:root { --rainbow: linear-gradient(90deg, #ff5f8f, #ffb347, #fff176, #6ee7a8, #60a5fa, #c084fc, #ff5f8f); }
.grade-chip.g-Ap { color: #241133; border: 0; background: var(--rainbow); background-size: 200% 100%; animation: foil 2.4s linear infinite; box-shadow: 0 0 12px rgba(255, 255, 255, 0.35); }
@keyframes foil { to { background-position: 200% 0; } }
.legend-flash { position: absolute; inset: 0; z-index: 25; pointer-events: none; background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.6), transparent 55%); animation: legendFlash 0.7s ease-out forwards; }
@keyframes legendFlash { from { opacity: 1; } to { opacity: 0; } }
.legend-stamp { position: absolute; left: 50%; top: 40%; z-index: 26; pointer-events: none; font-size: 50px; padding: 2px 14px; white-space: nowrap; color: transparent; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)) drop-shadow(0 3px 0 #000); animation: legendStamp 1.4s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.legend-stamp::before { content: ""; position: absolute; inset: -4px -6px; border-radius: 12px; border: 4px solid transparent; background: linear-gradient(rgba(10, 8, 30, 0.75), rgba(10, 8, 30, 0.75)) padding-box, var(--rainbow) border-box; z-index: -1; }
@keyframes legendStamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scale(2.6); } 22% { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(1); } 75% { opacity: 1; transform: translate(-50%, -50%) rotate(-10deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scale(0.9); } }
.results:has(.legend-stamp) { animation: legendShake 0.35s 0.05s; }
@keyframes legendShake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }
.verdict-title.legendary { color: transparent; background: var(--rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35)); animation: foil 3s linear infinite; }
.res-col.col-legend.col-winner { box-shadow: none; background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) padding-box, var(--rainbow) border-box; border: 2px solid transparent; }
.share-btn.glow { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 16px rgba(196, 181, 253, 0.8), 0 6px 0 #070b24 !important; animation: pulse 1.4s infinite; }
.crown-shower { position: absolute; inset: 0; z-index: 22; pointer-events: none; overflow: hidden; }
.crown-shower i { position: absolute; top: -40px; font-style: normal; line-height: 0; animation: crownFall linear forwards; }
@keyframes crownFall { from { transform: translateY(0) rotate(var(--r)); opacity: 1; } 85% { opacity: 1; } to { transform: translateY(900px) rotate(calc(var(--r) * -1)); opacity: 0; } }
.pop-say { position: absolute; left: 50%; top: calc(50% + 100px); z-index: 21; translate: -50% 0; max-width: 78%; padding: 7px 12px; border-radius: 12px; text-align: center; font-size: 13px; font-style: italic; background: #263270; border: 1px solid rgba(140, 165, 255, 0.4); animation: riseIn 0.3s 0.2s both; }
.legend-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 99px; color: #241133; background: var(--rainbow); background-size: 200% 100%; animation: foil 2.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .grade-chip.g-Ap, .legend-badge, .verdict-title.legendary { animation: none; } }

/* First ¾ freebie: the Judge explains it in the bid panel */
.free-zone.first-quarter { gap: 10px; }
.judge-explains { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; animation: riseIn 0.35s 0.5s both; }
.judge-explains .bot-mini.judge-mini { width: 40px; height: 40px; flex: none; box-shadow: 0 0 0 2px rgba(196, 181, 253, 0.85), 0 0 14px rgba(139, 92, 246, 0.6); }
.judge-explains p { margin: 0; flex: 1; padding: 8px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; background: #263270; border: 1px solid rgba(140, 165, 255, 0.4); }
.judge-explains b { color: var(--gold); }
.free-zone.first-quarter .free-chip { animation: popIn 0.3s 0.8s both; }
.legend-stamp::before { content: none; }
.legend-stamp-box { position: absolute; left: 50%; top: 40%; z-index: 25; width: 300px; height: 76px; pointer-events: none; border-radius: 14px; border: 4px solid transparent; background: linear-gradient(rgba(10, 8, 30, 0.78), rgba(10, 8, 30, 0.78)) padding-box, var(--rainbow) border-box; animation: legendStamp 1.4s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.results .verdict-slot { flex-shrink: 0; } .results .streak { padding: 3px 10px; font-size: 11.5px; margin-top: 2px; }

/* Topic chip on the bid screen (2026-10-10): keeps the topic in view so items read in context */
.round-bar .topic-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 46%; flex-shrink: 1; padding: 0 8px 0 1px; height: 18px; line-height: 16px; margin-block: -1px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 200, 61, 0.35); font-size: 12px; }
.round-bar .topic-chip .item-img { box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.6); }
.round-bar .topic-chip b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.round-bar > span:not(.topic-chip) { white-space: nowrap; }
.round-bar .segments { min-width: 0; flex: 1; }

/* Sizes follow the phone frame, not the browser window (2026-10-10): on a Mac the frame is shorter than the
   window, so vh-based art pushed the drafts into the rounded bottom corner. All in-game "vh" are now "cqh". */
.device { container-type: size; }
/* Item art takes what's left: shrinks faster on short frames (262px at 860 tall, ≈216 at 760, ≈156 at 660, never under 84px). */
.theme-game .auction-item .item-stage .item-img { width: clamp(84px, calc(60cqh - 240px), 262px) !important; height: clamp(84px, calc(60cqh - 240px), 262px) !important; }
.theme-game .auction-item .item-glow { width: clamp(160px, calc(60cqh - 150px), 360px); height: clamp(160px, calc(60cqh - 150px), 360px); }
/* Very short frames (small Mac windows, iPhone SE in Safari): tighten everything around the art. */
@container (max-height: 640px) {
  .auction { gap: 5px; padding-top: 0; }
  .auction-item { padding: 6px 10px; }
  .theme-game .pedestal { display: none; }
  .item-name { font-size: 19px; margin-top: 4px; }
  .controls { padding: 8px 10px; gap: 6px; }
  .bid-main .raise { padding: 10px; }
  .step { width: 40px; height: 40px; }
  .quick { padding: 6px 10px; }
  .slot { width: 38px; height: 38px; }
  .draft + .draft { padding-top: 4px; }
  .topbar { padding-top: 8px; padding-bottom: 2px; }
}
/* Results vertical balance (2026-10-10): the fixed 48px top padding (from "sit a bit lower", 10-08) pushed everything
   down on shorter frames. Now a small fixed top space + any spare height split evenly above the scores and above the buttons. */
.results .race { padding-top: 14px; margin-top: 0; } /* 2026-10-10 v2: content anchored to the top; spare height goes to the rows, then above the buttons */
.results .cta-row { margin-top: auto; }
/* Results on short frames (≤720 tall: small Mac windows, short phones): same content, tighter. */
@container (max-height: 720px) {
  .results { gap: 6px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .results .race { padding-top: 10px; }
  .race-score { font-size: 38px; }
  .results .verdict-slot { transform: scale(0.88); margin-block: -4px; }
  .res-item { min-height: 40px; }
}
@container (max-height: 640px) {
  .race-score { font-size: 32px; }
  .results .race { padding-top: 4px; }
  .res-item { min-height: 36px; }
  .results .judge-line-card { font-size: 12px; }
}
/* Long words carry soft hyphens (softHyphens in screens.js), so "Teleportation" breaks onto the 2nd line instead of being cut off. */
.res-name.xxlong, .res-item:has(.res-counted) .res-name.xxlong { font-size: 10.5px; letter-spacing: -0.01em; line-height: 1.08; -webkit-line-clamp: 3; } /* 20+ chars, e.g. "Hot Air Balloon Ride": 2 lines, nothing hidden */
/* Battle Found on short frames (stopgap until the Quick Start redesign): smaller title and avatars, less air. */
@container (max-height: 720px) {
  .theme-game .found { padding-top: 1cqh; padding-bottom: 1cqh; }
  .found h1.slam { font-size: 40px; margin-bottom: 4px; }
  .versus { margin-bottom: 12px; }
  .versus .avatar { transform: scale(0.82); }
  .theme-game .found .countdown { margin-top: 12px; }
  .count-num { font-size: 48px; }
}
@container (max-height: 640px) {
  .found h1.slam { font-size: 34px; }
  .versus .avatar { transform: scale(0.7); margin-block: -10px; }
  .match-topic { padding-block: 8px; }
}

/* ===== Quick Start v2: one continuous screen (storyboard 2, approved 2026-10-10) ===== */
.qs { gap: 10px; padding-top: 6px; isolation: isolate; }
.qs-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.qs-glow i { position: absolute; top: 38%; width: 70%; height: 40%; border-radius: 50%; filter: blur(30px); opacity: 0; transition: opacity 0.8s; }
.qs-glow .g-you { left: -18%; background: rgba(255, 200, 61, 0.16); }
.qs-glow .g-opp { right: -18%; background: rgba(167, 139, 250, 0.22); }
.qs:has(.qs-found) .qs-glow i { opacity: 1; }
.qs > .back { align-self: flex-start; }
.qs-topic { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255, 200, 61, 0.45); box-shadow: 0 0 22px rgba(255, 200, 61, 0.12); }
.qs-topic .topic-name { font-weight: 800; font-size: 18px; }
.qs-basics { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.qs-topic.docked { animation: qsDock 0.6s cubic-bezier(.2, .9, .3, 1) both; }
.qs-topic.fade { animation: qsFade 0.4s both; }
@keyframes qsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qsDock { from { opacity: 0; transform: translateY(150px) scale(1.5); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.qs-peek { display: flex; justify-content: center; align-items: center; gap: 8px; }
.qs-peek > * { animation: qsFade 0.35s both; }
.qs-peek em { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 600; }
.qs-mid { align-self: stretch; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 4cqh; }
.qs-search { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qs-search .finding-title { font-size: 30px; margin-top: 6px; }
.qs-found { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.qs-title { font-size: 30px; color: var(--gold); text-shadow: 0 0 16px rgba(255, 200, 61, 0.55); transform: rotate(-3deg); animation: qsFade 0.3s both; }
.qs-vs { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 18px; background: rgba(10, 12, 40, 0.55); border: 1px solid rgba(160, 140, 255, 0.22); animation: qsSlide 0.45s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes qsSlide { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: none; } }
.qs-side { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.qs-side b { font-size: 14px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-side.you b { color: var(--gold); }
.qs-side.opp b { color: #c4b5fd; }
.qs-vs .vs { font-size: 30px; color: #fff; }
.qs-count { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: qsFade 0.3s both; }
.qs-count.waiting { visibility: hidden; }
.qs-count .count-num { font-size: 56px; }
.qs.going .qs-topic { animation: qsGo 0.28s ease-in both; }
.qs.going .qs-mid, .qs.going .qs-peek { opacity: 0; transition: opacity 0.2s; }
@keyframes qsGo { to { opacity: 0; transform: translate(-28%, -14px) scale(0.55); } }
@container (max-height: 680px) {
  .qs { gap: 6px; }
  .qs-topic { padding-block: 7px; }
  .qs-search .radar { padding: 26px; }
  .qs-found { gap: 8px; }
  .qs-count .count-num { font-size: 44px; }
}

/* ===== Legendary, toned down (storyboard 2, approved 2026-10-10) ===== */
.verdict-title.legendary.thump { animation: legendThump 0.55s cubic-bezier(.3, 1.6, .5, 1) both, foil 3s linear 0.55s 1; }
@keyframes legendThump { 0% { opacity: 0; transform: rotate(-4deg) scale(1.7); } 60% { opacity: 1; transform: rotate(-4deg) scale(0.95); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }
.res-col.col-legend.col-winner { box-shadow: none; background: linear-gradient(#141a45, #141a45) padding-box, var(--rainbow) border-box; border: 1px solid transparent; padding: 3px; }
.share-btn.glow { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 0 #070b24 !important; animation: shareShimmer 3.2s ease-in-out infinite; }
@keyframes shareShimmer { 50% { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.65), 0 0 10px rgba(196, 181, 253, 0.45), 0 6px 0 #070b24; } }
.crown-shower i { opacity: 0.8; }

/* XP row: this match's XP is its own lighter segment; the streak is a small chip at the end (was its own row). */
.xp-bar { position: relative; }
.xp-bar i { position: absolute; top: 0; bottom: 0; }
.xp-bar i.xp-base { left: 0; background: linear-gradient(90deg, #22a06b, #34d399); box-shadow: none; transition: none; }
.xp-bar i.xp-new { background: #bbf7d0; box-shadow: 0 0 8px rgba(187, 247, 208, 0.9); border-radius: 0 99px 99px 0; transition: width 0.9s cubic-bezier(.3, .8, .3, 1); }
.xp-bar i.xp-base[style*="width: 0%"] + i.xp-new { border-radius: 99px; }
.xp-row { max-width: 340px; }
.streak-chip { flex: none; white-space: nowrap; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 99px; color: #fde68a; border: 1px solid rgba(253, 230, 138, 0.5); background: rgba(253, 230, 138, 0.08); animation: qsFade 0.4s 0.5s both; }
.streak-chip.hot { color: #fdba74; border-color: rgba(253, 186, 116, 0.55); }
.streak-chip.fire { color: #fca5a5; border-color: rgba(252, 165, 165, 0.6); }

/* Tall frames: item rows grow a little instead of leaving a hole (Results). Short frames keep the compact rules above. */
@container (min-height: 721px) {
  .res-item { min-height: clamp(44px, calc(8cqh - 10px), 66px); }
  .res-img .item-img { width: clamp(30px, calc(5cqh - 6px), 40px) !important; height: clamp(30px, calc(5cqh - 6px), 40px) !important; }
  .results .race { padding-top: clamp(14px, calc(4cqh - 12px), 26px); }
}

/* Quick Start v2.1 (Ben 2026-10-10): the topic card and the matchmaking sit together as one centered group, so the eye
   stays in the middle; the search/VS area keeps a fixed height so nothing jumps when the rival is found. */
.qs { justify-content: center; }
.qs > .back { position: absolute; top: 6px; left: 18px; z-index: 2; }
.qs-topic { align-self: center; max-width: 100%; padding-right: 18px; }
.qs-mid { flex: none; min-height: 340px; justify-content: center; padding-bottom: 0; }
.qs-search .radar { padding: 30px; }
@keyframes qsDock { from { opacity: 0; transform: translateY(40px) scale(1.4); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@container (max-height: 680px) { .qs-mid { min-height: 290px; } }

/* ===== Results v3 (Ben 2026-10-10): rewards fly into the header; no XP row, no Perfect Draft line ===== */
.reward-row { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 30px; }
.reward-row .reward { margin: 0; }
.results .verdict-row { transition: transform 0.5s ease; }
.results.stage-drafts .verdict-row { transform: scale(0.9); }
.race-grade { position: relative; }
button.grade-chip { font-family: inherit; cursor: pointer; }
.chip-info { position: absolute; top: calc(100% + 6px); z-index: 30; width: 210px; padding: 8px 10px; border-radius: 12px; font-size: 11.5px; line-height: 1.35; font-weight: 600; color: var(--text); background: #1b2257; border: 1px solid rgba(255, 200, 61, 0.45); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); animation: qsFade 0.2s both; }
.chip-info b { display: block; color: var(--gold); margin-bottom: 2px; }
.chip-info.you { left: 0; }
.chip-info.opp { right: 0; }
/* Spare height: about 1/3 above the scores, 2/3 above the buttons (Ben: "everything should go down just a bit") */
.results .race { padding-top: 14px; }
.res-spacer { flex: 1 1 0; min-height: 0; }
.res-spacer.top { max-height: 80px; }
.res-spacer.bottom { flex-grow: 2; }
.results .cta-row { margin-top: 0; }

/* Header receives the rewards */
.level-chip { position: relative; }
.level-bar div { transition: width 0.8s cubic-bezier(.3, .8, .3, 1); }
.hdr-streak { margin-left: 5px; font-size: 10px; color: #fde68a; font-weight: 800; }
.pill.crowns.bump { animation: crownBump 0.6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes crownBump { 40% { transform: scale(1.14); box-shadow: 0 0 18px rgba(255, 200, 61, 0.8); } }
.level-chip.lvl-up { animation: crownBump 0.7s cubic-bezier(.3, 1.6, .5, 1); box-shadow: 0 0 0 1.5px #34e58c, 0 0 18px rgba(52, 229, 140, 0.6); }
.lvl-flash { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; color: #34e58c; text-shadow: 0 0 8px rgba(52, 229, 140, 0.7); animation: lvlFlash 1.6s ease both; z-index: 40; pointer-events: none; }
@keyframes lvlFlash { 0% { opacity: 0; transform: translate(-50%, -4px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.level-bar div.snap { transition: none; }
/* Reward chips float under the verdict (no row of their own), so nothing jumps when they fly to the header. */
.results .verdict-slot { position: relative; }
.reward-row { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 12; min-height: 0; pointer-events: none; }

/* Quick Start v2.2 (Ben 2026-10-10): the "found" beat gets the split-screen energy back — gold/purple split, burst,
   "Battle Found!" slam, avatars sliding in with crowns — inside the centered one-screen flow (topic card stays above). */
.qs .vs-split { inset: 0; z-index: -1; }
.qs-found { position: relative; gap: 10px; }
.qs-found .burst { top: 52%; width: 460px; height: 460px; z-index: -1; }
.qs-slam { font-size: 44px; margin: 4px 0 2px; white-space: nowrap; }
.qs-found .versus { margin-bottom: 4px; gap: 14px; }
.qs-found .vs-side { width: 130px; }
.qs-found .vs-side .plate { max-width: 130px; }
.qs:has(.qs-found) .qs-glow i { opacity: 0; }
.qs-topic { position: relative; z-index: 1; }
@container (max-height: 680px) {
  .qs-slam { font-size: 36px; }
  .qs-found .versus .avatar { transform: scale(0.85); }
}

/* ===== Results v4 (Ben 2026-10-10): verdict at the top (82-0 style), straight; one beat at a time ===== */
.results .verdict-slot { min-height: 46px; margin: 4px 0 0; justify-content: center; }
.results .verdict-row { flex-wrap: nowrap; gap: 10px; transform: none !important; }
.results .verdict-title { font-size: 34px; transform: none; animation: verdictIn 0.45s cubic-bezier(.2, 1.5, .4, 1) both; white-space: nowrap; }
@keyframes verdictIn { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }
@keyframes legendThump { 0% { opacity: 0; transform: scale(1.6); } 60% { opacity: 1; transform: scale(0.96); } 100% { opacity: 1; transform: none; } }
.results .counting { min-height: 46px; display: grid; place-items: center; }
.results .race { padding-top: 6px; }
.reward-in { flex: none; animation: qsFade 0.35s 0.5s both; }
/* grade chips pop just after the verdict */
.results .race-grade .grade-chip { animation: popIn 0.35s 0.35s both; }
/* the Judge's line slides in on its own beat, after the drafts */
.results .judge-line-card { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.2, 1.2, .4, 1); }
.results .judge-line-card.judge-in { opacity: 1; transform: none; }
.hdr-streak { display: inline-block; animation: popIn 0.4s cubic-bezier(.2, 1.6, .4, 1) both; }
@container (max-height: 720px) {
  .results .verdict-slot, .results .counting { min-height: 38px; }
  .results .verdict-title { font-size: 28px; }
}
.qs-found .versus { margin-top: 36px; }
@container (max-height: 680px) { .qs-found .versus { margin-top: 30px; } .qs-found { gap: 6px; } }
.results .race { padding-top: 22px; } /* room for the winner's crown under the verdict */
@container (max-height: 720px) { .results .race { padding-top: 18px; } }

/* Home (Ben 2026-10-10): on taller screens everything from the banner down sits a bit lower and breathes more,
   instead of leaving empty space at the bottom. Short screens are unchanged. */
@container (min-height: 845px) {
  .home:not(:has(> .back)) { padding-top: clamp(6px, calc(4cqh - 12px), 26px); gap: clamp(12px, calc(3.4cqh - 10px), 22px); } /* trimmed a touch (Ben) */
  .home:not(:has(> .back)) .cat-grid { gap: clamp(10px, calc(2.5cqh - 4px), 20px); }
}

/* Results v5 (Ben 2026-10-10): verdict centered on its own; "+40 👑" pops in the open space between the two scores
   (after the Judge's line), then flies up into the header. Less empty space at the top. */
.results .race { position: relative; }
.reward-pop { position: absolute; left: 50%; top: 58%; z-index: 12; translate: -50% -50%; margin: 0; white-space: nowrap; font-size: 15px; padding: 6px 12px; box-shadow: 0 0 18px rgba(255, 200, 61, 0.55); animation: rewardPop 0.45s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes rewardPop { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
.res-spacer.top { max-height: 16px; }
.results .verdict-slot { margin-top: 0; }

/* Header v2 (Ben 2026-10-10, option A): level + Crowns are ONE unit — avatar, "Lvl N 🔥n", the level bar, and the
   Crowns total at the end of the same pill. Rewards fly into it; the number and the bar move together. */
.prog-chip { position: relative; display: flex; align-items: center; gap: 7px; padding: 3px 4px 3px 3px; border-radius: 99px; border: 1.5px solid rgba(255, 200, 61, 0.55); background: linear-gradient(180deg, #221a52, #120e33); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 3px 0 rgba(0, 0, 0, 0.5); }
.prog-chip .level-text { min-width: 64px; }
.prog-chip .level-text b { font-size: 12px; white-space: nowrap; }
.prog-chip .level-bar { height: 6px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.prog-crowns { display: flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; border-radius: 99px; color: var(--gold); background: linear-gradient(180deg, #2a1f08, #120c02); border: 1px solid rgba(255, 200, 61, 0.45); font-size: 14px; }
.prog-crowns .crown-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--gold) 50%, var(--gold2)); font-size: 12px; box-shadow: 0 0 8px rgba(255, 200, 61, 0.55); }
.prog-chip.bump .prog-crowns, .prog-chip.lvl-up .prog-crowns { animation: crownBump 0.6s cubic-bezier(.3, 1.6, .5, 1); }
.prog-chip.lvl-up { box-shadow: 0 0 0 1.5px #34e58c, 0 0 18px rgba(52, 229, 140, 0.6); }

/* Matchmaking: the centered group sits a touch higher (Ben 2026-10-10) */
.qs { padding-bottom: calc(20px + 3cqh); }
.qs-topic { margin-bottom: 6px; }
/* Reel: the topic name stays on ONE line (a 2-line name spilled up over the spinner) — long names get smaller. */
.reel-name { white-space: nowrap; max-width: 100%; }
.topic-reel.locked .reel-name.long { font-size: 30px; }
.topic-reel.locked .reel-name.xlong { font-size: 25px; }

/* Home: Categories sit closer to the hot topics (Ben 2026-10-10, Mac frame) */
.home .hot-row + * { margin-top: -10px; }
@container (min-height: 845px) { .home .hot-row + * { margin-top: -14px; } }

/* Matchmaking: the search sits right under the topic card (top-aligned, so the card still never moves),
   and the whole group sits a bit higher. Same for Battle Found. */
.qs-mid { justify-content: flex-start; padding-top: 14px; }
.qs { padding-bottom: calc(44px + 6cqh); }
.qs-found .vs-side { width: 136px; }
.qs-found .vs-side .plate { max-width: 136px; padding: 4px 10px; font-size: 13px; }

/* Bid screen fixes (Ben 2026-10-10) */
/* The draft slot only shows the item once the flying copy has arrived (no double image), and glows in the winner's color. */
.landing { opacity: 0; animation: land 0.3s var(--land-at, 1.5s) cubic-bezier(.2, 1.8, .4, 1) forwards; }
.side-opp .landing { animation-name: landOpp; }
@keyframes landOpp { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 2px #a78bfa, 0 0 18px rgba(167, 139, 250, 0.8); } }
@keyframes land { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255, 200, 61, 0.8); } }
/* FREE! lands a beat after the item */
.sold-stamp.free { animation-delay: 0.45s; }
/* The item sits a touch lower, closer to its stand, and its glow scales with the art, so the glow is never cut at the top of the card. */
.theme-game .auction-item .item-stage { margin-top: 10px; padding-bottom: 6px; }
.theme-game .pedestal { bottom: -18px; }
.theme-game .auction-item .item-glow { width: clamp(130px, calc(78cqh - 312px), 340px); height: clamp(130px, calc(78cqh - 312px), 340px); }

/* Rival Found (Ben 2026-10-10): title first, the two players slide in ~0.45s later, then VS */
.qs-found .slide-l, .qs-found .slide-r { animation-delay: 0.6s; }
.qs-found .vs { animation-delay: 0.95s; }
/* Results: everything under the title sits a few px closer to it */
.results .verdict-slot, .results .counting { min-height: 40px; }
.results .race { padding-top: 18px; }
@container (max-height: 720px) { .results .verdict-slot, .results .counting { min-height: 36px; } .results .race { padding-top: 16px; } }
/* The title slot has the title's full height from the start, so nothing below moves when "You got the W!" lands (was 40 → 50px). */
.results .verdict-slot { height: 50px; min-height: 0; }
.results .verdict-slot .counting { min-height: 0; height: 100%; }
@container (max-height: 720px) { .results .verdict-slot { height: 42px; } }

/* Perfect Draft marker = ice white (Ben 2026-10-10): gold means "you", purple means the rival, so the crowd's
   favourites get their own neutral colour. Used on the item stars, the tip and the grade-chip info. */
:root { --pd: #eef2ff; }
.perfect-star { color: var(--pd); text-shadow: 0 0 6px rgba(220, 230, 255, 0.85), 0 1px 1px rgba(0, 0, 0, 0.6); }
.pd-white, .chip-info b { color: var(--pd); }
.grade-chip .pd-star { font-style: normal; color: var(--pd); text-shadow: 0 0 5px rgba(220, 230, 255, 0.7); }
.res-pts small { font-size: 0.62em; font-weight: 700; opacity: 0.75; margin-left: 2px; }

/* ===== Legendary v3 (storyboard 3, approved 2026-10-10) ===== */
/* 1) Solo title: screen dims, giant rainbow LEGENDARY / W! (sized to the frame width so it's never cut), one screen thump */
.legend-solo { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: grid; place-items: center; padding-bottom: 8cqh;
  background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.08), rgba(4, 4, 18, 0.82) 62%); animation: soloDim 0.25s ease-out both; }
.legend-solo-title { text-align: center; line-height: 0.95; font-size: clamp(40px, 13.5cqw, 58px); white-space: nowrap; color: transparent;
  background: var(--rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.5)) drop-shadow(0 4px 0 #000); animation: soloSlam 0.5s cubic-bezier(.25, 1.6, .45, 1) both, foil 2.4s linear 0.5s infinite; }
.legend-solo-title span { display: block; font-size: 1.15em; }
@keyframes soloDim { from { opacity: 0; } to { opacity: 1; } }
@keyframes soloSlam { 0% { opacity: 0; transform: scale(2.4); } 65% { opacity: 1; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } }
.results.solo-on { animation: legendThumpShake 0.3s 0.32s; }
@keyframes legendThumpShake { 25% { transform: translate(-5px, 3px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 1px); } }
/* 2) It glides up into the title spot (the real title fades in there as it arrives) */
.legend-solo.out { animation: soloUndim 0.45s ease-in forwards; }
.legend-solo.out .legend-solo-title { animation: soloToTop 0.45s cubic-bezier(.5, 0, .3, 1) forwards; }
@keyframes soloUndim { from { opacity: 1; } to { opacity: 0; } }
@keyframes soloToTop { to { transform: translateY(-38cqh) scale(0.42); opacity: 0.4; } }
.results.solo-on .verdict-title.legendary, .results.solo-on .race-grade .grade-chip { visibility: hidden; }
.results .verdict-title.legendary.thump { animation: verdictIn 0.35s ease-out both, foil 3s linear 0.35s 1; }
/* 3) The Judge drops from above and lands with a slam, dust ring and a tiny shake */
.judge-pop.mood-slam { animation: judgeDrop 0.42s cubic-bezier(.55, 0, .75, .3) both, judgeLand 0.35s 0.42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes judgeDrop { 0% { opacity: 0; transform: translateY(-75cqh) scale(0.9); } 15% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes judgeLand { 0% { transform: scale(1.08, 0.9); } 100% { transform: none; } }
.judge-dust { position: absolute; left: 50%; top: calc(50% + 78px); z-index: 19; width: 170px; height: 30px; translate: -50% 0; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 236, 190, 0.6); box-shadow: 0 0 18px rgba(255, 220, 150, 0.5); animation: dustRing 0.6s 0.4s ease-out both; }
@keyframes dustRing { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.results.judge-drop.stage-landed { animation: legendLandShake 0.15s 0.42s; }
@keyframes legendLandShake { 33% { transform: translateY(3px); } 66% { transform: translateY(-2px); } }
.results.judge-drop .pop-say { animation-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) { .legend-solo-title, .results.solo-on, .results.judge-drop.stage-landed { animation: none; } }
/* Narrow phones: the small "pts" after each item's number goes (the header says it's points), so names keep their room */
.res-pts small { font-size: 0.5em; margin-left: 1px; letter-spacing: -0.01em; }
@container (max-width: 405px) { .res-pts small { display: none; } }
/* Legendary hand-off (Ben 2026-10-10): the big 2-line title flies up and is fully gone before it reaches the top,
   and the 1-line title pops in at the top with its own thump — a hand-off, not a 2-line → 1-line morph. */
@keyframes soloToTop { 0% { transform: none; opacity: 1; } 70% { opacity: 0; } 100% { transform: translateY(-30cqh) scale(0.5); opacity: 0; } }
.results .verdict-title.legendary.thump { animation: legendThump 0.45s cubic-bezier(.3, 1.6, .5, 1) both, foil 3s linear 0.45s 1; }
/* Share sheet: the card pops off a darker sheet with a soft gold glow */
.sheet-veil:has(.share-preview) .sheet { background: linear-gradient(180deg, #0f0b26, #07061a); }
.share-preview { border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.35), 0 0 34px rgba(255, 200, 61, 0.22), 0 14px 34px rgba(0, 0, 0, 0.65); }

/* Perfect Draft marker v2 (Ben 2026-10-10: white was too weak, vanished on bright chips) = community pink with a thin
   dark outline — the crowd's colour (same as the ❤ community hearts), readable on dark AND bright backgrounds. */
:root { --pd: #ff4d6d; }
.perfect-star, .grade-chip .pd-star { color: var(--pd); -webkit-text-stroke: 1px rgba(26, 8, 30, 0.85); paint-order: stroke fill;
  text-shadow: 0 0 6px rgba(255, 77, 109, 0.75), 0 1px 1px rgba(0, 0, 0, 0.6); }
.perfect-star.on-icon { font-size: 13px; }
.pd-white, .chip-info b { color: #ff8fb4; }

/* ===== Booster (2026-10-10): green = cash, only at your max ===== */
.boost-chip { display: inline-flex; align-items: center; gap: 3px; padding: 7px 10px; border-radius: 12px; font-size: 13px; font-weight: 800; border: 1px solid rgba(134, 239, 172, 0.45); color: #86efac; background: rgba(34, 197, 94, 0.08); }
.boost-chip .ct, .boost-btn .ct, .boost-stock .ct { font-size: 10.5px; font-weight: 800; padding: 1px 5px; border-radius: 99px; background: rgba(0, 0, 0, 0.3); color: #eaffef; }
.boost-chip.info-open { box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.7); }
.boost-chip.used { opacity: 0.55; border-color: rgba(255, 255, 255, 0.18); color: var(--muted); background: transparent; font-size: 11.5px; }
.controls.boost-mode { gap: 8px; }
.boost-zone { display: flex; flex-direction: column; gap: 8px; }
.boost-status { text-align: center; font-size: 13px; color: var(--muted); font-weight: 700; }
.boost-status b { color: #fff; }
.boost-row { display: flex; gap: 8px; align-items: stretch; }
.boost-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 12px; border-radius: 16px; font-size: 17px; font-weight: 800; color: #062a14;
  background: linear-gradient(180deg, #a7f3c0, #22c55e); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 5px 0 #127a3a, 0 0 22px rgba(34, 197, 94, 0.55); animation: boostPulse 1.3s ease-in-out infinite; }
.boost-btn.armed { animation: none; box-shadow: 0 0 0 3px #eaffef, 0 5px 0 #127a3a, 0 0 30px rgba(134, 239, 172, 0.9); }
@keyframes boostPulse { 50% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 5px 0 #127a3a, 0 0 34px rgba(34, 197, 94, 0.85); } }
.boost-row .pass { flex: none; padding-inline: 18px; }
.boost-info { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: #1d2a5e; border: 1px solid rgba(134, 239, 172, 0.45); animation: qsFade 0.2s both; }
.boost-info .judge-mini { width: 30px; height: 30px; flex: none; }
.boost-info p { margin: 0; font-size: 12px; line-height: 1.35; text-align: left; }
.boost-info b { color: #86efac; }
.boost-info b.go { color: #eaffef; }
.boost-info .have { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.boost-reach { align-self: center; font-size: 12px; font-weight: 800; color: #86efac; padding: 2px 10px; border-radius: 99px; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(134, 239, 172, 0.4); animation: popIn 0.35s cubic-bezier(.2, 1.6, .4, 1) both; }
.boost-coins { position: relative; height: 0; }
.boost-coins i { position: absolute; left: calc(30% + var(--i) * 9%); top: 6px; font-style: normal; font-size: 18px; animation: coinFly 0.7s calc(var(--i) * 0.06s) cubic-bezier(.3, .8, .4, 1) both; pointer-events: none; }
@keyframes coinFly { 0% { opacity: 0; transform: translateY(40px) scale(0.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px) scale(1.1) rotate(-12deg); } }
.boost-note { margin-top: 4px; font-size: 12px; font-weight: 800; color: #86efac; }
.boost-note.gone { color: var(--muted); }
.slot-boost { position: absolute; right: -4px; top: -5px; font-style: normal; font-size: 11px; filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.9)); }
.slot { position: relative; }
.res-boost { font-style: normal; font-size: 0.85em; margin-left: 3px; filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.8)); }
.boost-stock { align-self: center; font-size: 12px; font-weight: 800; color: #86efac; padding: 4px 12px; border-radius: 99px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(134, 239, 172, 0.4); animation: qsFade 0.4s 1s both; }
.boost-earned { position: absolute; left: 50%; top: calc(58% + 30px); translate: -50% 0; z-index: 12; white-space: nowrap; font-size: 12px; font-weight: 800; color: #86efac; padding: 3px 10px; border-radius: 99px; background: rgba(6, 30, 18, 0.85); border: 1px solid rgba(134, 239, 172, 0.5); animation: qsFade 0.35s 0.25s both; }
.boost-earned small { color: var(--muted); font-weight: 700; margin-left: 4px; }
.boost-toast { position: absolute; top: 64px; left: 50%; translate: -50% 0; z-index: 60; padding: 7px 14px; border-radius: 99px; font-size: 13px; font-weight: 800; color: #062a14; background: linear-gradient(180deg, #a7f3c0, #22c55e); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 18px rgba(34, 197, 94, 0.5); animation: qsFade 0.3s both; pointer-events: none; }
/* the booster explanation floats over the drafts (it pushed them off-screen) */
.controls { position: relative; }
.boost-info { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 25; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55); background: #18224f; }
.boost-info b.go, .boost-info .when { display: block; margin-top: 3px; }
.boost-info b.go { color: #eaffef; }
.boost-info .have { display: inline; margin-left: 0; }
/* Booster v2 visuals (Ben 2026-10-10): a clear green badge on boosted items (same family as FREE / ¾), stock under YOUR player */
.boost-badge { position: absolute; top: -5px; right: -5px; z-index: 3; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; line-height: 1;
  background: linear-gradient(180deg, #86efac, #16a34a); border: 1.5px solid #062a14; box-shadow: 0 0 8px rgba(34, 197, 94, 0.75); }
.boost-badge.res { top: -4px; right: -4px; width: 15px; height: 15px; font-size: 9px; }
.res-img { position: relative; }
.boost-stock.mine { margin-top: 4px; display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 9px; font-size: 12px; animation: qsFade 0.4s 0.9s both; }
.boost-stock.mine small { font-size: 10.5px; font-weight: 700; opacity: 0.8; }
.boost-reach s { color: var(--muted); font-weight: 600; margin-left: 4px; }
.boost-btn span:first-child { white-space: nowrap; }
.qs-found .vs-side { position: relative; }
.boost-stock.mine { position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; margin: 0; white-space: nowrap; }
.boost-reach { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Booster v3 (Ben 2026-10-10): at your max it's a CHOICE, not a push — two equal buttons, no pulsing; the first tap names the item */
.boost-row { align-items: stretch; }
.boost-btn.calm { flex: 1 1 0; flex-direction: column; gap: 1px; padding: 9px 10px; font-size: 15px; animation: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 4px 0 #127a3a; }
.boost-btn.calm.armed { box-shadow: 0 0 0 3px #eaffef, 0 4px 0 #127a3a, 0 0 22px rgba(134, 239, 172, 0.75); }
.boost-btn .bb-main { white-space: nowrap; }
.boost-btn .bb-sub { font-size: 10.5px; font-weight: 700; opacity: 0.8; white-space: nowrap; }
.boost-row .pass.even { flex: 1 1 0; display: grid; place-items: center; padding: 9px 10px; font-size: 15px; font-weight: 800; }
.boost-info b.q { color: #eaffef; display: block; margin-bottom: 2px; }
.boost-btn.calm, .boost-row .pass.even { min-width: 0; }
/* SOLD / FREE: when the item flies to the draft, the one on the card fades to a ghost (Ben 2026-10-10: it looked doubled) */
.auction-item .item-stage .item-img.flown { animation: none !important; opacity: 0.22; transform: scale(0.94); filter: grayscale(0.5); transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease; }
.qs-basics .ch-tag { color: var(--gold); font-weight: 800; }
/* ===== Crowd Meter (2026-10-12, storyboard 5): sky-blue = information; floats over the card's top-left, never moves layout ===== */
.meter-zone { position: absolute; left: 10px; top: 10px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: calc(100% - 20px); pointer-events: none; }
.meter-zone > * { pointer-events: auto; }
.meter-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 12px; font-size: 13px; font-weight: 800; color: #a5f3fc; border: 1px solid rgba(56, 189, 248, 0.55); background: rgba(12, 40, 80, 0.75); animation: qsFade 0.3s both; }
.meter-btn .ct { font-size: 10.5px; padding: 1px 5px; border-radius: 99px; background: rgba(0, 0, 0, 0.3); color: #e0f7ff; }
.meter-btn.armed { color: #0b1a3a; background: linear-gradient(180deg, #a5f3fc, #38bdf8); box-shadow: 0 0 0 2px #e0f7ff, 0 0 16px rgba(56, 189, 248, 0.8); }
.meter-info { width: min(260px, 100%); text-align: left; font-size: 12px; line-height: 1.35; padding: 8px 10px; border-radius: 12px; background: #142a5c; border: 1px solid rgba(56, 189, 248, 0.6); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55); animation: qsFade 0.2s both; }
.meter-info b { color: #a5f3fc; }
.meter-info b.warn { color: #fff; display: block; margin-top: 2px; }
.meter-info .have { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.meter-panel { padding: 6px 8px; border-radius: 12px; background: rgba(10, 32, 70, 0.9); border: 1px solid rgba(56, 189, 248, 0.6); box-shadow: 0 0 16px rgba(56, 189, 248, 0.3); animation: popIn 0.35s cubic-bezier(.2, 1.4, .4, 1) both; text-align: left; }
.meter-ladder { display: grid; grid-template-columns: repeat(8, 15px); gap: 2px; }
.meter-ladder i { height: 13px; border-radius: 3px; background: #22305f; font-style: normal; font-size: 8px; font-weight: 800; display: grid; place-items: center; color: #6b76b0; }
.meter-ladder i.on { background: linear-gradient(180deg, #a5f3fc, #38bdf8); color: #0b1a3a; box-shadow: 0 0 8px rgba(56, 189, 248, 0.85); animation: meterLand 0.5s 0.15s cubic-bezier(.2, 1.6, .4, 1) both; }
.meter-ladder i.on.low { background: linear-gradient(180deg, #fca5a5, #f87171); color: #3a0b0b; box-shadow: 0 0 8px rgba(248, 113, 113, 0.75); }
@keyframes meterLand { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.meter-text { margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #e0f7ff; white-space: nowrap; }
.meter-text b { color: #a5f3fc; }
.meter-tell { font-size: 10.5px; font-weight: 800; color: #a5f3fc; padding: 2px 8px; border-radius: 99px; background: rgba(56, 189, 248, 0.14); border: 1px solid rgba(56, 189, 248, 0.45); white-space: nowrap; animation: qsFade 0.3s both; }
.meter-panel .meter-tell { margin-top: 4px; display: inline-block; }
.meter-tell.opp { color: #ddd6fe; background: rgba(167, 139, 250, 0.16); border-color: rgba(167, 139, 250, 0.55); }
/* Results: items each player checked */
.hint-badge { position: absolute; left: -5px; top: -5px; z-index: 3; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 8px; background: #0f2a5a; border: 1.5px solid #38bdf8; }
.hint-line { text-align: center; font-size: 11px; color: var(--muted); margin-top: 2px; }
.rank-ico { font-size: 0.95em; margin-right: 3px; }
.boost-stock .bs-meter { color: #a5f3fc; margin-left: 6px; }
.boost-earned.level-gift { color: #a5f3fc; border-color: rgba(56, 189, 248, 0.55); background: rgba(8, 26, 56, 0.88); }
/* Rank-up reveal (2026-10-12) */
.rankup { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: radial-gradient(70% 50% at 50% 45%, rgba(124, 58, 237, 0.45), rgba(4, 4, 20, 0.9)); animation: qsFade 0.3s both; }
.rankup-card { width: min(320px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px 18px; border-radius: 22px; background: linear-gradient(180deg, #221a5e, #121842); border: 1.5px solid rgba(255, 200, 61, 0.6); box-shadow: 0 0 40px rgba(255, 200, 61, 0.25), 0 20px 40px rgba(0, 0, 0, 0.6); text-align: center; animation: popIn 0.45s cubic-bezier(.2, 1.5, .4, 1) both; }
.rankup-kicker { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.rankup-icon { font-size: 64px; line-height: 1.1; filter: drop-shadow(0 0 18px rgba(255, 200, 61, 0.55)); animation: meterLand 0.6s 0.2s cubic-bezier(.2, 1.6, .4, 1) both; }
.rankup-name { margin: 0; font-size: 34px; color: #fff; text-shadow: 0 0 14px rgba(255, 200, 61, 0.5); }
.rankup-sub { font-size: 13px; color: var(--muted); font-weight: 700; }
.rankup-gift { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.rankup-gift span { font-size: 13px; font-weight: 800; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
.rankup-gift span:first-child { color: #86efac; border-color: rgba(134, 239, 172, 0.5); }
.rankup-gift span:last-child { color: #a5f3fc; border-color: rgba(56, 189, 248, 0.55); }
.rankup-next { font-size: 12px; color: var(--muted); }
.rankup-ok { margin-top: 6px; min-width: 160px; }
/* Daily gift (2026-10-12) */
.gift-sheet { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(4, 4, 20, 0.72); animation: qsFade 0.3s both; }
.gift-card { width: min(300px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 18px 16px; border-radius: 22px; text-align: center; background: linear-gradient(180deg, #221a5e, #121842); border: 1.5px solid rgba(255, 200, 61, 0.55); box-shadow: 0 0 36px rgba(255, 200, 61, 0.22), 0 18px 36px rgba(0, 0, 0, 0.6); animation: popIn 0.4s cubic-bezier(.2, 1.5, .4, 1) both; }
.gift-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.gift-box { font-size: 84px; line-height: 1.1; background: none; border: 0; cursor: pointer; filter: drop-shadow(0 0 20px rgba(255, 200, 61, 0.55)); animation: giftWiggle 1.6s ease-in-out infinite; }
@keyframes giftWiggle { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-8deg) scale(1.05); } 82% { transform: rotate(7deg) scale(1.05); } 89% { transform: rotate(-4deg); } }
.gift-tap { font-size: 13px; color: var(--muted); font-weight: 700; }
.gift-items { display: flex; gap: 10px; }
.gift-item { width: 104px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border-radius: 16px; animation: popIn 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
.gift-item.meter { animation-delay: 0.12s; }
.gift-item .gi-ico { font-size: 34px; line-height: 1.1; }
.gift-item b { font-size: 22px; }
.gift-item small { font-size: 11px; font-weight: 700; color: var(--muted); }
.gift-item.reach { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(134, 239, 172, 0.5); color: #86efac; }
.gift-item.meter { background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.55); color: #a5f3fc; }
.gift-note { font-size: 11.5px; color: var(--muted); }
.gift-btn { min-width: 170px; margin-top: 4px; }
.gift-next { font-size: 11.5px; color: var(--muted); }
/* Streak = a small badge on your avatar (Ben 2026-10-12: it crowded the level text) */
.prog-chip { cursor: pointer; }
.avatar-wrap { position: relative; display: inline-flex; }
.hdr-streak.badge { position: absolute; right: -9px; top: -8px; margin: 0; padding: 0 4px; border-radius: 99px; font-size: 9px; line-height: 14px; color: #fde68a; background: #3a1606; border: 1px solid rgba(253, 186, 116, 0.75); box-shadow: 0 0 6px rgba(251, 146, 60, 0.6); white-space: nowrap; z-index: 2; }
.meter-btn.armed { animation: meterArm 1.1s ease-in-out infinite; }
@keyframes meterArm { 50% { box-shadow: 0 0 0 2px #e0f7ff, 0 0 26px rgba(56, 189, 248, 1); transform: scale(1.06); } }
/* Progression sheet (2026-10-12) */
.prog-sheet { position: absolute; inset: 0; z-index: 75; display: grid; place-items: center; padding: 16px; background: rgba(4, 4, 20, 0.72); animation: qsFade 0.25s both; }
.prog-card { position: relative; width: min(340px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 16px; border-radius: 22px; background: linear-gradient(180deg, #1f1a58, #111740); border: 1.5px solid rgba(255, 200, 61, 0.45); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6); animation: popIn 0.35s cubic-bezier(.2, 1.4, .4, 1) both; }
.prog-close { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06); color: var(--muted); font-size: 13px; }
.prog-now { display: flex; align-items: center; gap: 12px; }
.prog-rank-ico { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 12px rgba(255, 200, 61, 0.45)); }
.prog-rank-name { font-size: 20px; font-weight: 800; color: #fff; }
.prog-lvl { font-size: 13px; font-weight: 700; color: var(--gold); }
.prog-bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.prog-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffe07a, #f5a524); }
.prog-to-next { font-size: 12px; color: var(--muted); }
.prog-to-next b { color: #fff; }
.prog-ladder { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.prog-step { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); opacity: 0.6; }
.prog-step.done { opacity: 0.85; }
.prog-step.cur { opacity: 1; background: rgba(255, 200, 61, 0.1); border-color: rgba(255, 200, 61, 0.6); box-shadow: 0 0 14px rgba(255, 200, 61, 0.2); }
.ps-ico { font-size: 20px; width: 24px; text-align: center; }
.ps-name { flex: 1; display: flex; flex-direction: column; font-size: 13.5px; font-weight: 800; }
.ps-name small { font-size: 11px; font-weight: 600; color: var(--muted); }
.ps-gift { font-size: 11.5px; font-weight: 800; color: #a5f3fc; white-space: nowrap; }
.ps-gift i { font-style: normal; color: var(--muted); }
.prog-step.cur .ps-gift i { color: var(--gold); }
.prog-step.done .ps-gift { color: #86efac; }
.prog-next { font-size: 12px; color: var(--muted); text-align: center; }
.prog-stock { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.prog-stock span { font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 99px; }
.prog-stock small { opacity: 0.7; font-weight: 700; }
.prog-stock .reach { color: #86efac; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(134, 239, 172, 0.45); }
.prog-stock .meter { color: #a5f3fc; background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.5); }
/* Booster banner (2026-10-12, Royal Match reference): big name + one sharp line across the top; the booster itself glows */
.screen.auction { position: relative; }
.booster-banner { position: absolute; left: 0; right: 0; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(180deg, rgba(8, 10, 34, 0.96), rgba(8, 10, 34, 0.82) 75%, transparent); animation: bbnIn 0.28s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes bbnIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.bbn-icon { font-size: 44px; line-height: 1; filter: drop-shadow(0 0 14px rgba(255, 220, 120, 0.7)); animation: bbnIcon 1.2s ease-in-out infinite; }
@keyframes bbnIcon { 50% { transform: scale(1.1) rotate(-6deg); } }
.bbn-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.bbn-text b { font-size: 26px; font-weight: 400; color: #fff; line-height: 1.05; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.bbn-text span { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.3; }
.booster-banner.meter .bbn-text b { color: #a5f3fc; }
.booster-banner.pockets .bbn-text b { color: #86efac; }
/* the armed Deep Pockets chip/button glows like the armed Crowd Meter */
.boost-chip.info-open { animation: pocketsArm 1.1s ease-in-out infinite; }
@keyframes pocketsArm { 50% { box-shadow: 0 0 0 2px #eaffef, 0 0 24px rgba(34, 197, 94, 1); transform: scale(1.06); } }
.boost-btn.calm.armed { animation: pocketsArm 1.1s ease-in-out infinite; }
/* Crowd Meter row: one line above the item (no overlap with the item art) */
.meter-zone { flex-direction: row; flex-wrap: nowrap; align-items: center; }
.meter-panel { display: flex; align-items: center; gap: 8px; padding: 5px 8px; }
.meter-text { margin-top: 0; }
.meter-ladder { grid-template-columns: repeat(8, 13px); }
.meter-ladder i { height: 14px; font-size: 7.5px; }
/* badges on a landing draft slot wait for the item */
.badge-late { opacity: 0; animation: badgeLate 0.25s var(--land-at, 1.5s) forwards; }
@keyframes badgeLate { to { opacity: 1; } }
/* streak badge: always 🔥 (⚡ = Quick Start); hotter colours at 5 and 8 */
.hdr-streak.badge.hot2 { background: #4a1205; border-color: #fb923c; }
.hdr-streak.badge.hot3 { background: #5a0a06; border-color: #f87171; box-shadow: 0 0 9px rgba(248, 113, 113, 0.8); }
/* Crowd Meter button lives in the booster row next to 💰 (the banner sits at the top, like Royal Match) */
.bid-sub .meter-btn { padding: 7px 9px; animation: none; }
.bid-sub .meter-btn.armed { animation: meterArm 1.1s ease-in-out infinite; }
.bid-sub { gap: 6px; }
/* Stand ring on landing (2026-10-12): no restart from 60%; one smooth pulse that survives the switch to bidding */
.theme-game .auction-item.intro:not(.awaiting) .pedestal i:nth-child(2) { animation: none; }
.theme-game .auction-item .pedestal.land-hit i:nth-child(2) { animation: ringLand 0.6s ease-out both !important; }
@keyframes ringLand { 0% { transform: translate(-50%, -50%) scale(1); } 35% { transform: translate(-50%, -50%) scale(1.12); border-color: #ffe07a; box-shadow: 0 0 28px rgba(255, 200, 61, 0.85); } 100% { transform: translate(-50%, -50%) scale(1); } }
/* Rank badges + gift art (2026-10-12) */
.rank-badge { display: inline-block; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.level-text .rank-badge { width: 20px; height: 20px; margin: -3px 3px -3px 0; }
.rankup-icon { font-size: 0; }
.rankup-icon .rank-badge { width: 150px; height: 150px; filter: drop-shadow(0 0 22px rgba(255, 200, 61, 0.55)); }
.prog-rank-ico { font-size: 0; }
.prog-rank-ico .rank-badge { width: 64px; height: 64px; }
.ps-ico { width: 38px; display: grid; place-items: center; }
.ps-ico .rank-badge { width: 34px; height: 34px; }
.prog-step:not(.done):not(.cur) .ps-ico .rank-badge { filter: grayscale(0.5) brightness(0.8) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.rankup-next .rank-badge, .prog-next .rank-badge { width: 20px; height: 20px; margin-top: -3px; }
.gift-box { font-size: 0; filter: drop-shadow(0 0 22px rgba(255, 200, 61, 0.45)); }
.gift-box img { display: block; width: 150px; height: 150px; }
.gift-opened { width: 120px; height: 120px; margin-bottom: -6px; filter: drop-shadow(0 0 18px rgba(255, 200, 61, 0.5)); animation: popIn 0.4s cubic-bezier(.2, 1.6, .4, 1) both; }
/* Booster icon art (2026-10-12): em-sized so it matches the text around it */
.bst-ico { display: inline-block; width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -0.28em; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.bid-sub .meter-btn .bst-ico, .bid-sub .boost-chip .bst-ico { width: 24px; height: 24px; vertical-align: middle; }
.boost-chip.quiet { padding: 4px 8px; }
.bid-sub .meter-btn { padding: 4px 8px; gap: 3px; }
.bbn-icon { font-size: 0; }
.bbn-icon .bst-ico { width: 56px; height: 56px; }
.gift-item .gi-ico { font-size: 0; }
.gift-item .gi-ico .bst-ico { width: 44px; height: 44px; }
.boost-badge, .hint-badge { overflow: visible; }
.boost-badge .bst-ico, .hint-badge .bst-ico { width: 13px; height: 13px; vertical-align: 0; filter: none; }
.boost-badge { background: rgba(6, 30, 18, 0.9); }
.boost-btn .bb-main .bst-ico { width: 22px; height: 22px; }
/* booster row fits on one line at 375–402 px wide */
.bid-sub .quick { white-space: nowrap; padding-inline: 10px; }
.bid-sub .meter-btn .bst-ico, .bid-sub .boost-chip .bst-ico { width: 21px; height: 21px; }
.bid-sub .meter-btn, .bid-sub .boost-chip.quiet { padding: 4px 6px; }
.bid-sub .meter-btn .ct { font-size: 10px; padding: 1px 4px; }
.bid-sub .pass { padding-inline: 12px; }
@container (max-width: 385px) { .bid-sub .quick { padding-inline: 7px; font-size: 12.5px; } .bid-sub { gap: 4px; } .bid-sub .pass { padding-inline: 9px; } }
/* ===== Rank-up sequence (2026-10-12) ===== */
.rku { position: absolute; inset: 0; z-index: 85; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 20px; overflow: hidden; text-align: center;
  background: radial-gradient(60% 45% at 50% 40%, rgba(124, 58, 237, 0.55), rgba(4, 4, 20, 0.94)); animation: qsFade 0.25s both; }
.rku-rays { position: absolute; left: 50%; top: 38%; width: 160vmax; height: 160vmax; translate: -50% -50%; pointer-events: none; opacity: 0.0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 90, 0.16) 0deg 8deg, transparent 8deg 22deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 0, #000 18%, transparent 55%); mask: radial-gradient(circle, #000 0, #000 18%, transparent 55%);
  animation: rkuSpin 9s linear infinite; transition: opacity 0.6s; }
.rku.stage-charge .rku-rays { opacity: 0.55; animation-duration: 2.2s; }
.rku:not(.stage-charge) .rku-rays { opacity: 1; }
@keyframes rkuSpin { to { rotate: 360deg; } }
.rku-old { position: relative; z-index: 2; animation: rkuCharge 0.95s ease-in both; }
.rku-old .rank-badge { width: 120px; height: 120px; }
@keyframes rkuCharge { 0% { transform: scale(0.7); opacity: 0; filter: brightness(1); } 25% { transform: scale(1); opacity: 1; }
  60% { transform: scale(1.04) rotate(-3deg); filter: brightness(1.4) drop-shadow(0 0 18px #ffd86b); }
  70% { transform: scale(1.06) rotate(3deg); } 80% { transform: scale(1.08) rotate(-4deg); } 90% { transform: scale(1.1) rotate(4deg); }
  100% { transform: scale(1.15); filter: brightness(3) drop-shadow(0 0 40px #fff); } }
.rku-flash { position: absolute; inset: 0; z-index: 4; background: radial-gradient(circle at 50% 38%, #fff, rgba(255, 240, 200, 0.7) 30%, transparent 70%); pointer-events: none; animation: rkuFlash 0.6s ease-out both; }
@keyframes rkuFlash { from { opacity: 1; } to { opacity: 0; } }
.rku-ring { position: absolute; left: 50%; top: 38%; width: 120px; height: 120px; translate: -50% -50%; z-index: 3; border-radius: 50%; border: 4px solid rgba(255, 220, 120, 0.9); box-shadow: 0 0 30px rgba(255, 200, 61, 0.9); pointer-events: none; animation: rkuRing 0.8s ease-out both; }
@keyframes rkuRing { from { transform: scale(0.4); opacity: 1; } to { transform: scale(4.5); opacity: 0; } }
.rku .confetti { z-index: 3; }
.rku-new { position: relative; z-index: 5; animation: rkuSlam 0.6s cubic-bezier(.2, 1.5, .35, 1) both; filter: drop-shadow(0 0 26px rgba(255, 200, 61, 0.6)); }
@keyframes rkuSlam { 0% { transform: scale(2.6); opacity: 0; } 55% { transform: scale(0.92); opacity: 1; } 100% { transform: scale(1); } }
.rku-text { position: relative; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 190px; }
.rku-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); animation: riseIn 0.3s both; }
.rku-name { margin: 0; font-size: 42px; line-height: 1; color: #fff; text-shadow: 0 0 18px rgba(255, 200, 61, 0.7), 0 3px 0 rgba(0, 0, 0, 0.5); animation: rkuName 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes rkuName { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.rku-sub { font-size: 13.5px; color: var(--muted); font-weight: 700; animation: riseIn 0.35s 0.15s both; }
.rku-gifts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.rku-gift { font-size: 14px; font-weight: 800; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); animation: popIn 0.4s cubic-bezier(.2, 1.7, .4, 1) both; }
.rku-gift.reach { color: #86efac; border: 1px solid rgba(134, 239, 172, 0.55); }
.rku-gift.meter { color: #a5f3fc; border: 1px solid rgba(56, 189, 248, 0.6); animation-delay: 0.18s; }
.rku-gift .bst-ico { width: 22px; height: 22px; }
.rku-next { font-size: 12.5px; color: var(--muted); animation: riseIn 0.35s 0.35s both; }
.rku-next .rank-badge { width: 20px; height: 20px; margin-top: -3px; }
.rku-ok { margin-top: 10px; min-width: 180px; animation: popIn 0.35s both; }

/* ===== Top-rank effects (big badges) ===== */
.rank-fx { position: relative; display: inline-block; line-height: 0; }
.rank-fx > .rank-badge { width: 100%; height: 100%; }
.rank-fx .fx-sheen { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--badge) center / contain no-repeat; mask: var(--badge) center / contain no-repeat; }
/* Grandmaster: a glint sweeps across the crystal every ~3s */
.fx-grandmaster .fx-sheen { background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%); background-size: 260% 100%; mix-blend-mode: screen; animation: fxSheen 3.2s ease-in-out infinite; }
@keyframes fxSheen { 0%, 50% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
.fx-grandmaster > .rank-badge { filter: drop-shadow(0 0 14px rgba(125, 211, 252, 0.7)); }
/* Epic: flickering flames + warm pulse */
.fx-epic > .rank-badge { animation: fxFlicker 1.7s ease-in-out infinite; }
@keyframes fxFlicker { 0%, 100% { filter: drop-shadow(0 0 10px rgba(251, 146, 60, 0.6)) brightness(1); transform: scale(1); }
  25% { filter: drop-shadow(0 0 24px rgba(251, 146, 60, 0.95)) brightness(1.1); transform: scale(1.02); }
  45% { filter: drop-shadow(0 0 14px rgba(251, 146, 60, 0.7)) brightness(1.02); }
  70% { filter: drop-shadow(0 0 28px rgba(253, 186, 116, 1)) brightness(1.12); transform: scale(1.025); } }
.fx-epic .fx-sheen { background: radial-gradient(ellipse 60% 45% at 50% 18%, rgba(255, 190, 80, 0.75), transparent 70%); mix-blend-mode: screen; animation: fxHeat 0.9s ease-in-out infinite alternate; }
@keyframes fxHeat { from { opacity: 0.25; transform: translateY(2%); } to { opacity: 0.85; transform: translateY(-3%); } }
/* Legend: rainbow shimmer + sparkles */
.fx-legend > .rank-badge { animation: fxLegendGlow 3s linear infinite; }
@keyframes fxLegendGlow { 0% { filter: drop-shadow(0 0 16px rgba(255, 77, 109, 0.8)); } 33% { filter: drop-shadow(0 0 16px rgba(255, 200, 61, 0.85)); } 66% { filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.85)); } 100% { filter: drop-shadow(0 0 16px rgba(255, 77, 109, 0.8)); } }
.fx-legend .fx-sheen { background: linear-gradient(115deg, rgba(255, 0, 128, 0.5), rgba(255, 200, 0, 0.5), rgba(0, 255, 170, 0.5), rgba(0, 150, 255, 0.5), rgba(200, 0, 255, 0.5), rgba(255, 0, 128, 0.5)); background-size: 300% 100%; mix-blend-mode: overlay; animation: fxRainbow 2.6s linear infinite; }
@keyframes fxRainbow { to { background-position: 300% 0; } }
.fx-sparks i { position: absolute; font-style: normal; font-size: calc(var(--s, 1) * 16px); line-height: 1; color: #fff8d6; text-shadow: 0 0 8px #ffd86b; opacity: 0; animation: fxTwinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.4s); }
.fx-sparks i:nth-child(1) { left: 6%; top: 18%; } .fx-sparks i:nth-child(2) { right: 4%; top: 12%; } .fx-sparks i:nth-child(3) { left: 0; top: 62%; }
.fx-sparks i:nth-child(4) { right: 0; top: 58%; } .fx-sparks i:nth-child(5) { left: 44%; top: -4%; } .fx-sparks i:nth-child(6) { left: 48%; bottom: 0; }
@keyframes fxTwinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.prog-rank-ico .rank-fx .fx-sparks i { font-size: 9px; }
/* Header: only a soft glow for the top ranks (no motion during play) */
.level-text .rank-badge.tier-grandmaster { filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.9)); }
.level-text .rank-badge.tier-epic { filter: drop-shadow(0 0 4px rgba(251, 146, 60, 0.95)); }
.level-text .rank-badge.tier-legend { filter: drop-shadow(0 0 3px rgba(255, 77, 109, 0.8)) drop-shadow(0 0 4px rgba(56, 189, 248, 0.8)); }
.qa-sub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px 14px; border-left: 2px solid rgba(255, 200, 61, 0.35); margin-left: 8px; }
.qa-sub button { display: flex; align-items: center; gap: 6px; }
.qa-sub button img { width: 18px; height: 18px; object-fit: contain; }
.qa-sub button small { margin-left: auto; opacity: 0.6; font-size: 10px; }
.rku { background: radial-gradient(60% 45% at 50% 40%, rgba(72, 30, 150, 0.98), rgba(8, 8, 30, 0.99) 75%); }
/* Rank-up v2 (Ben 2026-10-12): softer, shorter rays; "Your rewards" label instead of "Level · rank X of 7" */
.rku-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 210, 90, 0.09) 0deg 7deg, transparent 7deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 0, #000 8%, transparent 32%); mask: radial-gradient(circle, #000 0, #000 8%, transparent 32%); }
.rku.stage-charge .rku-rays { opacity: 0.5; }
.rku-gifts-label { margin-top: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); animation: riseIn 0.3s both; }
.rku-gifts { margin-top: 2px; }
/* Epic v2 (Ben 2026-10-12: "a bit weird"): the heat overlay used to MOVE (translateY), dragging its badge-shaped mask
   with it, so a second, lighter badge seemed to slide up and down; the badge also jittered in size. Now nothing moves:
   a smooth warm glow pulse + a soft, irregular brightness flicker on the flames only (overlay fixed in place). */
.fx-epic > .rank-badge { animation: fxEpicGlow 2.4s ease-in-out infinite; transform: none; }
@keyframes fxEpicGlow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(251, 146, 60, 0.55)); } 50% { filter: drop-shadow(0 0 24px rgba(251, 146, 60, 0.95)); } }
.fx-epic .fx-sheen { transform: none; background: radial-gradient(ellipse 70% 38% at 50% 14%, rgba(255, 196, 90, 0.9), transparent 72%); mix-blend-mode: screen; animation: fxFlame 1.9s linear infinite; }
@keyframes fxFlame { 0% { opacity: 0.2; } 12% { opacity: 0.55; } 22% { opacity: 0.3; } 38% { opacity: 0.7; } 50% { opacity: 0.35; } 63% { opacity: 0.6; } 78% { opacity: 0.25; } 90% { opacity: 0.5; } 100% { opacity: 0.2; } }
/* Rank-up v3 (Ben 2026-10-12): fixed layout (nothing jumps when items appear); smaller CTA + "Next" lower down */
.rku { justify-content: flex-start; padding-top: max(12vh, 70px); }
.rku-badge-slot { position: relative; z-index: 5; width: 190px; height: 190px; display: grid; place-items: center; flex: none; }
.rku-badge-slot > .rku-old, .rku-badge-slot > .rku-new { grid-area: 1 / 1; }
.rku-ring { top: 50%; }
.rku-rays { top: calc(max(12vh, 70px) + 95px); }
.rku-text { min-height: 0; gap: 6px; margin-top: 8px; }
.rku-text > *, .rku-foot > * { visibility: hidden; animation: none; }
.rku-text > .on, .rku-foot > .on { visibility: visible; }
.rku-kicker.on { animation: riseIn 0.3s both; }
.rku-name.on { animation: rkuName 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
.rku-gifts-label.on { animation: riseIn 0.3s both; }
.rku-gifts .rku-gift { animation: none; }
.rku-gifts.on .rku-gift { animation: popIn 0.4s cubic-bezier(.2, 1.7, .4, 1) both; }
.rku-gifts.on .rku-gift.meter { animation-delay: 0.18s; }
.rku-foot { position: absolute; left: 0; right: 0; bottom: max(9vh, 48px); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rku-next.on { animation: riseIn 0.35s 0.35s both; }
.rku-ok { margin-top: 0; min-width: 0; width: auto; padding: 11px 34px; font-size: 16px; }
.rku-ok.on { animation: popIn 0.35s both; }
.rku { padding-top: max(19vh, 110px); }
.rku-rays { top: calc(max(19vh, 110px) + 95px); }
.rku-foot { bottom: max(11vh, 64px); }
/* ===== Top-rank effects v2 (2026-10-12): no masks — a copy of the badge image carries the effect ===== */
.rank-fx .fx-sheen { display: none; }
.rank-fx .fx-copy { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Grandmaster: a bright diagonal band of the badge sweeps across every ~3s */
.fx-grandmaster .fx-copy { filter: brightness(2.3) saturate(0.3); clip-path: polygon(-40% 0, -25% 0, -45% 100%, -60% 100%); animation: fxGlint 3.2s ease-in-out infinite; }
@keyframes fxGlint { 0%, 55% { clip-path: polygon(-40% 0, -25% 0, -45% 100%, -60% 100%); } 100% { clip-path: polygon(130% 0, 145% 0, 125% 100%, 110% 100%); } }
/* Epic: the whole badge flickers like firelight (no partial overlay) + a warm glow pulse */
.fx-epic > .rank-badge { animation: fxFire 1.8s linear infinite; transform: none; }
@keyframes fxFire {
  0%   { filter: drop-shadow(0 0 12px rgba(251, 146, 60, 0.6)) brightness(1) saturate(1); }
  11%  { filter: drop-shadow(0 0 20px rgba(251, 146, 60, 0.85)) brightness(1.12) saturate(1.15); }
  19%  { filter: drop-shadow(0 0 14px rgba(251, 146, 60, 0.65)) brightness(1.03) saturate(1.05); }
  34%  { filter: drop-shadow(0 0 26px rgba(253, 160, 70, 0.95)) brightness(1.16) saturate(1.2); }
  46%  { filter: drop-shadow(0 0 15px rgba(251, 146, 60, 0.7)) brightness(1.04) saturate(1.05); }
  61%  { filter: drop-shadow(0 0 22px rgba(251, 146, 60, 0.9)) brightness(1.1) saturate(1.15); }
  77%  { filter: drop-shadow(0 0 13px rgba(251, 146, 60, 0.6)) brightness(1.01) saturate(1); }
  88%  { filter: drop-shadow(0 0 24px rgba(253, 160, 70, 0.95)) brightness(1.14) saturate(1.2); }
  100% { filter: drop-shadow(0 0 12px rgba(251, 146, 60, 0.6)) brightness(1) saturate(1); } }
/* Legend: a rainbow shimmer cycles over the badge (hue-shifted copy) + the glow cycle + sparkles */
.fx-legend .fx-copy { opacity: 0.45; filter: saturate(2.2) hue-rotate(0deg); animation: fxHue 3s linear infinite; }
@keyframes fxHue { from { filter: saturate(2.2) hue-rotate(0deg); } to { filter: saturate(2.2) hue-rotate(360deg); } }
/* Legend v3: a wide, rainbow-coloured glint sweeps across (the badge's own gold stays gold) + glow cycle + sparkles */
.fx-legend .fx-copy { opacity: 1; clip-path: polygon(-40% 0, -15% 0, -35% 100%, -60% 100%); animation: fxGlintWide 2.6s ease-in-out infinite, fxHueBright 2.6s linear infinite; }
@keyframes fxGlintWide { 0%, 40% { clip-path: polygon(-40% 0, -15% 0, -35% 100%, -60% 100%); } 100% { clip-path: polygon(135% 0, 160% 0, 140% 100%, 115% 100%); } }
@keyframes fxHueBright { from { filter: brightness(1.7) saturate(2) hue-rotate(0deg); } to { filter: brightness(1.7) saturate(2) hue-rotate(360deg); } }
/* Safari square fix (2026-10-12): no filter on any CONTAINER of an animated badge (WebKit draws the container's
   drop-shadow around its rectangular layer = a square). Glows live on the <img> itself; a round radial light sits behind. */
.rku-new, .rku-old, .prog-rank-ico, .rankup-icon { filter: none !important; }
.rku-old { animation: rkuChargeT 0.95s ease-in both; }
.rku-old .rank-badge { animation: rkuChargeF 0.95s ease-in both; }
@keyframes rkuChargeT { 0% { transform: scale(0.7); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 60% { transform: scale(1.04) rotate(-3deg); }
  70% { transform: scale(1.06) rotate(3deg); } 80% { transform: scale(1.08) rotate(-4deg); } 90% { transform: scale(1.1) rotate(4deg); } 100% { transform: scale(1.15); } }
@keyframes rkuChargeF { 0%, 25% { filter: brightness(1); } 60% { filter: brightness(1.4) drop-shadow(0 0 18px #ffd86b); } 100% { filter: brightness(3) drop-shadow(0 0 40px #fff); } }
.rku-badge-slot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 61, 0.38), rgba(255, 200, 61, 0.12) 45%, transparent 70%); pointer-events: none; }
.rku-new .rank-fx:not(.fx-grandmaster):not(.fx-epic):not(.fx-legend) > .rank-badge { filter: drop-shadow(0 0 18px rgba(255, 200, 61, 0.6)); }
.prog-rank-ico { position: relative; }
.prog-rank-ico::before { content: ""; position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 61, 0.3), transparent 70%); pointer-events: none; }
.prog-rank-ico .rank-fx { position: relative; }
.rku-foot { gap: 20px; } /* "Next" a few px higher above the CTA (Ben 2026-10-12) */
/* Rank-up rays v3 (2026-10-12): an inline SVG with the fade built into its fill — no CSS mask, no 160vmax layer
   (iPhone Safari cut the masked spinning layer off as a SQUARE behind every badge). */
.rku-rays { display: none; }
.rku-rays-svg { position: absolute; left: 50%; top: calc(max(19vh, 110px) + 95px); width: 640px; height: 640px; margin: -320px 0 0 -320px; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.5s; animation: rkuSpin 9s linear infinite; }
.rku.stage-charge .rku-rays-svg { opacity: 0.6; animation-duration: 2.2s; }
.rku:not(.stage-charge) .rku-rays-svg { opacity: 1; }
/* ===== iPhone square fix v3 (Ben's screenshot 2026-10-12): Safari can draw an image's drop-shadow around the whole
   <img> BOX (a square) when it's animated/composited. Rule now: NO drop-shadow filters on badge/booster/gift images.
   Glows are round radial gradients on a ::before behind the badge (colour per rank, animated for the top ranks). ===== */
.rank-badge, .bst-ico, .gift-box, .gift-box img, .gift-opened, .rku-old .rank-badge, .rku-new .rank-badge, .rank-fx > .rank-badge,
.level-text .rank-badge.tier-grandmaster, .level-text .rank-badge.tier-epic, .level-text .rank-badge.tier-legend { filter: none !important; }
.rku-old .rank-badge { animation: none !important; }
.rku-old { animation: rkuChargeT 0.95s ease-in both, rkuChargeB 0.95s ease-in both !important; }
@keyframes rkuChargeB { 0%, 25% { filter: brightness(1); } 60% { filter: brightness(1.4); } 100% { filter: brightness(3); } }
/* round glow behind every big badge */
.rank-fx { isolation: isolate; }
.rank-fx::before { content: ""; position: absolute; inset: -22%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 200, 61, 0.42), rgba(255, 200, 61, 0.12) 42%, transparent 68%); }
.fx-grandmaster::before { background: radial-gradient(circle, rgba(125, 211, 252, 0.5), rgba(125, 211, 252, 0.14) 42%, transparent 68%); }
.fx-epic::before { background: radial-gradient(circle, rgba(251, 146, 60, 0.6), rgba(251, 146, 60, 0.16) 42%, transparent 68%); animation: fxEpicHalo 1.8s linear infinite; }
@keyframes fxEpicHalo { 0% { opacity: 0.65; } 11% { opacity: 0.9; } 19% { opacity: 0.7; } 34% { opacity: 1; } 46% { opacity: 0.72; } 61% { opacity: 0.95; } 77% { opacity: 0.65; } 88% { opacity: 1; } 100% { opacity: 0.65; } }
.fx-epic > .rank-badge { animation: none !important; }
.fx-epic { animation: fxFireB 1.8s linear infinite; } /* brightness flicker on the wrapper (no shadow → no square) */
@keyframes fxFireB { 0% { filter: brightness(1) saturate(1); } 11% { filter: brightness(1.12) saturate(1.15); } 19% { filter: brightness(1.03); } 34% { filter: brightness(1.16) saturate(1.2); }
  46% { filter: brightness(1.04); } 61% { filter: brightness(1.1) saturate(1.15); } 77% { filter: brightness(1.01); } 88% { filter: brightness(1.14) saturate(1.2); } 100% { filter: brightness(1) saturate(1); } }
.fx-legend::before { background: radial-gradient(circle, rgba(255, 77, 109, 0.5), rgba(255, 77, 109, 0.14) 42%, transparent 68%); animation: fxLegendHalo 3s linear infinite; }
@keyframes fxLegendHalo { 0% { background: radial-gradient(circle, rgba(255, 77, 109, 0.5), rgba(255, 77, 109, 0.14) 42%, transparent 68%); }
  33% { background: radial-gradient(circle, rgba(255, 200, 61, 0.55), rgba(255, 200, 61, 0.14) 42%, transparent 68%); }
  66% { background: radial-gradient(circle, rgba(56, 189, 248, 0.55), rgba(56, 189, 248, 0.14) 42%, transparent 68%); }
  100% { background: radial-gradient(circle, rgba(255, 77, 109, 0.5), rgba(255, 77, 109, 0.14) 42%, transparent 68%); } }
.fx-legend > .rank-badge { animation: none !important; }
.rku-badge-slot::before { display: none; }
.prog-rank-ico::before { display: none; }
.prog-step:not(.done):not(.cur) .ps-ico .rank-badge { filter: none !important; opacity: 0.55; }
/* Rank-up rewards = icon + ×N (Ben 2026-10-12: the icons say what they are), icons a bit bigger */
.rku-gifts { gap: 12px; }
.rku-gift { display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px 5px 8px; font-size: 18px; }
.rku-gift .bst-ico { width: 36px; height: 36px; vertical-align: middle; }
/* Square fix — the REAL cause (Ben's 2nd screenshot 2026-10-12): the white burst flash sat inside the 190px badge slot,
   so it was clipped into a bright square while fading. It now covers the whole screen, centred on the badge. */
.rku > .rku-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(circle at 50% calc(max(19vh, 110px) + 105px), #fff, rgba(255, 240, 200, 0.7) 18%, transparent 52%); animation: rkuFlash 0.6s ease-out both; }
/* tier badges a bit bigger everywhere (Ben 2026-10-12) */
.rku-badge-slot { width: 210px; height: 210px; }
.rku-rays-svg { top: calc(max(19vh, 110px) + 105px); }
.rku-old .rank-badge { width: 136px; height: 136px; }
.prog-rank-ico .rank-badge { width: 72px; height: 72px; }
.ps-ico { width: 42px; }
.ps-ico .rank-badge { width: 38px; height: 38px; }
.level-text .rank-badge { width: 22px; height: 22px; margin: -4px 3px -4px 0; }
.rku-next .rank-badge, .prog-next .rank-badge { width: 22px; height: 22px; }
/* Legend halo v2 (Ben 2026-10-12): gradients can't be animated smoothly — the halo JUMPED between pink, gold and blue.
   Now one halo whose hue rotates continuously (smooth rainbow), a little slower. */
.fx-legend::before { background: radial-gradient(circle, rgba(255, 77, 109, 0.55), rgba(255, 77, 109, 0.15) 42%, transparent 68%); animation: fxLegendHue 6s linear infinite; }
@keyframes fxLegendHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
/* rewards stagger: label first, then each reward on its own beat, then "Next" */
.rku-gifts.on .rku-gift { animation: popIn 0.4s 0.3s cubic-bezier(.2, 1.7, .4, 1) both; }
.rku-gifts.on .rku-gift.meter { animation-delay: 0.5s; }
.rku-gifts.on .rku-gift.meter:only-child { animation-delay: 0.3s; }
.rku-next.on { animation: riseIn 0.35s 0.85s both; }
.rku-next.on { animation: riseIn 0.35s 0.65s both; } /* "Next" 0.2s sooner */
.rku-next.on { animation: riseIn 0.35s 0.73s both; } /* +0.08s (Ben) */
.rku-next.on { animation: riseIn 0.35s 0.76s both; } /* +0.03s (Ben) */
/* Daily gift v2 (Ben 2026-10-12): icon + ×N on one line, no booster names; smaller CTA with more space above it */
.gift-item { width: auto; flex-direction: row; align-items: center; gap: 6px; padding: 8px 16px 8px 10px; }
.gift-item b { font-size: 22px; }
.gift-item .gi-ico .bst-ico { width: 40px; height: 40px; }
.gift-btn { min-width: 0; padding: 10px 34px; font-size: 16px; margin-top: 16px; }
.gift-card .gift-btn { width: auto; align-self: center; min-width: 150px; padding: 10px 36px; font-size: 16px; margin-top: 18px; }
.boost-stock.mine { width: max-content; align-items: center; gap: 2px; } .boost-stock.mine .bs-meter { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; } /* Rival Found: both boosters inside the pill (Ben 2026-10-12) */
/* Crowd Meter row fits the card (Ben 2026-10-12): it never runs past the card edge; with BOTH checks the rival tag
   shrinks to "🔍 Rival" and the ladder gets a bit smaller. One row, no overlaps. */
.meter-zone { right: 10px; flex-wrap: nowrap; gap: 6px; }
.meter-panel { min-width: 0; flex: 0 1 auto; }
.meter-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.meter-tell { flex: none; display: inline-flex; align-items: center; gap: 3px; }
.meter-zone:has(.meter-panel) .meter-ladder { grid-template-columns: repeat(8, 12px); }
.meter-zone:has(.meter-panel) .meter-ladder i { height: 13px; font-size: 7px; }
.auction-item:has(.meter-zone > *) .chat-bubble { top: 48px; } /* the rival chat bubble sits under the Crowd Meter row, never on it */
/* Level bar v2 (Ben 2026-10-12: looked like a dark hole when empty): visible track with a thin gold rim + a small gold tip at 0% */
.prog-chip .level-bar, .theme-game .level-bar { height: 7px; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 200, 61, 0.28); }
.level-bar div { min-width: 5px; box-shadow: 0 0 6px rgba(255, 200, 61, 0.55); }
/* Avatar art (2026-10-12): portraits for you and the rivals */
.avatar.has-img { padding: 0; overflow: hidden; background: var(--c, #2a2160); }
.avatar.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.prog-avatars-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.prog-avatars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.prog-av { padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; aspect-ratio: 1; overflow: hidden; opacity: 0.75; }
.prog-av img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.prog-av.on { border-color: var(--gold); opacity: 1; box-shadow: 0 0 10px rgba(255, 200, 61, 0.6); }
/* Matchmaking roll: all rival portraits stacked, one visible at a time (no image swapping mid-spin) */
.roll-stack { position: relative; }
.roll-stack .roll-face { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; }
.roll-stack .roll-face.on { opacity: 1; }
.radar.roll-stack { width: 124px; height: 124px; padding: 0; box-sizing: border-box; }
.gift-card.tappable{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}

/* ===== Intro v7 (2026-10-13): one calm beat — item + name pop in together; the big thump is only for the final item ===== */
.spotlight { animation: fadeIn 0.18s ease-out both; }
.spotlight .spot-label { animation: fadeIn 0.2s both; }
.spotlight:not(.auto):not(.final) .spot-ribbon { display: none; }
.spotlight .spot-item .item-img { animation: softPop 0.34s 0.05s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes softPop { from { opacity: 0; transform: scale(0.84); } to { opacity: 1; transform: none; } }
.spotlight .spot-burst { display: none; }
.spotlight .spot-name { animation: softRise 0.3s 0.1s ease-out both; }
@keyframes softRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.spotlight .auto-note { animation: softRise 0.3s 0.18s ease-out both; }
/* final item keeps v6: header, thump, burst, name */
.spotlight.final { animation: fadeIn 0.2s ease-out both, spotKick 0.2s 0.6s ease-out; }
.spotlight.final .spot-ribbon { display: inline-flex; animation: ribbonStamp 0.3s 0.1s cubic-bezier(.3, 1.8, .5, 1) both; }
.spotlight.final .spot-item .item-img { animation: thumpIn 0.32s 0.3s cubic-bezier(.5, 0, .75, .4) both, thumpSettle 0.3s 0.62s ease-out; }
.spotlight.final .spot-burst { display: block; animation: thumpBurst 0.55s 0.58s ease-out forwards; }
.spotlight.final .spot-name { animation: riseIn 0.32s 0.75s both; }
.spotlight.leaving .spot-burst { display: none; }

/* ===== Freebies screen (2026-10-13): every remaining item on one screen, then they fly into the draft ===== */
.spotlight.freebies { gap: 14px; }
.freebies .fb-title { font-size: 22px; font-weight: 800; line-height: 1.2; text-wrap: balance; max-width: 300px; animation: softRise 0.3s 0.08s ease-out both; }
.freebies .fb-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; max-width: 340px; }
.freebies .fb-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; animation: softPop 0.32s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(0.18s + var(--i) * 0.1s); }
.freebies .fb-items.n4 { gap: 12px 8px; max-width: 360px; } .freebies .fb-items.n4 .fb-item { width: 76px; }
.freebies .fb-item .item-img { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(255, 200, 61, 0.35); }
.freebies .fb-item span { font-size: 12.5px; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.freebies .fb-points { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: softRise 0.3s 0.45s ease-out both; }
.freebies .fb-tip { max-width: 320px; animation: softRise 0.3s 0.45s ease-out both; }
.spotlight.freebies.leaving .spot-label, .spotlight.freebies.leaving .fb-title, .spotlight.freebies.leaving .fb-points,
.spotlight.freebies.leaving .fb-tip, .spotlight.freebies.leaving .fb-item span { opacity: 0 !important; transition: opacity 0.2s; }
.spotlight.freebies.leaving .fb-items, .spotlight.freebies.leaving .fb-item, .spotlight.freebies.leaving .fb-item .item-img { opacity: 1 !important; }
.auction-item.fb-hidden > * { visibility: hidden; }

/* ===== Intro v8 (2026-10-13): the thump is back, in ONE beat — title already there, item lands, name lands with it ===== */
.spotlight, .spotlight.final { animation: fadeIn 0.16s ease-out both; }
.spotlight .spot-label { animation: none; }
.spotlight:not(.auto) .spot-ribbon, .spotlight.final:not(.auto) .spot-ribbon { display: none; }
.spotlight .spot-item .item-img, .spotlight.final .spot-item .item-img { animation: thumpIn 0.32s 0.12s cubic-bezier(.5, 0, .75, .4) both, thumpSettle 0.3s 0.44s ease-out; }
.spotlight .spot-burst, .spotlight.final .spot-burst { display: block; animation: thumpBurst 0.55s 0.42s ease-out forwards; }
.spotlight .spot-name, .spotlight.final .spot-name { animation: nameLand 0.3s 0.4s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes nameLand { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: none; } }
.spotlight .auto-note { animation: softRise 0.3s 0.55s ease-out both; }
/* final item: bigger, brighter burst + a second ring */
.spotlight.final .spot-burst { border-width: 5px; box-shadow: 0 0 50px rgba(255, 200, 61, 0.85); animation: thumpBurstBig 0.75s 0.42s ease-out forwards; }
@keyframes thumpBurstBig { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } }
.spotlight.final .spot-item::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255, 230, 150, 0.7); pointer-events: none; opacity: 0; animation: thumpBurstBig 0.75s 0.58s ease-out forwards; }
.spotlight.final .spot-label { color: #ffd966; text-shadow: 0 0 14px rgba(255, 200, 61, 0.7); }
.spotlight.leaving .spot-burst, .spotlight.leaving .spot-item::after { display: none; }

/* ===== Freebies v2: dealt in one by one, the set stays up, tap to continue ===== */
.freebies .fb-item { animation: dealCard 0.42s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(0.3s + var(--i) * 0.55s); }
@keyframes dealCard { 0% { opacity: 0; transform: translateY(30px) rotate(-10deg) scale(0.6); } 60% { opacity: 1; transform: translateY(-4px) rotate(2deg) scale(1.06); } 100% { opacity: 1; transform: none; } }
.freebies .fb-points, .freebies .fb-tip { animation: softRise 0.3s both; animation-delay: calc(0.35s + var(--n) * 0.55s); }
.freebies .fb-continue { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); opacity: 0.8; animation: softRise 0.3s both; animation-delay: calc(0.9s + var(--n) * 0.55s); }
.spotlight.freebies { cursor: pointer; }
.spotlight.freebies.leaving .fb-item { animation: none !important; }
.spotlight.freebies.leaving .fb-continue { opacity: 0 !important; transition: opacity 0.2s; }

/* ===== Results v5 (2026-10-13): one card per player; nothing greyed out; the winner's card is marked ===== */
.results .race.duel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.duel-card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 6px 6px; border-radius: 18px; transition: transform 0.4s, box-shadow 0.4s, border-color 0.4s, background 0.4s; }
.duel-card.card-you { background: rgba(255, 200, 61, 0.05); border: 1.5px solid rgba(255, 200, 61, 0.28); }
.duel-card.card-opp { background: rgba(167, 139, 250, 0.06); border: 1.5px solid rgba(167, 139, 250, 0.32); }
.duel-card.card-you.winner { border-color: rgba(255, 200, 61, 0.9); box-shadow: 0 0 22px rgba(255, 200, 61, 0.3); background: rgba(255, 200, 61, 0.09); transform: translateY(-3px); }
.duel-card.card-opp.winner { border-color: rgba(183, 148, 255, 0.95); box-shadow: 0 0 22px rgba(139, 92, 246, 0.38); background: rgba(167, 139, 250, 0.11); transform: translateY(-3px); }
.duel-card .race-side { flex: none; padding: 0 4px; }
.duel-card .race-side.loser { opacity: 1; filter: none; transform: none; }
.duel-card .race-side.side-opp { align-items: stretch; text-align: right; }
.duel-card .race-side.side-opp .race-who { flex-direction: row-reverse; }
.duel-card .race-side.side-opp .race-bar div { margin-left: auto; }
.duel-card .race-side.side-you { text-align: left; }
.duel-card .race-side.side-you .race-who { flex-direction: row; }
.duel-card .race-side.side-you .race-bar div { margin-left: 0; }
.duel-card .res-col, .duel-card .res-col.col-winner { padding: 0; background: none !important; box-shadow: none !important; border: 0 !important; }
.duel-card .reveal { gap: 0; }
.win-tag { position: absolute; top: -10px; left: 50%; translate: -50% 0; z-index: 3; padding: 2px 10px; border-radius: 99px; font-size: 11px; font-weight: 900; letter-spacing: 0.12em; color: #2a1700; background: linear-gradient(180deg, #ffe07a, #f5a524); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); animation: popIn 0.35s cubic-bezier(.2, 1.8, .4, 1) both; }
.card-opp .win-tag { color: #fff; background: linear-gradient(180deg, #b794ff, #7c3aed); }
.results .race.duel .reward-pop { top: 74px; }
.community-foot { font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; text-wrap: balance; }
.community-foot .ch-heart { color: #ff6b8a; }
.duel-card.card-you.winner:has(.col-legend) { border: 2px solid transparent; background: linear-gradient(#141a45, #141a45) padding-box, var(--rainbow) border-box; }

/* ===== Header v2 (2026-10-13): left = you (avatar + XP ring + rank shield/level + streak), right = Crowns + sound ===== */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.hdr-v2 .hdr-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hdr-profile { position: relative; display: flex; align-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hdr-ring { --p: 0; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; padding: 3px; box-sizing: border-box;
  background: conic-gradient(#ffd45a calc(var(--p) * 1%), rgba(255, 255, 255, 0.14) 0); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.55), 0 0 10px rgba(255, 200, 61, 0.25);
  transition: --p 0.8s cubic-bezier(.3, .8, .3, 1); }
.hdr-ring.snap { transition: none; }
.hdr-ring .avatar { width: 34px !important; height: 34px !important; box-shadow: 0 0 0 2px #120e33; }
.hdr-level { position: absolute; left: 26px; bottom: -6px; display: flex; align-items: center; z-index: 2; }
.hdr-level .rank-ico { width: 22px; height: 22px; }
.hdr-level b { margin-left: -6px; padding: 0 5px 0 7px; border-radius: 99px; font-size: 10.5px; font-weight: 900; line-height: 15px; color: #fff; background: linear-gradient(180deg, #3a2d86, #1c1450); border: 1px solid rgba(255, 200, 61, 0.6); }
.hdr-v2 .hdr-streak.badge { position: absolute; top: -7px; right: -12px; margin: 0; padding: 0 4px; border-radius: 99px; font-size: 10px; line-height: 15px; background: #2a1408; border: 1px solid rgba(255, 140, 50, 0.7); z-index: 3; }
.hdr-profile.lvl-up .hdr-ring { box-shadow: 0 0 0 2px #34e58c, 0 0 18px rgba(52, 229, 140, 0.7); }
.hdr-profile .lvl-flash { top: calc(100% + 8px); left: 20px; }
.hdr-crowns { position: relative; cursor: pointer; padding: 3px 12px 3px 4px; font-size: 15px; font-weight: 800; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 3px 0 rgba(0, 0, 0, 0.5); }
.hdr-crowns.bump { animation: crownBump 0.6s cubic-bezier(.3, 1.6, .5, 1); }
.duel-card { padding-top: 18px; } /* room for the winner crown inside the card */

/* ===== Settings (Alpha, 2026-10-13) ===== */
.gear-btn svg { width: 20px; height: 20px; display: block; color: #d9d3ff; }
.set-card { gap: 12px; }
.set-title { margin: 0 0 2px; font-size: 20px; font-weight: 800; text-align: center; }
.set-group { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 14px; font-size: 15px; font-weight: 700; color: var(--text, #fff); background: none; border: 0; text-align: left; text-decoration: none; }
.set-row + .set-row { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.set-row.toggle { cursor: pointer; width: 100%; }
.switch { position: relative; width: 44px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); transition: background 0.2s; flex: none; }
.switch b { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform 0.2s; }
.set-row.on .switch { background: #34c46a; }
.set-row.on .switch b { transform: translateX(18px); }
.set-id { display: flex; align-items: center; gap: 8px; }
.set-id b { font-family: ui-monospace, Menlo, monospace; font-size: 14px; letter-spacing: 0.06em; user-select: all; -webkit-user-select: all; color: var(--gold); }
.set-mini { padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); }
.set-sub { font-size: 13px; font-weight: 600; color: var(--muted); }
.set-foot { font-size: 11.5px; color: var(--muted); text-align: center; }

/* Results: the Crowns reward pops right under the verdict, then flies to the header (2026-10-13) */
.results .verdict-slot .reward-row { position: absolute; left: 50%; top: calc(100% - 2px); translate: -50% 0; z-index: 12; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.results .verdict-slot .reward-row .reward-pop, .results .verdict-slot .reward-row .boost-earned { position: static; translate: none; top: auto; left: auto; }

/* Intro v8.1 (2026-10-13, "just a bit" more entrance): a slight spin-in from above and a bright flash on impact */
@keyframes thumpIn2 { 0% { opacity: 0; transform: translateY(-110px) scale(1.34) rotate(-9deg); filter: blur(2px); } 65% { opacity: 1; filter: none; } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes thumpSettle2 { 0% { transform: scale(1.08, 0.88); filter: brightness(1.45); } 50% { transform: scale(0.97, 1.04); filter: brightness(1.12); } 100% { transform: none; filter: none; } }
.spotlight .spot-item .item-img, .spotlight.final .spot-item .item-img { animation: thumpIn2 0.32s 0.12s cubic-bezier(.5, 0, .75, .4) both, thumpSettle2 0.34s 0.44s ease-out; }

/* Freebies: bigger items, sized by how many there are (Ben: a single free item looked tiny) */
.freebies .fb-title { font-size: 24px; }
.freebies .fb-items.n1 .fb-item { width: 170px; } .freebies .fb-items.n1 .fb-item .item-img { width: 150px !important; height: 150px !important; }
.freebies .fb-items.n2 .fb-item { width: 130px; } .freebies .fb-items.n2 .fb-item .item-img { width: 118px !important; height: 118px !important; }
.freebies .fb-items.n3 .fb-item { width: 104px; } .freebies .fb-items.n3 .fb-item .item-img { width: 96px !important; height: 96px !important; }
.freebies .fb-items.n1 .fb-item span, .freebies .fb-items.n2 .fb-item span { font-size: 16px; font-weight: 800; }
.freebies .fb-items.n3 .fb-item span { font-size: 13.5px; }
.freebies .fb-items.n1, .freebies .fb-items.n2, .freebies .fb-items.n3 { max-width: 360px; gap: 12px 10px; }
/* the card frames arrive with the drafts (empty frames during the score count looked odd) */

/* ===== Cleaner pass (2026-10-13, Ben: too much glow; items not "clean") ===== */
/* Items: the art already has its own thin gold ring. Drop the extra CSS ring + glow, and zoom the art so its ring sits right
   at the edge of the circle — one crisp ring instead of two. */
.item-img { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); }
.item-img img { transform: scale(1.085); }
.spotlight .item-img, .spotlight .spot-item .item-img { box-shadow: 0 0 34px rgba(255, 200, 61, 0.28), 0 8px 24px rgba(0, 0, 0, 0.5); }
.freebies .fb-item .item-img { box-shadow: 0 0 18px rgba(255, 200, 61, 0.22), 0 4px 12px rgba(0, 0, 0, 0.45); }
/* Results: toned-down winner — colour, a soft glow, no neon */
.results .race-side.winner .race-score, .results .race-side.side-you.winner .race-score, .results .race-side.side-opp.winner .race-score { text-shadow: 0 0 10px rgba(255, 200, 61, 0.25); }
.results .race-side.side-opp.winner .race-score { text-shadow: 0 0 10px rgba(167, 139, 250, 0.3); }
.results .race-side.winner .race-bar div { box-shadow: none; }
.duel-card.card-you.winner { box-shadow: 0 0 12px rgba(255, 200, 61, 0.18); }
.duel-card.card-opp.winner { box-shadow: 0 0 12px rgba(139, 92, 246, 0.22); }
/* reward chips get their own row between the verdict and the cards (they were sliding under the cards) */
.results .verdict-slot .reward-row { position: static; translate: none; justify-content: center; min-height: 30px; margin-top: 4px; }
.results .race.duel { padding-top: 14px !important; }
/* "It's yours!" lands with the gavel, not after the item has already flown away */
.mine-text { animation-delay: 0.4s !important; }
.mine-burst i { animation-delay: 0.3s !important; }
.hdr-profile .lvl-flash { animation-duration: 2.4s; font-size: 12px; display: flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: rgba(6, 30, 18, 0.92); border: 1px solid rgba(52, 229, 140, 0.6); }
.lf-gift { display: inline-flex; align-items: center; gap: 3px; color: #a5f3fc; }

/* ===== Intro v9 (2026-10-13): 0.25s anticipation — the stage light swells (with a riser sound), THEN the item drops ===== */
.spotlight:not(.freebies)::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 50% 44%, rgba(255, 236, 170, 0.5), rgba(255, 200, 61, 0.14) 26%, transparent 55%);
  animation: stageSwell 0.95s ease-out both; }
@keyframes stageSwell { 0% { opacity: 0; transform: scale(0.7); } 26% { opacity: 1; transform: scale(1); } 70% { opacity: 0.55; } 100% { opacity: 0.35; transform: scale(1); } }
.spotlight > * { position: relative; z-index: 1; }
.spotlight.leaving::after { opacity: 0 !important; transition: opacity 0.2s; animation: none; }
.spotlight .spot-item .item-img, .spotlight.final .spot-item .item-img { animation: thumpIn2 0.32s 0.37s cubic-bezier(.5, 0, .75, .4) both, thumpSettle2 0.34s 0.69s ease-out; }
.spotlight .spot-burst, .spotlight.final .spot-burst { animation-delay: 0.67s; }
.spotlight .spot-name, .spotlight.final .spot-name { animation-delay: 0.65s; }
.spotlight.final .spot-item::after { animation-delay: 0.83s; }
.spotlight .auto-note { animation-delay: 0.8s; }

/* ===== Progress sheet v2 (2026-10-13): Crowns up top + tier ladder ===== */
.prog-crowns-big { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 200, 61, 0.12), rgba(255, 200, 61, 0.04)); border: 1px solid rgba(255, 200, 61, 0.35); }
.pcb-total { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--muted); }
.pcb-total b { font-size: 22px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.pcb-total .crown-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, var(--gold) 50%, var(--gold2)); font-size: 14px; box-shadow: 0 0 8px rgba(255, 200, 61, 0.5); }
.pcb-earn { font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: right; }
.tier-ladder { position: relative; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.tier-ladder::before { content: ""; position: absolute; left: 33px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 200, 61, 0.35)); }
.tier-step { position: relative; display: flex; align-items: center; gap: 12px; padding: 4px 10px; border-radius: 14px; border: 1px solid transparent; }
.ts-badge { position: relative; z-index: 1; width: 48px; display: grid; place-items: center; }
.ts-badge .rank-badge { display: block; }
.ts-name { flex: 1; display: flex; flex-direction: column; font-size: 14px; font-weight: 800; line-height: 1.2; }
.ts-name small { font-size: 11px; font-weight: 600; color: var(--muted); }
.ts-right { font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.ts-gift { color: #a5f3fc; display: inline-flex; align-items: center; gap: 3px; }
.ts-done { font-style: normal; color: #34e58c; font-size: 15px; }
.tier-step.ahead .ts-badge, .tier-step.ahead .ts-name { opacity: 0.5; }
.tier-step.cur { background: linear-gradient(90deg, rgba(255, 200, 61, 0.14), rgba(255, 200, 61, 0.03)); border-color: rgba(255, 200, 61, 0.55); box-shadow: 0 0 12px rgba(255, 200, 61, 0.15); padding-block: 6px; }
.tier-step.cur .ts-name { font-size: 15.5px; color: #ffe7a3; }
.ts-here { font-style: normal; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; letter-spacing: 0.04em; color: #2a1700; background: linear-gradient(180deg, #ffe07a, #f5a524); }
.pcb-earn { display: flex; flex-direction: column; line-height: 1.35; white-space: nowrap; }

/* ===== Results v6 (SB6, 2026-10-13) ===== */
/* Crowns bar under the verdict (replaces the flying chip) */
.crowns-bar { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 40px; margin-top: 4px; opacity: 0; transform: translateY(4px); transition: opacity 0.3s, transform 0.3s; }
.crowns-bar.on { opacity: 1; transform: none; }
.cb-row { display: flex; align-items: center; gap: 8px; width: min(78%, 280px); }
.cb-track { flex: 1; height: 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); overflow: hidden; }
.cb-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f5a524, #ffe07a); transition: width 0.85s cubic-bezier(.3, .8, .3, 1); }
.cb-track i.snap { transition: none; }
.cb-gain { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 900; color: var(--gold); white-space: nowrap; }
.cb-gain svg, .cb-gain img { width: 16px; height: 16px; }
.cb-text { font-size: 11.5px; font-weight: 600; color: #b9b4e6; font-variant-numeric: tabular-nums; }
.cb-text b { color: var(--gold); }
.cb-flash { font-size: 12.5px; font-weight: 900; color: #34e58c; padding: 2px 10px; border-radius: 99px; background: rgba(6, 30, 18, 0.9); border: 1px solid rgba(52, 229, 140, 0.6); display: inline-flex; align-items: center; gap: 6px; animation: popIn 0.35s cubic-bezier(.2, 1.7, .4, 1) both; }
.cb-flash span { display: inline-flex; align-items: center; gap: 3px; color: #a5f3fc; }
/* centred card headers + VS */
.results .race.duel { position: relative; }
.duel-vs { position: absolute; left: 50%; top: 46px; translate: -50% 0; z-index: 4; font-size: 17px; color: #fff; padding: 3px 9px; border-radius: 99px; background: #1b1650; border: 1px solid #4b42a0; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); pointer-events: none; }
.duel-card .race-side, .duel-card .race-side.side-opp, .duel-card .race-side.side-you { align-items: center !important; text-align: center !important; }
.duel-card .race-side .race-who, .duel-card .race-side.side-opp .race-who, .duel-card .race-side.side-you .race-who { flex-direction: column !important; gap: 4px; align-items: center; }
.duel-card .race-name { font-size: 13px; max-width: 100%; }
.duel-card .race-bar { display: none; }
.duel-card .race-grade { display: flex; justify-content: center; }
/* calmer winner card: gold frame + soft top gradient, no glow */
.duel-card.card-you.winner { border-color: rgba(255, 200, 61, 0.9); background: linear-gradient(180deg, rgba(255, 200, 61, 0.16), rgba(255, 200, 61, 0.02) 42%); box-shadow: none; transform: none; }
.duel-card.card-opp.winner { border-color: rgba(183, 148, 255, 0.95); background: linear-gradient(180deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.03) 42%); box-shadow: none; transform: none; }
.duel-card.card-you:not(.winner), .duel-card.card-opp:not(.winner) { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.12); }
.results .race-side.winner .race-score { text-shadow: none !important; animation: none; }
/* in a bid war: one small sound button instead of the top bar */
.sound-mini { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 60; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: rgba(20, 16, 60, 0.75); border: 1px solid rgba(255, 255, 255, 0.18); }
.screen.auction { padding-top: 10px; }
.screen.auction .round-bar { padding-right: 40px; }
.sound-mini { top: calc(9px + env(safe-area-inset-top, 0px)); width: 30px; height: 30px; font-size: 14px; }
.screen.results { padding-top: 12px; }
.duel-card .race-side .race-who, .duel-card .race-side.side-opp .race-who, .duel-card .race-side.side-you .race-who { gap: 9px !important; }
.results .race.duel { padding-top: 24px !important; }
.duel-card .crown-drop { display: none; } /* the WINNER tag + frame mark the winner; the crown sat under the tag */

/* ===== Budget next to the bid controls (2026-10-14) ===== */
.wallet-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 6px; font-size: 13px; font-weight: 700; color: #cfc9f3; font-variant-numeric: tabular-nums; }
.wallet-row b { color: #fff; font-weight: 900; }
.wallet-row .wr-you b { color: var(--gold); }
.wallet-row .wr-max { color: #fff !important; padding: 0 6px; border-radius: 99px; background: rgba(255, 200, 61, 0.18); border: 1px solid rgba(255, 200, 61, 0.45); }
.wallet-row .wr-opp { color: #b9a8f0; } .wallet-row .wr-opp b { color: #d8c8ff; }
.auction .draft-budget { display: none; }

/* ===== Intro v10 (2026-10-14): spotlight reveal instead of the thump ===== */
/* a light cone from above clicks on after the riser, the item fades up inside it with a glint, the name fades in */
.spotlight:not(.freebies)::after { background:
    radial-gradient(ellipse 34% 26% at 50% 50%, rgba(255, 240, 200, 0.32), transparent 70%),
    linear-gradient(180deg, rgba(255, 236, 170, 0.22), rgba(255, 236, 170, 0.04) 70%);
  clip-path: polygon(41% 0, 59% 0, 86% 78%, 14% 78%);
  animation: lightOn 0.6s 0.2s ease-out both; }
@keyframes lightOn { 0% { opacity: 0; } 20% { opacity: 0.9; } 30% { opacity: 0.45; } 45%, 100% { opacity: 1; } }
.spotlight .spot-item .item-img, .spotlight.final .spot-item .item-img { animation: revealIn 0.5s 0.3s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes revealIn { 0% { opacity: 0; transform: scale(0.9); filter: brightness(0.35); } 60% { opacity: 1; filter: brightness(1.15); } 100% { opacity: 1; transform: none; filter: none; } }
.spotlight .spot-burst, .spotlight.final .spot-burst { display: none !important; }
.spotlight .spot-item::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 120% 0;
  animation: glint 0.7s 0.7s ease-in-out both; }
@keyframes glint { from { background-position: 120% 0; opacity: 1; } to { background-position: -40% 0; opacity: 1; } }
.spotlight .spot-name, .spotlight.final .spot-name { animation: softRise 0.35s 0.6s ease-out both; }
.spotlight.final .spot-item::after { display: none; }
.spotlight.final::after { background:
    radial-gradient(ellipse 36% 28% at 50% 50%, rgba(255, 224, 140, 0.45), transparent 70%),
    linear-gradient(180deg, rgba(255, 214, 110, 0.32), rgba(255, 214, 110, 0.06) 70%); }
.spotlight.leaving .spot-item::before { display: none; }

/* ===== Results: when the rival wins, their card is a touch brighter (Ben: lots of purple, hard to read) ===== */
.duel-card.card-opp.winner { border-color: #c4a8ff; border-width: 2px; background: linear-gradient(180deg, rgba(196, 168, 255, 0.3), rgba(167, 139, 250, 0.06) 45%); box-shadow: 0 0 14px rgba(167, 139, 250, 0.3); }
.duel-card.card-opp.winner .race-score { color: #efe6ff !important; }
.card-opp .win-tag { background: linear-gradient(180deg, #d4bfff, #8b5cf6); color: #fff; text-shadow: 0 1px 0 rgba(60, 20, 140, 0.6); }

/* ===== Freebies v3 (SB7, 2026-10-14): final drafts board ===== */
.spotlight.fb-board { justify-content: flex-start; padding: calc(28px + env(safe-area-inset-top, 0px)) 14px 20px; gap: 6px; cursor: pointer; }
.fbb-title { font-size: 26px; color: #ffd45a; text-align: center; animation: softRise 0.3s both; }
.fb-board.final .fbb-title { color: #fff; }
.fbb-sub { font-size: 12.5px; font-weight: 700; color: #b9b4e6; text-align: center; }
.fb-mini-slot { height: 168px; display: grid; place-items: center; margin: 4px 0; }
.fb-mini { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: dealCard 0.42s cubic-bezier(.2, 1.4, .4, 1) both; }
.fb-mini .item-img { box-shadow: 0 0 26px rgba(255, 200, 61, 0.3), 0 6px 16px rgba(0, 0, 0, 0.5); }
.fb-mini b { font-size: 16px; font-weight: 800; }
.fb-stamp { position: absolute; top: 40px; left: 50%; translate: -50% 0; font-size: 30px; color: #7fd4ff; transform: rotate(-10deg); text-shadow: 0 2px 0 #000, 0 0 12px rgba(127, 212, 255, 0.6); animation: stampIn 0.3s 0.15s cubic-bezier(.3, 1.8, .5, 1) both; pointer-events: none; }
@keyframes stampIn { from { opacity: 0; transform: rotate(-10deg) scale(1.8); } to { opacity: 1; transform: rotate(-10deg) scale(1); } }
.fbb-board { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; }
.fbb-row { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 9px 10px 11px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(255, 255, 255, 0.12); }
.fbb-row.you { border-color: rgba(255, 200, 61, 0.5); }
.fbb-row.opp { border-color: rgba(167, 139, 250, 0.55); }
.fbb-row.receiving { background: rgba(255, 255, 255, 0.07); }
.fbb-who { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.fbb-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; justify-items: center; }
.fbb-slot { position: relative; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; border: 1.5px dashed rgba(180, 160, 255, 0.35); }
.fbb-slot:has(.item-img) { border-color: transparent; }
.fbb-slot.wait { border: 2px dashed rgba(255, 220, 140, 0.85); animation: slotPulse 1s ease-in-out infinite; }
@keyframes slotPulse { 50% { box-shadow: 0 0 14px rgba(255, 200, 61, 0.55); transform: scale(1.05); } }
.fbb-slot.land .item-img { animation: landPop 0.45s cubic-bezier(.2, 1.6, .4, 1) both; box-shadow: 0 0 0 2px #ffd45a, 0 0 16px rgba(255, 200, 61, 0.7); }
@keyframes landPop { from { transform: scale(0.6); } to { transform: none; } }
.fbb-slot .slot-free { bottom: -6px; }
.fbb-chat { position: absolute; right: 8px; top: -16px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 12px 12px 3px 12px; background: #fff; color: #1b1650; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); animation: popIn 0.3s cubic-bezier(.2, 1.7, .4, 1) both; z-index: 3; }
.fb-board .fb-tip, .fb-board .free-chip { margin-top: 8px; }
.fb-board.final .fbb-board { animation: boardBump 0.4s ease-out; }
@keyframes boardBump { 40% { transform: scale(1.02); } }

/* ===== Boosters under the timer (SB8, 2026-10-14) ===== */
.controls { position: relative; }
.bst-bubble { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; color: #1b1650; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); animation: popIn 0.25s cubic-bezier(.2, 1.6, .4, 1) both; }
.bst-bubble::after { content: ""; position: absolute; bottom: -7px; left: 50%; translate: -50% 0; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
.bst-ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; }
.bst-ico img, .bst-ico svg { width: 30px; height: 30px; }
.bst-txt { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.3; }
.bst-use { flex: none; padding: 8px 14px; border-radius: 10px; border: 0; font-weight: 900; font-size: 14px; color: #2a1700; background: linear-gradient(180deg, #ffe07a, #f5a524); }
.bst-x { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(27, 22, 80, 0.1); color: #1b1650; font-size: 11px; }
.boost-btn .bb-sub b { color: #fff; }
.ftue-sheet { position: absolute; inset: 0; z-index: 80; display: grid; place-items: end center; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: rgba(4, 4, 20, 0.72); animation: qsFade 0.2s both; }
.ftue-card { width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 18px 12px; border-radius: 20px; text-align: center; background: linear-gradient(180deg, #2a2070, #141a45); border: 1.5px solid rgba(255, 200, 61, 0.6); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6); animation: popIn 0.3s cubic-bezier(.2, 1.5, .4, 1) both; }
.ftue-paused { font-size: 11.5px; font-weight: 800; padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); color: #cfc9f3; }
.ftue-ico img, .ftue-ico svg { width: 56px; height: 56px; }
.ftue-card b.brush { font-size: 24px; color: #ffd45a; }
.ftue-card p { margin: 0; font-size: 14.5px; line-height: 1.4; color: #e3defc; }
.ftue-use { width: 100%; margin-top: 4px; }
.ftue-later { border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 700; padding: 6px; }
.spotlight.fb-board { background: radial-gradient(circle at 50% 30%, #2f1470, #0a0920 70%); }

/* Quick Battle reel: crisp icons while rolling (Ben 2026-10-14: low quality before the topic is won).
   No motion blur on the strip and no filter drop-shadow on the icons (Safari rasterises filtered layers at low res
   while they move); a plain box-shadow instead, and the strip on its own compositor layer. */
.topic-reel:not(.locked) .reel-strip, .reel-strip { filter: none !important; will-change: transform; backface-visibility: hidden; }
.reel-cell .item-img { filter: none !important; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); }

/* ===== Fix pass (Ben 2026-10-14) ===== */
/* bid war: no pedestal ellipse under the item (it belonged to the old "lands on the stand" idea) */
.theme-game .pedestal, .pedestal { display: none !important; }
/* gear instead of the sound button, inset from the phone's rounded corner */
.gear-mini { top: calc(10px + env(safe-area-inset-top, 0px)); right: 16px; width: 32px; height: 32px; color: #d9d3ff; }
.gear-mini svg { width: 18px; height: 18px; display: block; }
.screen.auction .round-bar { padding-right: 46px; }
/* budget: two clear money chips — yours (gold) and the rival's (purple); no "max bid" */
.wallet-row { padding: 0 0 8px; }
.wr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; border-radius: 99px; }
.wr-chip.you { background: rgba(255, 200, 61, 0.12); border: 1px solid rgba(255, 200, 61, 0.5); }
.wr-chip.opp { padding: 4px 5px 4px 12px; background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.5); }
.wr-coin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: 16px; font-weight: 900; color: #3a2400; background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc83d 55%, #d68a00); box-shadow: 0 0 8px rgba(255, 200, 61, 0.5); }
.wr-txt { display: flex; flex-direction: column; line-height: 1.05; }
.wr-chip.opp .wr-txt { align-items: flex-end; }
.wr-txt b { font-size: 20px; font-weight: 900; color: #ffd45a; font-variant-numeric: tabular-nums; }
.wr-chip.opp .wr-txt b { color: #d8c8ff; }
.wr-txt small { font-size: 10.5px; font-weight: 700; color: #b9b4e6; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* centre stage: the reveal starts less dark, so it never reads as "still loading" */
@keyframes revealIn { 0% { opacity: 0.25; transform: scale(0.92); filter: brightness(0.6); } 60% { opacity: 1; filter: brightness(1.12); } 100% { opacity: 1; transform: none; filter: none; } }
/* first-time booster card: the item stays lit above the dim, an ✕ instead of "Not now" */
.screen.auction.ftue-on .auction-item { position: relative; z-index: 81; box-shadow: 0 0 0 2px rgba(255, 200, 61, 0.7), 0 0 30px rgba(255, 200, 61, 0.3); }
.ftue-sheet { place-items: end center; }
.ftue-card { position: relative; }
.ftue-x { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #cfc9f3; font-size: 13px; }
/* freebies v3.1: bigger items and slots */
.fb-mini-slot { height: 200px; }
.fbb-slot { width: 70px; height: 70px; }
.fbb-slots { gap: 6px; }
.fb-stamp { top: 52px; font-size: 34px; }
/* Results: everything a touch lower */
.screen.results { padding-top: 30px; }
/* Crowns bar v2: the chip pops, flies into the bar, then the bar fills */
.crowns-bar { position: relative; }
.cb-row { width: min(80%, 290px); }
.cb-crown { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc83d 55%, #d68a00); flex: none; }
.cb-crown svg, .cb-crown img { width: 14px; height: 14px; }
.cb-gain { display: none; }
.cb-chip { position: absolute; left: 50%; top: -30px; z-index: 5; display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 99px; font-size: 18px; font-weight: 900; color: #3a2400; background: linear-gradient(180deg, #ffe07a, #f5a524); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); translate: -50% 0; }
.cb-chip svg, .cb-chip img { width: 18px; height: 18px; }
.cb-chip.pop { animation: popIn 0.35s cubic-bezier(.2, 1.7, .4, 1) both; }
.cb-chip.fly { animation: chipToBar 0.45s cubic-bezier(.5, 0, .7, 1) forwards; }
@keyframes chipToBar { from { transform: none; opacity: 1; } to { transform: translate(-40px, 34px) scale(0.35); opacity: 0.2; } }
/* the board inherits .spotlight's item "dealIn" animation — not wanted here (it shrank the dealt item mid-beat) */
.fb-board .item-img { animation: none; }
.fb-board .fbb-slot.land .item-img { animation: landPop 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
.screen.results .verdict-slot { margin-top: 18px !important; }

/* ===== Fix pass 2 (Ben 2026-10-14) ===== */
/* bid war: the gear no longer sits on the item card — the card starts lower */
.screen.auction .round-bar { margin-bottom: 10px; min-height: 32px; }
.gear-mini { top: calc(8px + env(safe-area-inset-top, 0px)); }
/* Deep Pockets at your max: one line, same height as the normal bid row (no layout jump) */
.boost-btn.calm { flex-direction: row !important; gap: 10px; padding: 0 12px; min-height: 56px; }
.boost-btn.calm .bb-main { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }
.boost-btn.calm .bb-main img, .boost-btn.calm .bb-main svg { width: 24px; height: 24px; }
.boost-btn.calm .bb-sub { font-size: 12px; padding: 2px 7px; border-radius: 99px; background: rgba(6, 42, 20, 0.15); }
.boost-row .pass.even { flex: 0 0 30%; min-height: 56px; }
.boost-zone { gap: 10px; }
/* Judge "calculating" screen: sits lower */
.judge.staged { padding-top: max(70px, 11vh); }
/* Results: less crowded — the Community Score footnote goes, the Crowns chip lives right of the bar (not over the title) */
.results .community-foot { display: none; }
.cb-row { width: min(72%, 260px); }
.crowns-bar { flex-direction: column; }
.cb-chip { top: auto; bottom: 18px; left: auto; right: max(4px, calc(50% - 175px)); translate: none; font-size: 15px; padding: 3px 10px; }
@keyframes chipToBar { from { transform: none; opacity: 1; } to { transform: translate(-70px, 10px) scale(0.35); opacity: 0.15; } }
.results .judge-line-card { margin-top: 2px; }
.boost-btn.calm { position: relative; flex-direction: column !important; align-items: flex-start; justify-content: center; gap: 2px; padding: 6px 10px 6px 50px; }
.boost-btn.calm .bb-main { font-size: 16px; }
.boost-btn.calm .bb-main img, .boost-btn.calm .bb-main svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; }
.boost-btn.calm .bb-sub { padding: 0; background: none; font-size: 12px; }
.boost-row .pass.even { flex: 0 0 32%; }

/* ===== Results v6.2 (2026-10-14) ===== */
/* Crowns chip rises from your score and flies into the bar */
.cb-fly { position: fixed; z-index: 90; pointer-events: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 99px; font: 900 20px/1.1 "Sora", system-ui, sans-serif; color: #3a2400; background: linear-gradient(180deg, #ffe07a, #f5a524); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 200, 61, 0.5); white-space: nowrap; }
.cb-fly-crown { font-size: 16px; }
.cb-chip { display: none; }
/* top breathing room: title → bar → text → cards */
.results .crowns-bar { margin-top: 10px; gap: 6px; }
.results .race.duel { padding-top: 30px !important; }
/* Community Score is back, as one small line under the cards */
.results .community-foot { display: block; margin-top: 2px; }
/* Item reveal B (2026-10-14): no light beam — a quick fade-in with a single shine sweep */
.spotlight:not(.freebies)::after { display: none !important; }
.spotlight .spot-item .item-img, .spotlight.final .spot-item .item-img { animation: revealB 0.35s 0.25s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes revealB { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: none; } }
.spotlight .spot-item::before { animation: glint 0.6s 0.5s ease-in-out both; }
.spotlight .spot-name, .spotlight.final .spot-name { animation: softRise 0.3s 0.45s ease-out both; }
.results .crowns-bar { margin-top: 16px; }
.results .race.duel { padding-top: 40px !important; }
.screen.results .verdict-slot { margin-top: 26px !important; }
.results .verdict-slot { height: auto !important; max-height: none !important; flex: none !important; justify-content: flex-start !important; }
.results .verdict-slot { min-height: 116px !important; } /* reserves the title + Crowns bar space, so the cards do not jump when the verdict lands */

/* ===== Freebies v4 (SB9, 2026-10-14): flip cards in place ===== */
.fb-board.v4 { justify-content: center; gap: 8px; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
.fb-board.v4 .fbb-title { font-size: 28px; }
.fb-board.v4 .fbb-sub { margin-bottom: 10px; min-height: 16px; }
.fb-board.v4 .fbb-board { gap: 14px; }
.fbc-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fbc-cell { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.fbc-card { position: relative; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; perspective: 400px; }
.fbc-card.empty { border: 1.5px dashed rgba(180, 160, 255, 0.35); width: 66px; height: 66px; }
.fbc-card.back { width: 60px; height: 72px; border-radius: 14px; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(160deg, #ffe58a, #f5a524 70%); box-shadow: 0 4px 0 #a86a00, 0 6px 14px rgba(0, 0, 0, 0.45); animation: cardIn 0.35s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: var(--d, 0s); }
.fbc-card.back img { width: 30px; height: 30px; border-radius: 8px; }
.fbc-card.back b { font-size: 10px; font-weight: 900; letter-spacing: 0.1em; color: #3a2400; }
.fbc-card.back.tappable { cursor: pointer; animation: cardIn 0.35s cubic-bezier(.2, 1.5, .4, 1) both, cardWiggle 1.4s 0.6s ease-in-out infinite; animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.6s); }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes cardWiggle { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-5deg) scale(1.04); } 86% { transform: rotate(4deg) scale(1.04); } 94% { transform: rotate(-2deg); } }
.fbc-card.flipped { animation: cardFlip 0.45s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes cardFlip { 0% { transform: rotateY(90deg) scale(0.9); filter: brightness(1.6); } 60% { transform: rotateY(-8deg) scale(1.06); filter: brightness(1.15); } 100% { transform: none; filter: none; } }
.fbc-card.flipped .item-img { box-shadow: 0 0 0 2px #ffd45a, 0 0 14px rgba(255, 200, 61, 0.55); }
.fbc-card .slot-free { bottom: -6px; }
.fbc-name { font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; color: #e3defc; min-height: 26px; max-width: 80px; text-wrap: balance; overflow: hidden; }
.fb-board.v4 .fbb-row { padding: 10px 8px 8px; }
.fb-board.v4 .fbb-who { position: relative; }
.fb-board.v4 .fbb-chat { top: -6px; right: 0; }
.fb-board.v4.final .fbb-board { animation: boardBump 0.4s ease-out; }
.fbc-cell { gap: 10px; }

/* 2026-10-14: no gear over centre stage / the free-items board; the gavel leaves with the item; Results cards a bit higher */
body:has(.spotlight) .gear-mini { opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.item-stage:has(.flown) .gavel { opacity: 0; transition: opacity 0.25s; }
.results .race.duel { padding-top: 28px !important; }
.results .crowns-bar { margin-top: 12px; }
/* Results: cards a bit higher again (Ben 2026-10-14) */
.screen.results .verdict-slot { margin-top: 14px !important; min-height: 108px !important; }
.results .crowns-bar { margin-top: 8px; }
.results .race.duel { padding-top: 18px !important; }

/* ===== Results v7 (2026-10-14): item-by-item tally ===== */
.results .res-item { transition: opacity 0.25s, filter 0.25s; }
.results .res-item.dim { opacity: 0.32; filter: saturate(0.4); }
.results .res-item.dim .res-score { visibility: hidden; }
.results .res-item.just { animation: tallyPop 0.38s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tallyPop { 0% { transform: scale(0.94); box-shadow: 0 0 0 2px rgba(255, 224, 140, 0.9), 0 0 18px rgba(255, 200, 61, 0.6); } 100% { transform: none; box-shadow: none; } }
.results .res-item.just .res-score { animation: ptsPop 0.38s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes ptsPop { from { transform: scale(1.6); } to { transform: none; } }
.results .verdict-row.pending { visibility: hidden; }
/* cards are framed from the first frame now; the winner frame/tag come with the verdict */
.results .duel-card { transition: border-color 0.35s, background 0.35s, box-shadow 0.35s; }
/* Community line: one line */
.results .community-foot { white-space: nowrap; font-size: 12px; }
/* everything except the buttons a bit higher */
.screen.results { padding-top: 16px; }
.screen.results .verdict-slot { margin-top: 4px !important; }
.results .duel-card .reveal { opacity: 1 !important; visibility: visible !important; animation: none !important; } /* rows are on screen from the first frame (dimmed until tallied) */
/* level-up pill sits over the top of the bar area — the bar and "x / y Crowns" stay put (Ben 2026-10-14) */
.results .crowns-bar .cb-flash { position: absolute; left: 50%; top: -14px; translate: -50% 0; z-index: 6; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
/* level-up v2: the pill takes the small text line's place (same height); the bar never disappears */
.results .crowns-bar .cb-flash { position: static; translate: none; box-shadow: none; padding: 1px 10px; font-size: 12px; }
.cb-line { min-height: 20px; display: flex; align-items: center; justify-content: center; }
.cb-track.full-glow { box-shadow: 0 0 0 1px rgba(255, 224, 140, 0.8), 0 0 14px rgba(255, 200, 61, 0.7); }
.cb-track.refill i { transition: width 0.9s cubic-bezier(.3, .8, .3, 1); }
.results .verdict-slot { min-height: 112px !important; }
.results .verdict-slot { min-height: 115px !important; }
.screen.results .verdict-slot { min-height: 112px !important; }

/* Results v10 — crowd roll (SB10, 2026-10-14): ? → rolling (dimmer) → landed (pop + ★); the live leader's total glows */
.results .res-pct.res-q { color: #7d77b8 !important; min-width: 2.2em; text-align: right; }
.results .res-item.sc-roll .res-pct { opacity: 0.55; }
.results .res-item.sc-in .res-pct { animation: rollPop 0.3s ease-out; }
.results .res-item.sc-in .perfect-star { animation: rollPop 0.35s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes rollPop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.results .race-score { font-variant-numeric: tabular-nums; transition: color 0.2s, text-shadow 0.2s; }
.results.stage-race .race-side .race-score { color: #cfcae9; }
.results.stage-race .race-side.side-you.leading .race-score { color: var(--you) !important; text-shadow: 0 0 14px rgba(255, 200, 61, 0.6) !important; }
.results.stage-race .race-side.side-opp.leading .race-score { color: #c4b0ff !important; text-shadow: 0 0 14px rgba(167, 139, 250, 0.75) !important; }

/* ===== Freebies v4.1 (2026-10-14): slower, and nothing jumps ===== */
/* top-anchored (not centred), so the ¾ chip / Judge tip appearing below can't push the board up */
.fb-board.v4 { justify-content: flex-start; padding-top: calc(70px + env(safe-area-inset-top, 0px)); }
.fb-board.v4 .fbb-title { height: 36px; line-height: 36px; white-space: nowrap; animation: softRise 0.35s both; }
.fb-board.v4 .fbb-sub { height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fbb-extra { min-height: 110px; display: flex; flex-direction: column; align-items: center; }
/* the row that is getting the free items glows while its cards flip, so the rival's freebies are noticed */
.fb-board.v4:not(.final) .fbb-row.receiving { animation: rowGlow 1.2s ease-in-out infinite; }
.fbb-row.opp.receiving { --glow: rgba(167, 139, 250, 0.55); }
.fbb-row.you.receiving { --glow: rgba(255, 200, 61, 0.5); }
@keyframes rowGlow { 50% { box-shadow: 0 0 18px var(--glow); } }
.fbc-card.flipped { animation-duration: 0.6s; }
.fbc-card.flipped .item-img { animation: flipGlow 1.2s ease-out both; }
@keyframes flipGlow { 0% { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255, 255, 255, 0.8); } 100% { box-shadow: 0 0 0 2px #ffd45a, 0 0 14px rgba(255, 200, 61, 0.55); } }
.fbb-row.opp .fbc-card.flipped .item-img { animation-name: flipGlowOpp; }
@keyframes flipGlowOpp { 0% { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255, 255, 255, 0.8); } 100% { box-shadow: 0 0 0 2px #a78bfa, 0 0 14px rgba(167, 139, 250, 0.6); } }

/* Draft: the target circle stays (and brightens) while an item flies to it, and fades as the item lands */
.slot.filled.awaiting { border: 1.5px dashed rgba(220, 205, 255, 0.75); animation: slotAwait var(--land-at, 1.5s) linear forwards; }
@keyframes slotAwait { 0%, 99% { border-color: rgba(220, 205, 255, 0.75); } 100% { border-color: transparent; } }

/* Results: the ¾ lives on the item icon only (the "¾ of 85" line was cut names) — so make that badge readable */
.results .res-badge.reduced { font-size: 12px; line-height: 15px; padding: 0 5px; border-radius: 6px; bottom: -7px; left: 26%; font-weight: 900; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.results .res-badge:not(.reduced) { font-size: 8.5px; line-height: 13px; padding: 0 4px; bottom: -7px; }

/* Item art without the circle clip (2026-10-14): the .webp art has a transparent background, so whatever pops out of
   the disc (pineapple, cheese, peppers…) stays whole. The ring/shadow still sit on the round box underneath. */
.item-img.cut { overflow: visible; }
.item-img.cut img { transform: none; border-radius: 0; }

/* ===== Freebies v5 (SB11, 2026-10-14): a light version of the bidding screen, one thing at a time ===== */
.auction-item.fb5 { position: relative; cursor: pointer; }
.auction-item.fb5 > :not(.fb5-layer):not(.chat-bubble) { visibility: hidden; }
.fb5-layer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; text-align: center; }
.fb5-banner { animation: softRise 0.35s both; }
.fb5-title { font-size: 30px; line-height: 1.1; color: #ffd45a; }
.fb5-banner.opp .fb5-title { color: #e7dcff; }
.fb5-sub { font-size: 15px; font-weight: 700; color: #d8d2ff; max-width: 280px; text-wrap: balance; line-height: 1.35; }
.fb5-layer .o { color: #c4b0ff; } .fb5-layer .o.you { color: #ffd45a; }
.fb5-tip { margin-top: 10px; max-width: 300px; text-align: left; }
.fb5-item .item-stage { position: relative; display: grid; place-items: center; }
.fb5-item .item-img { width: clamp(130px, 30cqh, 220px) !important; height: clamp(130px, 30cqh, 220px) !important; animation: dealIn 0.5s cubic-bezier(.2, 1.4, .4, 1) both; }
.fb5-item .sold-stamp { animation-delay: 0.3s; }
.fb5-item .item-name { font-size: 24px; font-weight: 900; }
.fb5-item .bid-line { font-size: 15px; }
/* draft circles waiting for a free item */
.slot.wait { border: 2px dashed #ffd45a; animation: waitPulse 1s ease-in-out infinite; }
.draft.side-opp .slot.wait { border-color: #c4b0ff; --wg: rgba(167, 139, 250, 0.75); }
.slot.wait { --wg: rgba(255, 200, 61, 0.7); }
@keyframes waitPulse { 50% { box-shadow: 0 0 12px var(--wg); transform: scale(1.06); } }
.fb5-item .item-img { animation: fb5In 0.45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fb5In { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.fb5-item .sold-stamp { top: 88%; font-size: 30px; padding: 0 10px; border-width: 3px; }
/* free item after its copy flew to the draft: dimmed in place, glow and stamp fade */
.fb5-layer.flown .item-img { opacity: 0.35; filter: saturate(0.4); transition: opacity 0.3s, filter 0.3s; }
.fb5-layer.flown .item-glow, .fb5-layer.flown .sold-stamp { opacity: 0; transition: opacity 0.3s; }
.fb5-item .item-glow { opacity: 0.7; }

/* Item at hand reads brighter (Ben 2026-10-14: navy disc on a dark screen looked dark) — centre stage, bidding, free items.
   The art is lifted a touch, the disc gets a light rim, and the glow behind it is stronger. On the bidding screen the rim
   and glow follow the leader (gold = you, purple = rival); neutral before the first bid. */
.spotlight .item-img img, .auction-item .item-stage .item-img img, .fb5-item .item-img img { filter: brightness(1.14) saturate(1.1) contrast(1.03); }
.spotlight .spot-item .item-img { box-shadow: 0 0 0 2.5px rgba(255, 220, 140, 0.95), 0 0 0 8px rgba(255, 200, 61, 0.12), 0 0 60px 10px rgba(255, 200, 61, 0.45) !important; }
.auction-item .item-stage .item-img { box-shadow: 0 0 0 2.5px rgba(235, 228, 255, 0.75), 0 0 0 8px rgba(255, 255, 255, 0.06), 0 0 46px 6px rgba(190, 160, 255, 0.35); transition: box-shadow 0.4s; }
.auction-item .item-stage:has(.item-glow.lead-you) .item-img { box-shadow: 0 0 0 2.5px rgba(255, 220, 140, 0.95), 0 0 0 8px rgba(255, 200, 61, 0.12), 0 0 50px 8px rgba(255, 200, 61, 0.5); }
.auction-item .item-stage:has(.item-glow.lead-opp) .item-img { box-shadow: 0 0 0 2.5px rgba(214, 196, 255, 0.95), 0 0 0 8px rgba(167, 139, 250, 0.14), 0 0 50px 8px rgba(167, 139, 250, 0.55); }
.auction-item .item-glow { background: radial-gradient(circle, rgba(255, 220, 160, 0.3), rgba(180, 140, 255, 0.22) 48%, transparent 70%); }
.auction-item.sold .item-img img { filter: brightness(0.9) saturate(0.85); }
.fb5-layer.flown .item-img, .fb5-layer.flown .sold-stamp { animation: none; } /* the entry animations' fill would keep them at full opacity */

/* ===== Free items v5.1: bigger, clearer tags; stamp sits on the disc's edge instead of covering the art ===== */
.fb5-layer { gap: 10px; }
.fb5-item .item-name { font-size: 26px; line-height: 1.1; animation: softRise 0.35s 0.1s both; }
.fb5-item .sold-stamp { top: 12%; left: 84%; font-size: 26px; padding: 0 9px; border-width: 3px; animation: stamp 0.32s 0.35s cubic-bezier(.3, 1.8, .5, 1) both !important; z-index: 4; }
.fb5-to-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; animation: softRise 0.35s 0.6s both; }
.fb5-to { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 99px; font-size: 17px; font-weight: 900; }
.fb5-to.opp { color: #f1eaff; background: linear-gradient(180deg, rgba(167, 139, 250, 0.45), rgba(124, 58, 237, 0.35)); border: 1.5px solid #b79cff; box-shadow: 0 0 16px rgba(167, 139, 250, 0.45); }
.fb5-to.you { color: #2a1700; background: linear-gradient(180deg, #ffe07a, #f5a524); border: 1.5px solid #ffe7a0; box-shadow: 0 0 16px rgba(255, 200, 61, 0.5); }
.fb5-quarter { font-size: 15px !important; padding: 4px 10px !important; }
.fb5-count { display: flex; gap: 6px; margin-top: 2px; }
.fb5-count i { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); }
.fb5-count i.done { background: rgba(255, 255, 255, 0.45); }
.fb5-count i.now { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.7); }
.fb5-layer.flown .fb5-to-row { opacity: 0.4; transition: opacity 0.3s; animation: none; }
/* the free item landing in the draft gets a short ring flash, so you see where it went */
.auction .draft .slot .item-img.landing::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: landRing 0.9s var(--land-at, 0ms) ease-out both; }
@keyframes landRing { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); } 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
.fb5-item .sold-stamp { left: 16%; } /* top-left: the rival's chat bubble lives top-right */

/* Results: item names a bit bigger and calmer (Ben 2026-10-14): 15px semi-bold; long names wrap to 2 balanced lines
   (never cut), only the longest step down a little. Rows have a fixed height, so a 2-line name doesn't stretch its card. */
.results .res-name, .results .res-name.long, .results .res-name.xlong, .results .res-name.xxlong {
  font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.15; white-space: normal; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }
.results .res-name.xlong { font-size: 14px; }
.results .res-name.xxlong { font-size: 13.5px; }
.results .res-item { height: clamp(50px, 6.8cqh, 62px); min-height: 0; }
/* the name column is ~75px on a phone: long names may use 3 lines (slightly smaller) rather than being cut */
.results .res-name.long { font-size: 14px; -webkit-line-clamp: 3; line-height: 1.08; }
.results .res-name.xlong { font-size: 13.5px; -webkit-line-clamp: 3; line-height: 1.07; }
.results .res-name.xxlong { font-size: 13px; }
.results .res-item { height: clamp(56px, 7cqh, 62px); padding-top: 3px; padding-bottom: 3px; }
/* give the name column more room (61px → ~72px): tighter card/row padding and gaps */
.results .duel-card { padding-left: 4px !important; padding-right: 4px !important; }
.results .res-item { gap: 4px; padding-left: 3px; padding-right: 5px; }
.results .res-name { hyphens: manual; }
/* names sized per-name by fitResNames() (screens.js); these are the shared rules */
.results .res-name.fit { font-size: 14px; font-weight: 600; line-height: 1.1; letter-spacing: 0; white-space: normal; text-wrap: balance; hyphens: manual;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: normal; }

/* Results totals (Ben 2026-10-14): neutral while the scores roll and the Crowns fill — no live "leader" colour flipping.
   Gold/purple only arrive with the verdict (existing winner rules), lighting up smoothly. */
.results.stage-race .race-side .race-score, .results.stage-frozen .race-side .race-score, .results.stage-tallied .race-side .race-score,
.results.stage-race .race-side.leading .race-score { color: #ecebf7 !important; text-shadow: none !important; }
.results .race-score { transition: color 0.5s ease, text-shadow 0.5s ease; }

/* ===== Results totals — the one rule (Ben 2026-10-14, replaces every earlier colour rule for the totals) =====
   Colour = WHO: your total is always gold, the rival's always purple, from the first frame to the last (like the avatar rings).
   Win/loss = EMPHASIS, only once the verdict lands: the winner's total glows in its own colour; the loser's dims (still readable).
   Nothing changes before the verdict, so the colours never hint at the result. */
.results .race-side.side-you .race-score { color: #ffc83d !important; }
.results .race-side.side-opp .race-score { color: #c4b0ff !important; }
.results .race-side .race-score { text-shadow: none !important; opacity: 1; transition: opacity 0.5s ease, text-shadow 0.5s ease !important; }
.results.stage-landed .race-side.winner.side-you .race-score, .results.stage-drafts .race-side.winner.side-you .race-score { text-shadow: 0 0 18px rgba(255, 200, 61, 0.65) !important; }
.results.stage-landed .race-side.winner.side-opp .race-score, .results.stage-drafts .race-side.winner.side-opp .race-score { text-shadow: 0 0 18px rgba(167, 139, 250, 0.75) !important; }
.results.stage-landed .race-side.loser .race-score, .results.stage-drafts .race-side.loser .race-score { opacity: 0.55; }

/* Level-up tag with its "+2 🔍" gift was 32px tall (the booster icon) and pushed the cards down 7px while it showed.
   The line under the Crowns bar now has a fixed height, and the gift icon is sized to the text. */
.results .crowns-bar .cb-line { height: 20px; min-height: 0; overflow: visible; }
.results .crowns-bar .cb-flash { height: 20px; line-height: 18px; white-space: nowrap; box-sizing: border-box; }
.results .crowns-bar .cb-flash .booster-icon, .results .crowns-bar .cb-flash img, .results .crowns-bar .cb-flash svg { width: 14px !important; height: 14px !important; }

/* Desktop frame: fixed 400×860 layout, scaled to fit the window (see fitFrame in main.js) */
@media (min-width: 520px) {
  .device { width: 400px; height: 860px; flex-shrink: 0; transform: scale(var(--frame-scale, 1)); transform-origin: center center; }
}
@media (max-width: 519px) {
  .stage { align-items: flex-start; justify-content: flex-start; }
  .device { width: var(--frame-w, 100%); height: var(--frame-h, 100%); flex-shrink: 0; transform: scale(var(--frame-scale, 1)); transform-origin: top left; }
}

/* Results on shorter screens (frame under 800px tall, e.g. phones in a browser): the same layout, just tighter —
   so the buttons are on screen without scrolling. */
@container (max-height: 800px) {
  .screen.results { padding-bottom: 8px; gap: 6px; }
  .screen.results .verdict-slot { min-height: 100px !important; margin-top: 6px !important; }
  .results .race.duel { padding-top: 14px !important; }
  .results .duel-card { padding-top: 14px !important; }
  .results .race-avatar .avatar { width: 44px !important; height: 44px !important; }
  .results .race-score { font-size: 38px !important; }
  .results .res-item { height: 50px; }
  .results .res-col { gap: 4px; }
  .results .community-foot { margin: 0; }
  .results .judge-line-card { margin-top: 4px; }
}

/* Bidding screen on frames under 840px (phones in a browser): the item art shrinks evenly (≈200px at 780, 168 at 700) so the drafts stay on screen */
@container (max-height: 840px) {
  .theme-game .auction-item .item-stage .item-img { width: clamp(84px, calc(40cqh - 120px), 262px) !important; height: clamp(84px, calc(40cqh - 120px), 262px) !important; }
  .screen.auction { padding-bottom: 12px; }
}

/* Tier ladder (Ben 2026-10-14: locked tiers were greyed but their rewards weren't). One rule: everything in full colour
   (the ranks ahead are the goal), locked tiers get a small lock by their level, the current tier is clearly highlighted. */
.tier-step.ahead .ts-badge, .tier-step.ahead .ts-name { opacity: 1; }
.ts-name small { display: inline-flex; align-items: center; gap: 4px; }
.ts-lock { width: 10px; height: 12px; color: #8f8ab8; flex-shrink: 0; }
.tier-step.cur { background: linear-gradient(90deg, rgba(255, 200, 61, 0.22), rgba(255, 200, 61, 0.05)); border: 1.5px solid rgba(255, 200, 61, 0.85); box-shadow: 0 0 18px rgba(255, 200, 61, 0.28); }
.tier-step.cur .ts-badge { filter: drop-shadow(0 0 8px rgba(255, 200, 61, 0.55)); }

/* Centre stage: the round label a bit bigger (Ben 2026-10-14) */
.spotlight .spot-label { font-size: 18px; letter-spacing: 0.1em; }
.prog-to-next .bst-ico { width: 18px; height: 18px; vertical-align: -4px; display: inline-block; }

/* Header level number (Ben 2026-10-14: check it's centred): a true circle for 1–2 digits, a pill for 100+, number
   centred both ways (it sat 1px right: uneven 7/5 padding left over from when the shield covered its left edge). */
.hdr-level b { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 17px; height: 17px; padding: 0 4px; line-height: 1; font-variant-numeric: tabular-nums; margin-left: -5px; }
.hdr-level b { padding: 1px 4px 0; } /* Sora digits sit ~0.6px high: nudge the ink to the optical centre */
.prog-to-next .ptn-gift { white-space: nowrap; }

/* Deep Pockets active (Ben 2026-10-16: the extra "Deep Pockets: max $6 for …" row made the screen taller): no extra row —
   your budget chip turns green and says "Max $6 now", with the Deep Pockets icon. Same height as before. */
.wr-chip.you.boosted { border-color: rgba(52, 229, 140, 0.8); box-shadow: 0 0 14px rgba(52, 229, 140, 0.35); animation: popIn 0.35s cubic-bezier(.2, 1.7, .4, 1); }
.wr-chip.you.boosted small { color: #8ff5c0; white-space: nowrap; }
.wr-chip.you.boosted .wr-max { color: #34e58c; font-size: inherit; }
.wr-coin.wr-pockets { background: none; box-shadow: none; display: grid; place-items: center; }
.wr-coin.wr-pockets .bst-ico { width: 30px; height: 30px; }

/* ===== FTUE (SB12 v5, 2026-10-16) ===== */
/* first launch: consent card + the promise */
.screen.onboard { align-items: center; justify-content: center; gap: 22px; text-align: center; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.ob-logo { filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.6)); }
.ob-card { width: min(340px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; border-radius: 20px; text-align: left; animation: popIn 0.35s cubic-bezier(.2, 1.4, .4, 1) both; }
.ob-title { margin: 0; font-size: 26px; text-align: center; color: var(--gold); }
.ob-check, .ob-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.35; text-align: left; cursor: pointer; }
.ob-check i { flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, 0.45); font-style: normal; font-weight: 900; color: #1b1650; transition: background 0.15s, border-color 0.15s; }
.ob-check.on i { background: var(--gold); border-color: var(--gold); animation: popIn 0.25s cubic-bezier(.2, 1.8, .4, 1); }
.ob-check u { color: var(--gold); text-underline-offset: 2px; }
.ob-toggle { justify-content: space-between; color: var(--muted); font-size: 13.5px; }
.ob-toggle .sw { flex: 0 0 42px; height: 24px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); position: relative; transition: background 0.2s; }
.ob-toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.ob-toggle .sw.on { background: var(--green); }
.ob-toggle .sw.on::after { transform: translateX(18px); }
.ob-legal { font-size: 12.5px; color: var(--muted); padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); }
.ob-go { align-self: center; min-width: 170px; }
.ob-go:disabled, .ob-go[disabled] { opacity: 0.4; filter: grayscale(0.6); }
.ob-promise { margin: 0; font-size: 30px; line-height: 1.1; text-wrap: balance; animation: riseIn 0.45s 0.15s both; }
.ob-promise span { display: block; margin-top: 10px; font-size: 21px; color: var(--gold); }
.ob-how { display: flex; align-items: center; gap: 8px; animation: riseIn 0.4s 0.45s both; }
.ob-how span { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.ob-how b { font-size: 20px; color: var(--text); }
.ob-how b.red { color: var(--red); }
.ob-how > i { font-style: normal; color: var(--muted); }
.ob-play { min-width: 200px; animation: riseIn 0.4s 0.7s both; }

/* tips: a light veil, the bubble above the thing it talks about; a tap anywhere closes */
.ftip-veil { position: absolute; inset: 0; z-index: 55; background: rgba(4, 4, 20, 0.38); pointer-events: none; animation: qsFade 0.2s both; }
.ftip-raise { position: relative; z-index: 60; }
.ftip { position: absolute; z-index: 62; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 16px; background: #fff; color: #1b1650; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); font-size: 15.5px; line-height: 1.35; text-align: left; animation: popIn 0.28s cubic-bezier(.2, 1.6, .4, 1) both; }
.ftip p { margin: 0; }
.ftip b { color: #5b2bd6; }
.ftip .judge-mini { width: 40px; height: 40px; }
.ftip::after { content: ""; position: absolute; bottom: -8px; left: calc(50% + var(--ax, 0px)); translate: -50% 0; border: 9px solid transparent; border-bottom: 0; border-top-color: #fff; }
.ftip.at-controls { left: 4px; right: 4px; bottom: calc(100% + 46px); } /* above the bid line ("$2 · rival" stays visible) */
.ftip.at-slot { width: 258px; translate: -50% calc(-100% - 12px); }
.controls.ftip-raise .raise { animation: tipPulse 1.1s ease-in-out infinite; }
@keyframes tipPulse { 50% { box-shadow: 0 0 0 4px rgba(255, 200, 61, 0.45), 0 0 22px rgba(255, 200, 61, 0.6); } }
.drafts.ftip-s0 [data-slot="you-0"], .drafts.ftip-s1 [data-slot="you-1"], .drafts.ftip-s2 [data-slot="you-2"], .drafts.ftip-s3 [data-slot="you-3"] { border-radius: 50%; box-shadow: 0 0 0 2.5px #fff, 0 0 16px rgba(255, 255, 255, 0.9); animation: tipSlot 1.1s ease-in-out infinite; }
@keyframes tipSlot { 50% { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255, 255, 255, 1); } }
.results-veil { z-index: 40; }
.ftip.res-tip { left: 18px; right: 18px; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 41; flex-wrap: wrap; }
.ftip.res-tip p { flex: 1; min-width: 0; }
.ftip.res-tip small { flex-basis: 100%; text-align: right; color: #6b6a92; font-size: 11.5px; font-weight: 700; }
.ftip.res-tip::after { display: none; }

/* locked boosters (before Level 2) */
.meter-btn.locked, .boost-chip.locked { position: relative; filter: grayscale(1); opacity: 0.55; border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.04); color: #fff; }
.meter-btn.locked .lock-ico, .boost-chip.locked .lock-ico { width: 10px; height: 12px; }
.bst-bubble.lockinfo { background: #fff; }
.bst-lock { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #ece8ff; color: #5b2bd6; }
.bst-lock .lock-ico { width: 12px; height: 14px; }

/* "2 boosters unlocked!" over the dimmed bid war (not black: the screen shows through) */
.unlock-sheet { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(6, 5, 24, 0.62); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); animation: qsFade 0.25s both; }
.unlock-card { width: min(330px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; border-radius: 22px; background: linear-gradient(180deg, #2a2070, #141a45); border: 1.5px solid rgba(255, 200, 61, 0.65); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 200, 61, 0.18); animation: popIn 0.35s cubic-bezier(.2, 1.5, .4, 1) both; }
.uc-lvl { align-self: center; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.uc-title { text-align: center; font-size: 25px; color: var(--gold); margin-bottom: 2px; }
.uc-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.uc-row:nth-of-type(3) { animation: riseIn 0.35s 0.25s both; }
.uc-row:nth-of-type(4) { animation: riseIn 0.35s 0.4s both; }
.uc-ico { flex: 0 0 44px; height: 44px; display: grid; place-items: center; }
.uc-ico .bst-ico { width: 44px; height: 44px; }
.uc-row b { display: block; font-size: 15px; }
.uc-row small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.uc-go { align-self: center; width: auto; flex: 0 0 auto; min-width: 130px; padding: 10px 30px; margin-top: 4px; }
.auction.unlock-on .auction-item .item-stage .item-img, .auction.unlock-on .auction-item .item-name { visibility: hidden; }

/* First W bonus on the flying Crowns chip; Level 2 "Boosters unlocked" */
.cb-fly-bonus { margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: var(--green); color: #06301b; font-size: 0.72em; font-weight: 800; white-space: nowrap; }
.prog-stock.hide { display: none; }
.prog-stock.locked { justify-content: center; gap: 6px; color: var(--muted); }
.prog-stock.locked .ts-lock { width: 11px; height: 13px; }
/* First W bonus chip (2026-10-16): green, a little sparkle, its own beat */
.cb-fly.bonus { color: #06301b; background: linear-gradient(180deg, #7dffb8, #2fd17a); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 26px rgba(52, 229, 140, 0.75); }
.cb-fly.bonus::before, .cb-fly.bonus::after { content: "✦"; position: absolute; color: #fff7c2; font-size: 14px; animation: cbSpark 0.9s ease-out 2 both; }
.cb-fly.bonus::before { left: -10px; top: -10px; }
.cb-fly.bonus::after { right: -10px; bottom: -8px; animation-delay: 0.25s; }
@keyframes cbSpark { 0% { opacity: 0; transform: scale(0.4) rotate(0); } 40% { opacity: 1; transform: scale(1.3) rotate(40deg); } 100% { opacity: 0; transform: scale(0.6) rotate(90deg); } }
.cb-bonus-tag { font-size: 0.62em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.cb-almost { color: var(--green); font-weight: 800; }
.cb-flash .bst-ico { width: 15px; height: 15px; vertical-align: -3px; }
/* FTUE v2 (Ben 2026-10-16): consent sits higher; the promise screen also introduces the first topic */
.screen.onboard.consent { justify-content: flex-start; padding-top: max(40px, 11cqh); }
.screen.onboard.promise { gap: 16px; }
.screen.onboard.promise .ob-promise { font-size: 27px; }
.screen.onboard.promise .ob-promise span { font-size: 19px; margin-top: 6px; }
.ob-topic { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(300px, 100%); padding: 22px 16px 16px; border-radius: 20px; border: 1.5px solid rgba(255, 200, 61, 0.55); box-shadow: 0 0 24px rgba(255, 200, 61, 0.15); animation: popIn 0.4s 0.55s cubic-bezier(.2, 1.4, .4, 1) both; }
.ob-topic-tag { position: absolute; top: -11px; padding: 3px 11px; border-radius: 99px; background: var(--gold); color: #2a1a00; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ob-topic-name { font-size: 21px; }
.ob-topic-line { font-size: 14.5px; color: var(--muted); }
.ob-how span { min-width: 58px; padding: 6px 6px; }
.ob-how b { font-size: 17px; }
/* match 1 controls: one clear button, "You open" right under it, Pass stays at the right */
.bid-sub.ftue { justify-content: flex-end; min-height: 34px; }
.you-open { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.controls.ftip-raise { border-color: rgba(255, 200, 61, 0.85); box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.5), 0 0 26px rgba(255, 200, 61, 0.35); }
.drafts.ftip-raise { border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.25); }
.ftip-more { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #6b6a92; }
/* FTUE v3 (Ben 2026-10-16): consent lower (one-thumb reach); promise screen calmer — more air, a smaller Play lower down,
   and the pieces appear in reading order (line → strip → first topic → Play) */
.screen.onboard.consent { padding-top: max(80px, 25cqh); }
.screen.onboard.promise { justify-content: flex-start; gap: 24px; padding-top: max(48px, 14cqh); padding-bottom: calc(max(28px, 7cqh) + env(safe-area-inset-bottom, 0px)); }
.screen.onboard.promise .ob-promise { animation: riseIn 0.45s 0.2s both; }
.screen.onboard.promise .ob-how { animation: riseIn 0.4s 0.75s both; }
.screen.onboard.promise .ob-topic { margin-top: 8px; animation: popIn 0.45s 1.3s cubic-bezier(.2, 1.4, .4, 1) both; }
.screen.onboard.promise .ob-play { margin-top: auto; width: auto; min-width: 0; padding: 12px 44px; font-size: 17px; animation: riseIn 0.4s 1.85s both; }
/* "Boosters unlock at Level 2": right above the locked boosters, pointing at them */
.locked-boosters { position: relative; display: inline-flex; gap: 8px; }
.lock-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; z-index: 20; width: 220px; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 14px; background: #fff; color: #1b1650; font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: left; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); animation: popIn 0.25s cubic-bezier(.2, 1.6, .4, 1) both; }
.lock-tip b { color: #5b2bd6; }
.lock-tip::after { content: ""; position: absolute; bottom: -7px; left: 50%; translate: -50% 0; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
/* the unlock card: rows don't animate on their own; Got it fades the card + dim out before centre stage */
.uc-row:nth-of-type(3), .uc-row:nth-of-type(4) { animation: none; }
.unlock-sheet.out { animation: ucOut 0.32s ease-in both; }
.unlock-sheet.out .unlock-card { animation: ucCardOut 0.3s ease-in both; }
@keyframes ucOut { to { opacity: 0; } }
@keyframes ucCardOut { to { opacity: 0; transform: scale(0.92) translateY(8px); } }
/* Level 100+ (Ben 2026-10-18: "100" ran out of the avatar circle): 3–4 digits get a smaller number + tighter pill, and
   the badge shifts left so it always stays within the avatar's width */
/* centred under the avatar, so it grows evenly both ways and never past the avatar */
.hdr-profile .hdr-level { left: 50%; translate: -50% 0; }
.hdr-level.d3 b { font-size: 9px; padding: 1px 3px 0; letter-spacing: -0.3px; min-width: 0; }
.hdr-level.d4 b { font-size: 8px; padding: 1px 2px 0; letter-spacing: -0.4px; min-width: 0; }
/* NEW badge (2026-10-20): topics you haven't played yet — top-left, so it sits opposite the HOT badge */
.new-badge { position: absolute; top: 6px; left: 6px; z-index: 3; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 99px; color: #062012; background: var(--green); box-shadow: 0 0 8px rgba(52, 229, 140, 0.45); }
.topic-card.wide .new-badge { top: 8px; left: 8px; }
/* One badge shape at every level (Ben 2026-10-20: 1–2 digits showed a round circle, 100+ a pill) — always the pill */
.hdr-level b { height: 16px; border-radius: 99px; }
.hdr-level.d1 b, .hdr-level.d2 b { min-width: 25px; font-size: 10px; padding: 1px 4px 0; }
.hdr-level.d3 b, .hdr-level.d4 b { height: 16px; }
/* Level pill must read as a pill on a phone too (Ben 2026-10-20: "100" looked like plain text) — solid gold edge + lifted fill */
.hdr-level b { background: linear-gradient(180deg, #4b3aa8, #241a66); border: 1.5px solid #ffc83d; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
/* Who opens (Ben 2026-10-20): said on centre stage and under the bid button, as part of the game — not as a rule */
.spot-opener { margin-top: 2px; font-size: 14px; font-weight: 800; letter-spacing: 0.02em; animation: riseIn 0.3s both; }
.spot-opener.you { color: var(--gold); }
.spot-opener.opp { color: #c4b0ff; }
.spot-opener.opp b { color: #fff; }
.you-open { color: var(--gold); white-space: nowrap; }
/* Gear centred in its circle (Ben 2026-10-20) */
.gear-btn, .gear-mini { display: grid; place-items: center; padding: 0; }
/* Item entry, a touch stronger (Ben 2026-10-21: "really by just a bit"): a small pop from 82% with a light overshoot,
   and one soft gold ring as it lands. Same timing slot as reveal B, so rounds are not longer. */
.spotlight .spot-item .item-img, .spotlight.final .spot-item .item-img { animation: revealC 0.42s 0.25s cubic-bezier(.2, 1.25, .35, 1) both; }
@keyframes revealC { 0% { opacity: 0; transform: scale(0.82); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.spotlight .spot-burst, .spotlight.final .spot-burst { display: block !important; border-width: 2px; box-shadow: 0 0 22px rgba(255, 200, 61, 0.45); animation: thumpBurst 0.5s 0.42s ease-out both !important; }
.spotlight.leaving .spot-burst { display: none !important; }
/* Item entry one notch softer (Ben 2026-10-21: "good, it works — one notch down") */
.spotlight .spot-item .item-img, .spotlight.final .spot-item .item-img { animation: revealD 0.4s 0.25s cubic-bezier(.2, 1.12, .35, 1) both; }
@keyframes revealD { 0% { opacity: 0; transform: scale(0.88); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.spotlight .spot-burst, .spotlight.final .spot-burst { opacity: 0; border-color: rgba(255, 200, 61, 0.55); box-shadow: 0 0 16px rgba(255, 200, 61, 0.3); }
/* Text cards (Roommate / Best Friend, 2026-10-22): the item-art disc drawn in CSS — navy, thin gold ring, gold condensed caps */
.item-img.text-card { background: transparent; display: grid; place-items: center; }
.text-card .tc-disc { width: 100%; height: 100%; border-radius: 50%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.04em;
  background: radial-gradient(circle at 50% 40%, #1d2a5c, #121a3e 70%); box-shadow: inset 0 0 0 calc(var(--tc-ring, 1) * 3px) #121a3e, inset 0 0 0 calc(var(--tc-ring, 1) * 4.5px) #c9a45c; }
.text-card .tc-emoji { line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.text-card .tc-text { display: flex; flex-direction: column; align-items: center; font-family: "Oswald", "Arial Narrow", "Sora", sans-serif; font-weight: 700; line-height: 1.02; letter-spacing: 0.01em; text-align: center;
  background: linear-gradient(180deg, #ffe3a8 0%, #e2b066 50%, #b98235 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5)); }
/* XP screen boosters v2 (Ben 2026-10-22): no caps, icon + count; tap for a short tooltip */
.prog-stock.v2 { position: relative; gap: 12px; }
.prog-stock.v2 .ps-bst { display: flex; align-items: center; gap: 6px; padding: 6px 14px 6px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.16); color: #fff; font: inherit; cursor: pointer; transition: transform 0.12s, border-color 0.15s; }
.prog-stock.v2 .ps-bst:active { transform: scale(0.95); }
.prog-stock.v2 .ps-bst .bst-ico { width: 34px; height: 34px; }
.prog-stock.v2 .ps-bst b { font-size: 18px; font-weight: 800; letter-spacing: 0.01em; }
.prog-stock.v2 .ps-bst.reach.on { border-color: #86efac; }
.prog-stock.v2 .ps-bst.meter.on { border-color: #67e8f9; }
.prog-stock.v2 .ps-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 0; width: min(280px, 86%); z-index: 5; padding: 9px 12px; border-radius: 12px; background: #1b1f4a; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); font-size: 13px; line-height: 1.35; color: #d8dcff; text-align: center; animation: popIn 0.18s ease-out both; }
.prog-stock.v2 .ps-tip b { display: block; color: #fff; font-size: 14px; margin-bottom: 2px; }
/* Quick Bid War icon (Ben 2026-10-22): the gold gavel badge replaces the ⚡; one small "tap" every few seconds */
.quick-battle .qb-bolt.qb-gavel, .theme-game .quick-battle .qb-bolt.qb-gavel { font-size: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); animation: gavelTap 3.2s ease-in-out infinite; transform-origin: 70% 70%; }
.qb-gavel img { width: 46px; height: 46px; display: block; }
@keyframes gavelTap { 0%, 82%, 100% { transform: rotate(0); } 87% { transform: rotate(-14deg); } 92% { transform: rotate(4deg) scale(1.04); } 96% { transform: rotate(0); } }
/* Rival Found boosters (Ben 2026-10-22): out of the VS pair, one quiet centred line under the countdown */
.qs-count .mm-stock { display: flex; gap: 14px; justify-content: center; align-items: center; opacity: 0.75; font-size: 14px; font-weight: 800; color: #e6e8ff; }
.qs-count .mm-stock span { display: inline-flex; align-items: center; gap: 3px; }
.qs-count .mm-stock .bst-ico { width: 24px; height: 24px; }
/* Recording mode autopilot: the bid button visibly presses before each scripted bid */
.btn.raise.rec-press { transform: translateY(3px) scale(0.97); filter: brightness(1.1); transition: transform 0.08s, filter 0.08s; }

/* Ben 2026-10-22 (first play): consent — the Welcome card sits in the middle of the screen, the logo above it (not centred);
   promise — an inviting first line before everything else */
.screen.onboard.consent { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; justify-content: stretch; align-items: stretch; gap: 0; padding-top: 24px; }
.screen.onboard.consent .ob-logo { align-self: end; margin-bottom: 26px; }
.screen.onboard.consent .ob-card { align-self: center; }
.ob-hello { margin: -8px 0 -10px; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0.01em; animation: riseIn 0.4s 0.05s both; }
/* Ben 2026-10-22: −/+ only when they do something — hidden when the bid can't change (max = minimum) and on the
   first FTUE item (one tap to learn). Kept in place (invisible) so the bid button doesn't jump. */
.bid-main.no-steps .step { visibility: hidden; }
/* Centre stage (Ben 2026-10-22: "a lot of lags for the items"): the item is in the ring straight away — the 0.25s empty
   ring before it looked like the picture was late. Same soft pop. */
.spotlight .spot-item .item-img, .spotlight.final .spot-item .item-img { animation: revealD 0.36s 0.05s cubic-bezier(.2, 1.12, .35, 1) both; }
.spotlight .spot-burst, .spotlight.final .spot-burst { animation-delay: 0.22s !important; }
.spotlight .spot-item::before { animation-delay: 0.3s; }
/* XP screen: boosters at the top, under the level bar (Ben 2026-10-22); the tooltip opens below them */
.prog-stock.v2 { margin: 2px 0 4px; }
.prog-stock.v2 .ps-tip { bottom: auto; top: calc(100% + 10px); }
/* Safety net card (main.js Guard) */
.app-guard { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #0b0a24; color: #fff; font-family: "Sora", system-ui, sans-serif; text-align: center; cursor: pointer; }
.app-guard b { font-size: 22px; }
.app-guard span { color: var(--gold, #ffc83d); font-weight: 700; }
/* Android "lite" (2026-10-22): fewer always-running GPU effects */
html.lite .bg-fx .streak { filter: none; }
html.lite .bolt { filter: drop-shadow(0 0 6px #b44cff); }
html.lite .auction-item .item-glow, html.lite .theme-game .auction-item:not(.intro) .pedestal i:nth-child(2) { animation-iteration-count: 1 !important; }
html.lite .reel-rays, html.lite .rku-rays-svg { animation: none !important; }
.ob-hello b { color: var(--gold); }
/* XP screen (Ben 2026-10-22): an X / Y count inside a taller bar, "N Crowns to Lvl X" centred under it (the per-level
   gift line is gone), smaller booster buttons */
.prog-bar.v2 { position: relative; height: 20px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.prog-bar.v2 .pb-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; color: #fff; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75); }
.prog-to-next { text-align: center; }
.prog-stock.v2 .ps-bst { padding: 4px 11px 4px 6px; gap: 5px; }
.prog-stock.v2 .ps-bst .bst-ico { width: 26px; height: 26px; }
.prog-stock.v2 .ps-bst b { font-size: 15px; }
/* Bidding screen (Ben 2026-10-22, first live play) ---------------------------------------------------------------
   1) No jumps between turns: the waiting panel and the live panel are the same height (status row = time bar row =
      24px; the ghost buttons use the panel's own gap), and the ghost buttons only soften (no flash from 28% to 100%). */
.controls > .zone-status { height: 24px !important; min-height: 0 !important; margin: 0 !important; }
.controls.live > .timebar { margin-block: 5px !important; }
.ghost-controls { gap: inherit; opacity: 0.5; filter: saturate(0.6); animation: ghostIn 0.25s ease-out both; }
.controls.live > .bid-main, .controls.live > .bid-sub { animation: ghostOut 0.25s ease-out both; }
@keyframes ghostIn { from { opacity: 1; } to { opacity: 0.5; } }
@keyframes ghostOut { from { opacity: 0.5; } to { opacity: 1; } }
/* 2) A bigger item on phones in a browser (≈186px at a 660px-tall screen, was ≈151): the space comes from tighter gaps
      around the name and the bid line, so the panels below don't move. */
@container (max-height: 840px) {
  .theme-game .auction-item .item-stage .item-img { width: clamp(96px, calc(40cqh - 82px), 262px) !important; height: clamp(96px, calc(40cqh - 82px), 262px) !important; }
  .theme-game .auction-item .item-glow { width: clamp(150px, calc(40cqh + 8px), 340px); height: clamp(150px, calc(40cqh + 8px), 340px); }
  .theme-game .auction-item { padding-top: 6px; padding-bottom: 6px; }
  .theme-game .auction-item .item-stage { margin-top: 0; padding-bottom: 4px; }
  .theme-game .auction-item .item-name { margin-top: 6px; }
  .auction-item .bid-line, .auction-item .sold-line { margin-top: 0; }
}
/* Home v2 (review only, ?home2) */
.home2 { gap: 0; }
.home2 .promo { margin-bottom: 18px; }
.home2 .h2-qb { padding-block: 20px; margin-bottom: 26px; }
.home2 .h2-head { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #c9c3ff; margin: 0 2px 10px; }
.home2 .h2-head.fire { color: #ffb36b; }
.home2 .h2-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px 26px; padding: 4px 16px 10px; }
.home2 .h2-row::-webkit-scrollbar { display: none; }
.home2 .h2-topic { position: relative; flex: 0 0 116px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 18px; border: 1.5px solid rgba(255, 160, 80, 0.45); background: linear-gradient(170deg, #2a1f5c, #15113a); color: #fff; font: inherit; cursor: pointer; box-shadow: 0 5px 0 rgba(5, 4, 20, 0.9); }
.home2 .h2-topic:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(5, 4, 20, 0.9); }
.home2 .h2-name { font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; min-height: 2.4em; display: grid; place-items: center; }
.home2 .h2-new { position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 99px; background: #22c55e; color: #052e16; }
.home2 .h2-cat { flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 12px 12px; border-radius: 18px; border: 1.5px solid color-mix(in srgb, var(--cc) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 34%, #1b1544), #120f33 75%); color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 5px 0 rgba(5, 4, 20, 0.9); }
.home2 .h2-cat:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(5, 4, 20, 0.9); }
.home2 .h2-cat img { width: 52px; height: 52px; object-fit: contain; margin-bottom: 6px; }
.home2 .h2-cat-name { font-size: 15px; font-weight: 800; }
.home2 .h2-cat-count { font-size: 12px; color: #b9b4e6; }
.home2 .h2-row { margin-inline: -18px; padding-inline: 18px; scroll-padding-inline: 18px; }
.prog-bar.v2 { flex: 0 0 20px; min-height: 20px; }
/* XP screen boosters, smaller again (Ben 2026-10-22) */
.prog-stock.v2 { gap: 8px; }
.prog-stock.v2 .ps-bst { padding: 3px 9px 3px 4px; gap: 4px; border-width: 1px; }
.prog-stock.v2 .ps-bst .bst-ico { width: 20px; height: 20px; }
.prog-stock.v2 .ps-bst b { font-size: 13px; }
/* ===== Results v6 (Ben 2026-10-22, storyboard v2): a card per player — header + 4 item tiles with ♥ crowd scores =====
   One layout from the crowd roll to the end (nothing jumps); the crowd scores stay visible on the verdict. */
.results .rv-board { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; margin-top: 18px; position: relative; }
.rv-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 9px 10px 10px; border-radius: 18px; background: linear-gradient(165deg, #211a52, #15113a); border: 1.5px solid rgba(255, 255, 255, 0.12); box-shadow: 0 5px 0 rgba(5, 4, 20, 0.85); transition: border-color 0.35s, box-shadow 0.35s, opacity 0.35s, transform 0.35s; }
.rv-card.card-you.winner { border-color: rgba(255, 200, 61, 0.85); box-shadow: 0 0 0 1px rgba(255, 200, 61, 0.25), 0 0 26px rgba(255, 200, 61, 0.22), 0 5px 0 rgba(5, 4, 20, 0.85); }
.rv-card.card-opp.winner { border-color: rgba(180, 140, 255, 0.85); box-shadow: 0 0 0 1px rgba(180, 140, 255, 0.25), 0 0 26px rgba(150, 100, 255, 0.25), 0 5px 0 rgba(5, 4, 20, 0.85); }
.rv-card.loser { opacity: 0.82; }
.rv-head { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.rv-av { position: relative; flex: 0 0 auto; display: grid; place-items: center; }
.rv-av .avatar { box-shadow: 0 0 0 2.5px var(--gold) !important; }
.card-opp .rv-av .avatar { box-shadow: 0 0 0 2.5px var(--neon) !important; }
.rv-av .crown-drop { top: -17px; font-size: 18px; }
.rv-who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rv-nm { font-size: 15px; font-weight: 800; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-you .rv-nm { color: var(--gold); }
.card-opp .rv-nm { color: #c4b5fd; }
.rv-sub { font-size: 11px; color: var(--muted); line-height: 18px; }
.rv-who .grade-chip { font-size: 10.5px; animation: popIn 0.35s 0.2s both; }
.rv-total { font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-total small { font-size: 12px; font-weight: 700; color: var(--muted); }
.rv-win { position: absolute; top: -9px; right: 14px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 99px; background: var(--gold); color: #2a1a00; animation: popIn 0.35s cubic-bezier(.2, 1.6, .4, 1) both; }
.card-opp .rv-win { background: #a78bfa; color: #1b0f3d; }
.rv-chip-info { font-size: 11.5px; line-height: 1.35; color: #d8dcff; background: #1b1f4a; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; padding: 6px 9px; }
.rv-chip-info b { color: #fff; }
.rv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rv-tile { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 3px 5px; border-radius: 12px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.3s, background 0.3s; }
.rv-tile.top4 { border-color: rgba(255, 200, 61, 0.55); background: rgba(255, 200, 61, 0.07); }
.rv-img { position: relative; display: grid; place-items: center; }
.rv-img .item-img { width: clamp(40px, calc(13cqh - 30px), 58px) !important; height: clamp(40px, calc(13cqh - 30px), 58px) !important; }
.rv-tile.top4 .rv-img .item-img { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(255, 200, 61, 0.45); border-radius: 50%; }
.rv-star { position: absolute; top: -5px; left: -5px; font-style: normal; font-size: 13px; color: var(--gold); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); animation: popIn 0.3s cubic-bezier(.2, 1.8, .4, 1) both; }
.rv-img .hint-badge, .rv-img .boost-badge { position: absolute; right: -5px; top: -4px; width: 18px; height: 18px; }
.rv-free { position: absolute; bottom: -5px; left: 50%; translate: -50% 0; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; padding: 0 5px; border-radius: 99px; background: #22c55e; color: #052e16; line-height: 13px; }
.rv-free.reduced { background: #f59e0b; color: #2a1a00; }
.rv-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 100%; height: 2.3em; font-size: 12px; font-weight: 700; line-height: 1.15; text-align: center; color: #e9e6ff; overflow-wrap: break-word; hyphens: manual; }
.rv-score { font-size: 15px; font-weight: 800; line-height: 1.1; color: #ff8fa3; font-variant-numeric: tabular-nums; }
.rv-score i { font-style: normal; font-size: 0.85em; margin-right: 1px; }
.rv-tile.sc-q .rv-score { color: var(--muted); }
.rv-tile.sc-in .rv-score { animation: rvLand 0.3s ease-out; }
@keyframes rvLand { 0% { transform: scale(1.35); } 100% { transform: none; } }
.results .rv-foot { margin: 6px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }
.results .rv-foot .ch-heart { color: #ff8fa3; }
.results .rv-foot .rv-foot-star { color: var(--gold); }
.results .reveal .judge-line-card { margin-top: 8px; }
.results .judge-line-card p { font-size: 13.5px; }
/* short phones in a browser (≈ iPhone SE / small Androids): tighter */
@container (max-height: 600px) {
  .results .rv-board { margin-top: 10px; gap: 8px; }
  .rv-card { padding: 7px 8px 8px; gap: 6px; }
  .rv-total { font-size: 25px; }
  .rv-name { font-size: 11px; }
}
/* Results v6 fit (393×660 measured): −32px so the buttons sit fully on screen */
.results .rv-board { margin-top: 8px; }
.rv-card { gap: 6px; }
.rv-img .item-img { width: clamp(38px, calc(12cqh - 32px), 58px) !important; height: clamp(38px, calc(12cqh - 32px), 58px) !important; }
/* tall phones: share the spare height above and below the content instead of one gap over the buttons */
.results .res-spacer.top { flex: 1 1 0; max-height: 44px; min-height: 0; }
.results .res-spacer.bottom { flex: 1 1 0; min-height: 0; }
.rv-free { bottom: auto; top: -4px; left: auto; right: -9px; translate: none; }
/* Results v6 fixes (Ben 2026-10-22): the top-4 star is the crowd's pink again (decided 2026-10-10 — gold read as
   "winner" / "you"); the tile ring follows. Long single words ("Gymnastics") no longer break mid-word: they shrink to fit,
   and only as a last resort break at a syllable with a hyphen. */
.rv-star { color: var(--pd) !important; top: -5px; left: -5px; }
.rv-tile.top4 { border-color: rgba(255, 77, 109, 0.5); background: rgba(255, 77, 109, 0.07); }
.rv-tile.top4 .rv-img .item-img { box-shadow: 0 0 0 2px #ff4d6d, 0 0 12px rgba(255, 77, 109, 0.45); }
.results .rv-foot .rv-foot-star { margin: 0; font-size: 1em; }
.rv-name { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* side by side (proposal) */
.results .rv-board.side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rv-board.side .rv-head { flex-wrap: wrap; gap: 6px 8px; }
.rv-board.side .rv-who { flex: 1 1 calc(100% - 50px); }
.rv-board.side .rv-total { flex: 1 1 100%; text-align: center; font-size: 34px; }
.rv-board.side .rv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-board.side .rv-nm { font-size: 14px; }
.cb-text .cb-reached { color: #86efac; font-weight: 800; }
.results .rv-foot .rv-foot-star { color: var(--pd); }
/* ===== Results v6c (Ben 2026-10-22: "too crowded; totals too small; grade next to my avatar and name") =====
   Header locked as avatar | name over grade (never wraps away); the total is the big number under it, in the agreed
   colours (2026-10-14: yours gold, rival purple; the winner glows at the verdict, the loser dims). Tiles smaller with
   more space between them; the whole block sits a little lower. */
.results .rv-board.side { gap: 10px; margin-top: 16px; }
.rv-board.side .rv-card { padding: 10px 9px 11px; gap: 8px; }
.rv-board.side .rv-head { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av who" "tot tot"; align-items: center; gap: 4px 8px; flex-wrap: nowrap; }
.rv-board.side .rv-av { grid-area: av; }
.rv-board.side .rv-who { grid-area: who; flex: none; gap: 3px; }
.rv-board.side .rv-who .grade-chip { font-size: 10px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rv-board.side .rv-total { grid-area: tot; text-align: center; font-size: 46px; line-height: 1; margin-top: 4px; }
.rv-board.side .rv-total small { font-size: 13px; }
.rv-card.card-you .rv-total { color: #ffc83d; }
.rv-card.card-opp .rv-total { color: #c4b0ff; }
.results.stage-race .rv-total, .results.stage-tallied .rv-total { opacity: 1; }
.rv-card.winner.card-you .rv-total { text-shadow: 0 0 18px rgba(255, 200, 61, 0.65); }
.rv-card.winner.card-opp .rv-total { text-shadow: 0 0 18px rgba(167, 139, 250, 0.75); }
.rv-card.loser .rv-total { opacity: 0.6; }
.rv-card.loser { opacity: 0.9; }
.rv-board.side .rv-tiles { gap: 7px; }
.rv-board.side .rv-tile { padding: 6px 2px 5px; gap: 2px; border-radius: 11px; }
.rv-board.side .rv-img .item-img { width: clamp(34px, calc(10cqh - 24px), 50px) !important; height: clamp(34px, calc(10cqh - 24px), 50px) !important; }
.rv-board.side .rv-name { font-size: 10.5px; height: 2.25em; color: #cfcaf2; }
.rv-board.side .rv-score { font-size: 13.5px; }
.rv-board.side .rv-star { font-size: 11px; top: -4px; left: -4px; }
/* Results v6d (Ben 2026-10-22: "item text a bit smaller / not bold, bigger rectangles, a bit lower") */
.results .rv-board.side { margin-top: 24px; }
.rv-board.side .rv-card { padding: 12px 10px 13px; gap: 10px; }
.rv-board.side .rv-tiles { gap: 9px; }
.rv-board.side .rv-tile { padding: 9px 3px 8px; gap: 4px; }
.rv-board.side .rv-name { font-weight: 500; color: #bdb8e4; }
.results .rv-board.side { margin-top: 18px; }
.rv-board.side .rv-card { gap: 8px; }
.rv-board.side .rv-tile { padding: 8px 3px 7px; }
/* Results v6e (Ben 2026-10-22): tile states follow the pair reveal — waiting tiles are quiet (score "?"), the pair
   counting now is lit, a landed tile settles; a top-4 tile's pink ring + ★ pop the moment its score lands. */
.rv-tile { transition: opacity 0.25s, border-color 0.3s, background 0.3s, box-shadow 0.25s; }
.rv-tile.sc-q { opacity: 0.55; }
.rv-tile.sc-roll { opacity: 1; border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 0 14px rgba(255, 255, 255, 0.15); }
.rv-tile.sc-roll .rv-score { color: #fff; }
.rv-tile.top4.sc-in { animation: top4Pop 0.4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes top4Pop { 0% { transform: scale(1.06); box-shadow: 0 0 22px rgba(255, 77, 109, 0.55); } 100% { transform: none; } }
/* more air (+6px under the Crowns bar, wider gaps), taken from the flexible spacers so the buttons stay on screen */
.results .rv-board.side { margin-top: 24px; gap: 12px; }
.rv-board.side .rv-card { gap: 10px; }
.rv-board.side .rv-tiles { gap: 10px; }
.results .rv-foot { margin-top: 10px; }
.results .reveal .judge-line-card { margin-top: 10px; }
/* Results v6f: more air between each tile's name and its ♥ score; a quieter header (34px avatar) pays for it */
.rv-board.side .rv-tile { gap: 6px; padding: 9px 3px 9px; }
.rv-board.side .rv-score { margin-top: 2px; }
.rv-board.side .rv-av .avatar { width: 34px !important; height: 34px !important; }
.results .rv-board.side { margin-top: 20px; }
.rv-tile.sc-roll { border-color: rgba(255, 255, 255, 0.3); box-shadow: none; }
/* ===== Results v6g (Ben 2026-10-22: "the focus is the scores") =====
   The ♥ score is the loudest thing in a tile; the picture is smaller, the name quiet, the top-4 mark softer.
   Each tile shows its rank (#1–#4) in the corner; names wrap only between words. */
.rv-tile { position: relative; }
.rv-rank { position: absolute; top: 5px; right: 7px; font-style: normal; font-size: 9.5px; font-weight: 700; color: rgba(205, 200, 240, 0.5); letter-spacing: 0.02em; }
.rv-board.side .rv-img .item-img { width: clamp(32px, calc(9cqh - 22px), 44px) !important; height: clamp(32px, calc(9cqh - 22px), 44px) !important; }
.rv-board.side .rv-name { font-weight: 500; color: rgba(205, 200, 240, 0.72); }
.rv-board.side .rv-score { font-size: 19px; font-weight: 800; margin-top: 1px; color: #ff8fa3; letter-spacing: -0.01em; }
.rv-board.side .rv-score i { font-size: 0.7em; vertical-align: 0.12em; margin-right: 2px; }
.rv-board.side .rv-tile { gap: 5px; padding: 9px 3px 8px; background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.07); }
.rv-tile.top4 { border-color: rgba(255, 77, 109, 0.32) !important; background: rgba(255, 77, 109, 0.05) !important; }
.rv-tile.top4 .rv-img .item-img { box-shadow: 0 0 0 1.5px rgba(255, 77, 109, 0.85) !important; }
.rv-tile.top4 .rv-score { color: #ff6f8c; }
.rv-tile.top4.sc-in { animation: top4Pop 0.35s ease-out; }
@keyframes top4Pop { 0% { box-shadow: 0 0 16px rgba(255, 77, 109, 0.45); } 100% { box-shadow: none; } }
.rv-board.side .rv-img .item-img { width: clamp(30px, calc(9cqh - 26px), 42px) !important; height: clamp(30px, calc(9cqh - 26px), 42px) !important; }
.rv-board.side .rv-tile { gap: 3px; padding: 8px 3px 7px; }
.rv-board.side .rv-score { font-size: 18px; }
/* Home v2 (Ben 2026-10-22): the ribbon titles and the HOT tag are back (dropped by mistake in v2) */
.home2 .section-title { margin: 0 0 12px; }
.home2 .h2-row { margin-bottom: 22px; }
.home2 .h2-hottag { position: absolute; top: 8px; right: 8px; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 99px; background: linear-gradient(90deg, #ff6a3d, #ff3d6e); color: #fff; animation: flickerBadge 2.6s ease-in-out infinite; }
.home2 .h2-done { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 99px; background: #22c55e; color: #052e16; }
.home2 .ribbon { margin: 0 0 12px; align-self: flex-start; }
.home2 .h2-topic { padding-top: 28px; gap: 6px; }
.home2 .h2-new, .home2 .h2-hottag, .home2 .h2-done { top: 7px; }
.home2 .promo { margin-bottom: 14px; }
.home2 .h2-qb { margin-bottom: 20px; }
.home2 .ribbon { margin: 0 0 10px; }
.home2 .h2-row { margin-bottom: 16px; }