/* * 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-raw-dfff00); --br-bg:var(--theme-raw-070a0d); --br-panel:var(--theme-raw-0d1216); --br-panel-2:var(--theme-raw-11171c); --br-line:var(--theme-raw-303840); --br-muted:var(--theme-raw-929da5); --br-white:var(--theme-raw-f6f7f8); --br-red:var(--theme-raw-ff174d); --br-blue:var(--theme-raw-176fff); } html{ background:var(--br-bg); } body{ background: radial-gradient(circle at 82% 5%,var(--theme-raw-rgba-223-255-0-06-8144ca),transparent 26%), linear-gradient(180deg,var(--theme-raw-06080a) 0,var(--theme-raw-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-raw-080b0e); border-bottom:1px solid var(--theme-raw-252c31); color:var(--theme-raw-818b92); } .breadcrumb{ min-height:38px; font-size:10px; letter-spacing:.055em; } .breadcrumb strong{ color:var(--theme-raw-cdd3d7); } /* ------------------------------ HERO ------------------------------ */ .hero{ position:relative; background: linear-gradient(90deg,var(--theme-raw-080b0e) 0%,var(--theme-raw-080b0e) 40%,var(--theme-raw-rgba-8-11-14-8-701953) 60%,var(--theme-raw-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-raw-rgba-223-255-0-14-36945f) 69.2% 69.65%,transparent 69.9%), radial-gradient(circle at 75% 30%,var(--theme-raw-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-raw-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-raw-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-raw-rgba-0-0-0-6-b597da); } .hero-copy p{ margin:18px 0 0; max-width:680px; color:var(--theme-raw-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-raw-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-raw-080b0e) 0%,var(--theme-raw-rgba-8-11-14-78-4e9d44) 24%,var(--theme-raw-rgba-8-11-14-22-9a5341) 65%,var(--theme-raw-rgba-8-11-14-06-a2774d) 100%), linear-gradient(0deg,var(--theme-raw-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-raw-rgba-8-11-14-9-bb4f41); color:var(--theme-raw-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-raw-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-raw-0c1115); border:1px solid var(--theme-raw-30383f); box-shadow:none; } .stats-panel{ overflow:hidden; } .stat{ border-right-color:var(--theme-raw-30383f); } .stat strong{ color:var(--theme-raw-fff); } .stat span:last-child, .no-experts small{ color:var(--theme-raw-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-raw-080b0e); display:flex; align-items:center; justify-content:center; color:var(--theme-raw-fff); font-size:18px; font-weight:1000; font-style:italic; box-shadow:0 0 20px var(--theme-raw-rgba-223-255-0-18-25da1b); pointer-events:none; } .ranking-panel{ border:1px solid var(--theme-raw-333c43); border-radius:8px; background: linear-gradient(180deg,var(--theme-raw-rgba-255-255-255-018-d34853),transparent 16%), var(--br-panel); box-shadow:0 10px 32px var(--theme-raw-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-raw-2b3339); background:var(--theme-raw-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-raw-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-raw-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-raw-495159); background:var(--theme-raw-151b20); color:var(--theme-raw-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-raw-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-raw-343c42); background:var(--theme-raw-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-raw-30383f)!important; border-radius:0!important; background:var(--theme-raw-10161a)!important; color:var(--theme-raw-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-raw-0c1114)!important; color:var(--br-neon)!important; box-shadow:inset 0 -3px 0 var(--br-neon); } .battle-mode-tabs a:hover{ color:var(--theme-raw-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-raw-2b3339)!important; background:var(--theme-raw-0b1014)!important; color:var(--theme-raw-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-raw-2b3339)!important; background:var(--theme-raw-0e1418)!important; color:var(--theme-raw-8e989f)!important; } .save-state, .save-state-button{ min-height:30px!important; padding:6px 10px!important; border:1px solid var(--theme-raw-414a51)!important; border-radius:2px!important; background:var(--theme-raw-171d22)!important; color:var(--theme-raw-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-raw-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-raw-rgba-223-255-0-15-98ec4c),var(--theme-raw-rgba-223-255-0-03-0a9543))!important; color:var(--theme-raw-fff)!important; box-shadow:none!important; } .edit-mode-kicker{ color:var(--br-neon)!important; } .provisional-rank-note{ margin:12px; border:1px solid var(--theme-raw-3b444b); background:var(--theme-raw-11171c); color:var(--theme-raw-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-raw-3b444b)!important; border-radius:3px!important; background: linear-gradient(135deg,var(--theme-raw-20272d),var(--theme-raw-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-raw-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-raw-2d353b)!important; border-radius:5px!important; background: linear-gradient(90deg,var(--theme-raw-rgba-223-255-0-018-a5df8b),transparent 28%), var(--theme-raw-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-raw-59636b)!important; background:var(--theme-raw-151c21)!important; } .rank-row.is-dragging, .rank-row.dragging{ border-color:var(--br-neon)!important; box-shadow:0 0 18px var(--theme-raw-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-raw-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-raw-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-raw-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-raw-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-raw-465058)!important; border-radius:3px!important; background:var(--theme-raw-0d1216)!important; color:var(--theme-raw-d6dbde)!important; box-shadow:none!important; font-size:12px!important; } .move-btn:hover:not(:disabled){ border-color:var(--br-neon)!important; background:var(--theme-raw-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-raw-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-raw-2d353b)!important; border-radius:5px!important; background: linear-gradient(90deg,var(--theme-raw-rgba-23-111-255-025-eb1d52),transparent 32%), var(--theme-raw-12181d)!important; } .public-pos{ color:var(--theme-raw-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-raw-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-raw-3b444b)!important; border-radius:5px!important; background:var(--theme-raw-10161a)!important; box-shadow:none!important; } .manual-save-copy strong{ color:var(--theme-raw-fff)!important; } .manual-save-copy span{ color:var(--theme-raw-89939a)!important; } .save-ranking-btn{ border:2px solid var(--theme-raw-090c0f)!important; border-radius:2px!important; background:var(--br-neon)!important; color:var(--theme-raw-080b0e)!important; box-shadow:4px 4px 0 var(--theme-raw-000)!important; font-style:italic!important; font-weight:1000!important; transform:skew(-3deg); } .save-ranking-btn:hover:not(:disabled){ background:var(--theme-raw-fff)!important; } .drag-hint{ margin:0!important; padding:11px 14px!important; border:0!important; border-top:1px solid var(--theme-raw-2c343a)!important; background:var(--theme-raw-090d10)!important; color:var(--theme-raw-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-raw-0d1216)!important; border-color:var(--theme-raw-343c42)!important; color:var(--theme-raw-fff)!important; } .battle-question-kicker small{ color:var(--br-neon)!important; } .battle-question > strong{ font-style:italic; } .battle-card{ border-color:var(--theme-raw-333b41)!important; background:var(--theme-raw-0f1519)!important; } .battle-pick{ background:var(--theme-raw-11171c)!important; color:var(--theme-raw-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-raw-080b0e)!important; font-weight:1000!important; } .battle-vs{ background:var(--theme-raw-080b0e)!important; color:var(--theme-raw-fff)!important; border-color:var(--br-neon)!important; } /* ------------------------------ BELOW THE RANKING ------------------------------ */ .how-strip{ margin-top:10px; margin-bottom:30px; border:1px solid var(--theme-raw-30383f); background:var(--theme-raw-0d1216); color:var(--theme-raw-fff); } .how-item{ border-left-color:var(--theme-raw-30383f); } .how-item p{ color:var(--theme-raw-89949b); } .how-item strong, .fair-block strong{ color:var(--theme-raw-fff); } .how-round, .how-icon{ color:var(--br-neon); } .fair-block{ background:var(--theme-raw-0a0e11); } .fair-block span{ background:var(--br-neon); } .post-create-choice{ border:1px solid var(--br-neon)!important; background:var(--theme-raw-0d1317)!important; color:var(--theme-raw-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-raw-262d32); background:var(--theme-raw-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-raw-080b0e) 0%,var(--theme-raw-rgba-8-11-14-76-d99088) 66%,var(--theme-raw-rgba-8-11-14-45-7655a3) 100%), linear-gradient(0deg,var(--theme-raw-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-raw-39434a); border-left:3px solid var(--br-neon); border-radius:5px; background: radial-gradient(circle at 88% 20%,var(--theme-raw-rgba-223-255-0-10-0b4a61),transparent 30%), linear-gradient(135deg,var(--theme-raw-10171b),var(--theme-raw-090d10)); box-shadow:0 10px 24px var(--theme-raw-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-raw-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-raw-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-raw-080b0e); background:var(--br-neon); color:var(--theme-raw-080b0e); text-decoration:none; font-size:11px; font-style:italic; font-weight:1000; white-space:nowrap; box-shadow:4px 4px 0 var(--theme-raw-000); transform:skew(-3deg); } .ranking-battle-teaser-button:hover{ background:var(--theme-raw-fff); color:var(--theme-raw-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-raw-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-raw-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-raw-080b0e) 0%,var(--theme-raw-rgba-8-11-14-94-dbcd87) 12%,var(--theme-raw-rgba-8-11-14-57-089025) 43%,var(--theme-raw-rgba-8-11-14-12-1553e6) 77%,var(--theme-raw-rgba-8-11-14-24-ac873c) 100%), linear-gradient(0deg,var(--theme-raw-rgba-8-11-14-72-a9d0a6) 0%,transparent 48%), radial-gradient(circle at 72% 18%,var(--theme-raw-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-raw-rgba-223-255-0-48-cfd935); } .hero-art-generic{ background: radial-gradient(circle at 70% 32%,var(--theme-raw-rgba-223-255-0-12-77324d),transparent 25%), linear-gradient(135deg,var(--theme-raw-11171c),var(--theme-raw-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-raw-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-raw-080b0e) 0%,var(--theme-raw-rgba-8-11-14-84-101e2b) 55%,var(--theme-raw-rgba-8-11-14-34-12cc48) 100%), linear-gradient(0deg,var(--theme-raw-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-raw-465058)!important; border-radius:3px!important; background:var(--theme-raw-0d1216)!important; color:var(--theme-raw-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-raw-171d22)!important; color:var(--theme-raw-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-raw-rgba-91-32-200-18-56164c),transparent 390px), radial-gradient(circle at 88% 6%,var(--theme-raw-rgba-32-215-207-08-4eaa78),transparent 320px), var(--rank-navy); } .breadcrumb-bar{ background:var(--theme-raw-0b1026); border-bottom:1px solid var(--theme-raw-303755); color:var(--theme-raw-79819d); } .breadcrumb strong{color:var(--theme-raw-cbd0df)} /* Hero */ .hero{ min-height:300px; border-bottom:0; background: radial-gradient(circle at 12% 16%,var(--theme-raw-rgba-255-255-255-08-0f1c00),transparent 180px), linear-gradient(135deg,var(--theme-raw-6028ce) 0%,var(--theme-raw-491aa9) 47%,var(--theme-raw-21104f) 100%); } .hero:before{ background: repeating-radial-gradient(circle at 0 0,var(--theme-raw-rgba-255-255-255-11-525f58) 0 1px,transparent 1px 10px), radial-gradient(circle at 78% 24%,var(--theme-raw-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-raw-101225); box-shadow:3px 3px 0 var(--theme-raw-rgba-7-10-25-55-d2b4e3); transform:rotate(-2deg); } .hero-copy h1{color:var(--theme-raw-fff);text-shadow:0 5px 22px var(--theme-raw-rgba-0-0-0-36-7bc0bc)} .hero-copy p{color:var(--theme-raw-eee8ff)} .hero-art{width:56%;min-width:500px} .hero-art.hero-art-image{background:var(--theme-raw-18122d)} .hero-image{filter:saturate(1.08) contrast(1.06) brightness(.9)} .hero-image-overlay{ background: linear-gradient(90deg,var(--theme-raw-5422bb) 0%,var(--theme-raw-rgba-84-34-187-82-a07484) 20%,var(--theme-raw-rgba-38-16-87-20-b8c8d3) 65%,var(--theme-raw-rgba-15-10-34-06-ffe98c) 100%), linear-gradient(0deg,var(--theme-raw-rgba-12-8-29-65-cfda8a),transparent 48%); } .hero-collage-overlay{ background: linear-gradient(90deg,var(--theme-raw-5422bb) 0%,var(--theme-raw-rgba-84-34-187-88-0aacc7) 12%,var(--theme-raw-rgba-49-19-112-52-3f2831) 43%,var(--theme-raw-rgba-18-11-44-10-788ae4) 78%,var(--theme-raw-rgba-18-11-44-22-e2080a) 100%), linear-gradient(0deg,var(--theme-raw-rgba-12-8-29-62-4d4eea),transparent 50%); } .hero-art-collage:after{ background:var(--rank-teal); box-shadow:0 0 18px var(--theme-raw-rgba-32-215-207-42-ca388f); } .hero-art-generic{ background: radial-gradient(circle at 70% 32%,var(--theme-raw-rgba-32-215-207-16-4a4312),transparent 25%), linear-gradient(135deg,var(--theme-raw-44209a),var(--theme-raw-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-raw-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-raw-3a4365); border-radius:9px; background:var(--theme-raw-11172e); } .stat{border-right-color:var(--theme-raw-353e5f)} .stat-icon,.live-text,.no-experts strong{color:var(--rank-teal)!important} .desktop-start-battle{ border-color:var(--theme-raw-6247aa)!important; border-radius:9px!important; background:linear-gradient(135deg,var(--theme-raw-rgba-91-32-200-22-518f95),var(--theme-raw-rgba-255-63-146-08-aafc5d)),var(--theme-raw-12172d)!important; color:var(--theme-raw-fff)!important; } a.desktop-start-battle{color:var(--rank-teal)!important} .desktop-start-battle:hover{ border-color:var(--rank-teal)!important; background:var(--theme-raw-171d38)!important; } /* Panels */ .ranking-layout{gap:16px;margin-top:4px;margin-bottom:28px} .ranking-panel{ border:1px solid var(--theme-raw-3d4668); border-radius:12px; background:linear-gradient(180deg,var(--theme-raw-rgba-255-255-255-02-d33d85),transparent 14%),var(--rank-panel); box-shadow:0 15px 34px var(--theme-raw-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-raw-343d5d); background:var(--theme-raw-0e142b); } .panel-title.black-tab{ min-width:205px; border-radius:7px; background:var(--rank-teal); color:var(--theme-raw-101225); clip-path:none; transform:none; } .public-ranking .panel-title.black-tab{background:var(--rank-purple);color:var(--theme-raw-fff)} .panel-title.black-tab span{transform:none;font-size:18px} .based-on{color:var(--theme-raw-8991aa)} button.desktop-save-ranking, .your-ranking button.desktop-save-ranking, .your-ranking .reset-btn.desktop-save-ranking{ border-color:var(--theme-raw-48516f)!important; border-radius:6px!important; background:var(--theme-raw-161c35)!important; color:var(--theme-raw-dce0ea)!important; } button.desktop-save-ranking:hover, .your-ranking button.desktop-save-ranking:hover{ border-color:var(--rank-teal)!important; background:var(--theme-raw-1a223d)!important; color:var(--theme-raw-fff)!important; } /* Rows */ .ranking-list,.public-list{background:var(--theme-raw-0d1228)!important} .rank-row,.public-list li{ border-color:var(--theme-raw-343d5d)!important; border-radius:8px!important; background:var(--theme-raw-151b34)!important; } .rank-row{ background:linear-gradient(90deg,var(--theme-raw-rgba-32-215-207-025-5e2cf6),transparent 28%),var(--theme-raw-151b34)!important; } .public-list li{ background:linear-gradient(90deg,var(--theme-raw-rgba-106-52-221-035-9d10dd),transparent 32%),var(--theme-raw-151b34)!important; } .rank-row:hover,.public-list li:hover{ border-color:var(--theme-raw-5c668b)!important; background:var(--theme-raw-19203a)!important; } .rank-row.is-dragging,.rank-row.dragging{ border-color:var(--rank-teal)!important; box-shadow:0 0 18px var(--theme-raw-rgba-32-215-207-14-7918e8)!important; } .personal-position,.position-number{color:var(--rank-teal)!important} .public-pos{color:var(--theme-raw-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-raw-4c5576)!important; border-radius:6px!important; background:var(--theme-raw-222942)!important; } .item-page-name-link:hover{color:var(--rank-teal)!important} .ranking-entry-context,.public-entry-context{color:var(--theme-raw-aeb4c8)!important} .ranking-entry-meta,.public-entry-meta{color:var(--theme-raw-77809d)!important} .ranking-entry-meta strong{color:var(--rank-teal)!important} .drag-handle{color:var(--theme-raw-7e87a4)!important} .move-btn{ border-color:var(--theme-raw-485170)!important; border-radius:5px!important; background:var(--theme-raw-10162d)!important; color:var(--theme-raw-d8dce8)!important; } .move-btn:hover:not(:disabled){ border-color:var(--rank-teal)!important; background:var(--theme-raw-1a213c)!important; color:var(--rank-teal)!important; } /* Save + teaser */ .manual-save-wrap{ border-color:var(--theme-raw-424b6b)!important; border-radius:8px!important; background:var(--theme-raw-12182f)!important; } .manual-save-copy span{color:var(--theme-raw-9299b2)!important} .save-ranking-btn{ border-color:var(--theme-raw-0a0d20)!important; border-radius:7px!important; background:var(--rank-pink)!important; color:var(--theme-raw-fff)!important; box-shadow:4px 4px 0 var(--theme-raw-070a18)!important; transform:none; } .save-ranking-btn:hover:not(:disabled){background:var(--theme-raw-ff6aad)!important} .drag-hint{ border-top-color:var(--theme-raw-343d5d)!important; background:var(--theme-raw-0d1228)!important; color:var(--theme-raw-7f88a4)!important; } .drag-arrow{color:var(--rank-teal)!important} .ranking-battle-teaser{ border-color:var(--theme-raw-444d70); border-left:3px solid var(--rank-teal); border-radius:8px; background: radial-gradient(circle at 88% 20%,var(--theme-raw-rgba-91-32-200-18-56164c),transparent 34%), linear-gradient(135deg,var(--theme-raw-151b35),var(--theme-raw-0c1127)); } .ranking-battle-teaser-kicker{color:var(--rank-teal)} .ranking-battle-teaser-copy p{color:var(--theme-raw-9ba2bb)} .ranking-battle-teaser-button{ border-color:var(--theme-raw-0a0d20); border-radius:7px; background:var(--rank-pink); color:var(--theme-raw-fff); box-shadow:4px 4px 0 var(--theme-raw-070a18); transform:none; } .ranking-battle-teaser-button:hover{background:var(--theme-raw-ff6aad);color:var(--theme-raw-fff)} /* How/footer */ .how-strip{ border-color:var(--theme-raw-3a4363); border-radius:10px; background:var(--theme-raw-11172e); } .how-item{border-left-color:var(--theme-raw-353e5f)} .how-item p{color:var(--theme-raw-8f97b0)} .how-round,.how-icon{color:var(--rank-teal)} .fair-block{background:var(--theme-raw-0d1228)} .fair-block span{background:var(--rank-pink)} .site-footer{border-top:1px solid var(--theme-raw-303755);background:var(--theme-raw-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-raw-e6def8)} .hero-art{opacity:.44} .hero-image-overlay{ background: linear-gradient(90deg,var(--theme-raw-5422bb) 0%,var(--theme-raw-rgba-84-34-187-78-4c6755) 63%,var(--theme-raw-rgba-28-13-62-36-ca4eb6) 100%), linear-gradient(0deg,var(--theme-raw-211047) 0%,transparent 66%); } .stats-panel{border-radius:8px} .ranking-mobile-compare-tabs button{ background:var(--rank-purple)!important; color:var(--theme-raw-fff)!important; } .ranking-mobile-compare-tabs button.active{ background:var(--rank-teal)!important; color:var(--theme-raw-101225)!important; } .ranking-mobile-tabs-shell .your-ranking, .ranking-mobile-tabs-shell .public-ranking{ border-color:var(--theme-raw-3d4668)!important; border-top-color:var(--rank-teal)!important; background:var(--theme-raw-10162d)!important; } .ranking-mobile-tabs-shell .public-ranking{ border-top-color:var(--rank-purple)!important; } .mobile-ranking-simple-help{color:var(--theme-raw-9299b2)!important} .public-ranking .public-rank-row, .your-ranking .rank-row{ border-color:var(--theme-raw-3b4465)!important; background:var(--theme-raw-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-raw-4b5575)!important; background:var(--theme-raw-222942)!important; } .your-ranking .move-btn{ border-color:var(--theme-raw-485170)!important; background:var(--theme-raw-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-raw-101225); } .save-state-button.top-save-ready{ border-color:var(--theme-raw-0b0f22); background:var(--rank-pink); color:var(--theme-raw-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-raw-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-raw-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-raw-f2ff54)!important; background:var(--theme-raw-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-raw-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-raw-rgba-231-255-0-035-32b2f9),transparent 30%), var(--theme-surface-raised)!important; } .theme-ranking-electric .rank-row:hover{ border-color:var(--theme-raw-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-raw-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-raw-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-raw-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-raw-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-raw-4b536e)!important; border-left:3px solid var(--rank-accent)!important; background: radial-gradient(circle at 88% 20%,var(--theme-raw-rgba-231-255-0-08-1625d1),transparent 34%), linear-gradient(135deg,var(--theme-raw-151b35),var(--theme-raw-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-raw-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-raw-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-raw-404861)!important; background:var(--theme-raw-11172e)!important; color:var(--theme-raw-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-raw-171d38)!important; color:var(--theme-raw-aeb5c9)!important; border-color:var(--theme-raw-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-raw-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-raw-rgba-231-255-0-10-7c0c34),transparent 260px), linear-gradient(135deg,var(--theme-raw-111521) 0%,var(--theme-raw-090d17) 48%,var(--theme-raw-05070d) 100%)!important; } .theme-ranking-electric .hero::before{ background: repeating-radial-gradient(circle at 0 0,var(--theme-raw-rgba-231-255-0-10-7c0c34) 0 1px,transparent 1px 11px), radial-gradient(circle at 78% 24%,var(--theme-raw-rgba-231-255-0-11-b59712),transparent 28%)!important; opacity:.18!important; } .theme-ranking-electric .hero-image-overlay{ background: linear-gradient(90deg,var(--theme-raw-0c1019) 0%,var(--theme-raw-rgba-12-16-25-88-7070e5) 24%,var(--theme-raw-rgba-7-9-15-22-90394c) 67%,var(--theme-raw-rgba-4-5-9-06-7941ad) 100%), linear-gradient(0deg,var(--theme-raw-rgba-5-7-12-72-013952),transparent 50%)!important; } .theme-ranking-electric .hero-collage-overlay{ background: linear-gradient(90deg,var(--theme-raw-0c1019) 0%,var(--theme-raw-rgba-12-16-25-94-1de06e) 15%,var(--theme-raw-rgba-9-12-19-55-7cb693) 44%,var(--theme-raw-rgba-5-7-12-10-3d577b) 78%,var(--theme-raw-rgba-5-7-12-22-c4b63a) 100%), linear-gradient(0deg,var(--theme-raw-rgba-5-7-12-72-013952),transparent 52%), radial-gradient(circle at 76% 18%,var(--theme-raw-rgba-231-255-0-08-1625d1),transparent 30%)!important; } .theme-ranking-electric .hero-art-generic{ background: radial-gradient(circle at 70% 32%,var(--theme-raw-rgba-231-255-0-12-acfeb4),transparent 25%), linear-gradient(135deg,var(--theme-raw-131824),var(--theme-raw-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-raw-05070d)!important; } @media(max-width:760px){ .theme-ranking-electric .hero-image-overlay{ background: linear-gradient(90deg,var(--theme-raw-0c1019) 0%,var(--theme-raw-rgba-12-16-25-82-0129e3) 62%,var(--theme-raw-rgba-5-7-12-36-aa252b) 100%), linear-gradient(0deg,var(--theme-raw-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-raw-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; }