:root { --theme-main: #ff5500; --theme-accent: #ffae00; --theme-grad-1: rgba(255,85,0,.15); --theme-grad-2: rgba(255,174,0,.1); --premier-color: #80808c; --faceit-color: #ff5500; }
html, body { margin: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; font-family: "Geist", Arial, sans-serif; color: #f3f1e9; }
.stage { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 24px 34px; box-sizing: border-box; }
.ticker { position: relative; width: min(1120px, calc(100vw - 48px)); height: 104px; display: grid; grid-template-columns: 18px 282px 108px 1fr 18px; align-items: stretch; background: linear-gradient(180deg, rgba(28,27,29,.96), rgba(9,9,11,.98)); border: 1px solid color-mix(in srgb, var(--theme-main) 30%, rgba(255,255,255,0.08)); border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; transition: border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.ticker.theme-premier { --theme-main: var(--premier-color); --theme-accent: color-mix(in srgb, var(--premier-color) 60%, #fff); --theme-grad-1: color-mix(in srgb, var(--premier-color) 20%, transparent); --theme-grad-2: color-mix(in srgb, var(--premier-color) 10%, transparent); border-color: color-mix(in srgb, var(--premier-color) 40%, transparent); }
.ticker::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--theme-grad-1), transparent 27%, transparent 72%, var(--theme-grad-2)); pointer-events: none; transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.edge { background: var(--theme-main); transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.edge.right { transform: scaleX(-1); background: var(--theme-accent); }
.player { display: grid; align-content: center; gap: 6px; padding: 0 18px; border-right: 1px solid rgba(255,255,255,.06); min-width: 0; z-index: 1; transition: border-color 0.6s ease; }
.eyebrow { color: var(--theme-main); transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1); font: 900 10px/1 "JetBrains Mono", monospace; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; }
.name { font: 900 clamp(26px, 3.8vw, 38px)/.86 "Saira Condensed", Arial, sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); transition: opacity 0.3s ease; }
.mode-badge { display: inline-block; background: var(--theme-main); color: #000; padding: 2px 6px; border-radius: 4px; margin-right: 6px; font-weight: 900; font-size: 9px; transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.bg-watermark { position: absolute; right: 5%; top: 50%; transform: translateY(-50%) rotate(-4deg); opacity: 0.03; font-size: 140px; font-weight: 900; font-style: italic; z-index: 0; pointer-events: none; transition: opacity 0.4s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.6s; color: var(--theme-main); text-transform: uppercase; white-space: nowrap; }
.theme-premier .bg-watermark { transform: translateY(-50%) translateX(30px) rotate(-2deg) scale(0.95); opacity: 0.04; }

.icon-scene { margin: 10px 7px; perspective: 800px; z-index: 1; }
.icon-flipper { width: 100%; height: 100%; position: relative; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); transform-style: preserve-3d; }
.theme-premier .icon-flipper { transform: rotateY(180deg); }
.icon-face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; }
.icon-back { transform: rotateY(180deg); }

.rank-card { margin: 0; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(135deg, rgba(255,255,255,.03), rgba(0,0,0,.2)); border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 8px; box-sizing: border-box; position: relative; z-index: 1; width: 100%; height: 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.faceit-rank { border-color: color-mix(in srgb, var(--faceit-color, #ff5500) 40%, transparent); background: radial-gradient(circle at center, color-mix(in srgb, var(--faceit-color, #ff5500) 15%, transparent), transparent 70%); }
.rank-card::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: linear-gradient(90deg, #ff5500, transparent); opacity: .88; border-radius: 2px; }
.faceit-rank::after { background: linear-gradient(90deg, transparent, var(--faceit-color, #ff5500), transparent); }
.rank-card img { width: 68px; height: 68px; object-fit: contain; opacity: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }

.premier-rank { border-color: color-mix(in srgb, var(--premier-color, #80808c) 40%, transparent); background: radial-gradient(circle at center, color-mix(in srgb, var(--premier-color, #80808c) 15%, transparent), transparent 70%); }
.premier-rank::after { background: linear-gradient(90deg, transparent, var(--premier-color, #80808c), transparent); }
.premier-bg-wrapper-main { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.premier-bg-wrapper-main img { width: 90px; height: auto; object-fit: contain; position: absolute; z-index: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.premier-number-overlay-main { position: relative; z-index: 1; font: 900 13px/1 "Saira Condensed", Arial, sans-serif; letter-spacing: -0.04em; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.8); margin-top: -1px; }
.rank-copy { display: grid; gap: 3px; align-content: center; min-width: 0; }
.rank-copy span { color: #a0a0ab; font: 900 9px/1 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.rank-copy strong { color: #ff7a21; font: 900 37px/.78 "Saira Condensed", Arial, sans-serif; min-width: 0; text-align: left; white-space: nowrap; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.premier-chip { grid-template-columns: 124px 1fr; padding: 6px 12px; border-color: color-mix(in srgb, var(--premier-color, #80808c) 40%, transparent); background: radial-gradient(circle at left, color-mix(in srgb, var(--premier-color, #80808c) 15%, transparent), transparent 70%); }
.premier-chip::after { background: linear-gradient(90deg, currentColor, transparent); }
.premier-chip .rank-copy strong { color: currentColor; font-size: 28px; }
.premier-bg-wrapper { position: relative; width: 124px; height: 44px; display: flex; align-items: center; justify-content: center; margin-left: -6px; }
.premier-bg-wrapper img { width: 100%; height: 100%; object-fit: contain; position: absolute; z-index: 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.premier-number-overlay { position: relative; z-index: 1; font: 900 14px/1 "Saira Condensed", Arial, sans-serif; letter-spacing: -0.04em; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 4px 8px rgba(0,0,0,0.8); margin-top: -1px; }
.carousel { position: relative; min-width: 0; z-index: 1; }
.panel { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 8px; padding: 10px 8px; box-sizing: border-box; opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity .5s cubic-bezier(0.4, 0, 0.2, 1), transform .6s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; }
.panel.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.panel .rank-card { flex: 0 0 180px; margin: 0; height: auto; }
.stat { min-width: 98px; flex: 1 1 0; border-left: 1px solid rgba(255,255,255,.06); display: grid; align-content: center; gap: 6px; padding: 0 16px; box-sizing: border-box; }
.stat.primary { flex: 1.35 1 0; border-left: none; }
.stat span { color: #a0a0ab; font: 900 10px/1 "JetBrains Mono", monospace; letter-spacing: .10em; text-transform: uppercase; white-space: nowrap; }
.stat strong { font: 900 32px/.82 "Saira Condensed", Arial, sans-serif; white-space: nowrap; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.stat em { color: #a0a0ab; font: 900 9px/1.1 "JetBrains Mono", monospace; text-transform: uppercase; font-style: normal; white-space: nowrap; margin-left: 4px; }
.recent { flex: 1 1 auto; display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.match-pill { width: 94px; border-radius: 6px; border: 1px solid rgba(255,255,255,.05); display: grid; align-content: center; gap: 4px; padding: 0 9px; box-sizing: border-box; }
.match-pill strong { font: 900 25px/.84 "Saira Condensed", Arial, sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.match-pill span { color: #a0a0ab; font: 900 8px/1.15 "JetBrains Mono", monospace; text-transform: uppercase; }
.match-pill.win { background: linear-gradient(135deg, rgba(74,222,128,.15), rgba(74,222,128,.02)); border-color: rgba(74,222,128,.2); color: #4ade80; }
.match-pill.loss { background: linear-gradient(135deg, rgba(255,68,56,.15), rgba(255,68,56,.02)); border-color: rgba(255,68,56,.2); color: #ff6a60; }
.pill { width: 42px; border-radius: 6px; border: 1px solid rgba(255,255,255,.05); display: grid; place-items: center; font: 900 22px/1 "Saira Condensed", Arial, sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.pill.win { background: linear-gradient(135deg, rgba(74,222,128,.15), rgba(74,222,128,.02)); border-color: rgba(74,222,128,.2); color: #4ade80; }
.pill.loss { background: linear-gradient(135deg, rgba(255,68,56,.15), rgba(255,68,56,.02)); border-color: rgba(255,68,56,.2); color: #ff6a60; }
.progress { position: absolute; left: 36px; right: 36px; bottom: 0; height: 3px; background: rgba(255,255,255,.05); z-index: 2; }
.progress span { display: block; width: 0; height: 100%; background: var(--theme-main); animation: timer 7s linear infinite; box-shadow: 0 0 8px var(--theme-main); transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.pulse { animation: pulse .42s ease both; }
@keyframes timer { from { width: 0; } to { width: 100%; } }
@keyframes pulse { 0% { filter: brightness(1); } 50% { filter: brightness(1.2); } 100% { filter: brightness(1); } }
@media (max-width: 760px) {
  .ticker { height: 176px; grid-template-columns: 14px 1fr 118px 14px; grid-template-rows: 80px 1fr; }
  .player { grid-column: 2; border-right: 0; }
  .rank-card { grid-column: 3; grid-template-columns: 44px 1fr; margin: 9px 6px; padding: 7px; column-gap: 7px; }
  .rank-card img { width: 42px; height: 42px; }
  .rank-copy span { font-size: 7px; }
  .rank-copy strong { font-size: 27px; }
  .carousel { grid-column: 2 / 4; grid-row: 2; }
  .edge.right { grid-column: 4; grid-row: 1 / 3; }
  .panel { overflow: hidden; }
  .stat strong { font-size: 25px; }
  .premier-chip { grid-template-columns: 80px 1fr; }
  .premier-bg-wrapper { width: 80px; height: 30px; margin-left: 0; }
  .premier-number-overlay { font-size: 13px; }
}