/* * BritRank Ranking Page — Battle Style V1 * ---------------------------------------- * Visual-only override layer. * No ranking, Battles, save, account or scoring logic is changed here. */ :root{ --br-neon:var(--theme-role-effect-dfff00); --br-bg:var(--theme-role-surface-070a0d); --br-panel:var(--theme-role-surface-0d1216); --br-panel-2:var(--theme-role-surface-11171c); --br-line:var(--theme-role-border-303840); --br-muted:var(--theme-role-text-929da5); --br-white:var(--theme-role-text-f6f7f8); --br-red:var(--theme-role-effect-ff174d); --br-blue:var(--theme-role-effect-176fff); } html{ background:var(--br-bg); } body{ background: radial-gradient(circle at 82% 5%,var(--theme-role-surface-rgba-223-255-0-06-8144ca),transparent 26%), linear-gradient(180deg,var(--theme-role-surface-06080a) 0,var(--theme-role-surface-080b0e) 100%); color:var(--br-white); } /* ------------------------------ PAGE FRAME ------------------------------ */ body .site-shell{ width:min(1420px,calc(100% - 32px)); } main{ overflow:hidden; } .breadcrumb-bar{ background:var(--theme-role-surface-080b0e); border-bottom:1px solid var(--theme-role-border-252c31); color:var(--theme-role-text-818b92); } .breadcrumb{ min-height:38px; font-size:10px; letter-spacing:.055em; } .breadcrumb strong{ color:var(--theme-role-text-cdd3d7); } /* ------------------------------ HERO ------------------------------ */ .hero{ position:relative; background: linear-gradient(90deg,var(--theme-role-surface-080b0e) 0%,var(--theme-role-surface-080b0e) 40%,var(--theme-role-surface-rgba-8-11-14-8-701953) 60%,var(--theme-role-surface-rgba-8-11-14-18-2a0816) 100%); border-bottom:2px solid var(--br-neon); min-height:310px; overflow:hidden; } .hero:before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(118deg,transparent 0 69%,var(--theme-role-surface-rgba-223-255-0-14-36945f) 69.2% 69.65%,transparent 69.9%), radial-gradient(circle at 75% 30%,var(--theme-role-surface-rgba-255-23-77-10-2132a7),transparent 24%); } .hero-inner{ min-height:310px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr); align-items:stretch; } .hero-copy{ position:relative; z-index:4; display:flex; flex-direction:column; justify-content:center; padding:42px 0 38px; max-width:760px; } .hero-copy:before{ content:"RANKING"; display:inline-flex; align-self:flex-start; margin-bottom:12px; padding:6px 10px 5px; background:var(--br-neon); color:var(--theme-role-text-080b0e); font-size:10px; font-weight:1000; font-style:italic; letter-spacing:.06em; transform:skew(-5deg); } .hero-copy .yellow-slash{ display:none; } .hero-copy h1{ margin:0; max-width:800px; color:var(--theme-role-text-fff); font-size:clamp(42px,5.4vw,78px); line-height:.88; letter-spacing:-.055em; font-style:italic; text-transform:uppercase; text-shadow:0 5px 20px var(--theme-role-shadow-rgba-0-0-0-6-b597da); } .hero-copy p{ margin:18px 0 0; max-width:680px; color:var(--theme-role-text-c7ced3); font-size:15px; line-height:1.45; font-weight:700; } .hero-art{ position:absolute; top:0; right:0; bottom:0; width:58%; min-width:520px; overflow:hidden; pointer-events:none; } .hero-art.hero-art-image{ background:var(--theme-role-surface-10151a); } .hero-image{ width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.06) contrast(1.08); } .hero-image-overlay{ position:absolute; inset:0; background: linear-gradient(90deg,var(--theme-role-surface-080b0e) 0%,var(--theme-role-surface-rgba-8-11-14-78-4e9d44) 24%,var(--theme-role-surface-rgba-8-11-14-22-9a5341) 65%,var(--theme-role-surface-rgba-8-11-14-06-a2774d) 100%), linear-gradient(0deg,var(--theme-role-surface-rgba-8-11-14-72-a9d0a6),transparent 48%); } .britain-badge{ right:20px; bottom:18px; transform:rotate(-2deg); border-color:var(--br-neon); background:var(--theme-role-surface-rgba-8-11-14-9-bb4f41); color:var(--theme-role-text-fff); } .britain-badge b{ color:var(--br-neon); } .hero-player{ opacity:.34; filter:grayscale(1); } .club-mark{ border-color:var(--br-neon); background:var(--theme-role-surface-0b0f12); } /* ------------------------------ STATS ------------------------------ */ .stats-row{ position:relative; z-index:5; margin-top:-1px; padding-top:15px; padding-bottom:15px; } .stats-panel, .no-experts{ background:var(--theme-role-surface-0c1115); border:1px solid var(--theme-role-border-30383f); box-shadow:none; } .stats-panel{ overflow:hidden; } .stat{ border-right-color:var(--theme-role-border-30383f); } .stat strong{ color:var(--theme-role-text-fff); } .stat span:last-child, .no-experts small{ color:var(--theme-role-text-8e989f); } .live-text, .no-experts strong{ color:var(--br-neon)!important; } .no-experts{ transform:none; } /* ------------------------------ MAIN TWO-PANEL AREA ------------------------------ */ .ranking-interaction-anchor{ scroll-margin-top:86px; } .ranking-layout{ position:relative; align-items:start; gap:14px; margin-top:2px; margin-bottom:26px; } .ranking-layout:before{ content:"VS"; position:absolute; z-index:8; top:92px; left:50%; width:54px; height:54px; transform:translateX(-50%) rotate(-4deg); border:3px solid var(--br-neon); border-radius:50%; background:var(--theme-role-surface-080b0e); display:flex; align-items:center; justify-content:center; color:var(--theme-role-text-fff); font-size:18px; font-weight:1000; font-style:italic; box-shadow:0 0 20px var(--theme-role-shadow-rgba-223-255-0-18-25da1b); pointer-events:none; } .ranking-panel{ border:1px solid var(--theme-role-border-333c43); border-radius:8px; background: linear-gradient(180deg,var(--theme-role-surface-rgba-255-255-255-018-d34853),transparent 16%), var(--br-panel); box-shadow:0 10px 32px var(--theme-role-shadow-rgba-0-0-0-22-41d185); overflow:hidden; } .your-ranking{ border-top:2px solid var(--br-neon); } .public-ranking{ border-top:2px solid var(--br-blue); } .panel-title-row{ min-height:62px; padding:10px 14px; border-bottom:1px solid var(--theme-role-border-2b3339); background:var(--theme-role-surface-0a0e11); align-items:center; } .panel-title.black-tab{ position:relative; min-width:210px; padding:10px 18px 9px; border:0; background:var(--br-neon); color:var(--theme-role-text-080b0e); transform:skew(-6deg); clip-path:polygon(0 0,95% 0,100% 50%,95% 100%,0 100%,4% 50%); } .public-ranking .panel-title.black-tab{ background:var(--br-blue); color:var(--theme-role-text-fff); } .panel-title.black-tab span{ display:block; transform:skew(6deg); font-size:19px; font-style:italic; font-weight:1000; letter-spacing:-.02em; } .reset-btn{ border:1px solid var(--theme-role-border-495159); background:var(--theme-role-surface-151b20); color:var(--theme-role-text-d5dade); box-shadow:none; font-size:10px; font-weight:900; } .reset-btn:hover{ border-color:var(--br-neon); color:var(--br-neon); } .ranking-context-title{ display:none; } .based-on{ color:var(--theme-role-text-9ca6ad); font-size:9px; font-weight:900; } /* ------------------------------ MODE TABS ------------------------------ */ .battle-mode-tabs{ margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0; border-bottom:1px solid var(--theme-role-border-343c42); background:var(--theme-role-surface-090d10); } .battle-mode-tabs a{ min-height:48px; display:flex; align-items:center; justify-content:center; border:0!important; border-right:1px solid var(--theme-role-border-30383f)!important; border-radius:0!important; background:var(--theme-role-surface-10161a)!important; color:var(--theme-role-text-858f96)!important; font-size:13px!important; font-style:italic; font-weight:1000!important; text-decoration:none; } .battle-mode-tabs a:last-child{ border-right:0!important; } .battle-mode-tabs a.active{ background:var(--theme-role-surface-0c1114)!important; color:var(--br-neon)!important; box-shadow:inset 0 -3px 0 var(--br-neon); } .battle-mode-tabs a:hover{ color:var(--theme-role-text-fff)!important; } /* ------------------------------ HELP / SAVE STATES ------------------------------ */ .ranking-help-strong, .panel-help{ margin:0!important; padding:13px 16px!important; border:0!important; border-bottom:1px solid var(--theme-role-border-2b3339)!important; background:var(--theme-role-surface-0b1014)!important; color:var(--theme-role-text-bfc7cc)!important; font-size:12px!important; line-height:1.45!important; font-weight:700!important; } .save-line{ min-height:44px; margin:0!important; padding:7px 14px!important; border:0!important; border-bottom:1px solid var(--theme-role-border-2b3339)!important; background:var(--theme-role-surface-0e1418)!important; color:var(--theme-role-text-8e989f)!important; } .save-state, .save-state-button{ min-height:30px!important; padding:6px 10px!important; border:1px solid var(--theme-role-border-414a51)!important; border-radius:2px!important; background:var(--theme-role-surface-171d22)!important; color:var(--theme-role-text-aeb6bb)!important; box-shadow:none!important; font-size:9px!important; font-weight:1000!important; } .save-state-button:not(:disabled), .save-state-button.save-action-ready{ border-color:var(--br-neon)!important; background:var(--br-neon)!important; color:var(--theme-role-text-080b0e)!important; } .edit-mode-banner{ margin:12px!important; border:1px solid var(--br-neon)!important; border-radius:4px!important; background: linear-gradient(135deg,var(--theme-role-surface-rgba-223-255-0-15-98ec4c),var(--theme-role-surface-rgba-223-255-0-03-0a9543))!important; color:var(--theme-role-text-fff)!important; box-shadow:none!important; } .edit-mode-kicker{ color:var(--br-neon)!important; } .provisional-rank-note{ margin:12px; border:1px solid var(--theme-role-border-3b444b); background:var(--theme-role-surface-11171c); color:var(--theme-role-text-d7dcdf); } /* ------------------------------ UNIVERSAL THUMBNAIL RULE ------------------------------ */ /* * These dimensions are deliberate: * every source image, whatever its aspect ratio, occupies the same frame. * Portrait / landscape / product / poster / group photo all crop, never stretch. */ .rank-row .thumb, .public-list .public-thumb{ flex:0 0 84px!important; width:84px!important; min-width:84px!important; max-width:84px!important; height:62px!important; min-height:62px!important; max-height:62px!important; aspect-ratio:auto!important; overflow:hidden!important; border:1px solid var(--theme-role-border-3b444b)!important; border-radius:3px!important; background: linear-gradient(135deg,var(--theme-role-surface-20272d),var(--theme-role-surface-0d1114))!important; display:flex!important; align-items:center!important; justify-content:center!important; } .rank-row .thumb img, .public-list .public-thumb img{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; object-position:center!important; border:0!important; border-radius:0!important; } .rank-row .thumb > span, .public-list .public-thumb:not(:has(img)){ color:var(--br-neon)!important; font-size:25px!important; font-weight:1000!important; font-style:italic!important; } /* ------------------------------ EDITABLE ROWS ------------------------------ */ .ranking-list{ padding:8px!important; background:var(--theme-role-surface-090d10)!important; } .rank-row{ min-height:72px!important; margin:0 0 5px!important; padding:4px 7px!important; display:grid!important; grid-template-columns:30px 42px 84px minmax(0,1fr) auto!important; gap:8px!important; align-items:center!important; border:1px solid var(--theme-role-border-2d353b)!important; border-radius:5px!important; background: linear-gradient(90deg,var(--theme-role-surface-rgba-223-255-0-018-a5df8b),transparent 28%), var(--theme-role-surface-12181d)!important; box-shadow:none!important; transition:border-color .12s ease,background .12s ease,transform .12s ease!important; } .rank-row:hover{ border-color:var(--theme-role-border-59636b)!important; background:var(--theme-role-surface-151c21)!important; } .rank-row.is-dragging, .rank-row.dragging{ border-color:var(--br-neon)!important; box-shadow:0 0 18px var(--theme-role-shadow-rgba-223-255-0-12-77324d)!important; } .drag-handle{ width:28px!important; min-width:28px!important; height:48px!important; border:0!important; background:transparent!important; color:var(--theme-role-text-818b92)!important; box-shadow:none!important; cursor:grab!important; } .drag-handle span{ font-size:18px!important; line-height:1!important; } .personal-position{ width:auto!important; min-width:0!important; color:var(--br-neon)!important; text-align:center!important; } .position-number{ color:var(--br-neon)!important; font-size:26px!important; font-style:italic!important; font-weight:1000!important; } .item-copy{ min-width:0!important; padding:0 4px!important; } .item-copy h3{ margin:0 0 2px!important; font-size:15px!important; line-height:1.1!important; } .item-page-name-link{ color:var(--theme-role-text-f7f8f8)!important; text-decoration:none!important; } .item-page-name-link:hover{ color:var(--br-neon)!important; } .ranking-entry-context, .public-entry-context{ display:block!important; overflow:hidden!important; max-width:100%!important; color:var(--theme-role-text-aeb7bd)!important; font-size:10px!important; line-height:1.25!important; white-space:nowrap!important; text-overflow:ellipsis!important; } .ranking-entry-meta, .public-entry-meta{ margin-top:3px!important; color:var(--theme-role-text-707b83)!important; font-size:9px!important; font-weight:800!important; text-transform:uppercase!important; } .ranking-entry-meta strong{ color:var(--br-neon)!important; } .move-controls{ display:flex!important; gap:4px!important; } .move-btn{ width:34px!important; height:34px!important; min-width:34px!important; min-height:34px!important; border:1px solid var(--theme-role-border-465058)!important; border-radius:3px!important; background:var(--theme-role-surface-0d1216)!important; color:var(--theme-role-text-d6dbde)!important; box-shadow:none!important; font-size:12px!important; } .move-btn:hover:not(:disabled){ border-color:var(--br-neon)!important; background:var(--theme-role-surface-151c20)!important; color:var(--br-neon)!important; } .move-btn:disabled{ opacity:.18!important; } /* ------------------------------ PUBLIC ROWS ------------------------------ */ .public-list{ margin:0!important; padding:8px!important; background:var(--theme-role-surface-090d10)!important; } .public-list li{ min-height:72px!important; margin:0 0 5px!important; padding:4px 8px!important; display:grid!important; grid-template-columns:44px 84px minmax(0,1fr) 26px!important; gap:9px!important; align-items:center!important; border:1px solid var(--theme-role-border-2d353b)!important; border-radius:5px!important; background: linear-gradient(90deg,var(--theme-role-surface-rgba-23-111-255-025-eb1d52),transparent 32%), var(--theme-role-surface-12181d)!important; } .public-pos{ color:var(--theme-role-text-fff)!important; font-size:26px!important; font-style:italic!important; font-weight:1000!important; text-align:center!important; } .public-list li:first-child .public-pos{ color:var(--br-neon)!important; } .public-name{ min-width:0!important; } .public-name strong{ display:block!important; font-size:15px!important; line-height:1.1!important; } .movement{ color:var(--theme-role-text-65717a)!important; text-align:center!important; font-size:12px!important; } /* ------------------------------ MANUAL SAVE / DRAG HINT ------------------------------ */ .manual-save-wrap{ margin:8px!important; padding:12px!important; border:1px solid var(--theme-role-border-3b444b)!important; border-radius:5px!important; background:var(--theme-role-surface-10161a)!important; box-shadow:none!important; } .manual-save-copy strong{ color:var(--theme-role-text-fff)!important; } .manual-save-copy span{ color:var(--theme-role-text-89939a)!important; } .save-ranking-btn{ border:2px solid var(--theme-role-border-090c0f)!important; border-radius:2px!important; background:var(--br-neon)!important; color:var(--theme-role-text-080b0e)!important; box-shadow:4px 4px 0 var(--theme-role-shadow-000)!important; font-style:italic!important; font-weight:1000!important; transform:skew(-3deg); } .save-ranking-btn:hover:not(:disabled){ background:var(--theme-role-surface-fff)!important; } .drag-hint{ margin:0!important; padding:11px 14px!important; border:0!important; border-top:1px solid var(--theme-role-border-2c343a)!important; background:var(--theme-role-surface-090d10)!important; color:var(--theme-role-text-79848b)!important; } .drag-hint strong{ font-size:9px!important; } .drag-arrow{ color:var(--br-neon)!important; } /* ------------------------------ BATTLE MODE WITHIN RANKING ------------------------------ */ .battles-panel{ border-top-color:var(--br-neon); } .battle-question{ background:var(--theme-role-surface-0d1216)!important; border-color:var(--theme-role-border-343c42)!important; color:var(--theme-role-text-fff)!important; } .battle-question-kicker small{ color:var(--br-neon)!important; } .battle-question > strong{ font-style:italic; } .battle-card{ border-color:var(--theme-role-border-333b41)!important; background:var(--theme-role-surface-0f1519)!important; } .battle-pick{ background:var(--theme-role-surface-11171c)!important; color:var(--theme-role-text-fff)!important; } .battle-card-image, .battle-card-fallback{ height:220px!important; object-fit:cover!important; } .battle-pick-cta, .battle-continue{ background:var(--br-neon)!important; color:var(--theme-role-text-080b0e)!important; font-weight:1000!important; } .battle-vs{ background:var(--theme-role-surface-080b0e)!important; color:var(--theme-role-text-fff)!important; border-color:var(--br-neon)!important; } /* ------------------------------ BELOW THE RANKING ------------------------------ */ .how-strip{ margin-top:10px; margin-bottom:30px; border:1px solid var(--theme-role-border-30383f); background:var(--theme-role-surface-0d1216); color:var(--theme-role-text-fff); } .how-item{ border-left-color:var(--theme-role-border-30383f); } .how-item p{ color:var(--theme-role-text-89949b); } .how-item strong, .fair-block strong{ color:var(--theme-role-text-fff); } .how-round, .how-icon{ color:var(--br-neon); } .fair-block{ background:var(--theme-role-surface-0a0e11); } .fair-block span{ background:var(--br-neon); } .post-create-choice{ border:1px solid var(--br-neon)!important; background:var(--theme-role-surface-0d1317)!important; color:var(--theme-role-text-fff)!important; box-shadow:none!important; } .post-create-kicker, .post-create-choice-copy b{ color:var(--br-neon)!important; } /* ------------------------------ FOOTER ------------------------------ */ .site-footer{ border-top:1px solid var(--theme-role-border-262d32); background:var(--theme-role-surface-050709); } /* ------------------------------ MOBILE ------------------------------ */ @media(max-width:980px){ .hero{ min-height:270px; } .hero-inner{ min-height:270px; grid-template-columns:1fr; } .hero-art{ width:62%; min-width:0; opacity:.7; } .hero-copy{ width:75%; padding:32px 0; } .ranking-layout:before{ display:none; } .ranking-layout{ gap:14px; } } @media(max-width:760px){ body .site-shell{ width:calc(100% - 16px); } .breadcrumb-bar{ display:none; } .hero{ min-height:245px; } .hero-inner{ min-height:245px; } .hero-art{ width:100%; opacity:.48; } .hero-image-overlay{ background: linear-gradient(90deg,var(--theme-role-surface-080b0e) 0%,var(--theme-role-surface-rgba-8-11-14-76-d99088) 66%,var(--theme-role-surface-rgba-8-11-14-45-7655a3) 100%), linear-gradient(0deg,var(--theme-role-surface-080b0e) 0%,transparent 65%); } .hero-copy{ width:92%; padding:27px 0 25px; } .hero-copy h1{ font-size:clamp(34px,10vw,48px); line-height:.9; } .hero-copy p{ margin-top:12px; font-size:12px; max-width:88%; } .stats-row{ margin-top:0; padding-top:8px; padding-bottom:8px; } .no-experts{ display:none!important; } .stats-panel{ width:100%; } .panel-title-row{ min-height:54px; padding:8px 9px; } .panel-title.black-tab{ min-width:180px; } .panel-title.black-tab span{ font-size:16px; } .battle-mode-tabs a{ min-height:44px; padding:0 7px!important; font-size:11px!important; } .ranking-list, .public-list{ padding:5px!important; } .rank-row{ min-height:68px!important; grid-template-columns:22px 34px 68px minmax(0,1fr) auto!important; gap:5px!important; padding:4px!important; } .rank-row .thumb, .public-list .public-thumb{ flex-basis:68px!important; width:68px!important; min-width:68px!important; max-width:68px!important; height:56px!important; min-height:56px!important; max-height:56px!important; } .position-number, .public-pos{ font-size:22px!important; } .drag-handle{ width:22px!important; min-width:22px!important; } .item-copy h3, .public-name strong{ font-size:13px!important; } .ranking-entry-context, .public-entry-context{ font-size:9px!important; } .ranking-entry-meta, .public-entry-meta{ display:none!important; } .move-controls{ flex-direction:column!important; gap:2px!important; } .move-btn{ width:29px!important; height:27px!important; min-width:29px!important; min-height:27px!important; font-size:9px!important; } .public-list li{ min-height:66px!important; grid-template-columns:34px 68px minmax(0,1fr)!important; gap:6px!important; padding:4px!important; } .public-list .movement{ display:none!important; } .manual-save-wrap{ flex-direction:column!important; align-items:stretch!important; } .save-ranking-btn{ width:100%!important; } .how-strip{ display:none!important; } } @media(max-width:430px){ .rank-row{ grid-template-columns:18px 28px 60px minmax(0,1fr) auto!important; } .rank-row .thumb, .public-list .public-thumb{ flex-basis:60px!important; width:60px!important; min-width:60px!important; max-width:60px!important; height:52px!important; min-height:52px!important; max-height:52px!important; } .public-list li{ grid-template-columns:30px 60px minmax(0,1fr)!important; } .item-copy h3, .public-name strong{ font-size:12px!important; } .ranking-entry-context, .public-entry-context{ display:none!important; } } /* ========================================================== V1.1 — EDITABLE ROW STRUCTURE HARD RESET Existing BritRank CSS gives some of these children legacy positioning. Reset each direct child so the grid owns layout. ========================================================== */ .rank-row{ position:relative!important; } .rank-row > .drag-handle{ position:static!important; inset:auto!important; float:none!important; grid-column:1!important; grid-row:1!important; margin:0!important; transform:none!important; } .rank-row > .personal-position{ position:static!important; inset:auto!important; float:none!important; grid-column:2!important; grid-row:1!important; margin:0!important; transform:none!important; } .rank-row > .thumb{ position:static!important; inset:auto!important; float:none!important; grid-column:3!important; grid-row:1!important; margin:0!important; transform:none!important; z-index:auto!important; } .rank-row > .item-copy{ position:static!important; inset:auto!important; float:none!important; grid-column:4!important; grid-row:1!important; width:auto!important; min-width:0!important; max-width:none!important; margin:0!important; padding:0 6px!important; transform:none!important; z-index:auto!important; overflow:hidden!important; } .rank-row > .item-copy h3, .rank-row > .item-copy .item-page-name-link{ position:static!important; inset:auto!important; float:none!important; width:auto!important; max-width:100%!important; margin:0!important; transform:none!important; } .rank-row > .move-controls{ position:static!important; inset:auto!important; float:none!important; grid-column:5!important; grid-row:1!important; width:auto!important; min-width:max-content!important; margin:0!important; transform:none!important; z-index:auto!important; justify-self:end!important; } .rank-row > .move-controls .move-btn{ position:static!important; inset:auto!important; float:none!important; margin:0!important; transform:none!important; } /* Keep text and image visually separate even if old styles leak through. */ .rank-row .item-copy{ background:transparent!important; } .rank-row .item-copy h3{ overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; } @media(max-width:760px){ .rank-row > .item-copy{ padding:0 4px!important; } .rank-row > .move-controls{ display:grid!important; grid-template-columns:29px 29px!important; grid-template-rows:1fr!important; gap:4px!important; } .rank-row > .move-controls .move-btn{ width:29px!important; height:34px!important; min-width:29px!important; min-height:34px!important; } } @media(max-width:520px){ .rank-row{ grid-template-columns:18px 28px 60px minmax(0,1fr) 30px!important; gap:4px!important; } .rank-row > .move-controls{ grid-template-columns:30px!important; grid-template-rows:27px 27px!important; gap:2px!important; } .rank-row > .move-controls .move-btn{ width:30px!important; height:27px!important; min-width:30px!important; min-height:27px!important; } } /* ========================================================== V1.2 — REMOVE EMPTY LEFT GRID GAP Drag handle no longer owns a full grid column. It floats at the extreme left, while rank/image/text shift left. ========================================================== */ .rank-row{ padding-left:7px!important; grid-template-columns:38px 84px minmax(0,1fr) auto!important; } .rank-row > .drag-handle{ position:absolute!important; left:2px!important; top:50%!important; width:15px!important; min-width:15px!important; height:34px!important; transform:translateY(-50%)!important; grid-column:auto!important; grid-row:auto!important; z-index:3!important; opacity:.55!important; } .rank-row > .personal-position{ grid-column:1!important; padding-left:10px!important; } .rank-row > .thumb{ grid-column:2!important; } .rank-row > .item-copy{ grid-column:3!important; } .rank-row > .move-controls{ grid-column:4!important; } @media(max-width:760px){ .rank-row{ grid-template-columns:32px 68px minmax(0,1fr) auto!important; padding-left:5px!important; } .rank-row > .drag-handle{ left:1px!important; width:12px!important; min-width:12px!important; } .rank-row > .personal-position{ padding-left:8px!important; } } @media(max-width:520px){ .rank-row{ grid-template-columns:29px 60px minmax(0,1fr) 30px!important; padding-left:4px!important; } .rank-row > .personal-position{ padding-left:7px!important; } } /* ========================================================== V1.3 — PANEL POLISH Tighter interaction chrome + Battle teaser below public list ========================================================== */ .battle-mode-tabs a{ min-height:42px!important; } .ranking-help-strong, .panel-help{ padding:9px 14px!important; font-size:10px!important; } .save-line{ min-height:36px!important; padding:4px 12px!important; } .save-state, .save-state-button{ min-height:26px!important; padding:4px 8px!important; font-size:8px!important; } .edit-mode-banner{ margin:8px 10px!important; padding:9px 11px!important; } .edit-mode-banner strong{ font-size:12px!important; } .edit-mode-banner p, .edit-mode-banner span{ font-size:9px!important; } .provisional-rank-note{ margin:8px 10px!important; padding:8px 10px!important; font-size:9px!important; } .ranking-layout:before{ width:46px!important; height:46px!important; top:84px!important; font-size:15px!important; border-width:2px!important; } /* Public-panel Battle callout */ .ranking-battle-teaser{ margin:10px 8px 8px; padding:16px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; border:1px solid var(--theme-role-border-39434a); border-left:3px solid var(--br-neon); border-radius:5px; background: radial-gradient(circle at 88% 20%,var(--theme-role-surface-rgba-223-255-0-10-0b4a61),transparent 30%), linear-gradient(135deg,var(--theme-role-surface-10171b),var(--theme-role-surface-090d10)); box-shadow:0 10px 24px var(--theme-role-shadow-rgba-0-0-0-18-09884d); } .ranking-battle-teaser-copy{ min-width:0; } .ranking-battle-teaser-kicker{ display:block; margin-bottom:5px; color:var(--br-neon); font-size:9px; font-weight:1000; font-style:italic; letter-spacing:.055em; } .ranking-battle-teaser-copy strong{ display:block; color:var(--theme-role-text-fff); font-size:17px; line-height:1.05; font-style:italic; text-transform:uppercase; } .ranking-battle-teaser-copy p{ margin:5px 0 0; max-width:430px; color:var(--theme-role-text-9ca6ad); font-size:10px; line-height:1.4; font-weight:700; } .ranking-battle-teaser-button{ min-height:44px; padding:0 18px; display:flex; align-items:center; justify-content:center; border:2px solid var(--theme-role-border-080b0e); background:var(--br-neon); color:var(--theme-role-text-080b0e); text-decoration:none; font-size:11px; font-style:italic; font-weight:1000; white-space:nowrap; box-shadow:4px 4px 0 var(--theme-role-shadow-000); transform:skew(-3deg); } .ranking-battle-teaser-button:hover{ background:var(--theme-role-surface-fff); color:var(--theme-role-text-080b0e); } @media(max-width:980px){ .ranking-battle-teaser{ grid-template-columns:1fr; gap:10px; } .ranking-battle-teaser-button{ width:100%; } } @media(max-width:760px){ .battle-mode-tabs a{ min-height:40px!important; } .ranking-help-strong, .panel-help{ padding:8px 10px!important; font-size:9px!important; } .save-line{ min-height:32px!important; padding:3px 9px!important; } .ranking-battle-teaser{ margin:8px 5px 5px; padding:13px; } .ranking-battle-teaser-copy strong{ font-size:15px; } .ranking-battle-teaser-copy p{ font-size:9px; } } /* ========================================================== V1.4 — SMART HERO FALLBACK Dedicated ranking image wins. Otherwise use contender images. ========================================================== */ .hero-art-collage{ background:var(--theme-role-surface-0c1014); } .hero-collage{ position:absolute; inset:-7% -3% -7% 7%; display:grid; grid-template-columns:1.05fr .95fr .8fr; gap:4px; transform:skewX(-7deg); overflow:hidden; } .hero-collage-panel{ position:relative; overflow:hidden; min-width:0; background:var(--theme-role-surface-141a1f); } .hero-collage-panel img{ position:absolute; inset:-6%; width:112%; height:112%; max-width:none; object-fit:cover; object-position:center; filter:saturate(1.08) contrast(1.12) brightness(.88); transform:skewX(7deg) scale(1.07); } .hero-collage-panel-1{ transform:translateY(3%); } .hero-collage-panel-2{ transform:translateY(-2%); } .hero-collage-panel-3{ transform:translateY(5%); } .hero-collage-overlay{ position:absolute; inset:0; z-index:2; pointer-events:none; background: linear-gradient(90deg,var(--theme-role-surface-080b0e) 0%,var(--theme-role-surface-rgba-8-11-14-94-dbcd87) 12%,var(--theme-role-surface-rgba-8-11-14-57-089025) 43%,var(--theme-role-surface-rgba-8-11-14-12-1553e6) 77%,var(--theme-role-surface-rgba-8-11-14-24-ac873c) 100%), linear-gradient(0deg,var(--theme-role-surface-rgba-8-11-14-72-a9d0a6) 0%,transparent 48%), radial-gradient(circle at 72% 18%,var(--theme-role-surface-rgba-223-255-0-12-77324d),transparent 31%); } .hero-art-collage:after{ content:""; position:absolute; z-index:3; left:42%; top:-20%; width:6px; height:145%; transform:rotate(17deg); background:var(--br-neon); opacity:.62; box-shadow:0 0 20px var(--theme-role-shadow-rgba-223-255-0-48-cfd935); } .hero-art-generic{ background: radial-gradient(circle at 70% 32%,var(--theme-role-surface-rgba-223-255-0-12-77324d),transparent 25%), linear-gradient(135deg,var(--theme-role-surface-11171c),var(--theme-role-surface-080b0e)); } .hero-generic-lightning{ position:absolute; inset:0; opacity:.4; background: linear-gradient(118deg,transparent 0 55%,var(--br-neon) 55.2% 55.8%,transparent 56%), linear-gradient(118deg,transparent 0 67%,var(--theme-role-surface-rgba-223-255-0-55-6b3fa8) 67.1% 67.45%,transparent 67.6%); } .hero-art-generic .generic-mark{ opacity:.95; } /* Dedicated uploaded hero remains the cleanest option. */ .hero-art-image .hero-image{ filter:saturate(1.05) contrast(1.08) brightness(.94); } @media(max-width:760px){ .hero-collage{ inset:-4% -14% -4% 24%; grid-template-columns:1fr .9fr; } .hero-collage-panel-3{ display:none; } .hero-collage-overlay{ background: linear-gradient(90deg,var(--theme-role-surface-080b0e) 0%,var(--theme-role-surface-rgba-8-11-14-84-101e2b) 55%,var(--theme-role-surface-rgba-8-11-14-34-12cc48) 100%), linear-gradient(0deg,var(--theme-role-surface-080b0e) 0%,transparent 62%); } .hero-art-collage:after{ left:58%; opacity:.45; } } /* ========================================================== V1.5 — MOBILE EDITABLE ROW HARD RESET Old responsive BritRank rules were still stretching the row and move-controls vertically on phones. ========================================================== */ @media(max-width:760px){ html body .your-ranking .ranking-list .rank-row{ position:relative!important; display:grid!important; grid-template-columns:30px 68px minmax(0,1fr) 34px!important; grid-template-rows:60px!important; grid-auto-rows:60px!important; column-gap:6px!important; row-gap:0!important; width:100%!important; height:68px!important; min-height:68px!important; max-height:68px!important; margin:0 0 5px!important; padding:4px 5px!important; align-items:center!important; align-content:center!important; overflow:hidden!important; } html body .your-ranking .ranking-list .rank-row > .personal-position{ position:static!important; grid-column:1!important; grid-row:1!important; width:30px!important; min-width:30px!important; max-width:30px!important; height:auto!important; min-height:0!important; margin:0!important; padding:0 0 0 6px!important; align-self:center!important; justify-self:center!important; } html body .your-ranking .ranking-list .rank-row .position-number{ display:block!important; margin:0!important; padding:0!important; font-size:22px!important; line-height:1!important; } html body .your-ranking .ranking-list .rank-row > .thumb{ position:static!important; grid-column:2!important; grid-row:1!important; width:68px!important; min-width:68px!important; max-width:68px!important; height:56px!important; min-height:56px!important; max-height:56px!important; margin:0!important; padding:0!important; align-self:center!important; justify-self:start!important; } html body .your-ranking .ranking-list .rank-row > .item-copy{ position:static!important; grid-column:3!important; grid-row:1!important; width:auto!important; min-width:0!important; max-width:none!important; height:auto!important; min-height:0!important; max-height:56px!important; margin:0!important; padding:0 3px!important; display:block!important; align-self:center!important; overflow:hidden!important; } html body .your-ranking .ranking-list .rank-row > .item-copy h3{ margin:0 0 2px!important; padding:0!important; font-size:13px!important; line-height:1.1!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } html body .your-ranking .ranking-list .rank-row .ranking-entry-context{ display:none!important; } html body .your-ranking .ranking-list .rank-row .ranking-entry-meta{ display:block!important; margin:2px 0 0!important; padding:0!important; font-size:7px!important; line-height:1.05!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } html body .your-ranking .ranking-list .rank-row > .move-controls{ position:static!important; grid-column:4!important; grid-row:1!important; display:grid!important; grid-template-columns:30px!important; grid-template-rows:27px 27px!important; gap:2px!important; width:30px!important; min-width:30px!important; max-width:30px!important; height:56px!important; min-height:56px!important; max-height:56px!important; margin:0!important; padding:0!important; align-self:center!important; justify-self:end!important; align-content:center!important; border:0!important; background:transparent!important; box-shadow:none!important; overflow:hidden!important; } html body .your-ranking .ranking-list .rank-row > .move-controls .move-btn{ position:static!important; width:30px!important; min-width:30px!important; max-width:30px!important; height:27px!important; min-height:27px!important; max-height:27px!important; margin:0!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:center!important; border:1px solid var(--theme-role-border-465058)!important; border-radius:3px!important; background:var(--theme-role-surface-0d1216)!important; color:var(--theme-role-text-d6dbde)!important; box-shadow:none!important; line-height:1!important; } html body .your-ranking .ranking-list .rank-row > .move-controls .move-btn:disabled{ background:var(--theme-role-surface-171d22)!important; color:var(--theme-role-text-566169)!important; opacity:.45!important; } /* Drag remains available without consuming its own layout column. */ html body .your-ranking .ranking-list .rank-row > .drag-handle{ position:absolute!important; left:2px!important; top:50%!important; width:10px!important; min-width:10px!important; max-width:10px!important; height:28px!important; min-height:28px!important; max-height:28px!important; margin:0!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:center!important; transform:translateY(-50%)!important; opacity:.45!important; z-index:4!important; } } @media(max-width:430px){ html body .your-ranking .ranking-list .rank-row{ grid-template-columns:27px 60px minmax(0,1fr) 30px!important; grid-template-rows:56px!important; grid-auto-rows:56px!important; height:64px!important; min-height:64px!important; max-height:64px!important; column-gap:5px!important; padding:4px!important; } html body .your-ranking .ranking-list .rank-row > .personal-position{ width:27px!important; min-width:27px!important; max-width:27px!important; padding-left:5px!important; } html body .your-ranking .ranking-list .rank-row .position-number{ font-size:20px!important; } html body .your-ranking .ranking-list .rank-row > .thumb{ width:60px!important; min-width:60px!important; max-width:60px!important; height:52px!important; min-height:52px!important; max-height:52px!important; } html body .your-ranking .ranking-list .rank-row > .item-copy{ max-height:52px!important; padding:0 2px!important; } html body .your-ranking .ranking-list .rank-row > .item-copy h3{ font-size:12px!important; } html body .your-ranking .ranking-list .rank-row > .move-controls{ width:30px!important; min-width:30px!important; max-width:30px!important; height:52px!important; min-height:52px!important; max-height:52px!important; grid-template-rows:25px 25px!important; } html body .your-ranking .ranking-list .rank-row > .move-controls .move-btn{ height:25px!important; min-height:25px!important; max-height:25px!important; } } /* ================================================================ BattleRanker Ranking Page V2 — purple / teal / pink reskin Visual-only. Ranking, Battles, drag, save and scoring behaviour unchanged. ================================================================ */ :root{ --br-neon:var(--theme-teal); --br-bg:var(--theme-bg); --br-panel:var(--theme-surface); --br-panel-2:var(--theme-surface-raised); --br-line:var(--theme-border); --br-muted:var(--theme-text-muted); --br-white:var(--theme-text); --br-red:var(--theme-pink); --br-blue:var(--theme-purple); --rank-teal:var(--theme-teal); --rank-pink:var(--theme-pink); --rank-purple:var(--theme-purple); --rank-purple-dark:var(--theme-purple-deep); --rank-orange:var(--theme-orange); --rank-navy:var(--theme-bg); --rank-panel:var(--theme-surface); --rank-panel2:var(--theme-surface-raised); --rank-line:var(--theme-border); } html{background:var(--rank-navy)} body{ background: radial-gradient(circle at 12% 0%,var(--theme-role-surface-rgba-91-32-200-18-56164c),transparent 390px), radial-gradient(circle at 88% 6%,var(--theme-role-surface-rgba-32-215-207-08-4eaa78),transparent 320px), var(--rank-navy); } .breadcrumb-bar{ background:var(--theme-role-surface-0b1026); border-bottom:1px solid var(--theme-role-border-303755); color:var(--theme-role-text-79819d); } .breadcrumb strong{color:var(--theme-role-text-cbd0df)} /* Hero */ .hero{ min-height:300px; border-bottom:0; background: radial-gradient(circle at 12% 16%,var(--theme-role-surface-rgba-255-255-255-08-0f1c00),transparent 180px), linear-gradient(135deg,var(--theme-role-surface-6028ce) 0%,var(--theme-role-surface-491aa9) 47%,var(--theme-role-surface-21104f) 100%); } .hero:before{ background: repeating-radial-gradient(circle at 0 0,var(--theme-role-surface-rgba-255-255-255-11-525f58) 0 1px,transparent 1px 10px), radial-gradient(circle at 78% 24%,var(--theme-role-surface-rgba-32-215-207-12-61c31c),transparent 26%); opacity:.22; } .hero-inner{min-height:300px} .hero-copy{padding-top:38px;padding-bottom:36px} .hero-copy:before{ margin-bottom:11px; border-radius:4px; background:var(--rank-teal); color:var(--theme-role-text-101225); box-shadow:3px 3px 0 var(--theme-role-shadow-rgba-7-10-25-55-d2b4e3); transform:rotate(-2deg); } .hero-copy h1{color:var(--theme-role-text-fff);text-shadow:0 5px 22px var(--theme-role-shadow-rgba-0-0-0-36-7bc0bc)} .hero-copy p{color:var(--theme-role-text-eee8ff)} .hero-art{width:56%;min-width:500px} .hero-art.hero-art-image{background:var(--theme-role-surface-18122d)} .hero-image{filter:saturate(1.08) contrast(1.06) brightness(.9)} .hero-image-overlay{ background: linear-gradient(90deg,var(--theme-role-surface-5422bb) 0%,var(--theme-role-surface-rgba-84-34-187-82-a07484) 20%,var(--theme-role-surface-rgba-38-16-87-20-b8c8d3) 65%,var(--theme-role-surface-rgba-15-10-34-06-ffe98c) 100%), linear-gradient(0deg,var(--theme-role-surface-rgba-12-8-29-65-cfda8a),transparent 48%); } .hero-collage-overlay{ background: linear-gradient(90deg,var(--theme-role-surface-5422bb) 0%,var(--theme-role-surface-rgba-84-34-187-88-0aacc7) 12%,var(--theme-role-surface-rgba-49-19-112-52-3f2831) 43%,var(--theme-role-surface-rgba-18-11-44-10-788ae4) 78%,var(--theme-role-surface-rgba-18-11-44-22-e2080a) 100%), linear-gradient(0deg,var(--theme-role-surface-rgba-12-8-29-62-4d4eea),transparent 50%); } .hero-art-collage:after{ background:var(--rank-teal); box-shadow:0 0 18px var(--theme-role-shadow-rgba-32-215-207-42-ca388f); } .hero-art-generic{ background: radial-gradient(circle at 70% 32%,var(--theme-role-surface-rgba-32-215-207-16-4a4312),transparent 25%), linear-gradient(135deg,var(--theme-role-surface-44209a),var(--theme-role-surface-17102f)); } .hero-generic-lightning{ background: linear-gradient(118deg,transparent 0 55%,var(--rank-teal) 55.2% 55.8%,transparent 56%), linear-gradient(118deg,transparent 0 67%,var(--theme-role-surface-rgba-255-63-146-7-744d53) 67.1% 67.45%,transparent 67.6%); } .britain-badge{display:none!important} /* Stats */ .stats-row{padding-top:13px;padding-bottom:13px} .stats-panel,.no-experts{ border-color:var(--theme-role-border-3a4365); border-radius:9px; background:var(--theme-role-surface-11172e); } .stat{border-right-color:var(--theme-role-border-353e5f)} .stat-icon,.live-text,.no-experts strong{color:var(--rank-teal)!important} .desktop-start-battle{ border-color:var(--theme-role-border-6247aa)!important; border-radius:9px!important; background:linear-gradient(135deg,var(--theme-role-surface-rgba-91-32-200-22-518f95),var(--theme-role-surface-rgba-255-63-146-08-aafc5d)),var(--theme-role-surface-12172d)!important; color:var(--theme-role-text-fff)!important; } a.desktop-start-battle{color:var(--rank-teal)!important} .desktop-start-battle:hover{ border-color:var(--rank-teal)!important; background:var(--theme-role-surface-171d38)!important; } /* Panels */ .ranking-layout{gap:16px;margin-top:4px;margin-bottom:28px} .ranking-panel{ border:1px solid var(--theme-role-border-3d4668); border-radius:12px; background:linear-gradient(180deg,var(--theme-role-surface-rgba-255-255-255-02-d33d85),transparent 14%),var(--rank-panel); box-shadow:0 15px 34px var(--theme-role-shadow-rgba-0-0-0-20-d5b06a); } .your-ranking{border-top:3px solid var(--rank-teal)} .public-ranking{border-top:3px solid var(--rank-purple)} .panel-title-row{ min-height:58px; border-bottom-color:var(--theme-role-border-343d5d); background:var(--theme-role-surface-0e142b); } .panel-title.black-tab{ min-width:205px; border-radius:7px; background:var(--rank-teal); color:var(--theme-role-text-101225); clip-path:none; transform:none; } .public-ranking .panel-title.black-tab{background:var(--rank-purple);color:var(--theme-role-text-fff)} .panel-title.black-tab span{transform:none;font-size:18px} .based-on{color:var(--theme-role-text-8991aa)} button.desktop-save-ranking, .your-ranking button.desktop-save-ranking, .your-ranking .reset-btn.desktop-save-ranking{ border-color:var(--theme-role-border-48516f)!important; border-radius:6px!important; background:var(--theme-role-surface-161c35)!important; color:var(--theme-role-text-dce0ea)!important; } button.desktop-save-ranking:hover, .your-ranking button.desktop-save-ranking:hover{ border-color:var(--rank-teal)!important; background:var(--theme-role-surface-1a223d)!important; color:var(--theme-role-text-fff)!important; } /* Rows */ .ranking-list,.public-list{background:var(--theme-role-surface-0d1228)!important} .rank-row,.public-list li{ border-color:var(--theme-role-border-343d5d)!important; border-radius:8px!important; background:var(--theme-role-surface-151b34)!important; } .rank-row{ background:linear-gradient(90deg,var(--theme-role-surface-rgba-32-215-207-025-5e2cf6),transparent 28%),var(--theme-role-surface-151b34)!important; } .public-list li{ background:linear-gradient(90deg,var(--theme-role-surface-rgba-106-52-221-035-9d10dd),transparent 32%),var(--theme-role-surface-151b34)!important; } .rank-row:hover,.public-list li:hover{ border-color:var(--theme-role-border-5c668b)!important; background:var(--theme-role-surface-19203a)!important; } .rank-row.is-dragging,.rank-row.dragging{ border-color:var(--rank-teal)!important; box-shadow:0 0 18px var(--theme-role-shadow-rgba-32-215-207-14-7918e8)!important; } .personal-position,.position-number{color:var(--rank-teal)!important} .public-pos{color:var(--theme-role-text-fff)!important} .public-list li:first-child .public-pos{color:var(--rank-pink)!important} .rank-row .thumb,.public-list .public-thumb{ border-color:var(--theme-role-border-4c5576)!important; border-radius:6px!important; background:var(--theme-role-surface-222942)!important; } .item-page-name-link:hover{color:var(--rank-teal)!important} .ranking-entry-context,.public-entry-context{color:var(--theme-role-text-aeb4c8)!important} .ranking-entry-meta,.public-entry-meta{color:var(--theme-role-text-77809d)!important} .ranking-entry-meta strong{color:var(--rank-teal)!important} .drag-handle{color:var(--theme-role-text-7e87a4)!important} .move-btn{ border-color:var(--theme-role-border-485170)!important; border-radius:5px!important; background:var(--theme-role-surface-10162d)!important; color:var(--theme-role-text-d8dce8)!important; } .move-btn:hover:not(:disabled){ border-color:var(--rank-teal)!important; background:var(--theme-role-surface-1a213c)!important; color:var(--rank-teal)!important; } /* Save + teaser */ .manual-save-wrap{ border-color:var(--theme-role-border-424b6b)!important; border-radius:8px!important; background:var(--theme-role-surface-12182f)!important; } .manual-save-copy span{color:var(--theme-role-text-9299b2)!important} .save-ranking-btn{ border-color:var(--theme-role-border-0a0d20)!important; border-radius:7px!important; background:var(--rank-pink)!important; color:var(--theme-role-text-fff)!important; box-shadow:4px 4px 0 var(--theme-role-shadow-070a18)!important; transform:none; } .save-ranking-btn:hover:not(:disabled){background:var(--theme-role-surface-ff6aad)!important} .drag-hint{ border-top-color:var(--theme-role-border-343d5d)!important; background:var(--theme-role-surface-0d1228)!important; color:var(--theme-role-text-7f88a4)!important; } .drag-arrow{color:var(--rank-teal)!important} .ranking-battle-teaser{ border-color:var(--theme-role-border-444d70); border-left:3px solid var(--rank-teal); border-radius:8px; background: radial-gradient(circle at 88% 20%,var(--theme-role-surface-rgba-91-32-200-18-56164c),transparent 34%), linear-gradient(135deg,var(--theme-role-surface-151b35),var(--theme-role-surface-0c1127)); } .ranking-battle-teaser-kicker{color:var(--rank-teal)} .ranking-battle-teaser-copy p{color:var(--theme-role-text-9ba2bb)} .ranking-battle-teaser-button{ border-color:var(--theme-role-border-0a0d20); border-radius:7px; background:var(--rank-pink); color:var(--theme-role-text-fff); box-shadow:4px 4px 0 var(--theme-role-shadow-070a18); transform:none; } .ranking-battle-teaser-button:hover{background:var(--theme-role-surface-ff6aad);color:var(--theme-role-text-fff)} /* How/footer */ .how-strip{ border-color:var(--theme-role-border-3a4363); border-radius:10px; background:var(--theme-role-surface-11172e); } .how-item{border-left-color:var(--theme-role-border-353e5f)} .how-item p{color:var(--theme-role-text-8f97b0)} .how-round,.how-icon{color:var(--rank-teal)} .fair-block{background:var(--theme-role-surface-0d1228)} .fair-block span{background:var(--rank-pink)} .site-footer{border-top:1px solid var(--theme-role-border-303755);background:var(--theme-role-surface-070b1d)} .footer-brand span{color:var(--rank-teal)} /* Mobile */ @media(max-width:760px){ .hero{min-height:230px} .hero-inner{min-height:230px} .hero-copy{width:92%;padding:24px 0 22px} .hero-copy:before{padding:5px 8px 4px;font-size:8px} .hero-copy h1{font-size:clamp(32px,9.5vw,46px)} .hero-copy p{color:var(--theme-role-text-e6def8)} .hero-art{opacity:.44} .hero-image-overlay{ background: linear-gradient(90deg,var(--theme-role-surface-5422bb) 0%,var(--theme-role-surface-rgba-84-34-187-78-4c6755) 63%,var(--theme-role-surface-rgba-28-13-62-36-ca4eb6) 100%), linear-gradient(0deg,var(--theme-role-surface-211047) 0%,transparent 66%); } .stats-panel{border-radius:8px} .ranking-mobile-compare-tabs button{ background:var(--rank-purple)!important; color:var(--theme-role-text-fff)!important; } .ranking-mobile-compare-tabs button.active{ background:var(--rank-teal)!important; color:var(--theme-role-text-101225)!important; } .ranking-mobile-tabs-shell .your-ranking, .ranking-mobile-tabs-shell .public-ranking{ border-color:var(--theme-role-border-3d4668)!important; border-top-color:var(--rank-teal)!important; background:var(--theme-role-surface-10162d)!important; } .ranking-mobile-tabs-shell .public-ranking{ border-top-color:var(--rank-purple)!important; } .mobile-ranking-simple-help{color:var(--theme-role-text-9299b2)!important} .public-ranking .public-rank-row, .your-ranking .rank-row{ border-color:var(--theme-role-border-3b4465)!important; background:var(--theme-role-surface-151b34)!important; } .public-ranking .public-pos, .your-ranking .personal-position{ color:var(--rank-teal)!important; } .public-ranking .public-rank-row:first-child .public-pos{ color:var(--rank-pink)!important; } .public-ranking .public-thumb, .your-ranking .thumb{ border-color:var(--theme-role-border-4b5575)!important; background:var(--theme-role-surface-222942)!important; } .your-ranking .move-btn{ border-color:var(--theme-role-border-485170)!important; background:var(--theme-role-surface-10162d)!important; } .your-ranking .move-btn:hover:not(:disabled){ border-color:var(--rank-teal)!important; color:var(--rank-teal)!important; } .save-toast.is-saved{ background:var(--rank-teal); color:var(--theme-role-text-101225); } .save-state-button.top-save-ready{ border-color:var(--theme-role-border-0b0f22); background:var(--rank-pink); color:var(--theme-role-text-fff); } } @media(max-width:430px){ .public-ranking .public-name strong, .your-ranking .item-copy h3{ overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; } } /* BattleRanker Theme V1 — shared branded hero family */ .hero{ background:var(--theme-hero-background)!important; } .hero:before{ background:var(--theme-hero-texture)!important; opacity:.12!important; } /* ================================================================ BattleRanker Ranking V2.1 — ELECTRIC YELLOW THEME --------------------------------------------------------------- Layout + ranking mechanics remain unchanged. Colour hierarchy now comes from the central theme tokens. Purple branded hero is deliberately retained. ================================================================ */ .theme-ranking-electric{ --rank-accent:var(--theme-page-accent); --rank-left:var(--theme-battle-left); --rank-right:var(--theme-battle-right); } /* Page chrome */ .theme-ranking-electric .breadcrumb strong, .theme-ranking-electric .stat-icon, .theme-ranking-electric .live-text, .theme-ranking-electric .no-experts strong{ color:var(--rank-accent)!important; } /* Hero keeps the purple texture, but all ranking cues become electric. */ .theme-ranking-electric .hero{ border-bottom:2px solid var(--rank-accent)!important; background:var(--theme-hero-background)!important; } .theme-ranking-electric .hero::before{ background: var(--theme-hero-texture), radial-gradient(circle at 78% 24%,var(--theme-role-surface-rgba-231-255-0-12-acfeb4),transparent 28%)!important; opacity:.18!important; } .theme-ranking-electric .hero-copy::before{ background:var(--rank-accent)!important; color:var(--theme-ink)!important; } .theme-ranking-electric .hero-art-collage::after, .theme-ranking-electric .hero-generic-lightning{ --br-neon:var(--rank-accent); } .theme-ranking-electric .hero-art-collage::after{ background:var(--rank-accent)!important; box-shadow:0 0 20px var(--theme-role-shadow-rgba-231-255-0-40-b36c87)!important; } /* Stats + main call to action */ .theme-ranking-electric .stats-panel, .theme-ranking-electric .no-experts{ border-color:var(--theme-border)!important; } .theme-ranking-electric a.desktop-start-battle{ border:1px solid var(--rank-accent)!important; background:var(--rank-accent)!important; color:var(--theme-ink)!important; box-shadow:4px 4px 0 var(--theme-shadow-deep)!important; } .theme-ranking-electric a.desktop-start-battle:hover{ border-color:var(--theme-role-border-f2ff54)!important; background:var(--theme-role-surface-f2ff54)!important; color:var(--theme-ink)!important; } /* Both ranking cards belong to one Electric Yellow system. */ .theme-ranking-electric .your-ranking, .theme-ranking-electric .public-ranking{ border-top:3px solid var(--rank-accent)!important; } .theme-ranking-electric .ranking-panel{ border-color:var(--theme-role-border-444d69)!important; } .theme-ranking-electric .panel-title.black-tab, .theme-ranking-electric .public-ranking .panel-title.black-tab{ background:var(--rank-accent)!important; color:var(--theme-ink)!important; } .theme-ranking-electric .panel-title.black-tab span{ color:var(--theme-ink)!important; } /* Editable ranking */ .theme-ranking-electric .personal-position, .theme-ranking-electric .position-number, .theme-ranking-electric .ranking-entry-meta strong{ color:var(--rank-accent)!important; } .theme-ranking-electric .rank-row{ background: linear-gradient(90deg,var(--theme-role-surface-rgba-231-255-0-035-32b2f9),transparent 30%), var(--theme-surface-raised)!important; } .theme-ranking-electric .rank-row:hover{ border-color:var(--theme-role-border-69724d)!important; } .theme-ranking-electric .rank-row.is-dragging, .theme-ranking-electric .rank-row.dragging{ border-color:var(--rank-accent)!important; box-shadow:0 0 20px var(--theme-role-shadow-rgba-231-255-0-15-e82150)!important; } .theme-ranking-electric .drag-handle, .theme-ranking-electric .drag-arrow{ color:var(--rank-accent)!important; } .theme-ranking-electric .move-btn:hover:not(:disabled){ border-color:var(--rank-accent)!important; color:var(--rank-accent)!important; } /* Official ranking */ .theme-ranking-electric .public-list li{ background: linear-gradient(90deg,var(--theme-role-surface-rgba-231-255-0-025-84e294),transparent 32%), var(--theme-surface-raised)!important; } .theme-ranking-electric .public-pos, .theme-ranking-electric .public-list li:first-child .public-pos{ color:var(--rank-accent)!important; } /* Save states */ .theme-ranking-electric .save-ranking-btn{ border-color:var(--theme-role-border-090c17)!important; background:var(--rank-accent)!important; color:var(--theme-ink)!important; box-shadow:4px 4px 0 var(--theme-shadow-deep)!important; } .theme-ranking-electric .save-ranking-btn:hover:not(:disabled){ background:var(--theme-role-surface-f2ff54)!important; color:var(--theme-ink)!important; } .theme-ranking-electric .save-state-button:not(:disabled), .theme-ranking-electric .save-state-button.save-action-ready, .theme-ranking-electric .save-state-button.top-save-ready{ border-color:var(--rank-accent)!important; background:var(--rank-accent)!important; color:var(--theme-ink)!important; } .theme-ranking-electric .save-toast.is-saved{ background:var(--rank-accent)!important; color:var(--theme-ink)!important; } /* Battle callout */ .theme-ranking-electric .ranking-battle-teaser{ border-color:var(--theme-role-border-4b536e)!important; border-left:3px solid var(--rank-accent)!important; background: radial-gradient(circle at 88% 20%,var(--theme-role-surface-rgba-231-255-0-08-1625d1),transparent 34%), linear-gradient(135deg,var(--theme-role-surface-151b35),var(--theme-role-surface-0c1127))!important; } .theme-ranking-electric .ranking-battle-teaser-kicker{ color:var(--rank-accent)!important; } .theme-ranking-electric .ranking-battle-teaser-button{ border-color:var(--theme-role-border-090c17)!important; background:var(--rank-accent)!important; color:var(--theme-ink)!important; box-shadow:4px 4px 0 var(--theme-shadow-deep)!important; } .theme-ranking-electric .ranking-battle-teaser-button:hover{ background:var(--theme-role-surface-f2ff54)!important; color:var(--theme-ink)!important; } /* How it works / footer */ .theme-ranking-electric .how-round, .theme-ranking-electric .how-icon{ color:var(--rank-accent)!important; } .theme-ranking-electric .fair-block span{ background:var(--rank-accent)!important; } .theme-ranking-electric .footer-brand span{ color:var(--rank-accent)!important; } /* Desktop save button gets an electric hover, stays quieter when saved. */ @media(min-width:761px){ .theme-ranking-electric button.desktop-save-ranking:not(:disabled){ border-color:var(--rank-accent)!important; background:var(--rank-accent)!important; color:var(--theme-ink)!important; } .theme-ranking-electric button.desktop-save-ranking:disabled{ border-color:var(--theme-role-border-404861)!important; background:var(--theme-role-surface-11172e)!important; color:var(--theme-role-text-7f879f)!important; } } /* Mobile: one clear yellow comparison control. Existing row dimensions and tab mechanics are preserved exactly. */ @media(max-width:760px){ .theme-ranking-electric .ranking-mobile-compare-tabs button{ background:var(--theme-role-surface-171d38)!important; color:var(--theme-role-text-aeb5c9)!important; border-color:var(--theme-role-border-3d4668)!important; } .theme-ranking-electric .ranking-mobile-compare-tabs button.active{ background:var(--rank-accent)!important; color:var(--theme-ink)!important; } .theme-ranking-electric .ranking-mobile-tabs-shell .your-ranking, .theme-ranking-electric .ranking-mobile-tabs-shell .public-ranking{ border-top-color:var(--rank-accent)!important; } .theme-ranking-electric .public-ranking .public-pos, .theme-ranking-electric .your-ranking .personal-position{ color:var(--rank-accent)!important; } .theme-ranking-electric .public-ranking .public-rank-row:first-child .public-pos{ color:var(--rank-accent)!important; } .theme-ranking-electric .your-ranking .move-btn:hover:not(:disabled){ border-color:var(--rank-accent)!important; color:var(--rank-accent)!important; } } /* ================================================================ BattleRanker Ranking V2.2 — yellow theme polish Dark electric hero, shared yellow header, quieter editable-list frame. ================================================================ */ /* The list itself is neutral; yellow is reserved for action/focus. */ .theme-ranking-electric .your-ranking .ranking-list, .theme-ranking-electric .your-ranking .ranking-list.awaiting-choice{ border:1px solid var(--theme-role-border-353e5e)!important; outline:0!important; box-shadow:none!important; } .theme-ranking-electric .your-ranking .ranking-list:focus, .theme-ranking-electric .your-ranking .ranking-list:focus-within{ outline:0!important; box-shadow:none!important; } /* Theme 1 hero: keep the textured graphic language, lose the purple field. */ .theme-ranking-electric .hero{ background: radial-gradient(circle at 14% 20%,var(--theme-role-surface-rgba-231-255-0-10-7c0c34),transparent 260px), linear-gradient(135deg,var(--theme-role-surface-111521) 0%,var(--theme-role-surface-090d17) 48%,var(--theme-role-surface-05070d) 100%)!important; } .theme-ranking-electric .hero::before{ background: repeating-radial-gradient(circle at 0 0,var(--theme-role-surface-rgba-231-255-0-10-7c0c34) 0 1px,transparent 1px 11px), radial-gradient(circle at 78% 24%,var(--theme-role-surface-rgba-231-255-0-11-b59712),transparent 28%)!important; opacity:.18!important; } .theme-ranking-electric .hero-image-overlay{ background: linear-gradient(90deg,var(--theme-role-surface-0c1019) 0%,var(--theme-role-surface-rgba-12-16-25-88-7070e5) 24%,var(--theme-role-surface-rgba-7-9-15-22-90394c) 67%,var(--theme-role-surface-rgba-4-5-9-06-7941ad) 100%), linear-gradient(0deg,var(--theme-role-surface-rgba-5-7-12-72-013952),transparent 50%)!important; } .theme-ranking-electric .hero-collage-overlay{ background: linear-gradient(90deg,var(--theme-role-surface-0c1019) 0%,var(--theme-role-surface-rgba-12-16-25-94-1de06e) 15%,var(--theme-role-surface-rgba-9-12-19-55-7cb693) 44%,var(--theme-role-surface-rgba-5-7-12-10-3d577b) 78%,var(--theme-role-surface-rgba-5-7-12-22-c4b63a) 100%), linear-gradient(0deg,var(--theme-role-surface-rgba-5-7-12-72-013952),transparent 52%), radial-gradient(circle at 76% 18%,var(--theme-role-surface-rgba-231-255-0-08-1625d1),transparent 30%)!important; } .theme-ranking-electric .hero-art-generic{ background: radial-gradient(circle at 70% 32%,var(--theme-role-surface-rgba-231-255-0-12-acfeb4),transparent 25%), linear-gradient(135deg,var(--theme-role-surface-131824),var(--theme-role-surface-070a10))!important; } /* A touch more electric emphasis without flooding the page. */ .theme-ranking-electric .panel-title.black-tab, .theme-ranking-electric .public-ranking .panel-title.black-tab, .theme-ranking-electric a.desktop-start-battle, .theme-ranking-electric .save-ranking-btn, .theme-ranking-electric .ranking-battle-teaser-button{ box-shadow:3px 3px 0 var(--theme-role-shadow-05070d)!important; } @media(max-width:760px){ .theme-ranking-electric .hero-image-overlay{ background: linear-gradient(90deg,var(--theme-role-surface-0c1019) 0%,var(--theme-role-surface-rgba-12-16-25-82-0129e3) 62%,var(--theme-role-surface-rgba-5-7-12-36-aa252b) 100%), linear-gradient(0deg,var(--theme-role-surface-070a11) 0%,transparent 66%)!important; } } /* BattleRanker ranking title tabs — rounded body + rounded slanted end. Use a skewed, rounded yellow end-piece instead of a polygon so the right-hand slant keeps genuinely rounded top/bottom corners. */ .theme-ranking-electric .panel-title.black-tab, .theme-ranking-electric .public-ranking .panel-title.black-tab{ position:relative; overflow:visible !important; isolation:isolate; clip-path:none !important; transform:none !important; border-radius:9px !important; box-shadow:none !important; filter:drop-shadow(5px 3px 0 var(--theme-role-shadow-05070d)); } .theme-ranking-electric .panel-title.black-tab::before, .theme-ranking-electric .public-ranking .panel-title.black-tab::before{ content:""; position:absolute; z-index:-1; top:0; right:-10px; width:22px; height:100%; background:var(--rank-accent); transform:skewX(-18deg); transform-origin:center; border-radius:0 9px 9px 0; } .theme-ranking-electric .panel-title.black-tab::after, .theme-ranking-electric .public-ranking .panel-title.black-tab::after{ display:none !important; } .theme-ranking-electric .panel-title.black-tab span{ position:relative; z-index:1; } /* ================================================================ BattleRanker Ranking V2.3 — LARGER DESKTOP RANKING IMAGERY TEST Keep mobile exactly as it is. Increase the visual weight of both Your Current Order and Official Ranking without changing mechanics. ================================================================ */ @media(min-width:761px){ .theme-ranking-electric .rank-row, .theme-ranking-electric .public-list li{ min-height:94px !important; } .theme-ranking-electric .rank-row{ grid-template-columns:42px 110px minmax(0,1fr) auto !important; gap:10px !important; padding:5px 9px !important; } .theme-ranking-electric .public-list li{ grid-template-columns:48px 110px minmax(0,1fr) 28px !important; gap:11px !important; padding:5px 9px !important; } .theme-ranking-electric .rank-row .thumb, .theme-ranking-electric .public-list .public-thumb{ flex:0 0 110px !important; width:110px !important; min-width:110px !important; max-width:110px !important; height:82px !important; min-height:82px !important; max-height:82px !important; border-radius:7px !important; } .theme-ranking-electric .item-copy h3, .theme-ranking-electric .public-name strong{ font-size:16px !important; } .theme-ranking-electric .ranking-entry-meta, .theme-ranking-electric .public-entry-meta{ margin-top:4px !important; font-size:9px !important; } } /* ================================================================ BattleRanker Ranking V2.4 — BIGGER DESKTOP RANKING IMAGES Push the visual emphasis further than V2.3. Mobile remains unchanged. ================================================================ */ @media(min-width:761px){ .theme-ranking-electric .rank-row, .theme-ranking-electric .public-list li{ min-height:116px !important; } .theme-ranking-electric .rank-row{ grid-template-columns:46px 142px minmax(0,1fr) auto !important; gap:12px !important; padding:6px 10px !important; } .theme-ranking-electric .public-list li{ grid-template-columns:52px 142px minmax(0,1fr) 28px !important; gap:12px !important; padding:6px 10px !important; } .theme-ranking-electric .rank-row .thumb, .theme-ranking-electric .public-list .public-thumb{ flex:0 0 142px !important; width:142px !important; min-width:142px !important; max-width:142px !important; height:104px !important; min-height:104px !important; max-height:104px !important; border-radius:8px !important; } .theme-ranking-electric .position-number, .theme-ranking-electric .public-pos{ font-size:30px !important; } .theme-ranking-electric .item-copy h3, .theme-ranking-electric .public-name strong{ font-size:17px !important; } } /* ================================================================ BattleRanker Ranking V2.5 — FEATURED OFFICIAL #1 Desktop only. The live #1 contender becomes a proper champion card; #2 onward keep the established compact ranking rows. Your editable ranking and all mobile ranking mechanics are untouched. ================================================================ */ @media(min-width:761px){ .theme-ranking-electric .public-ranking .public-list{ padding:10px !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child{ position:relative !important; min-height:214px !important; margin-bottom:10px !important; padding:16px 16px 16px 14px !important; grid-template-columns:62px 236px minmax(0,1fr) 28px !important; gap:14px !important; align-items:center !important; overflow:hidden !important; border:1px solid var(--theme-role-border-737d54) !important; border-top:3px solid var(--rank-accent) !important; border-radius:11px !important; background: radial-gradient(circle at 16% 15%,var(--theme-role-surface-rgba-231-255-0-10-7c0c34),transparent 180px), linear-gradient(135deg,var(--theme-role-surface-rgba-231-255-0-045-5d766f),transparent 48%), var(--theme-role-surface-171d35) !important; box-shadow: 0 14px 28px var(--theme-role-shadow-rgba-0-0-0-22-41d185), inset 0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-018-d34853) !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child::before{ content:"CURRENT #1"; position:absolute; z-index:4; left:88px; top:13px; display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:4px; background:var(--rank-accent); color:var(--theme-ink); font-size:8px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:.07em; transform:rotate(-2deg); box-shadow:2px 2px 0 var(--theme-role-shadow-rgba-0-0-0-34-c366e4); pointer-events:none; } .theme-ranking-electric .public-ranking .public-list > li:first-child::after{ content:"#1"; position:absolute; right:46px; bottom:-19px; color:var(--theme-role-text-rgba-231-255-0-045-5d766f); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:118px; line-height:.8; font-style:italic; font-weight:1000; pointer-events:none; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-pos{ position:relative !important; z-index:2 !important; align-self:start !important; padding-top:38px !important; color:var(--rank-accent) !important; font-size:46px !important; line-height:.9 !important; letter-spacing:-.05em !important; text-shadow:0 0 18px var(--theme-role-shadow-rgba-231-255-0-12-acfeb4); } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-thumb{ position:relative !important; z-index:2 !important; flex:0 0 236px !important; width:236px !important; min-width:236px !important; max-width:236px !important; height:180px !important; min-height:180px !important; max-height:180px !important; border:1px solid var(--theme-role-border-5c6687) !important; border-radius:9px !important; box-shadow:0 10px 25px var(--theme-role-shadow-rgba-0-0-0-25-a59544) !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-name{ position:relative !important; z-index:2 !important; align-self:center !important; padding:22px 4px 4px 0 !important; overflow:visible !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-name strong{ margin:0 0 10px !important; font-size:27px !important; line-height:.98 !important; font-style:italic !important; letter-spacing:-.035em !important; text-transform:uppercase !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-entry-context{ display:block !important; max-width:520px !important; margin:0 !important; overflow:visible !important; color:var(--theme-role-text-c7ccda) !important; font-size:12px !important; line-height:1.42 !important; font-weight:700 !important; white-space:normal !important; text-overflow:clip !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-entry-meta{ display:block !important; margin-top:12px !important; color:var(--theme-role-text-8f97ad) !important; font-size:9px !important; line-height:1 !important; font-weight:900 !important; letter-spacing:.045em !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .movement{ position:relative !important; z-index:2 !important; align-self:start !important; margin-top:43px !important; } .theme-ranking-electric .public-ranking .public-list > li:nth-child(2), .theme-ranking-electric .public-ranking .public-list > li:nth-child(3){ min-height:126px !important; border-color:var(--theme-role-border-444e70) !important; background: linear-gradient(90deg,var(--theme-role-surface-rgba-231-255-0-025-84e294),transparent 32%), var(--theme-role-surface-151b34) !important; } .theme-ranking-electric .public-ranking .public-list > li:nth-child(2) .public-pos, .theme-ranking-electric .public-ranking .public-list > li:nth-child(3) .public-pos{ font-size:33px !important; } .theme-ranking-electric .public-ranking .public-list > li:nth-child(2) .public-name strong, .theme-ranking-electric .public-ranking .public-list > li:nth-child(3) .public-name strong{ font-size:18px !important; } } /* Mobile intentionally keeps the established row-for-row Official/Your comparison. */ /* ================================================================ BattleRanker Ranking V3.6 — OFFICIAL ROW STAT RAILS Desktop only. The champion keeps the bigger stat rail; the rest of the official ranking gets a smaller, muted inline version. Mobile stays on the established compact layout. ================================================================ */ .champion-stat-line, .public-mini-stat-line{ display:none; } @media(min-width:761px){ .theme-ranking-electric .public-ranking .public-list > li .public-name{ display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:flex-start !important; min-width:0 !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-name{ min-height:184px !important; padding-top:18px !important; padding-bottom:12px !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-entry-context{ margin-bottom:18px !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-stat-line{ position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,minmax(120px,1fr)); width:min(620px,100%); margin-top:auto; border:1px solid var(--theme-role-border-404a68); border-radius:8px; overflow:hidden; background:var(--theme-role-surface-0d142a); box-shadow:inset 0 1px 0 var(--theme-role-shadow-rgba-255-255-255-025-40fa64); } .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-stat{ min-height:66px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:10px 15px 9px; border-right:1px solid var(--theme-role-border-37415f); } .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-stat:last-child{ border-right:0; } .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-stat strong{ display:block !important; margin:0 0 5px !important; color:var(--rank-accent) !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:25px !important; line-height:.9 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:-.035em !important; text-transform:none !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-stat small{ display:block; color:var(--theme-role-text-8790aa); font-size:8px; line-height:1; font-style:normal; font-weight:1000; letter-spacing:.065em; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-entry-meta{ margin-top:10px !important; } /* Smaller, calmer stat rail for every other official row. */ .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats{ align-items:center !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-name{ padding-right:16px !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-entry-context{ display:none !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat-line{ display:grid !important; grid-template-columns:repeat(3,minmax(88px,1fr)) !important; width:min(470px,100%) !important; margin-top:10px !important; border:1px solid var(--theme-role-border-323b58) !important; border-radius:7px !important; overflow:hidden !important; background:var(--theme-role-surface-0f162d) !important; box-shadow:inset 0 1px 0 var(--theme-role-shadow-rgba-255-255-255-018-d34853) !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat{ min-height:46px !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; padding:7px 11px 6px !important; border-right:1px solid var(--theme-role-border-2c3551) !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat:last-child{ border-right:0 !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat strong{ display:block !important; margin:0 0 3px !important; color:var(--theme-role-text-d5dbea) !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:18px !important; line-height:.95 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:-.03em !important; text-transform:none !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat small{ display:block !important; color:var(--theme-role-text-7e88a4) !important; font-size:7px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.06em !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-entry-meta{ margin-top:8px !important; } } @media(max-width:1180px) and (min-width:761px){ .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat-line{ width:min(390px,100%) !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat strong{ font-size:16px !important; } } @media(max-width:760px){ .champion-stat-line, .public-mini-stat-line{ display:none !important; } } /* ================================================================ BattleRanker Ranking V3.7 — DEFINITIVE DESKTOP SINGLE-STAGE FIX Restores the intended desktop redesign after an older CSS baseline accidentally reintroduced the two-column layout. ================================================================ */ .ranking-desktop-compare-tabs{ display:none; } @media(min-width:761px){ .theme-ranking-electric .ranking-layout{ display:block !important; width:min(1420px,calc(100% - 32px)) !important; margin-top:2px !important; margin-bottom:28px !important; } .theme-ranking-electric .ranking-layout::before, .theme-ranking-electric .ranking-layout::after{ content:none !important; display:none !important; } /* Main BATTLERANKER RANKING / YOUR RANKING switch */ .theme-ranking-electric .ranking-desktop-compare-tabs{ display:grid !important; grid-template-columns:1fr 1fr !important; width:100% !important; min-height:60px !important; margin:0 !important; border:1px solid var(--theme-role-border-434b68) !important; border-bottom:0 !important; border-radius:12px 12px 0 0 !important; overflow:hidden !important; background:var(--theme-role-surface-0e142b) !important; } .theme-ranking-electric .ranking-desktop-compare-tabs button{ position:relative !important; min-height:60px !important; margin:0 !important; padding:0 24px !important; border:0 !important; border-right:1px solid var(--theme-role-border-39415d) !important; border-radius:0 !important; background:var(--theme-role-surface-0e142b) !important; color:var(--theme-role-text-aeb5c8) !important; box-shadow:none !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:20px !important; line-height:1 !important; font-style:normal !important; font-weight:950 !important; letter-spacing:-.02em !important; text-align:center !important; cursor:pointer !important; } .theme-ranking-electric .ranking-desktop-compare-tabs button:last-child{ border-right:0 !important; } .theme-ranking-electric .ranking-desktop-compare-tabs button:hover{ color:var(--theme-role-text-fff) !important; background:var(--theme-role-surface-131a34) !important; } .theme-ranking-electric .ranking-desktop-compare-tabs button.active{ color:var(--theme-role-text-fff) !important; background:var(--theme-role-surface-11172e) !important; } .theme-ranking-electric .ranking-desktop-compare-tabs button.active::after{ content:"" !important; position:absolute !important; left:12% !important; right:12% !important; bottom:0 !important; height:4px !important; background:var(--rank-accent) !important; } /* Only one full-width ranking panel may be visible at a time. */ .theme-ranking-electric .ranking-layout [data-ranking-mobile-panel]{ display:none !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; border:1px solid var(--theme-role-border-434b68) !important; border-top:0 !important; border-radius:0 0 12px 12px !important; background: linear-gradient(180deg,var(--theme-role-surface-rgba-255-255-255-018-d34853),transparent 12%), var(--theme-role-surface-0f152d) !important; box-shadow:0 18px 38px var(--theme-role-shadow-rgba-0-0-0-22-41d185) !important; box-sizing:border-box !important; } .theme-ranking-electric .ranking-layout [data-ranking-mobile-panel].is-mobile-active{ display:block !important; } /* Old panel headers/tabs are redundant in the single-stage desktop view. */ .theme-ranking-electric .ranking-layout .ranking-mobile-compare-tabs, .theme-ranking-electric .ranking-layout .panel-title-row, .theme-ranking-electric .ranking-layout .ranking-context-title{ display:none !important; } /* ------------------------------------------------------------ OFFICIAL VIEW ------------------------------------------------------------ */ .theme-ranking-electric .public-ranking .public-list{ margin:0 !important; padding:18px !important; border:0 !important; background:transparent !important; } .theme-ranking-electric .public-ranking .public-list > li{ min-height:108px !important; margin:0 0 8px !important; padding:8px 12px !important; grid-template-columns:58px 142px minmax(0,1fr) 34px !important; gap:14px !important; align-items:center !important; border:1px solid var(--theme-role-border-404968) !important; border-radius:8px !important; background:var(--theme-role-surface-121931) !important; box-shadow:none !important; } .theme-ranking-electric .public-ranking .public-list > li:last-child{ margin-bottom:0 !important; } /* Champion */ .theme-ranking-electric .public-ranking .public-list > li:first-child{ position:relative !important; min-height:252px !important; margin-bottom:14px !important; padding:18px !important; grid-template-columns:72px 290px minmax(0,1fr) 34px !important; gap:18px !important; align-items:center !important; overflow:hidden !important; border:1px solid var(--theme-role-border-7c8657) !important; border-top:4px solid var(--rank-accent) !important; border-radius:12px !important; background: radial-gradient(circle at 18% 10%,var(--theme-role-surface-rgba-231-255-0-10-7c0c34),transparent 240px), linear-gradient(135deg,var(--theme-role-surface-171e38),var(--theme-role-surface-11172f) 68%) !important; box-shadow:0 18px 36px var(--theme-role-shadow-rgba-0-0-0-24-120af2) !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child::before{ content:"CURRENT #1" !important; position:absolute !important; left:104px !important; top:16px !important; z-index:4 !important; min-height:25px !important; display:flex !important; align-items:center !important; padding:0 9px !important; border-radius:4px !important; background:var(--rank-accent) !important; color:var(--theme-ink) !important; font-size:8px !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:.07em !important; transform:rotate(-2deg) !important; box-shadow:2px 2px 0 var(--theme-role-shadow-rgba-0-0-0-35-630345) !important; } /* No decorative trophy / stars / slash experiments. */ .theme-ranking-electric .public-ranking .public-list > li:first-child::after, .theme-ranking-electric .public-ranking .public-list > li:first-child .movement::before, .theme-ranking-electric .public-ranking .public-list > li:first-child .public-name::before, .theme-ranking-electric .public-ranking .public-list > li:first-child .public-name::after, .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-stat-line::before, .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-stat-line::after{ content:none !important; display:none !important; background:none !important; box-shadow:none !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-pos{ align-self:start !important; padding-top:48px !important; color:var(--rank-accent) !important; font-size:52px !important; line-height:.9 !important; letter-spacing:-.055em !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-thumb{ width:290px !important; min-width:290px !important; max-width:290px !important; height:210px !important; min-height:210px !important; max-height:210px !important; border-radius:10px !important; border-color:var(--theme-role-border-5a6484) !important; box-shadow:0 12px 28px var(--theme-role-shadow-rgba-0-0-0-28-ca0b96) !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-name{ min-height:184px !important; padding:18px 10px 12px 0 !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-name strong{ display:block !important; margin:0 0 12px !important; font-size:32px !important; line-height:.95 !important; font-style:italic !important; letter-spacing:-.04em !important; text-transform:uppercase !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-entry-context{ display:block !important; max-width:720px !important; margin:0 0 18px !important; overflow:visible !important; color:var(--theme-role-text-c9cfdd) !important; font-size:14px !important; line-height:1.45 !important; font-weight:700 !important; white-space:normal !important; text-overflow:clip !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .movement{ width:auto !important; min-width:0 !important; height:auto !important; align-self:start !important; margin:0 !important; padding-top:48px !important; color:var(--theme-role-text-667089) !important; } /* ------------------------------------------------------------ YOUR RANKING VIEW ------------------------------------------------------------ */ .theme-ranking-electric .your-ranking{ padding:16px !important; } .theme-ranking-electric .your-ranking .ranking-order-helper{ margin:0 0 12px !important; } .theme-ranking-electric .your-ranking .ranking-list{ width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } .theme-ranking-electric .your-ranking .rank-row{ min-height:116px !important; margin:0 0 8px !important; border-color:var(--theme-role-border-404968) !important; background:var(--theme-role-surface-121931) !important; } .theme-ranking-electric .your-ranking .ranking-battle-teaser{ margin:14px 0 0 !important; } } /* Tablet desktop-range scaling without returning to two columns. */ @media(max-width:1180px) and (min-width:761px){ .theme-ranking-electric .public-ranking .public-list > li:first-child{ grid-template-columns:64px 250px minmax(0,1fr) 28px !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-thumb{ width:250px !important; min-width:250px !important; max-width:250px !important; height:190px !important; min-height:190px !important; max-height:190px !important; } } /* ================================================================ BattleRanker Ranking V3.8 — FINAL DESKTOP POLISH Tighten lower-row stat alignment, widen the champion stat rail, and remove the now-unused movement dash column on desktop. ================================================================ */ @media(min-width:761px){ /* Remove the empty movement column/dashes from the official list. */ .theme-ranking-electric .public-ranking .public-list > li{ grid-template-columns:58px 142px minmax(0,1fr) !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child{ grid-template-columns:72px 290px minmax(0,1fr) !important; } .theme-ranking-electric .public-ranking .public-list .movement{ display:none !important; } /* Make the champion stats use the available content width more confidently. */ .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-stat-line{ width:min(760px,100%) !important; } /* Pull the smaller stat rails closer to each contender's name and keep them compact enough to feel attached to the copy. */ .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-name{ justify-content:center !important; padding-right:8px !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat-line{ width:min(430px,100%) !important; margin-top:7px !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat{ min-height:43px !important; padding:6px 10px 5px !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat strong{ font-size:17px !important; } /* A touch less visual weight on #2/#3 so the #1 card remains the clear hero. */ .theme-ranking-electric .public-ranking .public-list > li:nth-child(2), .theme-ranking-electric .public-ranking .public-list > li:nth-child(3){ min-height:116px !important; } .theme-ranking-electric .public-ranking .public-list > li:nth-child(2) .public-name strong, .theme-ranking-electric .public-ranking .public-list > li:nth-child(3) .public-name strong{ font-size:18px !important; } } @media(max-width:1180px) and (min-width:761px){ .theme-ranking-electric .public-ranking .public-list > li{ grid-template-columns:52px 132px minmax(0,1fr) !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child{ grid-template-columns:64px 250px minmax(0,1fr) !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat-line{ width:min(380px,100%) !important; } } /* ================================================================ BattleRanker Ranking V3.9 — CHAMPION STAT RAIL UP Move the #1 stat rail higher so it sits closer to the title area, especially on lists that do not yet have a description. ================================================================ */ @media(min-width:761px){ .theme-ranking-electric .public-ranking .public-list > li:first-child .public-name{ justify-content:flex-start !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-stat-line{ margin-top:14px !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .public-entry-context{ margin-bottom:12px !important; } } /* ================================================================ BattleRanker Ranking V3.10 — CHAMPION TITLE TROPHY Reuse the clean header trophy mark beside the current #1 title. ================================================================ */ .champion-title-trophy{ display:none; } @media(min-width:761px){ .theme-ranking-electric .public-ranking .public-list > li:first-child .public-name strong{ display:flex !important; align-items:center !important; gap:10px !important; flex-wrap:wrap !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-title-trophy{ display:inline-flex !important; width:24px !important; height:24px !important; flex:0 0 24px !important; align-items:center !important; justify-content:center !important; color:var(--rank-accent) !important; transform:translateY(-1px) !important; filter:drop-shadow(0 0 6px var(--theme-role-shadow-rgba-231-255-0-15-e82150)); } .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-title-trophy svg{ display:block !important; width:100% !important; height:100% !important; overflow:visible !important; } .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-title-trophy path{ fill:currentColor; } .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-title-trophy path[fill="none"]{ fill:none !important; } } @media(max-width:760px){ .champion-title-trophy{ display:none !important; } } /* ================================================================ BattleRanker Ranking V3.11 — TROPHY SIZE / ALIGNMENT TWEAK Slightly larger champion trophy, still intentionally raised a touch. ================================================================ */ @media(min-width:761px){ .theme-ranking-electric .public-ranking .public-list > li:first-child .champion-title-trophy{ width:29px !important; height:29px !important; flex:0 0 29px !important; transform:translateY(-2px) !important; } } /* ================================================================ BattleRanker Ranking V3.12 — RANKING STATS SIDECARD Desktop only. Use the spare right-hand space beside the upper official rows for a compact whole-ranking stats card. ================================================================ */ .ranking-insight-card{ display:none; } @media(min-width:1050px){ .theme-ranking-electric .public-ranking .public-list{ display:grid !important; grid-template-columns:minmax(0,1fr) 300px !important; gap:10px 16px !important; align-items:start !important; } .theme-ranking-electric .public-ranking .public-list > li{ margin:0 !important; } .theme-ranking-electric .public-ranking .public-list > li.is-champion{ grid-column:1 / -1 !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats{ grid-column:1 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ display:flex !important; grid-column:2 !important; grid-row:2 / span 5 !important; align-self:stretch !important; flex-direction:column !important; gap:14px !important; padding:16px !important; border:1px solid var(--theme-role-border-465071) !important; border-top:3px solid var(--rank-accent) !important; border-radius:10px !important; background: radial-gradient(circle at 100% 0, var(--theme-role-surface-rgba-231-255-0-055-0e4447), transparent 160px), var(--theme-role-surface-121930) !important; box-shadow:0 10px 24px var(--theme-role-shadow-rgba-0-0-0-18-09884d) !important; list-style:none !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card::marker{ content:""; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-badge{ display:inline-flex !important; align-self:flex-start !important; align-items:center !important; min-height:24px !important; padding:0 9px !important; border-radius:4px !important; background:var(--rank-accent) !important; color:var(--theme-ink) !important; font-size:8px !important; line-height:1 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:.07em !important; transform:rotate(-2deg) !important; box-shadow:2px 2px 0 var(--theme-role-shadow-rgba-0-0-0-34-c366e4) !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpis{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi{ padding:12px 12px 10px !important; border:1px solid var(--theme-role-border-37405e) !important; border-radius:8px !important; background:var(--theme-role-surface-0f162d) !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi strong{ display:block !important; margin:0 0 5px !important; color:var(--theme-role-text-fff) !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:24px !important; line-height:.92 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:-.03em !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi small, .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-label{ display:block !important; color:var(--theme-role-text-8590ad) !important; font-size:8px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.07em !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-list{ display:flex !important; flex-direction:column !important; gap:8px !important; margin-top:auto !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-row{ padding:10px 12px !important; border:1px solid var(--theme-role-border-2f3854) !important; border-radius:8px !important; background:var(--theme-role-surface-rgba-10-16-35-52-74d1a5) !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value{ display:block !important; margin-top:7px !important; color:var(--theme-role-text-f5f7fb) !important; font-size:16px !important; line-height:1.15 !important; font-style:italic !important; font-weight:900 !important; letter-spacing:-.02em !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value small{ display:block !important; margin-top:5px !important; color:var(--rank-accent) !important; font-size:11px !important; line-height:1 !important; font-style:normal !important; font-weight:900 !important; letter-spacing:0 !important; } } @media(max-width:1049px){ .ranking-insight-card{ display:none !important; } } /* ================================================================ BattleRanker Ranking V3.13 — STATS SIDECARD LAYOUT FIX Keep the official ranking rows full-width. The ranking stats card now floats over the genuinely empty right-hand area instead of shrinking the whole list into a narrow left column. ================================================================ */ @media(min-width:1050px){ .theme-ranking-electric .public-ranking .public-list{ position:relative !important; display:block !important; grid-template-columns:none !important; gap:0 !important; } .theme-ranking-electric .public-ranking .public-list > li.is-champion, .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats{ width:100% !important; margin:0 0 8px !important; grid-column:auto !important; grid-row:auto !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ position:absolute !important; z-index:8 !important; top:276px !important; right:18px !important; display:flex !important; width:330px !important; min-width:330px !important; max-width:330px !important; height:auto !important; min-height:0 !important; grid-column:auto !important; grid-row:auto !important; align-self:auto !important; flex-direction:column !important; gap:13px !important; margin:0 !important; padding:15px !important; border:1px solid var(--theme-role-border-465071) !important; border-top:3px solid var(--rank-accent) !important; border-radius:10px !important; background: radial-gradient(circle at 100% 0,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 150px), var(--theme-role-surface-121930) !important; box-shadow:0 14px 30px var(--theme-role-shadow-rgba-0-0-0-30-6d79cf) !important; } /* Compact three-up headline stats instead of the tall stack. */ .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpis{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:7px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi{ min-width:0 !important; padding:10px 8px 9px !important; text-align:center !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi strong{ font-size:21px !important; text-align:center !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi small{ font-size:7px !important; text-align:center !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-list{ gap:7px !important; margin-top:0 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-row{ display:grid !important; grid-template-columns:92px minmax(0,1fr) !important; align-items:center !important; gap:10px !important; padding:9px 10px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-label{ margin:0 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value{ margin:0 !important; font-size:14px !important; text-align:left !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value small{ display:inline !important; margin:0 0 0 6px !important; font-size:9px !important; } } @media(max-width:1180px) and (min-width:1050px){ .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ width:285px !important; min-width:285px !important; max-width:285px !important; right:14px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-row{ grid-template-columns:80px minmax(0,1fr) !important; } } /* ================================================================ BattleRanker Ranking V3.14 — LARGER RANKING STATS CARD Desktop only. Scale up the sidecard and all of its internal typography so it feels like a deliberate secondary feature. ================================================================ */ @media(min-width:1050px){ .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ width:390px !important; min-width:390px !important; max-width:390px !important; right:20px !important; top:270px !important; gap:16px !important; padding:19px !important; border-radius:12px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-badge{ min-height:28px !important; padding:0 11px !important; font-size:9px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpis{ gap:9px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi{ min-height:74px !important; padding:12px 10px 10px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi strong{ margin-bottom:6px !important; font-size:28px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi small{ font-size:8px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-list{ gap:9px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-row{ grid-template-columns:108px minmax(0,1fr) !important; gap:12px !important; min-height:58px !important; padding:11px 12px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-label{ font-size:8px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value{ font-size:17px !important; line-height:1.1 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value small{ margin-left:7px !important; font-size:10px !important; } } @media(max-width:1180px) and (min-width:1050px){ .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ width:340px !important; min-width:340px !important; max-width:340px !important; right:14px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-row{ grid-template-columns:96px minmax(0,1fr) !important; } } /* ================================================================ BattleRanker Ranking V3.15 — STRUCTURAL STATS SIDECARD Desktop only. Stop floating the ranking-stats card on top of the list. Instead, make the upper official ranking area a deliberate two-column composition: #2–#5 on the left, stats card on the right, then the remaining rows return to full width below. ================================================================ */ @media(min-width:1050px){ /* Rebuild the official list as a real grid, not an overlay stack. */ .theme-ranking-electric .public-ranking .public-list{ position:static !important; display:grid !important; grid-template-columns:minmax(0,1fr) 390px !important; gap:8px 16px !important; align-items:start !important; } /* Default: full-width rows. */ .theme-ranking-electric .public-ranking .public-list > li{ width:auto !important; margin:0 !important; grid-column:1 / -1 !important; position:relative !important; } /* #1 remains the full-width champion row. */ .theme-ranking-electric .public-ranking .public-list > li.is-champion{ grid-column:1 / -1 !important; } /* Rows #2–#5 occupy the left column only. */ .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(2), .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(3), .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(4), .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(5){ grid-column:1 !important; } /* The stats card is now structurally placed beside rows #2–#5. */ .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ position:relative !important; display:flex !important; grid-column:2 !important; grid-row:2 / span 4 !important; width:auto !important; min-width:0 !important; max-width:none !important; top:auto !important; right:auto !important; margin:0 !important; padding:19px !important; align-self:stretch !important; flex-direction:column !important; gap:16px !important; border:1px solid var(--theme-role-border-465071) !important; border-top:3px solid var(--rank-accent) !important; border-radius:12px !important; background: radial-gradient(circle at 100% 0,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 160px), var(--theme-role-surface-121930) !important; box-shadow:0 14px 30px var(--theme-role-shadow-rgba-0-0-0-24-120af2) !important; z-index:1 !important; } /* Rows beneath the sidecard go back to full width. */ .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(n+6){ grid-column:1 / -1 !important; } /* Slightly wider stat rails on the upper-left rows, as they now have less width. */ .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(2) .public-mini-stat-line, .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(3) .public-mini-stat-line, .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(4) .public-mini-stat-line, .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(5) .public-mini-stat-line{ width:min(360px,100%) !important; } /* Keep the sidecard content bigger and clean. */ .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-badge{ min-height:28px !important; padding:0 11px !important; font-size:9px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpis{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:9px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi{ min-width:0 !important; min-height:74px !important; padding:12px 10px 10px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; text-align:center !important; border:1px solid var(--theme-role-border-37405e) !important; border-radius:8px !important; background:var(--theme-role-surface-0f162d) !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi strong{ margin:0 0 6px !important; font-size:28px !important; text-align:center !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi small{ font-size:8px !important; text-align:center !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-list{ display:flex !important; flex-direction:column !important; gap:9px !important; margin-top:auto !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-row{ display:grid !important; grid-template-columns:108px minmax(0,1fr) !important; align-items:center !important; gap:12px !important; min-height:58px !important; padding:11px 12px !important; border:1px solid var(--theme-role-border-2f3854) !important; border-radius:8px !important; background:var(--theme-role-surface-rgba-10-16-35-52-74d1a5) !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-label{ margin:0 !important; font-size:8px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value{ margin:0 !important; font-size:17px !important; line-height:1.1 !important; text-align:left !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value small{ display:inline !important; margin:0 0 0 7px !important; font-size:10px !important; } } /* Slightly narrower but still structural version for smaller wide desktops. */ @media(max-width:1240px) and (min-width:1050px){ .theme-ranking-electric .public-ranking .public-list{ grid-template-columns:minmax(0,1fr) 340px !important; gap:8px 14px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ padding:17px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-row{ grid-template-columns:96px minmax(0,1fr) !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(2) .public-mini-stat-line, .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(3) .public-mini-stat-line, .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(4) .public-mini-stat-line, .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats:nth-child(5) .public-mini-stat-line{ width:min(320px,100%) !important; } } /* ================================================================ BattleRanker Ranking V3.16 — RESPONSIVE STATS CARD FALLBACK When the desktop window is too narrow for the structural side column, keep the ranking stats card fully styled as a full-width block below the ranking rows instead of letting it inherit ordinary row styling. ================================================================ */ @media(max-width:1049px) and (min-width:761px){ .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ position:relative !important; display:flex !important; width:100% !important; min-width:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; margin:10px 0 0 !important; padding:18px !important; grid-column:auto !important; grid-row:auto !important; grid-template-columns:none !important; flex-direction:column !important; gap:15px !important; align-items:stretch !important; border:1px solid var(--theme-role-border-465071) !important; border-top:3px solid var(--rank-accent) !important; border-radius:11px !important; background: radial-gradient(circle at 100% 0,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 150px), var(--theme-role-surface-121930) !important; box-shadow:0 12px 26px var(--theme-role-shadow-rgba-0-0-0-22-41d185) !important; list-style:none !important; overflow:hidden !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card::before, .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card::after{ content:none !important; display:none !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-badge{ display:inline-flex !important; align-self:flex-start !important; align-items:center !important; min-height:27px !important; padding:0 10px !important; border-radius:4px !important; background:var(--rank-accent) !important; color:var(--theme-ink) !important; font-size:9px !important; line-height:1 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:.07em !important; transform:rotate(-2deg) !important; box-shadow:2px 2px 0 var(--theme-role-shadow-rgba-0-0-0-34-c366e4) !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpis{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:9px !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi{ min-width:0 !important; min-height:68px !important; padding:11px 10px 9px !important; display:flex !important; flex-direction:column !important; justify-content:center !important; align-items:flex-start !important; border:1px solid var(--theme-role-border-37405e) !important; border-radius:8px !important; background:var(--theme-role-surface-0f162d) !important; text-align:left !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi strong{ display:block !important; margin:0 0 5px !important; color:var(--theme-role-text-fff) !important; font-size:25px !important; line-height:.92 !important; font-style:italic !important; font-weight:1000 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi small, .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-label{ display:block !important; color:var(--theme-role-text-8590ad) !important; font-size:8px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.07em !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-list{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:9px !important; margin:0 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-row{ display:block !important; min-height:66px !important; padding:11px 12px !important; border:1px solid var(--theme-role-border-2f3854) !important; border-radius:8px !important; background:var(--theme-role-surface-rgba-10-16-35-52-74d1a5) !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value{ display:block !important; margin:7px 0 0 !important; color:var(--theme-role-text-f5f7fb) !important; font-size:16px !important; line-height:1.12 !important; font-style:italic !important; font-weight:900 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value small{ display:inline !important; margin-left:6px !important; color:var(--rank-accent) !important; font-size:10px !important; font-style:normal !important; font-weight:900 !important; } } /* ================================================================ BattleRanker Ranking V3.17 — STATS CARD GAP FIX Let the structural desktop stats card size itself to its content instead of stretching to the full height of rows #2–#5. ================================================================ */ @media(min-width:1050px){ .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ align-self:start !important; height:auto !important; min-height:0 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-list{ margin-top:0 !important; } } /* ================================================================ BattleRanker Ranking V3.18 — STATS CARD FULL-HEIGHT, TOP-PACKED Restore the structural sidecard to fill the height beside rows #2–#5, but keep all of its content packed at the top so any spare space sits harmlessly at the bottom of the panel. ================================================================ */ @media(min-width:1050px){ .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ align-self:stretch !important; height:auto !important; min-height:100% !important; justify-content:flex-start !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-list{ margin-top:0 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpis{ margin:0 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-row{ margin:0 !important; } } /* ================================================================ BattleRanker Ranking V3.19 — BATTLE STATS EXPLAINER Clarify that head-to-head stats are evidence, not the sort order. Desktop only; keep the established mobile ranking compact. ================================================================ */ .ranking-stats-explainer{ display:none; } @media(min-width:761px){ .theme-ranking-electric .public-ranking .public-list > li.ranking-stats-explainer{ display:flex !important; grid-column:1 / -1 !important; align-items:center !important; gap:9px !important; min-height:36px !important; margin:0 0 8px !important; padding:8px 12px !important; border:1px solid var(--theme-role-border-343e5d) !important; border-left:3px solid var(--rank-accent) !important; border-radius:7px !important; background:var(--theme-role-surface-0e152b) !important; list-style:none !important; box-shadow:none !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-stats-explainer::marker{ content:""; } .theme-ranking-electric .public-ranking .public-list > li.ranking-stats-explainer strong{ flex:0 0 auto !important; color:var(--theme-role-text-d9deeb) !important; font-size:8px !important; line-height:1 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:.055em !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-stats-explainer span{ color:var(--theme-role-text-8993ad) !important; font-size:8px !important; line-height:1.2 !important; font-weight:800 !important; } } /* Structural sidecard row positions move down one grid row because the explainer now occupies the first row of the official-list grid. */ @media(min-width:1050px){ .theme-ranking-electric .public-ranking .public-list > li.is-champion{ grid-column:1 / -1 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ grid-row:3 / span 4 !important; } } @media(max-width:760px){ .ranking-stats-explainer{ display:none !important; } } /* ================================================================ BattleRanker Ranking V3.20 — RESTORE CHAMPION FIRST ROW The Battle-stats explainer now sits outside the
    , so #1 is once again the first ranking row and all existing champion styling applies. ================================================================ */ @media(min-width:761px){ .theme-ranking-electric .public-ranking > .ranking-stats-explainer{ display:flex !important; align-items:center !important; gap:9px !important; min-height:36px !important; margin:12px 18px 0 !important; padding:8px 12px !important; border:1px solid var(--theme-role-border-343e5d) !important; border-left:3px solid var(--rank-accent) !important; border-radius:7px !important; background:var(--theme-role-surface-0e152b) !important; box-sizing:border-box !important; } .theme-ranking-electric .public-ranking > .ranking-stats-explainer strong{ flex:0 0 auto !important; color:var(--theme-role-text-d9deeb) !important; font-size:8px !important; line-height:1 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:.055em !important; } .theme-ranking-electric .public-ranking > .ranking-stats-explainer span{ color:var(--theme-role-text-8993ad) !important; font-size:8px !important; line-height:1.2 !important; font-weight:800 !important; } } @media(min-width:1050px){ .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ grid-row:2 / span 4 !important; } } @media(max-width:760px){ .theme-ranking-electric .public-ranking > .ranking-stats-explainer{ display:none !important; } } /* ================================================================ BattleRanker Ranking V3.21 — QUIETER PRE-CHAMPION ACCENTS Reserve electric yellow for the actual champion card by muting the active tab underline and Battle-stats explainer edge. ================================================================ */ @media(min-width:761px){ /* Active desktop ranking-tab underline: muted slate instead of neon. */ .theme-ranking-electric .ranking-desktop-compare-tabs button.active::after{ background:var(--theme-role-surface-56617f) !important; box-shadow:none !important; } /* Battle-stats explainer: keep structure, lose the competing yellow edge. */ .theme-ranking-electric .public-ranking > .ranking-stats-explainer{ border-left-color:var(--theme-role-border-56617f) !important; } /* Champion top edge remains the strongest yellow rule on the stage. */ .theme-ranking-electric .public-ranking .public-list > li:first-child{ border-top-color:var(--rank-accent) !important; } } /* ================================================================ BattleRanker Ranking V3.22 — DEFINITIVE NARROW-DESKTOP STATS CARD When the structural sidecard drops below the ranking (<1050px), explicitly restore the complete card design. This sits at the very end of the stylesheet so older responsive row rules cannot strip it. ================================================================ */ @media(max-width:1049px) and (min-width:761px){ .theme-ranking-electric .public-ranking .public-list{ display:block !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ position:relative !important; inset:auto !important; display:flex !important; width:100% !important; min-width:0 !important; max-width:none !important; height:auto !important; min-height:0 !important; margin:12px 0 0 !important; padding:18px !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:14px !important; border:1px solid var(--theme-role-border-465071) !important; border-top:3px solid var(--rank-accent) !important; border-radius:11px !important; background: radial-gradient(circle at 100% 0,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 160px), var(--theme-role-surface-121930) !important; box-shadow:0 12px 26px var(--theme-role-shadow-rgba-0-0-0-22-41d185) !important; list-style:none !important; overflow:hidden !important; color:var(--theme-role-text-f5f7fb) !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card::before, .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card::after{ content:none !important; display:none !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-badge{ display:inline-flex !important; align-self:flex-start !important; align-items:center !important; min-height:27px !important; padding:0 10px !important; border:0 !important; border-radius:4px !important; background:var(--rank-accent) !important; color:var(--theme-ink) !important; font-size:9px !important; line-height:1 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:.07em !important; transform:rotate(-2deg) !important; box-shadow:2px 2px 0 var(--theme-role-shadow-rgba-0-0-0-34-c366e4) !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpis{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:9px !important; margin:0 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi{ display:flex !important; min-width:0 !important; min-height:72px !important; margin:0 !important; padding:11px 10px 9px !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; border:1px solid var(--theme-role-border-37405e) !important; border-radius:8px !important; background:var(--theme-role-surface-0f162d) !important; text-align:left !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi strong{ display:block !important; margin:0 0 6px !important; color:var(--theme-role-text-fff) !important; font-size:26px !important; line-height:.92 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:-.03em !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-kpi small, .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-label{ display:block !important; margin:0 !important; color:var(--theme-role-text-8590ad) !important; font-size:8px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.07em !important; text-transform:uppercase !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-list{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:9px !important; margin:0 !important; padding:0 !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-row{ display:block !important; min-width:0 !important; min-height:68px !important; margin:0 !important; padding:11px 12px !important; border:1px solid var(--theme-role-border-2f3854) !important; border-radius:8px !important; background:var(--theme-role-surface-rgba-10-16-35-52-74d1a5) !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value{ display:block !important; margin:7px 0 0 !important; color:var(--theme-role-text-f5f7fb) !important; font-size:16px !important; line-height:1.12 !important; font-style:italic !important; font-weight:900 !important; letter-spacing:-.02em !important; } .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card .ranking-insight-value small{ display:inline !important; margin-left:6px !important; color:var(--rank-accent) !important; font-size:10px !important; line-height:1 !important; font-style:normal !important; font-weight:900 !important; } } /* ================================================================ BattleRanker Ranking V3.23 — PERMANENT STATS CARD BASE STYLES The card's visual styling now exists independently of its layout breakpoint. Wide desktop decides WHERE it sits; these rules decide HOW it looks. This prevents the card becoming plain text at any intermediate desktop width. ================================================================ */ @media(min-width:761px){ .theme-ranking-electric .public-ranking .ranking-insight-card{ display:flex !important; width:100% !important; min-width:0 !important; height:auto; margin:12px 0 0 !important; padding:19px !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:15px !important; border:1px solid var(--theme-role-border-465071) !important; border-top:3px solid var(--rank-accent) !important; border-radius:12px !important; background: radial-gradient(circle at 100% 0,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 160px), var(--theme-role-surface-121930) !important; box-shadow:0 12px 28px var(--theme-role-shadow-rgba-0-0-0-22-41d185) !important; color:var(--theme-role-text-f5f7fb) !important; list-style:none !important; box-sizing:border-box !important; overflow:hidden !important; } .theme-ranking-electric .public-ranking .ranking-insight-card::before, .theme-ranking-electric .public-ranking .ranking-insight-card::after{ content:none !important; display:none !important; } .theme-ranking-electric .public-ranking .ranking-insight-badge{ display:inline-flex !important; align-self:flex-start !important; align-items:center !important; min-height:28px !important; padding:0 11px !important; border:0 !important; border-radius:4px !important; background:var(--rank-accent) !important; color:var(--theme-ink) !important; font-size:9px !important; line-height:1 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:.07em !important; transform:rotate(-2deg) !important; box-shadow:2px 2px 0 var(--theme-role-shadow-rgba-0-0-0-34-c366e4) !important; } .theme-ranking-electric .public-ranking .ranking-insight-kpis{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:9px !important; width:100% !important; margin:0 !important; } .theme-ranking-electric .public-ranking .ranking-insight-kpi{ display:flex !important; min-width:0 !important; min-height:72px !important; margin:0 !important; padding:11px 10px 9px !important; flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; border:1px solid var(--theme-role-border-37405e) !important; border-radius:8px !important; background:var(--theme-role-surface-0f162d) !important; box-sizing:border-box !important; } .theme-ranking-electric .public-ranking .ranking-insight-kpi strong{ display:block !important; margin:0 0 6px !important; color:var(--theme-role-text-fff) !important; font-size:26px !important; line-height:.92 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:-.03em !important; } .theme-ranking-electric .public-ranking .ranking-insight-kpi small, .theme-ranking-electric .public-ranking .ranking-insight-label{ display:block !important; margin:0 !important; color:var(--theme-role-text-8590ad) !important; font-size:8px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.07em !important; text-transform:uppercase !important; } .theme-ranking-electric .public-ranking .ranking-insight-list{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:9px !important; width:100% !important; margin:0 !important; padding:0 !important; } .theme-ranking-electric .public-ranking .ranking-insight-row{ display:block !important; min-width:0 !important; min-height:68px !important; margin:0 !important; padding:11px 12px !important; border:1px solid var(--theme-role-border-2f3854) !important; border-radius:8px !important; background:var(--theme-role-surface-rgba-10-16-35-52-74d1a5) !important; box-sizing:border-box !important; } .theme-ranking-electric .public-ranking .ranking-insight-value{ display:block !important; margin:7px 0 0 !important; color:var(--theme-role-text-f5f7fb) !important; font-size:16px !important; line-height:1.12 !important; font-style:italic !important; font-weight:900 !important; letter-spacing:-.02em !important; } .theme-ranking-electric .public-ranking .ranking-insight-value small{ display:inline !important; margin-left:6px !important; color:var(--rank-accent) !important; font-size:10px !important; line-height:1 !important; font-style:normal !important; font-weight:900 !important; } } /* Wide desktop keeps the structural right-hand placement. */ @media(min-width:1050px){ .theme-ranking-electric .public-ranking .public-list > li.ranking-insight-card{ width:auto !important; margin:0 !important; align-self:stretch !important; } .theme-ranking-electric .public-ranking .ranking-insight-list{ grid-template-columns:1fr !important; } } /* Mobile remains unchanged / no ranking stats card. */ @media(max-width:760px){ .theme-ranking-electric .public-ranking .ranking-insight-card{ display:none !important; } } /* ================================================================ BattleRanker Ranking V3.23 — SPLIT DESKTOP CONTROLS / LIST PANELS Desktop only: - tabs + Battle-stats explainer become one compact upper panel - the actual ranked item list becomes a separate main panel - champion is now the first thing inside the main ranking panel Mobile is untouched. ================================================================ */ @media(min-width:761px){ /* * The layout itself no longer paints one continuous container around * the controls and the ranking rows. */ .theme-ranking-electric .ranking-layout [data-ranking-mobile-panel], .theme-ranking-electric .ranking-layout [data-ranking-mobile-panel].is-mobile-active{ border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; } /* * Upper panel — BATTLERANKER RANKING / YOUR RANKING. * Rounded all the way round because it is now a standalone control panel. */ .theme-ranking-electric .ranking-desktop-compare-tabs{ border:1px solid var(--theme-role-border-434b68) !important; border-radius:12px 12px 0 0 !important; background:var(--theme-role-surface-0e142b) !important; overflow:hidden !important; } /* * Official-view explainer visually completes the upper panel beneath * the tabs. It is deliberately restrained and no longer floats inside * the ranking rows panel. */ .theme-ranking-electric .public-ranking > .ranking-stats-explainer{ min-height:46px !important; margin:0 !important; padding:10px 18px !important; border:1px solid var(--theme-role-border-434b68) !important; border-top:0 !important; border-left:1px solid var(--theme-role-border-434b68) !important; border-radius:0 0 12px 12px !important; background:var(--theme-role-surface-0e142b) !important; } /* * Main panel — rankings only. * A deliberate gap separates it from the upper controls, and the * champion is the first visible content inside this panel. */ .theme-ranking-electric .public-ranking .public-list{ margin:14px 0 0 !important; padding:18px !important; border:1px solid var(--theme-role-border-434b68) !important; border-radius:12px !important; background: linear-gradient(180deg,var(--theme-role-surface-rgba-255-255-255-018-d34853),transparent 12%), var(--theme-role-surface-0f152d) !important; box-shadow:0 18px 38px var(--theme-role-shadow-rgba-0-0-0-22-41d185) !important; overflow:hidden !important; } /* Your Ranking gets the same clean two-panel language when selected. */ .theme-ranking-electric .your-ranking.is-mobile-active{ margin-top:14px !important; padding:18px !important; border:1px solid var(--theme-role-border-434b68) !important; border-radius:12px !important; background: linear-gradient(180deg,var(--theme-role-surface-rgba-255-255-255-018-d34853),transparent 12%), var(--theme-role-surface-0f152d) !important; box-shadow:0 18px 38px var(--theme-role-shadow-rgba-0-0-0-22-41d185) !important; } /* * When Your Ranking is selected there is no official explainer beneath * the tabs, so give the tabs their own complete lower corners. */ .theme-ranking-electric .ranking-layout:has(.your-ranking.is-mobile-active) .ranking-desktop-compare-tabs{ border-radius:12px !important; } /* * When Official is selected, tabs + explainer visually act as one panel. */ .theme-ranking-electric .ranking-layout:has(.public-ranking.is-mobile-active) .ranking-desktop-compare-tabs{ border-radius:12px 12px 0 0 !important; } } /* ================================================================ BattleRanker Ranking V3.21 — RESTORE MOBILE HERO BATTLE STICKER Quick Battle escape beneath the ranking description on phones. Desktop remains unchanged. ================================================================ */ .mobile-hero-battle-sticker{ display:none; } @media(max-width:760px){ .theme-ranking-electric .mobile-hero-battle-sticker{ display:inline-flex; align-self:flex-start; align-items:center; justify-content:center; min-height:34px; margin-top:13px; padding:0 13px; border:2px solid var(--theme-ink); border-radius:5px; background:var(--rank-accent); color:var(--theme-ink); box-shadow:3px 3px 0 var(--theme-shadow-deep); text-decoration:none; font-size:13px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:.035em; transform:rotate(-4deg); transform-origin:center; } .theme-ranking-electric .mobile-hero-battle-sticker:active{ transform:translateY(1px) rotate(-4deg); box-shadow:2px 2px 0 var(--theme-shadow-deep); } } /* ================================================================ BattleRanker Ranking V3.20 — QUIETER LOWER-ROW BATTLE STATS Keep #1 strong. Make #2 onward clearly secondary to rank/name. Desktop only; layout and ranking logic untouched. ================================================================ */ @media(min-width:761px){ .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat-line{ border-color:var(--theme-role-border-29324d) !important; background:var(--theme-role-surface-10162b) !important; box-shadow:inset 0 1px 0 var(--theme-role-shadow-rgba-255-255-255-010-1da3da) !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat{ border-right-color:var(--theme-role-border-252e47) !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat strong{ color:var(--theme-role-text-9ea8bd) !important; font-weight:900 !important; opacity:.86 !important; } .theme-ranking-electric .public-ranking .public-list > li.has-inline-stats .public-mini-stat small{ color:var(--theme-role-text-626d87) !important; opacity:.88 !important; } } /* ================================================================ BattleRanker Ranking V3.21 — FIRST RANKING SUBMISSION A fresh visitor explicitly submits their first complete ranking. After that first save, the existing automatic-save behaviour takes over. ================================================================ */ .ranking-submit-panel{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 14px; padding:16px 18px; border:1px solid var(--theme-role-border-48516e); border-left:4px solid var(--rank-accent); border-radius:9px; background: radial-gradient(circle at 92% 0,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 180px), var(--theme-role-surface-121930); } .ranking-submit-copy{ min-width:0; } .ranking-submit-kicker{ display:block; margin-bottom:6px; color:var(--rank-accent); font-size:9px; line-height:1; font-weight:1000; letter-spacing:.075em; text-transform:uppercase; } .ranking-submit-copy > strong{ display:block; color:var(--theme-role-text-fff); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:22px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:-.025em; } .ranking-submit-copy p{ max-width:720px; margin:7px 0 0; color:var(--theme-role-text-a2aac0); font-size:11px; line-height:1.4; font-weight:750; } .ranking-submit-panel .ranking-first-save{ flex:0 0 auto; min-width:205px; min-height:50px; margin:0; padding:0 20px; font-size:13px!important; letter-spacing:.01em; } .ranking-submit-panel.is-ready{ border-color:var(--theme-role-border-727b55); border-left-color:var(--rank-accent); } .ranking-submit-panel.is-saved{ border-left-color:var(--theme-role-border-59627c); background:var(--theme-role-surface-10162c); } .ranking-submit-panel.is-saved .ranking-submit-kicker{ color:var(--rank-accent); } .ranking-autosave-status{ flex:0 0 auto; padding:8px 10px; border:1px solid var(--theme-role-border-39425f); border-radius:6px; color:var(--theme-role-text-8f98b0); background:var(--theme-role-surface-0d1429); font-size:8px; line-height:1; font-weight:1000; letter-spacing:.055em; white-space:nowrap; } @media(max-width:760px){ .theme-ranking-electric .your-ranking .ranking-submit-panel{ display:block; margin:0 0 12px!important; padding:13px!important; border-left-width:3px; } .theme-ranking-electric .your-ranking .ranking-submit-copy > strong{ font-size:19px; } .theme-ranking-electric .your-ranking .ranking-submit-copy p{ margin-top:6px; font-size:10px; } .theme-ranking-electric .your-ranking .ranking-first-save{ width:100%!important; min-height:48px!important; margin-top:12px!important; font-size:13px!important; } .theme-ranking-electric .your-ranking .ranking-autosave-status{ display:inline-flex; margin-top:11px; } .theme-ranking-electric .your-ranking .mobile-ranking-simple-help strong{ color:var(--rank-accent); } } /* ================================================================ BattleRanker Ranking V3.22 — SUBMIT YOUR RANKING DISCOVERY First-time voters get a clearer tab label plus a CTA beneath the official ranking. Existing voters continue to see YOUR RANKING. ================================================================ */ .official-submit-ranking-cta{ display:flex; align-items:center; justify-content:space-between; gap:22px; margin:0 18px 18px; padding:18px 20px; border:1px solid var(--theme-role-border-4b5574); border-left:4px solid var(--rank-accent); border-radius:10px; background: radial-gradient(circle at 88% 12%,var(--theme-role-surface-rgba-231-255-0-06-6e76e4),transparent 190px), var(--theme-role-surface-121930); } .official-submit-ranking-copy{ min-width:0; } .official-submit-ranking-copy > span{ display:block; margin-bottom:6px; color:var(--rank-accent); font-size:9px; line-height:1; font-weight:1000; letter-spacing:.08em; } .official-submit-ranking-copy > strong{ display:block; color:var(--theme-role-text-fff); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:23px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:-.025em; } .official-submit-ranking-copy p{ margin:7px 0 0; color:var(--theme-role-text-9fa8be); font-size:11px; line-height:1.4; font-weight:750; } .official-submit-ranking-button{ flex:0 0 auto; min-width:224px; min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; text-align:center; text-decoration:none; border:2px solid var(--theme-role-border-090c17); border-radius:7px; background:var(--rank-accent); color:var(--theme-ink); box-shadow:4px 4px 0 var(--theme-shadow-deep); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:13px; line-height:1; font-style:italic; font-weight:1000; cursor:pointer; } .official-submit-ranking-button:hover{ background:var(--theme-role-surface-f2ff54); } @media(max-width:760px){ .official-submit-ranking-cta{ display:block; margin:12px 0 0!important; padding:14px!important; } .official-submit-ranking-copy > strong{ font-size:19px; } .official-submit-ranking-copy p{ font-size:10px; } .official-submit-ranking-button{ width:100%; min-width:0; min-height:48px; margin-top:12px; } .ranking-mobile-compare-tabs button [data-submit-ranking-tab-label]{ display:block; line-height:1.05; } } @media(max-width:430px){ .ranking-mobile-compare-tabs button [data-submit-ranking-tab-label]{ font-size:14px; } } /* ================================================================ BattleRanker Songs — music-note placeholders and artist styling ================================================================ */ .category-songs-page .song-thumb-placeholder{ position:relative !important; border-color:var(--theme-role-border-46527b) !important; background: radial-gradient(circle at 50% 50%, var(--theme-role-surface-rgba-223-255-0-18-25da1b) 0 8%, transparent 8.5%), radial-gradient(circle at 50% 50%, var(--theme-role-surface-rgba-37-48-79-9-bd947b) 0 44%, var(--theme-role-surface-rgba-14-20-43-98-4b1678) 45% 67%, var(--theme-role-surface-rgba-8-12-27-1-afeb9d) 68% 100%) !important; box-shadow:inset 0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-03-8ffe8d) !important; } .category-songs-page .song-thumb-placeholder::before, .category-songs-page .song-thumb-placeholder::after{ content:""; position:absolute; inset:auto; border-radius:999px; pointer-events:none; } .category-songs-page .song-thumb-placeholder::before{ width:68%; height:68%; border:1px solid var(--theme-role-border-rgba-223-255-0-09-0e8a94); } .category-songs-page .song-thumb-placeholder::after{ width:84%; height:84%; border:1px solid var(--theme-role-border-rgba-125-145-212-08-5d6f32); } .category-songs-page .song-fallback-glyph{ position:relative; z-index:2; display:flex !important; align-items:center; justify-content:center; width:100%; color:var(--theme-role-text-dfff00) !important; font-size:34px !important; font-weight:1000 !important; font-style:normal !important; line-height:1 !important; text-shadow:0 0 18px var(--theme-role-shadow-rgba-223-255-0-12-77324d); } .category-songs-page .entry-context-artist{ color:var(--theme-role-text-aebaf0) !important; font-size:10px !important; font-weight:900 !important; letter-spacing:.08em !important; text-transform:uppercase !important; } @media(min-width:761px){ .category-songs-page .public-ranking .public-list > li:first-child .song-fallback-glyph{ font-size:92px !important; } .category-songs-page .public-ranking .public-list > li:first-child .entry-context-artist{ margin-bottom:10px !important; color:var(--theme-role-text-d6defa) !important; font-size:12px !important; letter-spacing:.12em !important; } .category-songs-page .your-ranking .personal-battle-ranking .song-fallback-glyph, .category-songs-page .public-ranking .public-list > li.has-inline-stats .song-fallback-glyph{ font-size:42px !important; } } @media(max-width:760px){ .category-songs-page .song-fallback-glyph{ font-size:26px !important; } .category-songs-page .entry-context-artist{ font-size:9px !important; letter-spacing:.06em !important; } } /* ================================================================ BattleRanker Songs V2 — vinyl-record placeholders + larger double note ================================================================ */ .category-songs-page .song-thumb-placeholder{ overflow:visible !important; border:0 !important; background:transparent !important; box-shadow:none !important; } .category-songs-page .song-thumb-placeholder::before, .category-songs-page .song-thumb-placeholder::after{ content:""; position:absolute; inset:50% auto auto 50%; transform:translate(-50%, -50%); border-radius:50%; pointer-events:none; } .category-songs-page .song-thumb-placeholder::before{ width:86px; height:86px; background: radial-gradient(circle at 50% 50%, var(--theme-role-surface-d7e1ff) 0 5px, var(--theme-role-surface-a8b4da) 5px 8px, transparent 8px), repeating-radial-gradient(circle at 50% 50%, var(--theme-role-surface-rgba-255-255-255-08-0f1c00) 0 1px, var(--theme-role-surface-rgba-255-255-255-0-4babd7) 1px 6px), radial-gradient(circle at 32% 28%, var(--theme-role-surface-rgba-255-255-255-18-0d41ca), var(--theme-role-surface-rgba-255-255-255-0-4babd7) 28%), radial-gradient(circle at 50% 50%, var(--theme-role-surface-2a355b) 0 23%, var(--theme-role-surface-121a33) 23% 42%, var(--theme-role-surface-0a1020) 42% 72%, var(--theme-role-surface-050913) 72% 100%); border:1px solid var(--theme-role-border-6675a6); box-shadow:0 8px 18px var(--theme-role-shadow-rgba-0-0-0-32-78ad00), inset 0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-06-08e149); } .category-songs-page .song-thumb-placeholder::after{ width:26px; height:26px; background:radial-gradient(circle at 50% 50%, var(--theme-role-surface-edf1ff) 0 2px, var(--theme-role-surface-c6d0ee) 2px 5px, var(--theme-role-surface-5c6c9d) 5px 100%); box-shadow:0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-12-895780); z-index:1; } .category-songs-page .song-fallback-glyph{ position:relative; z-index:2; color:var(--theme-role-text-e6ff45) !important; font-size:46px !important; font-weight:1000 !important; line-height:1 !important; text-shadow:0 0 22px var(--theme-role-shadow-rgba-223-255-0-14-36945f); transform:translateY(-1px); } @media(min-width:761px){ .theme-ranking-electric.category-songs-page .rank-row .song-thumb-placeholder, .theme-ranking-electric.category-songs-page .public-list li.has-inline-stats .song-thumb-placeholder, .theme-ranking-electric.category-songs-page .your-ranking .personal-battle-ranking .song-thumb-placeholder{ width:104px !important; min-width:104px !important; max-width:104px !important; height:104px !important; min-height:104px !important; max-height:104px !important; } .theme-ranking-electric.category-songs-page .rank-row .song-thumb-placeholder::before, .theme-ranking-electric.category-songs-page .public-list li.has-inline-stats .song-thumb-placeholder::before, .theme-ranking-electric.category-songs-page .your-ranking .personal-battle-ranking .song-thumb-placeholder::before{ width:100px; height:100px; } .theme-ranking-electric.category-songs-page .rank-row .song-thumb-placeholder::after, .theme-ranking-electric.category-songs-page .public-list li.has-inline-stats .song-thumb-placeholder::after, .theme-ranking-electric.category-songs-page .your-ranking .personal-battle-ranking .song-thumb-placeholder::after{ width:28px; height:28px; } .theme-ranking-electric.category-songs-page .public-ranking .public-list > li:first-child .song-thumb-placeholder{ width:210px !important; min-width:210px !important; max-width:210px !important; height:210px !important; min-height:210px !important; max-height:210px !important; margin-left:24px !important; margin-right:24px !important; } .theme-ranking-electric.category-songs-page .public-ranking .public-list > li:first-child .song-thumb-placeholder::before{ width:202px; height:202px; box-shadow:0 14px 30px var(--theme-role-shadow-rgba-0-0-0-34-c366e4), inset 0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-08-0f1c00); } .theme-ranking-electric.category-songs-page .public-ranking .public-list > li:first-child .song-thumb-placeholder::after{ width:56px; height:56px; } .theme-ranking-electric.category-songs-page .public-ranking .public-list > li:first-child .song-fallback-glyph{ font-size:108px !important; } .theme-ranking-electric.category-songs-page .rank-row .song-fallback-glyph, .theme-ranking-electric.category-songs-page .public-list li.has-inline-stats .song-fallback-glyph, .theme-ranking-electric.category-songs-page .your-ranking .personal-battle-ranking .song-fallback-glyph{ font-size:52px !important; } } @media(max-width:760px){ .category-songs-page .song-thumb-placeholder{ width:86px !important; min-width:86px !important; max-width:86px !important; height:86px !important; min-height:86px !important; max-height:86px !important; } .category-songs-page .song-thumb-placeholder::before{ width:82px; height:82px; } .category-songs-page .song-thumb-placeholder::after{ width:22px; height:22px; } .category-songs-page .song-fallback-glyph{ font-size:40px !important; } } @media(max-width:430px){ .category-songs-page .song-thumb-placeholder{ width:70px !important; min-width:70px !important; max-width:70px !important; height:70px !important; min-height:70px !important; max-height:70px !important; } .category-songs-page .song-thumb-placeholder::before{ width:66px; height:66px; } .category-songs-page .song-thumb-placeholder::after{ width:18px; height:18px; } .category-songs-page .song-fallback-glyph{ font-size:31px !important; } } /* BattleRanker Songs V3 — remove champion square frame around vinyl */ @media(min-width:761px){ .theme-ranking-electric.category-songs-page .public-ranking .public-list > li:first-child .public-thumb.song-thumb-placeholder{ border:0 !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; outline:0 !important; } } /* ================================================================ BattleRanker Ranking V3.22 — MOBILE OFFICIAL WIN RATE + BATTLE CTA Give each Official row one useful compact stat without widening the row, and make the hero Battle CTA a proper centred mobile action. ================================================================ */ @media(max-width:760px){ /* Remove the empty dash column on Official mobile rows. */ .theme-ranking-electric .public-ranking .public-rank-row{ grid-template-columns:68px 110px minmax(0,1fr) !important; } .theme-ranking-electric .public-ranking .movement{ display:none !important; } /* Reuse the existing battle stats, but reveal only WIN RATE on mobile. */ .theme-ranking-electric .public-ranking .champion-stat-line, .theme-ranking-electric .public-ranking .public-mini-stat-line{ display:block !important; width:auto !important; margin:7px 0 0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } .theme-ranking-electric .public-ranking .champion-stat, .theme-ranking-electric .public-ranking .public-mini-stat{ display:none !important; } .theme-ranking-electric .public-ranking .champion-stat:last-child, .theme-ranking-electric .public-ranking .public-mini-stat:last-child{ display:inline-flex !important; align-items:baseline !important; gap:5px !important; min-height:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } .theme-ranking-electric .public-ranking .champion-stat:last-child strong, .theme-ranking-electric .public-ranking .public-mini-stat:last-child strong{ display:inline !important; margin:0 !important; color:var(--rank-accent) !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:14px !important; line-height:1 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:-.02em !important; } .theme-ranking-electric .public-ranking .champion-stat:last-child small, .theme-ranking-electric .public-ranking .public-mini-stat:last-child small{ display:inline !important; color:var(--theme-role-text-7f89a1) !important; font-size:7px !important; line-height:1 !important; font-style:normal !important; font-weight:950 !important; letter-spacing:.055em !important; text-transform:uppercase !important; } /* Bigger, centred and straight Battle button beneath hero copy. */ .theme-ranking-electric .mobile-hero-battle-sticker{ display:flex !important; align-self:center !important; min-width:150px !important; min-height:48px !important; margin:18px auto 0 !important; padding:0 26px !important; border:2px solid var(--theme-ink) !important; border-radius:7px !important; box-shadow:4px 4px 0 var(--theme-shadow-deep) !important; font-size:18px !important; letter-spacing:.02em !important; transform:none !important; transform-origin:center !important; } .theme-ranking-electric .mobile-hero-battle-sticker:active{ transform:translateY(1px) !important; box-shadow:2px 2px 0 var(--theme-shadow-deep) !important; } } @media(max-width:430px){ .theme-ranking-electric .public-ranking .public-rank-row{ grid-template-columns:52px 86px minmax(0,1fr) !important; } .theme-ranking-electric .public-ranking .champion-stat:last-child strong, .theme-ranking-electric .public-ranking .public-mini-stat:last-child strong{ font-size:13px !important; } .theme-ranking-electric .mobile-hero-battle-sticker{ min-width:164px !important; min-height:50px !important; font-size:19px !important; } }