/* Card-grid styles here are intentionally a separate copy of region-battle-overlay.css's .rb-card rules rather than a shared include — that stylesheet also resets html/body to transparent for OBS embedding, which this authenticated, normal-layout page must not inherit. */ /* style.css makes a column flexbox (`display:flex; height:100vh`) so the topbar stays fixed-height and the content area fills the rest — see `.layout` (app.html's equivalent). Without `flex:1`/`min-height:0` here, this flex item falls back to content-based auto sizing and the grid inside it collapses to a sliver instead of filling the page. */ .rb-page { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 18px 24px; } /* Fixed 5x4 grid sized to the available space (both axes), not to the cards' own content — this is what keeps all 20 regions on screen with no scrollbar regardless of viewport height. max-width is capped narrower than the available width on purpose: rows already fill the full height (4 equal rows), so a narrower max-width is what keeps each card portrait- shaped instead of stretching wide — a wide max-width and short viewport would otherwise flatten every card out. */ .rb-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; max-width: 800px; width: 100%; margin: 0 auto; } .rb-empty { color: var(--muted); font-size: 13px; } .rb-card { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } .rb-card-bg { position: absolute; inset: 0; background: linear-gradient(160deg, hsl(var(--rb-hue) 55% 32%), hsl(calc(var(--rb-hue) + 40) 45% 14%) 80%); } /* real region photo, layered over the gradient — if /region-bg/.jpg 404s, its inline onerror hides the and the gradient shows through. `cover` fills the card edge-to-edge (no gradient letterboxing showing through); center positioning keeps most landmark-sign photos legible since the sign is usually centered in the source photo. */ .rb-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .rb-card-leader { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 10px 26px rgba(245, 197, 66, 0.35); } .rb-rank-badge { position: absolute; top: 6px; left: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(15, 20, 32, 0.75); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 2; } .rb-gift-badge { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border-radius: 10px; background: rgba(15, 20, 32, 0.75); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 20px; z-index: 2; } .rb-gift-badge img { width: 100%; height: 100%; object-fit: cover; /* istifadəçinin AÇIQ tələbi: "hədiyyələr sabitdir, shake effekti ver" — əvvəllər tam statik idi, indi periodik (4s-də bir) yüngül silkələnmə, əksər dövrü sakit qalır ki, davamlı canlı yayımda göz yormasın. */ animation: rbGiftShake 4s ease-in-out infinite; transform-origin: 50% 50%; } @keyframes rbGiftShake { 0%, 78%, 100% { transform: rotate(0deg) scale(1); } 81% { transform: rotate(-10deg) scale(1.06); } 84% { transform: rotate(9deg) scale(1.06); } 87% { transform: rotate(-7deg) scale(1.04); } 90% { transform: rotate(6deg) scale(1.04); } 93% { transform: rotate(-4deg) scale(1.02); } 96% { transform: rotate(3deg) scale(1.02); } } .rb-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); z-index: 2; } .rb-card-name { color: #fff; font-size: 12.5px; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rb-hp-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; } .rb-hp-fill { height: 100%; background: linear-gradient(135deg, #3ee879, var(--accent) 65%); transition: width 0.4s ease; } .rb-hp-text { font-size: 10.5px; font-weight: 700; color: var(--gold-2); } .rb-settings-modal { width: 480px; max-width: 92vw; max-height: 82vh; overflow-y: auto; } /* .gift-rules-list's `flex: 1` only works inside a non-scrolling flex parent (how the other rulers-modal dialogs use it) — here the modal itself scrolls (above), so flex:1 fights the scroll container and collapses the list to near-zero height. Let it size to its natural content height instead and scroll as part of the modal, not on its own. */ .rb-settings-modal .regionbattle-list { flex: none; overflow: visible; } /* corner-docked (not a full-screen dimmed modal) so the live grid stays visible and its attack animations stay watchable while this is open */ .rb-test-dock { position: fixed; bottom: 16px; right: 16px; z-index: 60; } .rb-test-dock.hidden { display: none; } .rb-test-panel { width: 340px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); padding: 16px; } .rb-test-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; } .rb-test-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700; transition: border-color 0.15s; } .rb-test-btn:hover { border-color: var(--gold); } .rb-test-btn-hp { font-size: 10px; font-weight: 700; color: var(--accent); } .rb-test-btn-dead { opacity: 0.45; } /* --- attack animation: heal pulse / damage shake on the cards themselves, plus a floating projectile + floating +N/-N text appended to (fixed position, so they're never clipped by .rb-card's own overflow:hidden) — see region-battle.js diffActivation()/playActivation() for when these fire --- */ @keyframes rb-heal-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.65); } 60% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } .rb-card-heal { animation: rb-heal-pulse 0.6s ease-out; } @keyframes rb-damage-shake { 0% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 20% { transform: translateX(-6px) rotate(-1deg); } 40% { transform: translateX(5px) rotate(1deg); } 60% { transform: translateX(-4px); box-shadow: 0 0 18px 4px rgba(239, 68, 68, 0.5); } 80% { transform: translateX(3px); } 100% { transform: translateX(0); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } .rb-card-damage { animation: rb-damage-shake 0.5s ease-in-out; } /* one-time impact flourish for the moment a region hits 0 HP — bigger/ longer than the normal damage shake so it clearly reads as "different" from an ordinary hit */ @keyframes rb-defeat-hit { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.85); filter: grayscale(0); } 15% { transform: scale(0.94) rotate(-2deg); box-shadow: 0 0 28px 8px rgba(239, 68, 68, 0.7); } 35% { transform: scale(1.03) rotate(1.5deg); } 55% { transform: scale(0.97) rotate(-1deg); } 100% { transform: scale(1) rotate(0); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); filter: grayscale(0.9) brightness(0.55); } } .rb-card-defeat { animation: rb-defeat-hit 0.75s ease-in-out; } /* the card's resting look once eliminated — regionCardHtml() adds this class on every render while region.hp <= 0, so it persists (not just during the one-time rb-card-defeat animation) until the round resets */ .rb-card-eliminated { filter: grayscale(0.9) brightness(0.55); } .rb-eliminated-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); z-index: 3; padding: 4px 10px; border: 2px solid #ff6b6b; border-radius: 6px; background: rgba(20, 8, 8, 0.85); color: #ff6b6b; font-weight: 900; font-size: 11px; letter-spacing: 0.5px; white-space: nowrap; pointer-events: none; } .rb-float-text { position: fixed; transform: translate(-50%, -50%); font-weight: 900; font-size: 19px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); pointer-events: none; z-index: 9999; animation: rb-float-up 0.95s ease-out forwards; } .rb-float-text.heal { color: #3ee879; } .rb-float-text.damage { color: #ff6b6b; } .rb-float-text.defeat { color: #ff6b6b; font-size: 22px; } @keyframes rb-float-up { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -130%) scale(1); } } .rb-projectile { position: fixed; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: radial-gradient(circle, #fff, #f5c542 55%, transparent 100%); box-shadow: 0 0 18px 7px rgba(245, 197, 66, 0.85); pointer-events: none; z-index: 9999; } /* --- winner screen: shown once only 1 of 20 regions is still alive. Mirrors style.css's .win-overlay (Torpaq Zəbti's "QAZANAN" screen) visually, but with a square region photo instead of a round player avatar, no points pill (regions don't score points), and a persistent restart button — region battle doesn't auto-reset the way a capture-everything win does, a lone survivor just keeps soaking up heals forever otherwise. --- see region-battle.js for the reveal-timing/delay rationale --- */ .rb-winner-overlay { position: fixed; inset: 0; background: rgba(5, 8, 14, 0.88); display: flex; align-items: center; justify-content: center; z-index: 70; animation: fadeIn 0.3s ease; } .rb-winner-overlay.hidden { display: none; } .rb-winner-card { text-align: center; display: flex; flex-direction: column; align-items: center; } .rb-winner-photo-wrap { position: relative; width: 130px; height: 130px; border-radius: 20px; overflow: hidden; border: 4px solid var(--gold); box-shadow: 0 0 40px rgba(245, 197, 66, 0.6); margin-bottom: 18px; } .rb-winner-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .rb-winner-trophy { font-size: 40px; margin-bottom: 6px; filter: drop-shadow(0 0 14px rgba(245, 197, 66, 0.7)); } .rb-winner-title { margin: 0 0 24px; display: flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 900; letter-spacing: 1.5px; color: var(--gold); text-shadow: 0 0 24px rgba(245, 197, 66, 0.6); } .rb-winner-name-pill { padding: 12px 34px; border-radius: 999px; border: 2px solid var(--gold); color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 28px; } .rb-winner-restart-btn { padding: 13px 30px; border-radius: 999px; border: none; background: linear-gradient(135deg, #f472b6, #ec4899); color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 10px 26px rgba(236, 72, 153, 0.45); transition: filter 0.15s; } .rb-winner-restart-btn:hover { filter: brightness(1.1); } /* region-swap picker (#regionPickerOverlay) reuses .gift-card/.gift-picker-* from style.css wholesale — this is the one override: a wide photo thumbnail instead of the gift picker's small square icon */ /* the 🔄 button next to each Ayarlar row — a plain copy of style.css's .gift-rule-edit (own class on purpose, not shared: sharing the class name previously made both buttons' click handlers resolve to whichever one querySelector('.gift-rule-edit') found first, so the swap button silently opened the GIFT picker instead of its own) */ .gift-rule-swap { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; } .gift-rule-swap:hover { border-color: rgba(245, 197, 66, 0.4); color: var(--text); } .region-card-photo { width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: 10px; background-size: cover; background-position: center; font-size: 0; /* hide the inherited gift-emoji fallback glyph, if any */ } /* --- VS Arena: the final-2 showdown screen. Takes over `.rb-page` in place of `.rb-grid` (see region-battle.js handleVsArenaCheck) — same underlying heal/damage mechanic, just staged as a head-to-head instead of a 20-card grid. Deliberately more "premium broadcast package" than the rest of the UI: darker stage backdrop, a diamond VS badge, thicker glowing HP bars — this is the moment the stream is building toward, it should look like one. --- */ .rb-vs-arena { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3.5vw, 38px); position: relative; border-radius: 20px; background: radial-gradient(ellipse at 50% 45%, rgba(245, 197, 66, 0.14), transparent 60%), linear-gradient(160deg, #0c0f1a, #05070c 70%); overflow: hidden; isolation: isolate; } .rb-vs-arena.hidden { display: none; } /* faint rotating conic sweep behind everything, for a "spotlight stage" feel */ .rb-vs-arena::before { content: ''; position: absolute; inset: -20%; z-index: 0; background: conic-gradient(from 0deg, transparent 0deg, rgba(245, 197, 66, 0.08) 40deg, transparent 90deg, transparent 270deg, rgba(239, 68, 68, 0.08) 320deg, transparent 360deg); animation: rb-vs-sweep 14s linear infinite; } @keyframes rb-vs-sweep { to { transform: rotate(360deg); } } @keyframes rb-vs-bolt-flicker { 0%, 100% { opacity: 0.85; } 8% { opacity: 0.25; } 16% { opacity: 0.9; } 45% { opacity: 0.5; } 52% { opacity: 0.95; } } /* 5-minute countdown — dead center, above both fighters (see region-battle.js: restarted on every fresh enterVsArena()). Same premium gold-on-dark language as the rest of the arena; turns red/urgent under a minute so it reads as a real ticking clock, not just a static label. */ .rb-vs-timer { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 7px; padding: 7px 18px; border-radius: 999px; background: linear-gradient(160deg, rgba(24, 18, 6, 0.92), rgba(8, 6, 3, 0.96)); border: 1.5px solid var(--gold); box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.25), 0 0 26px rgba(245, 197, 66, 0.35), 0 8px 20px rgba(0, 0, 0, 0.5); } .rb-vs-timer-bolt { font-size: clamp(13px, 1.6vw, 17px); filter: drop-shadow(0 0 6px rgba(245, 197, 66, 0.8)); animation: rb-vs-bolt-flicker 2.6s ease-in-out infinite; } .rb-vs-timer-text { font-size: clamp(16px, 2vw, 22px); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; color: var(--gold-2); text-shadow: 0 0 14px rgba(245, 197, 66, 0.6); } .rb-vs-timer.rb-vs-timer-urgent { border-color: #ef4444; animation: rb-vs-timer-pulse 1s ease-in-out infinite; } .rb-vs-timer.rb-vs-timer-urgent .rb-vs-timer-text { color: #ff8080; text-shadow: 0 0 14px rgba(239, 68, 68, 0.7); } @keyframes rb-vs-timer-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3), 0 0 26px rgba(239, 68, 68, 0.4), 0 8px 20px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.55), 0 0 40px rgba(239, 68, 68, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5); } } .rb-vs-fighter { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: clamp(120px, 16vw, 205px); transition: filter 0.2s; } .rb-vs-photo-wrap { position: relative; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 3px solid var(--gold); box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.35), 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 30px rgba(245, 197, 66, 0.25); background: var(--panel-2); } .rb-vs-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* same badge the grid cards show (see regionCardHtml's .rb-gift-badge) — sized up from the grid's 40px since this card is the whole point of the VS screen, the gift that's deciding this fight should read clearly */ .rb-vs-gift-badge { position: absolute; top: 6px; right: 6px; width: clamp(30px, 20%, 44px); height: clamp(30px, 20%, 44px); border-radius: 9px; background: rgba(15, 20, 32, 0.8); border: 1.5px solid rgba(245, 197, 66, 0.5); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 20px; z-index: 2; } .rb-vs-gift-badge img { width: 100%; height: 100%; object-fit: cover; } .rb-vs-name { font-size: clamp(13px, 1.6vw, 17px); font-weight: 900; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); text-align: center; letter-spacing: 0.3px; } .rb-vs-hp-bar { width: 100%; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; } .rb-vs-hp-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3ee879, var(--accent) 70%); box-shadow: 0 0 10px rgba(62, 232, 121, 0.6); transition: width 0.5s ease; } .rb-vs-hp-text { font-size: 12px; font-weight: 800; color: var(--gold-2); } .rb-vs-center { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .rb-vs-badge { display: flex; align-items: center; justify-content: center; width: clamp(48px, 6vw, 72px); height: clamp(48px, 6vw, 72px); border-radius: 18px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, #b8860b); box-shadow: 0 0 0 3px rgba(245, 197, 66, 0.3), 0 0 34px rgba(245, 197, 66, 0.55), 0 10px 22px rgba(0, 0, 0, 0.5); animation: rb-vs-badge-pulse 1.8s ease-in-out infinite; } .rb-vs-badge span { transform: rotate(-45deg); font-size: clamp(14px, 1.9vw, 20px); font-weight: 900; color: #241a04; letter-spacing: 1px; } @keyframes rb-vs-badge-pulse { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.08); } } /* clash reactions — pulseCard() (already used elsewhere) retriggers these by toggling the class off/on */ @keyframes rb-vs-attack-glow { 0% { box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.35), 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(245, 197, 66, 0.25); } 35% { box-shadow: 0 0 0 4px rgba(62, 232, 121, 0.8), 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 70px rgba(62, 232, 121, 0.75); transform: scale(1.04); } 100% { box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.35), 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(245, 197, 66, 0.25); } } .rb-vs-fighter.rb-vs-attack .rb-vs-photo-wrap { animation: rb-vs-attack-glow 0.7s ease-out; } @keyframes rb-vs-hit-shake { 0% { transform: translateX(0) rotate(0); filter: brightness(1); } 15% { transform: translateX(-10px) rotate(-2deg); filter: brightness(1.6) saturate(2); } 35% { transform: translateX(9px) rotate(2deg); } 55% { transform: translateX(-6px) rotate(-1deg); } 75% { transform: translateX(4px); } 100% { transform: translateX(0) rotate(0); filter: brightness(1); } } .rb-vs-fighter.rb-vs-hit { animation: rb-vs-hit-shake 0.55s ease-in-out; } /* one-shot impact only — ends back at normal, doesn't own the lasting dim look (that's .rb-vs-fighter-eliminated below, added at the same moment so there's no gap/snap between the animation ending and the permanent state) */ @keyframes rb-vs-defeat-slam { 0% { transform: scale(1) rotate(0); filter: brightness(1); } 20% { transform: scale(0.9) rotate(-3deg); filter: brightness(2.2) saturate(3); } 45% { transform: scale(1.06) rotate(2deg); } 70% { transform: scale(0.97) rotate(-1deg); } 100% { transform: scale(1) rotate(0); filter: brightness(1); } } .rb-vs-fighter.rb-vs-defeat { animation: rb-vs-defeat-slam 0.9s ease-in-out; } /* permanent post-elimination look — set once (JS) and never removed until the round resets and the arena tears down */ .rb-vs-fighter-eliminated .rb-vs-photo-wrap { filter: grayscale(0.9) brightness(0.5); } .rb-vs-fighter-eliminated .rb-vs-name { color: var(--muted); } /* whole-arena screen-flash on impact, appended/removed by JS (spawnVsBurst) */ .rb-vs-burst { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(245, 197, 66, 0.25) 40%, transparent 70%); animation: rb-vs-burst-fade 0.5s ease-out forwards; } @keyframes rb-vs-burst-fade { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.6); } } @media (max-width: 720px) { .rb-vs-arena { flex-direction: column; gap: 14px; padding: 16px; } .rb-vs-badge { transform: rotate(0); } .rb-vs-badge span { transform: rotate(0); } } /* --- round header: top-gifter chip + round clock, above the grid. Matches the reference competitor app's layout — see PROJECT_NOTES.md. --- */ .rb-round-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 12px; flex-wrap: wrap; max-width: 800px; width: 100%; } .rb-top-gifter-chip { display: flex; flex-direction: column; gap: 3px; padding: 7px 16px; border-radius: 14px; background: linear-gradient(160deg, rgba(30, 22, 8, 0.9), rgba(10, 8, 4, 0.94)); border: 1px solid var(--gold); box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.18), 0 8px 18px rgba(0, 0, 0, 0.4); } .rb-top-gifter-chip.hidden { display: none; } .rb-top-gifter-label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--gold-2); text-transform: uppercase; } .rb-top-gifter-crown { font-size: 12px; } .rb-top-gifter-info { display: flex; align-items: center; gap: 8px; } .rb-top-gifter-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--gold); } .rb-top-gifter-name { font-weight: 800; font-size: 14px; color: var(--text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rb-top-gifter-value { font-weight: 700; font-size: 13px; color: var(--gold-2); } .rb-round-timer-chip { display: flex; align-items: center; gap: 6px; padding: 9px 20px; border-radius: 999px; background: linear-gradient(160deg, rgba(24, 18, 6, 0.92), rgba(8, 6, 3, 0.96)); border: 1.5px solid var(--gold); box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.25), 0 0 20px rgba(245, 197, 66, 0.3), 0 8px 18px rgba(0, 0, 0, 0.45); font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; color: var(--gold-2); text-shadow: 0 0 12px rgba(245, 197, 66, 0.55); } .rb-round-timer-bolt { font-size: 15px; } .rb-round-timer-chip.rb-round-timer-urgent { border-color: #ef4444; color: #ff8080; animation: rb-vs-timer-pulse 1s ease-in-out infinite; }