/* BattleRanker production Battle Feed stylesheet. Promoted from the Battle Feed 2 desktop redesign on 23 Aug 2026. */ *{box-sizing:border-box} :root{--bg:var(--theme-role-surface-080b0e);--panel:var(--theme-role-surface-0e1318);--line:var(--theme-role-border-2e353b);--lime:var(--theme-role-effect-dfff00);--red:var(--theme-role-effect-ff174d);--blue:var(--theme-role-effect-176fff);--muted:var(--theme-role-text-a4adb3)} html{background:var(--bg)} body{margin:0;background:radial-gradient(circle at 70% 0%,var(--theme-role-surface-rgba-223-255-0-07-71b46f),transparent 28%),var(--theme-role-surface-080b0e);color:var(--theme-role-text-fff);font-family:Arial,Helvetica,sans-serif} button,a{font:inherit}.brfeed-header{height:82px;padding:0 28px;border-bottom:2px solid var(--lime);display:flex;align-items:center;gap:32px;background:var(--theme-role-surface-06080a)} .brfeed-brand{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:7px;min-width:230px;color:var(--theme-role-text-fff);text-decoration:none} .brfeed-brand .crown{grid-row:1/3;color:var(--lime);font-size:30px;transform:rotate(-8deg)} .brfeed-brand strong{font-size:29px;line-height:.9;font-style:italic;letter-spacing:-2px}.brfeed-brand strong span{color:var(--lime)} .brfeed-brand small{font-size:10px;color:var(--theme-role-text-bbb);font-weight:700;margin-top:4px} .brfeed-header nav{margin-left:auto;display:flex;gap:28px}.brfeed-header nav a{color:var(--theme-role-text-ddd);text-decoration:none;font-size:12px;font-weight:1000} .brfeed-header nav a.active,.brfeed-header nav a:hover{color:var(--lime)} .brfeed-shell{width:min(1420px,calc(100% - 28px));margin:0 auto;padding:30px 0 70px} .brfeed-top{display:grid;grid-template-columns:.75fr 1.25fr;gap:32px;align-items:end;margin-bottom:18px} .eyebrow{color:var(--lime);font-size:11px;font-weight:1000;letter-spacing:.08em}.brfeed-top h1{margin:7px 0 0;font-size:clamp(42px,5vw,73px);line-height:.84;letter-spacing:-.055em;font-style:italic;font-weight:1000} .brfeed-top h1 em{color:var(--lime);font-style:normal}.brfeed-top p{max-width:560px;color:var(--theme-role-text-c5cbd0);font-size:14px;font-weight:700} .mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mode-tabs a{min-height:58px;display:flex;align-items:center;justify-content:center;border:2px solid var(--theme-role-border-343b41);background:var(--theme-role-surface-12181d);color:var(--theme-role-text-ddd);text-decoration:none;font-size:18px;font-weight:1000;font-style:italic} .mode-tabs a.active{background:var(--lime);border-color:var(--lime);color:var(--theme-role-text-080b0e)} .battle-stage{overflow:hidden;border:2px solid var(--lime);background:var(--theme-role-surface-0d1115);box-shadow:0 0 36px var(--theme-role-shadow-rgba-223-255-0-08-30cff5),8px 8px 0 var(--theme-role-shadow-000)} .battle-topline{min-height:46px;padding:8px 14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--theme-role-surface-090c0f);border-bottom:1px solid var(--theme-role-border-31373c)} .battle-topline strong{color:var(--lime);font-size:15px;font-style:italic;text-align:center}.battle-topline a{text-align:right;color:var(--theme-role-text-fff);text-decoration:none;font-size:10px;font-weight:1000}.battle-topline a:hover{color:var(--lime)} .live-pill{justify-self:start;padding:6px 8px;background:var(--theme-role-surface-df1426);border-radius:4px;font-size:10px;font-weight:1000} .battle-visual{position:relative;display:grid;grid-template-columns:1fr 1fr;height:clamp(390px,44vw,600px);overflow:hidden} .battle-side{position:relative;width:100%;height:100%;border:0;padding:0;background:var(--theme-role-surface-151a1f);overflow:hidden;cursor:pointer} .battle-image-wrap{position:absolute;inset:0}.battle-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .23s ease,filter .23s ease}.battle-side:hover img{transform:scale(1.035);filter:brightness(1.08)} .image-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--theme-role-surface-171d22),var(--theme-role-surface-090c0f));color:var(--theme-role-text-667078);font-size:100px;font-weight:1000} .battle-side.no-image .image-fallback{display:flex}.battle-side.no-image img{display:none}.shade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 28%,var(--theme-role-surface-rgba-0-0-0-08-c5102c) 48%,var(--theme-role-surface-rgba-0-0-0-9-b27fc3) 100%)} .battle-copy{position:absolute;left:32px;right:32px;bottom:27px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;pointer-events:none}.battle-side.right .battle-copy{align-items:flex-end;text-align:right} .battle-copy small{max-width:85%;min-height:13px;color:var(--theme-role-text-e0e4e7);font-size:11px;font-weight:800;text-shadow:0 2px 4px var(--theme-role-shadow-000)}.battle-copy strong{margin-top:5px;color:var(--theme-role-text-fff);font-size:clamp(31px,4vw,60px);line-height:.95;font-style:italic;font-weight:1000;text-transform:uppercase;text-shadow:0 3px 9px var(--theme-role-shadow-000)} .battle-copy b{margin-top:9px;padding:5px 8px;background:var(--red);font-size:10px;font-weight:1000;transform:rotate(-1deg)}.battle-side.right .battle-copy b{background:var(--blue);transform:rotate(1deg)} .bolt{position:absolute;z-index:5;left:50%;top:-8%;bottom:-8%;width:13px;transform:translateX(-50%) rotate(4deg);background:var(--lime);box-shadow:0 0 23px var(--lime);clip-path:polygon(38% 0,100% 0,60% 38%,100% 38%,0 100%,35% 55%,0 55%)} .vs{position:absolute;z-index:7;left:50%;top:50%;width:115px;height:115px;transform:translate(-50%,-50%) rotate(-3deg);border:5px solid var(--lime);border-radius:50%;background:var(--theme-role-surface-07090b);display:flex;align-items:center;justify-content:center;font-size:46px;font-style:italic;font-weight:1000;box-shadow:0 0 0 7px var(--theme-role-shadow-rgba-0-0-0-55-41e5a9),0 0 34px var(--theme-role-shadow-rgba-223-255-0-4-7ffe5d)} .battle-side.picked img{transform:scale(1.045);filter:brightness(1.08) saturate(1.08)}.battle-side.loser img{filter:brightness(.55) saturate(.65)} .battle-result{padding:13px 16px;background:var(--theme-role-surface-090c0f);border-top:1px solid var(--theme-role-border-30363b)}.result-head{display:flex;justify-content:space-between;gap:15px;margin-bottom:9px;color:var(--theme-role-text-aeb7bc);font-size:11px;font-weight:800}.result-head strong{color:var(--theme-role-text-fff);font-size:12px} .result-bar{height:62px;display:flex;overflow:hidden;background:var(--theme-role-surface-222);border:2px solid var(--theme-role-border-050607);box-shadow:0 5px 0 var(--theme-role-shadow-050607)}.result-left,.result-right{display:flex;align-items:center;overflow:hidden;transition:width .72s cubic-bezier(.15,.8,.2,1)}.result-left{width:50%;justify-content:flex-start;padding-left:20px;background:linear-gradient(135deg,var(--theme-role-surface-ff174d),var(--theme-role-surface-d50835))}.result-right{width:50%;justify-content:flex-end;padding-right:20px;background:linear-gradient(135deg,var(--theme-role-surface-176fff),var(--theme-role-surface-0854c5))} .result-bar b{font-size:31px;font-style:italic;font-weight:1000}.vote-counts{display:flex;justify-content:space-between;color:var(--theme-role-text-9ba4aa);font-size:10px;font-weight:900;margin-top:8px} .battle-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 16px 18px}.battle-actions>span{color:var(--theme-role-text-929ba1);font-size:10px;font-weight:900}.battle-actions button{min-width:250px;min-height:57px;border:3px solid var(--theme-role-border-080b0e);background:var(--lime);color:var(--theme-role-text-080b0e);font-size:20px;font-style:italic;font-weight:1000;box-shadow:5px 5px 0 var(--theme-role-shadow-000);cursor:pointer;transform:skew(-3deg)}.battle-actions button:hover:not(:disabled){background:var(--theme-role-surface-fff)}.battle-actions button:disabled{opacity:.25;cursor:not-allowed} .up-next{margin-top:27px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;padding-bottom:9px;margin-bottom:12px;border-bottom:1px solid var(--theme-role-border-30363b)}.section-head>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.section-head h2{margin:0;font-size:21px;font-style:italic}.section-head small{color:var(--theme-role-text-9ba4aa);font-size:10px}.section-head>b{color:var(--lime);font-size:10px} .queue{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.queue-card{min-width:0;border:1px solid var(--theme-role-border-343b41);background:var(--theme-role-surface-11171c);overflow:hidden}.queue-card:first-child{border-color:var(--lime);box-shadow:0 0 22px var(--theme-role-shadow-rgba-223-255-0-1-9a8665)}.queue-visual{position:relative;height:155px;display:grid;grid-template-columns:1fr 1fr;background:var(--theme-role-surface-151a1f)}.queue-half{position:relative;overflow:hidden}.queue-half img{width:100%;height:100%;object-fit:cover}.queue-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--theme-role-surface-171d22);color:var(--theme-role-text-6d777d);font-size:35px;font-weight:1000}.queue-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;border:2px solid var(--lime);border-radius:50%;background:var(--theme-role-surface-07090b);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:1000} .queue-copy{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 10px}.queue-copy strong{font-size:12px;line-height:1.05;text-transform:uppercase}.queue-copy strong:last-child{text-align:right}.queue-meta{display:flex;justify-content:space-between;gap:8px;padding:0 10px 10px;color:var(--theme-role-text-90999f);font-size:9px;font-weight:800}.queue-card:first-child .queue-meta b{color:var(--lime)} .feed-principle{margin-top:27px;border:1px dashed var(--theme-role-border-3b4248);padding:14px 16px;display:flex;gap:10px;color:var(--theme-role-text-999);font-size:11px}.feed-principle strong{color:var(--lime)} .feed-empty{padding:40px;border:3px solid var(--theme-role-border-222);background:var(--theme-role-surface-11161a);display:flex;flex-direction:column;gap:10px}.feed-empty strong{font-size:26px;color:var(--lime)}.feed-empty span{color:var(--theme-role-text-aaa)}.feed-empty a{color:var(--theme-role-text-fff);font-weight:1000} @media(max-width:980px){.brfeed-header{height:auto;min-height:76px;flex-wrap:wrap;padding:12px 16px}.brfeed-header nav{width:100%;margin:0;justify-content:space-between;gap:8px}.brfeed-top{grid-template-columns:1fr}.queue{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.brfeed-shell{width:calc(100% - 16px);padding-top:18px}.brfeed-brand{min-width:0}.brfeed-header nav a{font-size:10px}.brfeed-top h1{font-size:43px}.mode-tabs a{min-height:48px;font-size:14px}.battle-topline{grid-template-columns:1fr 1fr}.battle-topline strong{display:none}.battle-visual{height:auto;grid-template-columns:1fr}.battle-side{height:270px}.battle-side.right{border-top:4px solid var(--lime)}.bolt{display:none}.vs{width:72px;height:72px;font-size:27px}.battle-copy{left:18px;right:18px;bottom:18px}.battle-copy strong{font-size:31px}.result-bar{height:52px}.result-bar b{font-size:23px}.battle-actions{align-items:stretch;flex-direction:column}.battle-actions button{width:100%;min-width:0}.queue{grid-template-columns:1fr}.queue-visual{height:210px}.feed-principle{flex-direction:column}} /* V2 — endless feed + skip */ .battle-action-buttons{ display:flex; align-items:center; justify-content:flex-end; gap:10px; } .battle-actions .skip-battle{ min-width:175px; min-height:46px; border:2px solid var(--theme-role-border-4a5258); background:var(--theme-role-surface-12181d); color:var(--theme-role-text-d4d9dc); box-shadow:none; font-size:11px; font-style:normal; transform:none; } .battle-actions .skip-battle:hover:not(:disabled){ border-color:var(--theme-role-border-fff); background:var(--theme-role-surface-1d242a); color:var(--theme-role-text-fff); } .battle-actions .skip-battle:disabled{ opacity:.3; } .queue-card.is-loading{ display:flex; min-height:230px; align-items:center; justify-content:center; border-style:dashed; color:var(--theme-role-text-9aa3aa); font-size:11px; font-weight:900; } .feed-loading-dot{ width:9px; height:9px; margin-right:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 13px var(--lime); animation:brfeedPulse .75s ease-in-out infinite alternate; } @keyframes brfeedPulse{ from{opacity:.3;transform:scale(.75)} to{opacity:1;transform:scale(1.15)} } @media(max-width:680px){ .battle-action-buttons{ width:100%; flex-direction:column-reverse; align-items:stretch; } .battle-actions .skip-battle, .battle-actions .battle-next, .battle-actions button{ width:100%; } } /* V2.1 — mobile floating NEXT BATTLE overlay */ .mobile-next-overlay{ display:none; } @media(max-width:680px){ .mobile-next-overlay{ display:block; position:fixed; left:12px; right:12px; bottom:12px; z-index:120; min-height:58px; border:3px solid var(--theme-role-border-080b0e); background:var(--lime); color:var(--theme-role-text-080b0e); font-size:20px; font-style:italic; font-weight:1000; box-shadow:0 6px 0 var(--theme-role-shadow-000), 0 10px 30px var(--theme-role-shadow-rgba-0-0-0-45-70cab9); opacity:0; pointer-events:none; transform:translateY(18px); transition:opacity .18s ease, transform .18s ease; } .mobile-next-overlay b{ font-size:24px; } .mobile-next-overlay.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); } body.has-mobile-next{ padding-bottom:88px; } } /* BattleRanker V3.4 — make battle/ranking title the obvious context */ .battle-topline{ position:relative; min-height:60px; padding:9px 14px; grid-template-columns:1fr minmax(280px,auto) 1fr; overflow:visible; } .battle-topline strong{ position:relative; z-index:8; display:block; max-width:min(760px,72vw); padding:7px 14px 8px; background:var(--lime); color:var(--theme-role-text-080b0e); border:2px solid var(--theme-role-border-080b0e); box-shadow:3px 3px 0 var(--theme-role-shadow-000); font-size:clamp(22px,2.5vw,34px); line-height:1; letter-spacing:-.025em; font-style:normal; font-weight:1000; text-align:center; white-space:normal; overflow:visible; text-overflow:clip; transform:translateY(4px); } @media(max-width:680px){ .battle-topline{ min-height:54px; grid-template-columns:1fr; gap:6px; padding:8px 10px 10px; } .battle-topline .live-pill, .battle-topline a{ display:none; } .battle-topline strong{ display:block; justify-self:center; max-width:100%; width:auto; padding:6px 10px 7px; font-size:clamp(18px,5.7vw,26px); line-height:1.02; transform:none; } } /* BattleRanker V3.6 — clearer result payoff + in-flow mobile Next */ .result-head{ align-items:flex-start; } .result-head #resultMessage{ font-size:14px; line-height:1.2; } .result-head #resultMeta{ color:var(--lime); font-size:12px; line-height:1.2; font-weight:1000; text-align:right; } .battle-stage.has-result .battle-result{ background: linear-gradient(180deg,var(--theme-role-surface-rgba-223-255-0-035-1f9f0a),transparent 55%), var(--theme-role-surface-090c0f); } .battle-stage.has-result .result-head #resultMessage{ color:var(--theme-role-text-fff); } .battle-stage.has-result .result-head #resultMeta{ color:var(--lime); } /* Permanently retire the old fixed overlay; it obscured the payoff. */ .mobile-next-overlay{ display:none !important; } body.has-mobile-next{ padding-bottom:0 !important; } @media(max-width:680px){ .battle-result{ padding:15px 12px 13px; } .result-head{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:12px; } .result-head #resultMessage{ width:100%; font-size:17px; line-height:1.15; } .result-head #resultMeta{ width:100%; font-size:13px; line-height:1.25; text-align:left; } .result-bar{ height:48px; box-shadow:none; } .result-bar b{ font-size:21px; } .vote-counts{ margin-top:7px; font-size:9px; } /* * Before a vote: keep Skip available and hide the disabled Next button. * After a vote: remove the clutter and turn the ordinary Next button into * a large full-width continuation block directly under the result. */ .battle-stage:not(.has-result) #nextBattle{ display:none; } .battle-stage.has-result .battle-actions{ display:block; padding:10px 12px 14px; background:var(--theme-role-surface-090c0f); border-top:0; } .battle-stage.has-result #feedProgress, .battle-stage.has-result #skipBattle{ display:none; } .battle-stage.has-result .battle-action-buttons{ display:block; width:100%; } .battle-stage.has-result #nextBattle{ display:flex; width:100%; min-height:68px; margin:0; align-items:center; justify-content:center; border:3px solid var(--theme-role-border-080b0e); background:var(--lime); color:var(--theme-role-text-080b0e); box-shadow:0 5px 0 var(--theme-role-shadow-000); font-size:23px; font-style:italic; font-weight:1000; transform:none; } .battle-stage.has-result #nextBattle b{ margin-left:10px; font-size:28px; } .battle-stage.has-result #nextBattle:hover:not(:disabled){ background:var(--theme-role-surface-fff); } } /* BattleRanker V3.7 — swipe-to-next + protected fixed Next + impact toast */ /* Result becomes a deliberate payoff card, not loose text on black. */ .battle-stage.has-result .battle-result{ position:relative; border-top:3px solid var(--lime); border-bottom:1px solid var(--theme-role-border-394249); background: radial-gradient(circle at 90% 0,var(--theme-role-surface-rgba-223-255-0-12-77324d),transparent 34%), linear-gradient(135deg,var(--theme-role-surface-10171c),var(--theme-role-surface-090d10) 72%); } .battle-stage.has-result .result-head{ margin-bottom:12px; } .battle-stage.has-result .result-head #resultMessage{ color:var(--theme-role-text-fff); font-size:16px; } .battle-stage.has-result .result-head #resultMeta{ display:inline-block; padding:7px 10px; border:1px solid var(--theme-role-border-rgba-223-255-0-48-cfd935); background:var(--theme-role-surface-rgba-223-255-0-10-0b4a61); color:var(--lime); font-size:13px; font-weight:1000; letter-spacing:.015em; } /* Ranking impact toast */ .ranking-impact-toast{ position:fixed; z-index:500; left:50%; top:18%; width:min(620px,calc(100% - 28px)); overflow:hidden; padding:18px 22px 19px; border:3px solid var(--lime); background: linear-gradient(135deg,var(--theme-role-surface-11191e) 0%,var(--theme-role-surface-080b0e) 76%); color:var(--theme-role-text-fff); box-shadow: 0 14px 45px var(--theme-role-shadow-rgba-0-0-0-62-cfa90c), 7px 7px 0 var(--theme-role-shadow-000), 0 0 36px var(--theme-role-shadow-rgba-223-255-0-22-13ec45); opacity:0; pointer-events:none; transform:translate(-50%,-24px) scale(.96); transition: opacity .22s ease, transform .28s cubic-bezier(.18,.8,.22,1); } .ranking-impact-toast.is-visible{ opacity:1; transform:translate(-50%,0) scale(1); } .ranking-impact-toast.is-leaving{ opacity:0; transform:translate(-50%,-34px) scale(.98); } .ranking-impact-kicker{ position:relative; z-index:2; display:block; margin-bottom:5px; color:var(--lime); font-size:11px; font-weight:1000; letter-spacing:.08em; } .ranking-impact-toast strong{ position:relative; z-index:2; display:block; color:var(--theme-role-text-fff); font-size:clamp(25px,4vw,40px); line-height:.94; font-style:italic; font-weight:1000; text-transform:uppercase; } .ranking-impact-toast small{ position:relative; z-index:2; display:block; margin-top:8px; color:var(--theme-role-text-c4ccd1); font-size:12px; font-weight:900; } .ranking-impact-shine{ position:absolute; z-index:1; top:-55%; bottom:-55%; left:-36%; width:20%; background:linear-gradient( 90deg, transparent, var(--theme-role-surface-rgba-255-255-255-04-12b43a), var(--theme-role-surface-rgba-255-255-255-38-3cea3f), var(--theme-role-surface-rgba-223-255-0-22-13ec45), var(--theme-role-surface-rgba-255-255-255-06-08e149), transparent ); transform:skewX(-18deg); } .ranking-impact-toast.is-visible .ranking-impact-shine{ animation:brRankingImpactShine 1.15s ease .28s 1 both; } @keyframes brRankingImpactShine{ from{left:-36%} to{left:125%} } /* * Override V3.6: restore the compact fixed mobile Next control. * We reserve bottom space while it is visible and automatically nudge the * viewport if necessary, so it does not sit over the result. */ @media(max-width:680px){ .battle-stage:not(.has-result) #nextBattle{ display:flex; } .battle-stage.has-result .battle-actions{ display:flex; padding:14px 12px 18px; background:var(--theme-role-surface-090c0f); } .battle-stage.has-result #feedProgress{ display:block; } .battle-stage.has-result #skipBattle{ display:none; } .battle-stage.has-result .battle-action-buttons{ display:flex; width:auto; } .battle-stage.has-result #nextBattle{ display:none; } .mobile-next-overlay{ display:block !important; position:fixed; left:10px; right:10px; bottom:max(10px,env(safe-area-inset-bottom)); z-index:220; min-height:54px; border:2px solid var(--theme-role-border-080b0e); background:var(--lime); color:var(--theme-role-text-080b0e); box-shadow:0 5px 0 var(--theme-role-shadow-000),0 10px 26px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f); opacity:0; pointer-events:none; transform:translateY(16px); transition:opacity .18s ease,transform .18s ease; font-size:18px; font-style:italic; font-weight:1000; } .mobile-next-overlay::before{ content:"SWIPE UP ↑ OR"; margin-right:10px; font-size:9px; font-style:normal; letter-spacing:.04em; opacity:.7; } .mobile-next-overlay.is-visible{ opacity:1; pointer-events:auto; transform:translateY(0); } body.has-mobile-next{ padding-bottom:82px !important; } .battle-stage.has-result .battle-result{ padding:14px 12px 13px; } .battle-stage.has-result .result-head #resultMessage{ font-size:17px; } .battle-stage.has-result .result-head #resultMeta{ display:block; width:100%; padding:9px 10px; font-size:13px; line-height:1.25; text-align:left; } .ranking-impact-toast{ top:15%; padding:16px 17px 17px; } .ranking-impact-toast strong{ font-size:clamp(24px,7.2vw,34px); } } @media(prefers-reduced-motion:reduce){ .ranking-impact-toast, .mobile-next-overlay{ transition:none; } .ranking-impact-toast.is-visible .ranking-impact-shine{ animation:none; } } /* ================================================================ Battle effect preset: flying-kick-1 One cached 8KB WebP sprite; all movement uses compositor transforms. ================================================================ */ .battle-effects-enabled-page .battle-flying-kick-sprite{ position:absolute; z-index:36; top:50%; left:50%; display:block; width:clamp(190px,25vw,330px); height:auto; opacity:0; visibility:hidden; pointer-events:none; user-select:none; filter: drop-shadow(2px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(-2px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 2px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 -2px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 8px 13px var(--theme-role-shadow-rgba-0-0-0-55-41e5a9)); will-change:transform,opacity; } .battle-effects-enabled-page .battle-visual.effect-flying-kick-1.is-effect-active.effect-loser-right .battle-flying-kick-sprite{ visibility:visible; animation:brtest-kick-fly-right .78s cubic-bezier(.18,.7,.22,1) both; } .battle-effects-enabled-page .battle-visual.effect-flying-kick-1.is-effect-active.effect-loser-left .battle-flying-kick-sprite{ visibility:visible; animation:brtest-kick-fly-left .78s cubic-bezier(.18,.7,.22,1) both; } .battle-effects-enabled-page .battle-side.effect-flying-kick-1-loser{ background:var(--theme-role-surface-030506); } .battle-effects-enabled-page .battle-visual.effect-flying-kick-1.effect-loser-right .battle-side.effect-flying-kick-1-loser .battle-image-wrap{ transform-origin:42% 52%; animation:brtest-kicked-off-right .48s .34s cubic-bezier(.48,.02,.78,.28) both; will-change:transform,opacity; } .battle-effects-enabled-page .battle-visual.effect-flying-kick-1.effect-loser-left .battle-side.effect-flying-kick-1-loser .battle-image-wrap{ transform-origin:58% 52%; animation:brtest-kicked-off-left .48s .34s cubic-bezier(.48,.02,.78,.28) both; will-change:transform,opacity; } .battle-effects-enabled-page .battle-side.effect-flying-kick-1-loser .shade::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,var(--theme-role-surface-rgba-255-255-255-9-069d90),var(--theme-role-surface-rgba-223-255-0-55-6b3fa8) 20%,var(--theme-role-surface-rgba-255-137-24-3-d73c11) 42%,transparent 70%); mix-blend-mode:screen; opacity:0; pointer-events:none; animation:brtest-kick-contact-flash .25s .32s ease-out both; } @keyframes brtest-kick-fly-right{ 0%{opacity:0;transform:translate3d(-230%,-50%,0) scale(.72) rotate(-5deg)} 8%{opacity:1} 46%{opacity:1;transform:translate3d(-12%,-50%,0) scale(1) rotate(0)} 58%{opacity:1;transform:translate3d(48%,-50%,0) scale(1.04) rotate(2deg)} 88%{opacity:.9} 100%{opacity:0;transform:translate3d(235%,-50%,0) scale(.88) rotate(6deg)} } @keyframes brtest-kick-fly-left{ 0%{opacity:0;transform:translate3d(230%,-50%,0) scaleX(-1) scale(.72) rotate(-5deg)} 8%{opacity:1} 46%{opacity:1;transform:translate3d(12%,-50%,0) scaleX(-1) scale(1) rotate(0)} 58%{opacity:1;transform:translate3d(-48%,-50%,0) scaleX(-1) scale(1.04) rotate(2deg)} 88%{opacity:.9} 100%{opacity:0;transform:translate3d(-235%,-50%,0) scaleX(-1) scale(.88) rotate(6deg)} } @keyframes brtest-kicked-off-right{ 0%,9%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)} 24%{opacity:1;transform:translate3d(5%,0,0) rotate(1deg) scale(.99)} 100%{opacity:0;transform:translate3d(145%,5%,0) rotate(13deg) scale(.84)} } @keyframes brtest-kicked-off-left{ 0%,9%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)} 24%{opacity:1;transform:translate3d(-5%,0,0) rotate(-1deg) scale(.99)} 100%{opacity:0;transform:translate3d(-145%,5%,0) rotate(-13deg) scale(.84)} } @keyframes brtest-kick-contact-flash{ 0%{opacity:0;transform:scale(.8)} 35%{opacity:.88;transform:scale(1)} 100%{opacity:0;transform:scale(1.12)} } @media(max-width:680px){ .battle-effects-enabled-page .battle-flying-kick-sprite{ width:clamp(130px,39vw,175px); filter: drop-shadow(1px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(-1px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 1px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 -1px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 5px 9px var(--theme-role-shadow-rgba-0-0-0-5-91568c)); } .battle-effects-enabled-page .battle-visual.effect-flying-kick-1.is-effect-active.effect-loser-right .battle-flying-kick-sprite{ top:77%; animation-name:brtest-kick-mobile-right; } .battle-effects-enabled-page .battle-visual.effect-flying-kick-1.is-effect-active.effect-loser-left .battle-flying-kick-sprite{ top:25%; animation-name:brtest-kick-mobile-left; } .battle-effects-enabled-page .battle-visual.effect-flying-kick-1.effect-loser-right .battle-side.effect-flying-kick-1-loser .battle-image-wrap{ transform-origin:42% 52%; animation-name:brtest-kicked-off-right; } .battle-effects-enabled-page .battle-visual.effect-flying-kick-1.effect-loser-left .battle-side.effect-flying-kick-1-loser .battle-image-wrap{ transform-origin:58% 52%; animation-name:brtest-kicked-off-left; } /* Keep the flight entirely within the losing half of the stacked battle. */ @keyframes brtest-kick-mobile-right{ 0%{opacity:0;transform:translate3d(-245%,-50%,0) scale(.72) rotate(-5deg)} 8%{opacity:1} 46%{opacity:1;transform:translate3d(-34%,-50%,0) scale(1) rotate(0)} 58%{opacity:1;transform:translate3d(30%,-50%,0) scale(1.04) rotate(2deg)} 88%{opacity:.9} 100%{opacity:0;transform:translate3d(245%,-50%,0) scale(.88) rotate(6deg)} } @keyframes brtest-kick-mobile-left{ 0%{opacity:0;transform:translate3d(245%,-50%,0) scaleX(-1) scale(.72) rotate(-5deg)} 8%{opacity:1} 46%{opacity:1;transform:translate3d(34%,-50%,0) scaleX(-1) scale(1) rotate(0)} 58%{opacity:1;transform:translate3d(-30%,-50%,0) scaleX(-1) scale(1.04) rotate(2deg)} 88%{opacity:.9} 100%{opacity:0;transform:translate3d(-245%,-50%,0) scaleX(-1) scale(.88) rotate(6deg)} } } @media(prefers-reduced-motion:reduce){ .battle-effects-enabled-page .battle-flying-kick-sprite, .battle-effects-enabled-page .battle-side.effect-flying-kick-1-loser .battle-image-wrap, .battle-effects-enabled-page .battle-side.effect-flying-kick-1-loser .shade::after{ animation:none !important; } } /* BattleRanker V3.8 — stripped-back mobile Battle loop */ /* Dynamic image result overlays; hidden on desktop. */ .mobile-image-result{ display:none; } @media(max-width:680px){ /* * Mobile is intentionally stripped back: * title/context + two contenders + their result overlays. * Discovery/explanation modules belong on the homepage, not in the loop. */ .brfeed-shell{ width:100%; padding:0 0 24px; } .brfeed-top, .up-next, .feed-principle{ display:none; } .battle-stage{ border-left:0; border-right:0; box-shadow:none; } .battle-topline{ min-height:52px; padding:7px 8px 9px; } .battle-topline strong{ max-width:calc(100vw - 16px); font-size:clamp(17px,5vw,24px); box-shadow:2px 2px 0 var(--theme-role-shadow-000); } .battle-visual{ display:grid; grid-template-columns:1fr; height:auto; } .battle-side{ height:min(36vh,285px); min-height:220px; } .battle-side.right{ border-top:3px solid var(--lime); } .battle-copy{ left:14px; right:14px; bottom:14px; } .battle-copy small{ display:none; } .battle-copy strong{ font-size:clamp(27px,8vw,38px); } .battle-copy b{ margin-top:7px; padding:4px 7px; font-size:9px; } /* * Once results are revealed, the small TAP TO PICK chip is unnecessary. * Keep contender names, but give the percentages visual priority. */ .battle-side.has-mobile-result .battle-copy b{ display:none; } .mobile-image-result{ position:absolute; z-index:20; top:50%; left:50%; width:min(210px,68%); min-height:92px; padding:12px 14px 11px; transform:translate(-50%,-50%) scale(.9); display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px solid var(--theme-role-border-rgba-255-255-255-88-d0d52e); background:var(--theme-role-surface-rgba-4-7-9-82-6df69e); color:var(--theme-role-text-fff); box-shadow:0 8px 28px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f); opacity:0; pointer-events:none; backdrop-filter:blur(3px); transition:opacity .22s ease,transform .28s ease; } .mobile-image-result.is-visible{ opacity:1; transform:translate(-50%,-50%) scale(1); } .mobile-image-result.is-picked{ border-color:var(--lime); background:var(--theme-role-surface-rgba-8-11-14-9-bb4f41); box-shadow: 0 8px 28px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f), 0 0 26px var(--theme-role-shadow-rgba-223-255-0-22-13ec45); } .mobile-image-result strong{ font-size:44px; line-height:.9; font-style:italic; font-weight:1000; } .mobile-image-result small{ margin-top:7px; color:var(--theme-role-text-d7dde0); font-size:10px; line-height:1; font-weight:1000; letter-spacing:.06em; } .mobile-image-result.is-picked small{ color:var(--lime); } /* * The desktop result block remains in the DOM for accessibility and desktop, * but mobile gets the result directly on the images instead. */ .battle-result, .battle-actions, .mobile-next-overlay{ display:none !important; } body.has-mobile-next{ padding-bottom:0 !important; } /* * Give a tiny gesture cue only after a result, without adding another box. */ .battle-stage.has-result::after{ content:"SWIPE LEFT ←"; display:block; padding:9px 10px 10px; border-top:1px solid var(--theme-role-border-30383e); background:var(--theme-role-surface-080b0e); color:var(--lime); text-align:center; font-size:10px; font-weight:1000; letter-spacing:.12em; } /* * Ranking impact is a celebratory interruption, so it sits centrally and * stays long enough to be read. Swiping to the next Battle removes it. */ .ranking-impact-toast{ top:50%; width:calc(100% - 24px); padding:20px 18px 21px; transform:translate(-50%,-50%) scale(.94); } .ranking-impact-toast.is-visible{ transform:translate(-50%,-50%) scale(1); } .ranking-impact-toast.is-leaving{ transform:translate(-50%,-56%) scale(.98); } .ranking-impact-kicker{ font-size:10px; } .ranking-impact-toast strong{ font-size:clamp(28px,8.4vw,40px); line-height:.95; } .ranking-impact-toast small{ font-size:12px; line-height:1.25; } } @media(max-width:390px){ .battle-side{ height:245px; } .mobile-image-result{ min-height:82px; } .mobile-image-result strong{ font-size:39px; } } /* BattleRanker V3.8.2 — smarter mobile image crops Portrait imagery is biased upward so faces/heads are less likely to be cut off. Landscape imagery remains centred. */ @media(max-width:680px){ .battle-side img.crop-portrait{ object-position:center 18%; } .battle-side img.crop-squareish{ object-position:center 28%; } .battle-side img.crop-landscape{ object-position:center center; } } /* ============================================================ BattleRanker V3.12 — DESKTOP IMAGE RESULT OVERLAYS ============================================================ */ @media(min-width:681px){ .battle-side{ isolation:isolate; } .battle-side.picked-result-side::before, .battle-side.other-result-side::before{ content:""; position:absolute; inset:0; z-index:8; pointer-events:none; opacity:0; animation:brDesktopResultTintIn .28s ease forwards; } .battle-side.left.picked-result-side::before{ background:linear-gradient(135deg,var(--theme-role-surface-rgba-255-20-70-14-abf070),var(--theme-role-surface-rgba-255-20-70-32-06a9cc)); } .battle-side.right.picked-result-side::before{ background:linear-gradient(135deg,var(--theme-role-surface-rgba-0-111-255-14-b64a22),var(--theme-role-surface-rgba-0-111-255-32-62ca74)); } .battle-side.other-result-side::before{ background:var(--theme-role-surface-rgba-0-0-0-28-ca0b96); } .mobile-image-result{ position:absolute; z-index:22; top:50%; left:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; width:min(360px,54%); min-height:190px; padding:22px 24px 20px; transform:translate(-50%,-47%) scale(.92); border:2px solid var(--lime); border-radius:8px; background:var(--theme-role-surface-rgba-5-9-13-84-dbc0bb); color:var(--theme-role-text-fff); box-shadow:0 18px 48px var(--theme-role-shadow-rgba-0-0-0-42-dc1699); opacity:0; visibility:hidden; pointer-events:none; backdrop-filter:blur(5px); transition:opacity .24s ease,transform .34s cubic-bezier(.2,.8,.2,1),visibility 0s linear .34s; } .mobile-image-result.is-visible{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); transition-delay:0s; } .battle-side.left .mobile-image-result.is-picked{ border-color:var(--theme-role-border-ff184d); background:linear-gradient(135deg,var(--theme-role-surface-rgba-255-20-70-80-84dc1c),var(--theme-role-surface-rgba-135-0-38-78-cf47e0)); } .battle-side.right .mobile-image-result.is-picked{ border-color:var(--theme-role-border-37a0ff); background:linear-gradient(135deg,var(--theme-role-surface-rgba-0-110-255-80-17aac6),var(--theme-role-surface-rgba-0-55-160-78-b00383)); } .mobile-image-result .image-result-kicker{ display:block; margin-bottom:7px; color:var(--theme-role-text-fff); font-size:19px; line-height:1; font-weight:1000; letter-spacing:.015em; text-transform:uppercase; } .mobile-image-result strong{ display:block; color:var(--theme-role-text-fff); font-size:72px; line-height:.86; font-weight:1000; font-style:italic; letter-spacing:-.045em; text-shadow:0 3px 10px var(--theme-role-shadow-rgba-0-0-0-2-2bdb97); } .mobile-image-result small{ display:block; margin-top:10px; color:var(--theme-role-text-fff); font-size:15px; line-height:1.15; font-weight:900; text-align:center; text-transform:uppercase; } .mobile-image-result.is-loser-result{ width:auto; min-width:128px; min-height:0; padding:13px 17px 12px; border:1px solid var(--theme-role-border-rgba-255-255-255-56-14589c); background:var(--theme-role-surface-rgba-4-7-10-74-8826d2); box-shadow:0 10px 28px var(--theme-role-shadow-rgba-0-0-0-32-78ad00); } .mobile-image-result.is-loser-result .image-result-kicker{ display:none; } .mobile-image-result.is-loser-result strong{ font-size:43px; line-height:.9; } .mobile-image-result.is-loser-result small{ margin-top:5px; color:var(--theme-role-text-c8d0d4); font-size:9px; letter-spacing:.05em; } .battle-side.has-mobile-result .battle-copy b{ display:none; } @keyframes brDesktopResultTintIn{ from{opacity:0;} to{opacity:1;} } } @media(max-width:680px){ .mobile-image-result .image-result-kicker{ display:block; margin-bottom:5px; color:var(--theme-role-text-fff); font-size:9px; line-height:1; font-weight:1000; letter-spacing:.07em; text-transform:uppercase; } .mobile-image-result.is-loser-result .image-result-kicker{ display:none; } } /* ============================================================ BattleRanker V3.12.1 — MOBILE COLOUR RESULT OVERLAYS Match desktop visual language while keeping mobile compact. ============================================================ */ @media(max-width:680px){ .battle-side.left .mobile-image-result.is-picked{ border-color:var(--theme-role-border-ff184d); background: linear-gradient(135deg,var(--theme-role-surface-rgba-255-20-70-84-24434d),var(--theme-role-surface-rgba-132-0-36-82-201dfc)); box-shadow: 0 8px 28px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f), 0 0 24px var(--theme-role-shadow-rgba-255-24-77-20-1d2f7a); } .battle-side.right .mobile-image-result.is-picked{ border-color:var(--theme-role-border-37a0ff); background: linear-gradient(135deg,var(--theme-role-surface-rgba-0-110-255-84-f2147f),var(--theme-role-surface-rgba-0-52-153-82-1a4408)); box-shadow: 0 8px 28px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f), 0 0 24px var(--theme-role-shadow-rgba-55-160-255-20-6bf551); } .mobile-image-result.is-picked{ width:min(220px,72%); min-height:96px; padding:12px 14px 11px; } .mobile-image-result.is-picked .image-result-kicker{ display:block; margin-bottom:5px; color:var(--theme-role-text-fff); font-size:9px; line-height:1; font-weight:1000; letter-spacing:.07em; text-transform:uppercase; } .mobile-image-result.is-picked strong{ font-size:43px; line-height:.88; } .mobile-image-result.is-picked small{ margin-top:7px; color:var(--theme-role-text-fff); font-size:9px; line-height:1.05; font-weight:1000; letter-spacing:.035em; } /* * Non-picked side remains neutral/darker so the user's choice is the * obvious focus instead of both images shouting equally. */ .mobile-image-result.is-loser-result{ width:auto; min-width:112px; min-height:0; padding:10px 13px 9px; border-color:var(--theme-role-border-rgba-255-255-255-5-8065eb); background:var(--theme-role-surface-rgba-4-7-10-76-8142e6); box-shadow:0 7px 22px var(--theme-role-shadow-rgba-0-0-0-36-7bc0bc); } .mobile-image-result.is-loser-result strong{ font-size:34px; line-height:.9; } .mobile-image-result.is-loser-result small{ margin-top:4px; color:var(--theme-role-text-c9d0d4); font-size:8px; letter-spacing:.04em; } } /* ============================================================ BattleRanker V3.12.6 — SAFE LIGHTNING SEAM Images remain untouched 50/50 rectangles. The divider masks the straight join instead of clipping imagery. ============================================================ */ @media(min-width:681px){ .battle-side.left, .battle-side.right{ width:100% !important; margin:0 !important; clip-path:none !important; } .battle-side.left::after, .battle-side.right::after{ content:none !important; } .battle-visual{ grid-template-columns:1fr 1fr !important; overflow:hidden; } .bolt{ position:absolute; z-index:28; left:50%; top:0; bottom:0; width:48px; transform:translateX(-50%) !important; background:none !important; box-shadow:none !important; clip-path:none !important; background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2048%20600%27%20preserveAspectRatio=%27none%27%3E%3Cpolyline%20points=%2725,0%2021,185%2027,185%2019,345%2025,345%2016,600%27%20fill=%27none%27%20stroke=%27%23070a0c%27%20stroke-width=%2718%27%20stroke-linejoin=%27miter%27%20stroke-linecap=%27square%27/%3E%3Cpolyline%20points=%2725,0%2021,185%2027,185%2019,345%2025,345%2016,600%27%20fill=%27none%27%20stroke=%27%23dfff00%27%20stroke-width=%275%27%20stroke-linejoin=%27miter%27%20stroke-linecap=%27square%27/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:100% 100% !important; pointer-events:none; } .vs{ z-index:31; } } /* ============================================================ BattleRanker V3.12.7 — ANGLED + TAPERED LIGHTNING Keeps the safe overlay seam architecture; restores the drama. ============================================================ */ @media(min-width:681px){ .bolt{ left:50%; top:-1%; bottom:-1%; width:70px; transform:translateX(-50%) !important; background:none !important; box-shadow:none !important; clip-path:none !important; background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2070%20600%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M47%200%20L42%20180%20L47%20180%20L34%20314%20L37%20314%20L18%20600%27%20fill=%27none%27%20stroke=%27%23070a0c%27%20stroke-width=%2724%27%20stroke-linejoin=%27miter%27%20stroke-linecap=%27square%27/%3E%3Cpath%20d=%27M47%200%20L42%20180%20L47%20180%20L34%20314%27%20fill=%27none%27%20stroke=%27%23dfff00%27%20stroke-width=%278%27%20stroke-linejoin=%27miter%27%20stroke-linecap=%27square%27/%3E%3Cpath%20d=%27M34%20314%20L18%20600%27%20fill=%27none%27%20stroke=%27%23dfff00%27%20stroke-width=%273.2%27%20stroke-linejoin=%27miter%27%20stroke-linecap=%27square%27/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:100% 100% !important; filter:drop-shadow(0 0 6px var(--theme-role-shadow-rgba-223-255-0-48-cfd935)); } } /* BattleRanker V3.20 — mobile LIST / BATTLE ranking switch */ .mobile-ranking-switch{ display:none; } @media (max-width:760px){ .mobile-ranking-switch{ display:none; grid-template-columns:1fr 1fr; width:100%; min-height:44px; margin:0; border-top:1px solid var(--theme-role-border-30363b); border-bottom:2px solid var(--theme-role-border-dfff00); background:var(--theme-role-surface-0b0f12); } .mobile-ranking-switch.is-available{ display:grid; } .mobile-ranking-switch a, .mobile-ranking-switch span{ position:relative; display:flex; align-items:center; justify-content:center; min-height:44px; color:var(--theme-role-text-c9cdd0); font-size:13px; font-weight:900; font-style:italic; letter-spacing:.45px; text-decoration:none; } .mobile-ranking-switch a:active{ background:var(--theme-role-surface-141a1e); } .mobile-ranking-switch .active{ color:var(--theme-role-text-fff); } .mobile-ranking-switch .active::after{ content:""; position:absolute; left:18%; right:18%; bottom:-2px; height:4px; background:var(--theme-role-surface-dfff00); } } /* BattleRanker V3.21.1 — compact hero, preserve original lime emphasis */ .brfeed-top{ grid-template-columns:.9fr 1.1fr; gap:24px; margin-bottom:12px; } .brfeed-top h1{ font-size:clamp(40px,4.4vw,64px); line-height:.86; margin-top:5px; } .brfeed-top h1 .battle-anything-line{ white-space:nowrap; } .brfeed-top p{ margin-top:8px; margin-bottom:0; } @media(max-width:680px){ .brfeed-top{ grid-template-columns:1fr; gap:12px; margin-bottom:12px; } .brfeed-top h1{ font-size:40px; } .brfeed-top h1 .battle-anything-line{ white-space:normal; } } /* ================================================================ BattleRanker V3.28 — approved compact desktop Battle layout ================================================================ */ /* The old progress / Skip / Next row is intentionally gone. */ .legacy-battle-actions{ display:none !important; } .desktop-next-overlay{ display:none; } @media (min-width:681px){ /* Much quieter area above the contenders. */ .brfeed-shell{ padding-top:12px !important; } .compact-feed-intro{ display:grid !important; grid-template-columns:minmax(420px,1fr) auto !important; align-items:center !important; gap:22px !important; min-height:54px !important; margin:0 0 10px !important; padding:0 !important; } .compact-feed-intro > div:first-child{ display:flex !important; align-items:center !important; gap:16px !important; min-width:0 !important; } .compact-feed-intro .eyebrow{ display:none !important; } .compact-feed-intro h1{ flex:0 0 auto !important; margin:0 !important; font-size:21px !important; line-height:1 !important; letter-spacing:-.35px !important; white-space:nowrap !important; } .compact-feed-intro h1 br{ display:none !important; } .compact-feed-intro h1 em{ color:inherit !important; } .compact-feed-intro h1 em::before{ content:" "; } .compact-feed-intro p{ min-width:0 !important; margin:0 !important; color:var(--theme-role-text-929da3) !important; font-size:10px !important; font-weight:700 !important; line-height:1.25 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } .compact-feed-intro .mode-tabs{ width:auto !important; min-width:360px !important; margin:0 !important; gap:8px !important; } .compact-feed-intro .mode-tabs a{ min-width:174px !important; min-height:42px !important; padding:0 18px !important; font-size:13px !important; } /* Card heading is compact, but the ranking remains obvious. */ .battle-topline{ min-height:46px !important; padding:6px 12px !important; } .battle-topline strong{ font-size:24px !important; line-height:1 !important; } .battle-topline .live-pill{ font-size:9px !important; } .battle-topline a{ font-size:9px !important; } /* Gain more of the screen back without shrinking the photography too far. */ .battle-visual{ height:min(470px,56vh) !important; } .battle-side.right{ position:relative !important; } /* * Appears only after all result / ranking-impact reporting has finished. * This replaces the old lower NEXT button. */ .desktop-next-overlay{ position:absolute !important; right:22px !important; bottom:24px !important; z-index:60 !important; min-width:190px !important; min-height:56px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 22px !important; border:2px solid var(--theme-role-border-dfff00) !important; background:var(--theme-role-surface-dfff00) !important; color:var(--theme-role-text-090d0f) !important; font-size:17px !important; font-weight:1000 !important; font-style:italic !important; line-height:1 !important; box-shadow:0 6px 0 var(--theme-role-shadow-rgba-0-0-0-72-551182) !important; opacity:0 !important; pointer-events:none !important; transform:translateY(10px) !important; transition:opacity .18s ease,transform .18s ease !important; } .desktop-next-overlay.is-visible{ opacity:1 !important; pointer-events:auto !important; transform:translateY(0) !important; } .desktop-next-overlay:hover{ filter:brightness(1.04); } /* The queue now follows the battle immediately. */ .up-next{ margin-top:12px !important; padding-top:0 !important; } .up-next .section-head{ margin-bottom:8px !important; } .feed-principle{ margin-top:14px !important; } } /* * Preserve the established stripped-back mobile experience. * Desktop image-overlay continuation is never shown here. */ @media (max-width:680px){ .desktop-next-overlay{ display:none !important; } } /* ================================================================ BattleRanker V3.29 — POP HOME VISUAL ALIGNMENT Design-only layer. Existing Battle mechanics and lightning geometry remain untouched. ================================================================ */ :root{ --br-pop-bg:var(--theme-bg); --br-pop-panel:var(--theme-surface); --br-pop-panel-2:var(--theme-surface-raised); --br-pop-purple:var(--theme-purple); --br-pop-purple-dark:var(--theme-purple-deep); --br-pop-teal:var(--theme-teal); --br-pop-pink:var(--theme-pink); --br-pop-orange:var(--theme-orange); --br-pop-cream:var(--theme-cream); /* Retain the existing variable name so all established interaction states inherit the new BattleRanker accent without rewiring JS/CSS. */ --lime:var(--br-pop-teal); } html{ background:var(--br-pop-bg); } body{ background: radial-gradient(circle at 12% 0%,var(--theme-role-surface-rgba-91-32-200-20-21d7c1),transparent 360px), radial-gradient(circle at 88% 8%,var(--theme-role-surface-rgba-32-215-207-09-45f344),transparent 320px), var(--br-pop-bg); } /* Header now belongs to the same purple/teal product family as home2. */ .brfeed-header{ min-height:72px; height:auto; padding:10px 28px; border-bottom:1px solid var(--theme-role-border-353b61); background:var(--theme-role-surface-rgba-7-10-27-96-f6c0a5); box-shadow:0 7px 25px var(--theme-role-shadow-rgba-0-0-0-20-d5b06a); } .brfeed-brand .crown{ color:var(--br-pop-teal); } .brfeed-brand strong span{ color:var(--br-pop-teal); } .brfeed-brand small{ color:var(--theme-role-text-969db9); } .brfeed-header nav a{ color:var(--theme-role-text-c7cada); } .brfeed-header nav a.active, .brfeed-header nav a:hover{ color:var(--br-pop-teal); } /* Desktop intro: compact but with a little of the homepage personality. */ @media (min-width:681px){ .brfeed-shell{ width:min(1380px,calc(100% - 34px)); padding-top:18px !important; } .compact-feed-intro{ min-height:58px !important; margin-bottom:12px !important; } .compact-feed-intro h1{ position:relative; color:var(--theme-role-text-fff); font-size:23px !important; font-style:italic; letter-spacing:-.55px !important; } .compact-feed-intro h1::after{ content:""; display:inline-block; width:34px; height:8px; margin-left:10px; border-radius:3px; background:var(--br-pop-pink); transform:rotate(-3deg); } .compact-feed-intro p{ color:var(--theme-role-text-9ca3bd) !important; } .compact-feed-intro .mode-tabs{ min-width:350px !important; } .compact-feed-intro .mode-tabs a{ min-height:40px !important; border:1px solid var(--theme-role-border-444b71); border-radius:7px; background:var(--theme-role-surface-151a34); color:var(--theme-role-text-cbd0df); box-shadow:none; } .compact-feed-intro .mode-tabs a.active{ border-color:var(--br-pop-teal); background:var(--br-pop-teal); color:var(--theme-role-text-101225); } } /* The main battle card gets cleaner framing; image geometry is unchanged. */ .battle-stage{ overflow:hidden; border:1px solid var(--theme-role-border-535b80); border-radius:12px; background:var(--theme-role-surface-0d1227); box-shadow: 0 20px 50px var(--theme-role-shadow-rgba-0-0-0-30-6d79cf), 0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-025-40fa64); } .battle-topline{ border-bottom:1px solid var(--theme-role-border-424967); background: linear-gradient(90deg,var(--theme-role-surface-rgba-91-32-200-16-792842),transparent 28%), var(--theme-role-surface-11162c); } .battle-topline strong{ border-color:var(--theme-role-border-11152a); border-radius:7px; background:var(--br-pop-teal); color:var(--theme-role-text-101225); box-shadow:3px 3px 0 var(--theme-role-shadow-090c1d); } .live-pill{ border-radius:999px; background:var(--br-pop-pink); color:var(--theme-role-text-fff); } .battle-topline a{ color:var(--theme-role-text-b9bfd3); } .battle-topline a:hover{ color:var(--br-pop-teal); } /* Contender labels now echo the bright homepage accents. */ .battle-copy b{ border-radius:5px; background:var(--br-pop-pink); box-shadow:2px 2px 0 var(--theme-role-shadow-rgba-0-0-0-45-70cab9); } .battle-side.right .battle-copy b{ background:var(--br-pop-purple); } .battle-copy strong{ text-shadow:0 4px 16px var(--theme-role-shadow-rgba-0-0-0-85-0ef6af); } /* VS is more playful but still centered over the EXISTING bolt seam. */ .vs{ border-color:var(--br-pop-teal); background:var(--theme-role-surface-0b1026); color:var(--theme-role-text-fff); box-shadow: 0 0 0 7px var(--theme-role-shadow-rgba-7-10-24-60-7ffe82), 0 0 30px var(--theme-role-shadow-rgba-32-215-207-30-ac678e); } /* Desktop result overlays use the homepage pink/purple language. */ @media(min-width:681px){ .battle-side.left .mobile-image-result.is-picked{ border-color:var(--theme-role-border-ff6cab); background:linear-gradient(135deg,var(--theme-role-surface-rgba-255-63-146-88-bc979d),var(--theme-role-surface-rgba-151-16-91-84-9e6d69)); } .battle-side.right .mobile-image-result.is-picked{ border-color:var(--theme-role-border-9d7cff); background:linear-gradient(135deg,var(--theme-role-surface-rgba-91-32-200-90-b1cd0f),var(--theme-role-surface-rgba-43-15-107-86-405dec)); } .mobile-image-result{ border-radius:12px; border-color:var(--br-pop-teal); background:var(--theme-role-surface-rgba-9-13-34-88-bec51a); } .desktop-next-overlay{ border-color:var(--br-pop-teal) !important; border-radius:8px !important; background:var(--br-pop-teal) !important; color:var(--theme-role-text-101225) !important; box-shadow:0 6px 0 var(--theme-role-shadow-080b1e),0 12px 28px var(--theme-role-shadow-rgba-0-0-0-32-78ad00) !important; } } /* Desktop result strip is quieter so the images/result overlays stay primary. */ .battle-result{ background:var(--theme-role-surface-0d1227); border-top:1px solid var(--theme-role-border-404766); } .battle-stage.has-result .battle-result{ border-top:2px solid var(--br-pop-teal); background: radial-gradient(circle at 92% 0,var(--theme-role-surface-rgba-32-215-207-09-45f344),transparent 32%), var(--theme-role-surface-0e142b); } .battle-stage.has-result .result-head #resultMeta{ border-color:var(--theme-role-border-rgba-32-215-207-42-ca388f); background:var(--theme-role-surface-rgba-32-215-207-08-4eaa78); color:var(--br-pop-teal); } .result-left{ background:linear-gradient(135deg,var(--theme-role-surface-ff3f92),var(--theme-role-surface-c32170)); } .result-right{ background:linear-gradient(135deg,var(--theme-role-surface-6b35db),var(--theme-role-surface-4319a7)); } /* Up Next now reads like the homepage quick-battle rail. */ .up-next{ margin-top:18px !important; } .section-head{ border-color:var(--theme-role-border-353c5c); } .section-head h2{ color:var(--theme-role-text-fff); } .section-head>b{ color:var(--br-pop-teal); } .queue{ gap:10px; } .queue-card{ overflow:hidden; border:1px solid var(--theme-role-border-454d70); border-radius:9px; background:var(--theme-role-surface-151a33); box-shadow:0 7px 18px var(--theme-role-shadow-rgba-0-0-0-18-09884d); } .queue-card:first-child{ border-color:var(--br-pop-teal); box-shadow:0 0 22px var(--theme-role-shadow-rgba-32-215-207-10-5c71a9); } .queue-vs{ border-color:var(--br-pop-teal); background:var(--theme-role-surface-0b1024); } .queue-meta{ color:var(--theme-role-text-9299b3); } .queue-card:first-child .queue-meta b{ color:var(--br-pop-teal); } .feed-principle{ border-color:var(--theme-role-border-444b68); border-radius:8px; background:var(--theme-role-surface-10152b); color:var(--theme-role-text-969db6); } .feed-principle strong{ color:var(--br-pop-teal); } /* Ranking impact celebration: same functionality, new palette. */ .ranking-impact-toast{ border-color:var(--br-pop-teal); border-radius:12px; background: radial-gradient(circle at 90% 0,var(--theme-role-surface-rgba-91-32-200-28-dd5a28),transparent 42%), linear-gradient(135deg,var(--theme-role-surface-151b37),var(--theme-role-surface-090d22) 78%); box-shadow: 0 14px 45px var(--theme-role-shadow-rgba-0-0-0-58-b16608), 6px 6px 0 var(--theme-role-shadow-060918), 0 0 32px var(--theme-role-shadow-rgba-32-215-207-17-909681); } .ranking-impact-kicker{ color:var(--br-pop-teal); } .ranking-impact-shine{ background:linear-gradient( 90deg, transparent, var(--theme-role-surface-rgba-255-255-255-05-44501a), var(--theme-role-surface-rgba-255-255-255-34-5d18da), var(--theme-role-surface-rgba-255-63-146-28-42c99b), var(--theme-role-surface-rgba-32-215-207-20-79004b), transparent ); } /* ================================================================ Mobile remains the stripped-back tap/result/swipe loop. Only presentation changes; no extra modules are introduced. ================================================================ */ @media(max-width:680px){ body{ background:var(--theme-role-surface-080c20); } .brfeed-header{ min-height:64px; padding:9px 12px 8px; border-bottom:1px solid var(--theme-role-border-343b60); } .brfeed-brand strong{ font-size:22px; } .brfeed-brand small{ font-size:8px; } .brfeed-header nav{ padding-top:5px; border-top:1px solid var(--theme-role-border-252b48); } .brfeed-header nav a{ font-size:9px; } .battle-stage{ border:0; border-radius:0; background:var(--theme-role-surface-080c20); } .battle-topline{ min-height:50px; padding:7px 9px 8px; border-top:1px solid var(--theme-role-border-303755); border-bottom:1px solid var(--theme-role-border-303755); background:var(--theme-role-surface-10152d); } .battle-topline strong{ border:0; border-radius:6px; background:var(--br-pop-teal); box-shadow:2px 2px 0 var(--theme-role-shadow-070a1a); color:var(--theme-role-text-101225); } .mobile-ranking-switch{ border-top:0; border-bottom-color:var(--br-pop-teal); background:var(--theme-role-surface-0d1228); } .mobile-ranking-switch .active::after{ background:var(--br-pop-teal); } /* * Existing mobile split remains vertically stacked. * This only replaces the old lime separator colour. */ .battle-side.right{ border-top-color:var(--br-pop-teal); } .battle-copy b{ background:var(--br-pop-pink); } .battle-side.right .battle-copy b{ background:var(--br-pop-purple); } .battle-side.left .mobile-image-result.is-picked{ border-color:var(--theme-role-border-ff73b2); background:linear-gradient(135deg,var(--theme-role-surface-rgba-255-63-146-88-bc979d),var(--theme-role-surface-rgba-142-13-82-85-a6aa0c)); box-shadow:0 8px 28px var(--theme-role-shadow-rgba-0-0-0-46-6ac08d),0 0 24px var(--theme-role-shadow-rgba-255-63-146-17-96f5c0); } .battle-side.right .mobile-image-result.is-picked{ border-color:var(--theme-role-border-a789ff); background:linear-gradient(135deg,var(--theme-role-surface-rgba-91-32-200-91-c45936),var(--theme-role-surface-rgba-47-16-113-88-bf395b)); box-shadow:0 8px 28px var(--theme-role-shadow-rgba-0-0-0-46-6ac08d),0 0 24px var(--theme-role-shadow-rgba-91-32-200-22-518f95); } .mobile-image-result.is-loser-result{ background:var(--theme-role-surface-rgba-8-11-28-80-44a598); } .battle-stage.has-result::after{ border-top-color:var(--theme-role-border-303755); background:var(--theme-role-surface-0c1126); color:var(--br-pop-teal); } .ranking-impact-toast{ border-color:var(--br-pop-teal); } } /* Loading state follows the new accent. */ .feed-loading-dot{ background:var(--br-pop-teal); box-shadow:0 0 13px var(--br-pop-teal); } /* ================================================================ BattleRanker V3.30 — polish pass Compact mobile header + calmer Up Next cards. No battle mechanics or lightning geometry changed. ================================================================ */ /* Desktop queue: slightly calmer, cleaner, less dense. */ @media(min-width:681px){ .up-next{ margin-top:16px !important; } .up-next .section-head{ margin-bottom:10px !important; padding-bottom:8px; } .section-head h2{ font-size:19px; letter-spacing:-.3px; } .section-head small{ color:var(--theme-role-text-858da8); font-size:9px; } .queue{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; } .queue-card{ border-radius:10px; border-color:var(--theme-role-border-3f4768); background:var(--theme-role-surface-13182f); box-shadow:0 6px 14px var(--theme-role-shadow-rgba-0-0-0-16-dc0c50); } .queue-card:hover{ transform:translateY(-2px); border-color:var(--theme-role-border-657097); } .queue-visual{ height:148px; } .queue-copy{ padding:8px 10px 6px; } .queue-copy strong{ font-size:11px; line-height:1.05; } .queue-meta{ padding:0 10px 9px; font-size:8px; line-height:1.15; } .queue-vs{ width:36px; height:36px; font-size:10px; border-width:2px; box-shadow:0 0 0 3px var(--theme-role-shadow-rgba-8-12-29-86-319915); } .feed-principle{ margin-top:16px !important; padding:12px 14px; font-size:10px; } } /* Mobile header: much less dead vertical space before the Battle. */ @media(max-width:680px){ .brfeed-header{ display:grid; grid-template-columns:1fr; gap:0; min-height:0; padding:8px 12px 0; } .brfeed-brand{ min-height:46px; display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:8px; padding-bottom:7px; } .brfeed-brand .crown{ grid-row:1/3; font-size:27px; line-height:1; } .brfeed-brand strong{ font-size:21px; line-height:.88; } .brfeed-brand small{ margin-top:2px; font-size:7px; line-height:1; } .brfeed-header nav{ width:100%; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:0; margin:0; padding:0; border-top:1px solid var(--theme-role-border-252b48); } .brfeed-header nav a{ min-height:37px; display:flex; align-items:center; justify-content:center; padding:0 3px; font-size:8px; line-height:1; text-align:center; white-space:nowrap; } .brfeed-header nav a.active{ position:relative; } .brfeed-header nav a.active::after{ content:""; position:absolute; left:24%; right:24%; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--br-pop-teal); } .battle-topline{ min-height:47px; padding:6px 8px 7px; } .battle-topline strong{ padding:6px 10px; font-size:clamp(16px,4.8vw,22px); line-height:1; } /* Keep the battle itself visually dominant. */ .battle-side{ height:min(34vh,270px); min-height:215px; } .battle-copy{ bottom:13px; } .battle-copy strong{ font-size:clamp(27px,7.6vw,36px); } .vs{ width:68px; height:68px; font-size:25px; border-width:4px; box-shadow: 0 0 0 5px var(--theme-role-shadow-rgba-7-10-24-56-e41154), 0 0 24px var(--theme-role-shadow-rgba-32-215-207-24-2c1996); } } /* Narrow phones: prevent nav labels from feeling cramped. */ @media(max-width:390px){ .brfeed-header{ padding-left:9px; padding-right:9px; } .brfeed-header nav a{ font-size:7.5px; } .brfeed-brand strong{ font-size:20px; } } /* ================================================================ BattleRanker V3.31 — final mobile Battle polish ================================================================ */ @media(max-width:680px){ /* Slightly tighter header so the Battle begins sooner. */ .brfeed-header{ padding-top:6px; } .brfeed-brand{ min-height:40px; padding-bottom:5px; } .brfeed-brand .crown{ font-size:25px; } .brfeed-brand strong{ font-size:20px; } .brfeed-brand small{ font-size:6.5px; margin-top:1px; } .brfeed-header nav a{ min-height:34px; } /* Ranking title reads more like a compact label than a banner. */ .battle-topline{ min-height:44px; padding:5px 8px 6px; } .battle-topline strong{ max-width:88vw; padding:5px 9px; font-size:clamp(15px,4.5vw,20px); border-radius:6px; box-shadow:2px 2px 0 var(--theme-role-shadow-070a1a); } /* Long contender names get a little breathing room. */ .battle-copy{ left:16px; right:16px; } .battle-copy strong{ max-width:96%; font-size:clamp(25px,7.1vw,34px); line-height:.94; letter-spacing:-.035em; overflow-wrap:anywhere; } .battle-side.right .battle-copy strong{ max-width:94%; } } @media(max-width:390px){ .battle-copy strong{ font-size:clamp(24px,6.8vw,32px); } .battle-topline strong{ max-width:92vw; } } /* ================================================================ BattleRanker V3.33 — HYBRID BUZZ PASS New compact layout retained. Old battle energy reintroduced: big desktop intro, pink-vs-blue arena language, selective electric yellow. Mobile stays compact. Lightning geometry is NOT redefined. ================================================================ */ :root{ --br-arena-yellow:var(--theme-arena-electric); --br-arena-pink:var(--theme-battle-left); --br-arena-blue:var(--theme-battle-right); } @media(min-width:681px){ .compact-feed-intro{ min-height:112px !important; margin:8px 0 14px !important; align-items:center !important; } .compact-feed-intro > div:first-child{ display:block !important; min-width:0 !important; } .compact-feed-intro .eyebrow{ display:block !important; margin:0 0 5px !important; color:var(--br-arena-yellow) !important; font-size:9px !important; font-weight:950 !important; letter-spacing:.08em !important; } .compact-feed-intro h1{ margin:0 !important; max-width:760px !important; font-size:clamp(36px,4vw,58px) !important; line-height:.84 !important; letter-spacing:-.05em !important; white-space:normal !important; } .compact-feed-intro h1 .battle-anything-line{ color:var(--theme-role-text-fff) !important; } .compact-feed-intro h1 em{ color:var(--br-arena-yellow) !important; font-style:italic !important; } .compact-feed-intro h1::after{ width:42px !important; height:8px !important; margin-left:13px !important; background:var(--br-arena-pink) !important; } .compact-feed-intro p{ margin:8px 0 0 !important; max-width:560px !important; color:var(--theme-role-text-a5abc2) !important; font-size:10px !important; line-height:1.4 !important; } .compact-feed-intro .mode-tabs{ min-width:340px !important; } .compact-feed-intro .mode-tabs a.active{ border-color:var(--theme-role-border-29ddd6) !important; background:var(--theme-role-surface-29d5d2) !important; color:var(--theme-role-text-101225) !important; } } .battle-stage{ border-color:var(--theme-role-border-4d5576); } .battle-topline strong{ background:var(--br-arena-yellow) !important; color:var(--theme-role-text-101225) !important; } .live-pill{ background:var(--br-arena-pink) !important; color:var(--theme-role-text-fff) !important; } .battle-side.left .battle-copy b{ background:var(--br-arena-pink) !important; color:var(--theme-role-text-090d22) !important; } .battle-side.right .battle-copy b{ background:var(--br-arena-blue) !important; color:var(--theme-role-text-090d22) !important; } .result-left{ background:linear-gradient(135deg,var(--theme-role-surface-ff174d),var(--theme-role-surface-dc0f42)) !important; } .result-right{ background:linear-gradient(135deg,var(--theme-role-surface-1776ff),var(--theme-role-surface-125bd6)) !important; } .battle-side.left .mobile-image-result.is-picked{ border-color:var(--theme-role-border-ff5c7d) !important; background:linear-gradient(135deg,var(--theme-role-surface-rgba-255-23-77-91-3c4138),var(--theme-role-surface-rgba-150-7-45-88-62b164)) !important; } .battle-side.right .mobile-image-result.is-picked{ border-color:var(--theme-role-border-67a8ff) !important; background:linear-gradient(135deg,var(--theme-role-surface-rgba-23-111-255-92-e1b3f1),var(--theme-role-surface-rgba-10-60-160-88-bd6f5f)) !important; } .vs{ border-color:var(--theme-role-border-20d7cf) !important; } .battle-stage.has-result .result-head #resultMeta{ border-color:var(--theme-role-border-rgba-231-255-0-34-9c68c7) !important; background:var(--theme-role-surface-rgba-231-255-0-055-0e4447) !important; color:var(--br-arena-yellow) !important; } .ranking-impact-kicker{ color:var(--br-arena-yellow) !important; } .section-head > div > span{ color:var(--br-arena-yellow) !important; } .queue-card:first-child .queue-meta b{ color:var(--br-arena-yellow) !important; } .queue-card:first-child{ border-color:var(--theme-role-border-20d7cf) !important; } @media(max-width:680px){ .battle-topline strong{ background:var(--theme-role-surface-20d7cf) !important; color:var(--theme-role-text-101225) !important; } .battle-side.left .battle-copy b{ background:var(--br-arena-pink) !important; color:var(--theme-role-text-090d22) !important; } .battle-side.right .battle-copy b{ background:var(--br-arena-blue) !important; color:var(--theme-role-text-090d22) !important; } .battle-side.left .mobile-image-result.is-picked{ border-color:var(--theme-role-border-ff5c7d) !important; background:linear-gradient(135deg,var(--theme-role-surface-rgba-255-23-77-91-3c4138),var(--theme-role-surface-rgba-150-7-45-88-62b164)) !important; } .battle-side.right .mobile-image-result.is-picked{ border-color:var(--theme-role-border-67a8ff) !important; background:linear-gradient(135deg,var(--theme-role-surface-rgba-23-111-255-92-e1b3f1),var(--theme-role-surface-rgba-10-60-160-88-bd6f5f)) !important; } } /* BattleRanker V3.34 — restore yellow desktop Next Battle overlay */ @media(min-width:681px){ .desktop-next-overlay{ border-color:var(--theme-role-border-e7ff00) !important; background:var(--theme-role-surface-e7ff00) !important; color:var(--theme-role-text-101225) !important; box-shadow: 0 6px 0 var(--theme-role-shadow-080b1e), 0 12px 28px var(--theme-role-shadow-rgba-0-0-0-32-78ad00), 0 0 20px var(--theme-role-shadow-rgba-231-255-0-16-856f02) !important; } .desktop-next-overlay:hover{ background:var(--theme-role-surface-f1ff4a) !important; border-color:var(--theme-role-border-f1ff4a) !important; color:var(--theme-role-text-101225) !important; } } /* BattleRanker V3.35 — restore yellow VS circles */ .vs{ border-color:var(--theme-role-border-e7ff00) !important; box-shadow: 0 0 0 7px var(--theme-role-shadow-rgba-7-10-24-60-7ffe82), 0 0 30px var(--theme-role-shadow-rgba-231-255-0-22-cb9295) !important; } .queue-vs{ border-color:var(--theme-role-border-e7ff00) !important; box-shadow:0 0 0 3px var(--theme-role-shadow-rgba-8-12-29-86-319915) !important; } @media(max-width:680px){ .vs{ border-color:var(--theme-role-border-e7ff00) !important; box-shadow: 0 0 0 5px var(--theme-role-shadow-rgba-7-10-24-56-e41154), 0 0 24px var(--theme-role-shadow-rgba-231-255-0-20-f657aa) !important; } } /* BattleRanker V3.36 — yellow Ranking Impact outline */ .ranking-impact-toast{ border-color:var(--theme-role-border-e7ff00) !important; box-shadow: 0 14px 45px var(--theme-role-shadow-rgba-0-0-0-58-b16608), 6px 6px 0 var(--theme-role-shadow-060918), 0 0 32px var(--theme-role-shadow-rgba-231-255-0-16-856f02) !important; } .ranking-impact-kicker{ color:var(--theme-role-text-e7ff00) !important; } /* ================================================================ BattleRanker Theme V1 integration — arena tokens Geometry intentionally untouched. ================================================================ */ .battle-stage{border-color:var(--theme-arena-electric)!important;} .battle-topline strong{background:var(--theme-arena-electric)!important;color:var(--theme-ink)!important;} .live-pill{background:var(--theme-battle-left)!important;} .battle-side.left .battle-copy b{background:var(--theme-battle-left)!important;} .battle-side.right .battle-copy b{background:var(--theme-battle-right)!important;} .result-left{background:var(--theme-battle-left)!important;} .result-right{background:var(--theme-battle-right)!important;} .vs,.queue-vs{border-color:var(--theme-arena-electric)!important;} .desktop-next-overlay{background:var(--theme-arena-electric)!important;border-color:var(--theme-arena-electric)!important;color:var(--theme-ink)!important;} .ranking-impact-toast{border-color:var(--theme-arena-electric)!important;} .ranking-impact-kicker{color:var(--theme-arena-electric)!important;} .section-head>div>span{color:var(--theme-arena-electric)!important;} .queue-card{border-color:var(--theme-arena-electric)!important;} .queue-card:first-child{border-color:var(--theme-arena-electric)!important;} .queue-card:first-child .queue-meta b{color:var(--theme-arena-electric)!important;} @media(max-width:680px){ .battle-topline strong{background:var(--theme-teal)!important;} } \n\n/* ================================================================\n BattleRanker Theme V1.1 — Battle Feed page accent\n Yellow owns arena chrome; pink/blue remain the two contenders.\n ================================================================ */\n.theme-battle-arena .brfeed-brand strong span{\n color:var(--theme-page-accent)!important;\n}\n\n.theme-battle-arena .brfeed-brand .crown{\n color:var(--theme-page-accent)!important;\n}\n\n.theme-battle-arena .brfeed-header nav a.active,\n.theme-battle-arena .brfeed-header nav a:hover{\n color:var(--theme-page-accent)!important;\n}\n\n.theme-battle-arena .compact-feed-intro .eyebrow{\n color:var(--theme-page-accent)!important;\n}\n\n@media(min-width:681px){\n .theme-battle-arena .compact-feed-intro .mode-tabs a.active{\n border-color:var(--theme-page-accent)!important;\n background:var(--theme-page-accent)!important;\n color:var(--theme-ink)!important;\n }\n}\n\n.theme-battle-arena .battle-stage.has-result .result-head #resultMeta,\n.theme-battle-arena .result-head #resultMeta{\n color:var(--theme-page-accent)!important;\n}\n\n.theme-battle-arena .battle-stage.has-result .result-head #resultMeta{\n border-color:var(--theme-raw-rgba-231-255-0-38-dfb955)!important;\n background:var(--theme-raw-rgba-231-255-0-06-6e76e4)!important;\n}\n\n.theme-battle-arena .section-head>b,\n.theme-battle-arena .queue-card:first-child .queue-meta b,\n.theme-battle-arena .feed-principle strong{\n color:var(--theme-page-accent)!important;\n}\n\n.theme-battle-arena .feed-loading-dot{\n background:var(--theme-page-accent)!important;\n box-shadow:0 0 13px var(--theme-page-accent)!important;\n}\n\n/* Keep the mobile ranking title teal: it is structural context, not arena action. */\n@media(max-width:680px){\n .theme-battle-arena .battle-topline strong{\n background:var(--theme-teal)!important;\n }\n}\n /* ================================================================ BattleRanker Theme V1.2 — verified Battle Feed yellow chrome Theme file is now loaded by battle-feed.php before this stylesheet. ================================================================ */ .theme-battle-arena .brfeed-brand .crown, .theme-battle-arena .brfeed-brand strong span{ color:var(--theme-arena-electric) !important; } .theme-battle-arena .brfeed-header nav a.active, .theme-battle-arena .brfeed-header nav a.active:hover{ color:var(--theme-arena-electric) !important; } .theme-battle-arena .compact-feed-intro .eyebrow{ color:var(--theme-arena-electric) !important; } @media(min-width:681px){ .theme-battle-arena .compact-feed-intro .mode-tabs a.active{ border-color:var(--theme-arena-electric) !important; background:var(--theme-arena-electric) !important; color:var(--theme-ink) !important; } } .theme-battle-arena .result-head #resultMeta, .theme-battle-arena .battle-stage.has-result .result-head #resultMeta{ color:var(--theme-arena-electric) !important; } .theme-battle-arena .section-head > b, .theme-battle-arena .feed-principle strong{ color:var(--theme-arena-electric) !important; } .theme-battle-arena .feed-loading-dot{ background:var(--theme-arena-electric) !important; box-shadow:0 0 13px var(--theme-arena-electric) !important; } /* ================================================================ BattleRanker V3.37 — MOBILE YELLOW CONTEXT + OPTIONAL NEXT BUTTON - ranking title returns to Electric Yellow - horizontal contender divider returns to Electric Yellow - retire text-only SWIPE LEFT footer - show an in-flow yellow NEXT button after result Swipe-left remains available as an alternative gesture. Desktop lightning geometry is untouched. ================================================================ */ @media(max-width:680px){ .theme-battle-arena .battle-topline strong{ background:var(--theme-arena-electric) !important; color:var(--theme-ink) !important; } .theme-battle-arena .battle-side.right{ border-top-color:var(--theme-arena-electric) !important; } .theme-battle-arena .battle-stage.has-result::after{ content:none !important; display:none !important; } .theme-battle-arena .mobile-next-overlay{ display:none !important; position:static !important; left:auto !important; right:auto !important; bottom:auto !important; z-index:auto !important; width:calc(100% - 24px) !important; min-height:58px !important; margin:12px auto 14px !important; padding:0 18px !important; align-items:center !important; justify-content:center !important; border:3px solid var(--theme-ink) !important; border-radius:6px !important; background:var(--theme-arena-electric) !important; color:var(--theme-ink) !important; box-shadow:0 5px 0 var(--theme-shadow-deep) !important; opacity:0 !important; pointer-events:none !important; transform:none !important; font-size:20px !important; line-height:1 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:.01em !important; } .theme-battle-arena .mobile-next-overlay::before{ content:none !important; display:none !important; } .theme-battle-arena .mobile-next-overlay.is-visible{ display:flex !important; opacity:1 !important; pointer-events:auto !important; transform:none !important; } .theme-battle-arena .mobile-next-overlay b{ margin-left:8px !important; font-size:24px !important; line-height:1 !important; } body.theme-battle-arena.has-mobile-next{ padding-bottom:0 !important; } } /* ================================================================ BattleRanker V3.38 — RESULT PERCENTAGE COUNT-UP PAYOFF Number animation is driven by JS. The chosen result gets one restrained finishing "hit"; the overlay card geometry is unchanged. ================================================================ */ .mobile-image-result .animated-result-percent{ display:block; transform:scale(1); transform-origin:center center; will-change:transform; } .mobile-image-result .animated-result-percent.percent-hit{ animation:brResultPercentHit .24s cubic-bezier(.2,.9,.25,1); } @keyframes brResultPercentHit{ 0%{transform:scale(1);} 48%{transform:scale(1.10);} 100%{transform:scale(1);} } @media(prefers-reduced-motion:reduce){ .mobile-image-result .animated-result-percent.percent-hit{ animation:none; } } /* ================================================================ BattleRanker V3.39 — MOBILE POST-BATTLE NAV Quiet View List escape + primary Next. Uses the current battle's real ranking_slug from battle-feed-real.js. Desktop lightning/divider geometry is untouched. ================================================================ */ .mobile-post-battle-actions{display:none;} @media(max-width:680px){ .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions{ display:grid; grid-template-columns:1fr; gap:8px; width:calc(100% - 24px); margin:10px auto 13px; } .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions.has-view-list{ grid-template-columns:1fr 1fr; } .theme-battle-arena .mobile-view-list{ display:none; width:100%; min-width:0; min-height:56px; margin:0; padding:0 12px; align-items:center; justify-content:center; border:1px solid var(--theme-role-border-4a526e); border-radius:6px; background:var(--theme-role-surface-151a33); color:var(--theme-role-text-cbd0df); box-shadow:0 4px 0 var(--theme-shadow-deep); text-decoration:none; text-align:center; font-size:15px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:.01em; } .theme-battle-arena .mobile-post-battle-actions.has-view-list .mobile-view-list{display:flex;} .theme-battle-arena .mobile-view-list:active{ background:var(--theme-role-surface-202640); color:var(--theme-role-text-fff); transform:translateY(1px); box-shadow:0 3px 0 var(--theme-shadow-deep); } .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay{ width:100% !important; min-width:0 !important; min-height:56px !important; margin:0 !important; padding:0 12px !important; border-width:2px !important; box-shadow:0 4px 0 var(--theme-shadow-deep) !important; font-size:18px !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay.is-visible{display:flex !important;} .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay b{margin-left:7px !important;font-size:21px !important;} } @media(max-width:390px){ .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions{gap:7px;width:calc(100% - 18px);} .theme-battle-arena .mobile-view-list{font-size:13px;padding:0 8px;} .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay{font-size:17px !important;padding:0 8px !important;} } /* ================================================================ BattleRanker V3.40 — SHARING Sharing UI only. Battle image/lightning/divider geometry untouched. ================================================================ */ .battle-topline-actions{ display:flex; align-items:center; justify-content:flex-end; gap:12px; min-width:0; } .battle-share-trigger{ min-height:34px; padding:0 12px; border:1px solid var(--lime); border-radius:4px; background:transparent; color:var(--lime); font:inherit; font-size:10px; font-style:italic; font-weight:1000; letter-spacing:.04em; cursor:pointer; } .battle-share-trigger:hover{ background:var(--lime); color:var(--theme-role-text-080b0e); } .mobile-share-trigger{display:none;} .battle-share-backdrop{ position:fixed; inset:0; z-index:400; background:var(--theme-role-surface-rgba-0-0-0-72-551182); backdrop-filter:blur(3px); } .battle-share-dialog{ position:fixed; left:50%; top:50%; z-index:410; width:min(520px,calc(100% - 28px)); padding:28px; transform:translate(-50%,-50%); border:2px solid var(--lime); border-radius:10px; background:var(--theme-role-surface-0b0f12); color:var(--theme-role-text-fff); box-shadow:0 18px 70px var(--theme-role-shadow-rgba-0-0-0-7-a6668f), 7px 7px 0 var(--theme-role-shadow-000); } .battle-share-dialog[hidden], .battle-share-backdrop[hidden]{display:none!important;} .battle-share-close{ position:absolute; top:10px; right:12px; width:36px; height:36px; border:0; background:transparent; color:var(--theme-role-text-cbd0df); font-size:30px; line-height:1; cursor:pointer; } .battle-share-kicker{ display:block; margin-bottom:8px; color:var(--lime); font-size:12px; font-style:italic; font-weight:1000; letter-spacing:.07em; } .battle-share-dialog h2{ margin:0 42px 12px 0; font-size:clamp(28px,5vw,42px); line-height:.95; font-style:italic; } .battle-share-dialog p{ display:grid; gap:5px; margin:0 0 18px; color:var(--theme-role-text-cbd0df); line-height:1.35; } .battle-share-dialog p strong{ color:var(--theme-role-text-fff); font-size:17px; } .battle-share-dialog p span{font-size:14px;} .battle-share-scope{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:12px; } .battle-share-scope button, .battle-share-actions button, .battle-share-actions a{ display:flex; align-items:center; justify-content:center; min-height:46px; padding:0 12px; border:1px solid var(--theme-role-border-4a526e); border-radius:5px; background:var(--theme-role-surface-151a33); color:var(--theme-role-text-fff); text-decoration:none; text-align:center; font:inherit; font-size:12px; font-style:italic; font-weight:1000; cursor:pointer; } .battle-share-scope button.is-active{ border-color:var(--lime); background:var(--lime); color:var(--theme-role-text-080b0e); } .battle-share-actions{ display:grid; grid-template-columns:1fr 1fr; gap:7px; } .battle-share-actions .share-native{ grid-column:1/-1; border-color:var(--lime); background:var(--lime); color:var(--theme-role-text-080b0e); font-size:15px; } .battle-share-status{ display:block; min-height:18px; margin-top:10px; color:var(--lime); text-align:center; font-size:12px; font-weight:1000; } body.share-dialog-open{overflow:hidden;} @media(max-width:680px){ .battle-topline-actions{display:none;} .mobile-ranking-switch.is-available{ grid-template-columns:1fr 1fr 1fr; } .mobile-ranking-switch.has-share-only{ display:grid; grid-template-columns:1fr 1fr; } .mobile-ranking-switch .mobile-share-trigger{ position:relative; display:flex; align-items:center; justify-content:center; min-height:44px; padding:0; border:0; border-left:1px solid var(--theme-role-border-30363b); background:transparent; color:var(--lime); font:inherit; font-size:13px; font-weight:900; font-style:italic; letter-spacing:.45px; cursor:pointer; } .battle-share-dialog{ width:calc(100% - 20px); padding:23px 18px 18px; } .battle-share-actions{ grid-template-columns:1fr 1fr; } } /* ================================================================ BattleRanker V3.41 — MOBILE PINNED NEXT LIST now lives in the top LIST / BATTLE / SHARE switch, so the duplicate post-battle View List control is removed. After results, NEXT is pinned to the bottom of the mobile viewport for easy reach. Battle image/lightning/divider geometry is untouched. ================================================================ */ @media(max-width:680px){ .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions, .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions.has-view-list{ display:block; width:0; height:0; margin:0; padding:0; } .theme-battle-arena .mobile-view-list{ display:none !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay{ display:flex !important; position:fixed !important; left:12px !important; right:12px !important; bottom:max(12px,env(safe-area-inset-bottom)) !important; z-index:350 !important; width:auto !important; min-width:0 !important; min-height:56px !important; margin:0 !important; padding:0 16px !important; align-items:center; justify-content:center; border:2px solid var(--theme-role-border-080b0e) !important; border-radius:6px; background:var(--lime) !important; color:var(--theme-role-text-080b0e) !important; box-shadow:0 5px 0 var(--theme-role-shadow-000),0 10px 26px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f) !important; opacity:0; pointer-events:none; transform:translateY(16px); transition:opacity .18s ease,transform .18s ease; font-size:18px !important; font-style:italic; font-weight:1000; } .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay::before{ content:none !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay.is-visible{ display:flex !important; opacity:1; pointer-events:auto; transform:translateY(0); } body.has-mobile-next{ padding-bottom:80px !important; } } /* V3.42 — mobile pinned NEXT colour correction */ @media(max-width:680px){ .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay, .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay.is-visible{ background:var(--theme-arena-electric) !important; background-color:var(--theme-arena-electric) !important; color:var(--theme-ink) !important; border-color:var(--theme-ink) !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay b, .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay span{ color:var(--theme-ink) !important; } } /* BattleRanker mobile battle actions — LIST | SHARE | SKIP BATTLE is deliberately omitted because the user is already on the battle view. */ @media(max-width:680px){ .mobile-ranking-switch.is-available{ grid-template-columns:1fr 1fr 1fr; } .mobile-ranking-switch.has-share-only{ display:grid; grid-template-columns:1fr 1fr; } .mobile-ranking-switch .mobile-share-trigger, .mobile-ranking-switch .mobile-skip-trigger{ position:relative; display:flex; align-items:center; justify-content:center; min-height:44px; padding:0; border:0; background:transparent; font:inherit; font-size:13px; font-weight:900; font-style:italic; letter-spacing:.45px; cursor:pointer; } .mobile-ranking-switch .mobile-share-trigger{ border-left:1px solid var(--theme-role-border-30363b); color:var(--lime); } .mobile-ranking-switch .mobile-skip-trigger{ border-left:1px solid var(--theme-role-border-30363b); color:var(--theme-role-text-c9cdd0); } .mobile-ranking-switch .mobile-skip-trigger:active:not(:disabled){ background:var(--theme-role-surface-141a1e); } .mobile-ranking-switch .mobile-skip-trigger:disabled{ opacity:.32; cursor:default; } } /* BattleRanker desktop battle utilities — ranking / share / skip */ .desktop-skip-trigger{ min-height:34px; padding:0 12px; border:1px solid var(--theme-role-border-59616b); border-radius:4px; background:transparent; color:var(--theme-role-text-c7cdd2); font:inherit; font-size:10px; font-style:italic; font-weight:1000; letter-spacing:.04em; cursor:pointer; } .desktop-skip-trigger:hover:not(:disabled){ border-color:var(--theme-role-border-fff); background:var(--theme-role-surface-171d24); color:var(--theme-role-text-fff); } .desktop-skip-trigger:disabled{ opacity:.28; cursor:default; } @media(max-width:680px){ .desktop-skip-trigger{ display:none; } } /* Desktop hero heading: keep "PICK A SIDE." together on one line. The markup already breaks before the ; prevent it from wrapping internally. */ .brfeed-top h1 em{ display:inline-block; white-space:nowrap; } @media(max-width:680px){ .brfeed-top h1 em{ display:inline; white-space:normal; } } /* ================================================================ BattleRanker V3.43 — QUICK 10 RUN COUNTER Pure overlay: contender image and lightning/divider geometry untouched. ================================================================ */ .battle-run-counter{ position:absolute; z-index:45; top:16px; left:16px; min-width:118px; padding:9px 11px 8px; border:2px solid var(--theme-arena-electric); border-radius:7px; background:var(--theme-role-surface-rgba-7-10-24-84-5c6fce); color:var(--theme-role-text-fff); box-shadow:0 6px 18px var(--theme-role-shadow-rgba-0-0-0-32-78ad00); pointer-events:none; text-align:left; backdrop-filter:blur(3px); } .battle-run-counter[hidden]{display:none!important;} .battle-run-counter small{ display:block; margin-bottom:3px; color:var(--theme-arena-electric); font-size:8px; line-height:1; font-weight:1000; letter-spacing:.10em; } .battle-run-counter strong{ display:block; color:var(--theme-role-text-fff); font-size:15px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:.02em; } @media(max-width:680px){ .battle-run-counter{ top:10px; left:10px; min-width:102px; padding:7px 9px 7px; border-width:1px; border-radius:6px; } .battle-run-counter small{font-size:7px;} .battle-run-counter strong{font-size:13px;} } /* ================================================================ BattleRanker V3.44 — PER-ENTRY BATTLE CROP ON DESKTOP + MOBILE The crop saved on Edit Ranking now controls the actual contender photography at every viewport size. Lightning/divider geometry is untouched. ================================================================ */ .battle-image-wrap.has-entry-battle-bg{ background-image: linear-gradient(var(--theme-role-surface-rgba-5-7-13-42-579bb8),var(--theme-role-surface-rgba-5-7-13-42-579bb8)), var(--entry-battle-bg); background-size:cover; background-position:var(--entry-focus-x,50%) var(--entry-focus-y,50%); background-repeat:no-repeat; } .battle-side img.has-entry-battle-crop{ object-fit:contain !important; object-position:center center !important; transform: translate( var(--entry-translate-x,0%), var(--entry-translate-y,0%) ) scale(var(--entry-battle-scale,1)) !important; transform-origin:center center !important; } .battle-side.picked img.has-entry-battle-crop{ transform: translate( var(--entry-translate-x,0%), var(--entry-translate-y,0%) ) scale(calc(var(--entry-battle-scale,1) * 1.045)) !important; } /* The saved focus is now meaningful on desktop too, especially for portrait source images where normal centered cover can cut off heads/faces. */ @media(min-width:681px){ .battle-side img.has-entry-battle-crop{ transition:transform .23s ease,filter .23s ease; } .battle-side:hover img.has-entry-battle-crop{ transform: translate( var(--entry-translate-x,0%), var(--entry-translate-y,0%) ) scale(calc(var(--entry-battle-scale,1) * 1.035)) !important; } .battle-side.picked:hover img.has-entry-battle-crop{ transform: translate( var(--entry-translate-x,0%), var(--entry-translate-y,0%) ) scale(calc(var(--entry-battle-scale,1) * 1.045)) !important; } } /* ================================================================ BattleRanker V3.45 — TEXT-ONLY BATTLE PRESENTATION If a contender has no image, make the absence feel intentional: hide the giant initial fallback and centre the contender name. Image-backed battles are completely unchanged. ================================================================ */ .battle-side.no-image .image-fallback{ display:none !important; } .battle-side.no-image .battle-image-wrap{ background: radial-gradient(circle at 50% 38%, var(--theme-role-surface-rgba-255-255-255-045-53fc29), transparent 32%), linear-gradient(180deg, var(--theme-role-surface-111721) 0%, var(--theme-role-surface-090d13) 100%); } .battle-side.no-image .shade{ background: linear-gradient(180deg, var(--theme-role-surface-rgba-0-0-0-04-c26f5d) 0%, var(--theme-role-surface-rgba-0-0-0-20-d5b06a) 100%); } .battle-side.no-image .battle-copy, .battle-side.right.no-image .battle-copy{ top:50%; bottom:auto; left:38px; right:38px; transform:translateY(-42%); align-items:center; justify-content:center; text-align:center; } .battle-side.no-image .battle-copy small{ max-width:100%; min-height:0; margin:0 0 10px; color:var(--theme-role-text-rgba-255-255-255-68-db1dbe); font-size:12px; line-height:1.1; letter-spacing:.02em; text-align:center; } .battle-side.no-image .battle-copy strong, .battle-side.right.no-image .battle-copy strong{ max-width:92%; margin:0; color:var(--theme-role-text-fff); font-size:clamp(34px,3.7vw,54px); line-height:1.02; font-style:normal; font-weight:900; letter-spacing:-.035em; text-transform:none; text-align:center; text-shadow:0 4px 16px var(--theme-role-shadow-rgba-0-0-0-65-f5e8b4); overflow-wrap:normal; word-break:normal; } .battle-side.no-image .battle-copy b, .battle-side.right.no-image .battle-copy b{ margin-top:18px; } @media(max-width:680px){ .battle-side.no-image .battle-copy, .battle-side.right.no-image .battle-copy{ top:50%; bottom:auto; left:20px; right:20px; transform:translateY(-44%); } .battle-side.no-image .battle-copy small{ margin-bottom:8px; font-size:10px; } .battle-side.no-image .battle-copy strong, .battle-side.right.no-image .battle-copy strong{ max-width:94%; font-size:clamp(27px,8vw,38px); line-height:1.04; letter-spacing:-.025em; } .battle-side.no-image .battle-copy b, .battle-side.right.no-image .battle-copy b{ margin-top:13px; } } /* ================================================================ BattleRanker V3.46 — TEXT-ONLY UP NEXT CARDS Text-only contenders use their actual names instead of oversized fallback initials. Image-backed queue cards are unchanged. ================================================================ */ .queue-fallback.queue-fallback-text{ box-sizing:border-box; padding:20px 18px; background: radial-gradient(circle at 50% 42%, var(--theme-role-surface-rgba-255-255-255-055-ca2d2f), transparent 38%), linear-gradient(180deg,var(--theme-role-surface-151b25) 0%,var(--theme-role-surface-0d1118) 100%); color:var(--theme-role-text-f7f8fb); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:18px; line-height:1.02; font-weight:900; font-style:normal; letter-spacing:-.025em; text-align:center; text-transform:none; overflow-wrap:normal; word-break:normal; } .queue-card:has(.queue-fallback-text) .queue-copy strong{ text-transform:none; font-size:11px; line-height:1.08; } @media(min-width:681px){ .queue-card:has(.queue-fallback-text) .queue-visual{ height:126px; } .queue-card:has(.queue-fallback-text) .queue-vs{ width:32px; height:32px; font-size:9px; } } @media(max-width:680px){ .queue-fallback.queue-fallback-text{ padding:18px 14px; font-size:17px; } .queue-card:has(.queue-fallback-text) .queue-copy strong{ font-size:11px; } } /* ================================================================ BattleRanker V3.47 — SIMPLER TEXT-ONLY UP NEXT CARDS For text-only queue cards, show the two names once inside the dark visual area and remove the duplicate lower copy/meta strip. ================================================================ */ .queue-card.is-text-only{ background:linear-gradient(180deg,var(--theme-role-surface-131923) 0%,var(--theme-role-surface-0d1118) 100%); } .queue-card.is-text-only .queue-visual{ height:168px; } .queue-card.is-text-only .queue-copy, .queue-card.is-text-only .queue-meta{ display:none !important; } .queue-card.is-text-only .queue-fallback.queue-fallback-text{ padding:20px 16px; font-size:19px; } @media(max-width:680px){ .queue-card.is-text-only .queue-visual{ height:174px; } .queue-card.is-text-only .queue-fallback.queue-fallback-text{ padding:18px 14px; font-size:18px; } } /* ================================================================ BattleRanker Battle Feed — desktop mode sticker + floating +1 hit ================================================================ */ /* Desktop mode sticker: explicit and unclipped. */ @media(min-width:681px){ .desktop-mode-sticker-row{ position:relative; z-index:40; height:0; overflow:visible; pointer-events:none; } .desktop-mode-sticker{ position:absolute; left:50%; top:0; z-index:41; display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:0 16px; border:2px solid var(--theme-ink); border-radius:10px; background:var(--theme-page-accent); color:var(--theme-ink); box-shadow:0 5px 0 var(--theme-role-shadow-rgba-0-0-0-30-6d79cf); font-size:13px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:.03em; text-transform:uppercase; transform:translate(-50%,-50%) rotate(-4deg); white-space:nowrap; } } @media(max-width:680px){ .desktop-mode-sticker-row, .desktop-mode-sticker{ display:none !important; } } /* ================================================================ BattleRanker V3.48 — OPTIONAL BATTLE TITLE / SUBTITLE Short Battle headlines can be supplied per item without changing the canonical ranking name. Desktop subtitle sits quietly under the headline. Mobile keeps the existing stripped-back loop and therefore hides context. Lightning/divider geometry is untouched. ================================================================ */ @media(min-width:681px){ .battle-copy strong{order:1;} .battle-copy small{ order:2; margin-top:8px; min-height:0; color:var(--theme-role-text-rgba-255-255-255-78-556568); font-size:12px; line-height:1.12; font-weight:900; letter-spacing:.015em; } .battle-copy b{order:3;} } /* ================================================================ BattleRanker V3.49 — CLEAN DESKTOP BATTLE FEED Desktop only. Mobile Battle loop is intentionally untouched. - mode feedback above arena - no utility clutter in arena top-right - ranking/share/skip centred beneath arena - endless-mode escape to live ranking result Lightning/divider and contender image geometry are untouched. ================================================================ */ .desktop-battle-modes, .desktop-battle-utilities{ display:none; } @media(min-width:681px){ .brfeed-shell{ padding-top:12px !important; } /* Simple, high-visibility mode feedback matching the rough PC mock. */ .desktop-battle-modes{ min-height:54px; margin:0 0 10px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--theme-role-text-fff); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:29px; line-height:1; font-style:italic; font-weight:950; letter-spacing:-.025em; } .desktop-battle-modes a, .desktop-battle-modes > span:not(.desktop-mode-divider){ position:relative; display:inline-flex; align-items:center; min-height:42px; padding:0 3px 5px; color:var(--theme-role-text-rgba-255-255-255-93-defe99); text-decoration:none; white-space:nowrap; transition:color .15s ease,opacity .15s ease; } .desktop-battle-modes a:hover{ color:var(--theme-role-text-fff); } .desktop-battle-modes a.active{ color:var(--theme-role-text-fff); } .desktop-battle-modes a.active::after{ content:""; position:absolute; left:4%; right:4%; bottom:0; height:3px; border-radius:4px; background:var(--theme-arena-electric); box-shadow:0 0 14px var(--theme-role-shadow-rgba-231-255-0-26-32570e); } .desktop-battle-modes .desktop-mode-divider{ color:var(--theme-role-text-rgba-255-255-255-72-e6c6f1); font-style:normal; font-weight:700; } .desktop-battle-modes .desktop-mode-coming{ gap:7px; opacity:.48; cursor:default; } .desktop-battle-modes .desktop-mode-coming small{ position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); color:var(--theme-arena-electric); font-family:Arial,Helvetica,sans-serif; font-size:7px; line-height:1; font-style:normal; font-weight:1000; letter-spacing:.12em; } .desktop-battle-modes a.is-unavailable{ opacity:.5; } /* Keep ranking title centered without the old action cluster. */ .battle-topline{ grid-template-columns:1fr minmax(300px,auto) 1fr !important; } .desktop-topline-spacer{ display:block; min-width:1px; } /* New quiet utility area — text stays large instead of becoming tiny buttons. */ .desktop-battle-utilities{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; margin:10px 0 2px; padding:0 10px; } .desktop-battle-utilities-main{ display:flex; align-items:center; justify-content:center; gap:27px; flex-wrap:wrap; } .desktop-battle-utilities a, .desktop-battle-utilities button{ min-width:0; min-height:0; margin:0; padding:4px 0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--theme-role-text-fff); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:19px; line-height:1.05; font-style:italic; font-weight:950; letter-spacing:-.015em; text-decoration:none; text-transform:none; cursor:pointer; transform:none; opacity:.92; } .desktop-battle-utilities a:hover, .desktop-battle-utilities button:hover:not(:disabled){ background:none; color:var(--theme-arena-electric); border:0; } .desktop-battle-utilities button:disabled{ opacity:.32; cursor:default; } .desktop-battle-utilities .desktop-share-text{ color:var(--theme-role-text-fff); font-size:19px; letter-spacing:.015em; } .desktop-battle-utilities .desktop-skip-text{ color:var(--theme-role-text-fff); font-size:19px; } .desktop-results-escape{ color:var(--theme-role-text-fff) !important; font-size:18px !important; text-decoration:underline !important; text-decoration-thickness:1px !important; text-underline-offset:5px !important; opacity:.9 !important; } .desktop-results-escape:hover{ color:var(--theme-arena-electric) !important; } .desktop-results-escape[hidden]{ display:none !important; } /* New mode bar makes the old floating BATTLE/QUICK10 sticker redundant. */ .desktop-mode-sticker-row, .desktop-mode-sticker{ display:none !important; } /* Keep Up Next close, like the mock. */ .up-next{ margin-top:12px !important; } } @media(max-width:680px){ .desktop-battle-modes, .desktop-battle-utilities, .desktop-topline-spacer{ display:none !important; } } /* ================================================================ BattleRanker V3.50 — MOBILE BATTLE OPTIONS LIGHTNING No extra row / no extra vertical height. LIST | SHARE | SKIP | ⚡ stays in the existing mobile action strip. The lightning opens a fixed bottom sheet over the page. Desktop and battle-image/lightning geometry are untouched. ================================================================ */ .mobile-battle-options-trigger, .mobile-battle-options-backdrop, .mobile-battle-options-sheet{ display:none; } @media(max-width:680px){ /* Four equal slots in the SAME existing row. */ .mobile-ranking-switch.is-available{ grid-template-columns:repeat(4,1fr) !important; } /* * Wild/no-list state still gets SHARE | SKIP | ⚡ rather than creating * a second row. LIST remains hidden as before. */ .mobile-ranking-switch.has-share-only{ display:grid; grid-template-columns:repeat(3,1fr) !important; } .mobile-battle-options-trigger{ position:relative; display:flex; align-items:center; justify-content:center; min-height:44px; padding:0; border:0; border-left:1px solid var(--theme-role-border-30363b); background:transparent; color:var(--theme-orange,var(--theme-role-text-ff8b2b)); font:inherit; cursor:pointer; } .mobile-battle-options-trigger span{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--theme-role-border-rgba-255-255-255-16-ae5def); border-radius:6px; background:var(--theme-role-surface-rgba-255-255-255-025-40fa64); font-size:26px; line-height:1; filter:drop-shadow(0 2px 5px var(--theme-role-shadow-rgba-0-0-0-28-ca0b96)); } .mobile-battle-options-trigger:active span{ transform:translateY(1px); border-color:var(--theme-arena-electric); } .mobile-battle-options-backdrop{ display:block; position:fixed; inset:0; z-index:620; background:var(--theme-role-surface-rgba-0-0-0-68-b6899b); opacity:0; pointer-events:none; transition:opacity .18s ease; backdrop-filter:blur(2px); } .mobile-battle-options-backdrop[hidden], .mobile-battle-options-sheet[hidden]{ display:none !important; } .mobile-battle-options-backdrop.is-open{ opacity:1; pointer-events:auto; } .mobile-battle-options-sheet{ display:block; position:fixed; z-index:630; left:10px; right:10px; bottom:max(10px,env(safe-area-inset-bottom)); max-height:min(78vh,620px); overflow:auto; padding:18px 14px 14px; border:2px solid var(--theme-arena-electric); border-radius:14px; background: radial-gradient(circle at 92% 0,var(--theme-role-surface-rgba-231-255-0-06-6e76e4),transparent 30%), var(--theme-role-surface-0d132b); color:var(--theme-role-text-fff); box-shadow:0 22px 70px var(--theme-role-shadow-rgba-0-0-0-68-b6899b); opacity:0; pointer-events:none; transform:translateY(calc(100% + 24px)); transition:opacity .18s ease,transform .22s cubic-bezier(.2,.82,.2,1); } .mobile-battle-options-sheet.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); } .mobile-battle-options-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:2px 4px 13px; border-bottom:1px solid var(--theme-role-border-323a59); } .mobile-battle-options-head span{ display:block; margin-bottom:5px; color:var(--theme-arena-electric); font-size:9px; line-height:1; font-weight:1000; letter-spacing:.10em; } .mobile-battle-options-head strong{ display:block; color:var(--theme-role-text-fff); font-size:25px; line-height:.95; font-style:italic; font-weight:1000; } .mobile-battle-options-head button{ flex:0 0 38px; width:38px; height:38px; border:1px solid var(--theme-role-border-47506f); border-radius:7px; background:var(--theme-role-surface-151b35); color:var(--theme-role-text-fff); font-size:27px; line-height:1; cursor:pointer; } .mobile-battle-options-list{ display:grid; gap:8px; padding-top:12px; } .mobile-battle-options-list > a, .mobile-battle-options-list > span{ position:relative; display:flex; min-height:68px; flex-direction:column; justify-content:center; padding:11px 48px 11px 14px; border:1px solid var(--theme-role-border-3e4667); border-radius:9px; background:var(--theme-role-surface-151b34); color:var(--theme-role-text-fff); text-decoration:none; } .mobile-battle-options-list > a::after{ content:"→"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--theme-arena-electric); font-size:20px; font-weight:1000; } .mobile-battle-options-list > a.primary{ border-color:var(--theme-arena-electric); background:linear-gradient(135deg,var(--theme-role-surface-rgba-231-255-0-10-7c0c34),var(--theme-role-surface-151b34) 72%); } .mobile-battle-options-list strong{ display:block; color:var(--theme-role-text-fff); font-size:16px; line-height:1; font-style:italic; font-weight:1000; } .mobile-battle-options-list small{ display:block; margin-top:5px; color:var(--theme-role-text-929bb7); font-size:10px; line-height:1.2; font-weight:800; } .mobile-battle-options-list .is-disabled{ opacity:.42; } .mobile-battle-options-list .is-disabled::after{ content:"SOON"; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--theme-arena-electric); font-size:8px; font-weight:1000; letter-spacing:.09em; } body.mobile-battle-options-open{ overflow:hidden; } } @media(max-width:390px){ .mobile-battle-options-trigger span{ width:32px; height:32px; font-size:23px; } .mobile-battle-options-sheet{ left:7px; right:7px; bottom:max(7px,env(safe-area-inset-bottom)); } } @media(prefers-reduced-motion:reduce){ .mobile-battle-options-backdrop, .mobile-battle-options-sheet{ transition:none; } } /* ================================================================ BattleRanker V3.51 — DESKTOP TOPIC PICKER Lives inside the existing mode row, so it adds no vertical height. Battle arena / contender / lightning geometry is untouched. ================================================================ */ @media(min-width:681px){ .desktop-battle-modes{ position:relative; justify-content:flex-start; padding-right:220px; } .desktop-topic-picker{ position:absolute; right:0; top:50%; z-index:90; transform:translateY(-50%); font-family:Arial,Helvetica,sans-serif; font-style:normal; } .desktop-topic-trigger{ min-height:42px; display:inline-flex; align-items:center; gap:6px; padding:0 9px; border:0; background:transparent; color:var(--theme-role-text-c5cad6); cursor:pointer; white-space:nowrap; font:inherit; font-size:15px; line-height:1; font-weight:900; } .desktop-topic-trigger span{ color:var(--theme-role-text-aeb5c4); } .desktop-topic-trigger strong{ color:var(--theme-role-text-fff); font-size:15px; font-weight:1000; } .desktop-topic-trigger i{ margin-left:2px; color:var(--theme-arena-electric); font-size:12px; font-style:normal; transition:transform .15s ease; } .desktop-topic-trigger[aria-expanded="true"] i{ transform:rotate(180deg); } .desktop-topic-trigger:hover strong, .desktop-topic-trigger:hover i{ color:var(--theme-arena-electric); } .desktop-topic-menu{ position:absolute; right:0; top:calc(100% + 5px); width:220px; max-height:360px; overflow:auto; padding:7px; border:1px solid var(--theme-role-border-46506d); border-radius:9px; background:var(--theme-role-surface-10162d); box-shadow:0 16px 38px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f); } .desktop-topic-menu[hidden]{ display:none !important; } .desktop-topic-menu a{ min-height:38px; display:flex; align-items:center; padding:0 11px; border-radius:6px; color:var(--theme-role-text-d6dbe8); text-decoration:none; font-size:11px; font-style:normal; font-weight:950; letter-spacing:.02em; } .desktop-topic-menu a:hover{ background:var(--theme-role-surface-1a213d); color:var(--theme-role-text-fff); } .desktop-topic-menu a.active{ background:var(--theme-role-surface-rgba-231-255-0-09-1b8c34); color:var(--theme-arena-electric); } } @media(max-width:900px) and (min-width:681px){ .desktop-battle-modes{ padding-right:175px; font-size:24px; gap:7px; } .desktop-topic-trigger, .desktop-topic-trigger strong{ font-size:13px; } .desktop-topic-menu{ width:195px; } } @media(max-width:680px){ .desktop-topic-picker{ display:none !important; } } /* ================================================================ BattleRanker V3.52 — PRE-VOTE RESULT STRIP TEXT POSITION Swap only the two pre-vote text positions. Their existing typography/colour styles are untouched. Post-vote layout remains unchanged, so "YOU PICKED …" stays right. ================================================================ */ @media(min-width:681px){ .battle-stage:not(.has-result) .result-head #resultMeta{ order:1; } .battle-stage:not(.has-result) .result-head #resultMessage{ order:2; } } /* ================================================================ BattleRanker V3.53 — CENTRE DESKTOP GAME MODES Battle / Quick 10 / Find Winner sit in the true middle of the row. Topic remains anchored on the right. Mobile is untouched. ================================================================ */ @media(min-width:681px){ .desktop-battle-modes{ justify-content:center !important; padding-left:220px !important; padding-right:220px !important; } } @media(max-width:900px) and (min-width:681px){ .desktop-battle-modes{ padding-left:175px !important; padding-right:175px !important; } } /* ================================================================ BattleRanker V3.54 — QUIETER "YOU PICKED" MESSAGE Remove the yellow badge treatment so it cannot be mistaken for Next. ================================================================ */ @media(min-width:681px){ .battle-stage.has-result .result-head #resultMeta{ display:inline !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--theme-role-text-f4f6fb) !important; box-shadow:none !important; font-size:12px !important; font-weight:800 !important; letter-spacing:0 !important; } } /* ================================================================ BattleRanker V3.55 — END-OF-FEED COMPLETION PANEL A feed ending should feel deliberate, not like loading has stalled. Uses the existing result window and offers obvious next actions. ================================================================ */ .battle-feed-ended{ display:none; } .battle-feed-ended[hidden]{ display:none !important; } @media(min-width:681px){ .battle-stage.feed-ended .result-head, .battle-stage.feed-ended .result-bar, .battle-stage.feed-ended .vote-counts{ display:none !important; } .battle-stage.feed-ended .battle-result{ padding:0 !important; border-top:3px solid var(--theme-arena-electric) !important; background:var(--theme-role-surface-0d1328) !important; } .battle-stage.feed-ended .battle-feed-ended{ display:flex; min-height:190px; padding:28px 26px 25px; flex-direction:column; align-items:center; justify-content:center; text-align:center; background: radial-gradient(circle at 50% 0,var(--theme-role-surface-rgba-231-255-0-08-1625d1),transparent 46%), var(--theme-role-surface-0d1328); } .battle-feed-ended-kicker{ margin-bottom:8px; color:var(--theme-arena-electric); font-size:10px; line-height:1; font-weight:1000; letter-spacing:.11em; } .battle-feed-ended > strong{ color:var(--theme-role-text-fff); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:32px; line-height:.95; font-style:italic; font-weight:1000; letter-spacing:-.025em; } .battle-feed-ended > p{ max-width:650px; margin:10px 0 20px; color:var(--theme-role-text-aeb6ca); font-size:13px; line-height:1.35; font-weight:700; } .battle-feed-ended-actions{ display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; } .battle-feed-ended-actions a{ min-height:46px; display:flex; align-items:center; justify-content:center; padding:0 18px; border:1px solid var(--theme-role-border-46506d); border-radius:7px; background:var(--theme-role-surface-151b35); color:var(--theme-role-text-f4f6fb); text-decoration:none; font-size:11px; line-height:1; font-weight:1000; text-transform:uppercase; } .battle-feed-ended-actions a:hover{ border-color:var(--theme-role-border-707c9f); background:var(--theme-role-surface-202846); color:var(--theme-role-text-fff); } .battle-feed-ended-actions a.primary{ border-color:var(--theme-arena-electric); background:var(--theme-arena-electric); color:var(--theme-ink); } .battle-feed-ended-actions a.primary:hover{ background:var(--theme-role-surface-f1ff4a); color:var(--theme-ink); } } /* Mobile gets the same deliberate stop state beneath the contenders. */ @media(max-width:680px){ .battle-stage.feed-ended .battle-result{ display:block !important; padding:0 !important; border-top:3px solid var(--theme-arena-electric) !important; background:var(--theme-role-surface-0d1328) !important; } .battle-stage.feed-ended .result-head, .battle-stage.feed-ended .result-bar, .battle-stage.feed-ended .vote-counts{ display:none !important; } .battle-stage.feed-ended .battle-feed-ended{ display:flex; padding:22px 15px 20px; flex-direction:column; align-items:center; text-align:center; } .battle-feed-ended-kicker{ margin-bottom:7px; color:var(--theme-arena-electric); font-size:9px; font-weight:1000; letter-spacing:.09em; } .battle-feed-ended > strong{ color:var(--theme-role-text-fff); font-size:25px; line-height:.98; font-style:italic; font-weight:1000; } .battle-feed-ended > p{ margin:9px 0 15px; color:var(--theme-role-text-aeb6ca); font-size:11px; line-height:1.35; } .battle-feed-ended-actions{ display:grid; width:100%; gap:8px; } .battle-feed-ended-actions a{ min-height:48px; display:flex; align-items:center; justify-content:center; border:1px solid var(--theme-role-border-46506d); border-radius:7px; background:var(--theme-role-surface-151b35); color:var(--theme-role-text-fff); text-decoration:none; font-size:11px; font-weight:1000; } .battle-feed-ended-actions a.primary{ border-color:var(--theme-arena-electric); background:var(--theme-arena-electric); color:var(--theme-ink); } .battle-stage.feed-ended .mobile-post-battle-actions{ display:none !important; } body.has-mobile-next{ padding-bottom:0 !important; } } /* ================================================================ BattleRanker V3.56 — COMPLETION PANEL / RESULTS FAMILY ALIGNMENT Mirrors the established Session Results language: dark navy surface, yellow kicker, oversized italic white headline, restrained copy, yellow primary action. ================================================================ */ @media(min-width:681px){ .battle-stage.feed-ended .battle-feed-ended{ position:relative; overflow:hidden; min-height:220px; padding:32px 30px 28px; border-radius:0; background: radial-gradient(circle at 15% 0,var(--theme-role-surface-rgba-88-39-190-13-042557),transparent 280px), radial-gradient(circle at 88% 10%,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 250px), linear-gradient(135deg,var(--theme-role-surface-121832),var(--theme-role-surface-0a0f24) 72%) !important; } .battle-stage.feed-ended .battle-feed-ended::after{ content:"VS"; position:absolute; right:24px; top:50%; transform:translateY(-50%) rotate(-8deg); color:var(--theme-role-text-rgba-231-255-0-045-5d766f); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:150px; line-height:.8; font-style:italic; font-weight:1000; pointer-events:none; } .battle-feed-ended-kicker, .battle-feed-ended > strong, .battle-feed-ended > p, .battle-feed-ended-actions{ position:relative; z-index:2; } .battle-feed-ended-kicker{ font-size:11px; } .battle-feed-ended > strong{ font-size:clamp(34px,3.4vw,48px); letter-spacing:-.04em; } .battle-feed-ended > p{ margin-top:11px; margin-bottom:22px; font-size:13px; font-weight:800; } .battle-feed-ended-actions a{ min-width:150px; min-height:48px; padding:0 18px; border-color:var(--theme-role-border-444c6e); background:var(--theme-role-surface-121831); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:11px; font-style:italic; letter-spacing:.01em; } .battle-feed-ended-actions a.primary{ border-color:var(--theme-arena-electric); background:var(--theme-arena-electric); color:var(--theme-ink); } } @media(max-width:680px){ .battle-stage.feed-ended .battle-feed-ended{ background: radial-gradient(circle at 88% 0,var(--theme-role-surface-rgba-231-255-0-05-0d7957),transparent 220px), linear-gradient(135deg,var(--theme-role-surface-121832),var(--theme-role-surface-0a0f24) 72%) !important; } .battle-feed-ended > strong{ font-size:28px; letter-spacing:-.03em; } .battle-feed-ended-actions a{ min-height:50px; font-style:italic; } } /* ================================================================ BattleRanker V3.57 — CLEAN COMPLETION FINISH Once the feed is exhausted, the completion panel is the end state. Hide redundant utilities and empty queue/footer messaging below it. ================================================================ */ @media(min-width:681px){ .battle-stage.feed-ended + .desktop-battle-utilities, .battle-stage.feed-ended ~ .up-next, .battle-stage.feed-ended ~ .feed-principle{ display:none !important; } } @media(max-width:680px){ .battle-stage.feed-ended ~ .desktop-battle-utilities, .battle-stage.feed-ended ~ .up-next, .battle-stage.feed-ended ~ .feed-principle{ display:none !important; } } /* ================================================================ BattleRanker V3.58 — BATTLE AGAIN / RESET THIS RANKING ================================================================ */ .feed-empty-complete{ position:relative; overflow:hidden; min-height:245px; justify-content:center; padding:34px 38px; border:1px solid var(--theme-role-border-46506d); border-top:3px solid var(--theme-arena-electric); border-radius:10px; background: radial-gradient(circle at 15% 0,var(--theme-role-surface-rgba-88-39-190-13-042557),transparent 280px), radial-gradient(circle at 88% 10%,var(--theme-role-surface-rgba-231-255-0-055-0e4447),transparent 250px), linear-gradient(135deg,var(--theme-role-surface-121832),var(--theme-role-surface-0a0f24) 72%); } .feed-empty-complete::after{ content:"VS"; position:absolute; right:28px; top:50%; transform:translateY(-50%) rotate(-8deg); color:var(--theme-role-text-rgba-231-255-0-045-5d766f); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:160px; line-height:.8; font-style:italic; font-weight:1000; pointer-events:none; } .feed-empty-complete > *{ position:relative; z-index:2; } .feed-empty-kicker{ color:var(--theme-arena-electric) !important; font-size:10px !important; line-height:1 !important; font-weight:1000 !important; letter-spacing:.11em !important; } .feed-empty-complete > strong{ color:var(--theme-role-text-fff) !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:clamp(32px,3.3vw,48px) !important; line-height:.95 !important; font-style:italic !important; letter-spacing:-.04em !important; } .feed-empty-complete > span:not(.feed-empty-kicker){ max-width:680px; color:var(--theme-role-text-aeb6ca) !important; font-size:13px !important; line-height:1.4 !important; font-weight:800 !important; } .feed-empty-actions{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:10px; } .feed-empty-actions form, .battle-feed-ended-actions form{ margin:0; } .feed-empty-actions a, .feed-empty-actions button, .battle-feed-ended-actions button{ min-height:48px; display:flex; align-items:center; justify-content:center; padding:0 18px; border:1px solid var(--theme-role-border-444c6e); border-radius:7px; background:var(--theme-role-surface-121831); color:var(--theme-role-text-f4f6fb); text-decoration:none; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:11px; line-height:1; font-style:italic; font-weight:1000; text-transform:uppercase; cursor:pointer; } .feed-empty-actions .primary, .battle-feed-ended-actions button.primary{ border-color:var(--theme-arena-electric); background:var(--theme-arena-electric); color:var(--theme-ink); } .feed-empty-actions .primary:hover, .battle-feed-ended-actions button.primary:hover{ background:var(--theme-role-surface-f1ff4a); color:var(--theme-ink); } .feed-empty-reset-note{ display:block; max-width:680px; margin-top:5px; color:var(--theme-role-text-77819b); font-size:9px; line-height:1.35; font-weight:800; } .battle-feed-ended-actions .battle-feed-replay-form{ display:flex; } @media(max-width:680px){ .feed-empty-complete{ min-height:0; margin:8px; padding:24px 17px 22px; } .feed-empty-complete::after{ display:none; } .feed-empty-complete > strong{ font-size:29px !important; } .feed-empty-actions{ display:grid; width:100%; } .feed-empty-actions form, .feed-empty-actions a, .feed-empty-actions button, .battle-feed-ended-actions form, .battle-feed-ended-actions button{ width:100%; } } /* ================================================================ BattleRanker V3.59 — DESKTOP BATTLE FEED POLISH Bigger uppercase modes, top-right Skip, centred Rankings | Share, and playful live readiness messaging for the endless-session recap. Mobile battle UI and arena geometry are untouched. ================================================================ */ @media(min-width:681px){ /* 1. Cleaner, bigger all-caps game modes. */ .desktop-battle-modes{ min-height:62px !important; gap:28px !important; font-size:34px !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.015em !important; } .desktop-battle-modes a, .desktop-battle-modes > span:not(.desktop-mode-divider){ min-height:50px !important; padding:0 2px 7px !important; font-style:normal !important; letter-spacing:.015em !important; } .desktop-battle-modes .desktop-mode-divider{ display:none !important; } .desktop-battle-modes .desktop-mode-coming{ gap:0 !important; } .desktop-battle-modes .desktop-mode-coming small{ bottom:-4px !important; font-size:7px !important; letter-spacing:.14em !important; } .desktop-battle-modes a.active::after{ left:0 !important; right:0 !important; height:4px !important; } /* 2. Large, obvious Skip at the top-right of the Battle arena. */ .battle-topline{ grid-template-columns:1fr minmax(300px,auto) 1fr !important; } .desktop-topline-skip{ display:inline-flex !important; align-items:center !important; justify-content:flex-end !important; justify-self:end !important; min-width:0 !important; min-height:0 !important; margin:0 !important; padding:3px 14px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:var(--theme-role-text-c4c8d1) !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:23px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.025em !important; text-transform:uppercase !important; cursor:pointer !important; opacity:.9 !important; } .desktop-topline-skip:hover:not(:disabled){ color:var(--theme-arena-electric) !important; background:transparent !important; } .desktop-topline-skip:disabled{ opacity:.28 !important; cursor:default !important; } /* 3. Rankings | Share — centred and all caps. */ .desktop-battle-utilities{ gap:6px !important; margin:8px 0 3px !important; } .desktop-battle-utilities-main{ gap:9px !important; } .desktop-battle-utilities-main a, .desktop-battle-utilities-main button{ padding:2px 0 !important; color:var(--theme-role-text-fff) !important; font-size:24px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.015em !important; text-transform:uppercase !important; text-decoration:none !important; } .desktop-utility-divider{ color:var(--theme-role-text-fff) !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:24px !important; line-height:1 !important; font-weight:800 !important; opacity:.9 !important; } /* 4 + 5. Smaller results escape with a changing readiness state. */ .desktop-results-row{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:25px; } .desktop-results-row[hidden]{ display:none !important; } .desktop-results-escape{ padding:2px 0 !important; color:var(--theme-role-text-f2f3f7) !important; font-size:16px !important; line-height:1 !important; font-style:normal !important; font-weight:950 !important; letter-spacing:.01em !important; text-decoration:none !important; text-transform:uppercase !important; opacity:.96 !important; } .desktop-results-readiness{ color:var(--theme-role-text-9298aa); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:13px; line-height:1; font-style:normal; font-weight:1000; letter-spacing:.035em; text-transform:uppercase; white-space:nowrap; } .desktop-results-readiness::before{ content:"— "; } .desktop-results-readiness.is-nearly-ready{ color:var(--theme-role-text-c5cad6); } .desktop-results-readiness.is-ready{ color:var(--theme-arena-electric); animation:brResultsReadyPulse .85s ease-in-out infinite alternate; } @keyframes brResultsReadyPulse{ from{ opacity:.55; text-shadow:none; } to{ opacity:1; text-shadow:0 0 12px var(--theme-role-shadow-rgba-231-255-0-45-94ea60); } } } @media(max-width:900px) and (min-width:681px){ .desktop-battle-modes{ gap:18px !important; font-size:29px !important; } .desktop-topline-skip{ padding-right:8px !important; font-size:20px !important; } .desktop-battle-utilities-main a, .desktop-battle-utilities-main button, .desktop-utility-divider{ font-size:21px !important; } } /* BattleRanker V3.60 — results link locked until recap is ready */ @media(min-width:681px){ .desktop-results-escape.is-disabled{ color:var(--theme-role-text-7d8395) !important; opacity:.62 !important; cursor:default !important; pointer-events:none !important; text-decoration:none !important; } } /* ================================================================ BattleRanker V3.61.1 — MOBILE ACTIONS ABOVE RANKING TITLE LIST | SHARE | SKIP | ⚡ sits first, then the ranking title sits normally above the battle imagery with no overlap. Desktop is untouched. ================================================================ */ @media(max-width:680px){ .theme-battle-arena .battle-stage{ display:flex; flex-direction:column; overflow:visible; } .theme-battle-arena .mobile-ranking-switch{ order:1; position:relative; z-index:22; border-bottom:1px solid var(--theme-role-border-303755); } .theme-battle-arena .battle-topline{ order:2; position:relative; z-index:24; min-height:44px; margin:0; padding:5px 8px 6px; border-top:0; border-bottom:1px solid var(--theme-role-border-303755); background:var(--theme-role-surface-10152d); pointer-events:none; } .theme-battle-arena .battle-topline strong{ position:relative; z-index:2; max-width:92vw; padding:6px 10px 7px; border:0; border-radius:6px; background:var(--theme-arena-electric) !important; color:var(--theme-ink) !important; box-shadow:2px 3px 0 var(--theme-role-shadow-070a1a); font-size:clamp(15px,4.5vw,20px); line-height:1; pointer-events:auto; } .theme-battle-arena .battle-visual{ order:3; } .theme-battle-arena .battle-result{ order:4; } .theme-battle-arena .legacy-battle-actions{ order:5; } .theme-battle-arena .mobile-post-battle-actions{ order:6; } } /* ================================================================ Battle Feed 2 — EXPERIMENT 01 "BIG HOMEPAGE RANKING CARD" Desktop only. The live Battle Feed is untouched. The arena now borrows the visual architecture of the homepage cards: image-led top, ranking identity band beneath, compact footer/result area. Mobile retains the proven live layout for now. ================================================================ */ .battle-card-context{ display:none; } @media(min-width:761px){ body.theme-battle-arena-v2{ background: radial-gradient(circle at 50% -80px,var(--theme-role-surface-rgba-62-73-135-14-363fd0),transparent 470px), var(--theme-role-surface-080d20) !important; } .theme-battle-arena-v2 .brfeed-shell{ width:min(1320px,calc(100% - 36px)) !important; padding-top:14px !important; } /* Mode bar becomes clean page chrome, not part of the card. */ .theme-battle-arena-v2 .desktop-battle-modes{ min-height:58px !important; margin-bottom:14px !important; font-size:29px !important; } /* * One oversized homepage-style card. * Yellow is now mostly reserved for the lower edge / active moments. */ .theme-battle-arena-v2 .battle-stage{ position:relative !important; overflow:hidden !important; border:1px solid var(--theme-role-border-46506d) !important; border-bottom:4px solid var(--theme-arena-electric) !important; border-radius:18px !important; background:var(--theme-role-surface-121831) !important; box-shadow: 0 20px 48px var(--theme-role-shadow-rgba-0-0-0-30-6d79cf), 0 0 0 1px var(--theme-role-shadow-rgba-255-255-255-018-d34853) !important; } /* * The old title bar becomes a tiny overlay utility strip. * Ranking title moves BELOW the photography, like the homepage cards. */ .theme-battle-arena-v2 .battle-topline{ position:absolute !important; z-index:80 !important; left:0 !important; right:0 !important; top:0 !important; min-height:0 !important; padding:16px 17px !important; display:flex !important; align-items:flex-start !important; justify-content:space-between !important; border:0 !important; background:linear-gradient(180deg,var(--theme-role-surface-rgba-5-8-20-72-a9af1b),transparent) !important; pointer-events:none !important; } .theme-battle-arena-v2 .battle-topline > *{ pointer-events:auto !important; } .theme-battle-arena-v2 .battle-topline > strong{ display:none !important; } .theme-battle-arena-v2 .live-pill{ padding:7px 10px !important; border-radius:999px !important; background:var(--theme-role-surface-ff2d63) !important; box-shadow:0 3px 10px var(--theme-role-shadow-rgba-0-0-0-25-a59544) !important; font-size:9px !important; letter-spacing:.025em !important; } .theme-battle-arena-v2 .desktop-topline-skip{ min-height:34px !important; padding:0 9px !important; border:0 !important; background:var(--theme-role-surface-rgba-7-10-24-48-7a7eb9) !important; color:var(--theme-role-text-d4d9e4) !important; backdrop-filter:blur(4px) !important; font-size:11px !important; box-shadow:none !important; } .theme-battle-arena-v2 .desktop-topline-skip:hover{ background:var(--theme-role-surface-rgba-7-10-24-78-7cf1c6) !important; color:var(--theme-role-text-fff) !important; } /* Big image-led top, like an enlarged ranking card. */ .theme-battle-arena-v2 .battle-visual{ height:min(520px,59vh) !important; background:var(--theme-role-surface-0b1023) !important; } /* Keep the established underlying-image join and lightning seam. */ .theme-battle-arena-v2 .vs{ width:82px !important; height:82px !important; border-width:4px !important; font-size:28px !important; background:var(--theme-role-surface-0b1023) !important; box-shadow: 0 0 0 5px var(--theme-role-shadow-rgba-5-8-20-72-a9af1b), 0 0 24px var(--theme-role-shadow-rgba-231-255-0-15-e82150) !important; } /* * Contender labels become more like premium card captions rather than * giant poster typography. Images get to dominate. */ .theme-battle-arena-v2 .battle-copy{ left:24px !important; right:24px !important; bottom:22px !important; } .theme-battle-arena-v2 .battle-copy strong{ max-width:88% !important; margin-top:4px !important; font-size:clamp(30px,3vw,46px) !important; line-height:.94 !important; letter-spacing:-.035em !important; } .theme-battle-arena-v2 .battle-copy small{ margin-top:7px !important; color:var(--theme-role-text-rgba-255-255-255-72-e6c6f1) !important; font-size:10px !important; } .theme-battle-arena-v2 .battle-copy b{ margin-top:8px !important; padding:5px 8px !important; border-radius:4px !important; box-shadow:none !important; font-size:8px !important; } /* * This is the key homepage-card cue: * ranking title + category sits in its own strong band BELOW the images. */ .theme-battle-arena-v2 .battle-card-context{ min-height:92px; display:flex !important; align-items:center; justify-content:space-between; gap:24px; padding:17px 20px 16px; border-top:1px solid var(--theme-role-border-3a4362); border-bottom:1px solid var(--theme-role-border-3a4362); background:var(--theme-role-surface-161d39); } .theme-battle-arena-v2 .battle-card-context-copy{ min-width:0; } .theme-battle-arena-v2 .battle-card-context-copy > strong{ display:block; color:var(--theme-role-text-fff); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:clamp(24px,2.4vw,34px); line-height:.95; font-style:italic; font-weight:1000; letter-spacing:-.035em; text-transform:uppercase; } .theme-battle-arena-v2 .battle-card-context-copy > span{ display:flex; align-items:center; gap:7px; margin-top:7px; color:var(--theme-role-text-8992ad); font-size:9px; line-height:1; font-weight:1000; letter-spacing:.065em; text-transform:uppercase; } .theme-battle-arena-v2 .battle-card-context-copy > span b{ color:var(--theme-role-text-aeb6ca); font:inherit; } .theme-battle-arena-v2 .battle-card-context-copy > span i{ color:var(--theme-arena-electric); font-style:normal; } .theme-battle-arena-v2 .battle-card-context > a{ flex:0 0 auto; min-height:44px; display:flex; align-items:center; justify-content:center; padding:0 18px; border-left:1px solid var(--theme-role-border-39425f); color:var(--theme-role-text-d8deed); text-decoration:none; font-size:10px; line-height:1; font-weight:1000; letter-spacing:.03em; } .theme-battle-arena-v2 .battle-card-context > a:hover{ color:var(--theme-arena-electric); } /* * Result area becomes the card's lower interaction rail rather than * another large dark module. */ .theme-battle-arena-v2 .battle-result{ padding:12px 16px 15px !important; border-top:0 !important; background:var(--theme-role-surface-10162e) !important; } .theme-battle-arena-v2 .result-head{ min-height:28px; margin-bottom:8px !important; align-items:center !important; } .theme-battle-arena-v2 .result-head #resultMessage{ color:var(--theme-role-text-e9ecf4) !important; font-size:11px !important; } .theme-battle-arena-v2 .result-head #resultMeta{ color:var(--theme-role-text-8992ad) !important; font-size:10px !important; } .theme-battle-arena-v2 .result-bar{ height:48px !important; border:0 !important; border-radius:6px !important; box-shadow:none !important; } .theme-battle-arena-v2 .result-bar b{ font-size:23px !important; } .theme-battle-arena-v2 .vote-counts{ margin-top:6px !important; font-size:8px !important; } /* * Utilities become the equivalent of the homepage card's two-button footer. */ .theme-battle-arena-v2 .desktop-battle-utilities{ margin:0 !important; padding:0 !important; border:1px solid var(--theme-role-border-3b4563); border-top:0; border-radius:0 0 12px 12px; background:var(--theme-role-surface-11172e); } .theme-battle-arena-v2 .desktop-battle-utilities-main{ width:100%; display:grid !important; grid-template-columns:1fr 1fr; gap:0 !important; } .theme-battle-arena-v2 .desktop-battle-utilities-main > a, .theme-battle-arena-v2 .desktop-battle-utilities-main > button{ min-height:52px !important; display:flex !important; align-items:center; justify-content:center; padding:0 12px !important; border-right:1px solid var(--theme-role-border-35405c) !important; color:var(--theme-role-text-d8deed) !important; font-size:12px !important; font-style:normal !important; text-transform:uppercase !important; } .theme-battle-arena-v2 .desktop-battle-utilities-main > *:last-child{ border-right:0 !important; } .theme-battle-arena-v2 .desktop-utility-divider{ display:none !important; } .theme-battle-arena-v2 .desktop-results-row{ padding:10px 12px 12px; border-top:1px solid var(--theme-role-border-303a57); } /* Up Next inherits the same card family rather than fighting the hero. */ .theme-battle-arena-v2 .up-next{ margin-top:26px !important; } .theme-battle-arena-v2 .queue{ gap:12px !important; } .theme-battle-arena-v2 .queue-card{ border-color:var(--theme-role-border-46506d) !important; border-radius:12px !important; background:var(--theme-role-surface-151b35) !important; box-shadow:none !important; } .theme-battle-arena-v2 .queue-card:first-child{ border-color:var(--theme-arena-electric) !important; box-shadow:none !important; } .theme-battle-arena-v2 .queue-visual{ height:140px !important; } .theme-battle-arena-v2 .queue-copy{ padding:9px 10px 7px !important; border-top:1px solid var(--theme-role-border-39425f); } .theme-battle-arena-v2 .queue-meta{ padding:0 10px 10px !important; } } /* Do not change the proven mobile Battle Feed yet. */ @media(max-width:760px){ .theme-battle-arena-v2 .battle-card-context{ display:none !important; } } /* ================================================================ Battle Feed 2 — EXPERIMENT 02 Move Battle / Quick 10 / Find Winner INTO the oversized card. Remove the detached footer beneath the card. Desktop only; mobile remains on the proven layout. ================================================================ */ .battle-card-mode-panel{ display:none; } @media(min-width:761px){ /* No detached Rankings / Share footer underneath the yellow card edge. */ .theme-battle-arena-v2 .desktop-battle-utilities{ display:none !important; } /* * The mode chooser is now an inner footer panel of the battle card, * immediately beneath the results area. */ .theme-battle-arena-v2 .battle-card-mode-panel{ display:block !important; padding:10px 16px 13px; border-top:1px solid var(--theme-role-border-303a57); background:var(--theme-role-surface-11172e); } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes{ position:relative !important; display:grid !important; grid-template-columns:1fr 1fr 1fr !important; align-items:stretch !important; gap:0 !important; min-height:54px !important; margin:0 !important; padding:0 !important; border:1px solid var(--theme-role-border-39435f); border-radius:9px; overflow:visible; background:var(--theme-role-surface-151b35); font-size:15px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.015em !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a, .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > span:not(.desktop-mode-divider):not(.desktop-topic-picker){ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; min-height:54px !important; margin:0 !important; padding:0 12px !important; border-right:1px solid var(--theme-role-border-35405c); color:var(--theme-role-text-cbd1df) !important; background:transparent !important; text-decoration:none !important; white-space:nowrap !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > span.desktop-mode-divider{ display:none !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a:nth-of-type(2), .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > .desktop-mode-coming{ border-right:0 !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a:hover{ color:var(--theme-role-text-fff) !important; background:var(--theme-role-surface-1b2340) !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a.active{ color:var(--theme-role-text-fff) !important; background:var(--theme-role-surface-171f39) !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a.active::after{ content:"" !important; position:absolute !important; left:18% !important; right:18% !important; bottom:0 !important; height:3px !important; border-radius:3px 3px 0 0 !important; background:var(--theme-arena-electric) !important; box-shadow:none !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-mode-coming{ opacity:.42 !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-mode-coming small{ position:absolute !important; left:50% !important; bottom:6px !important; transform:translateX(-50%) !important; color:var(--theme-arena-electric) !important; font-size:6px !important; line-height:1 !important; letter-spacing:.12em !important; } /* * Topic remains available but becomes a compact chip above the right * side of the inner mode panel instead of occupying the page header. */ .theme-battle-arena-v2 .battle-card-mode-panel .desktop-topic-picker{ position:absolute !important; right:8px !important; top:-38px !important; z-index:90 !important; transform:none !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-topic-trigger{ min-height:30px !important; padding:0 9px !important; border:1px solid var(--theme-role-border-39435f) !important; border-radius:6px !important; background:var(--theme-role-surface-10162e) !important; color:var(--theme-role-text-9ca5ba) !important; font-size:10px !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-topic-trigger strong{ font-size:10px !important; color:var(--theme-role-text-fff) !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-topic-menu{ top:calc(100% + 5px) !important; } /* The battle card itself now owns the whole interaction stack. */ .theme-battle-arena-v2 .battle-stage{ border-bottom-width:4px !important; } .theme-battle-arena-v2 .up-next{ margin-top:22px !important; } } @media(max-width:760px){ .theme-battle-arena-v2 .battle-card-mode-panel{ display:none !important; } } /* ================================================================ Battle Feed 2 — EXPERIMENT 03 RESULTS lives beside FULL RANKING in the ranking identity band. SHARE joins SKIP as a quiet image-overlay utility. RESULTS warms up after six completed Battles. ================================================================ */ @media(min-width:761px){ /* Top-right image overlay utilities: SHARE | SKIP */ .theme-battle-arena-v2 .battle-topline-right-actions{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:5px !important; margin-left:auto !important; pointer-events:auto !important; } .theme-battle-arena-v2 .desktop-card-share, .theme-battle-arena-v2 .desktop-topline-skip{ min-height:34px !important; padding:0 10px !important; border:0 !important; border-radius:5px !important; background:var(--theme-role-surface-rgba-7-10-24-50-4a1379) !important; color:var(--theme-role-text-d4d9e4) !important; box-shadow:none !important; backdrop-filter:blur(4px) !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:10px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.035em !important; cursor:pointer !important; } .theme-battle-arena-v2 .desktop-card-share{ color:var(--theme-role-text-f1f3f8) !important; } .theme-battle-arena-v2 .desktop-card-share:hover, .theme-battle-arena-v2 .desktop-topline-skip:hover:not(:disabled){ background:var(--theme-role-surface-rgba-7-10-24-82-2b3e54) !important; color:var(--theme-arena-electric) !important; } /* Right side of the ranking-title band becomes RESULTS | FULL RANKING. */ .theme-battle-arena-v2 .battle-card-context-actions{ flex:0 0 auto !important; display:grid !important; grid-template-columns:minmax(105px,auto) 1px minmax(135px,auto) !important; align-self:stretch !important; align-items:stretch !important; margin:-17px -20px -16px 0 !important; } .theme-battle-arena-v2 .battle-card-action-divider{ width:1px !important; height:100% !important; background:var(--theme-role-surface-39425f) !important; } .theme-battle-arena-v2 .battle-card-context-actions > #battleCardRankingLink{ min-height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 20px !important; color:var(--theme-role-text-d8deed) !important; text-decoration:none !important; font-size:10px !important; line-height:1 !important; font-weight:1000 !important; letter-spacing:.03em !important; } .theme-battle-arena-v2 .battle-card-context-actions > #battleCardRankingLink:hover{ color:var(--theme-arena-electric) !important; background:var(--theme-role-surface-rgba-255-255-255-018-d34853) !important; } .theme-battle-arena-v2 .battle-card-results-action{ min-height:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:4px !important; padding:0 18px !important; background:var(--theme-role-surface-rgba-255-255-255-008-fb1f14) !important; } .theme-battle-arena-v2 .battle-card-results-action[hidden]{ display:none !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape{ display:block !important; padding:0 !important; border:0 !important; background:none !important; color:var(--theme-role-text-727b93) !important; text-decoration:none !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:11px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.035em !important; cursor:default !important; opacity:.72 !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-readiness{ display:block !important; color:var(--theme-role-text-596279) !important; font-size:6px !important; line-height:1 !important; font-weight:1000 !important; letter-spacing:.12em !important; } /* 3–5 battles: visibly warming up. */ .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-nearly-ready{ color:var(--theme-role-text-aaa6b0) !important; opacity:.90 !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-readiness.is-nearly-ready{ color:var(--theme-role-text-c4868f) !important; } /* Six+ battles: RESULTS goes genuinely live / hot. */ .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-ready{ color:var(--theme-role-text-ff3f5f) !important; opacity:1 !important; cursor:pointer !important; text-shadow:0 0 12px var(--theme-role-shadow-rgba-255-63-95-18-996688) !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-readiness.is-ready{ color:var(--theme-role-text-ff3f5f) !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-ready:hover{ color:var(--theme-role-text-ff7188) !important; } /* The old direct-link rule must not add another border to FULL RANKING. */ .theme-battle-arena-v2 .battle-card-context > a{ border-left:0 !important; } } /* Keep mobile exactly as it is for this experiment. */ @media(max-width:760px){ .theme-battle-arena-v2 .battle-topline-right-actions{ display:contents; } .theme-battle-arena-v2 .desktop-card-share{ display:none !important; } } /* ================================================================ Battle Feed 2 — EXPERIMENT 04 Topic joins the ranked-battle badge on the image. Heavy lightning seam replaced by a simple slim divider. ================================================================ */ @media(min-width:761px){ /* TOPIC now belongs with the other quiet image-overlay controls. */ .theme-battle-arena-v2 .battle-topline-left-actions{ display:flex !important; align-items:center !important; gap:6px !important; pointer-events:auto !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-picker{ position:relative !important; right:auto !important; top:auto !important; z-index:92 !important; transform:none !important; font-family:Arial,Helvetica,sans-serif !important; font-style:normal !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-trigger{ min-height:31px !important; display:inline-flex !important; align-items:center !important; gap:5px !important; padding:0 9px !important; border:0 !important; border-radius:999px !important; background:var(--theme-role-surface-rgba-7-10-24-52-d468c1) !important; color:var(--theme-role-text-9fa8ba) !important; box-shadow:none !important; backdrop-filter:blur(4px) !important; font-size:9px !important; cursor:pointer !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-trigger span{ color:var(--theme-role-text-8f98ac) !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-trigger strong{ color:var(--theme-role-text-f2f4f8) !important; font-size:9px !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-trigger i{ color:var(--theme-arena-electric) !important; font-size:9px !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-trigger:hover{ background:var(--theme-role-surface-rgba-7-10-24-82-2b3e54) !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-menu{ position:absolute !important; left:0 !important; right:auto !important; top:calc(100% + 6px) !important; width:210px !important; z-index:120 !important; } /* The old mode-panel topic positioning is retired. */ .theme-battle-arena-v2 .battle-card-mode-panel .desktop-topic-picker{ position:static !important; } /* * Simple divider experiment: * one slim yellow seam with a dark edge, no bolt, no glow. */ .theme-battle-arena-v2 .battle-visual .bolt{ left:50% !important; top:-2% !important; bottom:-2% !important; width:5px !important; transform:translateX(-50%) rotate(1.5deg) !important; background:var(--theme-arena-electric) !important; background-image:none !important; background-repeat:no-repeat !important; box-shadow: -3px 0 0 var(--theme-role-shadow-rgba-5-8-20-92-511496), 3px 0 0 var(--theme-role-shadow-rgba-5-8-20-92-511496) !important; clip-path:none !important; filter:none !important; opacity:.96 !important; } .theme-battle-arena-v2 .vs{ width:76px !important; height:76px !important; border-width:3px !important; box-shadow:0 0 0 5px var(--theme-role-shadow-rgba-5-8-20-72-a9af1b) !important; } } @media(max-width:760px){ .theme-battle-arena-v2 .battle-topline-left-actions{ display:contents !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-picker{ display:none !important; } } /* ================================================================ Battle Feed 2 — EXPERIMENT 04.1 FIX Restore the permanent RESULTS slot and stop the generic battle-topline styling from turning the selected topic into a yellow button. ================================================================ */ @media(min-width:761px){ /* RESULTS should be visible from Battle 0 as a deliberately faint status. */ .theme-battle-arena-v2 .battle-card-results-action, .theme-battle-arena-v2 .battle-card-results-action[hidden]{ display:flex !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-not-ready, .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-disabled{ color:var(--theme-role-text-69728a) !important; opacity:.65 !important; cursor:default !important; pointer-events:none !important; } /* * battle-topline has a broad .battle-topline strong rule for the old title. * The topic value is also a , so fully neutralise that styling here. */ .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-trigger strong{ position:static !important; z-index:auto !important; display:inline !important; width:auto !important; max-width:none !important; min-width:0 !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:var(--theme-role-text-f2f4f8) !important; font-family:Arial,Helvetica,sans-serif !important; font-size:9px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.02em !important; text-align:left !important; white-space:nowrap !important; transform:none !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-trigger{ color:var(--theme-role-text-9fa8ba) !important; } /* Dropdown itself: dark rows, yellow only for text/highlight, always readable. */ .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-menu{ padding:7px !important; border:1px solid var(--theme-role-border-46506d) !important; background:var(--theme-role-surface-10162d) !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-menu a{ min-height:38px !important; padding:0 11px !important; border-radius:6px !important; background:transparent !important; color:var(--theme-role-text-d6dbe8) !important; font-size:11px !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-menu a:hover{ background:var(--theme-role-surface-1a213d) !important; color:var(--theme-role-text-fff) !important; } .theme-battle-arena-v2 .battle-topline-left-actions .desktop-topic-menu a.active{ background:var(--theme-role-surface-rgba-231-255-0-08-1625d1) !important; color:var(--theme-arena-electric) !important; } } /* ================================================================ Battle Feed 2 — EXPERIMENT 04.2 Remove the pre-vote result text row on desktop so the coloured result bar sits directly beneath the ranking-title band. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-result .result-head{ display:none !important; } .theme-battle-arena-v2 .battle-result{ padding-top:12px !important; } } /* ================================================================ BattleRanker Battle Feed — RESULTS EMPHASIS Make the Results destination deliberately hard to overlook. It remains muted while building, then becomes hot when ready. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-results-action{ min-width:150px !important; gap:6px !important; padding:0 22px !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape{ font-size:17px !important; line-height:1 !important; letter-spacing:.025em !important; font-weight:1000 !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-readiness{ font-size:8px !important; line-height:1 !important; letter-spacing:.11em !important; font-weight:1000 !important; } /* Still clearly visible before results are ready. */ .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-not-ready, .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-disabled{ color:var(--theme-role-text-929bb0) !important; opacity:.78 !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-readiness.is-not-ready{ color:var(--theme-role-text-70798f) !important; opacity:.9 !important; } /* Building momentum at 3–5 Battles. */ .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-nearly-ready{ color:var(--theme-role-text-d6b1b8) !important; opacity:1 !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-readiness.is-nearly-ready{ color:var(--theme-role-text-dd8998) !important; } /* Six+ Battles: make RESULTS unmistakably live. */ .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-ready{ color:var(--theme-role-text-ff3156) !important; font-size:18px !important; opacity:1 !important; text-shadow:0 0 15px var(--theme-role-shadow-rgba-255-49-86-24-d3737f) !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-readiness.is-ready{ color:var(--theme-role-text-ff3156) !important; font-size:9px !important; } } /* ================================================================ BattleRanker Battle Feed — MOBILE RESULTS UNLOCK @ 10 Normal endless ranked Battle only. Quick 10 keeps its own dedicated completion/results flow. ================================================================ */ .mobile-results-unlocked, .mobile-results-pill{ display:none; } @media(max-width:760px){ .mobile-results-unlocked[hidden], .mobile-results-pill[hidden]{ display:none !important; } .mobile-results-unlocked{ position:fixed; z-index:1180; left:10px; right:10px; bottom:12px; display:block; opacity:0; transform:translateY(125%); transition: transform .36s cubic-bezier(.2,.9,.25,1), opacity .24s ease; pointer-events:none; } .mobile-results-unlocked.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; } .mobile-results-unlocked.is-collapsing{ opacity:0; transform:translateY(34px) scale(.96); pointer-events:none; } .mobile-results-unlocked-link{ display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; min-height:82px; padding:12px 13px; border:1px solid var(--theme-role-border-ff3156); border-top:3px solid var(--theme-role-border-ff3156); border-radius:11px; background: radial-gradient(circle at 0 50%,var(--theme-role-surface-rgba-255-49-86-17-06cfe5),transparent 110px), var(--theme-role-surface-121930); box-shadow:0 14px 34px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f); color:var(--theme-role-text-fff); text-decoration:none; box-sizing:border-box; } .mobile-results-unlocked-icon{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--theme-role-surface-ff3156); color:var(--theme-role-text-fff); font-size:20px; line-height:1; box-shadow:0 0 18px var(--theme-role-shadow-rgba-255-49-86-18-ebbdb8); } .mobile-results-unlocked-copy{ min-width:0; display:block; } .mobile-results-unlocked-copy strong{ display:block; margin:0 0 4px; color:var(--theme-role-text-ff496a); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:18px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:-.02em; } .mobile-results-unlocked-copy small{ display:block; color:var(--theme-role-text-c2c8d7); font-size:9px; line-height:1.32; font-weight:800; } .mobile-results-unlocked-cta{ color:var(--theme-role-text-fff); font-size:9px; line-height:1; font-weight:1000; white-space:nowrap; } /* After the intro card disappears, leave a small persistent result tab. */ .mobile-results-pill{ position:fixed; z-index:1160; right:10px; bottom:10px; display:block; opacity:0; transform:translateY(22px); transition:transform .25s ease,opacity .2s ease; pointer-events:none; } .mobile-results-pill.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; } .mobile-results-pill a{ min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 14px; border:1px solid var(--theme-role-border-ff3156); border-radius:999px; background:var(--theme-role-surface-ff3156); color:var(--theme-role-text-fff); box-shadow:0 8px 22px var(--theme-role-shadow-rgba-0-0-0-40-f4f715); text-decoration:none; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:12px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:.02em; } .mobile-results-pill a span{ color:var(--theme-role-text-fff); font-size:14px; } } /* ================================================================ BattleRanker Battle Feed — MOBILE RESULTS UNLOCK QUIET VERSION Keep the 10-Battle milestone, but make the notice calm and readable. Persistent Results becomes a small dark bottom-left tab. ================================================================ */ @media(max-width:760px){ .mobile-results-unlocked{ left:10px !important; right:10px !important; bottom:12px !important; } .mobile-results-unlocked-link{ min-height:86px !important; padding:13px 14px !important; border:1px solid var(--theme-role-border-3b4563) !important; border-top:2px solid var(--theme-role-border-59627b) !important; border-radius:10px !important; background: linear-gradient(180deg,var(--theme-role-surface-rgba-255-255-255-018-d34853),transparent 42%), var(--theme-role-surface-12182f) !important; box-shadow:0 14px 30px var(--theme-role-shadow-rgba-0-0-0-42-dc1699) !important; color:var(--theme-role-text-fff) !important; } .mobile-results-unlocked-icon{ width:38px !important; height:38px !important; background:var(--theme-role-surface-1a223d) !important; border:1px solid var(--theme-role-border-45506f) !important; color:var(--theme-role-text-dfe4ee) !important; box-shadow:none !important; font-size:18px !important; } .mobile-results-unlocked-copy strong{ margin-bottom:6px !important; color:var(--theme-role-text-f1f3f8) !important; font-size:18px !important; text-shadow:none !important; } .mobile-results-unlocked-copy small{ color:var(--theme-role-text-aab2c4) !important; font-size:10px !important; line-height:1.4 !important; font-weight:750 !important; } .mobile-results-unlocked-cta{ color:var(--theme-role-text-cfd5e2) !important; font-size:9px !important; } /* * Small unobtrusive tab, bottom-left. * No hot colour; it should be discoverable without nagging. */ .mobile-results-pill{ right:auto !important; left:10px !important; bottom:10px !important; } .mobile-results-pill a{ min-height:34px !important; padding:0 11px !important; gap:6px !important; border:1px solid var(--theme-role-border-414b67) !important; border-radius:6px 6px 0 0 !important; background:var(--theme-role-surface-rgba-14-20-43-94-974d37) !important; color:var(--theme-role-text-cdd3df) !important; box-shadow:0 6px 16px var(--theme-role-shadow-rgba-0-0-0-28-ca0b96) !important; font-size:10px !important; font-style:normal !important; letter-spacing:.035em !important; backdrop-filter:blur(4px) !important; } .mobile-results-pill a span{ color:var(--theme-role-text-8f98ad) !important; font-size:11px !important; } .mobile-results-pill a:active{ background:var(--theme-role-surface-171f39) !important; color:var(--theme-role-text-fff) !important; } } /* ================================================================ BattleRanker Battle Feed — MOBILE RESULTS LOCKED STATE Show Results stays visible before it unlocks, but is clearly muted and tells the user exactly how many Battles remain. ================================================================ */ @media(max-width:760px){ .mobile-battle-options-list > a#mobileShowResultsOption.is-results-locked{ border-color:var(--theme-role-border-333b58) !important; background:var(--theme-role-surface-11172d) !important; opacity:.56 !important; cursor:default !important; } .mobile-battle-options-list > a#mobileShowResultsOption.is-results-locked::after{ content:"LOCKED" !important; color:var(--theme-role-text-707a92) !important; font-size:7px !important; letter-spacing:.10em !important; } .mobile-battle-options-list > a#mobileShowResultsOption.is-results-locked strong{ color:var(--theme-role-text-a1a9bc) !important; } .mobile-battle-options-list > a#mobileShowResultsOption.is-results-locked small{ color:var(--theme-role-text-717b92) !important; font-size:9px !important; letter-spacing:.025em !important; text-transform:uppercase !important; } .mobile-battle-options-list > a#mobileShowResultsOption.primary{ opacity:1 !important; } } /* ================================================================ BattleRanker Mobile — RESULTS | NEXT SPLIT FOOTER Normal Battle: one calm two-part pinned action after each result. Results is muted until the first 10 Battles, then stays unlocked. Quick 10 keeps its own single full-width Next / Results button. ================================================================ */ @media(max-width:680px){ /* Retire the experimental popup and floating Results pill completely. */ .mobile-results-unlocked, .mobile-results-pill{ display:none !important; } .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions, .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions.has-view-list{ position:fixed !important; left:12px !important; right:12px !important; bottom:max(12px,env(safe-area-inset-bottom)) !important; z-index:350 !important; display:grid !important; grid-template-columns:44% 56% !important; width:auto !important; height:56px !important; margin:0 !important; padding:0 !important; border:2px solid var(--theme-ink) !important; border-radius:7px !important; overflow:hidden !important; background:var(--theme-arena-electric) !important; box-shadow: 0 5px 0 var(--theme-role-shadow-000), 0 10px 26px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f) !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-inline-results{ display:flex !important; min-width:0 !important; height:100% !important; padding:0 8px !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; border:0 !important; border-right:1px solid var(--theme-role-border-rgba-8-11-14-28-11140a) !important; border-radius:0 !important; background:var(--theme-role-surface-rgba-8-11-14-10-dbde48) !important; color:var(--theme-ink) !important; text-decoration:none !important; box-sizing:border-box !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-inline-results strong{ color:inherit !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:13px !important; line-height:1 !important; font-style:italic !important; font-weight:1000 !important; letter-spacing:.02em !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-inline-results small{ color:inherit !important; font-size:7px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.06em !important; text-transform:uppercase !important; white-space:nowrap !important; } /* Before Battle 10: clearly present, deliberately faded. */ .theme-battle-arena .mobile-post-battle-actions .mobile-inline-results.is-locked{ opacity:.28 !important; cursor:default !important; } /* After the first 10: remains available for the rest of the session. */ .theme-battle-arena .mobile-post-battle-actions .mobile-inline-results.is-unlocked{ opacity:.88 !important; cursor:pointer !important; background:var(--theme-role-surface-rgba-8-11-14-06-a2774d) !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-inline-results.is-unlocked small{ opacity:.74 !important; } /* * NEXT now occupies only the right side of the same yellow control. * Remove all of the old fixed positioning because the parent owns it. */ .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay, .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay.is-visible{ position:static !important; left:auto !important; right:auto !important; bottom:auto !important; display:flex !important; width:100% !important; min-width:0 !important; height:100% !important; min-height:0 !important; margin:0 !important; padding:0 12px !important; align-items:center !important; justify-content:center !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--theme-ink) !important; box-shadow:none !important; opacity:0 !important; pointer-events:none !important; transform:none !important; transition:opacity .18s ease !important; font-size:17px !important; font-style:italic !important; font-weight:1000 !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay.is-visible{ opacity:1 !important; pointer-events:auto !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay b{ margin-left:7px !important; color:var(--theme-ink) !important; font-size:20px !important; } /* * Quick 10 has its own dedicated Results payoff at the end. * Do not show the endless-Battle Results half there. */ .theme-battle-arena .mobile-post-battle-actions.is-quick10{ grid-template-columns:1fr !important; } .theme-battle-arena .mobile-post-battle-actions.is-quick10 .mobile-inline-results{ display:none !important; } body.has-mobile-next{ padding-bottom:80px !important; } } /* ================================================================ BattleRanker Mobile — SPLIT FOOTER APPEARS WITH NEXT ONLY Keep the entire RESULTS | NEXT control hidden until the exact moment the normal mobile Next button would previously have appeared. ================================================================ */ @media(max-width:680px){ .theme-battle-arena .mobile-post-battle-actions{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translateY(10px) !important; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s !important; } .theme-battle-arena .mobile-post-battle-actions:has(.mobile-next-overlay.is-visible){ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateY(0) !important; transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s !important; } } /* ================================================================ BattleRanker Mobile — RESTORE SINGLE NEXT BUTTON Retire the experimental RESULTS | NEXT split. The mobile post-Battle action is again one full-width NEXT button, appearing at the same delayed moment as before. ================================================================ */ @media(max-width:680px){ .theme-battle-arena .mobile-post-battle-actions, .theme-battle-arena .mobile-post-battle-actions.has-view-list, .theme-battle-arena .mobile-post-battle-actions.is-quick10{ position:fixed !important; left:12px !important; right:12px !important; bottom:max(12px,env(safe-area-inset-bottom)) !important; z-index:350 !important; display:block !important; width:auto !important; height:56px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:7px !important; overflow:visible !important; background:transparent !important; box-shadow:none !important; opacity:1 !important; visibility:visible !important; pointer-events:none !important; transform:none !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay, .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay.is-visible{ position:static !important; display:flex !important; width:100% !important; min-width:0 !important; height:56px !important; min-height:56px !important; margin:0 !important; padding:0 18px !important; align-items:center !important; justify-content:center !important; border:2px solid var(--theme-ink) !important; border-radius:7px !important; background:var(--theme-arena-electric) !important; color:var(--theme-ink) !important; box-shadow: 0 5px 0 var(--theme-role-shadow-000), 0 10px 26px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f) !important; font-size:17px !important; font-style:italic !important; font-weight:1000 !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translateY(10px) !important; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay.is-visible{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateY(0) !important; transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s !important; } .theme-battle-arena .mobile-post-battle-actions .mobile-next-overlay b{ margin-left:7px !important; color:var(--theme-ink) !important; font-size:20px !important; } body.has-mobile-next{ padding-bottom:80px !important; } } /* ================================================================ BattleRanker Mobile — DEFINITIVE NEXT RESTORE Neutralise the older split-footer rules with matching specificity. Nothing is visible until NEXT itself becomes ready. ================================================================ */ @media(max-width:680px){ .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions, .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions.has-view-list, .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions.is-quick10{ position:fixed !important; left:12px !important; right:12px !important; bottom:max(12px,env(safe-area-inset-bottom)) !important; z-index:350 !important; display:block !important; grid-template-columns:none !important; gap:0 !important; width:auto !important; height:56px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:7px !important; overflow:visible !important; background:transparent !important; box-shadow:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translateY(10px) !important; } .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions:has(.mobile-next-overlay.is-visible), .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions.has-view-list:has(.mobile-next-overlay.is-visible), .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions.is-quick10:has(.mobile-next-overlay.is-visible){ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateY(0) !important; } .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions .mobile-next-overlay, .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions .mobile-next-overlay.is-visible{ position:static !important; display:flex !important; width:100% !important; max-width:none !important; min-width:100% !important; height:56px !important; min-height:56px !important; margin:0 !important; padding:0 18px !important; align-items:center !important; justify-content:center !important; border:2px solid var(--theme-ink) !important; border-radius:7px !important; background:var(--theme-arena-electric) !important; color:var(--theme-ink) !important; box-shadow: 0 5px 0 var(--theme-role-shadow-000), 0 10px 26px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f) !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:none !important; } .theme-battle-arena .battle-stage.has-result .mobile-post-battle-actions .mobile-next-overlay.is-visible{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } } /* ================================================================ BattleRanker — DESKTOP RESULTS: SIMPLE LOCKED / UNLOCKED Before 10 Battles: muted and clearly unavailable. At 10 Battles: ordinary neutral text, no colour theatre / LIVE / pulse. Mobile is untouched. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-results-action{ opacity:1 !important; } .theme-battle-arena-v2 .desktop-results-escape, .theme-battle-arena-v2 .desktop-results-escape.is-ready, .theme-battle-arena-v2 .desktop-results-escape.is-nearly-ready{ color:var(--theme-role-text-d8deed) !important; opacity:1 !important; text-shadow:none !important; animation:none !important; transition:color .15s ease, opacity .15s ease !important; } .theme-battle-arena-v2 .desktop-results-escape.is-disabled, .theme-battle-arena-v2 .desktop-results-escape.is-not-ready{ color:var(--theme-role-text-707990) !important; opacity:.48 !important; text-shadow:none !important; animation:none !important; cursor:default !important; pointer-events:none !important; } .theme-battle-arena-v2 .desktop-results-readiness, .theme-battle-arena-v2 .desktop-results-readiness.is-not-ready, .theme-battle-arena-v2 .desktop-results-readiness.is-nearly-ready, .theme-battle-arena-v2 .desktop-results-readiness.is-ready{ color:var(--theme-role-text-626c84) !important; opacity:.72 !important; text-shadow:none !important; animation:none !important; } .theme-battle-arena-v2 .desktop-results-readiness[hidden]{ display:none !important; } } /* ================================================================ BattleRanker — QUICK 10 BADGE DESKTOP POSITION FIX Keep the Quick 10 counter clear of the Ranked Battle / Topic row. Mobile position is unchanged. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-run-counter{ top:58px !important; left:16px !important; z-index:70 !important; } } /* ================================================================ BattleRanker — DESKTOP CONTEXT BAND: RANKING | TITLE | RESULTS Matches the approved mock: FULL RANKING hard-left, ranking title/context centred, RESULTS hard-right. Mobile remains untouched. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-context{ display:grid !important; grid-template-columns:minmax(145px,190px) minmax(0,1fr) minmax(145px,190px) !important; align-items:stretch !important; gap:0 !important; min-height:94px !important; padding:0 !important; } /* Middle title block */ .theme-battle-arena-v2 .battle-card-context-copy{ grid-column:2 !important; grid-row:1 !important; min-width:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; padding:15px 28px 14px !important; text-align:center !important; border-left:1px solid var(--theme-role-border-39425f) !important; border-right:1px solid var(--theme-role-border-39425f) !important; } .theme-battle-arena-v2 .battle-card-context-copy > strong{ width:100% !important; text-align:center !important; } .theme-battle-arena-v2 .battle-card-context-copy > span{ justify-content:center !important; width:100% !important; text-align:center !important; } /* Existing actions container spans the outer columns. */ .theme-battle-arena-v2 .battle-card-context-actions{ grid-column:1 / 4 !important; grid-row:1 !important; align-self:stretch !important; display:grid !important; grid-template-columns:minmax(145px,190px) minmax(0,1fr) minmax(145px,190px) !important; margin:0 !important; pointer-events:none !important; } .theme-battle-arena-v2 .battle-card-results-action, .theme-battle-arena-v2 #battleCardRankingLink{ pointer-events:auto !important; } /* FULL RANKING occupies the left edge. */ .theme-battle-arena-v2 #battleCardRankingLink{ grid-column:1 !important; grid-row:1 !important; min-height:94px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 18px !important; border:0 !important; color:var(--theme-role-text-d8deed) !important; text-align:center !important; text-decoration:none !important; font-size:10px !important; line-height:1 !important; font-weight:1000 !important; letter-spacing:.035em !important; text-transform:uppercase !important; } .theme-battle-arena-v2 #battleCardRankingLink:hover{ color:var(--theme-arena-electric) !important; } /* RESULTS occupies the right edge. */ .theme-battle-arena-v2 .battle-card-results-action{ grid-column:3 !important; grid-row:1 !important; min-height:94px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:6px !important; padding:0 16px !important; text-align:center !important; } .theme-battle-arena-v2 .battle-card-action-divider{ display:none !important; } .theme-battle-arena-v2 .desktop-results-escape{ text-align:center !important; } .theme-battle-arena-v2 .desktop-results-readiness{ text-align:center !important; } } @media(max-width:760px){ .theme-battle-arena-v2 .battle-card-context{ display:none !important; } } /* ================================================================ BattleRanker V3.62 — FIRST-BATTLE "PICK YOUR WINNER" PROMPT A large teaching badge appears on Battle 1, then becomes a much quieter compact label for subsequent Battles in the same session. Overlay only: contender image and lightning/VS geometry untouched. ================================================================ */ .battle-pick-prompt{ position:absolute; z-index:75; left:50%; top:12px; display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 12px; transform:translateX(-50%) rotate(-1deg); border:1px solid var(--theme-role-border-rgba-255-255-255-34-5d18da); border-radius:6px; background:var(--theme-role-surface-rgba-7-10-24-78-7cf1c6); color:var(--theme-role-text-f4f6fb); box-shadow:0 5px 16px var(--theme-role-shadow-rgba-0-0-0-26-5f9bcc); backdrop-filter:blur(4px); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:11px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:.025em; white-space:nowrap; pointer-events:none; transition: min-height .20s ease, padding .20s ease, font-size .20s ease, border-color .20s ease, background .20s ease, transform .20s ease, box-shadow .20s ease; } .battle-pick-prompt.is-intro{ top:14px; min-height:52px; padding:0 22px; transform:translateX(-50%) rotate(-2deg); border:2px solid var(--theme-arena-electric); background:var(--theme-role-surface-rgba-7-10-24-92-2c0433); color:var(--theme-role-text-fff); box-shadow: 0 6px 0 var(--theme-role-shadow-rgba-0-0-0-34-c366e4), 0 0 22px var(--theme-role-shadow-rgba-231-255-0-12-acfeb4); font-size:21px; letter-spacing:.01em; } .battle-pick-prompt.is-compact{ opacity:.82; } .battle-stage.has-result .battle-pick-prompt{ opacity:0; } @media(max-width:680px){ .battle-pick-prompt{ top:8px; min-height:27px; padding:0 10px; border-radius:5px; font-size:9px; } .battle-pick-prompt.is-intro{ top:9px; min-height:42px; max-width:calc(100% - 116px); padding:0 15px; font-size:15px; text-align:center; } } @media(prefers-reduced-motion:reduce){ .battle-pick-prompt{ transition:none; } } /* ================================================================ BattleRanker V3.62.1 — MOBILE INTRO PROMPT CORRECTION Desktop keeps the centred first-battle prompt. Mobile removes it entirely and enlarges TAP TO PICK only on Battle 1. ================================================================ */ @media(max-width:680px){ .battle-pick-prompt{ display:none !important; } .battle-stage.is-first-battle .battle-copy b{ margin-top:9px !important; padding:7px 11px !important; border-radius:6px !important; font-size:11px !important; line-height:1 !important; box-shadow:0 3px 0 var(--theme-role-shadow-rgba-0-0-0-34-c366e4) !important; } .battle-stage.is-first-battle .battle-side.left .battle-copy b{ transform:rotate(-2deg) scale(1.03) !important; } .battle-stage.is-first-battle .battle-side.right .battle-copy b{ transform:rotate(2deg) scale(1.03) !important; } } /* ================================================================ BattleRanker V3.63 — FIND MY WINNER Tournament-specific chrome only. Battle arena geometry unchanged. ================================================================ */ .find-winner-mode .desktop-topline-skip{ display:none !important; } @media(min-width:681px){ .find-winner-mode .battle-run-counter{ border-color:var(--theme-arena-electric); background:var(--theme-role-surface-rgba-7-10-24-90-7627c0); } .find-winner-mode .battle-run-counter small{ color:var(--theme-arena-electric); } .find-winner-mode .battle-run-counter strong{ font-size:17px; } .find-winner-mode .battle-card-mode-panel .desktop-battle-modes > a.active{ background:linear-gradient(180deg,var(--theme-role-surface-rgba-231-255-0-07-5875df),var(--theme-role-surface-171f39)) !important; } } @media(max-width:680px){ .find-winner-mode .mobile-skip-trigger{ display:none !important; } .find-winner-mode .mobile-ranking-switch.is-available{ grid-template-columns:repeat(3,1fr) !important; } .find-winner-mode .battle-run-counter{ display:block !important; min-width:114px; border-color:var(--theme-arena-electric); background:var(--theme-role-surface-rgba-7-10-24-90-7627c0); } .find-winner-mode .battle-run-counter small{ color:var(--theme-arena-electric); font-size:7px; } .find-winner-mode .battle-run-counter strong{ font-size:14px; } } /* ================================================================ BattleRanker V3.64 — CLICK TO PICK DESKTOP ONBOARDING - remove the centre instruction badge completely - first desktop Battle enlarges the two CLICK TO PICK controls - subsequent Battles return to the normal compact chips - mobile keeps its existing larger first-battle TAP TO PICK treatment ================================================================ */ .battle-pick-prompt{ display:none !important; } @media(min-width:681px){ .battle-stage.is-first-battle .battle-copy b{ margin-top:11px !important; padding:9px 13px !important; border-radius:6px !important; font-size:12px !important; line-height:1 !important; letter-spacing:.015em !important; box-shadow:0 4px 0 var(--theme-role-shadow-rgba-0-0-0-34-c366e4) !important; } .battle-stage.is-first-battle .battle-side.left .battle-copy b{ transform:rotate(-2deg) scale(1.04) !important; } .battle-stage.is-first-battle .battle-side.right .battle-copy b{ transform:rotate(2deg) scale(1.04) !important; } } /* ================================================================ BattleRanker V3.65 — GAME MODES DISCOVERY Desktop labels the mode row. Mobile's existing lightning sheet becomes a true Game Modes chooser without adding Battle-screen height. ================================================================ */ .desktop-game-modes-label{ display:none; } @media(min-width:761px){ .theme-battle-arena-v2 .desktop-game-modes-label{ display:block; margin:0 0 7px 2px; color:var(--theme-role-text-929ab0); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:9px; line-height:1; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; } } @media(max-width:680px){ .mobile-battle-options-divider{ height:1px; margin:3px 2px; background:var(--theme-role-surface-323a59); } .mobile-battle-options-list > a.is-current-mode{ border-color:var(--theme-arena-electric); background: linear-gradient(135deg,var(--theme-role-surface-rgba-231-255-0-11-b59712),var(--theme-role-surface-151b34) 72%); box-shadow:inset 3px 0 0 var(--theme-arena-electric); pointer-events:none; cursor:default; } .mobile-battle-options-list > a.is-current-mode::after{ content:"CURRENT"; right:13px; color:var(--theme-arena-electric); font-size:8px; line-height:1; font-style:normal; font-weight:1000; letter-spacing:.08em; } .mobile-battle-options-list > a.is-current-mode small{ color:var(--theme-role-text-b2bad0); } } /* ================================================================ BattleRanker V3.66 — GAME MODE DISCOVERY NUDGE Temporary overlay only; adds no Battle-page height. Shown once per browser tab by JS. ================================================================ */ .battle-mode-discovery{ --battle-mode-discovery-top:10px; position:fixed; z-index:300; left:50%; top:var(--battle-mode-discovery-top); width:max-content; max-width:calc(100vw - 28px); display:flex; align-items:center; gap:9px; min-height:42px; padding:8px 13px; border:1px solid var(--theme-role-border-4b5471); border-radius:8px; background:var(--theme-role-surface-rgba-12-17-40-96-a4a04d); color:var(--theme-role-text-fff); box-shadow:0 10px 30px var(--theme-role-shadow-rgba-0-0-0-38-fba052); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transform:translate(-50%,-16px); transition:opacity .20s ease,transform .24s cubic-bezier(.2,.8,.2,1); } .battle-mode-discovery[hidden]{ display:none !important; } .battle-mode-discovery.is-visible{ opacity:1; transform:translate(-50%,0); } .battle-mode-discovery strong{ color:var(--theme-arena-electric); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:12px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:.035em; white-space:nowrap; } .battle-mode-discovery span{ color:var(--theme-role-text-c3cad9); font-size:10px; line-height:1; font-weight:850; white-space:nowrap; } @media(max-width:680px){ .battle-mode-discovery{ left:10px; right:10px; width:auto; max-width:none; min-height:52px; padding:9px 12px; justify-content:space-between; gap:10px; border-color:var(--theme-role-border-rgba-231-255-0-46-1980ee); box-shadow: 0 10px 28px var(--theme-role-shadow-rgba-0-0-0-42-dc1699), inset 3px 0 0 var(--theme-arena-electric); transform:translateY(-18px); } .battle-mode-discovery.is-visible{ transform:translateY(0); } .battle-mode-discovery strong{ font-size:12px; } .battle-mode-discovery span{ color:var(--theme-role-text-d5d9e5); font-size:10px; text-align:right; } } @media(max-width:390px){ .battle-mode-discovery{ left:7px; right:7px; padding-left:10px; padding-right:10px; } .battle-mode-discovery strong{ font-size:11px; } .battle-mode-discovery span{ max-width:122px; white-space:normal; line-height:1.15; } } @media(prefers-reduced-motion:reduce){ .battle-mode-discovery{ transition:none; } } /* ================================================================ BattleRanker V3.66.1 — GAME MODE DISCOVERY SIZE/TIMING POLISH Mobile: deeper panel, larger two-line copy, deliberately covers title. Desktop: slightly larger panel/type. Timing is handled in JS. ================================================================ */ @media(min-width:681px){ .battle-mode-discovery{ min-height:48px; padding:10px 16px; gap:12px; border-radius:9px; } .battle-mode-discovery strong{ font-size:14px; } .battle-mode-discovery span{ font-size:11px; } } @media(max-width:680px){ .battle-mode-discovery{ min-height:92px; padding:14px 16px 15px; align-items:center; justify-content:center; flex-direction:column; gap:8px; text-align:center; border-width:1px; border-radius:10px; } .battle-mode-discovery strong{ width:100%; font-size:16px; line-height:1.05; white-space:normal; text-align:center; } .battle-mode-discovery span{ width:100%; max-width:none; font-size:14px; line-height:1.15; white-space:normal; text-align:center; } } @media(max-width:390px){ .battle-mode-discovery{ min-height:96px; padding:14px 13px 15px; } .battle-mode-discovery strong{ font-size:15px; } .battle-mode-discovery span{ max-width:none; font-size:13px; line-height:1.18; } } /* ================================================================ BattleRanker V3.67 — RESULTS READY LINK POLISH Visual-only. Existing unlock/count/result behaviour is untouched. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .desktop-results-escape:not(.is-disabled){ color:var(--theme-battle-left) !important; cursor:pointer !important; transition:color .14s ease,text-shadow .14s ease; } .theme-battle-arena-v2 .desktop-results-escape:not(.is-disabled):hover{ color:var(--theme-role-text-ff5f86) !important; text-shadow:0 0 12px var(--theme-role-shadow-rgba-255-23-77-28-e8ed4d); cursor:pointer !important; } } /* ================================================================ BattleRanker V3.68 — PLAY THIS RANKING Random/topic feeds can jump directly into the current ranking. Desktop action sits under the ranking title; mobile uses the ⚡ sheet. Ranking-specific feeds hide it automatically via JS. ================================================================ */ .battle-card-play-ranking{ display:none; } @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-context-copy{ display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .theme-battle-arena-v2 .battle-card-context-copy > span{ justify-content:center; } .theme-battle-arena-v2 .battle-card-play-ranking:not([hidden]){ display:inline-block; margin-top:9px; padding:1px 3px 2px; color:var(--theme-role-text-f5f6fb); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:15px; line-height:1; font-style:normal; font-weight:1000; letter-spacing:.035em; text-decoration:none; text-transform:uppercase; cursor:pointer; transition:color .14s ease,text-shadow .14s ease,transform .14s ease; } .theme-battle-arena-v2 .battle-card-play-ranking:hover{ color:var(--theme-arena-electric); text-shadow:0 0 13px var(--theme-role-shadow-rgba-231-255-0-22-cb9295); transform:translateY(-1px); } } @media(max-width:680px){ .battle-card-play-ranking{ display:none !important; } .mobile-battle-options-list > #mobilePlayThisRankingOption:not([hidden]){ border-color:var(--theme-role-border-4b5574); background: linear-gradient(135deg,var(--theme-role-surface-rgba-91-32-200-08-52d8b0),var(--theme-role-surface-151b34) 72%); } .mobile-battle-options-list > #mobilePlayThisRankingOption::after{ color:var(--theme-arena-electric); } } /* ================================================================ BattleRanker V3.69 — FULL RANKING icon Match the yellow three-bar rankings icon used in the main header. Existing link behaviour is unchanged. ================================================================ */ .theme-battle-arena-v2 .battle-full-ranking-icon{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; margin-right:7px; color:var(--theme-role-text-e7ff00); flex:0 0 auto; transform:translateY(-1px); } .theme-battle-arena-v2 .battle-full-ranking-icon svg{ display:block; width:100%; height:100%; } .theme-battle-arena-v2 .battle-full-ranking-icon rect{ fill:currentColor; } .theme-battle-arena-v2 #battleCardRankingLink{ display:flex; align-items:center; justify-content:center; } @media(max-width:760px){ .theme-battle-arena-v2 .battle-full-ranking-icon{ width:15px; height:15px; margin-right:6px; } } /* ================================================================ BattleRanker V3.62 — STRONGER RANKING QUESTION / TITLE Desktop only. Adds the electric-yellow BattleRanker bolt immediately before the ranking title and gives the title a little more punch. Arena imagery and central lightning seam are untouched. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-title-line{ display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; } .theme-battle-arena-v2 .battle-card-title-bolt{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 21px; width:21px; height:26px; color:var(--theme-arena-electric); filter:drop-shadow(0 0 6px var(--theme-role-shadow-rgba-231-255-0-18-55f4af)); transform:rotate(-3deg); } .theme-battle-arena-v2 .battle-card-title-bolt svg{ display:block; width:100%; height:100%; } .theme-battle-arena-v2 .battle-card-title-bolt path{ fill:currentColor; } .theme-battle-arena-v2 .battle-card-title-line > strong{ display:block; min-width:0; color:var(--theme-role-text-fff); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:clamp(28px,2.75vw,39px); line-height:.93; font-style:italic; font-weight:1000; letter-spacing:-.04em; text-transform:uppercase; text-shadow:0 2px 10px var(--theme-role-shadow-rgba-0-0-0-22-41d185); } } /* ================================================================ BattleRanker V3.63 — COMPACT DESKTOP GAME MODES Matches the supplied desktop mock: centred GAME MODES label + three compact buttons. Mobile game-mode sheet and Battle arena geometry are untouched. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-mode-panel{ padding:8px 16px 13px !important; text-align:center; background:var(--theme-role-surface-11172e) !important; } .theme-battle-arena-v2 .desktop-game-modes-label{ display:block !important; margin:0 0 7px !important; color:var(--theme-role-text-f4f6fb) !important; font-family:Arial,Helvetica,sans-serif; font-size:12px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.035em !important; text-align:center !important; text-transform:uppercase !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes{ width:max-content !important; max-width:100% !important; min-height:0 !important; margin:0 auto !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; border:0 !important; border-radius:0 !important; overflow:visible !important; background:transparent !important; font-size:14px !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a{ position:relative !important; flex:0 0 192px !important; width:192px !important; min-width:192px !important; min-height:48px !important; margin:0 !important; padding:0 14px !important; display:flex !important; align-items:center !important; justify-content:center !important; border:1px solid var(--theme-role-border-59637f) !important; border-radius:7px !important; background:var(--theme-role-surface-0f1428) !important; color:var(--theme-role-text-f4f6fb) !important; box-shadow:none !important; font-family:Arial,Helvetica,sans-serif !important; font-size:13px !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.025em !important; text-decoration:none !important; text-transform:uppercase !important; white-space:nowrap !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a:hover{ border-color:var(--theme-role-border-8b95b1) !important; background:var(--theme-role-surface-151c35) !important; color:var(--theme-role-text-fff) !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a.active{ border:2px solid var(--theme-arena-electric) !important; background:var(--theme-role-surface-10162b) !important; color:var(--theme-role-text-fff) !important; box-shadow:0 0 0 1px var(--theme-role-shadow-rgba-231-255-0-08-1625d1) inset !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a.active::after{ content:none !important; display:none !important; } .theme-battle-arena-v2 .battle-card-mode-panel #desktopBattleMode.active::before{ content:"⚡"; display:inline-block; margin-right:9px; color:var(--theme-arena-electric); font-size:16px; line-height:1; font-weight:1000; transform:translateY(-1px); } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-mode-divider{ display:none !important; } } @media(max-width:900px) and (min-width:761px){ .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a{ flex-basis:165px !important; width:165px !important; min-width:165px !important; } } /* ================================================================ BattleRanker V3.64 — ACTIVE GAME MODE LIGHTNING Desktop only. Uses the same electric-yellow lightning silhouette used elsewhere. The icon is absolutely positioned so the centred mode text never shifts. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a{ position:relative !important; font-size:17px !important; letter-spacing:.015em !important; } /* Remove the earlier text lightning from NORMAL. */ .theme-battle-arena-v2 .battle-card-mode-panel #desktopBattleMode.active::before{ content:none !important; display:none !important; } /* Whichever mode is active gets the real BattleRanker lightning. */ .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a.active::before{ content:"" !important; display:block !important; position:absolute !important; left:15px !important; top:50% !important; width:14px !important; height:18px !important; margin:0 !important; transform:translateY(-50%) rotate(-3deg) !important; background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2018%2022%27%3E%3Cpath%20fill=%27%23e7ff00%27%20d=%27M10.6%200%202.2%2012.3h5.1L5.7%2022%2016%208.2h-5.4L10.6%200Z%27/%3E%3C/svg%3E") center/contain no-repeat !important; filter:drop-shadow(0 0 5px var(--theme-role-shadow-rgba-231-255-0-22-cb9295)) !important; pointer-events:none !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a.active::after{ content:none !important; display:none !important; } } @media(max-width:900px) and (min-width:761px){ .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a{ font-size:16px !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a.active::before{ left:12px !important; width:13px !important; height:17px !important; } } /* ================================================================ BattleRanker V3.65 — NORMAL MODE ACTIVE BOLT FIX The earlier NORMAL-specific rule was more specific than the generic active-mode rule, so it suppressed the bolt only on NORMAL. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-mode-panel #desktopBattleMode.active::before{ content:"" !important; display:block !important; position:absolute !important; left:15px !important; top:50% !important; width:14px !important; height:18px !important; margin:0 !important; transform:translateY(-50%) rotate(-3deg) !important; background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2018%2022%27%3E%3Cpath%20fill=%27%23e7ff00%27%20d=%27M10.6%200%202.2%2012.3h5.1L5.7%2022%2016%208.2h-5.4L10.6%200Z%27/%3E%3C/svg%3E") center/contain no-repeat !important; filter:drop-shadow(0 0 5px var(--theme-role-shadow-rgba-231-255-0-22-cb9295)) !important; pointer-events:none !important; } } @media(max-width:900px) and (min-width:761px){ .theme-battle-arena-v2 .battle-card-mode-panel #desktopBattleMode.active::before{ left:12px !important; width:13px !important; height:17px !important; } } /* ================================================================ BattleRanker V3.66 — FIND WINNER ACTIVE BOLT SPACING Give the longer FIND WINNER label a little extra breathing room without moving the centred text itself. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-mode-panel #desktopFindWinnerMode.active::before{ left:11px !important; } } @media(max-width:900px) and (min-width:761px){ .theme-battle-arena-v2 .battle-card-mode-panel #desktopFindWinnerMode.active::before{ left:8px !important; } } /* ================================================================ BattleRanker V3.67 — MODE RESULTS "INCOMING" Desktop presentation only. Quick 10 / Find Winner keep their existing completion and result mechanics; this simply keeps the context-band RESULTS area muted until their payoff. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-mode-incoming, .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-mode-incoming:hover{ color:var(--theme-role-text-707990) !important; opacity:.48 !important; text-shadow:none !important; animation:none !important; cursor:default !important; pointer-events:none !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-readiness.is-mode-incoming{ color:var(--theme-role-text-596279) !important; opacity:.72 !important; text-shadow:none !important; animation:none !important; } } /* BattleRanker V3.42 — clearer ranking-impact explanation */ .ranking-impact-toast small{ margin-top:10px !important; color:var(--theme-role-text-ffffff) !important; font-size:15px !important; font-weight:900 !important; line-height:1.25 !important; letter-spacing:.01em !important; } @media(max-width:680px){ .ranking-impact-toast small{ font-size:14px !important; line-height:1.25 !important; } } /* ================================================================ BattleRanker V3.69 — CALM MOBILE RESULTS REWARD Appears only after normal Battle feedback has had time to finish. ================================================================ */ .mobile-results-ready-notice{ display:none; } @media(max-width:680px){ .mobile-results-ready-notice{ position:fixed; left:12px; right:12px; bottom:14px; z-index:10040; display:block; box-sizing:border-box; min-height:118px; padding:17px 52px 16px 18px; border:1px solid var(--theme-role-border-39476b); border-top:4px solid var(--theme-role-border-dfff00); border-radius:13px; background:linear-gradient(180deg,var(--theme-role-surface-141b34) 0%,var(--theme-role-surface-0f152a) 100%); box-shadow:0 14px 34px var(--theme-role-shadow-rgba-0-0-0-42-dc1699); color:var(--theme-role-text-fff); transform:translateY(calc(100% + 30px)); opacity:0; transition:transform .38s cubic-bezier(.22,.8,.2,1),opacity .28s ease; } .mobile-results-ready-notice[hidden]{ display:none !important; } .mobile-results-ready-notice.is-visible{ transform:translateY(0); opacity:1; } .mobile-results-ready-kicker{ display:block; margin:0 0 6px; color:var(--theme-role-text-dfff00); font-size:12px; line-height:1; font-weight:1000; font-style:italic; letter-spacing:.08em; } .mobile-results-ready-notice > strong{ display:block; color:var(--theme-role-text-fff); font-size:20px; line-height:1.05; font-weight:1000; font-style:italic; } .mobile-results-ready-notice p{ max-width:520px; margin:7px 0 0; color:var(--theme-role-text-c2cada); font-size:13px; line-height:1.38; font-weight:750; } .mobile-results-ready-notice p b{ color:var(--theme-role-text-fff); font-weight:1000; } .mobile-results-ready-close{ position:absolute; top:10px; right:10px; width:34px; height:34px; padding:0; border:1px solid var(--theme-role-border-445174); border-radius:9px; background:var(--theme-role-surface-1a2240); color:var(--theme-role-text-dbe1ec); font-size:24px; line-height:30px; font-weight:500; cursor:pointer; } .mobile-battle-options-list > a#mobileShowResultsOption.is-results-highlight{ order:-100; border:2px solid var(--theme-role-border-ff4d5f) !important; background:linear-gradient(135deg,var(--theme-role-surface-rgba-255-77-95-17-44549e),var(--theme-role-surface-151b34) 72%) !important; box-shadow:0 0 0 1px var(--theme-role-shadow-rgba-255-77-95-12-a99478) inset,0 7px 20px var(--theme-role-shadow-rgba-0-0-0-20-d5b06a); opacity:1 !important; } .mobile-battle-options-list > a#mobileShowResultsOption.is-results-highlight::after{ color:var(--theme-role-text-ff5b6c) !important; } .mobile-battle-options-list > a#mobileShowResultsOption.is-results-highlight strong{ color:var(--theme-role-text-fff) !important; font-size:17px !important; } .mobile-battle-options-list > a#mobileShowResultsOption.is-results-highlight small{ color:var(--theme-role-text-ff9ba5) !important; } } /* BattleRanker V3.74 — mobile Battle Menu section hierarchy */ @media(max-width:680px){ .mobile-battle-options-list{ gap:10px; } .mobile-battle-options-section-title{ display:flex; align-items:center; gap:10px; margin:9px 2px 1px; color:var(--theme-role-text-8f99b4); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:10px; line-height:1; font-weight:1000; font-style:italic; letter-spacing:.14em; text-transform:uppercase; } .mobile-battle-options-section-title::before, .mobile-battle-options-section-title::after{ content:""; height:1px; flex:1 1 auto; background:var(--theme-role-surface-323a59); } .mobile-battle-options-section-title::before{ flex:0 0 18px; } .mobile-battle-options-list > a#mobileShowResultsOption{ order:-200; margin-bottom:2px; } } /* ================================================================ BattleRanker V3.75 — DESKTOP RESULTS READY NUDGE ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-results-action{ position:relative !important; overflow:visible !important; } .theme-battle-arena-v2 .battle-card-results-action.is-results-ready .desktop-results-escape::before{ content:"★"; display:inline-block; margin-right:6px; color:var(--theme-role-text-ffd84a); font-size:.92em; font-style:normal; line-height:1; transform:translateY(-1px); text-shadow:0 0 10px var(--theme-role-shadow-rgba-255-216-74-25-7645c5); } .theme-battle-arena-v2 .desktop-results-ready-nudge{ position:absolute; left:50%; bottom:calc(100% + 13px); z-index:180; width:max-content; min-width:190px; max-width:250px; box-sizing:border-box; padding:10px 13px 9px; border:1px solid var(--theme-role-border-d9bd36); border-radius:9px; background:linear-gradient(180deg,var(--theme-role-surface-171d34) 0%,var(--theme-role-surface-11172a) 100%); box-shadow:0 12px 28px var(--theme-role-shadow-rgba-0-0-0-34-c366e4); color:var(--theme-role-text-fff); text-align:left; pointer-events:none; opacity:0; transform:translate(-50%,10px) scale(.98); transition:opacity .2s ease,transform .28s cubic-bezier(.22,.8,.2,1); } .theme-battle-arena-v2 .desktop-results-ready-nudge[hidden]{ display:none !important; } .theme-battle-arena-v2 .desktop-results-ready-nudge.is-visible{ opacity:1; transform:translate(-50%,0) scale(1); } .theme-battle-arena-v2 .desktop-results-ready-nudge::after{ content:""; position:absolute; left:50%; top:100%; width:10px; height:10px; border-right:1px solid var(--theme-role-border-d9bd36); border-bottom:1px solid var(--theme-role-border-d9bd36); background:var(--theme-role-surface-11172a); transform:translate(-50%,-5px) rotate(45deg); } .theme-battle-arena-v2 .desktop-results-ready-nudge b{ display:block; color:var(--theme-role-text-ffd84a); font-size:11px; line-height:1.05; font-weight:1000; font-style:italic; letter-spacing:.055em; white-space:nowrap; } .theme-battle-arena-v2 .desktop-results-ready-nudge small{ display:block; margin-top:4px; color:var(--theme-role-text-c2cada); font-size:10px; line-height:1.2; font-weight:800; white-space:nowrap; } } @media(max-width:760px){ .desktop-results-ready-nudge{ display:none !important; } } \n\n/* ================================================================\n BattleRanker V3.60 — SONG BATTLES\n Songs are primarily title + artist. Optional artwork is deliberately a\n small thumbnail above the title instead of becoming a full-bleed arena.\n ================================================================ */\n.battle-stage.is-song-battle .battle-side .battle-image-wrap{\n background:\n radial-gradient(circle at 50% 34%,var(--theme-raw-rgba-255-255-255-05-44501a),transparent 30%),\n linear-gradient(180deg,var(--theme-raw-111721) 0%,var(--theme-raw-090d13) 100%);\n}\n.battle-stage.is-song-battle .battle-side .shade{\n background:linear-gradient(180deg,var(--theme-raw-rgba-0-0-0-02-bb2c70),var(--theme-raw-rgba-0-0-0-18-09884d));\n}\n.battle-stage.is-song-battle .battle-side:not(.no-image) img{\n inset:auto !important;\n left:50% !important;\n top:28% !important;\n width:112px !important;\n height:112px !important;\n border:2px solid var(--theme-raw-rgba-255-255-255-72-e6c6f1);\n border-radius:10px;\n object-fit:cover !important;\n object-position:center !important;\n box-shadow:0 10px 28px var(--theme-raw-rgba-0-0-0-48-c5c38f);\n transform:translate(-50%,-50%) !important;\n}\n.battle-stage.is-song-battle .battle-side:not(.no-image):hover img{\n transform:translate(-50%,-50%) scale(1.04) !important;\n filter:brightness(1.06);\n}\n.battle-stage.is-song-battle .battle-side:not(.no-image) .battle-copy,\n.battle-stage.is-song-battle .battle-side.right:not(.no-image) .battle-copy{\n top:47%;\n bottom:auto;\n left:34px;\n right:34px;\n align-items:center;\n text-align:center;\n}\n.battle-stage.is-song-battle .battle-copy strong,\n.battle-stage.is-song-battle .battle-side.right .battle-copy strong{\n max-width:94%;\n font-size:clamp(34px,3.7vw,54px);\n line-height:1.02;\n font-style:normal;\n font-weight:900;\n letter-spacing:-.035em;\n text-transform:none;\n text-align:center;\n}\n.battle-stage.is-song-battle .battle-copy small,\n.battle-stage.is-song-battle .battle-side.right .battle-copy small{\n display:block;\n max-width:94%;\n margin-top:8px;\n color:var(--theme-raw-rgba-255-255-255-72-e6c6f1);\n font-size:12px;\n line-height:1.1;\n font-weight:900;\n text-align:center;\n}\n.battle-stage.is-song-battle .battle-copy b,\n.battle-stage.is-song-battle .battle-side.right .battle-copy b{\n margin-top:14px;\n}\n\n@media(max-width:680px){\n .battle-stage.is-song-battle .battle-side:not(.no-image) img{\n top:21% !important;\n width:70px !important;\n height:70px !important;\n border-radius:8px;\n }\n .battle-stage.is-song-battle .battle-side:not(.no-image) .battle-copy,\n .battle-stage.is-song-battle .battle-side.right:not(.no-image) .battle-copy{\n top:43%;\n bottom:auto;\n left:18px;\n right:18px;\n transform:none;\n align-items:center;\n text-align:center;\n }\n .battle-stage.is-song-battle .battle-side.no-image .battle-copy,\n .battle-stage.is-song-battle .battle-side.right.no-image .battle-copy{\n top:50%;\n transform:translateY(-44%);\n }\n .battle-stage.is-song-battle .battle-copy strong,\n .battle-stage.is-song-battle .battle-side.right .battle-copy strong{\n max-width:94%;\n font-size:clamp(27px,8vw,38px);\n line-height:1.04;\n }\n .battle-stage.is-song-battle .battle-copy small,\n .battle-stage.is-song-battle .battle-side.right .battle-copy small{\n display:block !important;\n margin-top:7px;\n margin-bottom:0;\n font-size:10px;\n }\n .battle-stage.is-song-battle .battle-copy b,\n .battle-stage.is-song-battle .battle-side.right .battle-copy b{\n margin-top:11px;\n }\n}\n /* ================================================================ BattleRanker V3.63 — SONGS TITLE ICON Songs rankings use the double music note instead of the lightning bolt beside the ranking title. The category changes dynamically in Random feed, so battle-feed.php toggles .is-songs-category as each battle renders. ================================================================ */ .battle-card-title-song-note{ display:none; } @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-title-line.is-songs-category .battle-card-title-icon-bolt{ display:none !important; } .theme-battle-arena-v2 .battle-card-title-line.is-songs-category .battle-card-title-song-note{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; min-width:36px; color:var(--theme-arena-electric); font-family:"Segoe UI Symbol","Arial Unicode MS",Arial,sans-serif; font-size:38px; line-height:.8; font-style:normal; font-weight:1000; letter-spacing:-.08em; text-shadow:0 0 8px var(--theme-role-shadow-rgba-231-255-0-16-856f02); transform:translateY(-1px) rotate(-3deg); } } /* ================================================================ BattleRanker — ranking title icon Normal rankings = lightning Songs category = music note instead ================================================================ */ @media(min-width:761px){ /* Kill any old music-note pseudo element by default. */ .theme-battle-arena-v2 .battle-card-title-bolt::before, .theme-battle-arena-v2 .battle-card-title-bolt::after{ content:none !important; display:none !important; } /* Normal rankings keep the original lightning SVG. */ .theme-battle-arena-v2 .battle-card-title-bolt svg{ display:block !important; } /* Songs: hide lightning. */ .theme-battle-arena-v2 .battle-stage.is-song-battle .battle-card-title-bolt svg{ display:none !important; } /* Songs: replace it with the music note. */ .theme-battle-arena-v2 .battle-stage.is-song-battle .battle-card-title-bolt::after{ content:"♫" !important; display:block !important; color:var(--theme-role-text-e7ff00); font-family:Arial,Helvetica,sans-serif; font-size:24px; line-height:1; font-style:normal; font-weight:900; transform:rotate(2deg); } } /* ================================================================ BattleRanker V3.63.2 — DEFINITIVE SONGS TITLE ICON STATE The battle-stage category state is the single source of truth: Songs = note only. Everything else = lightning only. This deliberately overrides the earlier experimental title-icon rules. ================================================================ */ @media(min-width:761px){ /* Default / every non-Songs ranking: music note is impossible to show. */ .theme-battle-arena-v2 .battle-stage:not(.is-song-battle) .battle-card-title-song-note{ display:none !important; visibility:hidden !important; } /* Support both bolt class names used during the Battle Feed experiments. */ .theme-battle-arena-v2 .battle-stage:not(.is-song-battle) .battle-card-title-bolt, .theme-battle-arena-v2 .battle-stage:not(.is-song-battle) .battle-card-title-icon-bolt{ display:inline-flex !important; visibility:visible !important; } /* Songs: note replaces the lightning completely. */ .theme-battle-arena-v2 .battle-stage.is-song-battle .battle-card-title-bolt, .theme-battle-arena-v2 .battle-stage.is-song-battle .battle-card-title-icon-bolt{ display:none !important; visibility:hidden !important; } .theme-battle-arena-v2 .battle-stage.is-song-battle .battle-card-title-song-note{ display:inline-flex !important; visibility:visible !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; min-width:36px !important; color:var(--theme-arena-electric) !important; font-family:"Segoe UI Symbol","Arial Unicode MS",Arial,sans-serif !important; font-size:38px !important; line-height:.8 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:-.08em !important; text-shadow:0 0 8px var(--theme-role-shadow-rgba-231-255-0-16-856f02) !important; transform:translateY(-1px) rotate(-3deg) !important; } } /* ================================================================ BattleRanker V3.63.3 — MOBILE CONTENDER SUBTITLE / CONTEXT Restore the same optional context line used on desktop beneath the contender name, e.g. RICK GRIMES / The Walking Dead. Empty subtitles remain invisible. Battle image geometry untouched. ================================================================ */ @media(max-width:680px){ .theme-battle-arena .battle-copy small, .theme-battle-arena-v2 .battle-copy small{ display:block !important; order:2 !important; max-width:92% !important; min-height:0 !important; margin:6px 0 0 !important; color:var(--theme-role-text-rgba-255-255-255-76-baa335) !important; font-size:10px !important; line-height:1.12 !important; font-weight:800 !important; letter-spacing:.015em !important; text-shadow:0 2px 5px var(--theme-role-shadow-rgba-0-0-0-72-551182) !important; } .theme-battle-arena .battle-copy strong, .theme-battle-arena-v2 .battle-copy strong{ order:1 !important; } .theme-battle-arena .battle-copy b, .theme-battle-arena-v2 .battle-copy b{ order:3 !important; } /* Right contender keeps the same right alignment as its name. */ .theme-battle-arena .battle-side.right .battle-copy small, .theme-battle-arena-v2 .battle-side.right .battle-copy small{ text-align:right !important; } /* Do not reserve space when there is genuinely no context. */ .theme-battle-arena .battle-copy small:empty, .theme-battle-arena-v2 .battle-copy small:empty{ display:none !important; } } /* ================================================================ BattleRanker V3.64 — DESKTOP YELLOW TITLE-BAR TRIAL Inspired by the approved mock: - ranking title becomes a bold yellow bar ABOVE the contenders - the old title/category identity band beneath the photos disappears - VIEW RANKINGS sits bottom-left - GAME MODES remain centred - VIEW RESULTS sits bottom-right Mobile is deliberately untouched. ================================================================ */ @media(min-width:761px){ /* Allow the new title bar and image-overlay utilities to breathe. */ .theme-battle-arena-v2 .battle-stage{ position:relative !important; overflow:visible !important; padding-top:0 !important; } /* * The original top line already contains #rankingTitle. * Turn that existing title into the new full-width yellow header. */ .theme-battle-arena-v2 .battle-topline{ position:relative !important; z-index:95 !important; left:auto !important; right:auto !important; top:auto !important; display:flex !important; align-items:center !important; justify-content:center !important; min-height:76px !important; margin:0 !important; padding:10px 34px 8px !important; border:0 !important; background:transparent !important; pointer-events:none !important; } .theme-battle-arena-v2 .battle-topline > strong{ position:relative !important; z-index:2 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; max-width:none !important; min-height:58px !important; margin:0 !important; padding:8px 24px 9px !important; border:0 !important; border-radius:8px !important; background:var(--theme-arena-electric) !important; color:var(--theme-ink) !important; box-shadow:0 5px 0 var(--theme-role-shadow-rgba-0-0-0-24-120af2) !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:clamp(28px,2.65vw,42px) !important; line-height:.95 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:-.035em !important; text-align:center !important; text-transform:uppercase !important; white-space:normal !important; transform:none !important; } /* * RANKED BATTLE / TOPIC and SHARE / SKIP stay where they belong: * as quiet overlays at the top of the photography. */ .theme-battle-arena-v2 .battle-topline-left-actions, .theme-battle-arena-v2 .battle-topline-right-actions{ position:absolute !important; z-index:96 !important; top:84px !important; pointer-events:auto !important; } .theme-battle-arena-v2 .battle-topline-left-actions{ left:16px !important; } .theme-battle-arena-v2 .battle-topline-right-actions{ right:16px !important; margin-left:0 !important; } /* * The old lower identity strip is no longer needed because its title has * moved above the arena. Keep only its action links, repositioned below. */ .theme-battle-arena-v2 .battle-card-context{ display:contents !important; min-height:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } .theme-battle-arena-v2 .battle-card-context-copy{ display:none !important; } /* * The mode panel becomes the single bottom navigation rail. * Leave generous side zones for Rankings and Results. */ .theme-battle-arena-v2 .battle-card-mode-panel{ position:relative !important; z-index:3 !important; min-height:88px !important; padding:29px 245px 12px !important; border-top:1px solid var(--theme-role-border-303a57) !important; background:var(--theme-role-surface-11172e) !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-game-modes-label{ position:absolute !important; left:50% !important; top:9px !important; transform:translateX(-50%) !important; color:var(--theme-role-text-f0f2f7) !important; font-size:9px !important; line-height:1 !important; font-weight:1000 !important; letter-spacing:.08em !important; white-space:nowrap !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes{ min-height:48px !important; border:0 !important; background:transparent !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a, .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > span:not(.desktop-mode-divider):not(.desktop-topic-picker){ min-height:48px !important; border:1px solid var(--theme-role-border-56617f) !important; border-radius:7px !important; background:var(--theme-role-surface-151b35) !important; } .theme-battle-arena-v2 .battle-card-mode-panel .desktop-battle-modes > a + a{ margin-left:8px !important; } /* * Pull the existing Full Ranking / Results actions into that same rail. * No PHP/JS changes: their current URLs and lock/unlock logic are retained. */ .theme-battle-arena-v2 .battle-card-context-actions{ position:absolute !important; z-index:12 !important; left:0 !important; right:0 !important; bottom:0 !important; display:block !important; width:100% !important; height:88px !important; margin:0 !important; pointer-events:none !important; } .theme-battle-arena-v2 .battle-card-action-divider{ display:none !important; } .theme-battle-arena-v2 .battle-card-context-actions > #battleCardRankingLink{ position:absolute !important; left:24px !important; top:0 !important; bottom:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; min-width:195px !important; min-height:0 !important; padding:0 10px !important; border:0 !important; background:transparent !important; color:var(--theme-role-text-d8dce7) !important; text-decoration:none !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:0 !important; line-height:1 !important; font-weight:1000 !important; pointer-events:auto !important; } .theme-battle-arena-v2 .battle-card-context-actions > #battleCardRankingLink > *{ display:none !important; } .theme-battle-arena-v2 .battle-card-context-actions > #battleCardRankingLink::after{ content:"VIEW RANKINGS"; color:inherit; font-size:20px; line-height:1; font-style:normal; font-weight:1000; letter-spacing:.01em; } .theme-battle-arena-v2 .battle-card-context-actions > #battleCardRankingLink:hover{ color:var(--theme-arena-electric) !important; background:transparent !important; } .theme-battle-arena-v2 .battle-card-results-action{ position:absolute !important; right:24px !important; top:0 !important; bottom:0 !important; display:flex !important; min-width:195px !important; min-height:0 !important; padding:0 10px !important; align-items:center !important; justify-content:center !important; gap:0 !important; background:transparent !important; pointer-events:auto !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-ready-nudge, .theme-battle-arena-v2 .battle-card-results-action .desktop-results-readiness{ display:none !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape{ display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; color:var(--theme-role-text-d8dce7) !important; font-family:"Arial Narrow","Segoe UI",Arial,sans-serif !important; font-size:0 !important; line-height:1 !important; font-style:normal !important; font-weight:1000 !important; letter-spacing:.01em !important; text-decoration:none !important; opacity:.92 !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape::after{ content:"VIEW RESULTS"; color:inherit; font-size:20px; line-height:1; font-style:normal; font-weight:1000; letter-spacing:.01em; } /* Locked Results stays visibly muted; ready Results wakes up. */ .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-disabled, .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-not-ready{ color:var(--theme-role-text-747d94) !important; opacity:.62 !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-ready{ color:var(--theme-role-text-f2f4f8) !important; opacity:1 !important; text-shadow:none !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape.is-ready:hover{ color:var(--theme-arena-electric) !important; } /* Tighten the card now that the 92px identity band is gone. */ .theme-battle-arena-v2 .battle-visual{ border-top:1px solid var(--theme-role-border-46506d) !important; } .theme-battle-arena-v2 .battle-result{ border-top:1px solid var(--theme-role-border-303a57) !important; } } /* Slightly narrower desktop/laptop widths: protect the centre mode controls. */ @media(max-width:1100px) and (min-width:761px){ .theme-battle-arena-v2 .battle-card-mode-panel{ padding-left:190px !important; padding-right:190px !important; } .theme-battle-arena-v2 .battle-card-context-actions > #battleCardRankingLink, .theme-battle-arena-v2 .battle-card-results-action{ min-width:165px !important; } .theme-battle-arena-v2 .battle-card-context-actions > #battleCardRankingLink::after, .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape::after{ font-size:17px !important; } } /* ================================================================ BattleRanker V3.64.1 — DESKTOP "PICK WINNER" STICKER Small comic-book style instruction overlapping the bottom edge of the yellow ranking-title bar. Desktop only. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-stage::before{ content:"Pick Winner"; position:absolute; z-index:110; left:50%; top:76px; display:flex; align-items:center; justify-content:center; min-width:190px; min-height:38px; padding:2px 22px 3px; border:2px solid var(--theme-role-border-rgba-255-255-255-92-0fe0e3); border-radius:5px; background:var(--theme-role-surface-06080d); color:var(--theme-role-text-fff); box-shadow:0 4px 0 var(--theme-role-shadow-rgba-0-0-0-38-fba052); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:20px; line-height:1; font-style:normal; font-weight:1000; letter-spacing:-.015em; text-transform:none; white-space:nowrap; pointer-events:none; transform:translate(-50%,-50%) rotate(-2deg); } /* Completion state is no longer asking the user to choose. */ .theme-battle-arena-v2 .battle-stage.feed-ended::before{ display:none !important; } } /* ================================================================ BattleRanker V3.64.2 — PICK WINNER STICKER MOCK MATCH Shorter, rounder, larger type, and sits lower so it covers less of the yellow title bar. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-stage::before{ top:80px !important; min-width:210px !important; min-height:30px !important; padding:0 24px 2px !important; border-width:2px !important; border-radius:10px !important; box-shadow:0 3px 0 var(--theme-role-shadow-rgba-0-0-0-34-c366e4) !important; font-size:23px !important; line-height:1 !important; letter-spacing:-.025em !important; transform:translate(-50%,-50%) rotate(-1.5deg) !important; } } /* ================================================================ BattleRanker V3.64.2R — YELLOW HEADER ROLLBACK Restores the clean yellow title-bar design and centered Pick Winner sticker. Keeps a slightly stronger post-vote percentage treatment. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-stage.has-result .result-bar b{ font-size:28px !important; font-weight:1000 !important; font-style:italic !important; line-height:1 !important; color:var(--theme-role-text-fff) !important; text-shadow:0 2px 3px var(--theme-role-shadow-rgba-0-0-0-28-ca0b96) !important; } } /* ================================================================ BattleRanker V3.64.2R1 — REMOVE DUPLICATE DESKTOP RESULTS LABEL Keep the existing clickable ★ RESULTS link after unlock. Remove the leftover VIEW RESULTS pseudo-label from the earlier desktop layout experiment. ================================================================ */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape{ font-size:20px !important; } .theme-battle-arena-v2 .battle-card-results-action .desktop-results-escape::after{ content:none !important; display:none !important; } .theme-battle-arena-v2 .battle-card-results-action.is-results-ready .desktop-results-escape::before{ content:"★" !important; display:inline-block !important; margin-right:6px !important; color:var(--theme-role-text-ffd84a) !important; } } /* BattleRanker V3.60.1 — Songs: ghost notes + lower pick chips. */ .battle-stage.is-song-battle .battle-side .battle-image-wrap{isolation:isolate;overflow:hidden;} .battle-stage.is-song-battle .battle-side .battle-image-wrap::before,.battle-stage.is-song-battle .battle-side .battle-image-wrap::after{position:absolute;z-index:0;color:var(--theme-arena-electric);font-family:"Segoe UI Symbol","Segoe UI",Arial,sans-serif;font-style:normal;font-weight:1000;line-height:1;pointer-events:none;user-select:none;} .battle-stage.is-song-battle .battle-side .battle-image-wrap::before{content:"♫";right:10%;top:14%;font-size:190px;opacity:.055;transform:rotate(-12deg);} .battle-stage.is-song-battle .battle-side .battle-image-wrap::after{content:"♪";left:9%;bottom:8%;font-size:112px;opacity:.035;transform:rotate(11deg);} .battle-stage.is-song-battle .battle-side img{z-index:2;} .battle-stage.is-song-battle .battle-side .battle-copy{z-index:4;} @media(min-width:681px){.battle-stage.is-song-battle .battle-copy b,.battle-stage.is-song-battle .battle-side.right .battle-copy b{position:absolute;top:138px;margin-top:0!important;}} @media(max-width:680px){.battle-stage.is-song-battle .battle-side .battle-image-wrap::before{right:6%;top:13%;font-size:108px;opacity:.055}.battle-stage.is-song-battle .battle-side .battle-image-wrap::after{left:7%;bottom:7%;font-size:72px;opacity:.032}.battle-stage.is-song-battle .battle-copy b,.battle-stage.is-song-battle .battle-side.right .battle-copy b{position:absolute;top:92px;margin-top:0!important;}} /* ================================================================ BattleRanker V3.60.2 — Songs thumbnail + corner pick controls Keep song title/artist visually clean. Pick controls live at the lower outside corners while cover art remains a small square thumb. ================================================================ */ @media(min-width:681px){ .battle-stage.is-song-battle .battle-side .battle-copy, .battle-stage.is-song-battle .battle-side.right .battle-copy{ top:0 !important; bottom:0 !important; left:34px !important; right:34px !important; transform:none !important; justify-content:center !important; align-items:center !important; text-align:center !important; } .battle-stage.is-song-battle .battle-copy b, .battle-stage.is-song-battle .battle-side.right .battle-copy b{ position:absolute !important; top:auto !important; bottom:24px !important; margin:0 !important; } .battle-stage.is-song-battle .battle-side.left .battle-copy b{ left:0 !important; right:auto !important; } .battle-stage.is-song-battle .battle-side.right .battle-copy b{ right:0 !important; left:auto !important; } .battle-stage.is-song-battle .battle-side:not(.no-image) img{ top:27% !important; width:116px !important; height:116px !important; } .battle-stage.is-song-battle .battle-side:not(.no-image) .battle-copy strong, .battle-stage.is-song-battle .battle-side:not(.no-image) .battle-copy small{ transform:translateY(38px); } } @media(max-width:680px){ .battle-stage.is-song-battle .battle-side .battle-copy, .battle-stage.is-song-battle .battle-side.right .battle-copy{ top:0 !important; bottom:0 !important; left:18px !important; right:18px !important; transform:none !important; justify-content:center !important; align-items:center !important; text-align:center !important; } .battle-stage.is-song-battle .battle-copy b, .battle-stage.is-song-battle .battle-side.right .battle-copy b{ position:absolute !important; top:auto !important; bottom:14px !important; margin:0 !important; } .battle-stage.is-song-battle .battle-side.left .battle-copy b{ left:0 !important; right:auto !important; } .battle-stage.is-song-battle .battle-side.right .battle-copy b{ right:0 !important; left:auto !important; } .battle-stage.is-song-battle .battle-side:not(.no-image) .battle-copy strong, .battle-stage.is-song-battle .battle-side:not(.no-image) .battle-copy small{ transform:translateY(25px); } } /* ================================================================ BattleRanker V3.60.3 — Songs centred cover thumbnails Shared/individual song artwork is a small centred cover above the title. Do not let the normal full-bleed contender image positioning influence it. ================================================================ */ @media(min-width:681px){ .battle-stage.is-song-battle .battle-side .battle-image-wrap{ display:flex !important; align-items:flex-start !important; justify-content:center !important; padding-top:112px !important; } .battle-stage.is-song-battle .battle-side:not(.no-image) .battle-image-wrap > img{ position:relative !important; inset:auto !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; flex:0 0 auto !important; width:116px !important; height:116px !important; margin:0 !important; object-fit:cover !important; object-position:center center !important; transform:none !important; } .battle-stage.is-song-battle .battle-side:not(.no-image):hover .battle-image-wrap > img, .battle-stage.is-song-battle .battle-side.picked .battle-image-wrap > img, .battle-stage.is-song-battle .battle-side.picked:hover .battle-image-wrap > img{ transform:scale(1.035) !important; } } @media(max-width:680px){ .battle-stage.is-song-battle .battle-side .battle-image-wrap{ display:flex !important; align-items:flex-start !important; justify-content:center !important; padding-top:36px !important; } .battle-stage.is-song-battle .battle-side:not(.no-image) .battle-image-wrap > img{ position:relative !important; inset:auto !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; flex:0 0 auto !important; width:70px !important; height:70px !important; margin:0 !important; object-fit:cover !important; object-position:center center !important; transform:none !important; } } /* ================================================================ Battle effect preset: fist-shatter-1 The fist is a 6.6KB cached sprite. Image fragments are temporary clones. ================================================================ */ .battle-effects-enabled-page .battle-fist-shatter-sprite{ position:absolute; z-index:31; left:50%; top:65%; bottom:auto; display:block; width:clamp(165px,22vw,285px); height:auto; aspect-ratio:2 / 3; background:url('../img/effects/fist-shatter-1.webp') center/contain no-repeat; opacity:0; visibility:hidden; pointer-events:none; user-select:none; filter: drop-shadow(4px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(-4px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 4px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 -4px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 0 10px var(--theme-role-shadow-rgba-223-255-0-95-c0f288)) drop-shadow(0 10px 18px var(--theme-role-shadow-rgba-0-0-0-62-cfa90c)); will-change:transform,opacity; } .battle-effects-enabled-page .battle-visual.effect-fist-shatter-1.is-effect-active .battle-side.effect-fist-shatter-1-loser{ overflow:hidden !important; background:var(--theme-role-surface-020405); } .battle-effects-enabled-page .battle-visual.effect-fist-shatter-1.is-effect-active .battle-side.effect-fist-shatter-1-loser .battle-fist-shatter-sprite{ visibility:visible; animation:brtest-fist-uppercut 1.1s cubic-bezier(.18,.76,.2,1) both; } .battle-effects-enabled-page .battle-side.effect-fist-shatter-1-loser > .battle-image-wrap:not(.battle-fist-shard){ animation:brtest-fist-original-hide .05s .24s linear both; } .battle-effects-enabled-page .battle-side.effect-fist-shatter-1-loser > .battle-copy{ animation:brtest-fist-copy-hide .08s .23s linear both; } .battle-effects-enabled-page .battle-fist-shard{ z-index:18 !important; opacity:1; pointer-events:none !important; animation:brtest-fist-shard-burst .95s .23s cubic-bezier(.2,.68,.24,1) both !important; will-change:transform,opacity; } .battle-effects-enabled-page .battle-fist-shard-1{ --brfist-sx:-8%;--brfist-sy:-6%;--brfist-sr:-7deg; --brfist-fx:-12%;--brfist-fy:92%;--brfist-fr:-16deg; clip-path:polygon(0 0,35% 0,28% 32%,0 41%); } .battle-effects-enabled-page .battle-fist-shard-2{ --brfist-sx:-3%;--brfist-sy:-9%;--brfist-sr:5deg; --brfist-fx:-5%;--brfist-fy:108%;--brfist-fr:12deg; clip-path:polygon(35% 0,70% 0,62% 35%,28% 32%); } .battle-effects-enabled-page .battle-fist-shard-3{ --brfist-sx:8%;--brfist-sy:-7%;--brfist-sr:8deg; --brfist-fx:12%;--brfist-fy:96%;--brfist-fr:18deg; clip-path:polygon(70% 0,100% 0,100% 42%,62% 35%); } .battle-effects-enabled-page .battle-fist-shard-4{ --brfist-sx:-10%;--brfist-sy:0%;--brfist-sr:-9deg; --brfist-fx:-14%;--brfist-fy:102%;--brfist-fr:-22deg; clip-path:polygon(0 41%,28% 32%,45% 55%,25% 72%,0 65%); } .battle-effects-enabled-page .battle-fist-shard-5{ --brfist-sx:2%;--brfist-sy:3%;--brfist-sr:6deg; --brfist-fx:4%;--brfist-fy:116%;--brfist-fr:15deg; clip-path:polygon(28% 32%,62% 35%,72% 62%,45% 55%); } .battle-effects-enabled-page .battle-fist-shard-6{ --brfist-sx:10%;--brfist-sy:0%;--brfist-sr:10deg; --brfist-fx:14%;--brfist-fy:106%;--brfist-fr:24deg; clip-path:polygon(62% 35%,100% 42%,100% 70%,72% 62%); } .battle-effects-enabled-page .battle-fist-shard-7{ --brfist-sx:-8%;--brfist-sy:5%;--brfist-sr:8deg; --brfist-fx:-10%;--brfist-fy:98%;--brfist-fr:19deg; clip-path:polygon(0 65%,25% 72%,45% 55%,55% 100%,0 100%); } .battle-effects-enabled-page .battle-fist-shard-8{ --brfist-sx:8%;--brfist-sy:6%;--brfist-sr:-7deg; --brfist-fx:12%;--brfist-fy:112%;--brfist-fr:-18deg; clip-path:polygon(45% 55%,72% 62%,100% 70%,100% 100%,55% 100%); } .battle-effects-enabled-page .battle-fist-impact{ position:absolute; z-index:29; top:67%; left:50%; width:min(66%,360px); aspect-ratio:1; opacity:0; pointer-events:none; background: repeating-conic-gradient(from 4deg,var(--theme-role-surface-rgba-255-255-255-95-fb7089) 0 2deg,transparent 2deg 17deg), radial-gradient(circle,var(--theme-role-surface-rgba-255-255-255-96-da3d8a),var(--theme-role-surface-rgba-223-255-0-62-638c39) 16%,var(--theme-role-surface-rgba-255-139-27-28-fc1ceb) 38%,transparent 67%); clip-path:polygon(50% 0,57% 35%,75% 7%,68% 39%,100% 24%,72% 47%,96% 60%,68% 58%,83% 91%,59% 66%,50% 100%,43% 65%,17% 91%,33% 58%,4% 63%,29% 48%,0 26%,34% 40%,24% 7%,44% 35%); transform:translate(-50%,-50%) scale(.2); animation:brtest-fist-impact .29s .19s ease-out both; } @keyframes brtest-fist-uppercut{ 0%{opacity:0;transform:translate3d(-50%,100%,0) scale(.72)} 7%{opacity:1} 21%{opacity:1;transform:translate3d(-50%,-12%,0) scale(1.01)} 27%{opacity:1;transform:translate3d(-50%,-15%,0) scale(1.07)} 55%{opacity:1;transform:translate3d(-50%,-15%,0) scale(1.07)} 65%{opacity:1;transform:translate3d(-50%,-7%,0) scale(1.02)} 92%{opacity:.96;transform:translate3d(-50%,92%,0) scale(.88)} 100%{opacity:0;transform:translate3d(-50%,108%,0) scale(.82)} } @keyframes brtest-fist-original-hide{ 0%,92%{opacity:1} 100%{opacity:0} } @keyframes brtest-fist-copy-hide{ 0%{opacity:1;transform:translate3d(0,0,0)} 100%{opacity:0;transform:translate3d(0,-8px,0)} } @keyframes brtest-fist-shard-burst{ 0%,5%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1);filter:brightness(1)} 17%{opacity:1;transform:translate3d(0,-3%,0) rotate(1deg) scale(.99);filter:brightness(1.18)} 38%{opacity:1;transform:translate3d(var(--brfist-sx),var(--brfist-sy),0) rotate(var(--brfist-sr)) scale(.94);filter:brightness(.88)} 70%{opacity:.96;transform:translate3d(var(--brfist-sx),var(--brfist-sy),0) rotate(var(--brfist-sr)) scale(.94);filter:brightness(.78)} 100%{opacity:0;transform:translate3d(var(--brfist-fx),var(--brfist-fy),0) rotate(var(--brfist-fr)) scale(.82);filter:brightness(.42)} } @keyframes brtest-fist-impact{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)} 30%{opacity:1;transform:translate(-50%,-50%) scale(.86) rotate(2deg)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.24) rotate(7deg)} } @media(max-width:680px){ .battle-effects-enabled-page .battle-fist-shatter-sprite{ top:65%; bottom:auto; width:clamp(112px,35vw,155px); filter: drop-shadow(3px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(-3px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 3px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 -3px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 0 8px var(--theme-role-shadow-rgba-223-255-0-98-c8d6d5)) drop-shadow(0 7px 12px var(--theme-role-shadow-rgba-0-0-0-58-b16608)); } .battle-effects-enabled-page .battle-fist-impact{ width:min(74%,230px); } } @media(prefers-reduced-motion:reduce){ .battle-effects-enabled-page .battle-fist-shatter-sprite, .battle-effects-enabled-page .battle-fist-shard, .battle-effects-enabled-page .battle-fist-impact, .battle-effects-enabled-page .battle-side.effect-fist-shatter-1-loser > .battle-image-wrap, .battle-effects-enabled-page .battle-side.effect-fist-shatter-1-loser > .battle-copy{ animation:none !important; } } /* ================================================================ Battle effect preset: alien-ray-1 One compact sprite; the ray, glow, cinders and melt are CSS-only. ================================================================ */ .battle-effects-enabled-page .battle-alien-ray-sprite{ position:absolute; z-index:38; left:14%; bottom:-2%; display:block; width:clamp(200px,22vw,300px); aspect-ratio:400 / 435; opacity:0; visibility:hidden; pointer-events:none; background:url('../img/effects/alien-ray-1.webp') center/contain no-repeat; filter: drop-shadow(2px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(-2px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 2px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 -2px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 0 12px var(--theme-role-shadow-rgba-54-255-77-78-3de383)) drop-shadow(0 10px 18px var(--theme-role-shadow-rgba-0-0-0-72-551182)); will-change:transform,opacity; } .battle-effects-enabled-page .battle-visual.effect-alien-ray-1.is-effect-active.effect-loser-right .battle-alien-ray-sprite{ visibility:visible; animation:brtest-alien-rise-right 1.55s cubic-bezier(.2,.74,.18,1) both; } .battle-effects-enabled-page .battle-visual.effect-alien-ray-1.is-effect-active.effect-loser-left .battle-alien-ray-sprite{ left:auto; right:14%; visibility:visible; animation:brtest-alien-rise-left 1.55s cubic-bezier(.2,.74,.18,1) both; } .battle-effects-enabled-page .battle-alien-ray-beam{ position:absolute; z-index:37; top:76%; display:block; height:7px; opacity:0; visibility:hidden; pointer-events:none; background:linear-gradient(90deg,var(--theme-role-surface-fff) 0 7%,var(--theme-role-surface-dfff00) 24%,var(--theme-role-surface-54ff3d) 72%,var(--theme-role-surface-fff) 100%); border-radius:999px; box-shadow: 0 0 4px var(--theme-role-shadow-fff), 0 0 10px var(--theme-role-shadow-dfff00), 0 0 21px var(--theme-role-shadow-rgba-57-255-60-95-73caed), 0 0 36px var(--theme-role-shadow-rgba-57-255-60-58-bfda29); will-change:transform,opacity; } .battle-effects-enabled-page .battle-alien-ray-beam::after{ content:""; position:absolute; top:50%; width:38px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,var(--theme-role-surface-fff) 0 9%,var(--theme-role-surface-dfff00) 22%,var(--theme-role-surface-rgba-63-255-51-85-f9c765) 42%,transparent 72%); transform:translateY(-50%) scale(.3); } .battle-effects-enabled-page .battle-visual.effect-alien-ray-1.is-effect-active.effect-loser-right .battle-alien-ray-beam{ left:38%; width:62%; visibility:visible; transform-origin:left center; animation:brtest-alien-beam-right .42s .38s ease-out both; } .battle-effects-enabled-page .battle-visual.effect-alien-ray-1.is-effect-active.effect-loser-right .battle-alien-ray-beam::after{ right:-10px; animation:brtest-alien-ray-impact .35s .48s ease-out both; } .battle-effects-enabled-page .battle-visual.effect-alien-ray-1.is-effect-active.effect-loser-left .battle-alien-ray-beam{ right:38%; width:62%; visibility:visible; transform-origin:right center; background:linear-gradient(90deg,var(--theme-role-surface-fff) 0%,var(--theme-role-surface-54ff3d) 28%,var(--theme-role-surface-dfff00) 76%,var(--theme-role-surface-fff) 93%); animation:brtest-alien-beam-left .42s .38s ease-out both; } .battle-effects-enabled-page .battle-visual.effect-alien-ray-1.is-effect-active.effect-loser-left .battle-alien-ray-beam::after{ left:-10px; animation:brtest-alien-ray-impact .35s .48s ease-out both; } .battle-effects-enabled-page .battle-side.effect-alien-ray-1-loser{ background:var(--theme-role-surface-020403); } .battle-effects-enabled-page .battle-side.effect-alien-ray-1-loser > .battle-image-wrap:not(.battle-alien-shard){ transform-origin:center bottom; animation:brtest-alien-char-burn 1.08s .48s cubic-bezier(.25,.7,.34,1) both; will-change:transform,opacity,filter; } .battle-effects-enabled-page .battle-side.effect-alien-ray-1-loser > .battle-copy{ animation:brtest-alien-copy-burn .62s .5s ease-out both; } .battle-effects-enabled-page .battle-side.effect-alien-ray-1-winner .shade::after{ content:""; position:absolute; inset:0; opacity:0; pointer-events:none; background:radial-gradient(circle at 50% 74%,var(--theme-role-surface-rgba-223-255-0-28-f300b1),var(--theme-role-surface-rgba-39-255-65-12-60e69b) 36%,transparent 70%); mix-blend-mode:screen; animation:brtest-alien-winner-glow .85s .12s ease-out both; } .battle-effects-enabled-page .battle-alien-ray-cinders{ position:absolute; z-index:32; inset:0; display:block; opacity:0; overflow:hidden; pointer-events:none; background: radial-gradient(circle at 14% 83%,var(--theme-role-surface-ffae28) 0 2px,transparent 3px), radial-gradient(circle at 27% 68%,var(--theme-role-surface-dfff00) 0 2px,transparent 3px), radial-gradient(circle at 39% 91%,var(--theme-role-surface-ff7426) 0 3px,transparent 4px), radial-gradient(circle at 51% 76%,var(--theme-role-surface-fff0a4) 0 2px,transparent 3px), radial-gradient(circle at 63% 86%,var(--theme-role-surface-ff9e27) 0 3px,transparent 4px), radial-gradient(circle at 76% 71%,var(--theme-role-surface-dfff00) 0 2px,transparent 3px), radial-gradient(circle at 88% 90%,var(--theme-role-surface-ff6b20) 0 3px,transparent 4px), linear-gradient(to top,var(--theme-role-surface-rgba-0-0-0-72-551182),transparent 42%); filter:drop-shadow(0 0 5px var(--theme-role-shadow-rgba-255-112-24-9-0cd88b)); } .battle-effects-enabled-page .battle-alien-ray-cinders::before{ content:""; position:absolute; inset:0; opacity:0; background:radial-gradient(circle at 50% 50%,var(--theme-role-surface-fff) 0 3%,var(--theme-role-surface-dfff00) 10%,var(--theme-role-surface-rgba-53-255-55-75-5aefa8) 25%,transparent 58%); mix-blend-mode:screen; } .battle-effects-enabled-page .battle-alien-ray-cinders::after{ content:""; position:absolute; left:10%; right:8%; bottom:-4%; height:38%; opacity:0; background: radial-gradient(ellipse at 22% 85%,var(--theme-role-surface-rgba-8-8-7-88-db987f),transparent 58%), radial-gradient(ellipse at 52% 78%,var(--theme-role-surface-rgba-17-16-13-9-4e7e62),transparent 62%), radial-gradient(ellipse at 80% 88%,var(--theme-role-surface-rgba-5-5-4-86-bb9194),transparent 56%); filter:blur(7px); } .battle-effects-enabled-page .battle-side.effect-alien-ray-1-loser > .battle-alien-ray-cinders{ animation:brtest-alien-cinders 1.05s .48s ease-out both; } .battle-effects-enabled-page .battle-side.effect-alien-ray-1-loser > .battle-alien-ray-cinders::before{ animation:brtest-alien-burn-flash .34s .48s ease-out both; } .battle-effects-enabled-page .battle-side.effect-alien-ray-1-loser > .battle-alien-ray-cinders::after{ animation:brtest-alien-ash-cloud .9s .68s ease-out both; } .battle-effects-enabled-page .battle-alien-shard{ position:absolute; z-index:31; inset:0; opacity:0; pointer-events:none; transform-origin:center center; animation:brtest-alien-shard-fall 1.02s .52s cubic-bezier(.2,.7,.25,1) both; will-change:transform,opacity,filter; } .battle-effects-enabled-page .battle-alien-shard-1{ --bralien-x:-14%;--bralien-y:72%;--bralien-r:-18deg; clip-path:polygon(0 0,34% 0,30% 34%,0 39%); } .battle-effects-enabled-page .battle-alien-shard-2{ --bralien-x:-3%;--bralien-y:84%;--bralien-r:12deg; clip-path:polygon(34% 0,68% 0,65% 31%,30% 34%); } .battle-effects-enabled-page .battle-alien-shard-3{ --bralien-x:13%;--bralien-y:68%;--bralien-r:20deg; clip-path:polygon(68% 0,100% 0,100% 38%,65% 31%); } .battle-effects-enabled-page .battle-alien-shard-4{ --bralien-x:-18%;--bralien-y:91%;--bralien-r:-24deg; clip-path:polygon(0 39%,30% 34%,36% 69%,0 64%); } .battle-effects-enabled-page .battle-alien-shard-5{ --bralien-x:2%;--bralien-y:106%;--bralien-r:-9deg; clip-path:polygon(30% 34%,65% 31%,70% 67%,36% 69%); } .battle-effects-enabled-page .battle-alien-shard-6{ --bralien-x:19%;--bralien-y:88%;--bralien-r:27deg; clip-path:polygon(65% 31%,100% 38%,100% 68%,70% 67%); } .battle-effects-enabled-page .battle-alien-shard-7{ --bralien-x:-12%;--bralien-y:116%;--bralien-r:-16deg; clip-path:polygon(0 64%,36% 69%,31% 100%,0 100%); } .battle-effects-enabled-page .battle-alien-shard-8{ --bralien-x:0%;--bralien-y:124%;--bralien-r:14deg; clip-path:polygon(36% 69%,70% 67%,67% 100%,31% 100%); } .battle-effects-enabled-page .battle-alien-shard-9{ --bralien-x:15%;--bralien-y:110%;--bralien-r:23deg; clip-path:polygon(70% 67%,100% 68%,100% 100%,67% 100%); } @keyframes brtest-alien-rise-right{ 0%{opacity:0;transform:translate3d(0,105%,0) scale(.86)} 12%{opacity:1} 25%{opacity:1;transform:translate3d(0,8%,0) scale(1)} 72%{opacity:1;transform:translate3d(0,8%,0) scale(1)} 100%{opacity:0;transform:translate3d(0,108%,0) scale(.9)} } @keyframes brtest-alien-rise-left{ 0%{opacity:0;transform:translate3d(0,105%,0) scaleX(-1) scale(.86)} 12%{opacity:1} 25%{opacity:1;transform:translate3d(0,8%,0) scaleX(-1) scale(1)} 72%{opacity:1;transform:translate3d(0,8%,0) scaleX(-1) scale(1)} 100%{opacity:0;transform:translate3d(0,108%,0) scaleX(-1) scale(.9)} } @keyframes brtest-alien-beam-right{ 0%{opacity:0;transform:scaleX(0)} 24%{opacity:1;transform:scaleX(.12)} 48%{opacity:1;transform:scaleX(1)} 72%{opacity:1;transform:scaleX(1)} 100%{opacity:0;transform:scaleX(1)} } @keyframes brtest-alien-beam-left{ 0%{opacity:0;transform:scaleX(0)} 24%{opacity:1;transform:scaleX(.12)} 48%{opacity:1;transform:scaleX(1)} 72%{opacity:1;transform:scaleX(1)} 100%{opacity:0;transform:scaleX(1)} } @keyframes brtest-alien-ray-impact{ 0%{opacity:0;transform:translateY(-50%) scale(.25)} 35%{opacity:1;transform:translateY(-50%) scale(1)} 100%{opacity:0;transform:translateY(-50%) scale(2.1)} } @keyframes brtest-alien-char-burn{ 0%,7%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:brightness(.58) saturate(.65)} 16%{opacity:1;transform:translate3d(0,0,0) scale(1.012);filter:brightness(1.8) saturate(1.7) sepia(.35) hue-rotate(45deg)} 28%{opacity:1;transform:translate3d(0,0,0) scale(.997);filter:grayscale(.65) sepia(1) saturate(3.4) hue-rotate(335deg) brightness(.3) contrast(1.8)} 62%{opacity:.72;transform:translate3d(0,2%,0) scale(.985);filter:grayscale(1) sepia(1) brightness(.07) contrast(2.3)} 100%{opacity:0;transform:translate3d(0,9%,0) scale(.95);filter:grayscale(1) brightness(0) contrast(2.5)} } @keyframes brtest-alien-shard-fall{ 0%,5%{opacity:0;transform:translate3d(0,0,0) rotate(0) scale(1);filter:brightness(1.7) saturate(1.5)} 14%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1);filter:grayscale(.6) sepia(1) saturate(3) brightness(.34) contrast(1.9)} 38%{opacity:.98;transform:translate3d(0,8%,0) rotate(0) scale(.98);filter:grayscale(1) sepia(1) brightness(.13) contrast(2.2)} 72%{opacity:.9;transform:translate3d(var(--bralien-x),48%,0) rotate(7deg) scale(.9);filter:grayscale(1) brightness(.055) contrast(2.4)} 100%{opacity:0;transform:translate3d(var(--bralien-x),var(--bralien-y),0) rotate(var(--bralien-r)) scale(.76);filter:grayscale(1) brightness(.02) contrast(2.5)} } @keyframes brtest-alien-burn-flash{ 0%{opacity:0;transform:scale(.45)} 38%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.5)} } @keyframes brtest-alien-ash-cloud{ 0%{opacity:0;transform:translateY(10%) scale(.8)} 35%{opacity:.82;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-32%) scale(1.24)} } @keyframes brtest-alien-copy-burn{ 0%,10%{opacity:1;filter:none} 38%{opacity:.8;filter:sepia(1) brightness(.5)} 100%{opacity:0;filter:brightness(0);transform:translateY(12px)} } @keyframes brtest-alien-winner-glow{ 0%{opacity:0} 35%{opacity:.9} 100%{opacity:0} } @keyframes brtest-alien-cinders{ 0%{opacity:0;transform:translate3d(0,-5%,0) scale(.94)} 18%{opacity:1} 62%{opacity:.95;transform:translate3d(0,5%,0) scale(1)} 100%{opacity:0;transform:translate3d(0,28%,0) scale(.9)} } @media(max-width:680px){ .battle-effects-enabled-page .battle-alien-ray-sprite{ bottom:auto; width:clamp(145px,48vw,188px); filter: drop-shadow(2px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(-2px 0 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 2px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 -2px 0 var(--theme-role-shadow-dfff00)) drop-shadow(0 0 9px var(--theme-role-shadow-rgba-54-255-77-85-7f8bdc)) drop-shadow(0 7px 12px var(--theme-role-shadow-rgba-0-0-0-68-b6899b)); } .battle-effects-enabled-page .battle-visual.effect-alien-ray-1.is-effect-active.effect-loser-right .battle-alien-ray-sprite{ top:75%; left:-3%; right:auto; animation-name:brtest-alien-mobile-right; } .battle-effects-enabled-page .battle-visual.effect-alien-ray-1.is-effect-active.effect-loser-left .battle-alien-ray-sprite{ top:28%; left:auto; right:-3%; animation-name:brtest-alien-mobile-left; } .battle-effects-enabled-page .battle-alien-ray-beam{ height:5px; } .battle-effects-enabled-page .battle-visual.effect-alien-ray-1.is-effect-active.effect-loser-right .battle-alien-ray-beam{ top:82%; left:40%; right:auto; width:60%; } .battle-effects-enabled-page .battle-visual.effect-alien-ray-1.is-effect-active.effect-loser-left .battle-alien-ray-beam{ /* Top-image mobile case: bring the ray down by another 5px. */ top:calc(34% + 5px); left:auto; right:40%; width:60%; } @keyframes brtest-alien-mobile-right{ 0%{opacity:0;transform:translate3d(-112%,-50%,0) scale(.88)} 15%{opacity:1} 28%{opacity:1;transform:translate3d(0,-34%,0) scale(1)} 74%{opacity:1;transform:translate3d(0,-34%,0) scale(1)} 100%{opacity:0;transform:translate3d(-112%,-50%,0) scale(.9)} } @keyframes brtest-alien-mobile-left{ 0%{opacity:0;transform:translate3d(112%,-50%,0) scaleX(-1) scale(.88)} 15%{opacity:1} 28%{opacity:1;transform:translate3d(0,-34%,0) scaleX(-1) scale(1)} 74%{opacity:1;transform:translate3d(0,-34%,0) scaleX(-1) scale(1)} 100%{opacity:0;transform:translate3d(112%,-50%,0) scaleX(-1) scale(.9)} } } @media(prefers-reduced-motion:reduce){ .battle-effects-enabled-page .battle-alien-ray-sprite, .battle-effects-enabled-page .battle-alien-ray-beam, .battle-effects-enabled-page .battle-side.effect-alien-ray-1-loser > .battle-image-wrap, .battle-effects-enabled-page .battle-alien-shard, .battle-effects-enabled-page .battle-side.effect-alien-ray-1-loser > .battle-copy, .battle-effects-enabled-page .battle-side.effect-alien-ray-1-winner .shade::after, .battle-effects-enabled-page .battle-alien-ray-cinders{ animation:none !important; } } /* ================================================================ Battle effect preset: emperor-shock-1 Hooded dark-emperor entrance with blue hand lightning. Uses a proper PNG sprite asset and a stronger electrocution finish. ================================================================ */ .battle-effects-enabled-page .battle-emperor-shock-sprite{ position:absolute; z-index:40; left:8%; bottom:-3%; display:block; width:clamp(180px,21vw,286px); max-width:34%; height:auto; opacity:0; visibility:hidden; pointer-events:none; object-fit:contain; filter: drop-shadow(0 0 1px var(--theme-role-shadow-rgba-255-255-255-3-a7d61f)) drop-shadow(0 0 16px var(--theme-role-shadow-rgba-111-161-255-24-ce3efe)) drop-shadow(0 12px 26px var(--theme-role-shadow-rgba-0-0-0-75-33bd21)); transform-origin:center bottom; will-change:transform,opacity; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-right .battle-emperor-shock-sprite{ visibility:visible; animation:brtest-emperor-rise-right 1.78s cubic-bezier(.2,.74,.18,1) both; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-left .battle-emperor-shock-sprite{ left:auto; right:8%; visibility:visible; animation:brtest-emperor-rise-left 1.78s cubic-bezier(.2,.74,.18,1) both; } .battle-effects-enabled-page .battle-emperor-shock-lightning{ position:absolute; z-index:39; top:45%; left:27%; width:68%; height:34%; overflow:visible; opacity:0; visibility:hidden; pointer-events:none; filter: drop-shadow(0 0 7px var(--theme-role-shadow-rgba-120-190-255-1-dab86d)) drop-shadow(0 0 18px var(--theme-role-shadow-rgba-65-115-255-92-623616)) drop-shadow(0 0 30px var(--theme-role-shadow-rgba-255-255-255-46-6944a4)); transform-origin:left center; will-change:transform,opacity; } .battle-effects-enabled-page .battle-emperor-shock-lightning path{ fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; } .battle-effects-enabled-page .battle-emperor-lightning-glow{ stroke:var(--theme-role-text-4d8dff); stroke-width:14; opacity:.96; } .battle-effects-enabled-page .battle-emperor-lightning-core{ stroke:var(--theme-role-text-fff); stroke-width:4; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-right .battle-emperor-shock-lightning{ visibility:visible; transform-origin:left center; animation:brtest-emperor-lightning-right .46s .48s ease-out both; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-left .battle-emperor-shock-lightning{ left:auto; right:27%; visibility:visible; /* Keep the SVG inside its existing box while mirroring it toward the left. */ transform-origin:center center; animation:brtest-emperor-lightning-left .46s .48s ease-out both; } .battle-effects-enabled-page .battle-side.effect-emperor-shock-1-loser{ background:var(--theme-role-surface-01030a); } .battle-effects-enabled-page .battle-side.effect-emperor-shock-1-loser .shade::before{ content:""; position:absolute; inset:0; opacity:0; pointer-events:none; background: radial-gradient(circle at 16% 22%,var(--theme-role-surface-rgba-255-255-255-96-da3d8a) 0 1.2%,transparent 4%), radial-gradient(circle at 69% 18%,var(--theme-role-surface-rgba-140-207-255-92-4b7c66) 0 1.2%,transparent 4%), radial-gradient(circle at 36% 47%,var(--theme-role-surface-rgba-255-255-255-92-0fe0e3) 0 1.1%,transparent 4%), radial-gradient(circle at 77% 61%,var(--theme-role-surface-rgba-116-194-255-88-0da898) 0 1.3%,transparent 4%), radial-gradient(circle at 29% 76%,var(--theme-role-surface-rgba-255-255-255-95-fb7089) 0 1.4%,transparent 4%), linear-gradient(110deg,transparent 0 22%,var(--theme-role-surface-rgba-117-175-255-16-b1d3a2) 32%,transparent 42%,var(--theme-role-surface-rgba-175-226-255-2-a61dd5) 53%,transparent 64%); mix-blend-mode:screen; animation:brtest-emperor-spark-overlay .92s .42s steps(2,end) both; } .battle-effects-enabled-page .battle-side.effect-emperor-shock-1-loser > .battle-image-wrap{ transform-origin:center center; animation:brtest-emperor-target-shock 1.16s .42s cubic-bezier(.22,.7,.35,1) both; will-change:transform,opacity,filter; } .battle-effects-enabled-page .battle-side.effect-emperor-shock-1-loser > .battle-copy{ animation:brtest-emperor-copy-shock .88s .42s ease-out both; } .battle-effects-enabled-page .battle-side.effect-emperor-shock-1-winner .shade::after{ content:""; position:absolute; inset:0; opacity:0; pointer-events:none; background:radial-gradient(circle at 48% 70%,var(--theme-role-surface-rgba-169-220-255-34-7b3c8e),var(--theme-role-surface-rgba-82-110-255-14-3642e6) 36%,transparent 72%); mix-blend-mode:screen; animation:brtest-emperor-winner-glow .95s .12s ease-out both; } @keyframes brtest-emperor-rise-right{ 0%{opacity:0;transform:translate3d(0,112%,0) scale(.88)} 13%{opacity:1} 26%{opacity:1;transform:translate3d(0,24%,0) scale(1)} 74%{opacity:1;transform:translate3d(0,24%,0) scale(1)} 100%{opacity:0;transform:translate3d(0,112%,0) scale(.92)} } @keyframes brtest-emperor-rise-left{ 0%{opacity:0;transform:translate3d(0,112%,0) scaleX(-1) scale(.88)} 13%{opacity:1} 26%{opacity:1;transform:translate3d(0,24%,0) scaleX(-1) scale(1)} 74%{opacity:1;transform:translate3d(0,24%,0) scaleX(-1) scale(1)} 100%{opacity:0;transform:translate3d(0,112%,0) scaleX(-1) scale(.92)} } @keyframes brtest-emperor-lightning-right{ 0%{opacity:0;transform:scaleX(.08) scaleY(.92)} 9%{opacity:1;transform:scaleX(.95) scaleY(1.04)} 26%{opacity:.18;transform:scaleX(1) scaleY(.96)} 42%{opacity:1;transform:scaleX(1.01) scaleY(1.03)} 61%{opacity:.12;transform:scaleX(1) scaleY(.98)} 76%{opacity:.92;transform:scaleX(1.01) scaleY(1.02)} 100%{opacity:0;transform:scaleX(1) scaleY(1)} } @keyframes brtest-emperor-lightning-left{ 0%{opacity:0;transform:scaleX(-.08) scaleY(.92)} 9%{opacity:1;transform:scaleX(-.95) scaleY(1.04)} 26%{opacity:.18;transform:scaleX(-1) scaleY(.96)} 42%{opacity:1;transform:scaleX(-1.01) scaleY(1.03)} 61%{opacity:.12;transform:scaleX(-1) scaleY(.98)} 76%{opacity:.92;transform:scaleX(-1.01) scaleY(1.02)} 100%{opacity:0;transform:scaleX(-1) scaleY(1)} } @keyframes brtest-emperor-target-shock{ 0%,5%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:brightness(.78) saturate(.82)} 12%{opacity:1;transform:translate3d(-1.1%,0,0) scale(1.01);filter:invert(.18) brightness(2.1) contrast(1.28) saturate(1.5) hue-rotate(182deg)} 18%{opacity:1;transform:translate3d(1.4%,-.2%,0) scale(.998);filter:invert(.92) brightness(1.92) contrast(1.7) saturate(2) hue-rotate(196deg)} 27%{opacity:1;transform:translate3d(-1.7%,.5%,0) scale(1.005);filter:invert(.45) brightness(1.48) contrast(1.55) saturate(1.85) hue-rotate(188deg)} 37%{opacity:1;transform:translate3d(1.1%,-.4%,0) scale(.996);filter:invert(1) brightness(1.8) contrast(2.02) saturate(2.2) hue-rotate(206deg)} 52%{opacity:.98;transform:translate3d(-.8%,.7%,0) scale(.988);filter:grayscale(.14) invert(.9) brightness(1.46) contrast(1.88) saturate(1.65) hue-rotate(196deg)} 70%{opacity:.94;transform:translate3d(.5%,1.1%,0) scale(.978);filter:grayscale(.3) invert(.83) brightness(1.16) contrast(1.96) saturate(1.22) hue-rotate(198deg)} 100%{opacity:.88;transform:translate3d(0,1.8%,0) scale(.972);filter:grayscale(.44) invert(.78) brightness(.96) contrast(2.12) saturate(.95) hue-rotate(200deg)} } @keyframes brtest-emperor-copy-shock{ 0%,10%{opacity:1;filter:none} 32%{opacity:1;filter:brightness(2.05) contrast(1.32)} 66%{opacity:.76;filter:invert(.86) brightness(1.08) hue-rotate(194deg)} 100%{opacity:.2;filter:brightness(.36) saturate(.62);transform:translateY(10px)} } @keyframes brtest-emperor-winner-glow{ 0%{opacity:0} 36%{opacity:.92} 100%{opacity:0} } @keyframes brtest-emperor-spark-overlay{ 0%{opacity:0} 18%{opacity:.95} 37%{opacity:.2} 56%{opacity:.88} 75%{opacity:.14} 100%{opacity:0} } @media(max-width:680px){ .battle-effects-enabled-page .battle-emperor-shock-sprite{ bottom:auto; width:clamp(126px,42vw,172px); max-width:none; filter: drop-shadow(0 0 1px var(--theme-role-shadow-rgba-255-255-255-32-206322)) drop-shadow(0 0 12px var(--theme-role-shadow-rgba-111-161-255-34-11bf73)) drop-shadow(0 8px 16px var(--theme-role-shadow-rgba-0-0-0-72-551182)); } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-right .battle-emperor-shock-sprite{ top:78%; left:-2%; right:auto; animation-name:brtest-emperor-mobile-right; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-left .battle-emperor-shock-sprite{ top:25%; left:auto; right:-2%; animation-name:brtest-emperor-mobile-left; } .battle-effects-enabled-page .battle-emperor-shock-lightning{ width:66%; height:20%; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-right .battle-emperor-shock-lightning{ top:62%; left:31%; right:auto; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-left .battle-emperor-shock-lightning{ top:12%; left:auto; right:31%; transform-origin:center center; } @keyframes brtest-emperor-mobile-right{ 0%{opacity:0;transform:translate3d(-112%,-50%,0) scale(.88)} 15%{opacity:1} 28%{opacity:1;transform:translate3d(0,-50%,0) scale(1)} 74%{opacity:1;transform:translate3d(0,-50%,0) scale(1)} 100%{opacity:0;transform:translate3d(-112%,-50%,0) scale(.9)} } @keyframes brtest-emperor-mobile-left{ 0%{opacity:0;transform:translate3d(112%,-50%,0) scaleX(-1) scale(.88)} 15%{opacity:1} 28%{opacity:1;transform:translate3d(0,-50%,0) scaleX(-1) scale(1)} 74%{opacity:1;transform:translate3d(0,-50%,0) scaleX(-1) scale(1)} 100%{opacity:0;transform:translate3d(112%,-50%,0) scaleX(-1) scale(.9)} } } @media(prefers-reduced-motion:reduce){ .battle-effects-enabled-page .battle-emperor-shock-sprite, .battle-effects-enabled-page .battle-emperor-shock-lightning, .battle-effects-enabled-page .battle-side.effect-emperor-shock-1-loser > .battle-image-wrap, .battle-effects-enabled-page .battle-side.effect-emperor-shock-1-loser > .battle-copy, .battle-effects-enabled-page .battle-side.effect-emperor-shock-1-loser .shade::before, .battle-effects-enabled-page .battle-side.effect-emperor-shock-1-winner .shade::after{ animation:none !important; } } /* ================================================================ Battle effects preference controls ================================================================ */ .desktop-effects-toggle{ display:none; } @media(min-width:761px){ .theme-battle-arena-v2 .desktop-effects-toggle{ height:34px !important; min-height:34px !important; max-height:34px !important; padding:0 10px !important; border:0 !important; border-radius:5px !important; display:inline-flex !important; align-items:center !important; align-self:center !important; justify-content:center !important; gap:6px !important; background:var(--theme-role-surface-rgba-7-10-24-62-078749) !important; color:var(--theme-role-text-f1f3f8) !important; font:inherit !important; font-size:10px !important; line-height:1 !important; font-weight:900 !important; letter-spacing:.035em !important; cursor:pointer !important; white-space:nowrap !important; box-shadow:none !important; box-sizing:border-box !important; } .theme-battle-arena-v2 .desktop-effects-toggle > span{ display:inline !important; padding:0 !important; line-height:1 !important; } .theme-battle-arena-v2 .desktop-effects-toggle b{ position:static !important; display:inline !important; width:auto !important; min-width:0 !important; height:auto !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--theme-arena-electric) !important; font-size:10px !important; line-height:1 !important; font-weight:1000 !important; box-shadow:none !important; } .theme-battle-arena-v2 .desktop-effects-toggle[aria-pressed="false"]{ opacity:.7 !important; } .theme-battle-arena-v2 .desktop-effects-toggle[aria-pressed="false"] b{ color:var(--theme-role-text-a6adba) !important; } .theme-battle-arena-v2 .desktop-effects-toggle:hover{ background:var(--theme-role-surface-rgba-7-10-24-86-91d3b9) !important; color:var(--theme-role-text-fff) !important; } } .mobile-effects-toggle{ display:none; } @media(max-width:760px){ .theme-battle-arena-v2 .desktop-effects-toggle{ display:none !important; } .theme-battle-arena-v2 .mobile-battle-options-list > .mobile-effects-toggle{ width:100% !important; min-height:66px !important; padding:13px 52px 13px 15px !important; border:1px solid var(--theme-role-border-323b57) !important; border-radius:7px !important; position:relative !important; display:flex !important; align-items:center !important; justify-content:space-between !important; text-align:left !important; background:var(--theme-role-surface-12182e) !important; color:var(--theme-role-text-fff) !important; cursor:pointer !important; box-shadow:none !important; } .theme-battle-arena-v2 .mobile-effects-toggle > span{ display:flex !important; flex-direction:column !important; gap:4px !important; } .theme-battle-arena-v2 .mobile-effects-toggle strong{ color:var(--theme-role-text-fff) !important; font-size:13px !important; line-height:1.1 !important; font-weight:1000 !important; letter-spacing:.02em !important; } .theme-battle-arena-v2 .mobile-effects-toggle small{ color:var(--theme-role-text-9ca5b8) !important; font-size:10px !important; line-height:1.25 !important; font-weight:700 !important; } .theme-battle-arena-v2 .mobile-effects-toggle b{ position:absolute !important; right:14px !important; top:50% !important; min-width:34px !important; padding:5px 6px !important; transform:translateY(-50%) !important; border-radius:4px !important; background:var(--theme-arena-electric) !important; color:var(--theme-role-text-080b12) !important; font-size:10px !important; line-height:1 !important; font-weight:1000 !important; text-align:center !important; } .theme-battle-arena-v2 .mobile-effects-toggle[aria-pressed="false"]{ opacity:.72 !important; } .theme-battle-arena-v2 .mobile-effects-toggle[aria-pressed="false"] b{ background:var(--theme-role-surface-3d4558) !important; color:var(--theme-role-text-d8dce4) !important; } } /* ================================================================ BattleRanker V3.?? — LIGHTNING AFTER-EFFECT CLEANUP Keep the approved lightning strike. Replace the old four-edge crackle frame with a compact electric shockwave on the losing side. ================================================================ */ /* ================================================================ Emperor Shock V7 — sprite-anchored lightning Character + SVG lightning now share one wrapper/coordinate system. The bolt origin is tied to the hand position on the sprite, so scaling the effect for desktop/mobile cannot make the lightning drift away. ================================================================ */ .battle-effects-enabled-page .battle-emperor-shock-wrap{ /* Single sprite-space hand anchor used at every viewport size. */ --emperor-hand-x:68%; --emperor-hand-y:6.5%; position:absolute; z-index:40; left:8%; bottom:-3%; display:block; width:clamp(180px,21vw,286px); opacity:0; visibility:hidden; pointer-events:none; overflow:visible; transform-origin:center bottom; will-change:transform,opacity; } .battle-effects-enabled-page .battle-emperor-shock-wrap .battle-emperor-shock-sprite{ position:relative !important; inset:auto !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; display:block; width:100% !important; max-width:none !important; height:auto !important; opacity:1 !important; visibility:visible !important; animation:none !important; transform:none; transform-origin:center center; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-right .battle-emperor-shock-wrap{ visibility:visible; animation:brtest-emperor-wrap-rise 1.78s cubic-bezier(.2,.74,.18,1) both; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-left .battle-emperor-shock-wrap{ left:auto; right:8%; visibility:visible; animation:brtest-emperor-wrap-rise 1.78s cubic-bezier(.2,.74,.18,1) both; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-left .battle-emperor-shock-wrap .battle-emperor-shock-sprite{ transform:scaleX(-1); } /* Hand anchor: approximately 70% across / 45% down the source sprite. Lightning box extends beyond the wrapper toward the losing contender. */ .battle-effects-enabled-page .battle-emperor-shock-wrap .battle-emperor-shock-lightning{ position:absolute !important; z-index:41; top:var(--emperor-hand-y) !important; left:var(--emperor-hand-x) !important; right:auto !important; width:235% !important; height:30% !important; overflow:visible; opacity:0; visibility:hidden; pointer-events:none; transform-origin:left center !important; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-right .battle-emperor-shock-wrap .battle-emperor-shock-lightning{ visibility:visible; animation:brtest-emperor-lightning-right .46s .48s ease-out both; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-left .battle-emperor-shock-wrap .battle-emperor-shock-lightning{ /* Mirrored emperor: hand anchor is now ~32% from the left edge. Keep the origin on the left edge, then use negative scaleX in the keyframes so the bolt grows outward to the left instead of behind the sprite. */ left:calc(100% - var(--emperor-hand-x)) !important; right:auto !important; transform-origin:left center !important; visibility:visible; animation:brtest-emperor-lightning-left .46s .48s ease-out both; } @keyframes brtest-emperor-wrap-rise{ 0%{opacity:0;transform:translate3d(0,112%,0) scale(.88)} 13%{opacity:1} 26%{opacity:1;transform:translate3d(0,24%,0) scale(1)} 74%{opacity:1;transform:translate3d(0,24%,0) scale(1)} 100%{opacity:0;transform:translate3d(0,112%,0) scale(.92)} } @media(max-width:680px){ .battle-effects-enabled-page .battle-emperor-shock-wrap{ bottom:auto; width:clamp(126px,42vw,172px); } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-right .battle-emperor-shock-wrap{ top:78%; left:-2%; right:auto; animation:brtest-emperor-wrap-mobile-right 1.78s cubic-bezier(.2,.74,.18,1) both; } .battle-effects-enabled-page .battle-visual.effect-emperor-shock-1.is-effect-active.effect-loser-left .battle-emperor-shock-wrap{ top:25%; left:auto; right:-2%; animation:brtest-emperor-wrap-mobile-left 1.78s cubic-bezier(.2,.74,.18,1) both; } /* Hand anchor is deliberately NOT overridden on mobile. Only bolt reach changes; its origin remains locked to the same point in the source sprite at every viewport size. */ .battle-effects-enabled-page .battle-emperor-shock-wrap .battle-emperor-shock-lightning{ width:255% !important; height:30% !important; } @keyframes brtest-emperor-wrap-mobile-right{ 0%{opacity:0;transform:translate3d(-112%,-50%,0) scale(.88)} 15%{opacity:1} 28%{opacity:1;transform:translate3d(0,-50%,0) scale(1)} 74%{opacity:1;transform:translate3d(0,-50%,0) scale(1)} 100%{opacity:0;transform:translate3d(-112%,-50%,0) scale(.9)} } @keyframes brtest-emperor-wrap-mobile-left{ 0%{opacity:0;transform:translate3d(112%,-50%,0) scale(.88)} 15%{opacity:1} 28%{opacity:1;transform:translate3d(0,-50%,0) scale(1)} 74%{opacity:1;transform:translate3d(0,-50%,0) scale(1)} 100%{opacity:0;transform:translate3d(112%,-50%,0) scale(.9)} } } @media(prefers-reduced-motion:reduce){ .battle-effects-enabled-page .battle-emperor-shock-wrap{ animation:none !important; } } /* ================================================================ Alien Ray V20 — tablet-only beam calibration Preserve the approved desktop + mobile positions. iPad/tablet widths need the beam lower because the alien sprite and arena scale differently. ================================================================ */ @media(min-width:681px) and (max-width:1100px){ .battle-effects-enabled-page .battle-visual.effect-alien-ray-1.is-effect-active .battle-alien-ray-beam{ top:83% !important; } } /* ================================================================ BattleRanker V3.70 — CLEAN TITLE BAR TRIAL - remove the desktop Pick Winner sticker - remove the yellow ranking-title slab - use clean white title text on the dark Battle header - mobile follows the same quieter title treatment Battle mechanics / effects / divider geometry untouched. ================================================================ */ /* Retire the comic Pick Winner sticker completely. */ .theme-battle-arena-v2 .battle-stage::before, .theme-battle-arena-v2 .battle-stage.feed-ended::before{ content:none !important; display:none !important; } /* Desktop: ranking title becomes typography, not a yellow banner. */ @media(min-width:761px){ .theme-battle-arena-v2 .battle-topline{ min-height:66px !important; padding:8px 34px 7px !important; background:var(--theme-role-surface-11172e) !important; border-bottom:1px solid var(--theme-role-border-35405c) !important; } .theme-battle-arena-v2 .battle-topline > strong{ width:auto !important; max-width:min(980px,80vw) !important; min-height:0 !important; margin:0 auto !important; padding:4px 14px !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--theme-role-text-f5f7fb) !important; box-shadow:none !important; font-size:clamp(27px,2.45vw,39px) !important; line-height:.98 !important; font-weight:1000 !important; letter-spacing:-.03em !important; text-shadow:0 3px 10px var(--theme-role-shadow-rgba-0-0-0-34-c366e4) !important; } } /* Mobile: remove the yellow title chip here as well. */ @media(max-width:760px){ .theme-battle-arena-v2 .battle-topline{ min-height:45px !important; padding:7px 10px 8px !important; background:var(--theme-role-surface-10152d) !important; border-bottom:1px solid var(--theme-role-border-303755) !important; } .theme-battle-arena-v2 .battle-topline > strong{ width:auto !important; max-width:94vw !important; min-height:0 !important; margin:0 auto !important; padding:2px 8px !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--theme-role-text-f5f7fb) !important; box-shadow:none !important; font-size:clamp(16px,4.7vw,21px) !important; line-height:1.05 !important; letter-spacing:-.02em !important; text-shadow:0 2px 7px var(--theme-role-shadow-rgba-0-0-0-38-fba052) !important; } } /* ================================================================ BattleRanker V3.70.1 — mobile title emphasis Keep the clean dark title bar, but restore a small electric-yellow cue. ================================================================ */ @media(max-width:760px){ .theme-battle-arena-v2 .battle-topline > strong{ color:var(--theme-role-text-fff) !important; font-size:clamp(17px,5vw,22px) !important; font-weight:1000 !important; text-shadow:0 2px 8px var(--theme-role-shadow-rgba-0-0-0-48-c5c38f) !important; } .theme-battle-arena-v2 .battle-topline > strong::after{ content:""; display:block; width:38px; height:3px; margin:5px auto 0; border-radius:3px; background:var(--theme-arena-electric); box-shadow:0 0 10px var(--theme-role-shadow-rgba-231-255-0-18-55f4af); } } /* ================================================================ BattleRanker V3.71 — RANDOM PLAYER IDENTITY + LIST HANDOFF Makes the header Battle destination self-explanatory and restores a prominent route from each mixed matchup into its full Battle List. Battle arena/effect geometry is intentionally untouched. ================================================================ */ .random-player-banner{ min-height:58px; display:flex; align-items:center; gap:12px; margin:0 0 10px; padding:10px 16px; border:1px solid var(--theme-role-border-35405c); border-left:4px solid var(--theme-arena-electric); border-radius:9px; background: linear-gradient(90deg,var(--theme-role-surface-rgba-231-255-0-06-6e76e4),transparent 34%), var(--theme-role-surface-11172e); box-shadow:0 10px 24px var(--theme-role-shadow-rgba-0-0-0-18-99654a); } .random-player-banner-bolt{ flex:0 0 auto; color:var(--theme-arena-electric); font-size:26px; line-height:1; filter:drop-shadow(0 0 8px var(--theme-role-shadow-rgba-231-255-0-18-55f4af)); } .random-player-banner-copy{ min-width:0; display:flex; align-items:baseline; gap:12px; } .random-player-banner-copy strong{ color:var(--theme-role-text-fff); font-family:"Arial Narrow","Segoe UI",Arial,sans-serif; font-size:17px; line-height:1; font-style:italic; font-weight:1000; letter-spacing:.025em; } .random-player-banner-copy small{ color:var(--theme-role-text-aeb6ca); font-size:11px; line-height:1.2; font-weight:800; } @media(min-width:761px){ .theme-battle-arena-v2 .battle-card-source-label{ color:var(--theme-arena-electric); font:inherit; font-style:normal; } .theme-battle-arena-v2 .battle-card-play-ranking:not([hidden]){ min-height:34px; display:inline-flex; align-items:center; justify-content:center; gap:5px; margin-top:10px; padding:0 12px; border:1px solid var(--theme-arena-electric); border-radius:5px; background:var(--theme-arena-electric); color:var(--theme-ink); box-shadow:0 4px 13px var(--theme-role-shadow-rgba-0-0-0-22-2682fb); font-size:12px; text-shadow:none; } .theme-battle-arena-v2 .battle-card-play-ranking:hover{ background:var(--theme-role-surface-fff); color:var(--theme-ink); text-shadow:none; } } @media(max-width:760px){ .random-player-banner{ min-height:54px; gap:9px; margin:0 0 8px; padding:9px 11px; border-radius:7px; } .random-player-banner-bolt{ font-size:22px; } .random-player-banner-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; } .random-player-banner-copy strong{ font-size:15px; } .random-player-banner-copy small{ font-size:10px; } .mobile-ranking-switch #mobileRankingListLink{ padding:0 5px; color:var(--theme-arena-electric); font-size:10px; line-height:1.05; text-align:center; } } /* V3.71.1 — the current desktop composition hides the old centre context block. Use its permanent left footer action for the random-to-list handoff. */ @media(min-width:761px){ .theme-battle-arena-v2 #battleCardRankingLink.is-battle-this-list{ color:var(--theme-arena-electric) !important; background: linear-gradient(90deg,var(--theme-role-surface-rgba-231-255-0-08-15f93d),transparent) !important; } .theme-battle-arena-v2 #battleCardRankingLink.is-battle-this-list::after{ content:"⚡ BATTLE THIS LIST" !important; color:var(--theme-arena-electric) !important; font-size:18px !important; text-shadow:0 0 12px var(--theme-role-shadow-rgba-231-255-0-18-55f4af) !important; } .theme-battle-arena-v2 #battleCardRankingLink.is-battle-this-list:hover::after{ color:var(--theme-role-text-fff) !important; } } /* ================================================================ BattleRanker V3.72 — RANDOM TITLE BREAKOUT Random mode uses the current list title itself as the route into that specific Battle List. The existing footer returns to VIEW RANKING. No arena/effect/divider geometry is changed here. ================================================================ */ /* The old Random Battle Player banner has been removed from the markup. */ .random-player-banner{ display:none !important; } .theme-battle-arena-v2 #rankingTitle.is-random-list-link{ pointer-events:auto !important; } .theme-battle-arena-v2 #rankingTitle .random-list-title-link{ display:flex; align-items:center; justify-content:center; gap:.28em; width:100%; color:inherit !important; text-decoration:none !important; cursor:pointer; /* The battle header has an old generic `.battle-topline a` rule that shrinks links to 10px. This title link must inherit the title's full typography instead. */ font:inherit !important; font-size:inherit !important; font-weight:inherit !important; font-style:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; text-align:center !important; text-shadow:inherit !important; } .theme-battle-arena-v2 #rankingTitle .random-list-title-arrow{ flex:0 0 auto; color:var(--theme-arena-electric); font-size:.58em; line-height:1; font-style:normal; font-weight:1000; transform:translateY(-.14em); text-shadow:0 0 10px var(--theme-role-shadow-rgba-231-255-0-18-55f4af); } .theme-battle-arena-v2 #rankingTitle .random-list-title-link:hover .random-list-title-arrow, .theme-battle-arena-v2 #rankingTitle .random-list-title-link:focus-visible .random-list-title-arrow{ color:var(--theme-role-text-fff); } @media(min-width:761px){ /* Restore the normal desktop footer destination and wording. */ .theme-battle-arena-v2 .battle-card-context-actions > #battleCardRankingLink::after{ content:"VIEW RANKING" !important; } } @media(max-width:760px){ /* The entire rendered title is the tap target, not just the ↗ glyph. */ .theme-battle-arena-v2 #rankingTitle.is-random-list-link{ width:100% !important; max-width:100% !important; padding:0 !important; } .theme-battle-arena-v2 #rankingTitle .random-list-title-link{ min-height:38px; padding:3px 10px 5px; } /* Suppress the old decorative underline only when the title is a link; the yellow ↗ now provides the interaction cue. */ .theme-battle-arena-v2 #rankingTitle.is-random-list-link::after{ content:none !important; display:none !important; } }